@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/unbounded-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/unbounded-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/unbounded-latin-800-normal.woff2) format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/figtree-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/figtree-latin-600-normal.woff2) format('woff2');}
/* Owl site. Palette from the Night mood: forest ink, lane cream, owl amber, aurora pink, moss. */
:root{
  --ink:#15242a; --ink-2:#1d3137; --ink-3:#27414a;
  --cream:#ece3cf; --fog:#9fb2ae;
  --amber:#f2b13b; --pink:#e58bb0; --moss:#8dbb8f; --teal:#4fc3c9;
  --display:'Unbounded', ui-rounded, system-ui, sans-serif;
  --body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:14px; --gap:clamp(16px, 3vw, 32px);
}
*{ box-sizing:border-box; }
html{ background:var(--ink); color:var(--cream); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
body{ margin:0; min-height:100vh; }
a{ color:inherit; }
img, canvas{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:16px; top:16px; background:var(--amber); color:var(--ink); padding:8px 12px; z-index:9; }

/* top bar */
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px var(--gap); }
.mark{ display:flex; align-items:center; gap:10px; font:700 18px/1 var(--display); text-decoration:none; letter-spacing:.01em; }
.mark svg{ width:30px; height:30px; }
.bar nav{ display:flex; gap:6px; }
.bar nav a{ text-decoration:none; padding:8px 14px; border-radius:999px; font-weight:600; font-size:15px; color:var(--fog); }
.bar nav a:hover{ color:var(--cream); background:var(--ink-2); }
.bar nav a[aria-current="page"]{ color:var(--ink); background:var(--cream); }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px; border:1.5px solid var(--cream);
  background:transparent; color:var(--cream); font:600 15px/1 var(--body); text-decoration:none; cursor:pointer; transition:background .15s, color .15s; }
.btn:hover{ background:var(--cream); color:var(--ink); }
.btn.solid{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.btn.solid:hover{ background:var(--cream); border-color:var(--cream); }
.btn:disabled{ opacity:.45; cursor:progress; }

/* ---------- home ---------- */
.hero{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:var(--gap); align-items:center; padding:clamp(12px, 3vw, 40px) var(--gap) clamp(40px, 7vw, 96px); max-width:1320px; margin:0 auto; }
.hero h1{ font:800 clamp(88px, 15vw, 210px)/.82 var(--display); letter-spacing:-.04em; margin:0 0 28px; }
.hero h1 span{ display:block; }
.hero .lede{ font-size:clamp(18px, 1.6vw, 21px); max-width:30ch; margin:0 0 30px; color:var(--cream); }
.hero .actions{ display:flex; flex-wrap:wrap; gap:12px; }
.stage{ position:relative; justify-self:end; width:min(100%, 560px); margin:0; }
.stage canvas{ width:100%; aspect-ratio:1/1.2; border-radius:var(--r); background:var(--ink-2); }
.stage figcaption{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-size:14px; color:var(--fog); }
.stage figcaption a{ color:var(--cream); }

.lanes{ display:block; width:100%; height:60px; }
.lanes path{ vector-effect:non-scaling-stroke; }

.section{ max-width:1320px; margin:0 auto; padding:clamp(48px, 8vw, 104px) var(--gap); }
.section h2{ font:700 clamp(30px, 4vw, 52px)/1.05 var(--display); letter-spacing:-.02em; margin:0 0 18px; max-width:18ch; }
.section > p{ max-width:62ch; color:var(--fog); margin:0 0 40px; }

.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; counter-reset:step; }
.steps li{ counter-increment:step; }
.steps canvas{ width:100%; aspect-ratio:1/1.2; border-radius:10px; background:var(--ink-2); }
.steps h3{ font:600 16px/1.3 var(--body); margin:12px 0 4px; }
.steps h3::before{ content:counter(step) ". "; color:var(--amber); }
.steps p{ margin:0; font-size:15px; color:var(--fog); }

.facts{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--gap); margin:0 0 48px; }
.facts div{ border-top:2px solid var(--ink-3); padding-top:14px; }
.facts dt{ font:700 clamp(30px, 3.4vw, 44px)/1 var(--display); color:var(--cream); }
.facts dd{ margin:8px 0 0; color:var(--fog); font-size:15px; }

.grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.grid a{ display:block; text-decoration:none; border-radius:10px; overflow:hidden; position:relative; }
.grid canvas{ width:100%; aspect-ratio:1/1.2; background:var(--ink-2); transition:transform .3s ease; }
.grid a:hover canvas{ transform:scale(1.03); }
.grid span{ position:absolute; left:10px; bottom:10px; padding:4px 10px; border-radius:999px; background:rgba(21,36,42,.82); font-size:13px; font-weight:600; }

.credits{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:var(--gap); align-items:start; }
.credits p{ max-width:56ch; color:var(--fog); margin:0 0 14px; }
.swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.swatches i{ width:30px; height:30px; border-radius:50%; display:block; }

.foot{ max-width:1320px; margin:0 auto; padding:32px var(--gap) 48px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:var(--fog); font-size:15px; border-top:1px solid var(--ink-3); }

@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
  .stage{ justify-self:stretch; width:100%; }
  .steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .facts, .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .credits{ grid-template-columns:1fr; }
}
@media (max-width: 520px){ .steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* ---------- studio ---------- */
body.studio{ --bg:var(--ink); background:var(--bg); transition:background .5s ease; }
.studio .bar{ padding-bottom:6px; }
.desk{ display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:var(--gap); padding:12px var(--gap) 40px; max-width:1500px; margin:0 auto; align-items:start; }
.view{ position:relative; display:flex; justify-content:center; }
.view canvas{ width:auto; height:min(calc(100vh - 120px), 1100px); max-width:100%; aspect-ratio:1/1.2; border-radius:var(--r); box-shadow:0 0 0 1px rgba(236,227,207,.08); }
.busy{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-weight:600; }
.busy.on{ display:flex; }
.panel{ background:rgba(21,36,42,.88); border:1px solid rgba(236,227,207,.1); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:22px; position:sticky; top:16px; backdrop-filter:blur(6px); }
.panel h2{ font:700 22px/1.1 var(--display); margin:0; }
.panel h3{ font:600 15px/1.2 var(--body); margin:0 0 10px; color:var(--fog); }
.seed{ display:grid; grid-template-columns:44px 1fr 44px; gap:8px; }
.seed input{ min-height:44px; width:100%; border-radius:999px; border:1.5px solid rgba(236,227,207,.3); background:transparent; color:var(--cream); font:700 18px var(--display); text-align:center; }
.seed button{ min-height:44px; border-radius:50%; border:1.5px solid rgba(236,227,207,.3); background:transparent; color:var(--cream); font-size:18px; cursor:pointer; }
.seed button:hover{ background:var(--cream); color:var(--ink); }
.row{ display:flex; flex-wrap:wrap; gap:8px; }
.row .btn{ flex:1 1 auto; padding:0 14px; }
.hashline{ font-size:12px; color:var(--fog); word-break:break-all; margin:8px 0 0; }
.scrub{ display:flex; align-items:center; gap:12px; }
.scrub input[type=range]{ flex:1; accent-color:var(--amber); min-height:44px; }
.scrub output{ font-variant-numeric:tabular-nums; font-size:14px; color:var(--fog); width:46px; text-align:right; }
.progress{ height:6px; border-radius:6px; background:rgba(236,227,207,.12); overflow:hidden; display:none; }
.progress.on{ display:block; }
.progress i{ display:block; height:100%; width:0; background:var(--amber); transition:width .1s linear; }
.note{ font-size:13px; color:var(--fog); margin:6px 0 0; min-height:1em; }
.traits{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:14px; max-height:340px; overflow:auto; padding-right:4px; }
.traits dt{ color:var(--fog); }
.traits dd{ margin:0; font-weight:600; }
.palette{ display:flex; gap:6px; margin-top:12px; }
.palette i{ flex:1; height:12px; border-radius:6px; }
@media (max-width: 980px){
  .desk{ grid-template-columns:1fr; }
  .view canvas{ height:auto; width:100%; }
  .panel{ position:static; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }