/* Route landing page (design "Landing v3"). Fonts are self-hosted: Schibsted
   Grotesk, B612 Mono and VT323 (SIL Open Font License). */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'B612 Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/b612-mono-400.woff2) format('woff2')}
@font-face{font-family:'B612 Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/b612-mono-700.woff2) format('woff2')}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/vt323-latin.woff2) format('woff2')}

:root{
  --ink:#17161A;--ink-2:#3F3B37;--body:#4A443E;--muted:#58524B;
  --plum:oklch(0.5 0.2 350);--plum-hover:oklch(0.44 0.2 350);--plum-text:oklch(0.47 0.2 350);--plum-ring:oklch(0.6 0.21 350);--plum-ring-light:oklch(0.43 0.2 350);
  --mono:'B612 Mono',ui-monospace,monospace;--sans:'Schibsted Grotesk',system-ui,sans-serif;--lcd:'VT323',ui-monospace,monospace;
  --panel-label:#ADAAB3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;background:#DDD7CD radial-gradient(1400px 800px at 50% -120px,#F6F3EC 0%,#E6E1D8 55%,#D8D1C6 100%) no-repeat}
a{color:var(--plum);text-decoration:none}
a:hover{color:var(--plum-hover);text-decoration:underline}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--plum-ring-light);outline-offset:3px;border-radius:6px}
.router :focus-visible{outline-color:var(--plum-ring)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px;color:#fff}
.wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:14px 22px;font-weight:700;font-size:16px;cursor:pointer;transition:filter .12s ease,transform .08s ease,box-shadow .08s ease}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn:active{transform:translateY(3px)}
.btn-primary{background:linear-gradient(180deg,oklch(0.56 0.2 350),oklch(0.48 0.2 350));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 oklch(0.36 0.16 350),0 12px 24px -8px oklch(0.4 0.18 350 / .55)}
.btn-primary:hover{color:#fff}
.btn-primary:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 oklch(0.36 0.16 350)}
.btn-secondary{background:linear-gradient(180deg,#FDFBF7,#EDE8DF);color:var(--ink);font-weight:600;padding:14px 20px;box-shadow:inset 0 1px 0 #fff,0 4px 0 #BDB5A8,0 12px 24px -10px rgba(60,50,40,.35)}
.btn-secondary:hover{color:var(--ink);filter:brightness(1.02)}
.btn-secondary:active{box-shadow:inset 0 1px 0 #fff,0 1px 0 #BDB5A8}
.btn-small{border-radius:8px;padding:9px 15px;font-size:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 oklch(0.36 0.16 350),0 6px 14px -4px oklch(0.4 0.18 350 / .5)}
.btn-small:active{transform:translateY(2px)}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{color:var(--ink);text-decoration:none}
.brand span{font-size:19px;font-weight:700;letter-spacing:-0.01em}
.site-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-weight:500}
.site-nav a:not(.btn){color:var(--ink-2)}
@media(max-width:480px){.site-nav{gap:16px}.site-nav a[href^="#"]{display:none}}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding-top:36px;padding-bottom:20px}
.hero h1{margin:0;font-size:clamp(42px,7vw,92px);font-weight:800;letter-spacing:-0.045em;line-height:.95;max-width:980px;text-wrap:balance}
.hero p{margin:0;font-size:19px;color:var(--body);line-height:1.5;max-width:640px;text-wrap:pretty}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* Router panel */
.router-section{padding-top:28px;padding-bottom:72px}
.router-shell{container-type:inline-size}
.router{position:relative;aspect-ratio:1000/600;border-radius:2.4cqw;background:linear-gradient(180deg,#3D3D44 0%,#2C2C31 42%,#232327 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -0.4cqw 0 rgba(0,0,0,.35),0 0.25cqw 0 #121214,0 5cqw 8cqw -3cqw rgba(30,24,18,.6),0 2cqw 3cqw -2cqw rgba(30,24,18,.5)}
.screw{position:absolute;width:2cqw;height:2cqw;border-radius:50%;box-shadow:inset 0 -1px 1px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.08)}
.screw.tl{left:1.8%;top:3%;background:linear-gradient(45deg,transparent 44%,#1E1E21 44% 56%,transparent 56%),radial-gradient(circle at 35% 30%,#CFCCC6,#7A776F 60%,#3E3D3A)}
.screw.tr{right:1.8%;top:3%;background:linear-gradient(-45deg,transparent 44%,#1E1E21 44% 56%,transparent 56%),radial-gradient(circle at 35% 30%,#CFCCC6,#7A776F 60%,#3E3D3A)}
.screw.bl{left:1.8%;bottom:3%;background:linear-gradient(20deg,transparent 44%,#1E1E21 44% 56%,transparent 56%),radial-gradient(circle at 35% 30%,#CFCCC6,#7A776F 60%,#3E3D3A)}
.screw.br{right:1.8%;bottom:3%;background:linear-gradient(70deg,transparent 44%,#1E1E21 44% 56%,transparent 56%),radial-gradient(circle at 35% 30%,#CFCCC6,#7A776F 60%,#3E3D3A)}
.panel-top{position:absolute;left:5%;right:5%;top:3.4%;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:max(10px,1.25cqw);letter-spacing:.14em;color:var(--panel-label);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.panel-top b{color:#E9E6EE}
.env-switch{display:flex;align-items:center;gap:.9cqw;background:none;border:0;padding:.4cqw 0;cursor:pointer;font:inherit;letter-spacing:inherit;text-shadow:inherit}
.env-switch .env-label{color:#9A96A0;transition:color .15s ease}
.env-switch .env-label.on{color:#E9E6EE}
.env-switch .env-label.on.prod{color:#F3E7C9}
.env-track{position:relative;width:4.2cqw;height:2.1cqw;border-radius:1.05cqw;background:linear-gradient(180deg,#121214,#1C1C1F);box-shadow:inset 0 .2cqw .4cqw rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08);flex:none}
.env-knob{position:absolute;top:.2cqw;left:.2cqw;width:1.7cqw;height:1.7cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F0EEEA,#A9A59D 55%,#5E5B56);box-shadow:0 .15cqw .3cqw rgba(0,0,0,.6);transition:left .18s cubic-bezier(.3,.7,.2,1)}
.env-switch[aria-checked="true"] .env-knob{left:2.3cqw}
.env-led{width:1cqw;height:1cqw;border-radius:50%;flex:none;background:oklch(0.86 0.16 95);box-shadow:0 0 1.2cqw oklch(0.86 0.16 95 / .9);transition:background .15s ease,box-shadow .15s ease}
.env-switch[aria-checked="true"] .env-led{background:oklch(0.82 0.19 145);box-shadow:0 0 1cqw oklch(0.82 0.19 145 / .9)}
.col-label{position:absolute;top:11.5%;font-family:var(--mono);font-size:max(10px,1.05cqw);letter-spacing:.16em;color:var(--panel-label);text-shadow:0 1px 0 rgba(0,0,0,.6);text-transform:uppercase}
.col-label.src{left:4%;width:13%;text-align:right}
.col-label.mid{left:32%;width:36%;text-align:center}
.col-label.dst{left:83%;width:13%}

.jack-row{position:absolute;width:15.2%;height:9%;display:flex;align-items:center;gap:1.2cqw}
.jack-row.src{left:1%;justify-content:flex-end}
.jack-row.dst{left:83.8%;justify-content:flex-start}
.jack-text{display:flex;flex-direction:column;gap:.35cqw;line-height:1.1}
.jack-row.src .jack-text{align-items:flex-end}
.jack-row.dst .jack-text{align-items:flex-start}
.jack-name{background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:max(10px,1.3cqw);color:#C9C5CE;text-shadow:0 1px 0 rgba(0,0,0,.6);white-space:nowrap}
.jack-row.active .jack-name{color:#fff}
.asset-group{display:flex;gap:.25cqw;padding:.25cqw;border-radius:.65cqw;background:#141416;box-shadow:inset 0 .15cqw .35cqw rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07)}
.asset{width:2.7cqw;height:2.3cqw;min-width:15px;min-height:13px;border:0;border-radius:.45cqw;padding:0;cursor:pointer;display:grid;place-items:center;background:transparent;transition:background .1s ease}
.asset:hover{background:#232327}
.asset[aria-pressed="true"]{background:linear-gradient(180deg,#5C5C65,#44444B);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 .12cqw 0 #0C0C0E,0 .2cqw .4cqw rgba(0,0,0,.5)}
.asset img{width:max(10px,1.45cqw);height:max(10px,1.45cqw);display:block;border-radius:50%;opacity:.45;filter:grayscale(1)}
.asset[aria-pressed="true"] img{opacity:1;filter:none}
.asset img.light{background:#EDEAF0;padding:1px}
.jack{width:4.4cqw;height:4.4cqw;border-radius:50%;flex:none;border:0;padding:0;cursor:pointer;background:radial-gradient(circle,#070708 0 27%,#1B1B1D 29% 34%,transparent 35%),radial-gradient(circle at 35% 30%,#ECEAE5,#9E9A92 40%,#4B4946 72%,#2C2B29 100%);box-shadow:0 .3cqw .6cqw rgba(0,0,0,.55),inset 0 -.2cqw .3cqw rgba(0,0,0,.4)}
.jack-row.active .jack{box-shadow:0 0 0 .4cqw oklch(0.6 0.21 350 / .55),0 .3cqw .6cqw rgba(0,0,0,.55),inset 0 -.2cqw .3cqw rgba(0,0,0,.4)}

.module{position:absolute;left:32%;width:36%;height:8.333%;border-radius:.8cqw;background:linear-gradient(180deg,#35353B,#2B2B30);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.5),0 .3cqw .6cqw rgba(0,0,0,.4);display:grid;grid-template-columns:1.4cqw minmax(0,1fr) auto;align-items:center;gap:1.2cqw;padding:0 1.8cqw}
.module.selected{background:linear-gradient(180deg,#46434C,#35333A);box-shadow:0 0 0 1px oklch(0.6 0.21 350 / .75),0 0 2cqw -.4cqw oklch(0.6 0.21 350 / .5),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.5),0 .3cqw .6cqw rgba(0,0,0,.4)}
.module::before,.module::after{content:'';position:absolute;top:50%;width:1.4cqw;height:1.4cqw;margin-top:-.7cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#D9D6D0,#6F6C66 70%)}
.module::before{left:-.7cqw}.module::after{right:-.7cqw}
.module-led{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#4A3F3C;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.module.selected .module-led{background:oklch(0.84 0.19 145);box-shadow:0 0 1.2cqw oklch(0.84 0.19 145 / .9)}
.module.standby .module-led{background:oklch(0.84 0.15 80);box-shadow:0 0 .8cqw oklch(0.84 0.15 80 / .6)}
.module.checking .module-led{background:oklch(0.7 0.02 280);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.module-text{min-width:0;line-height:1.2}
.module-name{display:block;font-family:var(--mono);font-weight:700;font-size:max(10px,1.3cqw);color:#EDEAF0;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.module-status{display:block;font-family:var(--mono);font-size:max(11px,1cqw);letter-spacing:.06em;color:#9A949E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.module.selected .module-status{color:oklch(0.84 0.19 145)}
.module.standby .module-status{color:oklch(0.84 0.15 80)}
.module-read{font-family:var(--mono);font-size:max(11px,1.15cqw);color:#6E6A73;white-space:nowrap}
.module.selected .module-read,.module.standby .module-read{color:#D9D5DD}
.module.off .module-name{color:#B3AEB8}
.cables{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
@keyframes signal{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.cable-signal{animation:signal 1.7s linear infinite;opacity:.9}

.panel-bottom{position:absolute;top:81.5%;height:14%;display:flex;flex-direction:column;justify-content:center;gap:1cqw}
.panel-bottom.amount{left:4%;width:21%}
.panel-bottom.strategy{right:4%;width:21%}
.panel-bottom .col-label{position:static}
.keys{display:flex;gap:.9cqw}
.key{flex:1;height:4.4cqw;border:0;border-radius:.7cqw;cursor:pointer;font-family:var(--mono);font-size:max(9px,1.25cqw);font-weight:700;letter-spacing:.04em;color:#EDEAF0;background:linear-gradient(180deg,#505058,#3A3A40);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 .35cqw 0 #18181B,0 .7cqw 1cqw rgba(0,0,0,.4);transition:transform .08s ease,box-shadow .08s ease}
.key[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,oklch(0.56 0.21 350),oklch(0.47 0.2 350));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 .05cqw 0 #18181B,0 .2cqw .4cqw rgba(0,0,0,.4);transform:translateY(.3cqw)}
.strategy .key{font-size:max(9px,1.15cqw)}
.asset:disabled,.jack:disabled,.jack-name:disabled,.key:disabled{cursor:not-allowed;opacity:.35}
.key:disabled{transform:none}
.lcd{position:absolute;left:28%;width:44%;top:81.5%;height:14%;border-radius:1cqw;background:linear-gradient(180deg,#060C0C,#0A1414);box-shadow:inset 0 .4cqw 1cqw rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.1),0 0 0 .35cqw #1A1A1D;padding:1cqw 2cqw;display:flex;flex-direction:column;justify-content:center;font-family:var(--lcd);color:#86F5E6;text-shadow:0 0 .6cqw rgba(134,245,230,.55);line-height:1.08;overflow:hidden}
.lcd div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd .split{display:flex;min-width:0}
.lcd .split .lcd-route{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lcd .split .lcd-amount{flex:none}
.lcd .l0{font-size:1.8cqw;color:#5FBFB2}.lcd .l1{font-size:2.6cqw}.lcd .l2{font-size:1.9cqw}
.router-note[hidden]{display:none}
.router-note{margin:14px 2px 0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);text-align:center}

/* Mobile controls (below 900px the panel keeps jacks and modules; controls move below) */
.router-mobile{display:none;margin-top:20px;flex-direction:column;gap:14px}
.mobile-controls{display:flex;flex-direction:column;gap:14px}
.lcd-mobile{border-radius:12px;background:linear-gradient(180deg,#060C0C,#0A1414);box-shadow:inset 0 3px 10px rgba(0,0,0,.85),0 0 0 4px #2A2A2F;padding:12px 16px;font-family:var(--lcd);color:#86F5E6;text-shadow:0 0 6px rgba(134,245,230,.55);line-height:1.15}
.lcd-mobile .l0{font-size:15px;color:#5FBFB2}.lcd-mobile .l1{font-size:21px}.lcd-mobile .l2{font-size:16px}
/* Phone and tablet control card (the panel above is a picture of the result) */
.mobile-controls:empty{display:none}
.mobile-controls{position:relative;display:grid;gap:16px;padding:16px;border-radius:16px;background:linear-gradient(180deg,#FEFCF8,#F1ECE3);box-shadow:inset 0 1px 0 #fff,0 6px 0 #C7BFB2,0 18px 30px -14px rgba(60,48,36,.35)}
.seg-label{display:block;margin-bottom:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.segmented{display:flex;gap:3px;padding:3px;border-radius:10px;background:#E6E0D6;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
.seg{flex:1;min-height:44px;padding:0 8px;border:0;border-radius:8px;background:transparent;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer}
.seg:hover{background:rgba(255,255,255,.5)}
.seg[aria-pressed="true"]{background:linear-gradient(180deg,oklch(0.56 0.21 350),oklch(0.47 0.2 350));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.2)}
.seg:disabled{opacity:.4;cursor:not-allowed;background:transparent}
.pick-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px}
.seg-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.picker-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:8px 12px;border:1px solid #cfc8bf;border-radius:10px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.picker-trigger:hover{border-color:#b8b0a6}
.picker-trigger:focus-visible,.picker-trigger[aria-expanded="true"]{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px #f5eaf2}
.picker-trigger img,.picker-option img{width:24px;height:24px;flex:none;display:block;border-radius:50%}
.picker-trigger img.light,.picker-option img.light{background:#EDEAF0;padding:1px}
.picker-value{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.picker-value b{font-size:16px}
.picker-value span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.select-chevron{width:7px;height:7px;flex:none;margin:-3px 4px 0 0;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.picker-trigger[aria-expanded="true"] .select-chevron{transform:rotate(225deg);margin-top:4px}
.swap{width:44px;height:44px;margin-bottom:5px;display:grid;place-items:center;border:1px solid #cfc8bf;border-radius:50%;background:#fff;color:var(--ink-2);font-size:18px;cursor:pointer}
.swap:hover{border-color:#b8b0a6}
.swap:disabled{opacity:.4;cursor:not-allowed}
.swap-v{display:none}
.picker-menu{position:absolute;left:12px;right:12px;z-index:20;max-height:min(380px,60vh);margin:0;padding:4px;overflow:auto;list-style:none;background:#fff;border:1px solid #e4dfd8;border-radius:12px;box-shadow:0 14px 34px rgba(28,25,23,.2)}
.picker-group{padding:10px 10px 4px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.picker-option{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;user-select:none}
.picker-option small{font-size:12px;font-weight:400;color:var(--muted)}
.picker-option[aria-selected="true"]{background:#f7edf4}
.picker-option.active,.picker-option:hover{background:#f1eee9}
.picker-option.active[aria-selected="true"]{background:#f3e5ee}
.picker-option[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.picker-option .check{margin-left:auto;color:var(--plum);visibility:hidden}
.picker-option[aria-selected="true"] .check{visibility:visible}
@media(max-width:480px){
  .pick-row{grid-template-columns:minmax(0,1fr)}
  .swap{justify-self:center;margin:-4px 0}
  .swap-h{display:none}
  .swap-v{display:inline}
  .seg-row{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .router-mobile{display:flex}
  .asset-group,.module-status,.module-read,.panel-bottom,.lcd,.panel-model,.col-label.mid,.env-switch{display:none}
  .router[inert] .jack,.router[inert] .jack-name{cursor:default}
}
@media(max-width:540px){
  .jack-text,.col-label{display:none}
}

/* How it works */
.how{padding-top:24px;padding-bottom:88px}
.how h2{margin:0 0 28px;font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-0.035em;line-height:1}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:26px;margin:0;padding:0;list-style:none}
.step{border-radius:18px;padding:26px 26px 28px;background:linear-gradient(180deg,#FEFCF8,#EEE9E0);box-shadow:inset 0 1px 0 #fff,0 8px 0 #C7BFB2,0 24px 36px -14px rgba(60,48,36,.4);display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.step-top{display:flex;justify-content:space-between;align-items:center}
.step-led{width:12px;height:12px;border-radius:50%;box-shadow:0 0 10px var(--led),inset 0 -1px 1px rgba(0,0,0,.25);background:var(--led)}
.step h3{margin:0;font-size:40px;font-weight:800;letter-spacing:-0.04em;line-height:1}
.step code{font-family:var(--mono);font-size:12px;color:var(--plum-text)}
.step p{margin:0;color:var(--body);line-height:1.55;font-size:15px}

/* Receipt */
.api{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));border-top:1px solid rgba(23,22,26,.08)}
.api-grid{padding-top:80px;padding-bottom:96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:48px;align-items:center}
.api-copy{display:flex;flex-direction:column;gap:18px;max-width:520px}
.api-copy h2{margin:0;font-size:clamp(34px,5vw,60px);font-weight:800;letter-spacing:-0.04em;line-height:.98;text-wrap:balance}
.api-copy p{margin:0;font-size:18px;color:var(--body);line-height:1.55;text-wrap:pretty}
.api-line{font-family:var(--mono);font-size:13px;color:var(--ink-2);background:rgba(255,255,255,.55);border-radius:8px;padding:10px 14px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08);align-self:flex-start;overflow-wrap:anywhere}
.api-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.receipt-wrap{justify-self:center;width:calc(100% - 12px);max-width:390px;transform:rotate(-1.8deg);filter:drop-shadow(0 26px 30px rgba(50,38,26,.28)) drop-shadow(0 2px 2px rgba(50,38,26,.18))}
.receipt{background:linear-gradient(180deg,#FFFDF8,#F7F2E8);padding:28px 26px 44px;font-family:var(--mono);font-size:12px;line-height:1.7;color:#2A2622;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.receipt .center{text-align:center}
.receipt .title{font-weight:700;letter-spacing:.14em}
.receipt .sub{letter-spacing:.1em;color:var(--muted)}
.receipt .meta{color:var(--muted);margin-bottom:10px;overflow-wrap:anywhere}
.receipt hr{border:0;border-top:1px dashed #9C948A;margin:6px 0}
.receipt .row{display:flex;justify-content:space-between;gap:12px}
.receipt .row span:first-child{color:var(--muted);min-width:0;flex:1}
.receipt .row span:last-child{text-align:right;overflow-wrap:break-word;min-width:0;flex:0 1 58%}
.receipt .row span:only-child{flex:1;text-align:left}
.receipt-transfer{font-size:16px;font-weight:700;line-height:1.5;text-align:center;margin:16px 0 10px;text-wrap:balance}
.receipt-details{margin:8px 0}
.receipt-details summary{cursor:pointer;font-weight:700;color:var(--plum-text);padding:4px 0}
.receipt-details summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.receipt-details[open] summary{margin-bottom:8px}
.receipt-comparison .row:not(.note){display:block;border-top:1px dotted #c7beb2;padding-top:8px;margin-top:8px}
.receipt-comparison .row:not(.note) span{display:block;text-align:left}
.receipt-comparison .row:not(.note) span:last-child{font-size:11px}
.receipt .row.strong{font-weight:700}
.receipt .row.strong span:first-child{color:inherit}
.receipt .row.big{font-size:15px}
.receipt .row.note{font-size:11px;line-height:1.5;margin-bottom:4px}
.receipt .row.note span{text-align:left;color:var(--muted)}
.receipt .barcode{height:38px;margin-top:10px;background:repeating-linear-gradient(90deg,#2A2622 0 2px,transparent 2px 4px,#2A2622 4px 5px,transparent 5px 8px,#2A2622 8px 11px,transparent 11px 12px,#2A2622 12px 13px,transparent 13px 16px)}
.receipt pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:11px;line-height:1.55;max-height:520px;overflow:auto}

/* Footer */
.site-footer{border-top:1px solid rgba(23,22,26,.12)}
.site-footer .wrap{padding-top:22px;padding-bottom:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.site-footer .brandline{display:flex;align-items:center;gap:10px}
.site-footer .brandline b{color:var(--ink)}
.site-footer nav{display:flex;gap:18px;flex-wrap:wrap}
.site-footer nav a{color:var(--muted)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Windows High Contrast: keep controls, pressed states and the switch visible. */
@media(forced-colors:active){
  .router,.lcd,.lcd-mobile,.receipt,.step{border:1px solid CanvasText}
  .key,.seg,.swap,.picker-trigger,.asset,.jack,.env-track,.btn{border:1px solid ButtonText;forced-color-adjust:none;background:ButtonFace;color:ButtonText}
  .key[aria-pressed="true"],.seg[aria-pressed="true"],.picker-option[aria-selected="true"],.asset[aria-pressed="true"],.jack[aria-pressed="true"]{background:Highlight;color:HighlightText}
  .env-knob{background:ButtonText}
  .module.selected{outline:2px solid Highlight}
  .picker-trigger:focus-visible,.seg:focus-visible,.swap:focus-visible{outline:2px solid Highlight}
  .picker-trigger .picker-value span,.picker-trigger .select-chevron{color:ButtonText;border-color:ButtonText}
  .picker-option.active{outline:2px solid Highlight;outline-offset:-2px}
  .picker-option[aria-selected="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .picker-option[aria-selected="true"] small,.picker-option[aria-selected="true"] .check{color:HighlightText}
}