/* Signature homepage + green theme, layered on top of site.css */
:root{--disp:"Unbounded",var(--font);--ink:#04070c}
.home{background:var(--ink)}
.home .hdr{background:color-mix(in srgb,var(--ink) 70%,transparent)}

/* ---------------- hero: the particle field from the main site + editorial type ---------------- */
.sig{position:relative;height:calc(100svh - 92px);min-height:660px;overflow:hidden;overflow:clip;background:var(--ink);isolation:isolate}
.sig .field{z-index:0}
.sig .hero-glow{z-index:0}
.sig::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--ink) 0,transparent 18%,transparent 70%,var(--ink) 100%)}
.sig-meta{position:absolute;z-index:2;top:28px;left:0;right:0;max-width:var(--wrap);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:24px;font-size:.7rem;line-height:1.5;color:var(--text);pointer-events:none}
.sig-meta p{margin:0}
.sig-meta span{display:block;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-size:.62rem;margin-bottom:4px}
.sig-meta b{font-weight:400;color:var(--muted);margin-left:6px}
.sig-meta i{font-style:normal;color:var(--faint);margin:0 8px}
.sig-lead{position:absolute;z-index:2;left:0;right:0;bottom:clamp(40px,7vh,72px);max-width:var(--wrap);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,600px) 1fr;align-items:end;column-gap:24px;pointer-events:none}
.sig-name{grid-column:1/-1;margin:0 0 28px;font-family:var(--disp);font-weight:500;font-size:clamp(2.6rem,6.2vw,5.6rem);line-height:.95;letter-spacing:-.045em;color:var(--text);white-space:nowrap}
.sig-name span{display:inline-block;opacity:0;transform:translateY(30%);animation:rise 1.2s var(--ease) forwards}
.sig-name span+span{animation-delay:.1s;color:var(--accent)}
@keyframes rise{to{opacity:1;transform:none}}
.sig-line{grid-column:1;margin:0 0 10px;font-size:1.02rem;line-height:1.45;color:var(--text)}
.sig-line em{font-style:normal;color:var(--muted)}
.sig-sub{grid-column:1;margin:0;color:var(--muted);font-size:.9rem;line-height:1.65;max-width:60ch}
.sig-btn{grid-column:2;grid-row:2/4;justify-self:end;pointer-events:auto;display:inline-flex;align-items:center;gap:12px;font-size:.74rem;color:var(--text);padding:11px 16px 11px 18px;border:1px solid var(--line-3);border-radius:999px;background:color-mix(in srgb,var(--ink) 60%,transparent);backdrop-filter:blur(8px);transition:color .3s,border-color .3s}
.sig-btn span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--text);color:var(--ink);font-size:.8rem;transition:transform .4s var(--ease),background .3s}
.sig-btn:hover{border-color:var(--accent);color:var(--accent)}
.sig-btn:hover span{transform:translateY(3px);background:var(--accent)}
.sig-meta,.sig-line,.sig-sub,.sig-btn{opacity:0;animation:fadein 1.1s .5s var(--ease) forwards}
@keyframes fadein{to{opacity:1}}
@media (max-width:860px){
  .sig{height:auto;min-height:calc(100svh - 64px)}
  .sig-meta{grid-template-columns:1fr 1fr}.sig-meta p:last-child{grid-column:1/-1}
  .sig-lead{grid-template-columns:1fr}.sig-name{white-space:normal}.sig-btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:18px}
}

/* ---------------- fly through the work ---------------- */
.fly{position:relative;height:100vh;min-height:640px;background:transparent;margin-top:-1px}
.fly-stage{position:relative;height:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%);overflow:hidden;overflow:clip}
.fly-space{position:absolute;left:50%;top:47%;width:0;height:0}
.fly-card{position:absolute;left:0;top:0;width:350px;margin:-98px 0 0 -175px;border-radius:6px;overflow:hidden;background:#0b1422;box-shadow:0 20px 50px -20px rgba(0,0,0,.9);visibility:hidden;outline:1px solid rgba(255,255,255,.06);transition:outline-color .25s}
.fly-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.82);transition:filter .45s var(--ease)}
.fly-card:hover img{filter:none}
.fly-card.cur{outline:1px solid rgba(255,255,255,.35)}
.fly-card:hover{outline:1px solid var(--accent)}
.fly-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center;pointer-events:none;transition:opacity .8s}
.fly-intro p{margin:0 0 16px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.fly-intro h2{margin:0;max-width:100%;font-family:var(--disp);font-weight:400;font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:1.08;letter-spacing:-.04em}
.fly-intro em{font-style:normal;color:var(--muted)}
.fly-hud{position:absolute;left:0;right:0;bottom:26px;max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:end;gap:24px;pointer-events:none}
.fly-now{margin:0;display:flex;align-items:end;gap:16px;min-height:3.2em}
.fly-n{font-family:var(--disp);font-weight:300;font-size:clamp(2rem,3.4vw,3rem);line-height:.9;letter-spacing:-.04em;color:var(--text)}
.fly-t{display:flex;flex-direction:column;gap:5px;max-width:46ch}
.fly-t b{font-family:var(--disp);font-weight:400;font-size:clamp(.95rem,1.3vw,1.15rem);line-height:1.2;letter-spacing:-.02em}
.fly-t small{font-size:.64rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.fly-count{margin:0;font-size:.68rem;color:var(--muted);display:flex;align-items:center;gap:14px;pointer-events:auto}
.fly-count a{padding:7px 12px;border:1px solid var(--line-3);border-radius:999px;color:var(--text);transition:border-color .2s,color .2s}
.fly-count a:hover{border-color:var(--accent);color:var(--accent)}
.fly-skip{position:absolute;z-index:3;top:84px;right:24px;display:inline-flex;align-items:center;gap:10px;font-size:.7rem;color:var(--text);padding:8px 14px;border:1px solid var(--line-3);border-radius:999px;background:color-mix(in srgb,var(--ink) 70%,transparent);backdrop-filter:blur(8px);cursor:pointer;transition:border-color .2s,color .2s}
.fly-skip:hover{border-color:var(--accent);color:var(--accent)}
.fly-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.fly-bar i{display:block;height:100%;width:0;background:var(--accent)}
.fly-hud,.fly-bar{opacity:0;transition:opacity .4s}
.fly.on .fly-hud,.fly.on .fly-bar{opacity:1}
@media (max-width:700px){.fly-card{width:185px;margin:-52px 0 0 -92px}.fly-count{flex-direction:column;align-items:end;gap:8px}.fly{height:90vh}.fly-skip{top:72px;right:16px}}

/* ---------------- sections below use the same display font ---------------- */
.home .sh-row h2,.home .contact h2{font-family:var(--disp);font-weight:400;letter-spacing:-.045em;font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.08}
.home .sec.band{background:transparent}

/* robot + rocket drawn over the particle field */
.rig{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.fly-hud,.fly-bar{opacity:1}
.fly-speed{font-size:.64rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.sig{cursor:crosshair}
.sig-hint{grid-column:1;margin:14px 0 0;font-size:.64rem;letter-spacing:.04em;color:var(--faint)}
.sig-meta,.sig-hint{pointer-events:none}

/* ---------------- moving dot field behind everything after the hero ---------------- */
.home main{position:relative;z-index:1}
.dots{position:absolute;left:0;top:0;width:100%;height:100vh;z-index:-1;pointer-events:none;will-change:transform}
.home .sig{z-index:1}
.fly::before{content:"";position:absolute;left:0;right:0;top:0;height:80px;background:linear-gradient(180deg,var(--ink),transparent);pointer-events:none}
.home .reel{background:transparent}
.home .ftr{background:linear-gradient(180deg,transparent,var(--ink) 120px);border-top:0}

/* ---------------- second theme: green on black (replaces the white light theme) ---------------- */
:root[data-theme="light"]{
  --bg:#040805; --bg-1:#070d09; --panel:#0a120d; --panel-2:#0e1812; --ink:#030604;
  --line:rgba(214,245,226,.09); --line-2:rgba(214,245,226,.15); --line-3:rgba(214,245,226,.26);
  --text:#eef8f1; --text-2:#c8dfd0; --muted:#a2bcab; --faint:#698a75;
  --accent:#3dff8b; --accent-2:#22d872; --accent-soft:rgba(61,255,139,.12); --accent-ink:#03140a;
  --ok:#3dff8b; --warn:#ffd24a; --blue:#9dffc6; --amber:#ffd24a; --violet:#c9a7ff;
  --grad-acc:linear-gradient(90deg,#3dff8b,#9dffc6); color-scheme:dark;
}
:root[data-theme="light"] body{background:var(--bg)}
.ib .i-swap circle{transition:transform .35s var(--ease)}
:root[data-theme="light"] .ib .i-swap circle:first-child{transform:translateX(6px)}
:root[data-theme="light"] .ib .i-swap circle:last-child{transform:translateX(-6px)}
:root[data-theme="light"] .ib .i-swap circle:last-child{fill-opacity:1}
.fly-bar{display:none}
.fly-stage{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%)}
.fly-hud{z-index:2}

/* ---------------- small-screen safety: long words, inline code and buttons never push the page sideways ---------------- */
.prose{overflow-wrap:anywhere}
.prose :not(pre)>code{overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.prose h1,.prose h2,.prose h3,.prose h4{overflow-wrap:anywhere}
.prose .btns{flex-wrap:wrap;max-width:100%}
.prose a.btn{white-space:normal;max-width:100%;height:auto;text-align:left}
.prose pre,.prose table{max-width:100%}
.prose table{display:block;overflow-x:auto}
@media (max-width:700px){.fly-intro h2{font-size:1.5rem}.fly-intro p{font-size:.64rem}}
@media (max-width:700px){.sig{min-height:max(calc(100svh - 64px),880px)}}

/* our own video player (videos served from the media server) */
.embed.video{aspect-ratio:auto}
.embed.video video{display:block;width:100%;height:auto;max-height:80vh;background:#000}

/* a visualizer coloured on its own inside a normal section */
.widget.viz-own{border-radius:var(--r-sm);overflow:hidden}
.reader.wide .widget.viz-own{border-radius:var(--r)}
.widget.viz-own iframe{border-color:rgba(255,255,255,.08)}
.ftr-bot a{color:inherit;transition:color .2s}
.ftr-bot a:hover{color:var(--accent)}
.prose.legal{max-width:760px}
.prose.legal h2{margin-top:1.6em}

/* ---------------- boot screen (homepage, once per visit) ---------------- */
.boot{display:none}
html.booting{overflow:hidden}
html.booting .boot{display:flex;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:16px;background:#04070c;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.boot.boot-done{opacity:0;transform:scale(1.02);pointer-events:none}
.boot-term{width:min(640px,100%);border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#070d16;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);font-size:.78rem;line-height:1.75;color:#9fb0c4;overflow:hidden}
.boot-bar{margin:0;display:flex;justify-content:space-between;padding:9px 16px;border-bottom:1px solid rgba(255,255,255,.07);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#5f7186}
.boot-out{padding:16px 18px 6px;min-height:15.5em}
.boot-out p{margin:0;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;white-space:pre-wrap;overflow-wrap:anywhere}
.boot-out p.on{opacity:1;transform:none}
.boot-out b{font-weight:500;color:var(--accent)}
.boot-out .dim{color:#5f7186}
.boot-caret{display:inline-block;width:.55em;height:1.05em;margin-left:4px;vertical-align:-.18em;background:var(--accent);animation:bootc 1s steps(1) infinite}
@keyframes bootc{50%{opacity:0}}
.boot-prog{margin:0;display:flex;align-items:center;gap:12px;padding:12px 18px 16px;color:#5f7186;font-size:.7rem}
.boot-track{flex:1;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.boot-track i{display:block;height:100%;width:0;background:var(--accent)}
#boot-pct{min-width:3.2em;text-align:right}
@media (max-width:700px){.boot-term{font-size:.68rem}.boot-out{min-height:20em}}