/* JokiBlox — Roblox-inspired monochrome theme (black / grey / white) */
:root {
  --black: #0b0c0d;
  --ink: #191b1d;
  --panel: #232527;
  --panel-2: #2c2f31;
  --line: #393b3d;
  --muted: #9a9c9e;
  --soft: #bdbebe;
  --white: #ffffff;
  --paper: #f2f4f5;
  --paper-2: #e3e5e7;
  --ok: #00b06f;
  --warn: #f5a623;
  --bad: #e5484d;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 40px rgba(0, 0, 0, .35);
  --max: 1180px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Montserrat", "Arial Black", "Helvetica Neue", var(--font);  /* wide fallback = less jump when the font swaps in */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 800; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--mono); }

/* ---------- i18n: show only active language ---------- */
html[data-lang="en"] body [lang="id"],
html[data-lang="id"] body [lang="en"] { display: none !important; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; position: relative; }
.section.light { background: var(--paper); color: var(--ink); }
.section.black { background: var(--black); }
.section.tight { padding: 64px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 .78rem/1 var(--font); text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; background: currentColor; transform: rotate(15deg); border-radius: 2px; }
.lead { font-size: 1.06rem; color: var(--soft); max-width: 640px; }
.light .lead { color: #4a4d50; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .section { padding: 56px 0; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--radius-sm); border: 2px solid transparent;
  font: 800 .98rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--white); color: var(--black); }
.btn-primary:hover { background: var(--paper-2); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--white); }
.light .btn-primary { background: var(--black); color: var(--white); }
.light .btn-primary:hover { background: var(--panel); }
.light .btn-ghost { color: var(--ink); border-color: #c7c9cb; }
.light .btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--soft);
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(0,176,111,.6); animation: pulse 1.8s infinite; }
.light .badge { background: var(--white); border-color: var(--paper-2); color: #4a4d50; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,176,111,.6); } 70% { box-shadow: 0 0 0 10px rgba(0,176,111,0); } 100% { box-shadow: 0 0 0 0 rgba(0,176,111,0); } }

/* ---------- header ---------- */
.promo-bar {
  background: var(--white); color: var(--black); text-align: center;
  font-size: .88rem; font-weight: 700; padding: 9px 16px;
}
.promo-bar a { text-decoration: underline; }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(25, 27, 29, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 1.25rem/1 var(--display); letter-spacing: -.02em; }
.brand-mark { width: 30px; height: 30px; }
.brand small { font: 700 .62rem/1 var(--font); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; display: block; margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--soft); font-weight: 600; padding: 8px 12px; border-radius: 8px; font-size: .95rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--white); background: var(--panel); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.lang-toggle button {
  background: transparent; color: var(--muted); border: 0; padding: 8px 10px; font: 800 .78rem/1 var(--font); cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--white); color: var(--black); }
.nav .btn { padding: 10px 16px; font-size: .9rem; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--white); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--ink); border-bottom: 1px solid var(--line); padding: 10px 16px 18px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; }
  .nav .btn-cta-desktop { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: 48px 0 64px; position: relative; overflow: hidden; background: var(--black); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .22;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 .stroke { background: var(--white); color: var(--black); padding: 0 .14em; border-radius: 12px; display: inline-block; transform: rotate(-2deg); white-space: nowrap; }
.hero .lead { margin: 18px 0 28px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: var(--muted); font-size: .9rem; }
.hero-meta strong { color: var(--white); }
.countdown { display: flex; gap: 8px; margin-top: 22px; }
.countdown div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; min-width: 54px; text-align: center; }
.countdown b { display: block; font: 900 1.2rem/1 var(--display); }
.countdown span { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* floating blocks */
.floaters { position: absolute; inset: 0; pointer-events: none; }
.floaters i {
  position: absolute; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 4px;
  animation: float 9s ease-in-out infinite;
}
@media (max-width: 640px) { .floaters { display: none; } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(15deg); } 50% { transform: translateY(-24px) rotate(105deg); } }

/* ---------- studio demo window ---------- */
.window {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; position: relative;
}
.light .window { box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.window-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.window-bar .title { margin-left: 8px; font-weight: 700; color: var(--soft); }
.window-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; }
.window-bar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

