/* ==========================================================
   Lumora — loading page patterns
   ========================================================== */
:root{
  --ink:#0a0f24; --muted:#5f6478; --line:#e8e6f7; --soft:#f3f2ff;
  --bg:#fbfbff; --card:#fff; --ok:#22c55e;
  --accent:#2b2bff; --accent2:#22c55e;
  --r-card:36px; --r-tile:22px;
  --shadow:0 50px 90px -40px rgba(70,60,200,.25), 0 8px 30px -12px rgba(70,60,200,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:'Outfit',system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---------- moving background ---------- */
.bg-grid{position:fixed;inset:-80px;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(90,80,200,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(90,80,200,.055) 1px,transparent 1px);
  background-size:68px 68px;animation:gridMove 18s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%)}
@keyframes gridMove{to{transform:translate(68px,68px)}}
.blob{position:fixed;border-radius:50%;filter:blur(70px);opacity:.35;z-index:0;pointer-events:none}
.b1{width:420px;height:420px;background:var(--accent);opacity:.12;top:-120px;left:-100px;animation:float1 16s ease-in-out infinite}
.b2{width:360px;height:360px;background:var(--accent2);opacity:.14;bottom:-120px;right:-80px;animation:float2 19s ease-in-out infinite}
.b3{width:260px;height:260px;background:#c4b5fd;opacity:.18;top:40%;left:60%;animation:float1 23s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translate(90px,60px) scale(1.15)}}
@keyframes float2{50%{transform:translate(-80px,-70px) scale(1.1)}}

.stage{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:48px 16px 80px}
.embed .stage{padding:24px 16px}

/* ---------- card ---------- */
.card{position:relative;width:min(940px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(24px,4.5vw,56px);box-shadow:var(--shadow);animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.card.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.card.narrow{width:min(620px,100%)}
@keyframes rise{from{opacity:0;transform:translateY(28px) scale(.98)}}
.card > *{animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) both}
.card > *:nth-child(2){animation-delay:.08s}.card > *:nth-child(3){animation-delay:.16s}
.card > *:nth-child(4){animation-delay:.24s}.card > *:nth-child(5){animation-delay:.32s}
.card > *:nth-child(6){animation-delay:.4s}.card > *:nth-child(7){animation-delay:.48s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}

.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 20px;border-radius:999px;font-weight:700;font-size:clamp(15px,1.6vw,19px);
  color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff);border:1.5px solid color-mix(in srgb,var(--accent) 22%,#fff)}
.pill-plain{color:var(--ink);background:#fff;border-color:var(--line);box-shadow:0 6px 18px -8px rgba(60,50,180,.25)}
.chip-mark{width:12px;height:20px;border-radius:5px;background:linear-gradient(var(--accent),#2a1a9a);display:inline-block}

h1{font-weight:800;font-size:clamp(34px,6.4vw,78px);line-height:1;letter-spacing:-.04em;margin:22px 0 14px;color:var(--ink)}
.sub{color:var(--muted);font-size:clamp(17px,2.1vw,25px);line-height:1.4;font-weight:500;max-width:34em}
.center .sub{margin-inline:auto}
.note{color:var(--muted);font-size:clamp(15px,1.6vw,19px);font-weight:500}

.status{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-weight:500;font-size:clamp(14px,1.6vw,19px)}
.top-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* dots */
.dot{width:11px;height:11px;border-radius:50%;background:var(--ok);flex:none;position:relative;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 16%,transparent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--ok) 4%,transparent)}}
.step.is-wait .dot{background:#c7cad8;box-shadow:0 0 0 6px rgba(160,165,190,.15)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;margin-top:34px}
.tile{border:1.5px solid var(--line);border-radius:var(--r-tile);padding:22px 24px 28px;text-align:left;background:#fff;
  transition:border-color .5s,transform .5s,box-shadow .5s;position:relative;overflow:hidden}
.tile .k{display:block;color:var(--muted);font-weight:600;font-size:clamp(14px,1.5vw,18px)}
.tile .v{display:block;font-weight:800;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;margin-top:8px}
.center .tile{text-align:center;padding:30px 18px 22px}
.center .tile .dot{position:absolute;top:18px;left:20px}
.step .v{transition:color .4s}
.step.is-wait .v{color:#9aa0b4}
.step.is-done .v{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.tile.is-done{border-color:color-mix(in srgb,var(--accent2) 45%,var(--line));box-shadow:0 14px 30px -18px color-mix(in srgb,var(--accent2) 70%,transparent)}
.tile.is-wait::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(120,110,255,.08) 50%,transparent 70%);
  transform:translateX(-100%);animation:shimmer 1.6s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}

/* rows */
.rows{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-top:28px}
.rows.one{grid-template-columns:1fr}
.row{display:flex;align-items:center;gap:16px;border:1.5px solid var(--line);border-radius:999px;padding:18px 26px;background:#fff;transition:border-color .5s}
.row .k{flex:1;color:var(--muted);font-size:clamp(16px,1.8vw,22px);text-align:center}
.row .v{font-weight:800;font-size:clamp(17px,2vw,24px)}
.row.is-done{border-color:color-mix(in srgb,var(--accent2) 40%,var(--line))}
.rows.one .row .k{text-align:left}

/* progress */
.progress{width:100%;height:10px;border-radius:99px;background:#eef0fa;overflow:hidden;margin-top:30px}
.progress i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 25%,#fff),var(--accent) 55%,var(--accent2));transition:width .25s linear;position:relative}
.progress i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.3s infinite}
.progress.slim{height:6px;margin-top:26px}

.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.chips span{padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;color:#4b5064;font-size:clamp(14px,1.5vw,18px);background:#fff}
.note-box{width:100%;margin-top:22px;border:1.5px solid var(--line);border-radius:22px;padding:18px;color:var(--muted);font-weight:500;font-size:clamp(15px,1.6vw,19px)}

.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.foot-row .progress{margin:0;flex:1;min-width:200px}

/* continue button (appears when the load finishes) */
.continue{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;
  color:#fff;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));
  box-shadow:0 14px 30px -12px var(--accent);opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:opacity .5s,transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .3s;margin-top:26px}
.foot-row .continue{margin-top:0}
.is-ready .continue{opacity:1;transform:none;pointer-events:auto;animation:nudge 2.4s 1s ease-in-out infinite}
.continue:hover{box-shadow:0 18px 40px -12px var(--accent)}
.continue svg{transition:transform .3s}.continue:hover svg{transform:translateX(4px)}
@keyframes nudge{50%{transform:translateY(-3px)}}

.split{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}

/* ==========================================================
   P1 — icon box (ref 1)
   ========================================================== */
.p1-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.icon-box{flex:none;width:clamp(110px,14vw,180px);aspect-ratio:1;border-radius:44px;border:1.5px solid var(--line);display:grid;place-items:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 14%,#fff),#fafaff 70%);animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(2deg)}}
.icon-box .ln{stroke-dasharray:24;animation:draw 2.4s ease-in-out infinite}
.icon-box .l2{animation-delay:.3s}
@keyframes draw{0%{stroke-dashoffset:24}50%,100%{stroke-dashoffset:0}}
.p1-dot{animation:blink 1.4s ease-in-out infinite;transform-origin:32px 47px}
@keyframes blink{50%{transform:scale(.6);opacity:.6}}

/* ==========================================================
   P2 — ring (ref 2)
   ========================================================== */
.c-p2 h1{margin-top:6px}
.ring-wrap{position:relative;width:200px;height:200px;margin:32px auto 6px;border-radius:50%;display:grid;place-items:center;
  background:#fff;box-shadow:0 20px 50px -20px rgba(80,70,220,.35),inset 0 0 0 1px var(--line)}
.ring{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.ring-arc{transform-origin:60px 60px;animation:spin 1.6s cubic-bezier(.5,.1,.5,.9) infinite}
.ring-dash{transform-origin:60px 60px;animation:spin 12s linear infinite reverse}
.ring-icon{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.c-p2 h1,.c-p2 .sub{text-align:left}

/* ==========================================================
   P3 — conic ring (ref 3)
   ========================================================== */
.conic{width:180px;height:180px;border-radius:50%;margin-bottom:28px;position:relative;
  background:conic-gradient(from 0deg,#1a1aff,#4b3bff,#c9c3ff 30%,#fff 45%,#d6fbe8 60%,var(--accent2) 78%,#0ea5a4 90%,#1a1aff);
  animation:spin 3s linear infinite;filter:drop-shadow(0 18px 30px rgba(60,60,255,.25))}
.conic-in{position:absolute;inset:32px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 0 0 6px rgba(255,255,255,.6)}
.c-p3 h1{margin-top:14px}

/* ==========================================================
   P4 — dark orbit
   ========================================================== */
.p4{--bg:#070a1c}
.p4 .bg-grid{background-image:linear-gradient(rgba(160,150,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(160,150,255,.08) 1px,transparent 1px)}
.p4 .lp-foot{color:#8b8fb0}
.card.dark{background:linear-gradient(160deg,#121636,#0b0e26);border-color:#262b55;color:#fff;box-shadow:0 50px 100px -40px rgba(139,92,246,.6)}
.dark h1{color:#fff}.dark .sub{color:#a9adcf}
.pill-dark{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.4);color:#ddd6fe}
.checks{list-style:none;margin-top:24px;display:grid;gap:10px}
.checks li{display:flex;justify-content:space-between;padding:14px 20px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid #262b55;font-size:18px}
.checks .k{color:#c4c7e6}.checks .v{font-weight:700}
.dark .step.is-wait .v{color:#6b6f96}.dark .step.is-done .v{color:var(--accent2)}
.progress.dark{background:#1e2247}
.orbit{position:relative;aspect-ratio:1;width:100%;max-width:340px;justify-self:center}
.sun{position:absolute;inset:40%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f5d0fe,var(--accent));box-shadow:0 0 50px var(--accent),0 0 90px rgba(240,171,252,.5);animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 70px var(--accent),0 0 130px rgba(240,171,252,.7)}}
.o{position:absolute;border:1px dashed rgba(196,181,253,.3);border-radius:50%;animation:spin linear infinite}
.o span{position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%}
.o1{inset:26%;animation-duration:5s}.o1 span{background:#22d3ee;box-shadow:0 0 14px #22d3ee}
.o2{inset:13%;animation-duration:9s;animation-direction:reverse}.o2 span{background:#f0abfc;box-shadow:0 0 14px #f0abfc;width:22px;height:22px;top:-11px;margin-left:-11px}
.o3{inset:0;animation-duration:15s}.o3 span{background:#fde68a;box-shadow:0 0 14px #fde68a;width:12px;height:12px;top:-6px}
.star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:twinkle 2.5s ease-in-out infinite}
.s1{top:5%;left:10%}.s2{top:80%;left:5%;animation-delay:.6s}.s3{top:12%;right:4%;animation-delay:1.2s}.s4{bottom:4%;right:20%;animation-delay:1.8s}.s5{top:50%;right:-4%;animation-delay:.9s}
@keyframes twinkle{50%{opacity:.15;transform:scale(.5)}}

/* ==========================================================
   P5 — timeline + blocks
   ========================================================== */
.timeline{list-style:none;margin-top:26px;position:relative}
.timeline::before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:2px;background:var(--line)}
.timeline li{position:relative;display:flex;align-items:center;gap:16px;padding:10px 0}
.timeline .k{flex:1;font-size:clamp(16px,1.8vw,21px);font-weight:600}
.timeline .v{font-weight:700;font-size:16px}
.tick{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:#fff;flex:none;position:relative;z-index:1;transition:all .4s}
.timeline .is-wait:first-child .tick,.timeline .is-done + .is-wait .tick{border-color:var(--accent);border-top-color:transparent;animation:spin 1s linear infinite}
.timeline .is-done .tick{background:var(--accent);border-color:var(--accent);animation:pop .4s}
.timeline .is-done .tick::after{content:"";position:absolute;left:10px;top:6px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.timeline .is-done .v{color:var(--accent)}
.blocks{position:relative;height:300px;max-width:280px;width:100%;justify-self:center}
.bk{position:absolute;left:50%;width:120px;height:52px;margin-left:-60px;border-radius:14px;box-shadow:0 10px 24px -10px rgba(0,0,0,.25)}
.k1{bottom:20px;background:var(--accent);animation:stack 4s ease-in-out infinite}
.k2{bottom:76px;background:color-mix(in srgb,var(--accent) 70%,#fff);width:100px;margin-left:-50px;animation:stack 4s .25s ease-in-out infinite}
.k3{bottom:132px;background:var(--accent2);width:84px;margin-left:-42px;animation:stack 4s .5s ease-in-out infinite}
.k4{bottom:188px;background:color-mix(in srgb,var(--accent2) 60%,#fff);width:60px;margin-left:-30px;animation:stack 4s .75s ease-in-out infinite}
@keyframes stack{0%{transform:translateY(-140px);opacity:0}20%,80%{transform:none;opacity:1}100%{opacity:0}}
.blocks-floor{position:absolute;bottom:8px;left:10%;right:10%;height:10px;border-radius:50%;background:radial-gradient(rgba(13,148,136,.3),transparent 70%)}

/* ==========================================================
   P6 — liquid fill
   ========================================================== */
.liquid{width:190px;height:190px;border-radius:50%;position:relative;overflow:hidden;margin-bottom:26px;
  border:6px solid #fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,#fff),0 24px 50px -20px var(--accent);background:#fdf2f8}
.wave{position:absolute;left:-50%;width:200%;height:200%;top:calc(100% - var(--p,0%) * .86);border-radius:42%;transition:top .25s linear}
.w1{background:color-mix(in srgb,var(--accent) 80%,#fff);animation:spin 6s linear infinite}
.w2{background:var(--accent2);opacity:.55;border-radius:40%;margin-top:-6px;animation:spin 9s linear infinite reverse}
.liquid-num{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:46px;color:var(--ink);mix-blend-mode:normal;z-index:2;
  text-shadow:0 0 12px rgba(255,255,255,.8)}
.liquid-num small{font-size:22px}
.liquid-num{display:flex;align-items:center;justify-content:center}

/* ==========================================================
   P7 — sketch skeleton
   ========================================================== */
.sketch{position:relative;border:1.5px solid var(--line);border-radius:22px;padding:16px;background:#fffaf5;box-shadow:0 30px 60px -30px rgba(234,88,12,.35);
  transform:rotate(2deg);animation:bob 5s ease-in-out infinite}
.sk-bar{display:flex;gap:6px;margin-bottom:12px}.sk-bar i{width:10px;height:10px;border-radius:50%;background:#fed7aa}
.sk-nav{display:flex;gap:8px;margin-bottom:12px}.sk-nav span{height:10px;flex:1;border-radius:6px}
.sk-nav span:first-child{flex:2}
.sk-hero{height:110px;border-radius:14px;overflow:hidden;margin-bottom:12px;background:#ffedd5}
.sk-hero svg{width:100%;height:100%;display:block;clip-path:inset(0 100% 0 0);animation:reveal 4.2s ease-in-out infinite}
@keyframes reveal{0%{clip-path:inset(0 100% 0 0)}40%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
.sk-line{height:10px;border-radius:6px;margin-bottom:9px}
.w90{width:90%}.w70{width:70%}.w80{width:80%}
.sk-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.sk-cols div{height:46px;border-radius:10px}
.sk-nav span,.sk-line,.sk-cols div{background:linear-gradient(90deg,#fde3cc 25%,#fff4ea 50%,#fde3cc 75%);background-size:200% 100%;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.pencil{position:absolute;width:12px;height:60px;border-radius:3px 3px 0 0;background:linear-gradient(var(--accent) 70%,#fde68a 70%);right:30px;bottom:40px;
  transform-origin:bottom center;animation:scribble 1.8s ease-in-out infinite}
.pencil::after{content:"";position:absolute;bottom:-12px;left:0;border:6px solid transparent;border-top:12px solid #78350f;border-bottom:0}
@keyframes scribble{0%,100%{transform:translate(0,0) rotate(28deg)}25%{transform:translate(-60px,-20px) rotate(24deg)}50%{transform:translate(-120px,8px) rotate(30deg)}75%{transform:translate(-50px,-60px) rotate(26deg)}}

/* ==========================================================
   P8 — dot matrix
   ========================================================== */
.matrix{display:grid;grid-template-columns:repeat(5,18px);gap:12px;margin-bottom:26px;padding:26px;border-radius:30px;background:var(--soft);border:1.5px solid var(--line)}
.matrix i{width:18px;height:18px;border-radius:50%;background:var(--accent);animation:dotWave 1.8s calc(var(--i) * .1s) ease-in-out infinite}
@keyframes dotWave{0%,100%{transform:scale(.45);opacity:.25}40%{transform:scale(1);opacity:1;background:var(--accent2)}}
.c-p8 h1{margin-top:16px}
.c-p8 .rows{max-width:420px}

/* ==========================================================
   P9 — glass aurora
   ========================================================== */
.p9{background:#140b2e}
.p9 .bg-grid,.p9 .blob{display:none}
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(135deg,#1e1048,#0f2a4a)}
.aurora span{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(90px);opacity:.7;mix-blend-mode:screen}
.aurora span:nth-child(1){background:#7c3aed;top:-30%;left:-20%;animation:float1 14s ease-in-out infinite}
.aurora span:nth-child(2){background:#06b6d4;bottom:-35%;right:-20%;animation:float2 17s ease-in-out infinite}
.aurora span:nth-child(3){background:#ec4899;top:20%;left:30%;width:40vmax;height:40vmax;opacity:.45;animation:float1 20s ease-in-out infinite reverse}
.card.glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);color:#fff;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.glass h1{color:#fff}.glass .sub{color:rgba(255,255,255,.78)}
.pill-glass{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}
.glass .tile{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.glass .tile .k{color:rgba(255,255,255,.7)}.glass .step.is-wait .v{color:rgba(255,255,255,.5)}.glass .step.is-done .v{color:#fff}
.glass .tile.is-done{border-color:rgba(34,211,238,.7);box-shadow:0 0 30px -10px #22d3ee}
.progress.glassbar{background:rgba(255,255,255,.15)}
.glassbar i{background:linear-gradient(90deg,#a78bfa,#22d3ee,#f0abfc)}
.morph{width:140px;height:140px;margin-bottom:20px;background:linear-gradient(135deg,#a78bfa,#22d3ee 60%,#f0abfc);
  animation:morph 7s ease-in-out infinite,spin 14s linear infinite;box-shadow:0 0 60px rgba(167,139,250,.6)}
@keyframes morph{0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}33%{border-radius:68% 32% 41% 59% / 62% 35% 65% 38%}66%{border-radius:35% 65% 30% 70% / 55% 64% 36% 45%}}
.p9 .lp-foot{color:rgba(255,255,255,.6)}
.p9 .continue{background:#fff;color:#4c1d95;box-shadow:0 14px 30px -12px rgba(255,255,255,.5)}

/* ==========================================================
   P10 — console
   ========================================================== */
.c-p10 h1{margin-top:22px}
.term{margin-top:28px;border-radius:22px;overflow:hidden;background:#0b1020;box-shadow:0 30px 60px -30px rgba(37,99,235,.6);font-family:'JetBrains Mono',ui-monospace,monospace}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:#141a33}
.term-bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{margin-left:10px;color:#7c86b0;font-size:13px}
.term-body{padding:20px 22px;font-size:clamp(13px,1.6vw,16px);line-height:2;color:#c8d0f0}
.log{display:flex;justify-content:space-between;gap:12px}
.log.is-wait .v{color:#5b6490;animation:blink 1s infinite}
.log.is-done .v{color:#4ade80}
.log.is-done .k{color:#e5e9ff}
.cursor{display:inline-block;width:10px;height:18px;background:#60a5fa;vertical-align:middle;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ==========================================================
   P11 — sunrise
   ========================================================== */
.p11{--bg:#fffaf3}
.p11 .bg-grid{background-image:linear-gradient(rgba(217,119,6,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(217,119,6,.06) 1px,transparent 1px)}
.card.warm{background:linear-gradient(180deg,#fff,#fffbf3);border-color:#f6e3c6;box-shadow:0 50px 90px -40px rgba(217,119,6,.35)}
.warm .tile{border-color:#f6e3c6}
.sunbox{flex:none;width:170px;height:170px;border-radius:44px;border:1.5px solid #f6e3c6;background:linear-gradient(180deg,#fff7ed,#ffe4e6);position:relative;overflow:hidden;display:grid;place-items:center}
.sunbox svg{animation:sunrise 4.2s ease-out infinite}
.rays{transform-origin:60px 60px;animation:spin 10s linear infinite}
@keyframes sunrise{0%{transform:translateY(60px)}50%,100%{transform:translateY(-6px)}}
.horizon{position:absolute;left:0;right:0;bottom:0;height:38px;background:linear-gradient(180deg,rgba(251,113,133,.25),rgba(217,119,6,.35))}

/* ==========================================================
   P12 — paper plane
   ========================================================== */
.flight{width:100%;max-width:640px;margin-bottom:10px}
.flight svg{width:100%;height:auto;overflow:visible}
.fp{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-30}}
.cloud{animation:drift 9s linear infinite}
.c1{transform:translate(160px,40px)}.c2{animation-duration:13s;transform:translate(430px,120px)}
@keyframes drift{from{translate:40px 0}to{translate:-40px 0}}

/* ---------- footer ---------- */
.lp-foot{position:relative;z-index:1;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:0 16px 28px;margin-top:-56px;color:#8a8fa5;font-size:14px}
.lp-foot a{text-decoration:none}.lp-foot a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .split{grid-template-columns:1fr}
  .orbit{max-width:240px;order:-1}
  .blocks{height:240px;order:-1}
  .sketch{order:-1;transform:none}
  .p1-head{flex-direction:column-reverse}
  .sunbox{width:130px;height:130px}
}
@media (max-width:620px){
  .tiles,.rows{grid-template-columns:1fr}
  .center .tile{padding:20px 18px}
  .card{border-radius:28px}
  .ring-wrap{width:160px;height:160px}
  .conic{width:140px;height:140px}.conic-in{inset:24px}
  .foot-row{flex-direction:column;align-items:stretch}
  .continue{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ==========================================================
   Gallery & legal pages
   ========================================================== */
.site{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:40px 16px 60px}
.site-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;text-decoration:none}
.brand i{width:14px;height:24px;border-radius:6px;background:linear-gradient(#2b2bff,#14d39a)}
.site-nav nav{display:flex;gap:18px;flex-wrap:wrap}.site-nav nav a{text-decoration:none;color:var(--muted);font-weight:600}.site-nav nav a:hover{color:var(--ink)}
.hero h1{font-size:clamp(36px,6vw,72px)}
.hero .sub{margin-bottom:22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;background:#2b2bff;color:#fff;font-weight:700;text-decoration:none;box-shadow:0 14px 30px -12px #2b2bff}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin-top:44px}
.g-item{background:#fff;border:1.5px solid var(--line);border-radius:26px;overflow:hidden;text-decoration:none;transition:transform .35s,box-shadow .35s;animation:fadeUp .7s both}
.g-item:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.g-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg);pointer-events:none}
.g-frame iframe{position:absolute;top:0;left:0;width:400%;height:400%;border:0;transform:scale(.25);transform-origin:0 0}
.g-meta{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1.5px solid var(--line)}
.g-meta b{font-size:18px}.g-meta span{color:var(--muted);font-weight:600;font-size:14px}
.doc{background:#fff;border:1.5px solid var(--line);border-radius:30px;padding:clamp(24px,5vw,56px);box-shadow:var(--shadow);max-width:820px;margin:0 auto}
.doc h1{font-size:clamp(32px,5vw,54px)}
.doc h2{font-size:22px;margin:28px 0 8px}
.doc p,.doc li{color:#3d4256;line-height:1.7;font-size:17px;margin-bottom:10px}
.doc ul{padding-left:22px}
.site-foot{text-align:center;color:#8a8fa5;font-size:14px;margin-top:48px}
.site-foot a{margin:0 8px;text-decoration:none}