:root{
  color-scheme:dark;
  --bg:#050607;
  --panel:#101416;
  --panel-2:#151a1d;
  --line:#273036;
  --line-bright:#39464d;
  --text:#f6f8f7;
  --muted:#929ca2;
  --lime:#caff68;
  --cyan:#45e9ff;
  --header-h:72px;
  --rail-w:232px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 86% 5%,rgba(69,233,255,.09),transparent 24rem),
    radial-gradient(circle at 26% 0%,rgba(202,255,104,.055),transparent 26rem),
    var(--bg);
  color:var(--text);
  font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:var(--header-h) auto 0 var(--rail-w);
  width:1px;
  background:linear-gradient(180deg,rgba(69,233,255,.45),transparent 22rem);
  pointer-events:none;
  z-index:20;
}
header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  height:var(--header-h);
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(5,6,7,.86);
  backdrop-filter:blur(18px);
}
.logo{color:var(--text);font-size:23px;font-weight:900;letter-spacing:-1.1px;text-decoration:none}
.logo span{margin-left:10px;color:#7f898f;font-size:11px;font-weight:700;letter-spacing:1.7px}
header>.badge{position:relative;padding:8px 12px 8px 26px;border:1px solid var(--line);border-radius:999px;background:#0d1113;color:#cbd2d5;font-size:11px;font-weight:750;letter-spacing:1.15px}
header>.badge::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 13px rgba(202,255,104,.75);transform:translateY(-50%)}
main{max-width:1580px;margin:0 0 0 var(--rail-w);padding:calc(var(--header-h) + 30px) 36px 72px}
.mode-nav{
  position:fixed;
  z-index:40;
  inset:var(--header-h) auto 0 0;
  width:var(--rail-w);
  margin:0;
  padding:30px 18px;
  display:flex;
  flex-direction:column;
  gap:7px;
  border:0;
  border-right:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,#090b0c,#070809);
}
.mode-nav::before{content:"WORKFLOW";padding:0 12px 10px;color:#626d73;font-size:11px;font-weight:800;letter-spacing:1.8px}
.mode-nav::after{content:"Create in order or jump straight to the tool you need.";margin-top:auto;padding:18px 12px 0;border-top:1px solid var(--line);color:#687278;font-size:12px;line-height:1.55}
.mode-nav a{
  position:relative;
  min-height:46px;
  padding:12px 12px 12px 46px;
  display:flex;
  align-items:center;
  border:1px solid transparent;
  border-radius:11px;
  color:#8e989d;
  font-size:14px;
  font-weight:650;
  text-decoration:none;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.mode-nav a::before{position:absolute;left:13px;width:24px;height:24px;display:grid;place-items:center;border:1px solid #30383d;border-radius:7px;color:#758087;font-size:12px}
.mode-nav a[href="./"]::before{content:"◆"}.mode-nav a[href="clay.html"]::before{content:"●"}.mode-nav a[href="scene.html"]::before{content:"▦"}.mode-nav a[href="video.html"]::before{content:"▶";font-size:10px}.mode-nav a[href="learn.html"]::before{content:"✦";color:var(--lime)}.mode-nav a[href="ugc-guide.html"]::before{content:"AD";color:#ff755f;font-size:9px;font-weight:900}
.mode-nav a:hover{border-color:#2c363b;background:#111518;color:#f1f4f3;outline:0;transform:translateX(2px)}
.mode-nav a[aria-current]{border-color:#344148;background:linear-gradient(100deg,rgba(202,255,104,.13),rgba(69,233,255,.07));color:#fff;box-shadow:inset 3px 0 0 var(--lime)}
.mode-nav a[aria-current]::before{border-color:rgba(202,255,104,.5);background:rgba(202,255,104,.12);color:var(--lime);box-shadow:0 0 18px rgba(202,255,104,.08)}
.heading{
  position:relative;
  isolation:isolate;
  min-height:186px;
  margin:0 0 20px;
  padding:32px 34px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border:1px solid #263036;
  border-radius:24px;
  background:
    linear-gradient(115deg,rgba(20,26,29,.97) 5%,rgba(12,16,18,.94) 55%,rgba(8,15,17,.9)),
    #111517;
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
}
.hero-actions{min-width:520px;display:grid;gap:10px}
.hero-guides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-actions .secondary{width:100%}
.learning-cta{position:relative;min-height:84px;padding:15px 52px 14px 17px;display:grid;align-content:center;overflow:hidden;border:1px solid rgba(202,255,104,.62);border-radius:13px;background:linear-gradient(120deg,rgba(202,255,104,.18),rgba(69,233,255,.09));color:#f7fff0;text-decoration:none;box-shadow:0 0 0 0 rgba(202,255,104,.35);animation:learning-pulse 1.15s ease-out 1.4s 3}
.learning-cta::after{content:"";position:absolute;inset:-60% auto -60% -35%;width:32%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-18deg);animation:learning-sheen 2.8s ease-in-out 1.15s 2}
.learning-cta span{color:var(--lime);font-size:10px;font-weight:850;letter-spacing:1.6px}
.learning-cta strong{font-size:19px;line-height:1.25;letter-spacing:-.25px}
.learning-cta small{color:#aeb9b1;font-size:12px}
.learning-cta b{position:absolute;right:17px;top:50%;display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--lime);color:#18200c;font-size:15px;transform:translateY(-50%);transition:transform .18s ease}
.learning-cta:hover{border-color:var(--lime);background:linear-gradient(120deg,rgba(202,255,104,.25),rgba(69,233,255,.13))}
.ugc-cta{border-color:rgba(255,117,95,.62);background:linear-gradient(120deg,rgba(255,93,69,.18),rgba(255,173,75,.08));animation-name:ugc-pulse}
.ugc-cta::after{animation-delay:1.55s}.ugc-cta span{color:#ff806b}.ugc-cta b{background:#ff705a;color:#1a0906}.ugc-cta:hover{border-color:#ff806b;background:linear-gradient(120deg,rgba(255,93,69,.26),rgba(255,173,75,.13))}
.learning-cta:hover b{transform:translate(3px,-50%)}
.learning-cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
@keyframes learning-pulse{0%{box-shadow:0 0 0 0 rgba(202,255,104,.4)}70%{box-shadow:0 0 0 13px rgba(202,255,104,0)}100%{box-shadow:0 0 0 0 rgba(202,255,104,0)}}
@keyframes ugc-pulse{0%{box-shadow:0 0 0 0 rgba(255,112,90,.38)}70%{box-shadow:0 0 0 13px rgba(255,112,90,0)}100%{box-shadow:0 0 0 0 rgba(255,112,90,0)}}
@keyframes learning-sheen{0%,28%{left:-35%}68%,100%{left:135%}}
@media(prefers-reduced-motion:reduce){.learning-cta,.learning-cta::after{animation:none}.learning-cta:hover b{transform:translateY(-50%)}}
.heading::before{content:"";position:absolute;z-index:-1;right:-80px;top:-155px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(69,233,255,.2),rgba(69,233,255,.04) 38%,transparent 68%);filter:blur(3px)}
.heading::after{content:"";position:absolute;z-index:-1;right:200px;bottom:-100px;width:310px;height:170px;background:radial-gradient(ellipse,rgba(202,255,104,.15),transparent 68%);transform:rotate(-12deg)}
.eyebrow{margin:0 0 10px;color:var(--lime);font-size:11px;font-weight:800;letter-spacing:2.1px}
h1{margin:0;color:#fff;font-size:clamp(2.65rem,4vw,4rem);font-weight:760;letter-spacing:-.055em;line-height:.98}
.heading p:last-child{max-width:680px;margin:15px 0 0;color:#a3adb2;font-size:16px}
.heading>.secondary{flex:0 0 auto}
.workflow-strip{margin:0 0 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.workflow-step{position:relative;min-height:78px;padding:14px 15px 14px 48px;border:1px solid var(--line);border-radius:14px;background:rgba(14,18,20,.78);color:#9aa4aa;text-decoration:none;transition:.18s ease}
.workflow-step:hover{border-color:var(--line-bright);background:#121719;transform:translateY(-2px)}
.workflow-step strong{display:block;color:#eef2f1;font-size:13px}.workflow-step small{display:block;margin-top:3px;font-size:12px;line-height:1.35}
.workflow-step b{position:absolute;left:14px;top:14px;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:#20272b;color:var(--lime);font-size:11px}
.workflow-step.current{border-color:rgba(202,255,104,.34);background:linear-gradient(110deg,rgba(202,255,104,.1),rgba(69,233,255,.04))}
.workspace{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:24px;align-items:start}
section,aside{padding:25px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(20,25,28,.98),rgba(13,17,19,.98));box-shadow:0 18px 45px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)}
section{margin-bottom:14px}aside{position:sticky;top:calc(var(--header-h) + 24px)}
h2{margin:0 0 20px;color:#f4f7f6;font-size:20px;font-weight:720;letter-spacing:-.025em}
h2 span{margin-right:12px;padding:5px 8px;display:inline-block;border:1px solid #3b4a40;border-radius:7px;background:#141c17;color:var(--lime);font-size:11px;vertical-align:middle}
label{margin-top:18px;color:#dfe4e2;font-size:14px;font-weight:650}
.hint,.note,.section-intro{color:var(--muted)}
.hint{font-size:12px;font-weight:400}.note{font-size:13px;line-height:1.6}.section-intro{margin:-9px 0 18px;font-size:14px}
.row{gap:14px}
input,select,textarea{margin-top:7px;padding:12px 13px;border:1px solid #343e43;border-radius:10px;background:#090c0e;color:#eef2f1;font:inherit;font-size:15px;font-weight:400;line-height:1.5;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
textarea{resize:vertical}input:hover,select:hover,textarea:hover{border-color:#46535a;background:#0b0f11}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(69,233,255,.11)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--lime)}
.primary,.secondary{min-height:44px;padding:12px 17px;border-radius:10px;font:750 14px/1 inherit;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.primary{border:0;background:linear-gradient(100deg,var(--lime),var(--cyan));color:#07100e;box-shadow:0 8px 26px rgba(69,233,255,.11)}
.secondary{border:1px solid #3a454b;background:rgba(11,14,16,.72);color:#e8eceb}
button:hover,.primary:hover,.secondary:hover{filter:brightness(1.08);transform:translateY(-1px)}
button:focus-visible,.primary:focus-visible,.secondary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.build{padding:18px 20px;border-radius:13px;font-size:15px}
.output-head{gap:16px}.output-head h2{font-size:28px}.badge{border-color:#354147;border-radius:999px;background:#0b0e10;color:var(--cyan)}
#output,#scene-output,.filmmaker-output,.clay-output{min-height:520px;border:1px solid #283238;background:#080b0c;color:#dbe4e1;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tip,.division,.continuity-lock{border-color:#2c363b;background:rgba(8,11,12,.5);border-radius:12px}
.tip{padding:18px;margin-top:22px}.tip p{color:var(--muted)}
.continuity-lock,.division{padding:15px 16px;color:#aab4b0}
.pill-list span{border-color:#334048;background:#0a0e10;color:#aeb8bc}
.deliverables,.clay-menu{gap:10px}
.check-card,.clay-choice,.reference-card,.asset-row{border-color:#313b40!important;border-radius:13px!important;background:#0c1012!important;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.check-card:hover,.clay-choice:hover,.reference-card:hover,.asset-row:hover{border-color:#455158!important;background:#0f1416!important;transform:translateY(-1px)}
.check-card:has(input:checked),.clay-choice:has(input:checked){border-color:rgba(202,255,104,.46)!important;background:rgba(202,255,104,.055)!important}
.actions{gap:10px}.actions .primary{flex:1}
footer{margin-left:var(--rail-w);padding:24px 36px;border-top:1px solid rgba(255,255,255,.07);color:#667177;font-size:11px;letter-spacing:1.1px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#080a0b}::-webkit-scrollbar-thumb{border:3px solid #080a0b;border-radius:10px;background:#354047}::-webkit-scrollbar-thumb:hover{background:#4a585f}
@media(max-width:1050px){
  .workspace{grid-template-columns:1fr}aside{position:static}.workflow-strip{grid-template-columns:repeat(2,1fr)}.heading{flex-wrap:wrap}.hero-actions{width:100%;min-width:0}
}
@media(max-width:820px){
  :root{--header-h:68px}body::before{display:none}header{padding:0 18px}.logo span{font-size:10px;margin-left:6px}
  main{margin-left:0;padding:calc(var(--header-h) + 92px) 18px 54px}
  .mode-nav{inset:var(--header-h) 0 auto 0;width:auto;height:68px;padding:10px 18px;overflow-x:auto;flex-direction:row;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,9,10,.96)}
  .mode-nav::before,.mode-nav::after{display:none}.mode-nav a{min-width:max-content;min-height:46px;padding:11px 14px 11px 42px}.mode-nav a::before{left:10px}
  .mode-nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--lime)}
  .heading{min-height:170px;padding:27px}.heading::before{right:-180px}.heading p:last-child{font-size:15px}
  footer{margin-left:0;padding:22px 18px}
}
@media(max-width:580px){
  header>.badge{display:none}.logo{font-size:21px}.logo span{letter-spacing:1px}
  main{padding-left:13px;padding-right:13px}.heading{display:block;min-height:0;padding:24px 20px;border-radius:18px}.hero-actions{width:100%;min-width:0;margin-top:22px}.hero-guides{grid-template-columns:1fr}.heading button{margin-top:0}
  h1{font-size:2.55rem}.workflow-strip{grid-template-columns:1fr 1fr;gap:8px}.workflow-step{min-height:76px;padding:13px 10px 13px 42px}.workflow-step b{left:10px}
  section,aside{padding:20px;border-radius:15px}.row{grid-template-columns:1fr;gap:0}.actions{flex-wrap:wrap}footer span{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}