/* User agent inspector UAG-18. Instrument Sheet chassis, accent #7E4E5E (mulberry). */
:root{
  --paper:#EDE9E2;
  --ink:#1E1D1B;
  --panel:#DEDACF;
  --line:#B7B0A2;
  --chassis:#2A2924;
  --accent:#7E4E5E;
  --on-accent:#EDE9E2;          /* paper on mulberry is 5.5:1, so every size of type may sit on it */
  --on-accent-ink:#1E1D1B;      /* the ink-filled primary button on the slab */
  --font-ui:"Familjen Grotesk",system-ui,sans-serif;
  --font-spec:"Martian Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
  :root{--paper:#1E1D1B;--ink:#EDE9E2;--panel:#2A2924;--line:#4A473F;--chassis:#111}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:1rem;line-height:1.55;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,dt,ol,ul,figure,pre,fieldset,table{margin:0}
table{border-collapse:collapse;width:100%}
[hidden]{display:none!important}
code{font-family:var(--font-spec);font-size:.8em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* label strip */
.strip{max-width:1120px;margin:0 auto;padding:18px 32px 0;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;border-bottom:1px solid var(--line)}
.strip-maker{text-decoration:none;padding-bottom:12px}
.strip-maker:hover{text-decoration:underline;text-underline-offset:3px}
.strip-code{padding-bottom:12px}

/* page */
.wrap{max-width:1120px;margin:0 auto;padding:40px 32px 0}
.title{font-size:4.5rem;font-weight:600;line-height:1;letter-spacing:-.01em;margin-bottom:16px}
.lede{font-size:1.125rem;max-width:60ch;margin-bottom:28px}
.lede strong{font-weight:600}
.subhead{font-size:1.375rem;font-weight:500;line-height:1.25}
.section-head{font-size:2rem;font-weight:600;line-height:1.1;margin:40px 0 14px}

/* the mulberry slab: the one accent shape. The string is the headline, its lies underlined */
.hero{position:relative;background:var(--accent);color:var(--on-accent);padding:36px 40px 36px}
.hero::before,.hero::after,.hero>.ticks::before,.hero>.ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--on-accent);pointer-events:none;z-index:2}
.hero::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.hero::after{top:0;right:0;border-top-width:1px;border-right-width:1px}
.hero>.ticks::before{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.hero>.ticks::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.ua-label{font-size:.9375rem;font-weight:500;margin-bottom:10px;opacity:.9}
.ua{display:block;font-family:var(--font-spec);font-weight:500;font-size:clamp(1.15rem,2.6vw,2.25rem);line-height:1.32;letter-spacing:.005em;min-height:2.7em;margin-bottom:18px;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;cursor:text}
.ua mark{background:transparent;color:inherit;text-decoration:underline dotted;text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-skip-ink:none}
.verdict{font-size:1.5rem;font-weight:500;line-height:1.25;max-width:56ch;margin-bottom:24px;min-height:1.25em}

/* the teletype cursor: a block of type that sits at the end of a value while it types in */
.cur{display:inline-block;width:.6em;height:1em;vertical-align:-.15em;background:currentColor;margin-left:.08em;animation:blink .9s steps(2,start) infinite}
.is-typing .cur{animation:none}
@keyframes blink{to{visibility:hidden}}

/* buttons */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn{position:relative;display:inline-block;padding:12px 18px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:500;line-height:1.2;cursor:pointer;border-radius:0;text-decoration:none}
.btn:hover{background:var(--panel)}
.btn:disabled{opacity:.45;cursor:default}
.btn.is-done{background:var(--ink);color:var(--paper)}
/* on the slab: the primary is ink-filled, the secondary paper-filled; both stay AA in either scheme */
.btn-primary{background:var(--on-accent-ink);border-color:var(--on-accent-ink);color:var(--on-accent)}
.btn-primary:hover{background:var(--on-accent-ink)}
.btn-primary.is-done{background:var(--on-accent);border-color:var(--on-accent);color:var(--on-accent-ink)}
.btn-primary .ticks{position:absolute;inset:0;pointer-events:none}
.btn-primary::before,.btn-primary::after,.btn-primary .ticks::before,.btn-primary .ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--on-accent);opacity:0;pointer-events:none}
.btn-primary::before{top:-6px;left:-6px;border-top-width:1px;border-left-width:1px}
.btn-primary::after{top:-6px;right:-6px;border-top-width:1px;border-right-width:1px}
.btn-primary .ticks::before{bottom:-6px;left:-6px;border-bottom-width:1px;border-left-width:1px}
.btn-primary .ticks::after{bottom:-6px;right:-6px;border-bottom-width:1px;border-right-width:1px}
.btn-primary:hover::before,.btn-primary:hover::after,.btn-primary:hover .ticks::before,.btn-primary:hover .ticks::after,
.btn-primary:focus-visible::before,.btn-primary:focus-visible::after,.btn-primary:focus-visible .ticks::before,.btn-primary:focus-visible .ticks::after{opacity:1}
.btn-primary:focus-visible{outline-color:var(--on-accent);outline-offset:4px}
.btn-paper{background:var(--on-accent);border-color:var(--on-accent);color:var(--on-accent-ink)}
.btn-paper:hover{background:#DEDACF}
.btn-paper:focus-visible{outline-color:var(--on-accent)}
.btn-paper.is-done{background:var(--on-accent-ink);border-color:var(--on-accent-ink);color:var(--on-accent)}
.hint{font-size:1.125rem;font-weight:500;margin-left:6px}

/* reading line */
.reading{font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;white-space:pre;margin:12px 0 0}

/* the bench: the spec table on the left, codecs + network on the right */
.bench{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 32px;margin-top:28px;align-items:start}
.left{grid-column:span 7;min-width:0}
.controls{grid-column:span 5;min-width:0;display:grid;gap:24px}
.sheet-note{font-size:.9375rem;margin:6px 0 12px;max-width:60ch}

/* the spec table: group rows in the panel tint, one label + one reading per line, rules at cell edges only */
.spec{border:1px solid var(--line);background:var(--paper)}
.spec tr.grp th{text-align:left;font-weight:500;font-size:1.0625rem;padding:9px 14px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec tbody tr:first-child.grp th{border-top:0}
.spec tr.row th,.spec tr.row td{padding:8px 14px;vertical-align:top;border-bottom:1px solid var(--line);text-align:left}
.spec tr.row:last-child th,.spec tr.row:last-child td{border-bottom:0}
.spec tr.row th{font-weight:400;width:34%;border-right:1px solid var(--line);font-size:.9375rem;line-height:1.4}
.spec tr.row td{min-width:0}
.spec .v{font-family:var(--font-spec);font-size:.8125rem;font-weight:500;letter-spacing:.01em;line-height:1.5;overflow-wrap:anywhere}
.spec .v:empty{min-height:1.5em;display:block}
.spec .n{display:block;font-size:.875rem;line-height:1.4;opacity:.78;margin-top:2px}
.spec .n:empty{display:none}
.spec tr.is-hint .n{opacity:1}
.spec .netrow td{padding:14px}
.spec .netrow .actions{gap:12px}
/* the tick: a small mulberry pip that blinks beside the viewport when the window is resized */
.pip{display:inline-block;width:8px;height:8px;margin-left:10px;vertical-align:baseline;background:var(--accent);opacity:0}
.pip.is-tick{animation:pip .45s var(--ease) both}
@keyframes pip{0%{opacity:1;transform:scale(1.6)}70%{opacity:1;transform:none}100%{opacity:0}}
.spec .v.is-fresh{animation:fresh .4s var(--ease) both}
@keyframes fresh{0%{color:var(--accent)}100%{color:inherit}}

/* panels */
.panel{position:relative;border:1px solid var(--line);background:var(--panel);padding:24px 28px 26px;display:grid;gap:14px}
.panel-note{font-size:.9375rem;max-width:52ch}
.panel-foot{font-size:.875rem;opacity:.8;max-width:52ch}
.codecs{border:1px solid var(--line);background:var(--paper)}
.codecs th,.codecs td{padding:7px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.35;vertical-align:top}
.codecs th{font-weight:500}
.codecs thead th{background:var(--panel);font-size:.875rem}
.codecs tbody tr:last-child td,.codecs tbody tr:last-child th{border-bottom:0}
.codecs td+td,.codecs th+th{border-left:1px solid var(--line)}
.codecs tbody th{font-weight:400}
.codecs tbody th small{display:block;font-size:.8125rem;opacity:.72}
.codecs td .v{font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em}
.codecs td.is-no .v{opacity:.55}
.net-status{font-size:.9375rem}

/* notes */
.notes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.notes>*{grid-column:span 8}
.notes p{max-width:68ch;margin-bottom:14px}
.lies{display:block;border:1px solid var(--line);background:var(--paper)}
.lies dt{font-family:var(--font-spec);font-size:.8125rem;font-weight:500;padding:10px 14px 0;overflow-wrap:anywhere}
.lies dt span{text-decoration:underline dotted var(--accent);text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-skip-ink:none}
.lies dd{padding:4px 14px 10px;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.45}
.lies dd:last-of-type{border-bottom:0}
.lies-none{padding:10px 14px}

.foot{max-width:1120px;margin:0 auto;padding:20px 32px 40px;font-size:.875rem;opacity:.8}
.foot p{max-width:70ch}

/* narrow screens */
@media (max-width:960px){
  .notes>*{grid-column:span 12}
  .bench{grid-template-columns:1fr}
  .left,.controls{grid-column:span 1}
}
@media (max-width:640px){
  .strip{padding:14px 16px 0}
  .wrap{padding:28px 16px 0}
  .title{font-size:2.75rem}
  .lede{font-size:1rem}
  .hero{padding:22px 18px 22px}
  .ua{font-size:1rem;margin-bottom:14px}
  .verdict{font-size:1.25rem;margin-bottom:18px}
  .hint{display:none}
  .spec tr.row th{width:38%;padding:8px 10px;font-size:.875rem}
  .spec tr.row td{padding:8px 10px}
  .spec .v{font-size:.75rem}
  .spec .n{font-size:.8125rem}
  .spec tr.grp th{padding:8px 10px;font-size:1rem}
  .spec .netrow td{padding:12px 10px}
  .panel{padding:20px 16px 22px}
  .codecs th,.codecs td{padding:6px 8px;font-size:.875rem}
  .section-head{font-size:1.625rem}
  .foot{padding:16px 16px 32px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .cur{display:none}
}

/* client hints panel: the raw answer in the spec face, since it is machine output */
.hints{font-family:var(--font-spec);font-size:.75rem;font-weight:500;line-height:1.55;letter-spacing:.01em;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line);background:var(--paper);padding:12px 14px;min-height:6em;margin:0}
.hints.is-none{font-family:var(--font-ui);font-size:.9375rem;font-weight:400;letter-spacing:0}