/* normalcomputer.co: site.css
   Tokens: copied from the NCC system, version 2.1.0 (system/tokens/: colors, typography,
   space, depth, surfaces, typography-screen, depth-screen), cut to the properties and scopes
   this site reaches. Regenerate with tools/build-site-css.mjs; never hand-edit the token block.
   Fonts: the url() paths below are /fonts/ (web/fonts/, the one copy; FONTS=<dir> overrides). */
@font-face{font-family:"Plantin MT Pro";src:url("/fonts/plantin-roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Plantin MT Pro";src:url("/fonts/plantin-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:"Input Mono Narrow";src:url("/fonts/input-mono-narrow.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"DotGothic16";src:url("/fonts/dotgothic16.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
/* ---- tokens ---- */
:root{--paper:#F8F7F2;--putty:#E4DCC9;--chassis:#C9BC9C;--muted:#6A6252;--ink:#15171D;--paper-pale:#FEFDFA;--paper-tint:#F3F0E8;--putty-tint:#E7E0CF;--rule-hairline:#D8D4CA;--rule-heavy:#B9AF97;--ink-soft:#45423A;--bondi-lit:#4FC2D6;--bondi-pale:#9FDCE8;--snow:#E9EDF0;--chrome-shade:#DFE5EA;--chrome-rim:#4E5860;--faceplate-deep:#654182;--shell-deep:#99145B;--chassis-edge:#9C9075;--text-on-plastic:var(--ink);--surface-field:var(--paper-pale)}
:root{--font-display:"Plantin MT Pro",Plantin,"Times New Roman",serif;--font-text:"Plantin MT Pro",Plantin,"Times New Roman",serif;--font-technical:"Input Mono Narrow",ui-monospace,Menlo,monospace;--feat-technical:"ss02" 1,"ss13" 1;--size-64:64px;--lead-64:72px;--size-32:32px;--lead-32:40px;--size-16:16px;--lead-16:24px;--size-20:20px;--lead-20:28px;--track-display:-0.02em;--text-hero:400 var(--size-64)/var(--lead-64) var(--font-display);--text-title:400 var(--size-32)/var(--lead-32) var(--font-display);--text-copy:400 var(--size-16)/var(--lead-16) var(--font-text);--text-technical:400 var(--size-16)/var(--lead-16) var(--font-technical);--control-label-sm:12px;--control-label-md:16px}
:root{--radius-cap:5px;--radius-bead:50%;--cap-h-md:40px;--cap-pad-x-md:18px;--field-h-sm:32px;--field-h-md:40px;--field-pad-x-sm:10px}
:root{--field-shadow:inset 0 0 0 1px var(--rule-heavy),inset 0 1px 2px color-mix(in srgb,var(--muted) 22%,transparent);--cap-dither-size:3px 3px;--bead-interior-size:4px 4px;--bead-frost:radial-gradient(66% 54% at 33% 60%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.18) 54%,rgba(255,255,255,0) 82%);--bead-pipe:radial-gradient(58% 62% at 46% 44%,rgba(240,253,255,.50) 0%,rgba(240,253,255,.17) 56%,rgba(240,253,255,0) 84%);--bead-catch:inset 0 1px 0 rgba(240,253,255,.52),inset 2px 0 0 -1px rgba(240,253,255,.20);--lamp-glow:0 0 4px color-mix(in srgb,var(--bondi-lit) 90%,transparent);--plastic:#0E8FA8;--plastic-deep:#0A6272;--plastic-floor:#002C38;--plastic-frost:#8FBFC9;--plastic-clear:#0F7189;--plastic-lit:#4FC2D6;--plastic-pale:#9FDCE8;--plastic-mold:linear-gradient(180deg,#8FBFC9 0%,#0E8FA8 46%,#0F7189 48%,#002C38 100%);--cap-fill:rgba(14,143,168,0.64);--cap-fill-pressed:rgba(14,143,168,0.72);--cap-dither:repeating-conic-gradient(from 0deg at 50% 50%,#0A6272 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-pressed:repeating-conic-gradient(from 0deg at 50% 50%,#0A6272 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-opacity:.30;--cap-dither-opacity-pressed:.36;--cap-bloom:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.13) 58%,rgba(255,255,255,0) 84%);--cap-bloom-pressed:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 58%,rgba(255,255,255,0) 84%);--cap-rim:inset 0 0 0 1px rgba(0,44,56,0.42),inset 0 0 3px 2px rgba(0,44,56,0.26);--cap-contact:0 4px 7px -3px rgba(10,98,114,0.45);--cap-shadow:var(--cap-rim),var(--cap-contact);--cap-shadow-pressed:inset 0 0 0 1px rgba(0,44,56,0.62),inset 0 0 4px 3px rgba(0,44,56,0.42),inset 0 2px 4px rgba(0,44,56,0.42);--molded-edge:inset 0 0 5px 4px rgba(0,44,56,0.26),inset -2px -2px 6px 1px rgba(0,44,56,0.22),inset 0 0 0 1px rgba(0,44,56,0.42);--bead-body:rgba(14,143,168,0.64);--bead-interior:repeating-conic-gradient(from 0deg at 50% 50%,#0A6272 0% 25%,rgba(0,0,0,0) 0% 50%);--bead-interior-opacity:.42;--bead-contact:radial-gradient(50% 62% at 50% 32%,rgba(159,220,232,0.62) 0%,rgba(10,98,114,0.5) 42%,rgba(0,44,56,0) 76%);--bead-edge:inset 0 0 6px 5px rgba(0,44,56,0.26),inset -3px -3px 9px 2px rgba(0,44,56,0.22),inset 0 0 0 1px rgba(0,44,56,0.42)}
[data-product="company"]{--plastic:#0E8FA8;--plastic-deep:#0A6272;--plastic-floor:#002C38;--plastic-frost:#8FBFC9;--plastic-clear:#0F7189;--plastic-lit:#4FC2D6;--plastic-pale:#9FDCE8;--plastic-mold:linear-gradient(180deg,#8FBFC9 0%,#0E8FA8 46%,#0F7189 48%,#002C38 100%);--cap-fill:rgba(14,143,168,0.64);--cap-fill-pressed:rgba(14,143,168,0.72);--cap-dither:repeating-conic-gradient(from 0deg at 50% 50%,#0A6272 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-pressed:repeating-conic-gradient(from 0deg at 50% 50%,#0A6272 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-opacity:.30;--cap-dither-opacity-pressed:.36;--cap-bloom:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.13) 58%,rgba(255,255,255,0) 84%);--cap-bloom-pressed:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 58%,rgba(255,255,255,0) 84%);--cap-rim:inset 0 0 0 1px rgba(0,44,56,0.42),inset 0 0 3px 2px rgba(0,44,56,0.26);--cap-contact:0 4px 7px -3px rgba(10,98,114,0.45);--cap-shadow:var(--cap-rim),var(--cap-contact);--cap-shadow-pressed:inset 0 0 0 1px rgba(0,44,56,0.62),inset 0 0 4px 3px rgba(0,44,56,0.42),inset 0 2px 4px rgba(0,44,56,0.42);--molded-edge:inset 0 0 5px 4px rgba(0,44,56,0.26),inset -2px -2px 6px 1px rgba(0,44,56,0.22),inset 0 0 0 1px rgba(0,44,56,0.42);--bead-body:rgba(14,143,168,0.64);--bead-interior:repeating-conic-gradient(from 0deg at 50% 50%,#0A6272 0% 25%,rgba(0,0,0,0) 0% 50%);--bead-contact:radial-gradient(50% 62% at 50% 32%,rgba(159,220,232,0.62) 0%,rgba(10,98,114,0.5) 42%,rgba(0,44,56,0) 76%);--bead-edge:inset 0 0 6px 5px rgba(0,44,56,0.26),inset -3px -3px 9px 2px rgba(0,44,56,0.22),inset 0 0 0 1px rgba(0,44,56,0.42)}
[data-product="cartridge"]{--plastic:#A8E13C;--plastic-deep:#345B00;--plastic-floor:#506F05;--plastic-frost:#D6FAA4;--plastic-clear:#79AB00;--plastic-lit:#D3FC96;--plastic-pale:#E7FFC7;--plastic-mold:linear-gradient(180deg,#D6FAA4 0%,#A8E13C 46%,#79AB00 48%,#506F05 100%);--cap-fill:rgba(168,225,60,0.64);--cap-fill-pressed:rgba(168,225,60,0.72);--cap-dither:repeating-conic-gradient(from 0deg at 50% 50%,#345B00 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-pressed:repeating-conic-gradient(from 0deg at 50% 50%,#345B00 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-opacity:.30;--cap-dither-opacity-pressed:.36;--cap-bloom:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.13) 58%,rgba(255,255,255,0) 84%);--cap-bloom-pressed:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 58%,rgba(255,255,255,0) 84%);--cap-rim:inset 0 0 0 1px rgba(80,111,5,0.42),inset 0 0 3px 2px rgba(80,111,5,0.26);--cap-contact:0 4px 7px -3px rgba(52,91,0,0.45);--cap-shadow:var(--cap-rim),var(--cap-contact);--cap-shadow-pressed:inset 0 0 0 1px rgba(80,111,5,0.62),inset 0 0 4px 3px rgba(80,111,5,0.42),inset 0 2px 4px rgba(80,111,5,0.42);--molded-edge:inset 0 0 5px 4px rgba(80,111,5,0.26),inset -2px -2px 6px 1px rgba(80,111,5,0.22),inset 0 0 0 1px rgba(80,111,5,0.42);--bead-body:rgba(168,225,60,0.64);--bead-interior:repeating-conic-gradient(from 0deg at 50% 50%,#345B00 0% 25%,rgba(0,0,0,0) 0% 50%);--bead-contact:radial-gradient(50% 62% at 50% 32%,rgba(231,255,199,0.62) 0%,rgba(52,91,0,0.5) 42%,rgba(80,111,5,0) 76%);--bead-edge:inset 0 0 6px 5px rgba(80,111,5,0.26),inset -3px -3px 9px 2px rgba(80,111,5,0.22),inset 0 0 0 1px rgba(80,111,5,0.42)}
[data-product="graphite"],[data-product="smoke"],[data-product="grayscale-filter"]{--plastic:#50565E;--plastic-deep:#2A2E33;--plastic-floor:#13161A;--plastic-frost:#6E7277;--plastic-clear:#383E44;--plastic-lit:#767B81;--plastic-pale:#939699;--plastic-mold:linear-gradient(180deg,#6E7277 0%,#50565E 46%,#383E44 48%,#13161A 100%);--cap-fill:rgba(80,86,94,0.88);--cap-fill-pressed:rgba(80,86,94,0.96);--cap-dither:repeating-conic-gradient(from 0deg at 50% 50%,#2A2E33 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-pressed:repeating-conic-gradient(from 0deg at 50% 50%,#2A2E33 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-opacity:.30;--cap-dither-opacity-pressed:.36;--cap-bloom:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.13) 58%,rgba(255,255,255,0) 84%);--cap-bloom-pressed:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 58%,rgba(255,255,255,0) 84%);--cap-rim:inset 0 0 0 1px rgba(19,22,26,0.42),inset 0 0 3px 2px rgba(19,22,26,0.26);--cap-contact:0 4px 7px -3px rgba(42,46,51,0.45);--cap-shadow:var(--cap-rim),var(--cap-contact);--cap-shadow-pressed:inset 0 0 0 1px rgba(19,22,26,0.62),inset 0 0 4px 3px rgba(19,22,26,0.42),inset 0 2px 4px rgba(19,22,26,0.42);--molded-edge:inset 0 0 5px 4px rgba(19,22,26,0.26),inset -2px -2px 6px 1px rgba(19,22,26,0.22),inset 0 0 0 1px rgba(19,22,26,0.42);--bead-body:rgba(80,86,94,0.88);--bead-interior:repeating-conic-gradient(from 0deg at 50% 50%,#2A2E33 0% 25%,rgba(0,0,0,0) 0% 50%);--bead-contact:radial-gradient(50% 62% at 50% 32%,rgba(147,150,153,0.62) 0%,rgba(42,46,51,0.5) 42%,rgba(19,22,26,0) 76%);--bead-edge:inset 0 0 6px 5px rgba(19,22,26,0.26),inset -3px -3px 9px 2px rgba(19,22,26,0.22),inset 0 0 0 1px rgba(19,22,26,0.42);--text-on-plastic:var(--paper)}
[data-product="56k"]{--plastic:#BB8DE3;--plastic-deep:#654182;--plastic-floor:#4F3565;--plastic-frost:#D2B7EC;--plastic-clear:#895FAC;--plastic-lit:#DEBEFC;--plastic-pale:#F5E3FF;--plastic-mold:linear-gradient(180deg,#D2B7EC 0%,#BB8DE3 46%,#895FAC 48%,#4F3565 100%);--cap-fill:rgba(187,141,227,0.64);--cap-fill-pressed:rgba(187,141,227,0.72);--cap-dither:repeating-conic-gradient(from 0deg at 50% 50%,#654182 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-pressed:repeating-conic-gradient(from 0deg at 50% 50%,#654182 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-opacity:.30;--cap-dither-opacity-pressed:.36;--cap-bloom:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.13) 58%,rgba(255,255,255,0) 84%);--cap-bloom-pressed:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 58%,rgba(255,255,255,0) 84%);--cap-rim:inset 0 0 0 1px rgba(79,53,101,0.42),inset 0 0 3px 2px rgba(79,53,101,0.26);--cap-contact:0 4px 7px -3px rgba(101,65,130,0.45);--cap-shadow:var(--cap-rim),var(--cap-contact);--cap-shadow-pressed:inset 0 0 0 1px rgba(79,53,101,0.62),inset 0 0 4px 3px rgba(79,53,101,0.42),inset 0 2px 4px rgba(79,53,101,0.42);--molded-edge:inset 0 0 5px 4px rgba(79,53,101,0.26),inset -2px -2px 6px 1px rgba(79,53,101,0.22),inset 0 0 0 1px rgba(79,53,101,0.42);--bead-body:rgba(187,141,227,0.64);--bead-interior:repeating-conic-gradient(from 0deg at 50% 50%,#654182 0% 25%,rgba(0,0,0,0) 0% 50%);--bead-contact:radial-gradient(50% 62% at 50% 32%,rgba(245,227,255,0.62) 0%,rgba(101,65,130,0.5) 42%,rgba(79,53,101,0) 76%);--bead-edge:inset 0 0 6px 5px rgba(79,53,101,0.26),inset -3px -3px 9px 2px rgba(79,53,101,0.22),inset 0 0 0 1px rgba(79,53,101,0.42)}
[data-product="userednet"]{--plastic:#CF3080;--plastic-deep:#99145B;--plastic-floor:#480022;--plastic-frost:#D3769C;--plastic-clear:#940052;--plastic-lit:#E678A6;--plastic-pale:#E9A8C0;--plastic-mold:linear-gradient(180deg,#D3769C 0%,#CF3080 46%,#940052 48%,#480022 100%);--cap-fill:rgba(207,48,128,0.64);--cap-fill-pressed:rgba(207,48,128,0.72);--cap-dither:repeating-conic-gradient(from 0deg at 50% 50%,#99145B 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-pressed:repeating-conic-gradient(from 0deg at 50% 50%,#99145B 0% 25%,rgba(0,0,0,0) 0% 50%);--cap-dither-opacity:.30;--cap-dither-opacity-pressed:.36;--cap-bloom:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.13) 58%,rgba(255,255,255,0) 84%);--cap-bloom-pressed:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 58%,rgba(255,255,255,0) 84%);--cap-rim:inset 0 0 0 1px rgba(72,0,34,0.42),inset 0 0 3px 2px rgba(72,0,34,0.26);--cap-contact:0 4px 7px -3px rgba(153,20,91,0.45);--cap-shadow:var(--cap-rim),var(--cap-contact);--cap-shadow-pressed:inset 0 0 0 1px rgba(72,0,34,0.62),inset 0 0 4px 3px rgba(72,0,34,0.42),inset 0 2px 4px rgba(72,0,34,0.42);--molded-edge:inset 0 0 5px 4px rgba(72,0,34,0.26),inset -2px -2px 6px 1px rgba(72,0,34,0.22),inset 0 0 0 1px rgba(72,0,34,0.42);--bead-body:rgba(207,48,128,0.64);--bead-interior:repeating-conic-gradient(from 0deg at 50% 50%,#99145B 0% 25%,rgba(0,0,0,0) 0% 50%);--bead-contact:radial-gradient(50% 62% at 50% 32%,rgba(233,168,192,0.62) 0%,rgba(153,20,91,0.5) 42%,rgba(72,0,34,0) 76%);--bead-edge:inset 0 0 6px 5px rgba(72,0,34,0.26),inset -3px -3px 9px 2px rgba(72,0,34,0.22),inset 0 0 0 1px rgba(72,0,34,0.42);--text-on-plastic:var(--shell-deep)}
[data-product="chrome"]{--plastic:var(--snow);--plastic-frost:var(--paper-pale);--plastic-lit:var(--paper-pale);--plastic-pale:var(--paper-pale);--plastic-clear:var(--chrome-shade);--plastic-deep:color-mix(in srgb,var(--chrome-rim) 16%,var(--chrome-shade));--plastic-floor:var(--chrome-rim);--plastic-mold:linear-gradient(180deg,var(--paper-pale) 0%,var(--snow) 46%,var(--chrome-shade) 48%,var(--chrome-rim) 100%);--cap-fill:#DFE5EA;--cap-fill-pressed:#DFE5EA;--cap-dither:none;--cap-dither-pressed:none;--cap-dither-opacity:0;--cap-dither-opacity-pressed:0;--cap-bloom:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.70) 0%,rgba(255,255,255,.18) 58%,rgba(255,255,255,0) 84%);--cap-bloom-pressed:radial-gradient(62% 106% at 26% 20%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 58%,rgba(255,255,255,0) 84%);--cap-rim:inset 0 0 0 1px rgba(78,88,96,.50),inset 0 0 3px 2px rgba(78,88,96,.22);--cap-contact:0 4px 7px -3px rgba(90,100,108,.42);--cap-shadow:var(--cap-rim),var(--cap-contact);--cap-shadow-pressed:inset 0 0 0 1px rgba(78,88,96,.62),inset 0 0 4px 3px rgba(78,88,96,.42),inset 0 2px 4px rgba(78,88,96,.42);--bead-body:#DFE5EA;--bead-interior:none;--text-on-plastic:var(--ink)}
.ncc-molded{position:relative;overflow:hidden;border:0;border-radius:var(--radius-cap);background-color:var(--cap-fill);box-shadow:var(--cap-shadow);color:var(--text-on-plastic)}
.ncc-molded::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--cap-dither);background-size:var(--cap-dither-size);opacity:var(--cap-dither-opacity)}
.ncc-molded::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--cap-bloom)}
.ncc-molded[data-pressed="true"],.ncc-molded:active{background-color:var(--cap-fill-pressed);box-shadow:var(--cap-shadow-pressed)}
.ncc-molded[data-pressed="true"]::before,.ncc-molded:active::before{background-image:var(--cap-dither-pressed);opacity:var(--cap-dither-opacity-pressed)}
.ncc-molded[data-pressed="true"]::after,.ncc-molded:active::after{background:var(--cap-bloom-pressed)}
.ncc-mold{background:var(--plastic-mold);border-radius:var(--radius-cap);box-shadow:var(--molded-edge)}
.ncc-field{border:0;border-radius:0;background:var(--surface-field);box-shadow:var(--field-shadow)}
.ncc-bitmap{image-rendering:pixelated}
:root{--size-13:13px;--lead-13:18px;--track-display:-0.01em;--text-hero:400 22px/28px var(--font-display);--text-title:400 15px/21px var(--font-display);--text-copy:400 13px/18px var(--font-text);--text-technical:400 12px/16px var(--font-technical);--control-label-sm:12px;--control-label-md:13px}
:root,[data-product]{--cap-fill:var(--plastic);--cap-fill-pressed:var(--plastic-clear);--cap-face:linear-gradient(180deg,var(--plastic-frost) 0%,var(--plastic-lit) 14%,var(--plastic) 46%,var(--plastic-clear) 82%,var(--plastic-deep) 100%);--cap-face-pressed:linear-gradient(180deg,var(--plastic-clear) 0%,var(--plastic) 46%,var(--plastic-clear) 100%);--cap-bloom:radial-gradient(56% 150% at 15% -26%,color-mix(in srgb,var(--paper-pale) 86%,transparent) 0%,color-mix(in srgb,var(--paper-pale) 30%,transparent) 46%,transparent 72%);--cap-bloom-pressed:radial-gradient(56% 150% at 15% -26%,color-mix(in srgb,var(--paper-pale) 30%,transparent) 0%,transparent 62%);--cap-rim:inset 0 0 0 1px color-mix(in srgb,var(--plastic-floor) 58%,transparent),inset 0 1px 0 color-mix(in srgb,var(--paper-pale) 70%,transparent);--cap-contact:1px 2px 0 -1px color-mix(in srgb,var(--plastic-floor) 34%,transparent),2px 4px 6px -2px color-mix(in srgb,var(--plastic-floor) 46%,transparent);--cap-shadow:var(--cap-rim),var(--cap-contact);--cap-shadow-pressed:inset 0 0 0 1px color-mix(in srgb,var(--plastic-floor) 60%,transparent),inset 0 2px 3px color-mix(in srgb,var(--plastic-floor) 34%,transparent);--cap-dither:none;--cap-dither-pressed:none;--cap-dither-opacity:0;--cap-dither-opacity-pressed:0}
[data-product="chrome"]{--cap-face:linear-gradient(180deg,var(--paper-pale) 0%,var(--snow) 26%,var(--chrome-shade) 58%,color-mix(in srgb,var(--chrome-rim) 26%,var(--chrome-shade)) 86%,color-mix(in srgb,var(--chrome-rim) 42%,var(--chrome-shade)) 100%);--cap-face-pressed:linear-gradient(180deg,var(--chrome-shade) 0%,var(--snow) 55%,var(--chrome-shade) 100%);--cap-bloom:radial-gradient(66% 150% at 15% -26%,color-mix(in srgb,var(--paper-pale) 94%,transparent) 0%,color-mix(in srgb,var(--paper-pale) 38%,transparent) 46%,transparent 72%);--cap-bloom-pressed:none;--cap-rim:inset 0 0 0 1px color-mix(in srgb,var(--chrome-rim) 52%,transparent),inset 0 1px 0 var(--paper-pale);--cap-contact:1px 2px 0 -1px color-mix(in srgb,var(--chrome-rim) 24%,transparent),2px 4px 6px -2px color-mix(in srgb,var(--chrome-rim) 34%,transparent);--cap-shadow-pressed:inset 0 0 0 1px color-mix(in srgb,var(--chrome-rim) 60%,transparent),inset 0 2px 3px color-mix(in srgb,var(--chrome-rim) 34%,transparent)}
[data-product="graphite"],[data-product="smoke"],[data-product="grayscale-filter"]{--cap-bloom:radial-gradient(56% 80% at 15% -24%,color-mix(in srgb,var(--paper-pale) 80%,transparent) 0%,color-mix(in srgb,var(--paper-pale) 24%,transparent) 40%,transparent 64%);--cap-bloom-pressed:radial-gradient(56% 80% at 15% -24%,color-mix(in srgb,var(--paper-pale) 24%,transparent) 0%,transparent 56%)}
.ncc-molded{background-image:var(--cap-bloom),var(--cap-face);background-clip:padding-box}
.ncc-molded::before,.ncc-molded::after{display:none}
.ncc-molded[data-pressed="true"],.ncc-molded:active{background-image:var(--cap-bloom-pressed),var(--cap-face-pressed)}
/* ---- site ---- */
/* Fit for 985: one fixed composition 985px wide (nav keys + an 840px object), centered on whole pixels
   like a <center><table>; never scaled up. Every page is drawn to sit in about 600px of window
   height, status bar included (an iMac G3: 1024x768 screen, 985px browser), and every object is
   the same height, so the footer tabs never move between pages. The hero is a molded bezel in the
   product's plastic around a whole page at 2x pixels; the 01-04 index swaps the page and the
   bezel's plastic. 56k's status bar spans the window's foot and narrates what the pointer is over. */

html{background:var(--paper);scrollbar-color:var(--chassis) var(--paper-tint)}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--text-copy);-webkit-font-smoothing:antialiased}
::selection{background:var(--bondi-pale);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
img{display:block}
h1,h2,p,ol,figure{margin:0}
a{color:var(--ink)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The page scrollbar, drawn: a Putty thumb in a Paper Tint gutter. */
::-webkit-scrollbar{width:15px;height:15px}
::-webkit-scrollbar-track{background:var(--paper-tint);box-shadow:inset 1px 0 0 var(--rule-hairline)}
::-webkit-scrollbar-thumb{background:var(--putty);border:3px solid var(--paper-tint);border-radius:7px;box-shadow:inset 0 0 0 1px var(--chassis-edge)}

/* ---- The object ------------------------------------------------------- */
.site{position:relative;width:985px;margin:48px 0 0;padding-bottom:27px}
/* Whole pixels at every window width: the composition's left edge is an integer, so the 1-bit wordmark is never resampled.
   Percent is the content box, so a page scrollbar is already out of it. */
.site{margin-left:max(0px,round(down,calc((100% - 985px) / 2),1px))}
.obj{--gap-l:13px;--gap-r:342px;position:relative;box-sizing:border-box;width:840px;height:494px;margin-left:90px;background:var(--paper-pale);border:1px solid var(--ink);border-top:0}
/* The top rule is drawn in two segments with the wordmark's gap between them: no patch behind the wordmark */
.obj::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,var(--ink) 0 var(--gap-l),transparent var(--gap-l) var(--gap-r),var(--ink) var(--gap-r) 100%)}

/* Masthead: the wordmark strike sits on the object's top rule like a legend, on whatever paper is behind it */
.mast{position:relative;height:44px;border-bottom:1px solid var(--rule-hairline)}
.mark{position:absolute;top:-17px;left:20px;line-height:0;display:block}
.tagline{position:absolute;left:28px;top:19px;font:italic var(--text-title);color:var(--ink)}

/* ---- The hero: a molded bezel around the whole page, and the index ------- */
.stage{position:relative;display:flex;align-items:center;padding:12px 10px 12px}

/* The bezel is a molded part in the product's plastic: one smooth ramp, lit high left.  */
.monitor{position:relative;z-index:1;flex:none;margin:0;padding:8px;border-radius:10px;
  background:linear-gradient(170deg,var(--plastic-pale) 0%,var(--plastic-lit) 30%,var(--plastic) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plastic-clear) 70%,transparent),inset 2px 2px 0 color-mix(in srgb,var(--plastic-pale) 80%,transparent),inset -2px -2px 3px color-mix(in srgb,var(--plastic-clear) 45%,transparent)}
.screen{position:relative;width:544px;height:340px;overflow:hidden;background:var(--paper-tint);box-shadow:0 0 0 1px var(--plastic-floor)}
.screen img,.screen canvas{width:544px;height:340px}
.screen canvas{position:absolute;inset:0;image-rendering:pixelated}
.il-hidden{visibility:hidden}
.loop-toggle{display:block;position:relative;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:0;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.loop-toggle:disabled{cursor:default}
.loop-toggle:focus{outline:0}
.loop-toggle:focus-visible::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--paper-pale),inset 0 0 0 4px var(--ink)}

/* Grayscale Filter's page is a before/after: color left of the seam, grayscale right (E2's seam). Live only while 04 is shown. */
.split{display:none;position:absolute;inset:0;--split:32%;touch-action:pan-y}
.monitor[data-product="grayscale-filter"] .split{display:block}
.monitor[data-product="grayscale-filter"] #fig-img,.monitor[data-product="grayscale-filter"] .screen canvas{display:none}
.split img{position:absolute;top:0;left:0;display:block}
.split-after{clip-path:inset(0 0 0 var(--split))}
.split-seam{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:var(--ink)}
.split-grip{position:absolute;top:154px;left:-8px;width:16px;height:32px;overflow:visible}
.split-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.split::after{content:"";position:absolute;inset:0;pointer-events:none}
.split:has(.split-input:focus-visible)::after{box-shadow:inset 0 0 0 2px var(--paper-pale),inset 0 0 0 4px var(--ink)}


/* The index: four products in W1's molded Putty tray, inside the object's frame; a number, or a row pointed at or focused,
   puts its page in the bezel */
.index{box-sizing:border-box;flex:none;list-style:none;margin:0 0 0 12px;width:246px;padding:10px;border-radius:10px;
  background:linear-gradient(170deg,var(--paper-pale) 0%,var(--putty-tint) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--chassis-edge) 80%,var(--ink)),inset 1px 1px 0 var(--paper-pale),inset -1px -1px 0 color-mix(in srgb,var(--chassis-edge) 70%,transparent),inset -3px -3px 6px color-mix(in srgb,var(--chassis-edge) 22%,transparent),0 5px 8px -4px color-mix(in srgb,var(--ink) 30%,transparent)}
.prod+.prod{margin-top:8px}
.prod-head{display:flex;align-items:center;gap:10px;height:28px}
.no{box-sizing:border-box;flex:none;width:28px;height:24px;padding:0;border:1px solid var(--rule-heavy);border-radius:0;background:var(--paper-pale);font:var(--text-technical);font-feature-settings:var(--feat-technical);font-variant-numeric:tabular-nums;color:var(--ink-soft);cursor:pointer}
.no:hover{border-color:var(--ink);color:var(--ink)}
.no[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper-pale);cursor:default}
.name{font:var(--text-hero);letter-spacing:var(--track-display)}
.line{margin-top:0;font:var(--text-copy);color:var(--ink);text-wrap:balance}

/* Caps: the system's molded cap at the screen scale */
.cap{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:28px;padding:0 12px;font-family:var(--font-technical);font-size:var(--control-label-sm);line-height:1;font-feature-settings:var(--feat-technical);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;flex:none}
.prod .cap{margin-top:6px}
.cap-md{height:var(--cap-h-md);padding:0 var(--cap-pad-x-md);font-size:var(--control-label-md)}
/* Shell takes a Paper label on the screen cap: Shell Deep disappears into the face ramp */
[data-product="userednet"] .cap{color:var(--paper)}

/* ---- Section headings: Plantin, the page's one heading size ---- */
.sec-h{font:400 var(--size-32)/var(--lead-32) var(--font-display);letter-spacing:var(--track-display)}

/* ---- The bead: Ed. 1's molded recipe above 32px (depth.css --bead-*), in the product's plastic, lit.
   Sized by --bead (44px); the recipe's blurs and contact scale with it. ---- */
.bead{--bead:44px;position:relative;display:block;flex:none;width:var(--bead);height:var(--bead)}
.bead::before{content:"";position:absolute;inset:-14%;border-radius:var(--radius-bead);background:radial-gradient(closest-side,transparent 70%,color-mix(in srgb,var(--plastic-lit) 40%,transparent) 79%,color-mix(in srgb,var(--plastic-lit) 10%,transparent) 90%,transparent 100%)}
.bead-contact{position:absolute;left:15%;right:15%;bottom:-20%;height:40%;background:var(--bead-contact);filter:blur(6px)}
.bead-shell{position:absolute;inset:0;border-radius:var(--radius-bead);overflow:hidden;display:flex;align-items:center;justify-content:center}
.bead-interior{position:absolute;inset:0;opacity:var(--bead-interior-opacity);background-image:var(--bead-interior);background-size:var(--bead-interior-size)}
.bead-body{position:absolute;inset:0;background:var(--bead-body)}
.bead-density{position:absolute;inset:0;border-radius:var(--radius-bead);box-shadow:var(--bead-edge)}
.bead-glyph{position:relative;display:block;flex:none;width:75%;height:auto;aspect-ratio:1328.31/697.82;fill:var(--paper-pale);overflow:visible}
.bead-frost{position:absolute;inset:0;background:var(--bead-frost);filter:blur(6px);mask-image:linear-gradient(198deg,rgba(0,0,0,0) 14%,rgba(0,0,0,1) 62%)}
.bead-pipe{position:absolute;left:10%;top:8%;width:66%;height:26%;border-radius:var(--radius-bead);background:var(--bead-pipe);filter:blur(6px)}
.bead-catch{position:absolute;inset:0;border-radius:var(--radius-bead);box-shadow:var(--bead-catch)}

/* ---- Our Products: four small proofs, two by two. Bead and name, the line, the cap; the product's
   own picture beside them, whole, at about 0.39 ---- */
.table{padding:14px 20px 14px}
.passes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;margin-top:10px;align-items:start}
.pass{height:176px;display:grid;grid-template-columns:1fr 136px;grid-template-areas:"head pic" "what pic" "cap pic";grid-template-rows:auto auto 1fr;column-gap:14px;align-items:start}
.pass-head{grid-area:head;display:flex;align-items:center;gap:12px}
.pass-head .bead{--bead:40px}
.pass-name{margin:0;font:var(--text-hero);letter-spacing:var(--track-display)}
.pass-name a{display:inline-block;text-decoration:none}
.pass-name a:hover{text-decoration:underline}
.pass-what{grid-area:what;margin-top:10px;font:var(--text-copy)}
.pass .cap{grid-area:cap;justify-self:start;align-self:end;margin-top:8px}
/* One picture box per cell: the same 136x176 for all four, the picture filling it from the top */
.win{grid-area:pic;box-sizing:border-box;display:flex;align-items:center;width:136px;height:176px;overflow:hidden;line-height:0;border:1px solid var(--ink);background:var(--paper-pale)}
.win img{width:100%;height:100%;object-fit:cover;object-position:top}
.win-fit{background:var(--paper)}
.win-fit img{height:auto;object-fit:contain}

/* ---- Newsletter, About and principles: two columns filling the object ---------- */
.more-cols{box-sizing:border-box;height:449px;display:grid;grid-template-columns:420px 1fr;column-gap:56px;padding:20px 28px 24px}
.col-l{display:flex;flex-direction:column;justify-content:space-between}
.news .sec-h{margin-bottom:14px}
.nl{display:block}
.nl-line{display:block;font:var(--text-copy);color:var(--ink);margin-bottom:10px}
.nl-row{display:flex;gap:8px;align-items:center}
.nl-field{box-sizing:border-box;width:240px;height:var(--field-h-sm);padding:0 var(--field-pad-x-sm);font:var(--text-technical);color:var(--ink)}
.nl-field::placeholder{color:var(--muted)}
.nl-field:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.terms{margin-top:10px;font:400 12px/16px var(--font-text);color:var(--muted)}
.terms a{color:var(--muted);position:relative}
.terms a::before{content:"";position:absolute;inset:-6px -2px}
.about{padding-top:16px;border-top:1px solid var(--rule-hairline)}
.about p{font:var(--text-copy);color:var(--ink-soft)}

/* The principles step right by one fixed amount, 28px a line */
.principles .sec-h{margin-bottom:24px}
.principles ol{list-style:none;padding:0}
.principles li{font:var(--text-hero);max-width:300px;text-wrap:balance}
.principles li+li{margin-top:28px}
.principles li:nth-child(2){margin-left:28px}
.principles li:nth-child(3){margin-left:56px}

/* ---- The nav: three molded Bondi keys hung off the object's left rule on hairline arms.
   The current page's key is the company bead, lit; the others are plain Bondi spheres.
   Pointed at or focused, a key opens, instantly, into a lens 160px across that shows what is on
   that page. The sphere centers sit 80px in from the composition's edge, so a lens never leaves
   the window and never reaches the object. -- */
.keys{position:absolute;top:0;left:-1px;z-index:3;width:0;height:0}
.key{--o:0px;--a0:44px;--reach:52px;position:absolute;left:calc(-1 * var(--reach) - var(--o));top:calc(var(--top) - var(--o));display:block;box-sizing:border-box;width:calc(44px + 2 * var(--o));height:calc(44px + 2 * var(--o));border-radius:50%;color:var(--ink);text-decoration:none}
/* the current page's key stands out further from the object than the other two */
.key[aria-current]{--reach:76px}
.key-home{--top:64px}
.key-products{--top:184px}
.key-more{--top:304px}
.key-ball{position:absolute;inset:0;display:grid;place-items:center}
.key .bead-off{--bead:32px}
.key .bead-off::before{content:none}
.key-arm{position:absolute;top:calc(var(--o) + 22px);left:calc(var(--o) + var(--a0));right:calc(44px + var(--o) - var(--reach));height:1px;background:var(--rule-heavy)}
.key-arm::after{content:"";position:absolute;right:0;top:-3px;width:3px;height:7px;background:var(--ink)}
.key-tag{position:absolute;top:calc(46px + 2 * var(--o));left:50%;transform:translateX(-50%);font:400 12px/16px var(--font-technical);font-feature-settings:var(--feat-technical);white-space:nowrap}
.key[aria-current] .key-tag{text-decoration:underline;text-underline-offset:3px}

/* Open: the key becomes a lens, a Bondi ring around a Paper well, 1.25x the bead (56px). It stays on the
   page's Paper beside the object, never over it; the key's label stays under it. Hover opens only where
   there is a hover. */
.key:focus-visible,body[data-state="home-nav-hover"] .key-products{--o:6px;--a0:44px;z-index:1;
  background:linear-gradient(160deg,var(--plastic-pale) 0%,var(--plastic-lit) 28%,var(--plastic) 72%,var(--plastic-clear) 100%);
  box-shadow:inset 0 0 0 1px var(--plastic-clear),inset 1px 1px 0 color-mix(in srgb,var(--plastic-pale) 80%,transparent),0 4px 6px -4px color-mix(in srgb,var(--ink) 45%,transparent)}
.key:focus-visible .key-ball,body[data-state="home-nav-hover"] .key-products .key-ball{display:none}
.key:focus-visible .key-well,body[data-state="home-nav-hover"] .key-products .key-well{display:flex}
.key:focus-visible .key-arm,body[data-state="home-nav-hover"] .key-products .key-arm{display:none}
@media (hover:hover){
.key:hover{--o:6px;--a0:44px;z-index:1;
  background:linear-gradient(160deg,var(--plastic-pale) 0%,var(--plastic-lit) 28%,var(--plastic) 72%,var(--plastic-clear) 100%);
  box-shadow:inset 0 0 0 1px var(--plastic-clear),inset 1px 1px 0 color-mix(in srgb,var(--plastic-pale) 80%,transparent),0 4px 6px -4px color-mix(in srgb,var(--ink) 45%,transparent)}
.key:hover .key-ball{display:none}
.key:hover .key-well{display:flex}
.key:hover .key-arm{display:none}
}
.key:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The lens's contents: one replaceable element per key (.key-well) */
.key-well{display:none;position:absolute;inset:5px;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:var(--paper-pale);
  box-shadow:inset 0 0 0 1px var(--plastic-floor),inset 1px 2px 3px -1px color-mix(in srgb,var(--ink) 40%,transparent)}
.key-home .key-well{background-image:url(img/network-home.svg)}
.key-products .key-well{background-image:url(img/network-products.svg)}
.key-more .key-well{background-image:url(img/network-more.svg)}
.key-well{background-size:100% 100%;background-repeat:no-repeat}

/* ---- The status bar: 56k's approved strip across the whole window ------- */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;gap:6px;box-sizing:border-box;height:27px;padding:3px 6px 3px 0;
  background:linear-gradient(180deg,var(--putty-tint) 0%,var(--putty) 55%,color-mix(in srgb,var(--putty) 72%,var(--chassis)) 100%);
  border-top:1px solid color-mix(in srgb,var(--ink) 35%,var(--chassis-edge));
  box-shadow:inset 0 1px 0 var(--paper-pale),inset 0 2px 0 color-mix(in srgb,var(--chassis-edge) 30%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--chassis-edge) 45%,transparent),0 -1px 3px color-mix(in srgb,var(--ink) 18%,transparent)}
.sb-strip{display:flex;align-items:center;flex:1;min-width:0;height:18px;font:400 12px/16px var(--font-technical);font-variant-numeric:tabular-nums;font-kerning:none;color:var(--ink)}
.sb-lamp{flex:none;width:18px;display:flex;justify-content:center}
.sb-lamp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bondi-lit);box-shadow:var(--lamp-glow)}
.sb-meter,.sb-msg{height:18px;box-sizing:border-box;background:var(--paper-pale);border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--rule-heavy),inset 1px 1px 0 color-mix(in srgb,var(--chassis-edge) 85%,var(--ink)),inset 2px 3px 3px -1px color-mix(in srgb,var(--ink) 45%,transparent),0 1px 0 color-mix(in srgb,var(--paper-pale) 80%,transparent)}
.sb-meter{flex:none;width:140px;display:flex}
.sb-track{flex:1;padding:3px;display:flex}
.sb-fill{display:block;width:calc(var(--pct,0) * 1%);background:var(--faceplate-deep);border-radius:1px}
.sb-pct{flex:none;width:40px;box-sizing:border-box;padding-right:6px;text-align:right;border-left:1px solid color-mix(in srgb,var(--chassis-edge) 85%,var(--ink));box-shadow:inset 1px 2px 2px -1px color-mix(in srgb,var(--ink) 30%,transparent)}
.sb-msg{flex:1;min-width:0;margin-left:4px;padding-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- The foot: three quiet tabs hung from the object's bottom edge (N3's treatment): 1px Ink, Paper
   fill, square tops, rounded feet; 12px Input Mono. ----- */
.foot{display:flex;align-items:flex-start;margin:0 0 0 90px}
.tabs{display:flex;align-items:flex-start;gap:8px;padding-left:20px}
.tab-hang{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:0 10px;border:1px solid var(--ink);border-top:0;border-radius:0 0 var(--radius-cap) var(--radius-cap);background:var(--paper-pale);color:var(--ink);font-family:var(--font-technical);font-size:12px;line-height:1;font-feature-settings:var(--feat-technical);text-decoration:none;white-space:nowrap}
.tab-hang:hover,.tab-hang:focus-visible{height:28px}

/* ---- Product page (/56k): the whole in its bezel, the product beside it -- */
.pp .mark{text-decoration:none}
.pp-col{margin:0 0 0 24px;width:190px}
.pp-name{display:flex;align-items:center;gap:12px;font:var(--text-hero);letter-spacing:var(--track-display)}
.pp-line{margin-top:10px;font:italic var(--text-title)}
.pp-col .cap-md{margin-top:16px}
.pp-what{margin-top:16px;font:var(--text-copy)}

/* ---- The demo: the page is complete in the DOM; clip-path is the curtain ------- */
/* A head script adds .demo before first paint (first visit, motion allowed). The reveal line
   is --reveal on .site, set by demo.js. The animation is the failsafe if demo.js never runs. */
.demo .site,
body[data-state="home-loading"] .site{clip-path:inset(-60px -200px calc(100% - var(--reveal,388px)) -320px)}
.demo .site{--reveal:-60px;animation:demo-failsafe 0s 14s forwards}
@keyframes demo-failsafe{to{clip-path:none}}
body[data-state="home-loading"] .sbar{--pct:45}
/* A picture not yet arrived: the 56k extension's placeholder (page colour, sunken frame, alt text), clipped row by row by demo.js. */
.demo-masks>div{position:absolute;z-index:5;box-sizing:border-box;overflow:hidden;padding:3px 4px;font:12px/14px serif;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
/* Connecting: the lamp is dark and the meter empty, as in the extension's bar. */
.sbar.sb-wait .sb-lamp::before{background:#A89C80;box-shadow:none}

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

/* The left column's proofs are mirrored (picture first), so the lens a key opens over the object's
   left edge covers a picture, never a cap. */
.pass:nth-child(odd){grid-template-columns:136px 1fr;grid-template-areas:"pic head" "pic what" "pic cap"}

/* ======== More: three options for the content under the masthead. Each is scoped to its own class on <main>. ======== */
.more-a .sec-h,.more-b .sec-h,.more-c .sec-h{font:var(--text-hero);letter-spacing:var(--track-display)}
.more-a .about,.more-b .about,.more-c .about{padding:0;border:0}
.ma,.mb,.mc{position:relative;box-sizing:border-box;height:449px}

/* ---- A: the word strip (Buck & Pulleyn). The newsletter reads first across the top; the principles are three molded
   tiles in the products' plastics, strung with two pictures of the real products cropped at 1x; About sits small
   and right-set at the foot, like an exhibition card's address. ---- */
.more-a .news{position:absolute;left:28px;top:22px;width:720px}
.more-a .news .sec-h{margin-bottom:4px}
.more-a .nl-line{margin-bottom:14px}
.more-a .nl-field{width:300px;height:var(--field-h-md);font:var(--text-copy)}
.more-a .nl-row .cap{height:var(--cap-h-md);padding:0 var(--cap-pad-x-md);font-size:var(--control-label-md)}
.more-a .terms{max-width:520px}
.ma-pr{position:absolute;left:28px;top:200px}
.ma-pr .sec-h{margin-bottom:8px}
.strip{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.strip li{display:flex;gap:2px}
.tile{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:128px;height:128px;padding:10px;border-radius:2px;text-align:center;text-wrap:balance;
  font:400 var(--size-16)/20px var(--font-display);color:var(--ink);background-color:var(--plastic-lit);
  background-image:linear-gradient(170deg,var(--plastic-pale) 0%,var(--plastic-lit) 30%,var(--plastic) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plastic-clear) 70%,transparent),inset 2px 2px 0 color-mix(in srgb,var(--plastic-pale) 70%,transparent),inset -2px -2px 3px color-mix(in srgb,var(--plastic-clear) 45%,transparent)}
.tile-pic{box-sizing:border-box;flex:none;width:128px;height:128px;overflow:hidden;background:var(--paper-pale);outline:1px solid var(--rule-heavy);outline-offset:-1px}
.tile-pic img{width:128px;height:128px;object-fit:none}
.more-a .pic-56k{object-position:-190px -150px}
.more-a .pic-urn{object-position:0 0}
.ma .about{position:absolute;right:28px;bottom:14px;width:470px}
.ma .about p{font:400 var(--size-13)/var(--lead-13) var(--font-text);color:var(--ink-soft);text-align:right}

/* ---- B: the network (Ryan, 2026-10-13: B, with C's molded tray for the newsletter) (the More lens, drawn at the object's scale; Plus Three's floating box). The newsletter is one
   boxed object on the left; the principles hang on one line that begins at the first bead and ends at the last. ---- */
.mb-net{position:absolute;left:0;top:0;width:838px;height:449px;pointer-events:none}
.mb-net line{fill:none;stroke:var(--ink);stroke-width:1.25px}
.more-b .news{position:absolute;left:28px;top:24px;box-sizing:border-box;width:396px;padding:16px 18px 18px;border-radius:10px;
  background:linear-gradient(170deg,var(--paper-pale) 0%,var(--putty-tint) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--chassis-edge) 80%,var(--ink)),inset 1px 1px 0 var(--paper-pale),inset -1px -1px 0 color-mix(in srgb,var(--chassis-edge) 70%,transparent),inset -3px -3px 6px color-mix(in srgb,var(--chassis-edge) 22%,transparent),0 5px 8px -4px color-mix(in srgb,var(--ink) 30%,transparent)}
.more-b .terms,.more-b .terms a{color:var(--ink-soft)}
.more-b .news .sec-h{margin-bottom:8px}
.more-b .nl-line{margin-bottom:12px}
.more-b .nl-field{flex:1;width:auto;min-width:0}
.more-b .about{position:absolute;left:28px;top:312px;width:396px}
.more-b .about p{font:400 var(--size-13)/var(--lead-13) var(--font-text);color:var(--ink-soft)}
.mb-pr .sec-h{position:absolute;left:470px;top:24px}
.mb-pr ol{list-style:none;margin:0;padding:0}
.mb-pr li{position:absolute;display:flex;align-items:center;gap:16px;height:100px;font:400 var(--size-20)/var(--lead-20) var(--font-display);text-wrap:balance}
.mb-pr li:nth-child(1){left:470px;top:70px;width:340px}
.mb-pr li:nth-child(1) .bead{--bead:56px}
.mb-pr li:nth-child(2){left:504px;top:186px;width:306px}
.mb-pr li:nth-child(3){left:536px;top:298px;width:274px}
.mb-pr li:nth-child(3) .bead{--bead:36px}

/* ---- C: panels (Experimental Magazine). The newsletter in the home page's molded tray; each principle is a panel
   with the real product in a small bezel of its plastic at the right, as the hero shows a page. ---- */
.more-c .news{position:absolute;left:28px;top:24px;box-sizing:border-box;width:396px;padding:16px 18px 18px;border-radius:10px;
  background:linear-gradient(170deg,var(--paper-pale) 0%,var(--putty-tint) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--chassis-edge) 80%,var(--ink)),inset 1px 1px 0 var(--paper-pale),inset -1px -1px 0 color-mix(in srgb,var(--chassis-edge) 70%,transparent),inset -3px -3px 6px color-mix(in srgb,var(--chassis-edge) 22%,transparent),0 5px 8px -4px color-mix(in srgb,var(--ink) 30%,transparent)}
.more-c .news .sec-h{margin-bottom:8px}
.more-c .nl-line{margin-bottom:12px}
.more-c .nl-field{flex:1;width:auto;min-width:0}
.more-c .terms{color:var(--ink-soft)}
.more-c .terms a{color:var(--ink-soft)}
.more-c .about{position:absolute;left:28px;bottom:20px;width:396px}
.more-c .about p{font:400 var(--size-13)/var(--lead-13) var(--font-text);color:var(--ink-soft)}
.mc-pr{position:absolute;left:448px;top:24px;width:362px}
.mc-pr ol{list-style:none;margin:10px 0 0;padding:0}
.mc-pr li{display:flex;align-items:center;justify-content:space-between;gap:16px;height:104px;font:400 var(--size-20)/var(--lead-20) var(--font-display);text-wrap:balance}
.mc-pr li+li{margin-top:11px;padding-top:11px;border-top:1px solid var(--rule-hairline)}
.mc-bez{flex:none;padding:6px;border-radius:8px;
  background:linear-gradient(170deg,var(--plastic-pale) 0%,var(--plastic-lit) 30%,var(--plastic) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plastic-clear) 70%,transparent),inset 2px 2px 0 color-mix(in srgb,var(--plastic-pale) 80%,transparent),inset -2px -2px 3px color-mix(in srgb,var(--plastic-clear) 45%,transparent)}
.mc-bez span{display:block;width:112px;height:84px;overflow:hidden;background:var(--paper-pale);box-shadow:0 0 0 1px var(--plastic-floor)}
.mc-bez img{width:112px;height:84px;object-fit:none}
.more-c .pic-56k{object-position:-194px -158px}
.more-c .pic-urn{object-position:0 0}
.more-c .pic-pag{object-fit:cover}

/* ======== Pocket: the phone edition, inside the same document. Every window narrower than 760px, the period's
   800x600 canvas (Ryan, 2026-10-13: at 984 his own maximized iMac window, 985 minus a scrollbar, got the pocket).
   Between 760 and 985 the desktop composition shows and scrolls sideways, as 2002 sites did; 400% zoom
   (WCAG 1.4.10, 320 CSS px) still reflows. One column of Paper, 44px targets, 16px reading type, the same
   materials. Restyles the desktop markup; the few elements it needs of its own are .pocket-only (hidden on
   desktop), and the desktop-only ones (status bar, number buttons, store caps on Home and Products) are hidden
   here, so the accessibility tree holds one copy. ======== */
.pocket-only{display:none}
/* 759px: the pocket edition's breakpoint; site.js (var pocket = matchMedia) and the head script on Home name the same number. Change all together. */
@media (max-width:759px){
.pocket-only{display:block}
.sbar{display:none}
.site{box-sizing:border-box;width:auto;max-width:520px;margin:0 0 0 max(0px,round(down,calc((100% - 520px) / 2),1px));padding:0 20px 20px}
.obj{width:auto;height:auto;margin:0;background:none;border:0}
.obj::before{display:none}

/* Masthead: the wordmark, then the line; the keys follow it */
.mast{height:auto;padding-top:18px;border:0}
.mark{position:static;display:block;width:fit-content;padding:6px 0}
.mark img{max-width:100%;height:auto}
.tagline{position:static;margin-top:10px;font:italic 400 var(--size-16)/var(--lead-16) var(--font-display)}

/* The keys: the three Bondi spheres as a row on a hairline, labels under them. The current page is the lit company bead,
   standing a little larger. Always closed: the first tap goes to the page. */
.keys{position:relative;display:flex;width:auto;height:auto;margin-top:12px}
.keys::before{content:"";position:absolute;top:30px;left:16.66%;right:16.66%;height:1px;background:var(--rule-heavy)}
.keys .key,.keys .key:hover,.keys .key:focus-visible{position:static;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;box-sizing:border-box;width:auto;height:auto;min-height:76px;padding:8px 0 6px;border-radius:0;background:none;box-shadow:none;z-index:auto}
.keys .key:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.keys .key .key-ball,.keys .key:hover .key-ball{position:relative;inset:auto;display:grid;width:44px;height:44px;place-items:center}
.keys .key .key-well,.keys .key:hover .key-well,.keys .key .key-arm,.keys .key:hover .key-arm{display:none}
.keys .key-tag{position:static;transform:none;font:400 var(--size-13)/16px var(--font-technical);font-feature-settings:var(--feat-technical)}

/* The newsletter: the molded Putty tray, a 44px field and a Bondi cap. 16px in the field, so a phone does not zoom. */
.pk-news,.more-b .news{box-sizing:border-box;position:static;width:auto;margin-top:16px;padding:16px;border-radius:10px;
  background:linear-gradient(170deg,var(--paper-pale) 0%,var(--putty-tint) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--chassis-edge) 80%,var(--ink)),inset 1px 1px 0 var(--paper-pale),inset -1px -1px 0 color-mix(in srgb,var(--chassis-edge) 70%,transparent),inset -3px -3px 6px color-mix(in srgb,var(--chassis-edge) 22%,transparent),0 5px 8px -4px color-mix(in srgb,var(--ink) 30%,transparent)}
.nl-line{margin-bottom:12px;font:400 var(--size-16)/var(--lead-16) var(--font-text)}
.nl-row{gap:8px}
.nl-field,.more-b .nl-field{flex:1;width:auto;min-width:0;height:44px;padding:0 10px;font:400 16px/24px var(--font-technical)}
.nl-row .cap{height:44px;padding:0 14px;font-size:var(--control-label-md)}
.terms{margin-top:12px;color:var(--ink-soft)}
.terms a{color:var(--ink-soft)}
.more-b .terms,.more-b .terms a{color:var(--ink-soft)}

/* The hero: the page in its Faceplate bezel at half size, whole */
.stage{display:flex;flex-direction:column;align-items:stretch;padding:20px 0 0}
.monitor{align-self:center}
.screen{width:272px;height:170px}
.screen img,.screen canvas{width:272px;height:170px}
.pk-note{margin-top:14px;font:italic 400 var(--size-16)/var(--lead-16) var(--font-display);color:var(--ink-soft)}

/* The index: the tray, each product one Chrome cap wide: its bead, name and line, tapped as one */
.index{width:auto;margin:14px 0 0;padding:10px}
.index .no,.index .cap,.passes .cap{display:none}
.prod{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;min-height:76px;padding:12px 14px}
.prod+.prod{margin-top:8px}
.prod-head{display:contents}
.prod .bead{grid-column:1;grid-row:1 / span 2}
.prod .name{grid-column:2;grid-row:1;align-self:end}
.prod .line{grid-column:2;grid-row:2;align-self:start;text-wrap:pretty;font:400 var(--size-16)/20px var(--font-text)}
.prod .bead,.prod .name,.prod .line{position:relative;z-index:1;pointer-events:none}
.pk-go{position:absolute;inset:0;z-index:0;display:block;border-radius:var(--radius-cap)}
.pk-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Our Products: each product a block, its picture in a bezel of its own plastic */
.table{padding:28px 0 0}
.table .pk-note{margin:8px 0 22px}
.passes{grid-template-columns:1fr;gap:20px;margin-top:0}
.pass,.pass:nth-child(odd){height:auto;display:flex;flex-direction:column;align-items:stretch}
.pass+.pass{padding-top:20px;border-top:1px solid var(--rule-hairline)}
.pass-head .bead{--bead:44px}
.pass-name a{display:inline-flex;align-items:center;min-height:44px}
.pass-what{margin-top:6px;font:400 var(--size-16)/var(--lead-16) var(--font-text)}
.win,.win-fit{width:auto;height:auto;margin-top:14px;padding:8px;border:0;border-radius:10px;
  background:linear-gradient(170deg,var(--plastic-pale) 0%,var(--plastic-lit) 30%,var(--plastic) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plastic-clear) 70%,transparent),inset 2px 2px 0 color-mix(in srgb,var(--plastic-pale) 80%,transparent),inset -2px -2px 3px color-mix(in srgb,var(--plastic-clear) 45%,transparent)}
.win img,.win-fit img{width:100%;height:176px;object-fit:cover;object-position:top;background:var(--paper-pale);box-shadow:0 0 0 1px var(--plastic-floor)}
.win-fit img,.pass[data-product="userednet"] .win img{object-fit:contain;object-position:center;background:var(--paper)}

/* More: the newsletter leads, then the principles hung on one vertical line from a 56px bead to a 36px one, then About */
.ma,.mb,.mc{height:auto}
.mb{display:flex;flex-direction:column}
.mb-net{display:none}
.more-b .news .sec-h,.mb-pr .sec-h{position:static;font:var(--text-hero);letter-spacing:var(--track-display)}
.more-b .news .sec-h{margin-bottom:10px;text-wrap:balance}
.mb-pr{margin-top:28px}
.mb-pr ol{position:relative}
/* the string runs bead to bead, stopping at each edge (the beads are glass) */
.mb-pr li:nth-child(-n+2)::after{content:"";position:absolute;left:28px;width:1px;background:var(--ink)}
.mb-pr li:nth-child(1)::after{top:74px;height:42px}
.mb-pr li:nth-child(2)::after{top:68px;height:52px}
.mb-pr .sec-h{margin-bottom:6px}
.mb-pr li,.mb-pr li:nth-child(n){position:relative;left:auto;top:auto;box-sizing:border-box;width:auto;min-height:92px;height:auto;gap:14px}
.mb-pr li .bead{margin:0 calc((56px - var(--bead)) / 2)}
.more-b .about{position:static;order:3;width:auto;margin-top:12px}

/* 56k: the page in its bezel, then the name, the line, the cap and what it does */
.pp-col{width:auto;margin:20px 0 0}
.pp-col .cap-md{height:44px;margin-top:16px;padding:0 18px}
.pp-what{font:400 var(--size-16)/var(--lead-16) var(--font-text)}

/* The foot: three plain rows under one Ink rule, each a 44px target */
.foot{display:block;margin:28px 0 0}
.tabs{display:block;padding:0;border-top:1px solid var(--ink)}
.tab-hang,.tab-hang:hover,.tab-hang:focus-visible{display:flex;height:44px;padding:0;border:0;border-bottom:1px solid var(--rule-hairline);border-radius:0;background:none;font-size:var(--size-13)}
.tab-hang:focus-visible{outline-offset:-2px}
}

/* The pocket homepage never shows the Grayscale Filter slider (no index to pick it); its own page does, and the grip centres on the half-size picture; a desktop window narrowed after picking 04 falls back to the 56k clip. */
@media (max-width:759px){#monitor .split{display:none!important}#monitor #fig-img{display:block!important}.split-grip{top:69px}}