/* Fukugo landing.
   Type: Geist for everything, Geist Mono for what a machine wrote (tool names, hosts, commands, requests).
   Colour: one continuous night. An aurora in the app's Liquid Glass colours opens and closes the page;
   mint is the one accent, and the severity colours appear only where a finding is shown.
   Three radii, two shadows, one label style. Buttons change colour under the pointer and never move. */

@font-face{font-family:"Geist";src:url(assets/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(assets/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* theme colours are registered so a window can glide from one theme to the next */
@property --t-bg{syntax:"<color>";inherits:true;initial-value:#10141e}
@property --t-fg{syntax:"<color>";inherits:true;initial-value:#eff4ff}
@property --t-accent{syntax:"<color>";inherits:true;initial-value:#75e5ca}
@property --t-muted{syntax:"<color>";inherits:true;initial-value:#a9b9cb}
@property --t-border{syntax:"<color>";inherits:true;initial-value:#46566c}
@property --t-surface{syntax:"<color>";inherits:true;initial-value:#1e2b3a}
@property --t-g1{syntax:"<color>";inherits:true;initial-value:#34566c}
@property --t-g2{syntax:"<color>";inherits:true;initial-value:#292e50}
@property --t-g3{syntax:"<color>";inherits:true;initial-value:#27554b}
@property --sp1{syntax:"<color>";inherits:true;initial-value:#f0a6cd}
@property --sp2{syntax:"<color>";inherits:true;initial-value:#e9c69b}
@property --sp3{syntax:"<color>";inherits:true;initial-value:#91dfc7}
@property --sp4{syntax:"<color>";inherits:true;initial-value:#a2b8ed}
@property --sev{syntax:"<color>";inherits:true;initial-value:#ff8f79}

:root{
  --ink:#f2f5fa;--ink-2:#a8b4c4;--ink-3:#77869a;
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.18);
  --ground:#07090e;--paper:#07090e;--panel:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));--edge:rgba(255,255,255,.09);--chip:rgba(255,255,255,.08);
  --jade:#75e5ca;--mint:#75e5ca;
  --night:linear-gradient(135deg,#263c4d,#1f243c 52%,#1e3b39);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --shell:min(1200px,calc(100vw - 48px));
  --wide:min(1320px,calc(100vw - 40px));
  --bleed:calc((var(--shell) - var(--wide)) / 2);
  --r-s:10px;--r-m:16px;--r-l:20px;
  --card:0 1px 0 rgba(255,255,255,.1) inset,0 24px 50px -28px rgba(0,0,0,.7);
  --lift:0 0 0 1px rgba(10,14,22,.5),0 2px 4px rgba(19,28,38,.1),0 34px 70px -30px rgba(19,28,38,.55);
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .13 0 0 0 0 .19 .5 0 0 0 -.235'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .26 0 0 0 -.125'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  interpolate-size:allow-keywords;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#site{position:relative;isolation:isolate;overflow-x:clip}
/* the ground: near-black with a slow drift of hue and a fine grain */
#site::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain-w),linear-gradient(180deg,#07090e 0%,#080c15 28%,#090b17 52%,#070d11 78%,#07090e 100%)}
/* markers of where the sky is: the header reads them to pick its colours */
.lz{position:absolute;left:0;width:1px;pointer-events:none}
button{font:inherit;color:inherit}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4,h5{margin:0;text-wrap:balance}
::selection{background:rgba(23,102,90,.2)}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:6px}
.ic{width:16px;height:16px;flex:none}
.mark{display:block;flex:none}
code{font-family:var(--mono);font-size:12.5px}
/* the one label style: small, quiet, sentence case */
.lab{font:500 12.5px/1.2 var(--sans);color:var(--ink-3)}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r-s);text-decoration:none}
.skip:focus{top:16px}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .25s,color .25s}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ink:hover{background:color-mix(in srgb,var(--ink) 82%,var(--paper))}
.btn.glass{background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.btn.glass:hover{background:rgba(255,255,255,.14)}
.deep .btn.glass{background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.deep .btn.glass:hover{background:rgba(255,255,255,.15)}
.btn.ghost{background:transparent;box-shadow:0 0 0 1px var(--line-2) inset}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.btn.sm{height:36px;padding:0 15px;font-size:13.5px;gap:8px}
.btn.sm .ic{width:14px;height:14px}
.text-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:7px 9px;border-radius:8px;font:500 13.5px/1 var(--sans);cursor:pointer;transition:background-color .2s}
.text-btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.text-btn .ic{width:14px;height:14px}

/* ------------------------------------------------------------- header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px clamp(14px,2.6vw,36px);pointer-events:none}
.hdr>*{pointer-events:auto}
.pill{background:rgba(14,19,29,.62);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:0;border-radius:999px}
.nav{justify-self:start;display:flex;gap:2px;padding:4px}
.nav a{padding:9px 15px;border-radius:999px;font-size:14px;font-weight:450;text-decoration:none;transition:background-color .2s}
.nav a:hover{background:rgba(255,255,255,.09)}
.wordmark{display:inline-flex;align-items:center;gap:9px;padding:8px 17px 9px 12px;border-radius:999px;text-decoration:none;font:600 25px/1 var(--sans);letter-spacing:-.045em;transition:background-color .35s,box-shadow .35s}
.wordmark .mark{width:25px;height:25px}
.hdr.scrolled .wordmark{background:rgba(14,19,29,.62);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.hdr-end{justify-self:end;display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;font:500 13px/1 var(--sans);cursor:pointer;transition:background-color .2s}
.lang:hover,.menu:hover{background:rgba(36,44,60,.8)}
.lang .ic{width:15px;height:15px}
.menu{display:none;width:36px;height:36px;place-items:center;cursor:pointer}
.sentinel{position:absolute;top:0;left:0;width:1px;height:120px;pointer-events:none}
/* over the night the header turns to dark glass */
.hdr{transition:color .4s}
.pill,.wordmark{transition:background-color .4s,box-shadow .4s}
.hdr.dark{color:#eef3fb}
.hdr.dark .pill,.hdr.dark.scrolled .wordmark{background:rgba(22,29,42,.6);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.hdr.dark .nav a:hover{background:rgba(255,255,255,.1)}
.hdr.dark .lang:hover,.hdr.dark .menu:hover{background:rgba(40,50,68,.8)}
.hdr.dark .btn.ink{background:#eef3fb;color:#10141e}
.hdr.dark .btn.ink:hover{background:#fff}

/* --------------------------------------------------------------- hero */
.hero{position:relative;isolation:isolate;padding:148px 0 0}
.sky-wrap{position:absolute;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(135deg,#0b2326,#11142f 52%,#0a1f1c);-webkit-mask-image:linear-gradient(#000 46%,transparent 97%);mask-image:linear-gradient(#000 46%,transparent 97%)}
.sky{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.sky.painted{opacity:1}
.sky-wrap::after{content:"";position:absolute;inset:0;background:var(--grain-w);pointer-events:none}
.flock{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero>.flock{height:min(100%,860px);-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.hero-copy{width:min(1100px,calc(100vw - 40px));margin:0 auto;text-align:center}
h1{font:600 clamp(40px,5.3vw,74px)/1.02 var(--sans);letter-spacing:-.05em}
.req{margin-top:24px;font:400 12.5px/1.4 var(--mono);color:var(--ink-3)}
/* headings rise line by line out of their own clip */
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ln>span{display:block;translate:0 108%;transition:translate 1.05s var(--ease) calc(.05s + var(--l) * .1s)}
.in .ln>span,.in.flat .ln>span{translate:0 0}
.hero h1 .ln>span{animation:lift 1.15s var(--ease) calc(.1s + var(--l) * .12s) both;transition:none}
.reveal.flat{transform:none}
.lede{max-width:560px;margin:24px auto 0;font-size:18px;line-height:1.5;color:var(--ink-2);text-wrap:balance}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}
/* the first screen arrives in order: words, then the window */
.hero-copy>*{animation:arrive 1s var(--ease) both}
.hero-copy>h1{animation:none}
.hero-copy .req{animation-delay:.34s}
.hero-copy .lede{animation-delay:.12s}
.hero-copy .actions{animation-delay:.24s}
.demo-top{animation:arrive 1s var(--ease) .34s both}
.win{animation:arrive 1.1s var(--ease) .4s both}

.demo{position:relative;width:var(--wide);margin:64px auto 0;scroll-margin-top:92px}
/* stage light: the window stands in a pool of the glass colours */
.demo::before{content:"";position:absolute;z-index:-1;left:4%;right:4%;top:10%;bottom:8%;pointer-events:none;filter:blur(60px);background:radial-gradient(46% 60% at 28% 50%,rgba(70,84,200,.42),transparent 72%),radial-gradient(46% 60% at 74% 56%,rgba(60,190,160,.3),transparent 72%)}
.win-body.swap>*{animation:swap .45s var(--ease) both}
.demo-top{display:flex;justify-content:space-between;align-items:center;padding:0 8px 10px;font-size:13px;color:var(--ink-2)}

/* the app window: the Fukugo session window, laid out as the app lays it out */
.win{
  --w-2:var(--t-muted);--w-line:color-mix(in srgb,var(--t-fg) 16%,transparent);--w-line2:color-mix(in srgb,var(--t-fg) 26%,transparent);
  --w-surf:color-mix(in srgb,var(--t-surface) 66%,transparent);--w-surf2:color-mix(in srgb,var(--t-fg) 7%,transparent);--w-soft:color-mix(in srgb,var(--t-accent) 16%,transparent);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Geist Mono",monospace;
  position:relative;border-radius:14px;overflow:hidden;color:var(--t-fg);
  background:linear-gradient(135deg,color-mix(in srgb,var(--t-g1) 56%,transparent),color-mix(in srgb,var(--t-g2) 56%,transparent) 52%,color-mix(in srgb,var(--t-g3) 56%,transparent)),color-mix(in srgb,var(--t-bg) 82%,transparent);
  -webkit-backdrop-filter:blur(34px) saturate(1.6);backdrop-filter:blur(34px) saturate(1.6);
  box-shadow:0 0 0 1px rgba(255,255,255,.13) inset,var(--lift);
  transition:--t-bg .7s var(--ease),--t-fg .7s var(--ease),--t-accent .7s var(--ease),--t-muted .7s var(--ease),--t-border .7s var(--ease),--t-surface .7s var(--ease),--t-g1 .7s var(--ease),--t-g2 .7s var(--ease),--t-g3 .7s var(--ease),--sp1 .7s,--sp2 .7s,--sp3 .7s,--sp4 .7s;
}
.win.is-light{box-shadow:0 0 0 1px rgba(255,255,255,.85) inset,0 0 0 1px rgba(19,28,38,.1),0 2px 4px rgba(19,28,38,.05),0 34px 70px -30px rgba(19,28,38,.3)}
.win .s0{--sev:#ff8f79}.win .s1{--sev:#f0bf6a}.win .s2{--sev:#9cc3df}
.win.is-light .s0{--sev:#c9432c}.win.is-light .s1{--sev:#a8690f}.win.is-light .s2{--sev:#47708e}
.sess{transition:opacity .55s var(--ease)}
.win.is-welcome .sess{opacity:0;pointer-events:none}
.win.is-welcome .win-foot{visibility:hidden}

.tb{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;padding:0 10px 0 16px;color:#dcdde1;background:rgba(22,23,26,.9);border-bottom:1px solid rgba(255,255,255,.07);transition:background-color .55s var(--ease),border-color .55s,color .55s}
.win.is-light .tb{color:#263242;background:rgba(246,248,250,.82);border-bottom-color:rgba(19,28,38,.1)}
.win.is-welcome .tb{background:transparent;border-bottom-color:transparent;color:var(--t-muted)}
.tb-l{display:flex;align-items:center;gap:5px;min-width:0}
.lights{display:flex;gap:8px;margin-right:14px}
.lights i{width:12px;height:12px;border-radius:50%;background:#f0635a}
.lights i:nth-child(2){background:#f1b83a}
.lights i:nth-child(3){background:#3fc257}
.tb-app{display:flex;align-items:center;gap:9px;margin-right:12px}
.app-ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:#efeff4;color:#111}
.app-ic .mark{width:15px;height:15px}
.tb-app strong{font:600 14px/1 var(--sans);letter-spacing:-.01em}
.tb-btn{width:30px;height:28px;display:grid;place-items:center;border:0;border-radius:7px;background:none;color:inherit;opacity:.7;transition:background-color .2s,opacity .2s}
.tb-btn .ic{width:17px;height:17px}
button.tb-btn{cursor:pointer}
button.tb-btn:hover{opacity:1;background:rgba(127,127,127,.22)}
.tb-c{display:flex;align-items:center;gap:8px;font:450 13px/1 var(--sans);opacity:.82}
.avatar{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#8fd9c8,#a7a9f0);color:#17212d}
.avatar .mark{width:11px;height:11px}
.tb-c .ic{width:12px;height:12px;opacity:.7}
.tb-r{justify-self:end;display:flex;align-items:center;gap:6px;min-width:0}
.seg{display:flex;align-items:center}
.seg button{position:relative;border:0;background:none;padding:5px 15px;border-radius:999px;font:500 13px/1.25 var(--sans);color:inherit;opacity:.6;cursor:pointer;white-space:nowrap;transition:background-color .2s,opacity .2s}
.seg button+button::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:currentColor;opacity:.24}
.seg button[aria-selected=true]{opacity:1;background:rgba(127,127,127,.3)}
.seg button[aria-selected=true]::before,.seg button[aria-selected=true]+button::before{display:none}
.seg button:hover{opacity:1}

.win-body{position:relative;height:500px;outline-offset:-3px}
.win-foot{padding:0 12px 12px}
.win.no-foot .win-foot{display:none}
.win.no-foot .win-body{height:594px}
.resume{height:28px;display:flex;align-items:center;padding:0 5px;font:400 12.5px/1 var(--mono);color:var(--w-2)}
.composer{display:flex;align-items:center;gap:12px;height:54px;padding:0 12px 0 16px;border-radius:14px;border:1px solid var(--w-line);background:color-mix(in srgb,var(--t-surface) 74%,transparent)}
.composer p{flex:1;min-width:0;font:400 13px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer p.ph{color:var(--w-2)}
.clip{display:grid;color:var(--w-2)}
.clip .ic{width:19px;height:19px}
.send{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--t-fg) 15%,transparent);color:var(--w-2);cursor:pointer;transition:background-color .25s,color .25s,box-shadow .35s}
.send .ic{width:15px;height:15px}
.send:hover{background:var(--t-fg);color:var(--t-bg)}
.send.hit{background:var(--t-accent);color:var(--t-bg);box-shadow:0 0 0 7px var(--w-soft)}

/* terminal: conversation, AGENTS and MODEL, in the cells of the app's own layout */
.tui{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:14px;padding:14px 12px 2px;font:400 13px/1.55 var(--mono)}
.tui-chat,.tui-box{border:1px solid var(--w-line);border-radius:5px}
.tui-chat{display:flex;min-width:0;min-height:0}
.tui-log{flex:1;min-height:0;overflow:hidden auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:14px 16px 12px}
.tui-log::-webkit-scrollbar{display:none}
.tui-user{max-width:100%;padding:4px;border:1px solid var(--w-line2);border-radius:3px}
.tui-user span{display:block;padding:1px 16px;background:color-mix(in srgb,var(--t-bg) 78%,transparent)}
.tl{max-width:100%}
.typing::after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-.18em;background:var(--t-accent);animation:blink 1s steps(2,start) infinite}
.tui-link{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 10px;border:1px solid color-mix(in srgb,var(--t-accent) 46%,transparent);border-radius:5px;background:var(--w-soft);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .25s}
.tui-link:hover{background:color-mix(in srgb,var(--t-accent) 26%,transparent)}
.tui-link .ic{width:15px;height:15px;color:var(--t-accent)}
.tui-status{display:flex;align-items:center;gap:10px;min-height:20px;color:var(--w-2)}
.tui-status i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;opacity:.7}
.tui-status.on i{border-color:transparent;background:var(--t-accent);opacity:1;animation:ping 1.5s ease-out infinite}
.tui-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.tui-box{display:flex;flex-direction:column;gap:7px;padding:9px 12px 12px}
.tui-box.grow{flex:1;min-height:0}
.tui-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;letter-spacing:.02em;color:var(--w-2)}
.tui-chip{padding:0 7px;border-radius:2px;font-weight:700;color:var(--t-fg);background:color-mix(in srgb,var(--t-bg) 72%,transparent)}
.tree{list-style:none;display:flex;flex-direction:column;gap:5px;margin:3px 0 0;padding:0}
.tree li{display:flex;align-items:center;gap:9px;min-width:0}
.tree li.root strong{font-weight:700}
.tree li:not(.root){padding-left:16px}
.tree button{display:flex;align-items:center;gap:9px;min-width:0;border:0;background:none;padding:0;font:inherit;color:var(--w-2);text-align:left;cursor:pointer;transition:color .2s}
.tree button span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree button:hover{color:var(--t-fg)}
.st{flex:none;width:12px;height:12px;display:grid;place-items:center}
.st i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--w-2)}
.st.active i{border:0;background:var(--t-fg)}
.tree li:not(.root) .st.active i{background:var(--t-accent);animation:ping 1.5s ease-out infinite}
.st.done{color:var(--t-accent)}
.st .ic{width:12px;height:12px}
.model{font-weight:700;overflow-wrap:anywhere}
.tui-box dl{display:grid;grid-template-columns:1fr auto;gap:0 12px;margin:5px 0 0;color:var(--w-2)}
.tui-box dd{margin:0;text-align:right;color:var(--t-fg)}
.tui-box small{font-size:12px;line-height:1.45;color:var(--w-2)}
.fresh{animation:rise .5s var(--ease) both}

/* agent graph: the app's own page in a frame */
.graph-frame{display:block;width:100%;height:100%;border:0;background:transparent}

/* reports and files, as the app's own views lay them out */
.win .btn.ghost{box-shadow:0 0 0 1px var(--w-line2) inset;color:var(--t-fg)}
.win .btn.ghost:hover{background:var(--w-surf2)}
.rv{height:100%;display:flex;flex-direction:column;gap:16px;padding:24px 26px 20px}
.rv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.rv-head h3{font:600 26px/1.1 var(--sans);letter-spacing:-.02em}
.rv-head p{margin-top:6px;font-size:13px;color:var(--w-2)}
.rv-filter{display:flex;flex-wrap:wrap;gap:8px}
.rv-filter button{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px;border:1px solid var(--w-line);border-radius:7px;background:none;color:var(--w-2);font:500 12.5px/1 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.rv-filter b{font-weight:600;font-variant-numeric:tabular-nums}
.rv-filter button:hover:enabled{color:var(--t-fg)}
.rv-filter button[aria-pressed=true]{background:var(--w-surf2);color:var(--t-fg);border-color:var(--w-line2)}
.rv-filter button:disabled{opacity:.45;cursor:default}
.rv-split{flex:1;min-height:0;display:grid;grid-template-columns:290px minmax(0,1fr);border:1px solid var(--w-line);border-radius:12px;overflow:hidden}
.rv-list{list-style:none;margin:0;padding:8px;overflow:auto;border-right:1px solid var(--w-line);background:var(--w-surf2)}
.rv-list button{display:flex;flex-direction:column;gap:8px;width:100%;padding:11px 12px;border:0;border-radius:8px;background:none;color:inherit;text-align:left;cursor:pointer;transition:background-color .2s}
.rv-list button:hover{background:color-mix(in srgb,var(--t-fg) 6%,transparent)}
.rv-list button.sel{background:color-mix(in srgb,var(--t-fg) 12%,transparent)}
.rv-sev{display:flex;align-items:center;gap:7px;font:600 10px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--w-2)}
.rv-sev i{width:7px;height:7px;border-radius:50%;background:var(--sev)}
.rv-list strong{font:500 13px/1.35 var(--sans)}
.rv-detail{overflow:auto;padding:24px 28px;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin}
.rv-label{display:flex;align-items:center;gap:7px;font:600 12px/1 var(--sans);color:var(--sev)}
.rv-label .ic{width:14px;height:14px}
.rv-detail h4{font:600 24px/1.2 var(--sans);letter-spacing:-.02em}
.rv-detail h5{font:600 14px/1.2 var(--sans)}
.rv-detail section p{max-width:640px;margin-top:8px;font-size:14px;line-height:1.6;color:color-mix(in srgb,var(--t-fg) 86%,transparent)}
.fv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fv-list li{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 8px;border:1px solid var(--w-line);border-radius:var(--r-s);background:var(--w-surf)}
.fv-ic{width:38px;display:grid;place-items:center;color:var(--w-2)}
.fv-ic .ic{width:23px;height:23px}
.fv-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fv-nm strong{font:500 13.5px/1.3 var(--sans)}
.fv-nm small{font-size:12px;color:var(--w-2)}
.rv-note{font-size:12px;color:var(--w-2)}

/* the app's first screen: the banner over its own cloud field */
.wel{position:relative;overflow:hidden;color:var(--t-fg)}
.wel-wash{position:absolute;inset:0;background:var(--t-bg)}
.wel.is-glass>.wel-wash{background:linear-gradient(135deg,var(--t-g1),var(--t-g2) 52%,var(--t-g3))}
.wel.in-win{position:absolute;left:0;right:0;top:-45px;bottom:-94px;animation:rise .7s var(--ease) both}
.wel.in-win>.wel-wash{display:none}
.wel-cells{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:.82;pointer-events:none;color-scheme:light}
.wel-in{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 20px 26px;text-align:center}
.ascii{margin:0;font:400 12px/1.06 ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;letter-spacing:0;white-space:pre;text-align:left;-webkit-user-select:none;user-select:none;background:linear-gradient(105deg,var(--sp1),var(--sp2),var(--sp3),var(--sp4));-webkit-background-clip:text;background-clip:text;color:transparent}
.wel-in .ascii{margin-bottom:36px;font-size:clamp(4.2px,1.02vw,12.5px)}
.wel-in strong{font:600 25px/1.2 var(--sans);letter-spacing:-.6px}
.wel-p{margin-top:10px;font-size:13px;color:var(--t-muted)}
.wel-btn{width:min(320px,82%);height:44px;display:grid;place-items:center;border-radius:12px;font:500 14px/1 var(--sans);background:color-mix(in srgb,var(--t-surface) 44%,transparent);box-shadow:0 0 0 .75px color-mix(in srgb,var(--t-fg) 15%,transparent) inset}
.wel-p+.wel-btn{margin-top:28px}
.wel-btn+.wel-btn{margin-top:12px}
.wel-in small{margin-top:20px;font-size:11px;color:var(--t-muted)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:min(720px,100%);margin:26px auto 0}
.steps button{position:relative;border:0;background:none;padding:0 0 11px;font:500 13.5px/1.2 var(--sans);color:var(--ink-3);text-align:left;cursor:pointer;transition:color .25s}
.steps button i{position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;background:var(--line-2);overflow:hidden}
.steps button i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.steps button:hover{color:var(--ink)}
.steps button.past{color:var(--ink-2)}
.steps button.past i::after,.steps button[aria-pressed=true] i::after{transform:scaleX(1)}
.steps button[aria-pressed=true]{color:var(--ink)}
.steps.running button[aria-pressed=true] i::after{animation:fill 3.2s linear both}
.fine{margin:18px auto 0;max-width:640px;font-size:12.5px;line-height:1.6;color:var(--ink-3);text-align:center;text-wrap:balance}

/* ----------------------------------------------------------- sections */
.sec{position:relative;isolation:isolate;width:var(--shell);margin:0 auto;padding:176px 0 0;scroll-margin-top:-80px}
/* a thread runs from each section into the next and carries a pulse: one task, flowing through */
.sec::after{content:"";position:absolute;left:50%;top:44px;width:1px;height:92px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--mint),transparent) 0 -46px/1px 46px no-repeat,linear-gradient(180deg,transparent,rgba(255,255,255,.2) 28%,rgba(255,255,255,.2) 72%,transparent);animation:drip 3.8s cubic-bezier(.5,0,.5,1) infinite}
.head{max-width:860px;margin:0 auto;text-align:center}
h2{font:600 clamp(30px,3.5vw,48px)/1.07 var(--sans);letter-spacing:-.042em}
.head p{max-width:580px;margin:20px auto 0;font-size:18px;line-height:1.5;color:var(--ink-2);text-wrap:balance}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* a breath of the app's three glass colours behind each section's object */
.sec::before{content:"";position:absolute;z-index:-2;left:calc(50% - 50vw);width:100vw;top:10%;height:90%;pointer-events:none;background:radial-gradient(40% 44% at 50% 58%,rgba(52,86,108,.34),transparent 72%)}
.agents::before,.stack::before,.faq::before{background:radial-gradient(42% 44% at 50% 58%,rgba(54,58,120,.34),transparent 72%)}
.tools::before,.start::before{background:radial-gradient(42% 44% at 50% 52%,rgba(39,98,84,.3),transparent 72%)}
/* the counted cloud field of the app's first screen, drawn beside the column and never behind words */
.cells{position:absolute;z-index:-1;left:calc(50% - 50vw);top:-40px;width:100vw;height:calc(100% + 140px);pointer-events:none;opacity:0;transition:opacity 1.8s ease}
.cells.painted{opacity:1}

/* ------------------------------------------------------------ meaning */
/* 複合: the flock gathers into the two characters of the name */
.kanji-stage{position:relative;height:clamp(230px,31vw,380px);margin-top:34px}
.kanji-stage.reveal{transform:none}
.kanji-stage .flock{left:calc(50% - 50vw);top:-150px;width:100vw;height:calc(100% + 300px);z-index:0;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.kanji-slot{position:absolute;left:50%;top:50%;width:min(640px,80vw);aspect-ratio:1/.473;translate:-50% -50%;display:grid;place-items:center}
.kanji-fallback{font:600 min(262px,32vw)/1 "Hiragino Sans","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",sans-serif;white-space:nowrap;color:var(--ink)}
.has-flock .kanji-fallback{visibility:hidden}
.lexicon{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:22px;font-size:16px;color:var(--ink-2)}
.lexicon b{font:600 19px/1 "Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;color:var(--ink)}
.lexicon span{font-weight:500;color:var(--ink)}
.lexicon i{font-style:normal}
.proofs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:64px 0 0;padding:0;border-top:1px solid var(--line)}
.proofs li{padding:26px 34px 0 0}
.proofs li+li{padding-left:34px;border-left:1px solid var(--line)}
.proofs h3,.path h3,.notes h3{font:600 18px/1.3 var(--sans);letter-spacing:-.022em}
.proofs p,.path p,.notes p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* -------------------------------------------------------------- agents */
/* a canvas in the app's Liquid Glass: the root agent, six specialists, and the lines between them */
.night{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;margin:64px var(--bleed) 0;border-radius:var(--r-l);overflow:hidden;color:#eff4ff;background:var(--night);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,var(--lift)}
.night::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(75% 85% at 36% 50%,#000,transparent);mask-image:radial-gradient(75% 85% at 36% 50%,#000,transparent);pointer-events:none}
.night>*{position:relative;z-index:1}
.night-graph{display:flex;flex-direction:column;min-width:0;padding:22px 28px 20px}
.night-top,.night-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12.5px;color:#9fb0c4}
.night-top code{margin-left:10px;color:#eff4ff}
.night-foot{padding-top:15px;border-top:1px solid rgba(255,255,255,.09)}
.night-stage{position:relative;height:480px;margin:10px 0}
.night-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.conn{opacity:0;transition:opacity 1s var(--ease);transition-delay:calc(.6s + var(--i) * .08s)}
.night.in .conn{opacity:1}
.conn .taper{opacity:.3;transition:opacity .6s}
.conn.on .taper{opacity:1}
.conn .idle{fill:none;stroke:#c9f3e8;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1.4 98.6;stroke-dashoffset:100;opacity:.55;animation:run 5.4s linear infinite;animation-delay:calc(var(--i) * -.9s)}
.conn.on .idle{opacity:0}
.conn .flow{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:5 95;opacity:0}
.conn.on .flow.out{opacity:1;stroke-dashoffset:100;animation:run 2.4s linear infinite}
.conn.on .flow.back{opacity:.85;stroke:var(--mint);stroke-width:2;stroke-dasharray:2.5 97.5;stroke-dashoffset:0;animation:runback 3.1s linear infinite}
.port{fill:rgba(255,255,255,.34);transition:fill .5s}
.conn.on .port{fill:var(--mint)}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-46px);display:grid;justify-items:center;gap:13px}
.core-tile{width:88px;height:88px;border-radius:24px;display:grid;place-items:center;background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.24) inset}
.core-tile .mark{width:40px;height:40px;color:#fff}
.core small{font-size:12.5px;color:#9fb0c4}
.node{position:absolute;width:218px;display:flex;align-items:center;gap:12px;padding:11px 13px;border:0;border-radius:14px;color:#eff4ff;text-align:left;cursor:pointer;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
  opacity:0;transition:box-shadow .3s,background-color .3s,opacity .8s var(--ease) calc(.2s + var(--i) * .08s)}
.night.in .node{opacity:1}
.node:hover{box-shadow:0 0 0 1px rgba(255,255,255,.36) inset}
.node.sel{background:rgba(117,229,202,.14);box-shadow:0 0 0 1px rgba(117,229,202,.8) inset}
.glyph{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.glyph .ic{width:15px;height:15px}
.node strong{min-width:0;font:500 14px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-0{left:4px;top:24px}.n-1{left:4px;top:calc(50% - 27px)}.n-2{left:4px;bottom:24px}
.n-3{right:4px;top:24px}.n-4{right:4px;top:calc(50% - 27px)}.n-5{right:4px;bottom:24px}
.line-label{position:absolute;transform:translate(-50%,-50%);padding:4px 8px;border-radius:6px;font:500 11.5px/1 var(--sans);white-space:nowrap;color:#9fb0c4;background:#1f2a3f;box-shadow:0 0 0 1px rgba(255,255,255,.11) inset;pointer-events:none;transition:color .5s,box-shadow .5s}
.line-label.on{color:var(--mint);box-shadow:0 0 0 1px rgba(117,229,202,.55) inset}
.brief{display:flex;padding:28px;border-left:1px solid rgba(255,255,255,.09);background:rgba(8,12,20,.3)}
.brief-in{display:flex;flex-direction:column;width:100%;animation:rise .6s var(--ease) both}
.brief-glyph{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--mint);background:rgba(117,229,202,.12);box-shadow:0 0 0 1px rgba(117,229,202,.32) inset}
.brief-glyph .ic{width:19px;height:19px}
.brief h3{margin-top:24px;font:600 23px/1.18 var(--sans);letter-spacing:-.03em}
.brief p{margin-top:12px;font-size:14.5px;line-height:1.6;color:#aebdce}
.brief ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.brief li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}

/* --------------------------------------------------------------- tools */
/* what the agents hold: the sandbox's tools, bay by bay, then every skill guide by name */
.rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:62px var(--bleed) 0}
.rack.reveal{transform:none}
.rack-col{display:flex;flex-direction:column;gap:16px}
.bay{flex:1 1 auto;display:flex;flex-direction:column;padding:16px 20px 10px;border-radius:var(--r-m);background:var(--panel);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 0 0 1px var(--edge) inset,var(--card);
  opacity:0;translate:0 16px;transition:opacity .8s var(--ease) calc(var(--i) * .06s),translate .8s var(--ease) calc(var(--i) * .06s)}
.rack.in .bay{opacity:1;translate:0 0}
.bay header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bay h3{font:600 14.5px/1.3 var(--sans);letter-spacing:-.012em}
.bay .count{font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.bay header .mark{width:17px;height:17px}
/* rows share any spare height, so a bay never ends in a hole */
.bay ul{flex:1;display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.bay li{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:9px 0;border-bottom:1px solid var(--line)}
.bay li:last-child{border-bottom:0}
.bay code{display:block;font:500 13.5px/1.3 var(--mono);letter-spacing:-.01em;color:var(--ink)}
.bay code i{margin:0 6px;font-style:normal;color:var(--ink-3)}
.bay li span{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.bay li.sub code{font:500 13px/1.3 var(--sans);letter-spacing:-.005em;color:var(--ink-2)}
.bay.bench{color:#eff4ff;background:var(--night);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,var(--lift)}
.bay.bench header{border-bottom-color:rgba(255,255,255,.14)}
.bay.bench li{border-bottom-color:rgba(255,255,255,.1)}
.bay.bench code{color:#fff}
.bay.bench code i{color:#8fa2b8}
.bay.bench li span{color:#b4c3d4}
.tools>.fine{margin-top:22px}
/* command lines from the engine's own tool playbooks */
.term{margin:40px var(--bleed) 0;border-radius:var(--r-m);overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,var(--card)}
.term-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:42px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--ink-2)}
.term-bar strong{font-weight:600;color:var(--ink)}
.term-bar code{font-size:12px;color:var(--ink-3)}
.term ol{list-style:none;margin:0;padding:14px 18px 16px;font:400 12.5px/1.5 var(--mono);color:#b9c7d8;overflow-x:auto;scrollbar-width:thin}
.term li{display:flex;gap:12px;padding:4px 0;white-space:nowrap;opacity:0;transition:opacity .6s var(--ease) calc(.15s + var(--i) * .09s)}
.term.in li{opacity:1}
.term li::before{content:"$";color:var(--ink-3)}
.term li b{font-weight:500;color:var(--mint)}
.term li.caret i{display:block;width:8px;height:16px;background:var(--mint);animation:blink 1.1s steps(2,start) infinite}
.guides{margin:56px var(--bleed) 0;border-top:1px solid var(--line)}
.guides>div{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;padding:20px 0;border-bottom:1px solid var(--line)}
.guides dt{display:flex;align-items:baseline;gap:10px;font:600 15px/1.5 var(--sans);letter-spacing:-.012em}
.guides dt b{font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.guides dd{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.guides dd span{white-space:nowrap}
.guides dd span:not(:last-child)::after{content:"\00B7";margin:0 .12em 0 .45em;color:var(--ink-3)}

/* ------------------------------------------------------------ evidence */
/* one finding in the app's dark glass, with six notes wired to the parts they speak about */
.anatomy{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 600px minmax(0,1fr);align-items:center;gap:0 76px;margin:66px var(--bleed) 0}
.ana-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ana-lines g{opacity:0;transition:opacity .9s var(--ease) calc(.5s + var(--i) * .1s)}
.anatomy.in .ana-lines g{opacity:1}
.ana-lines path{fill:none;stroke:color-mix(in srgb,var(--ink) 34%,transparent);stroke-width:1}
.ana-lines circle{fill:var(--ground);stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:1.2}
.ana-lines rect{fill:var(--jade)}
.notes{list-style:none;display:flex;flex-direction:column;gap:56px;margin:0;padding:0}
.notes.left{align-items:flex-end;text-align:right}
.notes li{max-width:270px;opacity:0;translate:0 14px;transition:opacity .8s var(--ease) calc(.2s + var(--i) * .12s),translate .8s var(--ease) calc(.2s + var(--i) * .12s)}
.anatomy.in .notes li{opacity:1;translate:0 0}
.notes h3{display:inline-block}

.fcard{position:relative;z-index:1;border-radius:var(--r-l);overflow:hidden;color:var(--t-fg);--f-line:color-mix(in srgb,var(--t-fg) 13%,transparent);--f-soft:color-mix(in srgb,var(--t-fg) 7%,transparent);background:var(--night);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,var(--lift);transition:--sev .7s var(--ease)}
.fcard.s0,.fc-sev .s0{--sev:#ff8f79}.fcard.s1,.fc-sev .s1{--sev:#f0bf6a}.fcard.s2,.fc-sev .s2{--sev:#9cc3df}
.fcard::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 46% at 88% 0%,color-mix(in srgb,var(--sev) 24%,transparent),transparent 72%)}
.fcard>*{position:relative;z-index:1}
.fcard .lab{color:var(--t-muted)}
.fc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px 13px 14px;border-bottom:1px solid var(--f-line)}
.fc-sev{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--f-soft)}
.fc-sev button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:none;padding:7px 13px;font:500 12.5px/1 var(--sans);color:var(--t-muted);cursor:pointer;transition:background-color .25s,color .25s}
.fc-sev button i{width:7px;height:7px;border-radius:50%;background:var(--sev)}
.fc-sev button:hover{color:var(--t-fg)}
.fc-sev button[aria-pressed=true]{background:color-mix(in srgb,var(--t-fg) 15%,transparent);color:var(--t-fg)}
.fc-tag{font-size:12.5px;color:var(--t-muted)}
.finding{padding:26px 28px 0;min-height:372px}
.finding-in{animation:rise .5s var(--ease) both}
.fc-label{display:flex;align-items:center;gap:8px;font:600 12.5px/1 var(--sans);color:var(--sev)}
.fc-label .ic{width:15px;height:15px}
.finding h3{margin-top:14px;font:600 25px/1.18 var(--sans);letter-spacing:-.035em}
.fc-desc{margin-top:10px;font-size:14px;line-height:1.6;color:var(--t-muted)}
/* the exchange that proves it, in the notation of curl -v: > sent, < received */
.xchg{margin-top:20px;border-radius:var(--r-s);overflow:hidden;background:rgba(6,9,15,.5);box-shadow:0 0 0 1px var(--f-line) inset}
.xchg .lab{display:block;padding:10px 14px 0}
.rv-detail .xchg{max-width:640px;margin-top:10px}
.rv-detail .xchg pre{padding-top:11px}
.win.is-light .xchg{background:rgba(19,28,38,.06)}
.win.is-light .xchg span{color:#3c4a5a}
.win.is-light .xchg span.hot{color:var(--sev)}
.xchg pre{margin:0;padding:8px 0 11px;font:400 12px/1.6 var(--mono);overflow-x:auto;scrollbar-width:none}
.xchg span{display:block;padding:0 14px;white-space:pre;color:#b9c7d8}
.xchg span::before{content:attr(data-d);display:inline-block;width:20px;color:var(--t-muted);opacity:.7}
.xchg span.in{color:var(--t-fg)}
.xchg span.hot{color:var(--sev);background:color-mix(in srgb,var(--sev) 13%,transparent)}
.fc-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;padding-top:20px;border-top:1px solid var(--f-line)}
.fc-two p{margin-top:8px;font-size:13.5px;line-height:1.55;color:color-mix(in srgb,var(--t-fg) 86%,transparent)}
.fc-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;padding:14px 14px 14px 28px;border-top:1px solid var(--f-line)}
.fc-exports{display:flex;gap:6px}
.fc-exports span{padding:6px 9px;border-radius:6px;font:500 11.5px/1 var(--mono);color:var(--t-muted);background:var(--f-soft)}
.btn.mint{background:var(--t-accent);color:var(--t-bg)}
.btn.mint:hover{background:color-mix(in srgb,var(--t-accent) 78%,#fff)}
.evidence>.fine{margin-top:38px}

/* -------------------------------------------------------------- stack */
.trip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;margin-top:62px}
.card{display:grid;grid-row:span 4;grid-template-rows:subgrid;padding:10px 10px 24px;border-radius:var(--r-m);background:var(--panel);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 0 0 1px var(--edge) inset,var(--card)}
.card:nth-child(2){transition-delay:.08s}.card:nth-child(3){transition-delay:.16s}
.card h3{margin:22px 16px 0;font:600 20px/1.2 var(--sans);letter-spacing:-.028em}
.card>p{margin:9px 16px 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.card small{display:flex;align-items:flex-start;gap:8px;margin:16px 16px 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.card small .ic{width:13px;height:13px;margin-top:2px}
.art{position:relative;height:244px;border-radius:var(--r-s);overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.rays,.feeds{position:absolute}
.rays{inset:0;width:100%;height:100%}
.rays path,.feeds path{fill:none;stroke:color-mix(in srgb,var(--ink) 32%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.art-core{position:absolute;z-index:1;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:15px;display:grid;place-items:center;background:var(--ink);color:var(--paper)}
.art-core .mark{width:24px;height:24px}
.prov,.tile,.host,.chips span{background:var(--chip);box-shadow:0 0 0 1px var(--line)}
.prov{position:absolute;z-index:2;translate:-50% -50%;padding:7px 12px;border-radius:999px;font:500 12.5px/1.2 var(--sans);white-space:nowrap}
.p0{left:23%;top:19%}.p1{left:75%;top:23%}.p2{left:19%;top:62%}.p3{left:80%;top:63%}.p4{left:50%;top:87%}
.tiles{position:absolute;left:14px;right:14px;top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 0 10px;border-radius:12px;font:500 11.5px/1.2 var(--sans);color:var(--ink-2)}
.tile img,.tile .logo{display:block;width:24px;height:24px}
.logo{background:var(--ink)}
.logo.gh{-webkit-mask:url(assets/github.svg) center/contain no-repeat;mask:url(assets/github.svg) center/contain no-repeat}
.logo.mcp{-webkit-mask:url(assets/mcp.svg) center/contain no-repeat;mask:url(assets/mcp.svg) center/contain no-repeat}
.logo.zap{-webkit-mask:url(assets/zap.svg) center/contain no-repeat;mask:url(assets/zap.svg) center/contain no-repeat}
.feeds{left:14px;top:88px;width:calc(100% - 28px);height:40px}
.art-core.low{top:126px;width:42px;height:42px;margin:0 0 0 -21px;border-radius:12px}
.art-core.low .mark{width:19px;height:19px}
.chips{position:absolute;left:10px;right:10px;bottom:13px;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.chips span{padding:5px 9px;border-radius:999px;font:500 11.5px/1.2 var(--sans);white-space:nowrap;color:var(--ink-2)}
.art-runtime{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px}
.host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:128px;padding:18px 8px 16px;border-radius:12px;text-align:center}
.host-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.host-ic .ic{width:18px;height:18px}
.host strong{font:600 13px/1.2 var(--sans)}
.host code{font-size:10.5px;line-height:1.45;color:var(--ink-3);text-wrap:balance}
.tunnel{width:76px;display:grid;justify-items:center;gap:8px;font:500 11.5px/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.tunnel i{display:block;width:100%;height:1px;background:color-mix(in srgb,var(--ink) 40%,transparent)}

/* ------------------------------------------------------------- themes */
.theme-obj{display:grid;justify-items:center;margin-top:60px}
.tw{width:min(900px,100%);height:520px;border-radius:14px;box-shadow:0 0 0 1px color-mix(in srgb,var(--t-border) 55%,transparent),0 34px 70px -30px rgba(19,28,38,.55);
  transition:--t-bg .9s var(--ease),--t-fg .9s var(--ease),--t-accent .9s var(--ease),--t-muted .9s var(--ease),--t-border .9s var(--ease),--t-surface .9s var(--ease),--t-g1 .9s var(--ease),--t-g2 .9s var(--ease),--t-g3 .9s var(--ease),--sp1 .9s var(--ease),--sp2 .9s var(--ease),--sp3 .9s var(--ease),--sp4 .9s var(--ease)}
.tw-bar{position:absolute;z-index:2;inset:0 0 auto 0;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 16px;color:var(--t-muted)}
.tw-bar .lights{margin:0}
.swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.swatches button{width:38px;height:38px;padding:4px;border:0;border-radius:50%;background:none;cursor:pointer;box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .25s}
.swatches button i{position:relative;display:block;width:100%;height:100%;border-radius:50%;background:var(--sg);box-shadow:0 0 0 1px rgba(19,28,38,.16) inset}
.swatches button i::after{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-radius:50%;background:var(--sa);box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
.swatches button:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 45%,transparent) inset}
.swatches button[aria-pressed=true]{box-shadow:0 0 0 1.6px var(--ink) inset}
.theme-name{margin-top:14px;font:500 13.5px/1 var(--sans);color:var(--ink-2)}
.also{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);max-width:1040px;margin:56px auto 0;padding:0;border-top:1px solid var(--line)}
.also li{padding:20px 24px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.also li+li{padding-left:24px;border-left:1px solid var(--line)}

/* -------------------------------------------------------------- start */
.path{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:64px 0 0;padding:0}
.path::before{content:"";position:absolute;left:0;right:6%;top:15px;height:1px;background:var(--line-2)}
.path li{position:relative;padding-right:28px}
.path .n{position:relative;z-index:1;display:inline-grid;place-items:center;width:31px;height:31px;border-radius:50%;font:600 13px/1 var(--sans);font-variant-numeric:tabular-nums;background:var(--ink);color:var(--paper);box-shadow:0 0 0 6px #090c14}
.path h3{margin-top:22px}
.path p{max-width:255px}
.prompt-box{display:flex;align-items:center;gap:14px;max-width:820px;margin:56px auto 0;padding:8px 8px 8px 20px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,var(--card)}
.prompt-box code{flex:1;min-width:0;font:400 13.5px/1.5 var(--mono);color:var(--ink)}
.start-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---------------------------------------------------------------- faq */
.faq-list{max-width:820px;margin:50px auto 0;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;font:500 17px/1.35 var(--sans);letter-spacing:-.015em;cursor:pointer;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--jade)}
summary .ic{width:17px;height:17px;color:var(--ink-3);transition:rotate .4s var(--ease)}
details[open] summary .ic{rotate:45deg}
.ans p{padding:0 64px 24px 4px;font-size:15px;line-height:1.65;color:var(--ink-2)}
details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}

/* ------------------------------------------------------------ closing */
.closing{position:relative;isolation:isolate;margin-top:130px;padding:150px 20px 270px;text-align:center}
.closing .sky-wrap{-webkit-mask-image:linear-gradient(transparent,#000 32%,#000 62%,transparent 90%);mask-image:linear-gradient(transparent,#000 32%,#000 62%,transparent 90%)}
.closing .flock{-webkit-mask-image:linear-gradient(#000 70%,transparent 90%);mask-image:linear-gradient(#000 70%,transparent 90%)}
.closing-copy{display:grid;justify-items:center}
.mark-slot{width:212px;height:212px;display:grid;place-items:center;margin-bottom:22px}
.mark-slot .fallback{width:150px;height:150px}
.has-flock .mark-slot .fallback{visibility:hidden}
.closing h2{font-size:clamp(36px,4.6vw,62px);letter-spacing:-.046em}
.closing-copy>p{margin:18px 0 30px;font-size:18px;color:var(--ink-2)}
/* the waitlist: an email and, if the visitor likes, what they want from the product */
.wl{width:min(560px,100%);text-align:left;scroll-margin-top:min(440px,54vh)}
.wl-lead{margin:0 0 16px;font-size:14.5px;line-height:1.5;color:var(--ink-2);text-align:center;text-wrap:balance}
.wl-box{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:var(--r-l);background:rgba(9,12,19,.66);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);box-shadow:0 0 0 1px rgba(255,255,255,.13) inset,var(--card)}
.wl-f{display:flex;flex-direction:column;gap:7px}
.wl-f .lab{color:var(--ink-2)}
.wl-f .lab i{font-style:normal;color:var(--ink-3)}
.wl input[type=email],.wl textarea{width:100%;border:0;border-radius:var(--r-s);padding:12px 14px;font:400 15px/1.45 var(--sans);color:var(--ink);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.13) inset;resize:vertical;transition:box-shadow .2s,background-color .2s}
.wl textarea{min-height:92px;max-height:240px}
.wl input::placeholder,.wl textarea::placeholder{color:var(--ink-3)}
.wl input[type=email]:focus,.wl textarea:focus{outline:0;background:rgba(255,255,255,.09);box-shadow:0 0 0 1.5px var(--mint) inset}
.wl input[aria-invalid=true]{box-shadow:0 0 0 1.5px #ff8f79 inset}
.wl-box{position:relative}
.wl-trap{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none;clip-path:inset(50%)}
.wl-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.wl-msg{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.wl-msg.bad{color:#ff8f79}
.wl .btn:disabled{opacity:.6;cursor:default}
.wl-done{display:grid;justify-items:center;gap:8px;padding:22px 10px 12px;text-align:center}
.wl-check{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--paper);background:var(--mint)}
.wl-check .ic{width:20px;height:20px}
.wl-done strong{margin-top:8px;font:600 21px/1.2 var(--sans);letter-spacing:-.025em}
.wl-done p{font-size:14.5px;color:var(--ink-2);overflow-wrap:anywhere}
.wl-done p b{font-weight:500;color:var(--ink)}
/* the footer is the app's own first screen: night glass, the cell field, the banner in its dark colours */
.foot{position:relative;isolation:isolate;overflow:hidden;padding:70px clamp(20px,4vw,60px) 28px;font-size:13.5px;line-height:1.6;color:var(--ink-2);background:var(--grain-w),linear-gradient(180deg,#07090e,rgba(7,9,14,0) 60%),linear-gradient(135deg,#142631,#13152c 52%,#112622)}
.foot .cells{left:0;top:0;width:100%;height:100%}
.foot-brand{display:block;width:max-content;max-width:100%;margin:0 auto;text-decoration:none}
.foot-brand .ascii{font-size:clamp(3.6px,1.72vw,12.5px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:36px 96px;max-width:1200px;margin:70px auto 0;padding-top:34px;border-top:1px solid var(--line)}
.foot-about p{max-width:440px}
.foot-about p:first-child{font-size:15.5px;color:var(--ink)}
.foot-about p+p{margin-top:6px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-col a,.foot-col button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:0;font:500 13.5px/1.4 var(--sans);color:var(--ink-2);text-decoration:none;cursor:pointer;transition:color .2s}
.foot-col a:hover,.foot-col button:hover{color:var(--ink)}
.foot-col .ic{width:12px;height:12px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 30px;max-width:1200px;margin:46px auto 0;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.toast{position:fixed;left:50%;bottom:28px;z-index:80;translate:-50% 16px;padding:11px 18px;border-radius:999px;font-size:13.5px;color:var(--paper);background:var(--ink);opacity:0;pointer-events:none;transition:opacity .3s,translate .3s var(--ease)}
.toast.on{opacity:1;translate:-50% 0}

/* ---------------------------------------------------------- keyframes */
@keyframes blink{to{visibility:hidden}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--t-accent) 55%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@keyframes rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes arrive{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes run{to{stroke-dashoffset:0}}
@keyframes runback{to{stroke-dashoffset:100}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lift{from{translate:0 108%}to{translate:0 0}}
@keyframes swap{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes drip{0%{background-position:0 -46px,0 0}70%,100%{background-position:0 92px,0 0}}

.still *,.still *::before,.still *::after{animation-play-state:paused!important}
/* things that arrive once must not stay hidden while motion is paused */
.still .fresh,.still .brief-in,.still .finding-in,.still .hero-copy>*,.still .demo-top,.still .win,.still .wel.in-win,.still .win-body.swap>*,.still .hero h1 .ln>span{animation:none!important}
.still .hero h1 .ln>span{translate:0 0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .ln>span{translate:0 0}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* -------------------------------------------------------------- narrow */
@media (max-width:1120px){
  .night{grid-template-columns:1fr}
  .brief{border-left:0;border-top:1px solid rgba(255,255,255,.09)}
  .trip{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .card{margin-bottom:16px}
  .cells{display:none}
  .anatomy{grid-template-columns:minmax(0,600px);justify-content:center;gap:44px 0}
  .ana-lines{display:none}
  .fcard{order:-1}
  .notes,.notes.left{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;align-items:start;text-align:left}
  .notes li{max-width:none}
  .rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guides>div{grid-template-columns:1fr;gap:6px}
  .also{grid-template-columns:1fr 1fr;row-gap:4px}
  .also li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:920px){
  .hdr{grid-template-columns:auto 1fr;padding:12px 14px}
  .wordmark{justify-self:start;order:-1;font-size:22px;padding-left:8px}
  .nav{position:absolute;top:62px;right:14px;flex-direction:column;align-items:stretch;padding:8px;border-radius:var(--r-m);min-width:190px;display:none;background:rgba(255,255,255,.9)}
  .hdr.open .nav{display:flex}
  .hdr.dark .nav{background:rgba(22,29,42,.94)}
  .nav a{padding:12px 14px}
  .menu{display:grid}
  .hdr-end .btn{display:none}
  .hero{padding-top:118px}
  .lede,.head p{font-size:16.5px}
  .demo{margin-top:44px}
  .tb{grid-template-columns:1fr auto;height:auto;padding:9px 10px;row-gap:8px}
  .tb-c,.lights,.tb-btn.still{display:none}
  .tb-r{display:contents}
  #win-theme{grid-row:1;grid-column:2}
  .seg{grid-row:2;grid-column:1/-1;overflow:auto;scrollbar-width:none}
  .seg button{flex:1;padding:6px 8px}
  .win-body{height:440px}
  .win.no-foot .win-body{height:534px}
  .tui{grid-template-columns:1fr;padding:10px 10px 2px}
  .tui-side{display:none}
  .wel.in-win{top:-90px}
  .rv{padding:18px 14px 14px;gap:12px}
  .rv-head h3{font-size:22px}
  .rv-head .btn{display:none}
  .rv-split{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .rv-list{display:flex;gap:6px;padding:6px;border-right:0;border-bottom:1px solid var(--w-line);overflow:auto}
  .rv-list li{flex:1 0 150px}
  .rv-detail{padding:18px 16px;gap:16px}
  .rv-detail h4{font-size:20px}
  .fv-list li{flex-wrap:wrap}
  .steps{grid-template-columns:repeat(2,1fr)}
  .sec{padding-top:124px}
  .sec::after{top:26px;height:70px}
  .proofs{grid-template-columns:1fr;border-top:0}
  .proofs li,.proofs li+li{padding:22px 0 0;margin-top:22px;border-left:0;border-top:1px solid var(--line)}
  .night-graph{padding:18px 16px}
  .night-top span:last-child,.night-foot span:last-child{display:none}
  .night-stage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
  .night-lines,.line-label,.core{display:none}
  .node{position:static;width:auto}
  .finding{padding:22px 20px 0;min-height:0}
  .prompt-box{flex-direction:column;align-items:stretch;padding:16px}
  .term{margin-top:28px}
  .fc-foot{padding-left:20px;flex-wrap:wrap}
  .tw{height:460px}
  .wel-in strong{font-size:21px}
  .path{grid-template-columns:1fr 1fr;gap:34px 0}
  .path::before{display:none}
  .closing{padding:110px 20px 210px}
  .mark-slot{width:170px;height:170px}
  .foot{padding-top:54px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px;margin-top:48px}
  .foot-about{grid-column:1/-1}
  .foot-base{flex-direction:column}
  .art-plugins .art-core.low{top:118px}
  .art-plugins .feeds{height:32px}
}
@media (max-width:560px){
  .lang span{display:none}
  .lang{padding:0 11px}
  .night-stage{grid-template-columns:1fr}
  .notes,.notes.left{grid-template-columns:1fr}
  .rack{grid-template-columns:1fr}
  .fc-two{grid-template-columns:1fr}
  .fc-tag{display:none}
  .also{grid-template-columns:1fr}
  .also li,.also li+li{padding:14px 0;border-left:0;border-bottom:1px solid var(--line)}
  .path{grid-template-columns:1fr}
  .ans p{padding-right:20px}
  .wl-row{flex-direction:column;align-items:stretch}
  .wl-box{padding:14px}
}