/* AI Connections: a switchboard on paper. Lo-fi windows with label strips and
   hard shadows, a halftone green desk, patch cables, tight giant type.
   Two accents: green for the connection and anything switched on, yellow
   for the thing to act on (copy, the live string).
   Departure Mono (a pixel font, sized in steps of 11px) carries the labels.
   Only the fonts are shared with the Seeker Studio site. */
@font-face{font-family:Geist;src:url('../assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"Departure Mono";src:url('../assets/fonts/departure-mono.woff2') format('woff2');font-display:swap}
@font-face{font-family:GeistMono;src:url('../assets/fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  color-scheme:light;
  --paper:#f3f1ea;--win:#fcfbf7;--ink:#111110;--ink-2:#4f4d47;--ink-3:#7a776e;
  --field:#1fa35c;--field-dot:#178c4d;--field-ink:#0b6b3c;
  --hi:#ffe14d;--lamp:#3ddc84;--lamp-off:#c9c6bc;
  --sans:Geist,system-ui,-apple-system,'Segoe UI',sans-serif;--mono:GeistMono,ui-monospace,'SF Mono',Menlo,Consolas,monospace;--pixel:'Departure Mono',var(--mono);
  --pad:clamp(16px,4vw,40px);--wrap:1200px;
  --shadow:5px 5px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ol,ul,figure,pre,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--field-ink);outline-offset:3px}
::selection{background:var(--hi);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:fixed;top:-100px;left:16px;z-index:50;background:var(--ink);color:var(--win);padding:10px 14px}
.skip:focus{top:12px}

/* Top bar */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:stretch;height:52px;background:var(--paper);border-bottom:2px solid var(--ink)}
.top .mark{display:grid;place-items:center;flex:none;width:52px;background:var(--ink)}
.top .mark svg{width:30px;height:30px}
.top .name{display:flex;align-items:center;padding:0 16px;font:700 16px var(--sans);letter-spacing:-.02em;text-decoration:none;margin-right:auto;white-space:nowrap}
.top nav{display:flex;align-items:stretch;margin-left:auto}
.top nav a{display:flex;align-items:center;padding:0 18px;font:600 15px var(--sans);text-decoration:none;border-left:2px solid var(--ink);white-space:nowrap}
.top nav a:hover{background:var(--win)}
.top nav .go{background:var(--ink);color:var(--win)}
.top nav .go:hover{background:var(--field-ink)}

/* Window: a solid label strip with a status lamp, like tape on a patch bay */
.win{background:var(--win);border:2px solid var(--ink);box-shadow:var(--shadow);min-width:0}
.win-title{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px 0 12px;background:var(--ink);color:var(--win)}
.win-title::after{content:'';flex:none;margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--win)}
.win-title>*{font:400 11px/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.win-body{padding:18px}
.win.dark{background:var(--ink);color:var(--win)}
.win.dark .win-title{background:#2b2a27;border-bottom:2px solid var(--win)}
.code .win-title>*{text-transform:none;letter-spacing:0}

/* Hero: the headline on the left, the prompt to copy on the right */
.hero{padding:clamp(32px,5vw,72px) 0 clamp(48px,6vw,88px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.kicker{font:600 15px var(--sans);color:var(--ink-2);margin-bottom:18px}
.kicker b{display:inline-block;margin-right:8px;padding:2px 8px;background:var(--ink);color:var(--win);font:400 11px/1.9 var(--pixel);letter-spacing:.08em;vertical-align:2px}
h1{font:700 clamp(38px,4.3vw,64px)/.95 var(--sans);letter-spacing:-.05em;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(transparent 55%,var(--hi) 55% 88%,transparent 88%)}
.sub{max-width:34em;margin-top:clamp(22px,3vw,32px);font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font:600 17px var(--sans)}
.ctas a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.ctas a:hover{text-decoration-color:var(--field-ink)}
@keyframes on{to{opacity:1}}

/* Provider marks: one inline sprite, drawn in the current text colour */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.lg{flex:none;width:22px;height:22px;fill:currentColor}

/* Logo strip */
.logos{padding:clamp(28px,4vw,44px) 0;border-top:2px solid var(--ink)}
.logos h2{margin-bottom:18px;font:400 11px/1.4 var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.logos ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 24px}
.logos li{display:flex;align-items:center;gap:8px;font:600 15px var(--sans);white-space:nowrap}

/* Patch panel: one cable lit at a time, stepping through the providers */
.patch svg{display:block;width:100%;max-height:320px;margin:auto;padding:14px 18px}
.patch text{font:400 13.2px var(--pixel);fill:var(--ink)}
.patch .app{fill:var(--hi);stroke:var(--ink);stroke-width:2}
.patch .cable{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:2 5;animation:plug 12s step-end infinite}
.patch .lamp{fill:var(--lamp-off);stroke:var(--ink);stroke-width:1.5;animation:lamp 12s step-end infinite}
.patch .jack{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.patch .pin{fill:var(--ink)}
.patch use{fill:var(--ink)}
.patch .n2{animation-delay:2s}.patch .n3{animation-delay:4s}.patch .n4{animation-delay:6s}.patch .n5{animation-delay:8s}.patch .n6{animation-delay:10s}
@keyframes plug{0%{stroke:var(--ink);stroke-width:3.5;stroke-dasharray:none}16.6%{stroke:var(--ink-3);stroke-width:2;stroke-dasharray:2 5}}
@keyframes lamp{0%{fill:var(--lamp)}16.6%{fill:var(--lamp-off)}}
.patch-foot{padding:10px 16px;border-top:2px solid var(--ink);font:12.5px/1.5 var(--mono);color:var(--ink-2)}

/* The desktop: a dithered green field */
.desk{position:relative;padding:clamp(40px,6vw,80px) 0 clamp(56px,7vw,96px);background-color:var(--field);background-image:radial-gradient(var(--field-dot) 1.2px,transparent 1.4px);background-size:4px 4px;border-block:2px solid var(--ink);overflow:hidden;isolation:isolate}
.desk .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:stretch}
.desk .win{display:flex;flex-direction:column}
.desk-label{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--win);font:400 22px/1.2 var(--pixel);text-transform:uppercase}
.desk-label span{padding:4px 10px;background:var(--ink)}
.w-patch{grid-column:1/8}
.w-session{grid-column:8/13}
.w-board{grid-column:1/6}
.w-swap{grid-column:6/13}

/* Prompt window with tabs */
.tabs{display:flex;border-bottom:2px solid var(--ink)}
.tabs[hidden]{display:none}
.tabs button{flex:1;padding:11px 8px;border:0;border-right:2px solid var(--ink);background:var(--paper);font:600 14px var(--sans);color:var(--ink-2);cursor:pointer}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected=true]{background:var(--win);color:var(--ink);box-shadow:inset 0 -4px 0 var(--field)}
.tabs button:hover{color:var(--ink)}
.tabs button:focus-visible{outline-offset:-5px}
.panel{padding:18px}
.panel+.panel{border-top:2px dashed var(--ink-3)}
.js .panel+.panel{border-top:0}
.panel[hidden]{display:none}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.js .panel-head>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.js .panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:start}
.js .panel[hidden]{display:none}
.js .panel-head{grid-column:2;grid-row:1;margin:0}
.js .panel pre{grid-column:1;grid-row:1}
.js .panel p{grid-column:1/-1;margin:0}
.panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font:500 15.5px/1.6 var(--mono)}
.panel pre .sh::before{content:'$ ';color:var(--ink-3)}
.panel p{margin-top:12px;font-size:14px;color:var(--ink-2)}
.copy{flex:none;padding:7px 14px;border:2px solid var(--ink);background:var(--hi);color:var(--ink);font:700 13px var(--sans);cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.copy[hidden]{display:none}
.copy:hover{background:var(--win)}
.copy:active{transform:translate(2px,2px);box-shadow:none}
.copy[data-done]{background:var(--lamp)}
.hint{padding:12px 18px;border-top:2px solid var(--ink);font:12.5px/1.5 var(--mono);color:var(--ink-2)}

/* Session log */
.log{padding:16px 18px 18px;font:13px/1.6 var(--mono)}
.log li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;opacity:0;animation:on .01s forwards}
.log li+li{margin-top:7px}
.log li:nth-child(1){animation-delay:0.6s}.log li:nth-child(2){animation-delay:1.1s}.log li:nth-child(3){animation-delay:1.6s}.log li:nth-child(4){animation-delay:2.1s}.log li:nth-child(5){animation-delay:2.6s}.log li:nth-child(6){animation-delay:3.1s}.log li:nth-child(7){animation-delay:3.6s}
.log .you{color:var(--hi)}
.log .ok{color:var(--lamp)}
.log .diff{display:block;margin-top:5px;padding:8px 10px;border:1px dashed rgba(252,251,247,.45);white-space:pre-wrap;overflow-wrap:anywhere}
.log .diff b{color:var(--lamp)}

/* Switchboard */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--ink);border-bottom:2px solid var(--ink)}
.jack{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;padding:16px 4px 12px;border:0;background:var(--win);font:600 13px/1.2 var(--sans);color:var(--ink);cursor:pointer;text-align:center}
.jack:disabled{cursor:default;color:var(--ink)}
.jack:not(:disabled):hover{background:var(--paper)}
.jack:focus-visible{outline-offset:-5px}
.jack i{position:relative;display:grid;place-items:center;width:26px;height:26px}
.jack .lg{width:26px;height:26px}
.jack i::after{content:'';position:absolute;top:-9px;right:-11px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);background:var(--lamp-off)}
.jack[aria-pressed=true],.jack[aria-pressed=true]:hover{background:var(--lamp)}
.jack[aria-pressed=true] i::after{background:var(--lamp)}
.board-foot{margin-top:auto;padding:11px 16px;font:12.5px/1.5 var(--mono);color:var(--ink-2)}

/* Code window */
.code pre{padding:18px;overflow-x:auto;font:13px/1.75 var(--mono)}
.code .c{color:var(--ink-3)}
.code .k{color:var(--ink);font-weight:700}
.code .s{color:var(--field-ink)}
.code .live{background:var(--hi);color:var(--ink);padding:1px 2px}
.code-foot{margin-top:auto;padding:11px 18px;border-top:2px solid var(--ink);font:12.5px/1.5 var(--mono);color:var(--ink-2)}
.code-foot b{color:var(--ink)}

/* Sections on paper */
.section{padding:clamp(64px,9vw,120px) 0 0}
.overview{padding:0 0 clamp(48px,6vw,88px)}
.section-head{display:grid;gap:16px;margin-bottom:clamp(28px,4vw,48px)}
.section-head .num{grid-column:1/-1;font:400 22px/1 var(--pixel);text-transform:uppercase;color:var(--ink-2)}
.section-head h2{font:700 clamp(28px,3.2vw,48px)/1.05 var(--sans);letter-spacing:-.04em}
.section-head p{max-width:34em;color:var(--ink-2);font-size:18px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.grid h3{font:700 20px/1.2 var(--sans);letter-spacing:-.025em;margin-bottom:8px}
.grid p{color:var(--ink-2);font-size:15.5px}
main code{font:600 .88em var(--mono);background:var(--paper);padding:1px 5px;border:1px solid var(--lamp-off);overflow-wrap:anywhere}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.two .win{display:flex;flex-direction:column}
.two .win-body{flex:1;display:flex;flex-direction:column}
.two h3{font:700 24px/1.2 var(--sans);letter-spacing:-.03em;margin-bottom:8px}
.two p{color:var(--ink-2);margin-bottom:16px}
.two p+p{margin-top:-4px}
.two p:last-child{margin-bottom:0}
.two dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin-top:16px;font-size:15px}
.two dt{font:700 12px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.two dd{color:var(--ink-2)}
.two pre{margin-top:auto;padding:10px 12px;border:2px solid var(--ink);background:var(--paper);font:600 14px var(--mono);overflow-x:auto}
.two pre::before{content:'$ ';color:var(--ink-3)}
.tag{display:inline-block;margin-left:6px;padding:2px 8px;border:2px solid var(--ink);background:var(--paper);font:400 11px/1.5 var(--pixel);letter-spacing:.04em;vertical-align:5px}
.tag.on{background:var(--hi)}
.two a{text-decoration:underline;text-underline-offset:3px}
.checks-win{margin-top:30px}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 36px}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;color:var(--ink-2)}
.checks li::before{content:'';width:14px;height:14px;margin-top:5px;border:2px solid var(--ink);background:var(--lamp)}
.checks strong{color:var(--ink)}

/* Closing */

/* Footer window */
.foot{padding:0 0 48px}
.foot .win{max-width:480px;margin:0 auto}
.foot .win-body{font:400 11px/2 var(--pixel);letter-spacing:.04em}
.foot .tm{margin-top:10px;color:var(--ink-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px}
.foot a{text-underline-offset:3px}
.foot a:hover{color:var(--field-ink)}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .w-patch,.w-session,.w-board,.w-swap{grid-column:1/-1}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .section-head{grid-template-columns:1fr}
}
@media(max-width:680px){
  .logos ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .top .name{padding:0 12px;font-size:15px}
  .top nav a{padding:0 14px;font-size:14px}
  .top nav .hide-sm{display:none}
  .grid,.two,.checks{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tabs button{font-size:12.5px;padding:11px 4px}
  .panel pre{font-size:14px}
  .js .panel{grid-template-columns:1fr}
  .js .panel-head{grid-column:1;grid-row:2}
  .js .panel-head .copy{width:100%;padding:11px}
  .js .panel p{grid-row:3}
  .desk .wrap{gap:24px}
  :root{--shadow:4px 4px 0 var(--ink)}
}
@media(max-width:400px){
  .top .name{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .log li{opacity:1;animation:none}
  .patch .cable,.patch .lamp{animation:none}
  .patch .cable.n1{stroke:var(--ink);stroke-width:3.5;stroke-dasharray:none}
  .patch .lamp.n1{fill:var(--lamp)}
}