.studio { display: grid; grid-template-columns: 210px 1fr; min-height: 380px; }
@media (max-width: 560px) { .studio { grid-template-columns: 1fr; } .studio .explorer { display: none; } }
.explorer { border-right: 1px solid var(--line); padding: 12px; font: 500 .76rem/1.9 var(--mono); color: var(--soft); background: #1d1f21; }
.explorer .h { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; margin-bottom: 6px; font-family: var(--font); }
.explorer .items div { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explorer .items div.on { opacity: 1; transform: none; }
.explorer .items div::before { content: "▸ "; color: var(--line); }
.explorer .items div.new::after { content: " +"; color: var(--ok); font-weight: 800; }
.stage { position: relative; display: flex; flex-direction: column; }
.viewport {
  flex: 1; position: relative; min-height: 210px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #3a3d40, #1b1d1f 70%);
}
.iso { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: 260px; height: 180px; }
.iso .blk { position: absolute; width: 44px; height: 44px; opacity: 0; transform: translateY(-40px) scale(.6); transition: opacity .35s, transform .45s cubic-bezier(.2,1.6,.4,1); }
.iso .blk.on { opacity: 1; transform: none; }
.iso .blk svg { width: 100%; height: 100%; }
.chat { border-top: 1px solid var(--line); padding: 12px 14px; font-size: .84rem; background: var(--ink); min-height: 150px; }
.chat .msg { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
.chat .av { flex: 0 0 24px; height: 24px; border-radius: 6px; background: var(--panel-2); display: grid; place-items: center; font-size: .66rem; font-weight: 900; }
.chat .av.ai { background: var(--white); color: var(--black); }
.chat .txt { color: var(--soft); }
.chat .txt b { color: var(--white); }
.caret::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--white); }
@keyframes blink { 50% { opacity: 0; } }
.log { font: 500 .74rem/1.7 var(--mono); color: var(--muted); }
.log .ok { color: var(--ok); }

/* ---------- stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stats .stat { padding: 28px 22px; border-right: 1px solid var(--line); background: var(--ink); }
.stats .stat:last-child { border-right: 0; }
.stat .num { font: 900 clamp(2rem, 4vw, 2.9rem)/1 var(--display); letter-spacing: -.03em; }
.stat .lbl { color: var(--soft); font-size: .92rem; margin-top: 8px; }
.stat .src { color: var(--muted); font-size: .72rem; margin-top: 10px; }
.stat .src a { color: var(--muted); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats .stat:nth-child(2) { border-right: 0; } .stats .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .stats .stat { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: #55585b; }
.light .card { background: var(--white); border-color: var(--paper-2); }
.light .card:hover { border-color: #c7c9cb; }
.card p { color: var(--soft); margin: 0; }
.light .card p { color: #55585b; }
.card .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--white); color: var(--black); display: grid; place-items: center; margin-bottom: 18px; }
.light .card .ico { background: var(--black); color: var(--white); }
.card .ico svg { width: 24px; height: 24px; }
.card .tag { display: inline-block; font: 800 .68rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.card a.more { display: inline-block; margin-top: 14px; font-weight: 800; text-decoration: none; }
.card a.more::after { content: " →"; }

/* ---------- steps ---------- */
.steps { counter-reset: s; }
.step { position: relative; }
.step::before {
  counter-increment: s; content: "0" counter(s);
  font: 900 2.6rem/1 var(--display); color: var(--line); display: block; margin-bottom: 12px;
}
.light .step::before { color: #c7c9cb; }


.squad { display: flex; gap: 10px; flex-wrap: wrap; }
.agent-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 8px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.agent-chip .face { width: 22px; height: 22px; border-radius: 5px; background: var(--white); color: var(--black); display: grid; place-items: center; font-size: .62rem; font-weight: 900; animation: bob 2.4s ease-in-out infinite; }
.agent-chip:nth-child(2) .face { animation-delay: .3s; }
.agent-chip:nth-child(3) .face { animation-delay: .6s; }
.agent-chip:nth-child(4) .face { animation-delay: .9s; }
.agent-chip:nth-child(5) .face { animation-delay: 1.2s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }

/* ---------- code / migration demo ---------- */
.code { font: 500 .8rem/1.75 var(--mono); padding: 14px 0; background: #151618; color: var(--soft); overflow-x: auto; }
.code .ln { display: block; padding: 0 16px; white-space: pre; transition: background .3s; }
.code .ln.del { background: rgba(229,72,77,.14); color: #ff9a9d; }
.code .ln.add { background: rgba(0,176,111,.14); color: #6fe3b4; }
.code .ln .n { display: inline-block; width: 26px; color: #55585b; user-select: none; }
.code .k { color: var(--white); font-weight: 700; }
.code .c { color: #6b6e71; }
.mig-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); font-size: .82rem; }
.mig-foot .timer { font: 800 1rem/1 var(--mono); }
.mig-foot .fixed { color: var(--ok); font-weight: 800; }
.progress { height: 4px; background: var(--line); }
.progress b { display: block; height: 100%; width: 0; background: var(--white); transition: width .4s; }

/* ---------- UGC demo ---------- */
.ugc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 560px) { .ugc { grid-template-columns: 1fr; } }
.ugc-preview { display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 40%, #3a3d40, #1b1d1f 70%); min-height: 280px; position: relative; }
.ugc-preview svg { width: 200px; transition: transform .5s; }
.ugc-preview .scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--white); box-shadow: 0 0 18px var(--white); top: 10%; opacity: 0; }
.ugc-preview.gen .scan { animation: scan 1.2s ease-in-out; }
@keyframes scan { 0% { top: 10%; opacity: 1; } 100% { top: 90%; opacity: 0; } }
.ugc-side { padding: 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 560px) { .ugc-side { border-left: 0; border-top: 1px solid var(--line); } }
.prompt-box { background: var(--black); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: .86rem; min-height: 62px; color: var(--soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: .74rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--soft); cursor: pointer; }
.chip.on { background: var(--white); color: var(--black); border-color: var(--white); }
.checks { font-size: .8rem; color: var(--soft); display: grid; gap: 6px; }
.checks div { opacity: .35; transition: opacity .3s; }
.checks div.on { opacity: 1; }
.checks div.on::before { content: "✓ "; color: var(--ok); font-weight: 900; }
.checks div:not(.on)::before { content: "○ "; }

/* ---------- before / after ---------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; }
.ba > div { padding: 22px; }
.ba > div + div { border-left: 1px solid var(--line); }
.ba h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; }
.meter { margin-bottom: 14px; }
.meter .top { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 6px; color: var(--soft); }
.meter .top b { color: var(--white); font-family: var(--mono); }
.meter .bar { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.meter .bar b { display: block; height: 100%; width: 0; background: var(--muted); transition: width 1.2s ease; border-radius: 4px; }
.ba .after .meter .bar b { background: var(--white); }

/* ---------- models ---------- */
.router { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
@media (max-width: 860px) { .router { grid-template-columns: 1fr; } .router .hub { margin: 0 auto; } }
.router .tasks, .router .models { display: grid; gap: 10px; }
.router .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; font-weight: 700; font-size: .9rem; transition: border-color .3s, background .3s, color .3s; }
.router .row small { color: var(--muted); font-weight: 500; font-size: .76rem; }
.router .row.hot { border-color: var(--white); background: var(--white); color: var(--black); }
.router .row.hot small { color: #4a4d50; }
.hub { width: 150px; height: 150px; border-radius: 28px; background: var(--white); color: var(--black); display: grid; place-items: center; text-align: center; transform: rotate(-8deg); box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 0 0 22px rgba(255,255,255,.03); }
.hub div { transform: rotate(8deg); font: 900 1rem/1.1 var(--display); }
.hub small { display: block; font: 700 .66rem/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #55585b; margin-top: 4px; }

/* ---------- comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.light .table-wrap { border-color: var(--paper-2); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 560px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.light th, .light td { border-color: var(--paper-2); }
th { font: 800 .76rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
td.hl { font-weight: 800; }
.yes { color: var(--ok); font-weight: 900; }
.no { color: var(--muted); }

/* ---------- pricing ---------- */
.billing { display: inline-flex; background: var(--white); border: 1px solid var(--paper-2); border-radius: 999px; padding: 4px; gap: 4px; margin: 10px 0 32px; }
.billing button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font: 800 .88rem/1 var(--font); cursor: pointer; color: #55585b; }
.billing button[aria-pressed="true"] { background: var(--black); color: var(--white); }
.billing .save { color: var(--ok); font-size: .74rem; margin-left: 4px; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1060px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--white); color: var(--ink); border: 1px solid var(--paper-2); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; position: relative; text-align: left; }
.plan.pop { background: var(--black); color: var(--white); border-color: var(--black); transform: translateY(-8px); }
@media (max-width: 1060px) { .plan.pop { transform: none; } }
.plan .ribbon { position: absolute; top: -12px; left: 26px; background: var(--ok); color: var(--white); font: 800 .7rem/1 var(--font); padding: 7px 10px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; }
.plan h3 { margin-bottom: 4px; }
.plan .desc { color: #6b6e71; font-size: .88rem; min-height: 44px; }
.plan.pop .desc { color: var(--muted); }
.price { margin: 16px 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .now { font: 900 2.6rem/1 var(--display); letter-spacing: -.03em; }
.price .was { text-decoration: line-through; color: #9a9c9e; font-weight: 700; }
.price .per { color: #6b6e71; font-size: .88rem; }
.plan.pop .price .per { color: var(--muted); }
.early-note { font-size: .78rem; font-weight: 800; color: var(--ok); min-height: 20px; }
.tokens { margin: 14px 0; padding: 12px; border-radius: 10px; background: var(--paper); font-weight: 800; font-size: .92rem; }
.plan.pop .tokens { background: var(--panel); }
.tokens small { display: block; font-weight: 500; color: #6b6e71; font-size: .76rem; }
.plan.pop .tokens small { color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; font-size: .9rem; display: grid; gap: 9px; flex: 1; }
.plan li { padding-left: 24px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; background: currentColor; border-radius: 3px; transform: rotate(15deg); opacity: .85; }
.plan li.off { color: #9a9c9e; }
.plan li.off::before { background: transparent; border: 1.5px solid currentColor; }
.plan .btn { width: 100%; }
.plan.pop .btn-primary { background: var(--white); color: var(--black); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.light .faq details { border-color: #d7d9db; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--soft); }
.light .faq details p { color: #55585b; }

/* ---------- forms ---------- */
.form-card { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
@media (max-width: 560px) { .form-card { padding: 22px; } }
.field { margin-bottom: 18px; }
.field label, .field .label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: 7px; }
.field .hint { font-weight: 500; color: #6b6e71; font-size: .8rem; }
.field input[type=text], .field input[type=email], .field select, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid #d7d9db; background: var(--paper);
  font: 500 1rem/1.4 var(--font); color: var(--ink); transition: border-color .15s, background .15s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); }
.field .err { color: var(--bad); font-size: .8rem; font-weight: 700; margin-top: 6px; display: none; }
.field.invalid input, .field.invalid textarea, .field.invalid .opts { border-color: var(--bad); }
.field.invalid .err { display: block; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 10px; border: 1.5px solid transparent; }
@media (max-width: 560px) { .opts { grid-template-columns: 1fr; } }
.opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 10px; border: 1.5px solid #d7d9db; background: var(--paper); cursor: pointer; font-size: .9rem; font-weight: 600; transition: border-color .15s, background .15s; }
.opt:hover { border-color: #9a9c9e; }
.opt input { margin-top: 3px; accent-color: var(--ink); }
.opt:has(input:checked) { border-color: var(--ink); background: var(--white); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: #55585b; }
.consent input { margin-top: 3px; accent-color: var(--ink); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-weight: 700; font-size: .9rem; }
.form-status.error { color: var(--bad); }
.success { text-align: center; padding: 20px 0; }
.success .big { width: 72px; height: 72px; border-radius: 18px; background: var(--ink); color: var(--white); display: grid; place-items: center; margin: 0 auto 18px; transform: rotate(-8deg); font-size: 2rem; animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(.4) rotate(-40deg); opacity: 0; } }
.success .code-chip { display: inline-block; font: 800 1.1rem/1 var(--mono); background: var(--paper); border: 1.5px dashed var(--ink); padding: 12px 16px; border-radius: 10px; margin: 10px 0; letter-spacing: .06em; }
.perks { display: grid; gap: 14px; }
.perk { display: flex; gap: 14px; align-items: flex-start; }
.perk .n { flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--white); color: var(--black); display: grid; place-items: center; font-weight: 900; }
.perk p { margin: 0; color: var(--soft); font-size: .93rem; }
.perk b { display: block; color: var(--white); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--white); color: var(--black); border-radius: 22px; padding: 56px 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; position: relative; overflow: hidden; }
.cta-band .lead { color: #4a4d50; }
.cta-band::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; border: 30px solid var(--paper-2); border-radius: 40px; transform: rotate(15deg); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band .btn-primary { background: var(--black); color: var(--white); }
.cta-band .btn-primary:hover { background: var(--panel); }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; padding: 40px 24px; } }

/* ---------- legal pages ---------- */
.legal { max-width: 820px; }
.legal h2 { font-size: 1.4rem; margin-top: 2em; }
.legal p, .legal li { color: #3a3d40; }
.legal ol, .legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: .5em; }
.toc { background: var(--white); border: 1px solid var(--paper-2); border-radius: var(--radius); padding: 18px 22px; margin: 24px 0; font-size: .92rem; }
.toc ol { margin: 8px 0 0; }
.note { background: var(--white); border-left: 4px solid var(--ink); padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: .9rem; color: #3a3d40; }

/* ---------- footer ---------- */
.site-footer { background: var(--black); border-top: 1px solid var(--line); padding: 60px 0 30px; color: var(--soft); font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
.site-footer h4 { font: 800 .76rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; color: var(--soft); }
.site-footer a:hover { color: var(--white); }
.foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.sources { font-size: .8rem; color: var(--muted); }
.sources ol { padding-left: 1.2em; margin: 0; display: grid; gap: 6px; }
.sources a { color: var(--soft); }

/* ---------- page hero (subpages) ---------- */
.page-hero { background: var(--black); padding: 80px 0 64px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .18;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%);
}
.page-hero .container { position: relative; }

/* product detail rows */
.feature-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line); }
.feature-row:last-child { border-bottom: 0; }
.feature-row.flip > :first-child { order: 2; }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; gap: 28px; } .feature-row.flip > :first-child { order: 0; } }
.feature-row > :not([data-fx-mount]) ul { padding-left: 0; list-style: none; display: grid; gap: 10px; margin: 18px 0 0; }
.feature-row > :not([data-fx-mount]) li { padding-left: 26px; position: relative; color: var(--soft); }
.feature-row > :not([data-fx-mount]) li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 900; }
.kpis { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.kpis div b { display: block; font: 900 1.6rem/1 var(--display); }
.kpis div span { color: var(--muted); font-size: .8rem; }

/* ---------- reveal on scroll ---------- */
/* hidden only when JS is running (html.js), so content never stays invisible if a script fails */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--white); color: var(--black); padding: 10px 14px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.light :focus-visible, .form-card :focus-visible { outline-color: var(--ink); }

/* =====================================================================
   v2 — playful layer: chunky buttons, avatars, marquee, bento, prompt bar
   ===================================================================== */
.btn-primary { box-shadow: 0 4px 0 #8a8c8e; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #8a8c8e; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a8c8e; }
.light .btn-primary, .cta-band .btn-primary { box-shadow: 0 4px 0 #55585b; }
.light .btn-primary:active, .cta-band .btn-primary:active { box-shadow: 0 1px 0 #55585b; }
.btn-ghost { box-shadow: 0 4px 0 var(--line); }
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.light .btn-ghost { box-shadow: 0 4px 0 #d7d9db; }

[data-avatar] { display: inline-block; width: 30px; height: 30px; }
[data-avatar] svg { width: 100%; height: 100%; }
.agent-chip [data-avatar] { width: 30px; height: 30px; margin: -4px 0; animation: bob 2.4s ease-in-out infinite; }
.agent-chip:nth-child(2) [data-avatar] { animation-delay: .3s; }
.agent-chip:nth-child(3) [data-avatar] { animation-delay: .6s; }
.agent-chip:nth-child(4) [data-avatar] { animation-delay: .9s; }
.agent-chip:nth-child(5) [data-avatar] { animation-delay: 1.2s; }

/* marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--black); padding: 14px 0; }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 10px; font: 800 1rem/1 var(--display); color: var(--soft); white-space: nowrap; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink); }
.marquee span:nth-child(3n) { background: var(--white); color: var(--black); border-color: var(--white); transform: rotate(-2deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* hero prompt bar */
.promptbar { margin-top: 16px; }
.pb-input { display: flex; gap: 8px; background: var(--ink); border: 2px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 14px; align-items: center; transition: border-color .15s; }
.pb-input:focus-within { border-color: var(--white); }
.pb-input .pb-icon { color: var(--muted); font-size: 1.1rem; }
.pb-input input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--white); font: 500 .98rem var(--font); padding: 10px 0; outline: none; }
.pb-input input::placeholder { color: var(--muted); }
.pb-input .btn { padding: 11px 16px; font-size: .9rem; }
.promptbar .chips { margin-top: 10px; }
.promptbar .chip { font-size: .8rem; padding: 7px 12px; transition: transform .15s; }
.promptbar .chip:hover { transform: translateY(-2px); }
.hero-try { font-size: .78rem; color: var(--muted); margin: 0 0 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* bento products */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento > * { min-width: 0; }
.bento .wide { grid-column: span 2; }
.bento .tall { grid-row: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .bento .tall { grid-row: auto; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bento .wide { grid-column: auto; } }
.card.dark { background: var(--black) !important; color: var(--white); border-color: var(--black) !important; }
.card.dark p { color: var(--soft) !important; }
.card.dark .ico { background: var(--white) !important; color: var(--black) !important; }
.card.dark .tag { color: var(--muted); }
.card.wide { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 640px) { .card.wide { grid-template-columns: 1fr; } }
.mini-flow { background: var(--paper); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.mini-flow .mf-prompt { background: var(--white); border: 1.5px solid var(--paper-2); border-radius: 10px; padding: 10px 12px; font-size: .85rem; font-weight: 600; color: var(--ink); }
.mini-flow .mf-arrow { text-align: center; color: var(--muted); font-weight: 900; }
.mini-flow .mf-out { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-flow .mf-out span { font: 700 .72rem/1 var(--mono); background: var(--ink); color: var(--white); padding: 7px 9px; border-radius: 6px; opacity: 0; transform: translateY(6px); animation: mfIn 6s infinite; }
.mini-flow .mf-out span:nth-child(2) { animation-delay: .4s; } .mini-flow .mf-out span:nth-child(3) { animation-delay: .8s; }
.mini-flow .mf-out span:nth-child(4) { animation-delay: 1.2s; } .mini-flow .mf-out span:nth-child(5) { animation-delay: 1.6s; }
@keyframes mfIn { 0%, 8% { opacity: 0; transform: translateY(6px); } 14%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mp-lanes { display: grid; gap: 12px; margin: 22px 0; }
.mp-lane { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
.mp-lane [data-avatar] { width: 34px; height: 34px; }
.mp-lane .bar { height: 10px; border-radius: 5px; background: var(--panel); overflow: hidden; }
.mp-lane .bar b { display: block; height: 100%; width: 0; background: var(--white); border-radius: 5px; animation: lane 5s ease-in-out infinite; }
.mp-lane:nth-child(2) .bar b { animation-delay: .5s; } .mp-lane:nth-child(3) .bar b { animation-delay: 1s; } .mp-lane:nth-child(4) .bar b { animation-delay: .25s; background: var(--ok); }
@keyframes lane { 0% { width: 0; } 70%, 90% { width: 100%; } 100% { width: 100%; opacity: .3; } }
.card.cta-card { display: flex; flex-direction: column; justify-content: space-between; background: var(--white); border: 2px dashed #c7c9cb; }

/* tour teaser on home */
.tour-teaser { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .tour-teaser { grid-template-columns: 1fr; } }
.tour-teaser .shot { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); background: var(--ink); }

/* =====================================================================
   Studio tour
   ===================================================================== */
.container.wide { max-width: 1320px; }
.stepper { list-style: none; padding: 0; margin: 0 0 22px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.stepper button { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); color: var(--soft); border: 1px solid var(--line); padding: 9px 14px 9px 9px; border-radius: 999px; font: 700 .86rem var(--font); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.stepper button .n { font-style: normal;  width: 24px; height: 24px; border-radius: 7px; background: var(--panel-2); display: grid; place-items: center; font-weight: 900; font-size: .78rem; transform: rotate(-6deg); }
.stepper button.done { color: var(--white); }
.stepper button.done .n { background: var(--ok); color: var(--white); }
.stepper button.on { background: var(--white); color: var(--black); border-color: var(--white); }
.stepper button.on .n { background: var(--black); color: var(--white); }

.tour-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .tour-grid { grid-template-columns: 1fr; } }
.tour-side { position: sticky; top: 90px; }
@media (max-width: 1100px) { .tour-side { position: static; } }
.caption { background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-height: 260px; }
.caption .cap-n { font: 800 .74rem var(--mono); color: var(--muted); }
.caption h3 { font-size: 1.5rem; margin: 6px 0 10px; }
.caption p { color: var(--soft); font-size: .93rem; }
.cap-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cap-split div { background: var(--panel); border-radius: 10px; padding: 10px 12px; font-size: .84rem; font-weight: 700; }
.cap-split small { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.tour-ctrl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tour-ctrl .btn { padding: 11px 14px; font-size: .86rem; flex: 1; }
.tour-ctrl .btn:disabled { opacity: .4; cursor: default; transform: none; }
.tour-note { color: var(--muted); font-size: .74rem; margin-top: 14px; }

.sx { background: #2b2d2f; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); font-size: .8rem; color: #d7d9db; }
.sx-title { display: flex; align-items: center; gap: 7px; background: #1e2022; padding: 8px 12px; border-bottom: 1px solid #3a3d40; }
.sx-title i { width: 10px; height: 10px; border-radius: 50%; background: #45484b; }
.sx-name { margin-left: 8px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-name b { color: var(--soft); }
.sx-conn { margin-left: auto; font: 700 .72rem var(--font); padding: 4px 10px; border-radius: 999px; background: #3a3d40; color: var(--muted); white-space: nowrap; transition: background .3s, color .3s; }
.sx-conn.on { background: rgba(0,176,111,.18); color: #3fe0a4; }
.sx-ribbon { background: #26282a; border-bottom: 1px solid #3a3d40; }
.sx-tabs { display: flex; gap: 2px; padding: 6px 10px 0; overflow-x: auto; }
.sx-tabs span { padding: 6px 12px; border-radius: 6px 6px 0 0; color: var(--muted); font-weight: 600; white-space: nowrap; }
.sx-tabs span.on { background: #303234; color: var(--white); }
.sx-tools { display: flex; gap: 6px; padding: 8px 10px; background: #303234; min-height: 58px; align-items: center; }
.sx-tool { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 6px; color: var(--soft); font-size: .7rem; font-weight: 600; }
.sx-tool svg, .sx-tool img { width: 20px; height: 20px; }
.sx-tool.jb { display: none; background: #3a3d40; color: var(--white); }
.sx-tool.jb.show { display: inline-flex; animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.sx-tool.jb.hot { box-shadow: 0 0 0 2px var(--white), 0 0 18px rgba(255,255,255,.35); }
.sx-body { display: grid; grid-template-columns: 190px 1fr 330px; min-height: 520px; }
.sx-left { display: flex; flex-direction: column; border-right: 1px solid #3a3d40; background: #26282a; }
.sx-panel { border-bottom: 1px solid #3a3d40; padding: 8px 10px; }
.sx-panel.grow { flex: 1; }
.sx h6 { margin: 0 0 6px; font: 800 .66rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sx-tree { list-style: none; margin: 0; padding: 0; font: 500 .74rem/1.85 var(--mono); }
.sx-tree li { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-tree .ic { width: 9px; height: 9px; border-radius: 2px; background: #6b6e71; flex: 0 0 9px; }
.sx-tree .ic.s { background: var(--soft); border-radius: 50%; }
.sx-tree .child { padding-left: 14px; display: none; color: var(--white); }
.sx-tree .child.on { display: flex; }
.sx-tree .child.fresh::after { content: "+"; color: #3fe0a4; font-weight: 800; }
.sx-props { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font: 500 .7rem var(--mono); }
.sx-props dt { color: var(--muted); } .sx-props dd { margin: 0; color: var(--soft); text-align: right; }
.sx-center { display: flex; flex-direction: column; min-width: 0; }
.sx-viewport { flex: 1; position: relative; min-height: 300px; overflow: hidden; background: linear-gradient(#8fb0c9 0%, #c9d6de 55%, #6b6e71 55.2%, #45484b 100%); }
.sx-viewport .iso { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(1.15); width: 300px; height: 230px; }
.sx-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.store-card { background: var(--white); color: var(--ink); border-radius: 14px; padding: 18px; width: min(300px, 86%); box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: pop .4s cubic-bezier(.2,1.6,.4,1); }
.store-card .sc-top { display: flex; gap: 12px; align-items: center; }
.store-card .sc-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--black); display: grid; place-items: center; }
.store-card .sc-icon img { width: 30px; }
.store-card b { display: block; font: 900 1rem var(--display); }
.store-card small { color: #6b6e71; font-size: .74rem; }
.store-card p { font-size: .8rem; color: #55585b; margin: 12px 0; }
.sc-btn { width: 100%; border: 0; border-radius: 10px; padding: 11px; font: 800 .88rem var(--font); background: var(--black); color: var(--white); box-shadow: 0 4px 0 #55585b; transition: transform .1s, box-shadow .1s, background .3s; }
.sc-btn.press { transform: translateY(3px); box-shadow: 0 1px 0 #55585b; }
.sc-btn.done { background: var(--ok); box-shadow: 0 4px 0 #008a57; }
.toast { background: var(--black); color: var(--white); padding: 12px 18px; border-radius: 12px; font-weight: 800; box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: pop .4s cubic-bezier(.2,1.6,.4,1); border: 2px solid var(--ok); }
.sx-output { height: 120px; border-top: 1px solid #3a3d40; background: #1e2022; padding: 8px 10px; display: flex; flex-direction: column; }
.sx-log { flex: 1; overflow-y: auto; font: 500 .72rem/1.7 var(--mono); color: var(--muted); }
.sx-log .ok { color: #3fe0a4; }

.sx-dock { border-left: 1px solid #3a3d40; background: var(--ink); display: flex; flex-direction: column; min-width: 0; transition: opacity .3s; }
[data-studio-tour]:not(.dock-open) .sx-dock { opacity: .55; }
.dk-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dk-brand { display: inline-flex; align-items: center; gap: 8px; font: 900 .9rem var(--display); color: var(--white); }
.dk-brand img { width: 20px; }
.dk-model { font-size: .7rem; font-weight: 700; color: var(--soft); background: var(--panel); padding: 5px 9px; border-radius: 7px; }
.dk-tokens { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .74rem; color: var(--muted); }
.dk-tokens b { color: var(--white); font-family: var(--mono); }
.dk-meter { grid-column: 1 / -1; height: 6px; background: var(--panel); border-radius: 3px; overflow: hidden; }
.dk-meter b { display: block; height: 100%; width: 100%; background: var(--white); border-radius: 3px; transition: width .3s; }
.dk-tabs { display: flex; border-bottom: 1px solid var(--line); }
.dk-tabs span { flex: 1; text-align: center; padding: 9px 4px; font-weight: 700; font-size: .74rem; color: var(--muted); border-bottom: 2px solid transparent; }
.dk-tabs span.on { color: var(--white); border-bottom-color: var(--white); }
.dk-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.dk-empty { margin: auto; text-align: center; color: var(--muted); padding: 30px 10px; }
.dk-empty b { color: var(--white); }
.dk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; animation: pop .35s ease; }
.dk-card h5 { margin: 0 0 8px; font: 800 .95rem var(--display); color: var(--white); }
.dk-card p { margin: 0 0 8px; color: var(--soft); font-size: .8rem; }
.pair { font: 800 1.7rem var(--mono); letter-spacing: .14em; text-align: center; background: var(--black); border: 1.5px dashed var(--muted); border-radius: 10px; padding: 10px; margin: 8px 0 12px; color: var(--white); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: .78rem; }
.checklist li { opacity: .35; transition: opacity .3s; }
.checklist li::before { content: "○ "; }
.checklist li.on { opacity: 1; color: var(--white); }
.checklist li.on::before { content: "✓ "; color: #3fe0a4; font-weight: 900; }
.dk-chat { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bubble { padding: 9px 12px; border-radius: 12px; font-size: .8rem; max-width: 92%; line-height: 1.45; }
.bubble.ai { background: var(--panel); color: var(--soft); border-top-left-radius: 4px; }
.bubble.you { background: var(--white); color: var(--black); align-self: flex-end; border-top-right-radius: 4px; font-weight: 600; min-height: 20px; }
.bubble.you:empty { display: none; }
.bubble.sys { font-family: var(--mono); font-size: .72rem; color: #3fe0a4; }
.starter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.starter-chips span { font-size: .7rem; font-weight: 700; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); }
.starter-chips span.on { background: var(--white); color: var(--black); border-color: var(--white); }
.dk-input { display: flex; align-items: center; gap: 8px; background: var(--black); border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 8px 12px; color: var(--muted); font-size: .78rem; }
.dk-input span { flex: 1; }
.dk-input button { border: 0; background: var(--white); color: var(--black); border-radius: 7px; width: 28px; height: 28px; font-weight: 900; }
.plan-rows { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.plan-rows li { display: flex; gap: 9px; align-items: center; background: var(--ink); border-radius: 9px; padding: 6px 8px; opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s; }
.plan-rows li.on { opacity: 1; transform: none; }
.av-mini { width: 28px; height: 28px; flex: 0 0 28px; }
.av-mini svg { width: 100%; height: 100%; }
.pr-t { font-size: .78rem; font-weight: 700; color: var(--white); line-height: 1.25; }
.pr-t small { display: block; color: var(--muted); font-weight: 500; font-size: .68rem; }
.estimate { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); padding: 8px 2px; border-top: 1px solid var(--line); }
.estimate b { color: var(--white); }
.dk-actions { display: flex; gap: 8px; margin-top: 4px; }
.dk-actions button { flex: 1; border-radius: 9px; padding: 10px; font: 800 .78rem var(--font); border: 0; cursor: default; }
.dk-actions .ghost { background: transparent; color: var(--soft); border: 1px solid var(--line); }
.dk-actions .primary { background: var(--white); color: var(--black); box-shadow: 0 3px 0 #8a8c8e; }
.dk-actions .primary:disabled { background: var(--ok); color: var(--white); box-shadow: 0 3px 0 #008a57; }
.pulse { animation: ring 1s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7), 0 3px 0 #8a8c8e; } 100% { box-shadow: 0 0 0 12px rgba(255,255,255,0), 0 3px 0 #8a8c8e; } }
.squad-lanes { display: grid; gap: 12px; }
.lane-row { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; }
.lane-row .av-mini { width: 32px; height: 32px; animation: bob 1.6s ease-in-out infinite; }
.lane-row.done .av-mini { animation: none; }
.lr-top { display: flex; justify-content: space-between; gap: 8px; font-size: .76rem; margin-bottom: 5px; }
.lr-top b { color: var(--white); }
.lr-act { color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-row.done .lr-act { color: #3fe0a4; }
.lr-bar { height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.lr-bar b { display: block; height: 100%; width: 0; background: var(--white); transition: width .25s linear; border-radius: 4px; }
.lane-row.done .lr-bar b { background: var(--ok); }
.squad-foot { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.squad-foot b { color: var(--white); font-family: var(--mono); }
.changes { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; font: 500 .72rem var(--mono); }
.changes li { display: grid; grid-template-columns: 14px 1fr auto; gap: 6px; padding: 6px 8px; background: var(--panel); border-radius: 7px; animation: pop .3s ease; }
.changes li.open { outline: 1px solid var(--muted); }
.ch-k { color: #3fe0a4; font-weight: 800; } .ch-f { color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-n { color: var(--muted); }
.mini-diff { margin: 0; background: #151618; border-radius: 8px; padding: 8px 10px; font: 500 .68rem/1.7 var(--mono); overflow-x: auto; }
.mini-diff span { display: block; white-space: pre; }
.mini-diff .a { color: #6fe3b4; } .mini-diff .c { color: #6b6e71; }
.qa-box { background: rgba(0,176,111,.14); color: #6fe3b4; border-radius: 8px; padding: 8px 10px; font-size: .76rem; font-weight: 700; }

@media (max-width: 1100px) { .sx-body { grid-template-columns: 170px 1fr 300px; } }
@media (max-width: 860px) {
  .sx-body { grid-template-columns: 1fr; }
  .sx-left { display: none; }
  .sx-viewport { min-height: 230px; }
  .sx-output { height: 90px; }
  .sx-dock { border-left: 0; border-top: 1px solid #3a3d40; }
  .sx-viewport .iso { transform: translate(-50%, -50%) scale(.9); }
}

.page-hero.compact { padding: 56px 0 28px; }
.page-hero.compact h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.page-hero.compact .lead { margin-left: auto; margin-right: auto; }
.tour-ctrl [data-play] { flex-basis: 100%; }
.hero-grid > * { min-width: 0; }

/* =====================================================================
   v3 — feature theater, scene visuals, race, alerts, simple pricing
   ===================================================================== */
.theater { display: grid; grid-template-columns: 300px 1fr; gap: 22px; margin-top: 40px; align-items: start; }
@media (max-width: 960px) { .theater { grid-template-columns: 1fr; } }
.th-tabs { display: grid; gap: 8px; }
@media (max-width: 960px) { .th-tabs { display: flex; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } }
.th-tabs button { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--ink); border: 1px solid var(--line); color: var(--soft); border-radius: 14px; padding: 12px 14px; cursor: pointer; font: inherit; transition: background .2s, border-color .2s, color .2s, transform .2s; scroll-snap-align: start; }
@media (max-width: 960px) { .th-tabs button { flex: 0 0 auto; padding: 10px 12px; } .th-tabs button small { display: none; } }
.th-tabs button:hover { border-color: #55585b; transform: translateX(3px); }
.th-tabs button.on { background: var(--white); color: var(--black); border-color: var(--white); }
.th-tabs b { display: block; font: 800 .98rem var(--font); color: inherit; }
.th-tabs small { display: block; font-size: .78rem; color: var(--muted); }
.th-tabs button.on small { color: #55585b; }
.th-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--panel); display: grid; place-items: center; transform: rotate(-6deg); }
.th-tabs button.on .th-ico { background: var(--black); color: var(--white); }
.th-ico svg { width: 18px; height: 18px; }
.th-new { font: 900 .6rem var(--font); background: var(--ok); color: var(--white); padding: 3px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 2px; letter-spacing: .06em; }
.th-main { min-width: 0; }
.th-stage, [data-fx-mount] { position: relative; background: radial-gradient(ellipse at 30% 0%, #2c2f31, var(--ink) 65%); border: 1px solid var(--line); border-radius: 20px; min-height: 430px; overflow: hidden; padding: 22px; }
@media (max-width: 560px) { .th-stage, [data-fx-mount] { padding: 14px; min-height: 0; } }
.th-cap { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: 14px; }
.th-cap p { margin: 0; color: var(--soft); font-size: 1.02rem; max-width: 560px; }
.th-cap p b { color: var(--white); }
.th-cap a { font-weight: 800; text-decoration: none; white-space: nowrap; }
.th-cap a::after { content: " →"; }

.fx { display: grid; gap: 14px; height: 100%; }
.fx-vp { position: relative; border-radius: 14px; overflow: hidden; min-height: 230px; background: linear-gradient(#8fb0c9 0%, #c9d6de 52%, #6b6e71 52.4%, #45484b 100%); }
.fx-vp .iso { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: 260px; height: 200px; }
.fx-chip { position: absolute; left: 12px; bottom: 12px; background: rgba(11,12,13,.85); color: var(--white); font: 700 .78rem var(--font); padding: 7px 11px; border-radius: 999px; backdrop-filter: blur(4px); animation: pop .35s ease; }
.fx-chip.ok { background: var(--ok); }
.fx-prompt { display: flex; gap: 10px; align-items: center; background: var(--black); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: .92rem; color: var(--white); min-height: 44px; }
.fx-prompt .pp { font: 900 .62rem var(--font); background: var(--panel-2); padding: 4px 6px; border-radius: 6px; color: var(--soft); }
.fx-tl { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; }
.tl-bar { grid-column: 1 / -1; height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.tl-bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--soft), var(--white)); transition: width .2s; }
.tl-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-steps span { font-size: .74rem; font-weight: 700; color: var(--muted); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); transition: all .25s; }
.tl-steps span.on { background: var(--white); color: var(--black); border-color: var(--white); }
.tl-time { font: 800 1.3rem var(--mono); }

/* clone */
.fx-clone { grid-template-columns: 1fr auto 1fr; align-items: center; }
@media (max-width: 640px) { .fx-clone { grid-template-columns: 1fr; } .cl-arrow { transform: rotate(90deg); justify-self: center; } }
.cl-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; gap: 10px; min-width: 0; }
.cl-card.copy { opacity: 0; transform: translateX(-40px) scale(.95); transition: opacity .5s, transform .6s cubic-bezier(.2,1.4,.4,1); border-color: var(--white); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.cl-card.copy.in { opacity: 1; transform: none; }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cl-head b { font: 800 1rem var(--display); }
.cl-head small { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cl-map { position: relative; height: 170px; border-radius: 12px; overflow: hidden; background: linear-gradient(#9fb6c6, #c9d6de 55%, #55585b 55.4%, #393b3d); }
.cl-card.orig .cl-map { filter: saturate(.3) brightness(.85); }
.cl-map .iso { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%) scale(.72); width: 260px; height: 200px; }
.cl-layers { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; justify-items: end; }
.cl-layers .layer { font: 800 .66rem var(--font); background: var(--white); color: var(--black); padding: 4px 8px; border-radius: 999px; animation: pop .35s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 2px 0 #8a8c8e; }
.cl-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cl-stats li { font: 700 .74rem var(--font); padding: 5px 9px; border-radius: 8px; transition: background .3s, color .3s; }
.cl-stats li.bad { background: rgba(229,72,77,.16); color: #ff9a9d; }
.cl-stats li.good { background: rgba(0,176,111,.18); color: #3fe0a4; animation: pop .35s ease; }
.cl-arrow { display: grid; justify-items: center; gap: 6px; color: var(--muted); font: 800 .78rem var(--font); }
.cl-arrow i { width: 46px; height: 46px; border-radius: 14px; background: var(--panel); border: 1px dashed var(--muted); position: relative; }
.cl-arrow i::after { content: "⧉"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.3rem; color: var(--soft); }
.cl-arrow.go i { background: var(--white); border: 0; animation: bob 1s ease-in-out 2; }
.cl-arrow.go i::after { color: var(--black); }
.cl-note { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--muted); font-size: .82rem; }

/* migrate */
.mg-top { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-size: .86rem; color: var(--soft); }
.mg-top b { font: 800 1.15rem var(--mono); color: var(--white); margin-left: 4px; }
.mg-hand { margin-left: auto; color: var(--muted); font-size: .8rem; }
.mg-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .mg-grid { grid-template-columns: 1fr 1fr; } }
.mg-tile { position: relative; border-radius: 14px; padding: 16px 14px; min-height: 108px; display: grid; align-content: space-between; gap: 8px; transition: background .4s, border-color .4s, transform .3s; border: 1.5px solid; }
.mg-tile small { font: 800 .68rem var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mg-tile b { font: 700 .92rem var(--mono); }
.mg-tile.bad { background: rgba(229,72,77,.08); border-color: rgba(229,72,77,.45); color: #ff9a9d; }
.mg-tile.good { background: rgba(0,176,111,.1); border-color: rgba(0,176,111,.6); color: #6fe3b4; transform: scale(1.02); }
.mg-dot { position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.mg-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--white); box-shadow: 0 0 22px 4px rgba(255,255,255,.5); opacity: 0; }
.mg-scan.go { animation: scan2 4.2s linear infinite; }
@keyframes scan2 { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: .2; } }

/* assets */
.fx-assets { grid-template-columns: 1fr 1.1fr; }
@media (max-width: 640px) { .fx-assets { grid-template-columns: 1fr; } }
.as-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.as-title { font: 800 .78rem var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.as-prompt { background: var(--black); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .88rem; color: var(--white); min-height: 42px; }
.as-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.as-tile { aspect-ratio: 1; max-width: 100%; border-radius: 12px; background: var(--ink); border: 2px solid var(--line); display: grid; place-items: center; overflow: hidden; position: relative; transition: border-color .2s, transform .2s; }
.as-tile svg { width: 78%; opacity: 0; transform: scale(.7); transition: opacity .35s, transform .45s cubic-bezier(.2,1.6,.4,1); }
.as-tile.ready svg { opacity: 1; transform: none; }
.as-tile.pick { border-color: var(--white); transform: scale(1.04); box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
.shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.as-insert { border: 0; border-radius: 10px; padding: 11px; font: 800 .86rem var(--font); background: var(--white); color: var(--black); box-shadow: 0 4px 0 #8a8c8e; cursor: default; transition: transform .1s, box-shadow .1s; }
.as-insert.press { transform: translateY(3px); box-shadow: 0 1px 0 #8a8c8e; }
.as-studio { display: grid; gap: 10px; align-content: start; min-width: 0; }
.as-drop { position: absolute; left: 50%; top: 32%; width: 92px; transform: translate(-50%, -140px); opacity: 0; }
.as-drop.go { animation: drop .7s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes drop { to { transform: translate(-50%, 0); opacity: 1; } }
.as-tree { list-style: none; margin: 0; padding: 10px 12px; background: #1e2022; border: 1px solid var(--line); border-radius: 12px; font: 500 .76rem/1.9 var(--mono); color: var(--soft); }
.as-tree .kid { padding-left: 16px; }
.as-tree .new { color: #3fe0a4; animation: pop .35s ease; }
.as-tree .new::after { content: " +"; font-weight: 800; }

/* clothing */
.fx-cloth { grid-template-columns: .9fr 1.1fr; align-items: center; }
@media (max-width: 640px) { .fx-cloth { grid-template-columns: 1fr; } }
.ct-model { position: relative; display: grid; place-items: center; padding: 10px; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #3a3d40, transparent 70%); min-height: 300px; }
.ct-model svg { width: min(180px, 70%); animation: sway 3.4s ease-in-out infinite; }
.ct-model .cloth { transition: fill .3s; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-4px); } }
.ct-spin { position: absolute; left: 10%; right: 10%; height: 3px; top: 8%; background: var(--white); box-shadow: 0 0 18px var(--white); opacity: 0; }
.ct-model.gen .ct-spin { animation: scan 1s ease-in-out; }
.ct-side { display: grid; gap: 12px; min-width: 0; }
.ct-template { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.ct-template svg { width: 100%; display: block; }
.ct-template .tpl { transition: fill .3s; }
.ct-template small { position: absolute; right: 8px; bottom: 6px; font: 700 .68rem var(--mono); color: var(--muted); }
.ct-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ct-checks li { font: 700 .74rem var(--font); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); transition: all .25s; }
.ct-checks li.on { background: rgba(0,176,111,.18); border-color: transparent; color: #3fe0a4; }
.ct-checks li.on::before { content: "✓ "; }

/* discord */
.fx-discord { grid-template-columns: 150px 1fr; gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #1e1f22; min-height: 380px; }
@media (max-width: 560px) { .fx-discord { grid-template-columns: 1fr; } .dc-side { display: none !important; } }
.dc-side { background: #17181a; padding: 14px 10px; display: grid; gap: 4px; align-content: start; font-size: .82rem; color: var(--muted); }
.dc-side b { color: var(--white); margin-bottom: 8px; font-size: .86rem; }
.dc-side span { padding: 6px 8px; border-radius: 6px; }
.dc-side span.on { background: #2c2f31; color: var(--white); }
.dc-main { display: flex; flex-direction: column; min-width: 0; }
.dc-head { padding: 10px 14px; border-bottom: 1px solid #2c2f31; font-weight: 800; font-size: .88rem; }
.dc-msgs { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 330px; }
.dc-msg { display: grid; grid-template-columns: 34px 1fr; gap: 10px; animation: pop .3s ease; font-size: .86rem; }
.dc-msg p { margin: 2px 0 0; color: #dbdee1; }
.dc-msg b { font-size: .84rem; }
.dc-av { width: 34px; height: 34px; border-radius: 50%; background: #45484b; display: grid; place-items: center; font-weight: 900; }
.dc-av.bot { background: var(--black); }
.dc-av img { width: 20px; }
.dc-msg .tag { font: 900 .58rem var(--font); background: #5865f2; color: var(--white); padding: 2px 5px; border-radius: 4px; font-style: normal; vertical-align: 1px; }
.dc-embed { margin-top: 6px; background: #2b2d31; border-left: 4px solid var(--soft); border-radius: 6px; padding: 10px 12px; display: grid; gap: 6px; }
.dc-embed.ok { border-left-color: var(--ok); }
.dc-embed.alert { border-left-color: #ffd84d; }
.dc-embed p { margin: 0; color: var(--muted); font-size: .8rem; }
.dc-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; font-size: .76rem; color: var(--soft); }
.dc-bar { height: 7px; background: #1e1f22; border-radius: 4px; overflow: hidden; }
.dc-bar b { display: block; height: 100%; width: 0; background: var(--ok); transition: width .15s; }
.dc-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-btns span { font-size: .74rem; font-weight: 700; background: #4e5058; color: var(--white); padding: 5px 10px; border-radius: 4px; }
.dc-btns span:nth-child(2) { background: var(--ok); }
.dc-input { margin: 0 14px 14px; background: #383a40; border-radius: 8px; padding: 10px 12px; color: var(--muted); font-size: .84rem; }

/* qa */
.fx-qa { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
@media (max-width: 640px) { .fx-qa { grid-template-columns: 1fr; } }
.qa-vp { min-height: 300px; }
.bots i { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; animation: wander var(--d) ease-in-out infinite alternate; }
.bots i svg { width: 100%; height: 100%; }
@keyframes wander { to { transform: translate(var(--dx), var(--dy)); } }
.qa-side { display: grid; gap: 12px; align-content: start; }
.qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qa-list li { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 12px 40px; font-weight: 700; font-size: .88rem; color: var(--muted); transition: all .25s; }
.qa-list li::before { content: ""; position: absolute; left: 13px; top: 13px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); }
.qa-list li.run { color: var(--white); border-color: var(--soft); }
.qa-list li.run::before { border-color: var(--white); border-right-color: transparent; animation: spin .7s linear infinite; }
.qa-list li.pass { color: var(--white); }
.qa-list li.pass::before { content: "✓"; border: 0; background: var(--ok); color: var(--white); font-size: .7rem; display: grid; place-items: center; }
.qa-list li.fail { color: #ff9a9d; border-color: rgba(229,72,77,.6); }
.qa-list li.fail::before { content: "!"; border: 0; background: var(--bad); color: var(--white); font-size: .7rem; display: grid; place-items: center; }
.qa-list li[data-note]::after { content: attr(data-note); display: block; font-weight: 600; font-size: .74rem; margin-top: 4px; color: var(--soft); }
@keyframes spin { to { transform: rotate(360deg); } }
.qa-loop { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--soft); }
.qa-loop i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ok); border-right-color: transparent; animation: spin 1.4s linear infinite; }

@keyframes hop { 50% { transform: translateY(-4px); } }

/* alerts feed */
.alerts { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .alerts { grid-template-columns: 1fr; } }
.phone { width: min(300px, 100%); margin: 0 auto; border-radius: 36px; border: 10px solid #2c2f31; background: linear-gradient(160deg, #3a3d40, #121314); padding: 40px 12px 20px; min-height: 0; position: relative; box-shadow: var(--shadow); }
.phone::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; border-radius: 12px; background: #0b0c0d; }
.phone .clock { text-align: center; font: 800 2.1rem var(--display); color: var(--white); margin-bottom: 18px; }
.notif { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border-radius: 16px; padding: 10px 12px; margin-bottom: 8px; color: var(--white); font-size: .8rem; opacity: 0; transform: translateY(-16px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1); }
.notif.in { opacity: 1; transform: none; }
.notif .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--white); display: grid; place-items: center; }
.notif .ic img { width: 18px; }
.notif b { display: block; font-size: .8rem; }
.notif small { color: #c7c9cb; }
.toggles { display: grid; gap: 10px; margin-top: 20px; }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: .92rem; }
.toggle small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; }
.switch { flex: 0 0 40px; width: 40px; height: 24px; border-radius: 12px; background: var(--ok); position: relative; }
.switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); }

/* simple pricing */
.plan-lite .tokens { margin: 12px 0 16px; }
.plan-lite ul { margin-bottom: 20px; }
.token-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; font-weight: 700; color: #55585b; font-size: .9rem; }

/* hero window: Studio-like (viewport + chat left, Explorer right) */
.studio { grid-template-columns: 1fr 190px; }
.studio .explorer { border-right: 0; border-left: 1px solid var(--line); }
@media (max-width: 560px) { .studio { grid-template-columns: 1fr; } }
.window-bar .mz { margin-left: 10px; font-weight: 600; color: var(--muted); word-spacing: 2px; }
.window-bar .mz u { text-decoration: none; color: var(--white); background: var(--panel-2); padding: 2px 6px; border-radius: 4px; }
@media (max-width: 700px) { .window-bar .mz { display: none; } }

.feature-row.lite { grid-template-columns: .8fr 1.2fr; }
@media (max-width: 900px) { .feature-row.lite { grid-template-columns: 1fr; } }
.feature-row.lite > * { min-width: 0; }
.feature-row.lite h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.pill-list { list-style: none; padding: 0 !important; margin: 18px 0 0; display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.pill-list li { padding: 8px 12px !important; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .86rem; font-weight: 700; color: var(--soft); }
.pill-list li::before { content: none !important; }

/* Studio tour v3: accurate Studio frame */
.sx-mezz { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: #26282a; border-bottom: 1px solid #3a3d40; padding: 6px 10px; }
.mz-play { display: flex; gap: 4px; }
.mz-play span { width: 26px; height: 24px; border-radius: 6px; background: #303234; display: grid; place-items: center; font-size: .62rem; color: var(--soft); }
.mz-play span:first-child { color: #3fe0a4; }
.sx-mezz .sx-tabs { justify-content: center; padding: 0; }
.sx-mezz .sx-tabs span { border-radius: 6px; padding: 5px 10px; }
.mz-right { display: flex; gap: 6px; align-items: center; font-size: .7rem; color: var(--soft); white-space: nowrap; }
.mz-right span { background: #303234; padding: 5px 8px; border-radius: 6px; }
.mz-av { width: 22px; height: 22px; border-radius: 50%; background: var(--soft); }
@media (max-width: 1100px) { .mz-right span:first-child, .mz-right span:nth-child(3) { display: none; } }
@media (max-width: 700px) { .sx-mezz { grid-template-columns: 1fr; } .mz-play, .mz-right { display: none; } .sx-mezz .sx-tabs { justify-content: flex-start; } }
.sx-body { grid-template-columns: 320px 1fr 180px; }
.sx-dock { border-left: 0; border-right: 1px solid #3a3d40; }
.sx-left.sx-right { border-right: 0; border-left: 1px solid #3a3d40; }
@media (max-width: 1200px) { .sx-body { grid-template-columns: 300px 1fr; } .sx-left.sx-right { display: none; } }
@media (max-width: 860px) { .sx-body { grid-template-columns: 1fr; } .sx-dock { order: 2; border-right: 0; border-top: 1px solid #3a3d40; } .sx-center { order: 1; } }
.dk-tabs span { font-size: .7rem; padding: 9px 2px; }
.sx-props-layer { position: absolute; inset: 0; pointer-events: none; }
.sx-props-layer .egg { position: absolute; width: 40px; left: calc(36% + var(--i) * 13%); top: calc(44% - var(--i) * 6%); }
.sx-props-layer .egg.drop { animation: eggdrop .6s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * .18s); }
@keyframes eggdrop { from { transform: translateY(-120px); opacity: 0; } to { transform: none; opacity: 1; } }
.dk-eggs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dk-egg { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 10px; background: var(--panel); border: 2px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.dk-egg svg { width: 56%; animation: pop .35s ease; }
.dk-egg small { position: absolute; bottom: 4px; font-size: .6rem; font-weight: 700; color: var(--muted); }
.dk-egg.pick { border-color: var(--white); }
.dk-egg.ready .shimmer { display: none; }
.dk-hint { margin: 0; font-size: .72rem; color: var(--muted); }
.as-p { color: var(--white); }
.toast.dc { border-color: #5865f2; }
.plan ul { align-content: start; }

/* =====================================================================
   Studio tour v4 — modeled on the current Roblox Studio UI
   ===================================================================== */
.tour-grid { grid-template-columns: 1fr; }
.tour-side { position: static; display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }
@media (max-width: 760px) { .tour-side { grid-template-columns: 1fr; } }
.caption { min-height: 0; }
.tour-ctrl { margin-top: 0; }
.rs { --rs-bg: #1b1c1e; --rs-bar: #232427; --rs-tool: #2a2b2e; --rs-line: #37383c; --rs-txt: #d6d7d9; --rs-dim: #8c8e92;
  background: var(--rs-bg); border: 1px solid var(--rs-line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); color: var(--rs-txt); font: 500 .8rem/1.4 var(--font); }
.rs-title { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: #161719; border-bottom: 1px solid var(--rs-line); }
.rs-title > i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.rs-title > i:nth-child(2) { background: #febc2e; } .rs-title > i:nth-child(3) { background: #28c840; }
.rs-title b { margin-left: 10px; font-size: .84rem; color: var(--rs-txt); }
.rs-conn { margin-left: auto; font: 700 .7rem var(--font); padding: 4px 10px; border-radius: 999px; background: #2a2b2e; color: var(--rs-dim); transition: all .3s; }
.rs-conn.on { background: rgba(0,176,111,.18); color: #3fe0a4; }
.rs-mezz { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--rs-bar); border-bottom: 1px solid var(--rs-line); }
.rs-play { display: flex; align-items: center; gap: 6px; }
.rs-play span { padding: 4px 6px; border-radius: 6px; color: var(--rs-txt); font-size: .7rem; }
.rs-play .rs-test { background: #2f3034; padding: 4px 10px; }
.rs-play .p { color: #4c8dff; } .rs-play .s { color: #e5484d; }
.rs-tabs { display: flex; justify-content: center; gap: 4px; overflow-x: auto; }
.rs-tabs span { padding: 5px 14px; border-radius: 7px; color: var(--rs-txt); white-space: nowrap; transition: background .2s; }
.rs-tabs span.on { background: #34353a; color: #fff; }
.rs-right { display: flex; align-items: center; gap: 8px; color: var(--rs-txt); font-size: .74rem; white-space: nowrap; }
.rs-collab { background: #2f3034; padding: 4px 10px; border-radius: 6px; font-weight: 700; }
.rs-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #6b6e71, #bdbebe); }
.rs-tools { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: var(--rs-tool); border-bottom: 1px solid var(--rs-line); overflow-x: auto; min-height: 62px; }
.rt { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; padding: 4px 6px; border-radius: 6px; font-size: .68rem; color: var(--rs-txt); white-space: nowrap; }
.rt svg { width: 22px; height: 22px; }
.rt.dim { color: var(--rs-dim); }
.rt-sep { flex: 0 0 1px; height: 40px; background: var(--rs-line); margin: 0 6px; }
.rt.jb { display: none; background: #34353a; color: #fff; }
.rt.jb img { width: 22px; height: 22px; }
.rt.jb.show { display: inline-flex; animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.rt.jb.hot { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255,255,255,.35); }
.rs-docs { display: flex; gap: 2px; padding: 4px 8px 0; background: var(--rs-bar); border-bottom: 1px solid var(--rs-line); }
.rs-docs span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px 6px 0 0; color: var(--rs-dim); font-size: .74rem; animation: pop .3s ease; }
.rs-docs span.on { background: var(--rs-bg); color: var(--rs-txt); }
.rs-body { display: grid; grid-template-columns: 1fr 200px 350px; height: 560px; }
@media (max-width: 1240px) { .rs-body { grid-template-columns: 1fr 330px; } .rs-explorer { display: none; } }
@media (max-width: 860px) { .rs-body { grid-template-columns: 1fr; height: auto; } .rs-mezz { grid-template-columns: 1fr; } .rs-play, .rs-right { display: none; } .rs-tabs { justify-content: flex-start; } }
.rs-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rs-vp { position: relative; flex: 1; min-height: 280px; overflow: hidden; background: linear-gradient(#4f86d1 0%, #8fb2df 30%, #c3d4e8 40%, #c3d4e8 40.5%, #7f8ca3 41%); }
.rs-ground { position: absolute; left: -60%; right: -60%; bottom: -12%; height: 72%; transform: perspective(420px) rotateX(60deg); transform-origin: 50% 100%;
  background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.22) 46px 48px), repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.22) 46px 48px), #7a879d; }
.rs-world { position: absolute; inset: 0; }
.rs-world .spawn { position: absolute; left: 50%; top: 66%; width: 120px; height: 46px; transform: translate(-50%, -50%); background: #e9edf3; border-radius: 6px; box-shadow: 0 6px 0 #b9c0cc; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.rs-world .spawn::after { content: "✶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: #1b2433; transform: scaleY(.45); }
.rs-world .coin { position: absolute; width: 26px; transform: translate(-50%, -50%); animation: coinspin 1.6s ease-in-out infinite; animation-delay: var(--d); transition: opacity .4s, transform .4s; filter: drop-shadow(0 6px 3px rgba(0,0,0,.25)); }
.rs-world .coin svg { width: 100%; }
.rs-world .coin.gone { opacity: 0; transform: translate(-50%, -160%) scale(.4); animation: none; }
.rs-world .coin.swap { animation: pop .5s cubic-bezier(.2,1.6,.4,1), coinspin 1.6s ease-in-out .5s infinite; }
@keyframes coinspin { 0%, 100% { transform: translate(-50%, -50%) scaleX(1); } 50% { transform: translate(-50%, -58%) scaleX(.35); } }
.rs-world .bot { position: absolute; width: 30px; left: calc(28% + var(--i) * 13%); top: 72%; animation: walk 2.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.5s); }
.rs-world .bot svg { width: 100%; }
@keyframes walk { from { transform: translate(-30px, 10px); } to { transform: translate(30px, -12px); } }
.rs-hud { position: absolute; left: 2.5%; top: 5%; background: #a3a3a3; border: 1px solid #2b2b2b; color: #1b1b1b; font: 400 .82rem Arial, sans-serif; padding: 14px 38px; animation: pop .35s ease; }
.rs-timer { position: absolute; right: 14px; top: 12px; background: rgba(11,12,13,.82); color: #fff; font: 800 1.35rem var(--mono); padding: 8px 14px; border-radius: 12px; border: 2px solid rgba(255,255,255,.2); font-variant-numeric: tabular-nums; }
.rs-output { height: 96px; border-top: 1px solid var(--rs-line); background: #18191b; padding: 6px 10px; display: flex; flex-direction: column; }
.rs-output h6 { margin: 0 0 4px; font: 800 .62rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--rs-dim); }
.sx-log .warn { color: #f5a623; }
.rs-explorer { border-left: 1px solid var(--rs-line); background: var(--rs-bg); overflow: hidden; display: flex; flex-direction: column; }
.rs-ph { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rs-line); font-weight: 700; color: var(--rs-txt); text-align: center; }
.rs-ph span { color: var(--rs-dim); font-size: .7rem; letter-spacing: .2em; }
.rs-search { margin: 6px 8px; padding: 5px 9px; border-radius: 7px; background: #2a2b2e; color: var(--rs-dim); font-size: .72rem; }
.rs-tree { list-style: none; margin: 0; padding: 2px 6px; overflow-y: auto; font-size: .76rem; line-height: 1.85; }
.rs-tree li { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--rs-txt); }
.rs-tree .tw { width: 10px; font-size: .6rem; color: var(--rs-dim); }
.rs-tree .kid { padding-left: 14px; }
.rs-tree .fresh { background: rgba(0,176,111,.16); border-radius: 5px; animation: pop .35s ease; }
.rs-tree .fresh::after { content: "+"; color: #3fe0a4; font-weight: 800; margin-left: 2px; }
.ri { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c, #8c8e92); flex: 0 0 12px; }
.ri-ws { --c: #3b82f6; border-radius: 50%; } .ri-ter { --c: #22c55e; } .ri-spawn { --c: #cbd5e1; border-radius: 50%; } .ri-part { --c: #cbd5e1; }
.ri-folder { --c: #eab308; } .ri-plr { --c: #f97316; border-radius: 50%; } .ri-light { --c: #facc15; border-radius: 50%; } .ri-mat { --c: #fb923c; }
.ri-rep { --c: #f59e0b; } .ri-remote { --c: #f97316; transform: skewX(-12deg); } .ri-module { --c: #a855f7; } .ri-sss { --c: #22c55e; border-radius: 6px 6px 3px 3px; }
.ri-script { --c: #e5e7eb; } .ri-gui { --c: #eab308; } .ri-screen { --c: #60a5fa; } .ri-sound { --c: #38bdf8; border-radius: 50%; } .ri-chat { --c: #9ca3af; border-radius: 50% 50% 50% 0; }
.ri-cam { --c: #9ca3af; } .ri-place { --c: #9ca3af; }
.rs-panel { border-left: 1px solid var(--rs-line); background: var(--rs-bg); display: flex; flex-direction: column; min-width: 0; min-height: 0; transition: opacity .3s; }
[data-studio-tour]:not(.panel-open) .rs-panel { opacity: .5; }
@media (max-width: 860px) { .rs-panel { border-left: 0; border-top: 1px solid var(--rs-line); min-height: 420px; } }
.jp-conv { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rs-line); font-size: .92rem; }
.jp-conv b { font-weight: 700; }
.jp-tok { margin-left: auto; font-size: .72rem; color: var(--rs-dim); font-family: var(--mono); }
.jp-tok b { color: #fff; font-weight: 700; }
.jp-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.jp-empty { margin: auto; text-align: center; color: var(--rs-dim); padding: 20px; }
.jp-empty b { color: #fff; }
.jp-card { background: #222326; border: 1px solid var(--rs-line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; animation: pop .3s ease; }
.jp-card h5 { margin: 0; font: 800 .9rem var(--font); color: #fff; }
.jp-card p { margin: 0; color: var(--rs-txt); font-size: .78rem; }
.jp-you { align-self: flex-end; max-width: 92%; background: #2f3034; border-radius: 12px 12px 4px 12px; padding: 9px 12px; color: #fff; font-size: .8rem; animation: pop .3s ease; }
.jp-thought { color: var(--rs-dim); font-size: .78rem; font-variant-numeric: tabular-nums; }
.jp-say { margin: 0; color: var(--rs-txt); font-size: .8rem; }
.jp-plan { border: 1px solid var(--rs-line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.jp-plan-h { font-size: .86rem; color: #fff; }
.jp-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.jp-starters span { font-size: .72rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--rs-line); color: var(--rs-txt); }
.jp-starters span.on { background: #fff; color: #000; border-color: #fff; }
.jp-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .76rem; overflow-y: auto; max-height: 330px; }
.jp-events li { display: grid; grid-template-columns: 52px 66px 1fr; gap: 6px; align-items: baseline; padding: 6px 8px; border-radius: 8px; background: #222326; animation: pop .25s ease; }
.jp-events time { font: 700 .72rem var(--mono); color: #3fe0a4; }
.jp-events b { color: #fff; font-size: .72rem; }
.jp-events li.bad { background: rgba(245,166,35,.12); } .jp-events li.bad time { color: #f5a623; }
.rs-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .76rem; }
.rs-checks li::before { content: "☐ "; color: var(--rs-dim); }
.rs-checks li.on::before { content: "☑ "; color: #4c8dff; }
.jp-ask { margin: 0 12px; border: 1px solid var(--rs-line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; }
.jp-field { color: var(--rs-dim); font-size: .8rem; min-height: 20px; }
.jp-field.typing { color: #fff; }
.jp-row { display: flex; align-items: center; gap: 10px; color: var(--rs-dim); }
.jp-mode { margin-left: auto; background: #2a2b2e; color: var(--rs-txt); padding: 3px 9px; border-radius: 7px; font-size: .72rem; font-weight: 700; }
.jp-send { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rs-line); display: grid; place-items: center; }
.jp-disc { margin: 8px 12px 10px; text-align: center; color: var(--rs-dim); font-size: .66rem; }
.rs-cmd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--rs-line); background: #161719; font: 500 .74rem var(--mono); color: #6b6e71; }
.rs-cmd span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-run { color: var(--rs-txt); font-family: var(--font); font-weight: 700; flex: 0 0 auto; }
/* MCP settings modal (modeled on Assistant Settings) */
.rs-modal { pointer-events: none; width: min(520px, 92%); background: #1f2023; border: 1px solid var(--rs-line); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; animation: pop .35s ease; }
.rs-mbar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--rs-line); }
.rs-mbar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .rs-mbar i:nth-child(2) { background: #4a4b4f; } .rs-mbar i:nth-child(3) { background: #4a4b4f; }
.rs-mbar b { margin-left: 8px; font-size: .82rem; color: var(--rs-txt); }
.rs-mbody { display: grid; grid-template-columns: 120px 1fr; min-height: 200px; }
.rs-mbody nav { display: grid; align-content: start; gap: 4px; padding: 12px 8px; border-right: 1px solid var(--rs-line); }
.rs-mbody nav span { padding: 6px 10px; border-radius: 7px; font-size: .76rem; color: var(--rs-txt); }
.rs-mbody nav span.on { background: #2f3034; }
.rs-mmain { padding: 14px; display: grid; gap: 12px; align-content: start; }
.rs-note { margin: 0; padding: 8px 10px; border: 1px solid var(--rs-line); border-radius: 8px; font-size: .7rem; color: var(--rs-dim); }
.rs-trow { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .86rem; color: #fff; }
.rs-tg { flex: 0 0 38px; width: 38px; height: 22px; border-radius: 11px; background: #4a4b4f; position: relative; transition: background .3s; }
.rs-tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .3s; }
.rs-tg.on { background: #fff; } .rs-tg.on::after { left: 19px; background: #1f2023; }
.rs-status { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--rs-dim); }
.rs-status i { width: 8px; height: 8px; border-radius: 50%; background: #6b6e71; }
.rs-status.on { color: #3fe0a4; } .rs-status.on i { background: #3fe0a4; box-shadow: 0 0 8px #3fe0a4; }
.rs-groundwrap { position: absolute; left: 0; right: 0; top: 40.5%; bottom: 0; overflow: hidden; perspective: 800px; perspective-origin: 50% 0; }
.rs-groundwrap .rs-ground { left: -80%; right: -80%; bottom: 0; top: auto; height: 1000px; transform: rotateX(56deg); transform-origin: 50% 100%; }
.jp-events li > span { min-width: 0; overflow-wrap: anywhere; }
.jp-plan .plan-rows { gap: 4px; }
.jp-plan .plan-rows li { padding: 4px 8px; }
.jp-plan .av-mini { width: 24px; height: 24px; flex-basis: 24px; }
@media (max-width: 1240px) { .rs-explorer { display: none; } }
@media (max-width: 860px) { .rs-output { display: none; } .rs-vp { min-height: 260px; } .rs-tools { min-height: 54px; } }

/* =====================================================================
   v5 — hero gallery (prompt → games appear) + demo video slot
   ===================================================================== */
.hero-visual { min-width: 0; }
.demo-video { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #000; aspect-ratio: 16 / 9; max-width: 100%; }
.demo-video video, .demo-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.dv-cap { margin: 10px 4px 0; font-size: .78rem; color: var(--muted); }
/* =====================================================================
   v6 — clip slots + "how it works" (user POV)
   ===================================================================== */
.slot { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 16px; overflow: hidden; background: #1b1c1e; border: 1px solid var(--line); }
.slot.slot-free { aspect-ratio: auto; border: 0; background: none; overflow: visible; border-radius: 0; }
.slot.has-clip, .slot-free.has-clip { aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #000; box-shadow: var(--shadow); }
.slot-free.has-clip { overflow: visible; border: 0; box-shadow: none; background: none; aspect-ratio: auto; }
.slot-free.has-clip > .clip { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #000; }
.clip, .has-clip.th-stage, .has-clip[data-fx-mount], .tour-clip { position: relative; }
.clip-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.slot > .clip { position: absolute; inset: 0; }
.th-stage.has-clip, [data-fx-mount].has-clip { padding: 0; min-height: 0; aspect-ratio: 16 / 9; }
.slot-tag { position: absolute; left: 10px; top: 10px; z-index: 5; font: 800 .72rem var(--mono); background: #ffd84d; color: #000; padding: 5px 9px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
.slot-tag.ok { background: var(--ok); color: #fff; }
.tour-stage { position: relative; }
.tour-clip { position: absolute; inset: 0; z-index: 4; border-radius: 12px; overflow: hidden; background: #000; }
.tour-clip:not([hidden]) ~ .rs { visibility: hidden; }

.how-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
@media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; } }
.how-card { display: grid; gap: 14px; min-width: 0; }
.how-text { display: flex; gap: 14px; align-items: flex-start; }
.how-n { flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--white); color: var(--black); display: grid; place-items: center; font: 900 1rem var(--display); transform: rotate(-6deg); }
.how-text h3 { margin: 4px 0 4px; font-size: 1.2rem; }
.how-text p { margin: 0; color: var(--soft); font-size: .95rem; }
.mini { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; justify-content: center; font-size: .82rem; color: #d6d7d9; --rs-line: #37383c; --rs-dim: #8c8e92; --rs-txt: #d6d7d9; }
.mini .jp-ask { margin: 0; }
.mini .jp-field { color: #fff; }
.mini-plan { justify-content: flex-start; }
.mini-plan .plan-rows { margin: 0; }
.mini-plan .plan-rows li { padding: 4px 8px; }
.mini-plan .av-mini, .mini-plan .av-mini svg { width: 24px; height: 24px; }
.mini.rs-vp { padding: 0; }
.mini-build .rs-hud { padding: 10px 26px; font-size: .74rem; }
.mini-build .rs-timer { font-size: 1.05rem; padding: 6px 11px; }
.mini-build .coin { width: 22px; }
.mini-publish .toast { align-self: center; margin-top: 4px; }
.mini-publish .changes { font-size: .7rem; }
@media (max-width: 440px) { .mini { padding: 10px; gap: 6px; font-size: .72rem; } .mini-plan .plan-rows li:nth-child(n+4) { display: none; } .mini-publish .changes li:nth-child(n+3) { display: none; } }
.mini.rs-vp { min-height: 0; }
.tour-clip .clip-video { object-fit: contain; }
.tour-grid > *, .tour-stage { min-width: 0; }

/* =====================================================================
   v7 — USP cards (pain → answer), scaled demo boxes
   ===================================================================== */
.usp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
@media (max-width: 820px) { .usp-grid { grid-template-columns: 1fr; } }
.usp-card { display: grid; grid-template-rows: auto 1fr; background: var(--ink); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; min-width: 0; transition: border-color .2s, transform .2s; }
.usp-card:hover { border-color: #55585b; transform: translateY(-3px); }
.usp-media { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.usp-body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.usp-pain { margin: 0; padding: 10px 12px; border-left: 3px solid var(--bad); background: rgba(229,72,77,.08); border-radius: 0 10px 10px 0; color: var(--soft); font-size: .86rem; font-style: italic; }
.usp-pain a { font-style: normal; font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; }
.usp-pain a:hover { color: var(--white); }
.usp-body h3 { margin: 4px 0 0; font-size: 1.15rem; }
.usp-body p { margin: 0; color: var(--soft); font-size: .95rem; }
.scale-wrap { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 30% 0%, #2c2f31, var(--ink) 65%); }
.scale-box { position: absolute; left: 0; top: 0; width: 720px; height: 405px; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.scale-box [data-fx-mount] { position: absolute; inset: 0; min-height: 0; border: 0; border-radius: 0; padding: 18px; background: none; }
/* scenes keep their desktop layout inside the fixed box, whatever the viewport */
.scale-box .fx-clone { grid-template-columns: 1fr auto 1fr; }
.scale-box .fx-assets { grid-template-columns: 1fr 1.1fr; }
.scale-box .fx-cloth { grid-template-columns: .9fr 1.1fr; }
.scale-box .ct-model { min-height: 0; }
.scale-box .ct-template svg { max-height: 190px; width: auto; margin: 0 auto; }
.scale-box .fx-qa { grid-template-columns: 1.2fr 1fr; }
.scale-box .qa-vp { min-height: 0; }
.scale-box .mg-grid { grid-template-columns: repeat(3, 1fr); }
.scale-box .fx-vp { min-height: 0; }
.scale-box .fx-create { grid-template-rows: auto 1fr auto; height: 100%; }
/* still illustrations (720×405) */
.usp-mini { position: absolute; inset: 0; padding: 26px; display: grid; gap: 14px; align-content: center; font-size: 15px; color: #d6d7d9; }
.usp-mini pre { margin: 0; background: #151618; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font: 500 14px/1.75 var(--mono); overflow: hidden; }
.usp-mini pre span { display: block; white-space: pre; }
.m-runs { grid-template-columns: 1fr 1fr; align-items: stretch; }
.mr-col { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 16px; border: 1.5px solid; }
.mr-col.bad { border-color: rgba(229,72,77,.5); background: rgba(229,72,77,.06); }
.mr-col.good { border-color: rgba(0,176,111,.6); background: rgba(0,176,111,.07); }
.mr-h { font: 800 13px var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mr-col.bad u { text-decoration: underline wavy #e5484d; text-decoration-skip-ink: none; }
.mr-x { color: #ff9a9d; font-weight: 800; }
.mr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: #6fe3b4; font-weight: 700; }
.m-inside { grid-template-columns: 220px 1fr; align-items: stretch; }
.mi-tree { position: relative; overflow: hidden; display: grid; align-content: start; gap: 4px; padding: 14px; border-radius: 14px; background: #1b1c1e; border: 1px solid var(--line); font: 500 14px var(--mono); }
.mi-tree b { font-family: var(--font); color: #fff; margin-bottom: 6px; }
.mi-tree .k { padding-left: 16px; }
.mi-tree .hot { color: #3fe0a4; }
.mi-scan { position: absolute; left: 0; right: 0; height: 26px; top: 40px; background: linear-gradient(transparent, rgba(255,255,255,.16), transparent); animation: miscan 2.4s ease-in-out infinite; }
@keyframes miscan { 0% { top: 30px; } 100% { top: 100%; } }
.mi-right { display: grid; gap: 12px; align-content: center; }
.mi-read { font: 700 14px var(--mono); color: var(--soft); }
.mi-out { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: #151618; border: 1px solid var(--line); font: 500 13px var(--mono); }
.mi-out b { font-family: var(--font); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.mi-out .e { color: #ff9a9d; } .mi-out .f { color: #ffd84d; } .mi-out .o { color: #3fe0a4; }
.mi-no { font-weight: 800; color: #fff; }
.ma-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; color: #fff; }
.snap { font: 700 13px var(--mono); color: var(--muted); background: var(--panel); padding: 5px 10px; border-radius: 8px; }
.ma-diff .d { color: #ff9a9d; } .ma-diff .a { color: #6fe3b4; }
.ma-scope { padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.06); font-weight: 700; color: #fff; }
.m-approve .dk-actions button { font-size: 15px; padding: 12px; }
.ms-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-badges span { padding: 8px 12px; border-radius: 999px; background: rgba(0,176,111,.16); color: #6fe3b4; font-weight: 800; font-size: 14px; }
.ms-badges .w { background: rgba(245,166,35,.16); color: #ffd084; }
.m-runs pre { font-size: 12.5px; }
.m-runs pre span { white-space: pre-wrap; word-break: break-word; }

/* anti-exploit scene + wide USP card */
.fx-ax { grid-template-rows: auto 1fr auto; }
.ax-top { display: flex; justify-content: space-between; align-items: center; font: 700 .82rem var(--font); color: var(--soft); }
.ax-live { color: #ff9a9d; }
.ax-top b { font: 800 1.2rem var(--mono); color: #3fe0a4; margin-left: 4px; }
.ax-main { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.scale-box .ax-main, .feature-row .ax-main { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .ax-main { grid-template-columns: 1fr; } }
.ax-vp { min-height: 220px; }
.ax-bad { position: absolute; width: 34px; height: 34px; left: 30%; top: 52%; transition: left .6s cubic-bezier(.3,1.4,.5,1), top .6s cubic-bezier(.3,1.4,.5,1); filter: drop-shadow(0 0 6px rgba(229,72,77,.9)); }
.ax-bad svg { width: 100%; height: 100%; }
.ax-bad.speed { left: 72%; transition-duration: .25s; }
.ax-bad.teleport { left: 80%; top: 30%; transition: none; }
.ax-bad.fly { top: 12%; transition-duration: 1.2s; }
.ax-bad.spam { animation: shake .15s linear infinite; }
.ax-bad.caught { left: 50%; top: 52%; transition: left .35s, top .35s; filter: drop-shadow(0 0 8px #3fe0a4); }
@keyframes shake { 50% { transform: translateX(3px); } }
.ax-ring { position: absolute; left: 50%; top: 56%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 3px solid #3fe0a4; border-radius: 50%; opacity: 0; transform: scale(.4); }
.ax-ring.on { animation: axring .7s ease-out; }
@keyframes axring { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.ax-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; overflow: hidden; }
.ax-log li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(229,72,77,.1); border: 1px solid rgba(229,72,77,.35); font-size: .78rem; animation: pop .3s ease; }
.ax-log li b { color: #ffb4b6; }
.ax-log li span { color: #3fe0a4; font-weight: 700; }
.ax-log li.dc { background: rgba(88,101,242,.15); border-color: rgba(88,101,242,.5); }
.ax-log li.dc b { color: #c7ccff; } .ax-log li.dc span { color: #fff; }
.ax-foot { font-size: .8rem; font-weight: 700; color: var(--soft); }
.usp-card.wide { grid-column: 1 / -1; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto; }
.usp-card.wide .usp-media { border-bottom: 0; border-right: 1px solid var(--line); }
.usp-card.wide .usp-body { align-content: center; padding: 24px 28px; }
@media (max-width: 820px) { .usp-card.wide { grid-template-columns: 1fr; } .usp-card.wide .usp-media { border-right: 0; border-bottom: 1px solid var(--line); } }
.feature-row.lite.flip { grid-template-columns: 1.2fr .8fr; }
@media (max-width: 900px) { .feature-row.lite.flip { grid-template-columns: 1fr; } }

/* =====================================================================
   v8 — prompt player on real Studio clips, hero demo, real-clock timeline
   ===================================================================== */
.hero-top { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px 48px; align-items: end; margin-bottom: 34px; }
.hero-top h1 { margin: 16px 0 0; }
.hero-top .lead { margin: 0 0 20px; }
@media (max-width: 900px) { .hero-top { grid-template-columns: 1fr; align-items: start; } }
.hero-visual { position: relative; max-width: 1060px; margin: 0 auto; }
.hero-poster { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.hero-note { max-width: 1060px; margin: 12px auto 0; font-size: .76rem; color: var(--muted); }

.slot.has-clip { aspect-ratio: 3 / 2; background: #000; }
.slot.usp-media.has-clip { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.usp-card.wide .slot.usp-media.has-clip { border-bottom: 0; border-right: 1px solid var(--line); }
.slot-free.has-clip { aspect-ratio: auto; background: none; overflow: visible; }
[data-fx-mount].has-clip { position: relative; aspect-ratio: 3 / 2; padding: 0; min-height: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #000; }

.pp { position: absolute; inset: 0; overflow: hidden; background: #000; color: #fff; font-family: var(--font); }
.pp-screen { position: absolute; inset: 0; overflow: hidden; }
.pp-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.pp-screen::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6)); transition: opacity .5s; pointer-events: none; }
.pp[data-state="run"] .pp-screen::after { opacity: 0; }
.pp[data-state="done"] .pp-screen::after { opacity: .5; }
.pp-tag { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; font: 700 .64rem/1 var(--mono); letter-spacing: .02em; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); padding: 5px 8px; border-radius: 6px; }
.pp-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); animation: blink 1.2s steps(1) infinite; }
.pp-chip, .pp-bar, .pp-done { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 8px; border-radius: 12px; transition: transform .4s cubic-bezier(.2,1,.3,1), opacity .3s; }
.pp-chip { background: rgba(11,12,13,.84); border: 1px solid rgba(255,255,255,.14); padding: 7px 10px; font: 600 .76rem/1.3 var(--font); transform: translateY(160%); opacity: 0; }
.pp[data-state="run"] .pp-chip { transform: none; opacity: 1; }
.pp-step { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-time { font: 800 .78rem var(--mono); color: #b6ffd9; }
.pp-dot { flex: 0 0 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ok); border-top-color: transparent; animation: spin .8s linear infinite; }
.pp-bar { background: #fff; color: #111; padding: 6px 6px 6px 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.pp[data-state="run"] .pp-bar, .pp[data-state="done"] .pp-bar { transform: translateY(160%); opacity: 0; }
.pp-logo { flex: 0 0 22px; height: 22px; border-radius: 6px; background: #111; color: #fff; display: grid; place-items: center; font: 900 .72rem var(--display); }
.pp-text { flex: 1; min-width: 0; min-height: 1.3em; font: 500 .8rem/1.3 var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-text:empty::before { content: "…"; color: #8c8e92; }
.pp[data-state="typing"] .pp-text::after { content: "▍"; animation: blink 1s steps(1) infinite; }
.pp-send { flex: 0 0 26px; height: 26px; border-radius: 8px; background: #111; color: #fff; display: grid; place-items: center; font-weight: 900; }
.pp-done { background: var(--ok); padding: 8px 12px; font: 700 .8rem/1.3 var(--font); transform: translateY(160%); opacity: 0; }
.pp-done b { flex: 0 0 auto; }
.pp[data-state="done"] .pp-done { transform: none; opacity: 1; }
.pp-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 20px; height: 20px; pointer-events: none; transition: transform .65s cubic-bezier(.3,.7,.2,1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 2l13 7.5-5.6 1.4L8 17z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.pp-cursor::after { content: ""; position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.pp-cursor.click::after { animation: ppclick .45s ease-out; }
@keyframes ppclick { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
.pp[data-state="run"] .pp-cursor, .pp[data-state="done"] .pp-cursor { opacity: 0; }
@media (max-width: 440px) { .pp-chip, .pp-bar, .pp-done { left: 7px; right: 7px; bottom: 7px; } .pp-step, .pp-text { font-size: .72rem; } }

/* hero: Studio window + JokiBlox side panel */
.pp.pp-hero { position: relative; inset: auto; overflow: hidden; background: #1e1f22; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.pp-title { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #2b2c30; border-bottom: 1px solid #37383c; font: 600 .72rem var(--font); color: #c9cacc; }
.pp-title i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .pp-title i:nth-child(2) { background: #febc2e; } .pp-title i:nth-child(3) { background: #28c840; }
.pp-title span { margin-left: 8px; }
.pp-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.pp-hero .pp-screen { position: relative; inset: auto; aspect-ratio: 960 / 684; }
.pp-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #232427; border-left: 1px solid #37383c; }
.pp-side-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #37383c; font: 800 .86rem var(--display); }
.pp-side-h .pp-logo { background: #fff; color: #111; }
.pp-side-h small { margin-left: auto; font: 600 .66rem var(--font); color: var(--ok); }
.pp-side-h small::before { content: "● "; }
.pp-feed { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 10px 12px; overflow: hidden; }
.pp-me { margin: 0 0 4px 18px; align-self: flex-end; background: #3a3b40; padding: 8px 10px; border-radius: 10px 10px 2px 10px; font-size: .74rem; line-height: 1.4; }
.pp-me:empty { display: none; }
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pp-steps li { display: none; gap: 8px; align-items: flex-start; font-size: .74rem; line-height: 1.3; color: #d6d7d9; }
.pp-steps li.on, .pp-steps li.done { display: flex; animation: ppin .35s ease-out; }
.pp-steps li::before { content: ""; flex: 0 0 10px; height: 10px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--ok); border-top-color: transparent; animation: spin .8s linear infinite; }
.pp-steps li.done::before { content: "✓"; border: 0; animation: none; color: var(--ok); font: 900 .72rem/10px var(--font); }
.pp-steps li.done { color: #9a9c9e; }
.pp-steps time { flex: 0 0 auto; font: 700 .66rem/1.5 var(--mono); color: #8c8e92; }
.pp-hero[data-state="idle"] .pp-steps li, .pp-hero[data-state="typing"] .pp-steps li { display: none; }
@keyframes ppin { from { opacity: 0; transform: translateY(6px); } }
.pp-hero .pp-bar { position: static; margin: 0 10px 10px; transform: none; opacity: 1; background: #2f3034; color: #fff; border: 1px solid #45464a; box-shadow: none; padding: 7px 7px 7px 10px; }
.pp-hero .pp-text { -webkit-line-clamp: 3; font-size: .76rem; }
.pp-hero .pp-send { background: #fff; color: #111; }
.pp-hero[data-state="typing"] .pp-bar { border-color: #fff; }
.pp-clock { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid #37383c; font: 600 .68rem var(--font); color: #8c8e92; }
.pp-clock b { font: 800 1rem var(--mono); color: #fff; }
.pp-hero[data-state="run"] .pp-clock b { color: #b6ffd9; }
.pp-hero .pp-done { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 60%) scale(.9); width: max-content; max-width: 86%; padding: 12px 16px; font-size: .9rem; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.pp-hero[data-state="done"] .pp-done { transform: translate(-50%, 50%); }
@media (max-width: 1000px) { .pp-body { grid-template-columns: minmax(0, 1fr) 220px; } }
@media (max-width: 720px) {
  .pp-body { grid-template-columns: 1fr; }
  .pp-side { border-left: 0; border-top: 1px solid #37383c; }
  .pp-feed { flex: none; height: 118px; }
  .pp-side-h { padding: 8px 12px; }
}

/* how: plan rows tick in */
.jp-plan-h { display: flex; align-items: center; gap: 8px; }
.plan-n { margin-left: auto; font: 700 .7rem var(--mono); color: var(--muted); }
.reveal.in .mini-plan .plan-rows li { animation: planin .4s both; }
.reveal.in .mini-plan .plan-rows li:nth-child(2) { animation-delay: .5s; } .reveal.in .mini-plan .plan-rows li:nth-child(3) { animation-delay: 1s; } .reveal.in .mini-plan .plan-rows li:nth-child(4) { animation-delay: 1.5s; }
@keyframes planin { from { opacity: 0; transform: translateX(-10px); } }
.plan-ok { color: var(--ok); animation: planin .4s 2.2s both; }

/* alerts: notification thumbnails from the clips */
.notif .th { width: 46px; height: 34px; object-fit: cover; border-radius: 6px; }

/* real-clock timeline */
.tl { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; position: relative; }
.tl li { min-width: 0; }
.tl a { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.tl img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); transition: transform .25s, border-color .25s; }
.tl a:hover img { transform: translateY(-3px); border-color: #6a6d70; }
.tl time { justify-self: start; font: 800 .82rem var(--mono); background: var(--white); color: var(--black); padding: 2px 7px; border-radius: 6px; }
.tl span { font-size: .8rem; color: var(--soft); line-height: 1.35; }
.js .tl.reveal li { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; }
.js .tl.reveal.in li { opacity: 1; transform: none; }
.tl.reveal.in li:nth-child(2) { transition-delay: .15s; } .tl.reveal.in li:nth-child(3) { transition-delay: .3s; } .tl.reveal.in li:nth-child(4) { transition-delay: .45s; } .tl.reveal.in li:nth-child(5) { transition-delay: .6s; } .tl.reveal.in li:nth-child(6) { transition-delay: .75s; }
.tl-note { margin: 18px 0 0; font-size: .76rem; color: var(--muted); max-width: 820px; }
.tl-note a { color: var(--muted); }
@media (max-width: 900px) { .tl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* tighter grids: 3-up USP cards, compact how-it-works */
.usp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
@media (max-width: 1080px) { .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .usp-grid { grid-template-columns: 1fr; } }
.usp-pain { font-size: .8rem; padding: 8px 10px; }
.usp-card:hover { transform: none; }
.how-grid { max-width: 940px; margin-left: auto; margin-right: auto; gap: 18px; margin-top: 32px; }
.how-card .slot { aspect-ratio: 3 / 2; }
.how-text h3 { font-size: 1.08rem; }
.how-text p { font-size: .9rem; }
.hero-visual, .hero-note { max-width: 980px; }
.pp-tag { max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-side { display: grid; gap: 14px; justify-items: end; }
.cta-clip { position: relative; width: min(100%, 340px); aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 14px 30px rgba(0,0,0,.25); transform: rotate(2deg); }
@media (max-width: 760px) { .cta-side { justify-items: start; } .cta-clip { transform: none; } }

/* phones: USP cards and steps become swipeable rows instead of a very long scroll */
.swipe-hint { display: none; }
@media (max-width: 680px) {
  .swipe-hint { display: block; margin: 22px 0 -18px; font: 700 .74rem var(--mono); color: var(--muted); text-align: center; }
  .usp-grid, .how-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-left: -20px; margin-right: -20px; padding: 0 20px 10px; scrollbar-width: none; }
  .usp-grid::-webkit-scrollbar, .how-grid::-webkit-scrollbar { display: none; }
  .usp-card, .how-card { flex: 0 0 86%; scroll-snap-align: center; }
  .js .usp-grid .reveal, .js .how-grid .reveal { opacity: 1; transform: none; }
}

/* multiplayer: crew + squad board (parallel lanes, revision rounds) */
.mp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; }
@media (max-width: 900px) { .mp { grid-template-columns: 1fr; gap: 26px; } }
.crew { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.crew li { display: grid; justify-items: center; text-align: center; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; }
.crew [data-avatar] { width: 54px; height: 54px; animation: bob 2.6s ease-in-out infinite; }
.crew li:nth-child(2n) [data-avatar] { animation-delay: .4s; } .crew li:nth-child(3n) [data-avatar] { animation-delay: .8s; }
.crew b { font: 800 .84rem var(--display); }
.crew small { color: var(--muted); font-size: .7rem; line-height: 1.25; }
.board { background: var(--black); border: 1px solid var(--line); border-radius: 20px; padding: 14px; display: grid; gap: 12px; box-shadow: var(--shadow); min-width: 0; }
.bd-head { display: flex; align-items: center; gap: 10px; }
.bd-head b { font: 800 1rem var(--display); }
.bd-ver { font: 800 .78rem var(--mono); background: var(--white); color: var(--black); padding: 2px 8px; border-radius: 6px; }
.bd-ver.pop { animation: verpop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes verpop { from { transform: scale(.6); } }
.bd-count { margin-left: auto; font: 600 .7rem var(--mono); color: var(--muted); text-align: right; }
.bd-lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bd-lanes li { display: grid; grid-template-columns: 30px 64px minmax(0, 1fr) 56px; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 10px; background: var(--ink); border: 1px solid transparent; font-size: .76rem; transition: opacity .35s ease, border-color .35s ease, background .35s ease; }
.bd-lanes li.idle { opacity: .5; }
.bd-lanes li.work { border-color: rgba(0,176,111,.55); background: #17201c; }
.bd-lanes li.work [data-avatar] { animation: hop .5s ease-in-out infinite; }
.bd-lanes [data-avatar] { width: 30px; height: 30px; }
.ln-n { font: 800 .74rem var(--display); }
.ln-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--soft); }
.ln-bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.ln-bar b { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 3px; transition: width var(--d, 1.5s) cubic-bezier(.4,0,.2,1); }
.bd-thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 214px; overflow: hidden; }
.bd-x { display: grid; gap: 6px; animation: ppin .35s ease-out; transition: opacity .35s; }
.bd-x.old { opacity: .38; }
.bd-you { justify-self: end; max-width: 88%; margin: 0; background: #3a3b40; padding: 7px 11px; border-radius: 12px 12px 3px 12px; font-size: .8rem; line-height: 1.35; }
.bd-you.caret::after { content: "▍"; animation: blink 1s steps(1) infinite; }
.bd-to { justify-self: end; font: 700 .68rem var(--mono); color: #3fe0a4; animation: ppin .3s ease-out; }
.bd-res { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 6px; animation: ppin .35s ease-out; }
.bd-res img { width: 64px; height: 43px; object-fit: cover; border-radius: 8px; }
.bd-res b { display: block; font-size: .8rem; }
.bd-res small { display: block; color: var(--muted); font-size: .7rem; }
.bd-res .v { font: 800 .74rem var(--mono); background: var(--ok); color: #fff; padding: 2px 7px; border-radius: 6px; }
.bd-res.undo .v { background: var(--warn); color: #111; }
.bd-note { margin: 0; font-size: .7rem; color: var(--muted); }
@media (max-width: 420px) { .bd-lanes li { grid-template-columns: 28px 56px minmax(0, 1fr) 36px; gap: 6px; } .crew [data-avatar] { width: 46px; height: 46px; } }

/* =====================================================================
   v9 — motion + mobile polish
   ===================================================================== */
html { -webkit-tap-highlight-color: transparent; }
.js .reveal { transform: translateY(14px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { transform: none; }
.btn { transition: transform .18s ease, background-color .2s ease, box-shadow .18s ease; }
.btn:active { transform: translateY(2px) scale(.98); }
.site-header { transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.site-header.tuck { transform: translateY(-100%); }
.pp-hero[data-state] .pp-bar { transform: none; opacity: 1; }
.pp-feed, .bd-thread { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.teaser .price .now { font: 900 2.2rem/1 var(--display); }
.usp-grid, .how-grid { overscroll-behavior-x: contain; }
.swipe-dots { display: none; }
@media (max-width: 900px) {
  .nav-links { display: flex; opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; box-shadow: 0 18px 30px rgba(0,0,0,.35);
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s; }
  .nav-links.open { display: flex; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .2s ease, transform .25s ease; }
}
@media (max-width: 680px) {
  .swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .swipe-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: width .25s ease, background-color .25s ease; }
  .swipe-dots button.on { width: 22px; background: var(--white); }
  .usp-grid, .how-grid { scroll-padding: 0 20px; }
}
@media (max-width: 640px) {
  .promo-bar { font-size: .74rem; padding: 7px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav { height: 58px; }
  .nav-links { top: 58px; }
  .brand { font-size: 1.1rem; }
  .brand-mark { width: 26px; height: 26px; }
  .lang-toggle button { padding: 11px 11px; }
  .site-header { background: rgba(25, 27, 29, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pp-tag, .notif { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .section { padding: 52px 0; }
  h2 { font-size: 1.55rem; }
  .lead { font-size: .98rem; }

  /* hero: headline → demo → pitch + CTA */
  .hero { padding: 26px 0 44px; }
  .hero > .container { display: flex; flex-direction: column; }
  .hero-top { display: contents; }
  .hero-top > :first-child { order: 1; }
  .hero-visual { order: 2; width: 100%; margin: 18px 0 0; }
  .hero-note { order: 3; }
  .hero-top > :last-child { order: 4; margin-top: 22px; }
  .hero h1 { font-size: 2.1rem; }
  .hero .btn-row { display: grid; gap: 10px; }
  .hero .btn-row .btn { width: 100%; justify-content: center; }
  .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .countdown div { min-width: 0; }
  .pp-title { height: 26px; }
  .pp-feed { height: 104px; }

  /* multiplayer */
  .bd-head { flex-wrap: wrap; row-gap: 4px; }
  .bd-count { flex-basis: 100%; margin-left: 0; text-align: left; }
  .bd-thread { height: 178px; }
  .crew { gap: 8px; }
  .crew li { padding: 8px 4px; }

  /* alerts: compact 2×2 switches, smaller phone */
  .toggles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .toggle { gap: 8px; padding: 10px; font-size: .8rem; line-height: 1.3; }
  .toggle small { display: none; }
  .toggle .switch { flex: 0 0 32px; width: 32px; height: 20px; }
  .toggle .switch::after { top: 3px; right: 3px; width: 14px; height: 14px; }
  .phone .notif:nth-of-type(n+5) { display: none; }
  .phone { width: min(280px, 100%); }

  /* pricing teaser: one compact row per plan */
  .teaser > .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 16px; }
  .teaser .tag { grid-column: 1; margin: 0; }
  .teaser .price { grid-column: 2; grid-row: 1 / span 2; margin: 0; justify-content: flex-end; }
  .teaser .price .now { font-size: 1.6rem; }
  .teaser p { grid-column: 1; margin: 2px 0 0; font-size: .84rem; }

  /* bigger tap targets */
  .faq details { padding: 2px 0; }
  .faq summary { padding: 14px 0; font-size: .98rem; }
  .site-footer { padding: 44px 0 26px; }
  .site-footer ul { gap: 0; }
  .site-footer ul a { display: inline-block; padding: 8px 0; }
  .usp-pain a { display: inline-block; padding: 3px 0; }
}
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: none; } .site-header, .nav-links { transition: none; } }
@media (max-width: 640px) {
  /* chips and the tour stepper become one swipeable line instead of 2–3 wrapped rows */
  .pill-list, .stepper { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding-left: 20px !important; padding-right: 20px !important; overscroll-behavior-x: contain; }
  .pill-list::-webkit-scrollbar, .stepper::-webkit-scrollbar { display: none; }
  .pill-list li, .stepper li { flex: 0 0 auto; white-space: nowrap; }
  .plan .desc { min-height: 0; }
}

/* hero scenario chips (tap to replay a feature in the hero player) */
.hero-chips { max-width: 980px; margin: 14px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero-chips button { background: var(--panel); color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font: 700 .84rem var(--font); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.hero-chips button:hover { color: var(--white); border-color: #55585b; }
.hero-chips button:active { transform: scale(.96); }
.hero-chips button.on { background: var(--white); color: var(--black); border-color: var(--white); }
.sources summary { cursor: pointer; font: 800 .76rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 0; }
.sources details[open] summary { margin-bottom: 8px; }
@media (max-width: 640px) {
  .hero-chips { order: 2; width: calc(100% + 40px); margin: 12px -20px 0; padding: 0 20px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .hero-chips::-webkit-scrollbar { display: none; }
  .hero-chips button { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }
}
.hero-chips, .hero-note { position: relative; z-index: 1; }

/* =====================================================================
   v10 — loading states: first paint, media skeletons, page transitions
   ===================================================================== */
/* smooth cross-fade between pages (Chrome/Edge/Safari 18+); header stays put */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.promo-bar { view-transition-name: promo-bar; }
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* above-the-fold content enters with CSS only — no waiting for scripts */
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
.hero-top > div, .hero-visual, .hero-chips, .hero-note, .page-hero .container > * { animation: enter .6s cubic-bezier(.2,.7,.2,1) both; }
.hero-top > div:nth-child(2), .page-hero .container > :nth-child(2) { animation-delay: .07s; }
.hero-visual, .page-hero .container > :nth-child(3) { animation-delay: .14s; }
.hero-chips, .page-hero .container > :nth-child(n+4) { animation-delay: .21s; }
.hero-note { animation-delay: .26s; }

/* skeleton shimmer while media loads */
@keyframes skel { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.skel, .js [data-slot]:not(.slot-ready):not(.slot-free), .pp:not(.ready) .pp-screen, .tl img, .notif .th, .bd-res img {
  background-color: #1b1c1e;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 70%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: skel 1.3s linear infinite;
}
.tl img, .notif .th, .bd-res img { animation-iteration-count: 3; }
.js [data-slot]:not(.slot-ready):not(.slot-free) > * { visibility: hidden; }
.pp-v { transition: opacity .45s ease; }
.pp:not(.ready) .pp-v { opacity: 0; }
.js img.lazy { opacity: 0; transition: opacity .45s ease; }
.js img.lazy.in { opacity: 1; }

/* clip buffering spinner */
.pp-load { position: absolute; left: 50%; top: 50%; z-index: 4; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.pp-load::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin .8s linear infinite; }
.pp.buffering .pp-load { opacity: 1; transition-delay: .25s; }

/* thin top progress bar: first load + every internal link tap */
.jb-bar { position: fixed; left: 0; top: 0; z-index: 200; height: 3px; width: 0; background: linear-gradient(90deg, var(--ok), #3fe0a4); box-shadow: 0 0 10px rgba(63,224,164,.6); opacity: 1; pointer-events: none; transition: width .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.jb-bar.go { width: 72%; transition: width 6s cubic-bezier(.1,.6,.2,1); }
.jb-bar.done { width: 100%; opacity: 0; transition: width .25s ease, opacity .35s ease .2s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .hero-top > div, .hero-visual, .hero-chips, .hero-note, .page-hero .container > * { animation: none; }
}

/* =====================================================================
   v11 — animated JokiBlox characters (full body, role actions)
   ===================================================================== */
.jbc { display: inline-block; width: 44px; line-height: 0; flex: 0 0 auto; }
.jbc svg { display: block; width: 100%; height: auto; overflow: visible; }
.jbc:not(.live), .jbc:not(.live) * { animation-play-state: paused !important; }
.ch-body { animation: chbob 2.4s ease-in-out infinite; }
.ch-eyes { transform-box: fill-box; transform-origin: center; animation: chblink 4.6s infinite; }
.ch-arm.l { transform-origin: 9.75px 33px; } .ch-arm.r { transform-origin: 38.25px 33px; }
.ch-leg.l { transform-origin: 19.25px 46px; } .ch-leg.r { transform-origin: 28.75px 46px; }
@keyframes chbob { 50% { transform: translateY(-1.5px); } }
@keyframes chblink { 0%, 94%, 100% { transform: none; } 96% { transform: scaleY(.12); } }
/* role actions */
.act-wave .ch-arm.r { animation: chwave 1.1s ease-in-out infinite; }
@keyframes chwave { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-118deg); } }
.act-hammer .ch-arm.r { animation: chhammer .75s cubic-bezier(.5,0,.4,1) infinite; }
@keyframes chhammer { 0%, 100% { transform: rotate(-75deg); } 50% { transform: rotate(12deg); } }
.act-hammer .ch-body { animation: chbob .75s ease-in-out infinite; }
.act-type .ch-arm.l { animation: chtypeL .32s ease-in-out infinite alternate; }
.act-type .ch-arm.r { animation: chtypeR .32s ease-in-out infinite alternate-reverse; }
@keyframes chtypeL { from { transform: rotate(-24deg); } to { transform: rotate(-34deg); } }
@keyframes chtypeR { from { transform: rotate(24deg); } to { transform: rotate(34deg); } }
.act-scan .ch-arm.r { animation: chscan 2.2s ease-in-out infinite; }
.act-scan .ch-head { transform-origin: 24px 30px; animation: chlook 2.2s ease-in-out infinite; }
@keyframes chscan { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(-85deg); } }
@keyframes chlook { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.act-point .ch-arm.r { animation: chpoint 1.8s ease-in-out infinite; }
@keyframes chpoint { 0%, 100% { transform: rotate(-112deg); } 50% { transform: rotate(-100deg); } }
.act-paint .ch-arm.r { animation: chpaint 1.5s ease-in-out infinite; }
.act-paint .ch-arm.l { transform: rotate(-30deg); }
@keyframes chpaint { 0%, 100% { transform: rotate(-58deg); } 25% { transform: rotate(-78deg); } 50% { transform: rotate(-52deg); } 75% { transform: rotate(-72deg); } }
.act-block .ch-arm.l { animation: chblock 2.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes chblock { 0%, 35%, 100% { transform: rotate(-8deg); } 45%, 80% { transform: rotate(-62deg); } }
.act-walk .ch-leg.l, .act-walk .ch-arm.r { animation: chswingA .45s ease-in-out infinite alternate; }
.act-walk .ch-leg.r, .act-walk .ch-arm.l { animation: chswingB .45s ease-in-out infinite alternate; }
.act-walk .ch-body { animation: chbob .45s ease-in-out infinite; }
@keyframes chswingA { from { transform: rotate(20deg); } to { transform: rotate(-20deg); } }
@keyframes chswingB { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.act-cheer .ch-body { animation: chjump .8s cubic-bezier(.3,0,.3,1) infinite; }
.act-cheer .ch-arm.l { animation: chcheerL .4s ease-in-out infinite alternate; }
.act-cheer .ch-arm.r { animation: chcheerR .4s ease-in-out infinite alternate; }
.act-cheer .ch-shadow { animation: chshadow .8s cubic-bezier(.3,0,.3,1) infinite; transform-origin: 24px 65.5px; }
@keyframes chjump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
@keyframes chcheerL { from { transform: rotate(140deg); } to { transform: rotate(165deg); } }
@keyframes chcheerR { from { transform: rotate(-140deg); } to { transform: rotate(-165deg); } }
@keyframes chshadow { 40% { transform: scale(.6); opacity: .15; } }
/* a one-off hop when a character is called up (hero chips) */
.jbc.hop svg { animation: chhop .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes chhop { 40% { transform: translateY(-12px) rotate(-6deg); } }

/* hero: the crew stands on the Studio window */
.hero-crew { position: relative; z-index: 2; max-width: 980px; margin: 0 auto -5px; padding-left: 22px; display: flex; align-items: flex-end; gap: 4px; animation: enter .6s cubic-bezier(.2,.7,.2,1) .1s both; }
.hero-crew .jbc { width: 38px; transition: opacity .3s ease, filter .3s ease; }
.hero-crew .jbc:not(.called) { opacity: .55; filter: saturate(.6); }
.hero-top { margin-bottom: 14px; }

/* section mascots peek over section headers without taking space */
.section > .container { position: relative; }
.mascot { position: absolute; top: -30px; right: 8px; width: 46px; z-index: 2; }
.mascot.left { right: auto; left: 8px; }
.cta-crew { position: absolute; top: -50px; right: 48px; z-index: 2; display: flex; gap: 2px; }
.cta-crew .jbc { width: 40px; }
.cta-crew .jbc:nth-child(2) svg { animation-delay: .2s; }
.page-crew { display: flex; justify-content: center; gap: 6px; margin: 0 0 6px; }
.page-crew .jbc { width: 40px; }
.jbc.inline { width: 26px; margin: -14px 6px -6px 0; vertical-align: bottom; }
.crew .jbc { width: 40px; margin-bottom: 2px; }
.wl-cheer { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.wl-cheer .jbc { width: 36px; }
.wl-cheer .jbc:nth-child(2) .ch-body { animation-delay: .15s; } .wl-cheer .jbc:nth-child(3) .ch-body { animation-delay: .3s; }
.lost { position: relative; height: 70px; max-width: 360px; margin: 0 auto 10px; }
.lost .jbc { position: absolute; left: 0; bottom: 0; width: 44px; animation: wander 7s linear infinite; }
@keyframes wander { 0% { left: 0; transform: none; } 48% { left: calc(100% - 44px); transform: none; } 50% { left: calc(100% - 44px); transform: scaleX(-1); } 98% { left: 0; transform: scaleX(-1); } 100% { left: 0; transform: none; } }

/* loading bar runner */
.jb-runner { position: absolute; right: -10px; top: 2px; width: 16px; transition: opacity .2s ease; }
.jb-bar.done .jb-runner { opacity: 0; }

@media (max-width: 640px) {
  .hero-crew { order: 2; margin: 14px 0 -5px; padding-left: 14px; }
  .hero-crew .jbc { width: 32px; }
  .hero-visual { margin-top: 0; }
  .mascot { width: 36px; top: -26px; right: 0; }
  .cta-crew { top: -42px; right: 16px; }
  .cta-crew .jbc { width: 34px; }
}
@media (prefers-reduced-motion: reduce) { .jbc *, .jbc svg, .lost .jbc { animation: none !important; } }
.eyebrow:has(.jbc)::before { display: none; }

/* Roblox-style "Disconnected" kick/ban dialog over a frozen game (anti-exploit clip) */
.pp-kick { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.pp.kicked .pp-kick { opacity: 1; }
.pp.kicked .pp-v { filter: grayscale(.5) brightness(.65); transition: filter .3s ease; }
.pp.kicked .pp-chip { opacity: 0; }
.kick-box { position: relative; width: min(80%, 360px); background: #393b3d; border-radius: 8px; padding: 12px 14px; text-align: center; color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.55); transform: scale(.88); transition: transform .35s cubic-bezier(.2,1.5,.4,1); }
.pp.kicked .kick-box { transform: none; }
.kick-box h4 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.35); font: 700 .92rem/1.2 var(--font); letter-spacing: 0; }
.kick-box p { margin: 0 0 10px; font: 500 .7rem/1.4 var(--font); color: #e3e5e7; }
.kick-leave { display: block; background: #fff; color: #111; border-radius: 6px; padding: 6px; font: 600 .78rem var(--font); }
.kick-guard { position: absolute; right: -16px; bottom: -14px; width: 34px; }
.pp-hero .kick-box { width: min(62%, 420px); padding: 16px 18px; }
.pp-hero .kick-box h4 { font-size: 1.1rem; }
.pp-hero .kick-box p { font-size: .84rem; }
.pp-hero .kick-leave { padding: 8px; font-size: .88rem; }
@media (max-width: 440px) { .kick-box { width: 86%; padding: 9px 10px; } .kick-box h4 { font-size: .82rem; margin-bottom: 6px; padding-bottom: 6px; } .kick-box p { font-size: .62rem; margin-bottom: 7px; } .kick-leave { padding: 4px; font-size: .7rem; } .kick-guard { width: 28px; } }

/* =====================================================================
   v12 — JokiBlox mark: J of blocks + AI spark (the next block being placed)
   ===================================================================== */
.jb-mark { display: block; overflow: visible; }
.jb-mark .bm-spark { transform-box: fill-box; transform-origin: center; }
.brand .jb-mark .bm-j { animation: bmJ .7s cubic-bezier(.2,1.3,.4,1) both; }
.brand .jb-mark .bm-spark { animation: bmIn .8s cubic-bezier(.2,1.5,.4,1) .25s both, bmTwinkle 7s ease-in-out 2s infinite; }
.brand:hover .jb-mark .bm-spark { animation: bmSpin .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes bmJ { from { transform: translateY(14px); opacity: 0; } }
@keyframes bmIn { from { transform: scale(0) rotate(-90deg); } }
@keyframes bmTwinkle { 0%, 88%, 100% { transform: none; } 92% { transform: scale(1.3) rotate(45deg); } 96% { transform: scale(.85) rotate(90deg); } }
@keyframes bmSpin { to { transform: rotate(180deg) scale(1.15); } }
.pp-logo { padding: 4px; }
.pp-logo .jb-mark { width: 100%; height: 100%; }
.notif .ic { background: none; }
.notif .ic img { width: 30px; height: 30px; border-radius: 8px; }
.site-header .brand, .site-footer .brand { gap: 9px; }
@media (prefers-reduced-motion: reduce) { .jb-mark * { animation: none !important; } }