.uni-button{display:inline-flex;gap:.25em;align-items:center;justify-content:center;padding-inline:1em;border-radius:.125rem;border:none;background-color:transparent;cursor:pointer;-webkit-appearance:none;font-family:Helvetica Neue,Arial,sans-serif;font-weight:700;vertical-align:middle;text-align:center;text-decoration:none}.uni-button--primary{background-color:#027dbb;color:#fff}.uni-button--primary:hover{background-color:#026ca1}.uni-button--primary:active{background-color:#01547e}.uni-button--secondary{background-color:var(--color-typewriter);color:#fff}.uni-button--secondary:hover,.uni-button--secondary:active{background-color:var(--color-dark-ink)}.uni-button--subtle{background-color:var(--color-le-bg-level2);color:var(--text-le-nonessential)}.uni-button--subtle:hover{background-color:var(--color-le-bg-level2-accent);color:var(--text-le-subtle)}.uni-button--subtle:active{color:var(--text-le-default)}.uni-button--medium{height:2.5em;font-size:.9rem}.uni-button--full{width:100%;height:2.5em;font-size:.9rem}.uni-button img,.uni-button svg,.uni-button span{width:1.5em}.uni-button img,.uni-button svg,.uni-button span img,.uni-button span svg{display:block;padding-right:5px}#app{width:100%}html{height:100%}body{display:flex;align-items:center;justify-content:center;min-height:100%}main,main *{box-sizing:border-box}main{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto auto;width:100%;width:900px;margin:2rem auto;padding-block-end:5rem;gap:2rem;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{display:flex;gap:1ch;align-items:center;justify-content:center;grid-column:1 / span 2;grid-row:1;margin:0;font-family:Teko;font-weight:400;text-transform:uppercase;letter-spacing:.1em;text-align:center}h1 .icon{width:1em;height:1em}h1 span{line-height:0}.icon{display:inline-block;width:1.5em}select{padding:5px;border:1px solid var(--text-le-divider);border-radius:2px}#url-input{grid-column:1 / span 2;grid-row:2}#url-input input{width:100%;padding:.5em;font-size:16px;font-family:Source Code Pro,monospace}textarea{width:100%;height:4rem;padding:.75em;border:1px solid var(--text-le-divider);color:var(--text-le-subtle)}textarea:focus{border-color:var(--color-electric);box-shadow:0 2px 4px #009ce340;outline:0}textarea:disabled{color:var(--text-le-nonessential);background-color:var(--color-le-bg-level2)}#url-actions{display:flex;gap:.5em}input[type=checkbox]{color:var(--color-electric)}ul{padding-left:0;list-style:none}#url-details ul{margin-block:2rem}#url-details li{display:flex;align-items:center;gap:.5em;margin-bottom:.5em}.test--pass{color:var(--color-utility-confirmation)}.test--fail{color:var(--color-utility-critical)}.test--fail span:last-child{text-decoration:line-through}table{width:100%;margin-block-start:2em;border-collapse:collapse;border-top:1px solid var(--text-le-divider);border-bottom:1px solid var(--text-le-divider)}caption{margin-bottom:.5em;text-align:left;font-weight:700;white-space:nowrap}tr+tr>th,tr+tr>td{border-top:1px solid #ddd}th,td{padding-block:.5em;font-size:.9em}th{width:auto;padding-inline:1em;text-align:left;font-weight:400;color:var(--text-le-nonessential);background:var(--color-le-bg-level1)}td{width:100%;padding-inline-start:1em;color:var(--text-le-subtle);font-family:monospace}.hidden-input{position:absolute;opacity:0;z-index:-1}img,svg{width:100%;height:100%}#qr-img{box-sizing:content-box;aspect-ratio:1;margin-bottom:1rem;overflow:hidden;transition:all .2s linear;filter:blur(0)}#qr-img.is-preview{opacity:.25;filter:blur(3px)}#qr-img.qr-placeholder{background-color:var(--color-white);box-shadow:inset 0 0 20px #ddd;border-radius:.25em}#qr-actions{display:flex;flex-direction:column;gap:.5em}#advanced-options{grid-column:1 / span 2;grid-row:3}label #advanced{cursor:pointer}#advanced-options label:hover{color:var(--color-ink)}:root{--color-electric: rgb(0, 156, 227, 1);--color-ink: rgb(35, 42, 49, 1);--color-dark-ink: rgb(25, 31, 36, 1);--color-light-ink: rgb(56, 67, 79, 1);--color-typewriter: rgb(78, 93, 108, 1);--color-light-gray: rgb(249, 250, 251, 1);--color-gray: rgb(237, 240, 242, 1);--color-dark-gray: rgb(220, 225, 230, 1);--color-white: rgb(255, 255, 255, 1);--text-le-default: rgb(19, 41, 63, .8);--text-le-contrast: rgb(19, 41, 63, 1);--text-le-subtle: rgb(19, 41, 63, .65);--text-le-nonessential: rgb(19, 41, 63, .4);--text-le-divider: rgb(165, 172, 180, .6);--text-de-default: rgb(230, 242, 255, .8);--text-de-contrast: rgb(230, 242, 255, 1);--text-de-subtle: rgb(230, 242, 255, .65);--text-de-nonessential: rgb(230, 242, 255, .4);--text-de-divider: rgb(104, 117, 129, .6);--color-le-bg-level0: rgba(255, 255, 255, 1);--color-le-bg-level0-accent: rgba(237, 240, 242, 1);--color-le-bg-level1: rgba(249, 250, 251, 1);--color-le-bg-level1-accent: rgba(228, 231, 235, 1);--color-le-bg-level2: rgba(242, 245, 247, 1);--color-le-bg-level2-accent: rgba(220, 225, 230, 1);--color-de-bg-level0: rgba(16, 20, 23, 1);--color-de-bg-level0-accent: rgba(35, 42, 49, 1);--color-de-bg-level1: rgba(25, 31, 36, 1);--color-de-bg-level1-accent: rgba(44, 53, 62, 1);--color-de-bg-level2: rgba(35, 42, 49, 1);--color-de-bg-level2-accent: rgba(49, 59, 69, 1);--light-color-background: var(--color-le-bg-level1);--light-color-panel: var(--color-le-bg-level0);--light-color-text: var(--text-le-default);--dark-color-background: var(--color-de-bg-level0);--dark-color-panel: var(--color-de-bg-level1);--dark-color-text: var(--text-de-default);--color-utility-warning: rgb(242, 182, 0, 1);--color-utility-critical: rgb(232, 28, 0, 1);--color-utility-confirmation: rgb(120, 161, 0, 1)}@media (prefers-color-scheme: dark){:root{--color-background: var(--dark-color-background);--color-panel: var(--dark-color-panel);--color-text: var(--dark-color-text)}}body.dark{--color-background: var(--dark-color-background);--color-panel: var(--dark-color-panel);--color-text: var(--dark-color-text)}@media (prefers-color-scheme: light){:root{--color-background: var(--light-color-background);--color-panel: var(--light-color-panel);--color-text: var(--light-color-text)}}body.light{--color-background: var(--light-color-background);--color-panel: var(--light-color-panel);--color-text: var(--light-color-text)}body{background-color:var(--color-background);color:var(--color-text);font-weight:500}.panel{padding:2rem;background-color:var(--color-panel);border:1px solid;border-radius:2px;border-color:var(--text-le-divider)}
