/* GuideSand — AI Interactive Sandbox Platform
 Sandbox Orange · Guide Indigo · Canvas Cream · Action Mint */

:root {
 --orange: #F47A3C; /* Sandbox Orange - home/brand bg */
 --indigo: #18204F; /* Guide Indigo - dark/footer */
 --cream: #FFF2DF; /* Canvas Cream - forms/pricing */
 --mint: #56E6BA; /* Action Mint - primary CTA */
 --blue: #4D67FF; /* Interface Blue */
 --task: #F8E45C; /* Task Yellow */
 --ai: #A67CFF;
 --ok: #27B981;
 --wait: #F3AF43;
 --err: #EF5265;
 --card-d: #222B65;
 --card-l: #FFFBF4;
 --border-d: #394681;
 --border-l: #DFC6A6;
 --title-d: #FFF9F0;
 --title-l: #1C2345;
 --body-d: #D7DCF8;
 --body-l: #655F65;
 --sans: "Outfit", "Segoe UI", sans-serif;
 --mono: "IBM Plex Mono", ui-monospace, monospace;
 --content: min(1180px, calc(100% - 48px));
 --header-h: 64px;
 --r: 10px;
 --r-lg: 16px;
 --r-pill: 999px;
 --shadow: 0 16px 40px rgba(24, 32, 79, 0.18);
 --shadow-float: 0 10px 28px rgba(24, 32, 79, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--sans);
 color: var(--title-l);
 background: var(--cream);
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3, h4 {
 font-family: var(--sans); font-weight: 700; line-height: 1.2;
 margin: 0; letter-spacing: -0.02em; color: inherit;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select {
 font: inherit; width: 100%; border: 1.5px solid var(--border-l);
 border-radius: 8px; padding: 10px 12px; background: var(--card-l); color: var(--title-l);
}
input::placeholder, textarea::placeholder { color: #8a8290; opacity: 1; }
input:focus, textarea:focus, select:focus {
 outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
label {
 display: flex; flex-direction: column; gap: 6px;
 font-weight: 600; font-size: 0.92rem; margin-bottom: 12px; color: var(--title-l);
}
[hidden] { display: none !important; }
code, .mono-label { font-family: var(--mono); }
.mono-label {
 display: block; font-size: 0.68rem; font-weight: 600;
 letter-spacing: 0.07em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px;
}

/* ——— Shell ——— */
.site-shell { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
[data-site-header], [data-site-footer] { display: contents; }
.container { width: var(--content); margin: 0 auto; }
#sandbox, #docs { scroll-margin-top: calc(var(--header-h) + 96px); }

/* ——— Announce bar ——— */
.announce-bar {
 width: 100%;
 background: var(--indigo);
 color: var(--body-d);
 font-size: 0.84rem;
 pointer-events: auto;
 border-bottom: 1px solid var(--border-d);
}
.announce-bar-inner {
 width: var(--content);
 margin: 0 auto;
 padding: 9px 0;
 text-align: center;
}
.announce-text {
 margin: 0;
 color: #D7DCF8;
 line-height: 1.45;
}
.announce-cta {
 color: var(--mint);
 font-weight: 700;
 margin-left: 6px;
 white-space: nowrap;
}
.announce-cta:hover { color: #fff; text-decoration: none; }

/* ——— Cream floating header ——— */
.site-top {
 position: sticky; top: 0; z-index: 60;
 padding: 0 0 12px; pointer-events: none;
}
.site-header {
 background: transparent; border: none;
 width: var(--content); margin: 12px auto 0; pointer-events: auto;
}
.header-inner.header-float {
 display: flex; align-items: center; gap: 12px;
 min-height: var(--header-h);
 padding: 8px 14px 8px 16px;
 background: var(--card-l);
 border: 1.5px solid var(--border-l);
 border-radius: var(--r-pill);
 box-shadow: var(--shadow-float);
 width: 100%;
}
.brand {
 display: flex; align-items: center; gap: 10px;
 color: var(--title-l); text-decoration: none; flex-shrink: 0;
}
.brand:hover { text-decoration: none; color: var(--title-l); }
.logo-mark { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; }
.logo-mark svg { width: 34px; height: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-text strong { font-size: 1.05rem; font-weight: 800; color: var(--indigo); }
.brand-text span { font-size: 0.62rem; color: var(--body-l); max-width: 26ch; font-weight: 500; }

.nav-main { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-left: auto; }
.nav-link {
 font-size: 0.8rem; font-weight: 600; color: var(--body-l);
 text-decoration: none; padding: 4px 2px; white-space: nowrap;
}
.nav-link:hover, .nav-link.is-active { color: var(--indigo); text-decoration: none; }
.nav-link.is-active {
 font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em;
 color: var(--orange);
}
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-toggle {
 display: none; font-size: 1.25rem; padding: 4px 8px;
 color: var(--indigo); border-radius: 8px;
}
.nav-toggle:hover { background: rgba(244, 122, 60, 0.12); }
.mobile-nav {
 display: none; flex-direction: column; gap: 8px;
 margin-top: 8px; padding: 14px 16px;
 background: var(--card-l); border: 1.5px solid var(--border-l);
 border-radius: var(--r-lg); box-shadow: var(--shadow-float);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
 font-weight: 600; color: var(--title-l); text-decoration: none; padding: 4px 0;
}

.user-menu { position: relative; }
.user-avatar {
 width: 34px; height: 34px; border-radius: 50%;
 background: var(--mint); color: var(--indigo); font-size: 0.72rem; font-weight: 800;
}
.user-dropdown {
 display: none; position: absolute; right: 0; top: calc(100% + 10px);
 min-width: 220px; background: var(--card-l); border: 1.5px solid var(--border-l);
 border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; flex-direction: column;
 color: var(--title-l);
}
.user-dropdown.is-open { display: flex; }
.user-dropdown a, .user-dropdown button {
 text-align: left; padding: 8px 10px; border-radius: 8px;
 font-size: 0.88rem; font-weight: 600; color: var(--title-l); text-decoration: none;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--cream); }
.user-workspace-label {
 font-size: 0.7rem; color: var(--body-l); padding: 6px 10px 10px;
 border-bottom: 1px solid var(--border-l); margin-bottom: 4px; font-family: var(--mono);
}

/* ——— Buttons ——— */
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 6px;
 padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 0.9rem;
 text-decoration: none; border: 1.5px solid transparent;
 transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--mint); color: var(--indigo); }
.btn-primary:hover { background: #6eecc6; color: var(--indigo); }
.btn-line {
 background: transparent; border-color: var(--indigo); color: var(--indigo);
}
.section--orange .btn-line, .page-hero--orange .btn-line, .home-hero--orange .btn-line {
 border-color: rgba(255, 249, 240, 0.75); color: var(--title-d);
}
.section--indigo .btn-line, .page-hero--indigo .btn-line {
 border-color: var(--mint); color: var(--mint);
}
.btn-ghost {
 background: transparent; color: var(--title-l);
 border-color: rgba(28, 35, 69, 0.28);
}
.section--orange .btn-ghost, .page-hero--orange .btn-ghost, .home-hero--orange .btn-ghost {
 color: var(--title-d); border-color: rgba(255, 249, 240, 0.45);
}
.section--indigo .btn-ghost, .page-hero--indigo .btn-ghost {
 color: var(--title-d); border-color: rgba(215, 220, 248, 0.35);
}
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #e86a2c; color: #fff; }
.btn-sm { padding: 7px 12px; font-size: 0.82rem; }
.btn-lg { padding: 12px 20px; font-size: 0.95rem; }
.linkish { color: var(--blue); font-weight: 700; text-decoration: underline; }

/* ——— Typography helpers ——— */
.kicker {
 display: inline-flex; font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
 letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange);
}
.section--orange .kicker, .page-hero--orange .kicker, .home-hero--orange .kicker {
 color: var(--task);
}
.section--indigo .kicker, .page-hero--indigo .kicker { color: var(--mint); }
.lead { color: var(--body-l); max-width: 54ch; }
.section--orange .lead, .page-hero--orange .lead, .home-hero--orange .lead,
.section--indigo .lead, .page-hero--indigo .lead { color: var(--body-d); }
.hint-line { font-family: var(--mono); font-size: 0.76rem; color: var(--blue); margin-top: 10px; }
.mt-s { margin-top: 8px; }
.mt-m { margin-top: 20px; }

/* ——— Sections ——— */
.section { padding: 64px 0; }
.section--cream { background: var(--cream); color: var(--title-l); }
.section--orange {
 background:
 radial-gradient(ellipse 55% 45% at 85% 15%, rgba(248, 228, 92, 0.22), transparent 55%),
 radial-gradient(ellipse 40% 50% at 5% 90%, rgba(86, 230, 186, 0.14), transparent 50%),
 var(--orange);
 color: var(--title-d);
}
.section--indigo {
 background:
 radial-gradient(ellipse 50% 40% at 10% 0%, rgba(77, 103, 255, 0.18), transparent 50%),
 radial-gradient(ellipse 40% 45% at 100% 80%, rgba(166, 124, 255, 0.12), transparent 45%),
 var(--indigo);
 color: var(--title-d);
}
.sec-head { margin-bottom: 28px; max-width: 50rem; }
.sec-head h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin: 8px 0 10px; }
.page-hero { padding: 40px 0 28px; }
.page-hero--orange {
 background:
 radial-gradient(ellipse 50% 40% at 70% 0%, rgba(248, 228, 92, 0.2), transparent 50%),
 var(--orange);
 color: var(--title-d);
}
.page-hero--indigo {
 background:
 linear-gradient(160deg, rgba(77, 103, 255, 0.16), transparent 45%),
 var(--indigo);
 color: var(--title-d);
}
.page-hero--cream { background: var(--cream); color: var(--title-l); }
.page-hero-inner h1 {
 font-size: clamp(1.8rem, 3.5vw, 2.55rem); margin: 10px 0 12px; max-width: 22ch;
}
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cta-band { max-width: 42rem; }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.how-grid {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.how-grid li {
 padding: 14px 16px; border-radius: var(--r);
 background: var(--card-l); border: 1px solid var(--border-l);
 font-size: 0.9rem; color: var(--title-l);
}
.section--indigo .how-grid li, .section--orange .how-grid li {
 background: var(--card-d); border-color: var(--border-d); color: var(--body-d);
}
.section--indigo .how-grid li b, .section--orange .how-grid li b { color: var(--title-d); }

/* ——— File field (English) ——— */
.file-field { display: block; margin-top: 6px; }
.file-field input[type="file"] {
 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.file-field-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.file-field-btn {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 0.85rem;
 background: var(--cream); border: 1.5px solid var(--border-l); color: var(--title-l);
}
.file-field-btn:hover { border-color: var(--orange); color: var(--indigo); }
.file-field-name {
 font-size: 0.85rem; color: var(--body-l); font-weight: 500;
 max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.section--indigo .file-field-btn {
 background: var(--card-d); border-color: var(--border-d); color: var(--title-d);
}
.section--indigo .file-field-name { color: var(--body-d); }

/* ——— Footer indigo ——— */
.site-footer {
 background: var(--indigo); color: var(--body-d); margin-top: auto; padding: 48px 0 0;
}
.footer-grid {
 width: var(--content); margin: 0 auto;
 display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-bottom: 36px;
}
.footer-col h4 {
 font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
 text-transform: uppercase; color: var(--mint); margin-bottom: 12px;
}
.footer-col a {
 color: #a8b0d8; text-decoration: none; font-size: 0.9rem; display: block; padding: 4px 0;
}
.footer-col a:hover { color: #fff; }
.footer-bar { border-top: 1px solid var(--border-d); padding: 20px 0 28px; }
.footer-tag { font-size: 0.88rem; max-width: 48rem; margin-bottom: 14px; color: #8b94bc; }
.footer-bar-inner {
 display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
 font-size: 0.82rem; color: #7a84ad;
}
.footer-legal { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-legal a { color: var(--mint); text-decoration: none; }

/* ——— Keyword chips (readable on orange) ——— */
.keyword-strip, .home-keywords, .keyword-row {
 display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; list-style: none; padding: 0;
}
.home-hero-head .home-keywords,
.home-hero-head .keyword-strip { justify-content: center; }
.keyword-strip li, .home-keywords li, .keyword-row li {
 font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
 letter-spacing: 0.06em; text-transform: uppercase;
 padding: 6px 12px; border-radius: var(--r-pill);
 background: var(--cream); color: var(--indigo);
 border: 1px solid rgba(255, 249, 240, 0.35);
}
.section--cream .keyword-strip li,
.section--cream .keyword-row li,
.page-hero--cream .keyword-strip li,
.about-layout .keyword-row li {
 background: rgba(244, 122, 60, 0.12); color: var(--indigo);
 border-color: rgba(244, 122, 60, 0.35);
}
.section--indigo .keyword-strip li,
.section--indigo .keyword-row li {
 background: rgba(86, 230, 186, 0.14); color: var(--mint);
 border-color: rgba(86, 230, 186, 0.35);
}

/* ——— Tags ——— */
.tag {
 font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
 padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em; white-space: nowrap;
}
.tag--ok { background: rgba(39, 185, 129, 0.18); color: var(--ok); }
.tag--warn { background: rgba(243, 175, 67, 0.2); color: #b06e10; }
.tag--err, .tag--miss { background: rgba(239, 82, 101, 0.18); color: var(--err); }
.tag--ai { background: rgba(166, 124, 255, 0.18); color: #6b3fd4; }
.tag--task { background: rgba(248, 228, 92, 0.35); color: #6a5a00; }
.tag--blue { background: rgba(77, 103, 255, 0.16); color: var(--blue); }
.section--indigo .tag--warn { color: var(--wait); }
.section--indigo .tag--ai { color: var(--ai); }
.section--indigo .tag--task { color: var(--task); }

/* ========== HOME: sandbox stage ========== */
.home-hero--orange {
 background:
 radial-gradient(ellipse 50% 40% at 50% 0%, rgba(248, 228, 92, 0.25), transparent 55%),
 radial-gradient(ellipse 35% 45% at 100% 70%, rgba(86, 230, 186, 0.16), transparent 45%),
 var(--orange);
 color: var(--title-d); padding: 28px 0 52px;
}
.home-hero-head { text-align: center; margin-bottom: 28px; }
.home-brand {
 font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; margin: 0 0 6px;
 color: var(--title-d); letter-spacing: -0.025em;
}
.home-hero-head h1 {
 font-size: clamp(1.65rem, 3.6vw, 2.45rem); max-width: 18ch;
 margin: 10px auto 14px; line-height: 1.18;
}
.home-hero-head .lead { margin: 0 auto 8px; color: rgba(255, 249, 240, 0.92); }
.home-hero-head .page-hero-actions { justify-content: center; }
.home-session-actions { max-width: 720px; margin-left: auto; margin-right: auto; }

.home-pain-grid {
 display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px;
}
.home-pain-grid article {
 padding: 18px 16px; border-radius: var(--r);
 background: var(--card-d); border: 1px solid var(--border-d); color: var(--body-d);
}
.home-pain-grid b { display: block; color: var(--mint); margin-bottom: 8px; font-size: 0.95rem; }
.home-pain-grid p { margin: 0; font-size: 0.88rem; line-height: 1.55; }

.home-anatomy {
 display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.home-anatomy span {
 padding: 10px 14px; border-radius: 8px; font-weight: 700; font-size: 0.86rem;
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--indigo);
}

.home-path {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px;
}
.home-path-step {
 display: block; padding: 18px 16px; border-radius: var(--r);
 background: var(--card-d); border: 1px solid var(--border-d);
 color: var(--body-d); text-decoration: none;
 transition: border-color 0.15s, transform 0.15s;
}
.home-path-step:hover {
 border-color: var(--mint); transform: translateY(-2px); text-decoration: none; color: var(--body-d);
}
.home-path-step em {
 display: block; font-family: var(--mono); font-style: normal; font-size: 0.68rem;
 color: var(--orange); letter-spacing: 0.06em; margin-bottom: 6px;
}
.home-path-step b { display: block; color: var(--title-d); margin-bottom: 6px; font-size: 1.05rem; }
.home-path-step p { margin: 0; font-size: 0.86rem; }

.home-audience {
 display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 18px;
}
.home-audience li {
 padding: 14px 16px; border-radius: 8px;
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--body-l);
}
.home-audience b { color: var(--indigo); }
.home-diff {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.home-diff > div {
 padding: 16px; border-radius: var(--r);
 background: var(--card-l); border: 1px solid var(--border-l);
}
.home-diff b { display: block; color: var(--orange); margin-bottom: 6px; }
.home-diff p { margin: 0; font-size: 0.88rem; color: var(--body-l); }

/* Home sandbox readability */
.sandbox-stage .mono-label { color: #FFB38A; }
.sandbox-stage .guide-goal .kicker { color: var(--task); }
.sandbox-stage .guide-goal strong { color: #7FF0C8; font-size: 1rem; }
.sandbox-stage .data-source-strip { color: #E8ECFF; }
.sandbox-stage .data-source-strip li b { color: #7FF0C8; }
.sandbox-stage .guide-panel .mono-label { color: #FFB38A; }
.sandbox-stage .guide-panel p { color: #E8ECFF; font-size: 0.92rem; }
.sandbox-stage .field-hint { color: #C5CCF0; }
.sandbox-stage .report-canvas h3 { color: var(--title-d); }
.sandbox-stage .report-canvas > .mono-label { color: #FFB38A; }
.sandbox-stage .drop-zone span { color: #C5CCF0; }
.sandbox-stage .drop-zone em { color: var(--title-d); }
.sandbox-stage .canvas-preview p { color: #E8ECFF; }

.sandbox-stage {
 position: relative;
 border: 1.5px solid rgba(28, 35, 69, 0.18);
 border-radius: var(--r-lg);
 background: var(--indigo);
 overflow: hidden;
 box-shadow: var(--shadow);
 color: var(--title-d);
}
.guide-ribbon {
 display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
 gap: 10px; padding: 12px 18px;
 background: linear-gradient(90deg, rgba(86, 230, 186, 0.16), rgba(77, 103, 255, 0.12));
 border-bottom: 1px solid var(--border-d);
 font-family: var(--mono); font-size: 0.78rem;
}
.guide-ribbon-goal { color: var(--mint); font-weight: 700; }
.guide-ribbon-meta { color: var(--body-d); }
.guide-ribbon-meta em { font-style: normal; color: var(--task); }

.product-frame {
 display: grid; grid-template-columns: 220px 1fr; min-height: 420px;
}
.field-list {
 padding: 14px; border-right: 1px solid var(--border-d);
 background: rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; gap: 8px;
}
.field-list h3 {
 font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
 text-transform: uppercase; color: var(--body-d); font-weight: 600; margin-bottom: 4px;
}
.field-chip {
 display: flex; align-items: center; justify-content: space-between; gap: 8px;
 padding: 10px 12px; border-radius: 8px; text-align: left;
 background: var(--card-d); border: 1px solid var(--border-d);
 color: var(--title-d); font-weight: 600; font-size: 0.88rem;
 transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.field-chip:hover { border-color: var(--blue); transform: translateX(2px); }
.field-chip.is-selected { border-color: var(--mint); background: rgba(86, 230, 186, 0.12); }
.field-chip.is-wrong { border-color: var(--err); background: rgba(239, 82, 101, 0.12); }
.field-chip.is-correct { border-color: var(--ok); background: rgba(39, 185, 129, 0.12); }
.field-chip small {
 font-family: var(--mono); font-size: 0.62rem; color: var(--body-d); font-weight: 500;
}

.report-canvas {
 padding: 18px; display: flex; flex-direction: column; gap: 12px;
 background:
 linear-gradient(90deg, rgba(57, 70, 129, 0.35) 1px, transparent 1px) 0 0 / 28px 28px,
 linear-gradient(rgba(57, 70, 129, 0.35) 1px, transparent 1px) 0 0 / 28px 28px,
 #1a2458;
}
.report-canvas-bar {
 display: flex; justify-content: space-between; align-items: center;
 padding: 10px 14px; border-radius: 8px;
 background: var(--card-d); border: 1px solid var(--border-d); font-weight: 700;
}
.report-canvas-bar span { font-family: var(--mono); font-size: 0.7rem; color: var(--mint); }
.drop-zones {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1;
}
.drop-zone {
 min-height: 120px; padding: 14px; border-radius: 10px;
 border: 2px dashed var(--border-d); background: rgba(34, 43, 101, 0.55);
 display: flex; flex-direction: column; gap: 8px;
}
.drop-zone.is-filled { border-style: solid; border-color: var(--mint); }
.drop-zone.is-warn { border-color: var(--err); background: rgba(239, 82, 101, 0.08); }
.drop-zone-label {
 font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.05em;
 text-transform: uppercase; color: var(--body-d);
}
.drop-zone-value { font-weight: 700; font-size: 0.95rem; color: var(--title-d); }
.sandbox-warn {
 padding: 12px 14px; border-radius: 8px;
 background: rgba(239, 82, 101, 0.14); border: 1px solid var(--err);
 color: var(--title-d); font-size: 0.88rem;
}
.sandbox-warn b { color: var(--err); display: block; margin-bottom: 4px; }
.sandbox-controls {
 display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
 border-top: 1px solid var(--border-d); background: rgba(0, 0, 0, 0.28);
}

.completion-overlay {
 position: absolute; inset: 0; z-index: 5;
 display: flex; align-items: center; justify-content: center;
 background: rgba(24, 32, 79, 0.82); backdrop-filter: blur(4px);
 padding: 24px; animation: overlayIn 0.35s ease;
}
.completion-card {
 width: min(420px, 100%); padding: 28px; border-radius: var(--r-lg);
 background: var(--card-l); border: 1.5px solid var(--border-l);
 color: var(--title-l); box-shadow: var(--shadow); text-align: center;
 animation: shrinkIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.completion-card h3 { font-size: 1.45rem; margin-bottom: 8px; color: var(--indigo); }
.completion-card p { color: var(--body-l); margin-bottom: 16px; }
.completion-stats {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px;
}
.completion-stats div {
 padding: 10px 8px; border-radius: 8px; background: var(--cream);
 border: 1px solid var(--border-l);
}
.completion-stats b {
 display: block; font-family: var(--mono); font-size: 0.62rem;
 letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px;
}
.completion-stats span { font-weight: 800; color: var(--indigo); font-size: 0.95rem; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shrinkIn {
 from { transform: scale(1.12); opacity: 0; }
 to { transform: scale(1); opacity: 1; }
}

/* ========== Platform: runtime ribbon ========== */
.runtime-ribbon {
 display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
 border: 1.5px solid var(--border-d); border-radius: var(--r-lg);
 overflow: hidden; background: var(--indigo); color: var(--title-d);
 box-shadow: var(--shadow);
}
.runtime-fold {
 position: relative; padding: 18px 16px; min-height: 220px;
 border-right: 1px solid var(--border-d);
 background: var(--card-d);
 transition: flex 0.35s ease, background 0.2s, box-shadow 0.2s;
 cursor: pointer;
}
.runtime-fold:last-child { border-right: none; }
.runtime-fold.is-open {
 background: rgba(86, 230, 186, 0.1);
 box-shadow: inset 0 3px 0 var(--mint);
}
.runtime-fold.is-closed {
 opacity: 0.55; filter: grayscale(0.25);
 background: rgba(24, 32, 79, 0.65);
}
.runtime-fold-label {
 display: block; font-family: var(--mono); font-size: 0.65rem;
 letter-spacing: 0.07em; text-transform: uppercase; color: var(--mint); margin-bottom: 8px;
}
.runtime-fold h3 { font-size: 1rem; margin-bottom: 8px; color: var(--title-d); }
.runtime-fold p { font-size: 0.84rem; color: var(--body-d); }
.runtime-fold-signal {
 margin-top: 12px; padding: 8px 10px; border-radius: 6px;
 font-family: var(--mono); font-size: 0.7rem;
 background: rgba(0, 0, 0, 0.28); border: 1px dashed var(--border-d); color: var(--wait);
}
.runtime-fold-signal.is-removed {
 text-decoration: line-through; color: var(--err); border-color: var(--err);
}
.runtime-controls {
 display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}

/* ========== Sandbox Builder: shell board ========== */
.shell-board {
 position: relative; min-height: 460px; padding: 28px;
 border-radius: var(--r-lg); border: 1.5px solid var(--border-d);
 background:
 radial-gradient(circle at 30% 40%, rgba(77, 103, 255, 0.12), transparent 40%),
 radial-gradient(circle at 70% 60%, rgba(86, 230, 186, 0.1), transparent 35%),
 var(--indigo);
 overflow: hidden; color: var(--title-d);
}
.shell-board-grid {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start;
}
.shell-piece {
 padding: 16px; border-radius: var(--r);
 background: var(--card-l); border: 1.5px solid var(--border-l);
 color: var(--title-l); box-shadow: var(--shadow-float);
 transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.shell-piece:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shell-piece.is-connected { border-color: var(--mint); outline: 2px solid rgba(86, 230, 186, 0.35); }
.shell-piece.is-floating { animation: floatPiece 3.2s ease-in-out infinite; }
.shell-piece:nth-child(2) { animation-delay: 0.4s; }
.shell-piece:nth-child(3) { animation-delay: 0.8s; }
.shell-piece:nth-child(5) { animation-delay: 1.1s; }
.shell-piece h3 { font-size: 0.95rem; margin-bottom: 6px; color: var(--indigo); }
.shell-piece p { font-size: 0.84rem; color: var(--body-l); }
.shell-piece-tag {
 display: inline-block; margin-bottom: 8px;
 font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
 letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange);
}
.shell-actions {
 display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
@keyframes floatPiece {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-6px); }
}

/* ========== Scenario Studio: storyboard wall ========== */
.storyboard-wall {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.story-frame {
 padding: 0; border-radius: var(--r); overflow: hidden;
 background: var(--card-l); border: 1.5px solid var(--border-l);
 color: var(--title-l); display: flex; flex-direction: column;
 transition: border-color 0.2s, transform 0.2s;
}
.story-frame:hover { border-color: var(--orange); transform: translateY(-2px); }
.story-frame.is-active {
 border-color: var(--blue); box-shadow: 0 0 0 2px rgba(77, 103, 255, 0.25);
}
.story-frame-num {
 padding: 8px 14px; background: var(--indigo); color: var(--mint);
 font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
 text-transform: uppercase; font-weight: 700;
}
.story-frame-body { padding: 14px 16px 16px; flex: 1; }
.story-frame-body h3 { font-size: 1rem; margin-bottom: 6px; color: var(--indigo); }
.story-frame-body p { font-size: 0.86rem; color: var(--body-l); }
.story-frame-shot {
 height: 72px; margin: 0 16px 14px; border-radius: 8px;
 background:
 linear-gradient(135deg, rgba(244, 122, 60, 0.15), rgba(77, 103, 255, 0.12)),
 var(--cream);
 border: 1px dashed var(--border-l);
}

/* ========== Adaptive Guide: guide split ========== */
.guide-split {
 display: grid; grid-template-columns: 0.95fr 1.15fr; gap: 0;
 border: 1.5px solid var(--border-d); border-radius: var(--r-lg);
 overflow: hidden; min-height: 440px; box-shadow: var(--shadow);
}
.guide-deck {
 padding: 18px; background: var(--indigo); color: var(--title-d);
 border-right: 1px solid var(--border-d); display: flex; flex-direction: column; gap: 10px;
}
.guide-deck-head {
 display: flex; justify-content: space-between; align-items: center; gap: 8px;
 margin-bottom: 4px;
}
.guide-deck-head h3 { font-size: 1rem; color: var(--title-d); }
.guide-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.guide-mode {
 padding: 5px 10px; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700;
 border: 1px solid var(--border-d); color: var(--body-d); background: var(--card-d);
}
.guide-mode.is-active { border-color: var(--mint); color: var(--mint); background: rgba(86, 230, 186, 0.1); }
.guide-card {
 padding: 12px 14px; border-radius: 8px; text-align: left;
 background: var(--card-d); border: 1px solid var(--border-d); color: var(--title-d);
 transition: border-color 0.15s, background 0.15s;
}
.guide-card:hover, .guide-card.is-active {
 border-color: var(--blue); background: rgba(77, 103, 255, 0.14);
}
.guide-card b { display: block; margin-bottom: 4px; color: var(--mint); font-size: 0.88rem; }
.guide-card span { font-size: 0.8rem; color: var(--body-d); }
.guide-product {
 padding: 20px; background: var(--cream); color: var(--title-l);
 display: flex; flex-direction: column; gap: 12px;
}
.guide-product-bar {
 display: flex; justify-content: space-between; align-items: center;
 padding: 10px 14px; border-radius: 8px;
 background: var(--card-l); border: 1px solid var(--border-l); font-weight: 700;
}
.guide-product-ui {
 flex: 1; padding: 16px; border-radius: 10px;
 background: var(--card-l); border: 1px solid var(--border-l);
 min-height: 240px;
}
.guide-hint-bubble {
 margin-top: auto; padding: 12px 14px; border-radius: 10px;
 background: rgba(77, 103, 255, 0.1); border: 1px solid rgba(77, 103, 255, 0.35);
 color: var(--indigo); font-size: 0.9rem;
}
.guide-hint-bubble b { display: block; color: var(--blue); margin-bottom: 4px; font-size: 0.75rem;
 font-family: var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }

/* ========== Stuck Detection: cursor path ========== */
.cursor-path-stage {
 position: relative; min-height: 380px; border-radius: var(--r-lg);
 border: 1.5px solid var(--border-d); background: var(--indigo);
 overflow: hidden; color: var(--title-d); padding: 20px;
}
.cursor-path-canvas {
 position: relative; height: 260px; border-radius: 10px;
 background:
 radial-gradient(circle at 20% 30%, rgba(86, 230, 186, 0.08), transparent 30%),
 radial-gradient(circle at 70% 60%, rgba(239, 82, 101, 0.1), transparent 28%),
 #1a2458;
 border: 1px solid var(--border-d); overflow: hidden;
}
.cursor-path-svg { width: 100%; height: 100%; }
.cursor-path-open { stroke: var(--mint); stroke-width: 3; fill: none; stroke-linecap: round; }
.cursor-path-knot {
 stroke: var(--err); stroke-width: 3; fill: none; stroke-linecap: round;
 animation: knotPulse 1.4s ease-in-out infinite;
}
.cursor-path-dot {
 position: absolute; width: 12px; height: 12px; border-radius: 50%;
 background: var(--task); box-shadow: 0 0 0 4px rgba(248, 228, 92, 0.25);
 left: var(--x, 40%); top: var(--y, 40%);
}
.cursor-path-legend {
 display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
 font-family: var(--mono); font-size: 0.75rem;
}
.cursor-path-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--body-d); }
.cursor-path-legend i {
 width: 18px; height: 3px; border-radius: 2px; display: inline-block;
}
.cursor-path-legend .leg-open { background: var(--mint); }
.cursor-path-legend .leg-knot { background: var(--err); }
.cursor-path-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@keyframes knotPulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.45; }
}

/* ========== Session Replay: film desk ========== */
.film-desk {
 border: 1.5px solid var(--border-d); border-radius: var(--r-lg);
 background: var(--indigo); overflow: hidden; color: var(--title-d);
 box-shadow: var(--shadow);
}
.filmstrip {
 display: flex; gap: 6px; padding: 12px 14px; overflow-x: auto;
 background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid var(--border-d);
}
.film-frame {
 flex: 0 0 88px; height: 56px; border-radius: 6px;
 background: var(--card-d); border: 2px solid var(--border-d);
 display: grid; place-items: center;
 font-family: var(--mono); font-size: 0.62rem; color: var(--body-d); cursor: pointer;
}
.film-frame.is-active { border-color: var(--mint); color: var(--mint); }
.film-tracks { position: relative; padding: 16px 18px 28px; display: grid; gap: 10px; }
.film-track {
 display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center;
}
.film-track-label {
 font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em;
 text-transform: uppercase; color: var(--mint); font-weight: 700;
}
.film-track-lane {
 position: relative; height: 36px; border-radius: 6px;
 background: var(--card-d); border: 1px solid var(--border-d); overflow: hidden;
}
.film-event {
 position: absolute; top: 4px; bottom: 4px; left: var(--left, 10%);
 width: var(--w, 12%); border-radius: 4px; font-size: 0.62rem;
 display: grid; place-items: center; font-weight: 700; padding: 0 4px;
 overflow: hidden; white-space: nowrap;
}
.film-event--action { background: rgba(77, 103, 255, 0.35); color: #c5ceff; }
.film-event--guide { background: rgba(166, 124, 255, 0.35); color: #e0d0ff; }
.film-event--state { background: rgba(86, 230, 186, 0.28); color: #b8f5de; }
.film-playhead {
 position: absolute; top: 16px; bottom: 28px; left: var(--play, 28%);
 width: 2px; background: var(--task); z-index: 3;
 box-shadow: 0 0 8px rgba(248, 228, 92, 0.5);
}
.film-playhead::before {
 content: ""; position: absolute; top: -6px; left: -5px;
 width: 12px; height: 12px; border-radius: 50%; background: var(--task);
}
.film-controls {
 display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
 padding: 12px 16px; border-top: 1px solid var(--border-d); background: rgba(0, 0, 0, 0.25);
}

/* ========== Outcome Map: puzzle ========== */
.outcome-puzzle {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.puzzle-piece {
 position: relative; padding: 20px 18px; min-height: 140px;
 background: var(--card-l); border: 1.5px solid var(--border-l);
 color: var(--title-l);
 clip-path: polygon(
 0% 12%, 18% 12%, 22% 0%, 32% 0%, 36% 12%, 100% 12%,
 100% 88%, 36% 88%, 32% 100%, 22% 100%, 18% 88%, 0% 88%
 );
 transition: transform 0.2s, background 0.2s;
}
.puzzle-piece:nth-child(even) {
 clip-path: polygon(
 0% 12%, 64% 12%, 68% 0%, 78% 0%, 82% 12%, 100% 12%,
 100% 88%, 82% 88%, 78% 100%, 68% 100%, 64% 88%, 0% 88%
 );
}
.puzzle-piece:hover { transform: scale(1.02); }
.puzzle-piece.is-completed {
 background: rgba(39, 185, 129, 0.14); border-color: var(--ok);
}
.puzzle-piece.is-hints {
 background: rgba(243, 175, 67, 0.14); border-color: var(--wait);
}
.puzzle-piece.is-abandoned {
 background: rgba(239, 82, 101, 0.1); border-color: var(--err);
}
.puzzle-piece.is-empty {
 background: var(--cream); border-style: dashed; opacity: 0.75;
}
.puzzle-status {
 font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.05em;
 text-transform: uppercase; color: var(--orange); margin-bottom: 8px; font-weight: 700;
}
.puzzle-piece h3 { font-size: 1rem; margin-bottom: 6px; color: var(--indigo); }
.puzzle-piece p { font-size: 0.84rem; color: var(--body-l); }

/* ========== Knowledge Sync: curtains ========== */
.sync-curtains {
 display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
 min-height: 320px;
}
.sync-curtain {
 display: flex; flex-direction: column; border-radius: var(--r) var(--r) 0 0;
 overflow: hidden; border: 1.5px solid var(--border-d); background: var(--card-d);
 color: var(--title-d); transition: transform 0.25s, box-shadow 0.25s;
 cursor: pointer; min-height: 280px;
}
.sync-curtain:hover, .sync-curtain.is-open {
 transform: translateY(-8px);
 box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
 border-color: var(--mint);
}
.sync-curtain-rail {
 padding: 12px 10px; writing-mode: horizontal-tb; text-align: center;
 background: rgba(0, 0, 0, 0.28); border-bottom: 1px solid var(--border-d);
 font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em;
 text-transform: uppercase; color: var(--mint); font-weight: 700;
}
.sync-curtain-body {
 flex: 1; padding: 14px 12px; font-size: 0.82rem; color: var(--body-d);
 background: linear-gradient(180deg, transparent, rgba(86, 230, 186, 0.06));
}
.sync-curtain-body b { display: block; color: var(--title-d); margin-bottom: 8px; }
.sync-curtain.is-stale .sync-curtain-rail { color: var(--wait); }
.sync-curtain.is-stale { border-color: var(--wait); }

/* ========== Developers: embed bench ========== */
.embed-bench {
 display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0;
 border: 1.5px solid var(--border-d); border-radius: var(--r-lg);
 overflow: hidden; min-height: 420px; box-shadow: var(--shadow);
}
.embed-code {
 padding: 0; background: #12183a; color: var(--mint);
 border-right: 1px solid var(--border-d); display: flex; flex-direction: column;
}
.embed-code-head {
 display: flex; justify-content: space-between; align-items: center;
 padding: 10px 14px; background: rgba(0, 0, 0, 0.35); border-bottom: 1px solid var(--border-d);
 font-family: var(--mono); font-size: 0.72rem; color: var(--body-d);
}
.embed-code pre {
 margin: 0; padding: 16px; flex: 1; overflow: auto;
 font-family: var(--mono); font-size: 0.78rem; line-height: 1.55;
 color: var(--mint); white-space: pre-wrap;
}
.embed-modules {
 display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px;
 border-top: 1px solid var(--border-d); background: rgba(0, 0, 0, 0.25);
}
.embed-mod {
 padding: 5px 10px; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 700;
 border: 1px solid var(--border-d); color: var(--body-d); background: var(--card-d);
}
.embed-mod.is-on { border-color: var(--mint); color: var(--mint); }
.micro-sandbox {
 padding: 18px; background: var(--cream); color: var(--title-l);
 display: flex; flex-direction: column; gap: 12px;
}
.micro-sandbox-frame {
 flex: 1; min-height: 220px; padding: 14px; border-radius: 10px;
 background: var(--card-l); border: 1.5px solid var(--border-l);
}
.micro-sandbox-frame h4 { margin-bottom: 8px; color: var(--indigo); }
.micro-sandbox-frame p { font-size: 0.86rem; color: var(--body-l); }
.sdk-integrations {
 display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.sdk-integrations li {
 padding: 6px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600;
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--title-l);
}

/* ========== Pricing: packing table ========== */
.packing-table {
 display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: start;
}
.capacity-board {
 padding: 20px; border-radius: var(--r-lg);
 background: var(--card-l); border: 1.5px solid var(--border-l); color: var(--title-l);
}
.capacity-row {
 display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
 padding: 12px 0; border-bottom: 1px solid var(--border-l);
}
.capacity-row:last-child { border-bottom: none; }
.capacity-row label {
 margin: 0; flex-direction: row; align-items: center; justify-content: space-between;
 gap: 12px; font-weight: 600;
}
.capacity-row input[type="range"] { width: 140px; accent-color: var(--orange); }
.capacity-blocks {
 display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px;
}
.capacity-block {
 width: 28px; height: 28px; border-radius: 4px;
 background: rgba(244, 122, 60, 0.2); border: 1px solid rgba(244, 122, 60, 0.4);
}
.capacity-block.is-filled { background: var(--mint); border-color: #3bc99a; }
.capacity-block.is-over { background: var(--err); border-color: #d43d50; }
.plan-recommend {
 padding: 24px; border-radius: var(--r-lg);
 background: var(--indigo); border: 2px solid var(--mint);
 color: var(--title-d); box-shadow: var(--shadow);
}
.plan-recommend .mono-label { color: var(--mint); }
.plan-recommend h3 { font-size: 1.5rem; margin: 6px 0 8px; color: var(--title-d); }
.plan-recommend .price {
 font-size: 2.2rem; font-weight: 800; margin: 8px 0 14px; color: var(--mint);
}
.plan-recommend .price span { font-size: 0.9rem; font-weight: 600; color: var(--body-d); }
.plan-recommend ul { display: grid; gap: 8px; margin: 0 0 16px; }
.plan-recommend li { font-size: 0.92rem; color: var(--body-d); padding-left: 14px; position: relative; }
.plan-recommend li::before {
 content: ""; position: absolute; left: 0; top: 0.55em;
 width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
}
.plan-tier-ghost {
 margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-d);
 color: var(--body-d); font-size: 0.88rem; opacity: 0.7;
}
.plan-tier-ghost.is-selected { opacity: 1; color: var(--title-d); }
.chapter-compare { margin-top: 28px; overflow: auto; }
.chapter-compare table {
 width: 100%; border-collapse: collapse; background: var(--card-l); color: var(--title-l);
}
.chapter-compare th, .chapter-compare td {
 padding: 12px 14px; border: 1px solid var(--border-l); text-align: left; font-size: 0.9rem;
}
.chapter-compare th { background: var(--indigo); color: var(--title-d); }

/* ========== About / shared content ========== */
.about-system {
 font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 800;
 margin-bottom: 12px; max-width: 22ch; line-height: 1.2;
}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.about-etymology {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 28px;
}
.about-etymology article {
 padding: 18px; border-radius: var(--r);
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--title-l);
}
.about-etymology h3 { margin: 0 0 8px; color: var(--orange); }
.about-layout { display: grid; gap: 28px; }
.value-rail { display: grid; gap: 10px; counter-reset: vr; }
.value-rail li {
 counter-increment: vr; position: relative; padding: 14px 16px 14px 52px;
 border-radius: var(--r); background: var(--card-l); border: 1px solid var(--border-l);
 color: var(--title-l);
}
.section--indigo .value-rail li {
 background: var(--card-d); border-color: var(--border-d); color: var(--body-d);
}
.value-rail li::before {
 content: counter(vr, decimal-leading-zero);
 position: absolute; left: 14px; top: 14px;
 font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--orange);
}
.section--indigo .value-rail li::before { color: var(--mint); }
.value-rail b { display: block; margin-bottom: 4px; color: var(--indigo); }
.section--indigo .value-rail b { color: var(--mint); }
.audience-row { display: flex; flex-wrap: wrap; gap: 10px; }
.audience-row li {
 padding: 10px 14px; border-radius: 8px; font-weight: 700; font-size: 0.85rem;
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--title-l);
}
.about-list, .status-list { display: grid; gap: 10px; }
.about-list li, .status-list li {
 padding: 12px 14px; border-radius: 8px;
 background: var(--card-l); border: 1px solid var(--border-l);
 font-weight: 600; color: var(--title-l);
}
.section--indigo .about-list li, .section--indigo .status-list li,
.section--indigo .hub-card {
 background: var(--card-d); border-color: var(--border-d); color: var(--title-d);
}
.section--indigo .hub-card small { color: var(--body-d); }
.status-list li { display: flex; align-items: center; gap: 10px; }
.status-list .ok {
 width: 10px; height: 10px; border-radius: 50%; background: var(--ok); display: inline-block;
}
.not-sandbox-strip {
 padding: 28px; border-radius: var(--r-lg);
 background: var(--card-d); border: 1px solid var(--border-d); color: var(--title-d);
}
.section--cream .not-sandbox-strip {
 background: var(--card-l); border-color: var(--border-l); color: var(--title-l);
}
.not-sandbox-strip h2 { margin: 8px 0 10px; }
.not-sandbox-cols {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px;
}
.not-sandbox-cols > div {
 padding: 14px; border-left: 3px solid var(--orange);
 background: rgba(24, 32, 79, 0.35);
}
.section--cream .not-sandbox-cols > div {
 background: var(--cream); border-left-color: var(--orange);
}
.not-sandbox-cols b { display: block; color: var(--mint); margin-bottom: 6px; }
.section--cream .not-sandbox-cols b { color: var(--orange); }
.not-sandbox-cols p { margin: 0; font-size: 0.9rem; color: var(--body-d); }
.section--cream .not-sandbox-cols p { color: var(--body-l); }
.not-cicd-cols {
 display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px;
}
.not-cicd-cols > div {
 padding: 14px 16px; border-radius: var(--r);
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--body-l);
}
.not-cicd-cols b { display: block; color: var(--orange); margin-bottom: 6px; }
.not-cicd-cols p { margin: 0; font-size: 0.9rem; }

/* Contact / forms / misc pages */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.contact-form {
 background: var(--card-l); border: 1px solid var(--border-l);
 border-radius: var(--r-lg); padding: 22px; color: var(--title-l);
}
.contact-form label { color: var(--title-l); }
.section--indigo .contact-form .hint-line { color: var(--mint); }
.changelog article { padding: 18px 0; border-bottom: 1px solid var(--border-l); }
.changelog time { font-family: var(--mono); font-size: 0.75rem; color: var(--orange); }
.legal-prose { max-width: 65ch; color: var(--title-l); }
.legal-prose h2 { margin: 24px 0 10px; font-size: 1.2rem; }
.legal-prose p { margin-bottom: 12px; color: var(--body-l); }
.cookie-panel { margin-top: 20px; display: grid; gap: 12px; max-width: 360px; }
.cookie-row {
 display: flex; justify-content: space-between; align-items: center;
 flex-direction: row; padding: 12px; border: 1px solid var(--border-l); border-radius: 8px;
 background: var(--card-l); color: var(--title-l);
}
.cookie-row input { width: auto; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hub-card {
 text-align: left; padding: 14px; border-radius: 8px;
 background: var(--card-l); border: 1px solid var(--border-l);
 font-weight: 700; color: var(--title-l); text-decoration: none;
}
.hub-card:hover { border-color: var(--orange); text-decoration: none; }
.hub-card small { display: block; font-size: 0.75rem; color: var(--body-l); font-weight: 500; margin-top: 4px; }

.conn-list { display: grid; gap: 8px; }
.conn-row {
 display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
 padding: 14px 16px; border-radius: var(--r);
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--title-l);
}
.conn-row.is-connected { border-color: rgba(39, 185, 129, 0.55); }
.conn-main b { display: block; color: var(--title-l); }
.conn-main span { font-family: var(--mono); font-size: 0.72rem; color: var(--orange); }
.conn-main p { margin: 4px 0 0; font-size: 0.85rem; color: var(--body-l); }
.conn-meta { display: grid; gap: 4px; justify-items: end; }
.conn-meta em { font-style: normal; font-size: 0.72rem; color: var(--body-l); }

.docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.doc-card {
 padding: 18px; border-radius: var(--r);
 background: var(--card-d); border: 1px solid var(--border-d); color: var(--title-d);
}
.section--cream .doc-card {
 background: var(--card-l); border-color: var(--border-l); color: var(--title-l);
}
.doc-card h3 { margin: 8px 0 10px; }
.doc-list { display: grid; gap: 8px; font-size: 0.88rem; color: var(--body-d); }
.section--cream .doc-list { color: var(--body-l); }
.doc-card code { font-family: var(--mono); font-size: 0.78rem; color: var(--mint); }
.section--cream .doc-card code { color: var(--blue); }

.instrument-nav {
 display: flex; flex-wrap: wrap; gap: 8px 18px;
 font-family: var(--mono); font-size: 0.82rem;
}
.instrument-nav a {
 color: var(--title-l); text-decoration: none; font-weight: 600;
 border-bottom: 1px solid var(--border-l); padding-bottom: 2px;
}
.instrument-nav a:hover { color: var(--orange); border-color: var(--orange); }

/* ========== Auth (high contrast on indigo) ========== */
.auth-body {
 min-height: 100dvh; margin: 0; font-family: var(--sans);
 background:
 radial-gradient(ellipse 50% 40% at 20% 10%, rgba(86, 230, 186, 0.14), transparent),
 radial-gradient(ellipse 40% 35% at 90% 80%, rgba(77, 103, 255, 0.16), transparent),
 var(--indigo);
 color: var(--title-d);
}
.auth-shell {
 width: min(440px, calc(100% - 40px)); margin: 0 auto;
 padding: 48px 0 40px; display: flex; flex-direction: column; gap: 20px;
}
.auth-brand {
 display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
 font-size: 1.35rem; font-weight: 800;
}
.auth-brand:hover { text-decoration: none; color: #fff; }
.auth-card {
 background: rgba(34, 43, 101, 0.55); border: 1px solid var(--border-d);
 border-radius: var(--r-lg); padding: 28px;
}
.auth-card h1 { font-size: 1.65rem; font-weight: 800; margin: 8px 0 10px; color: #fff; }
.auth-card .lead { color: var(--body-d); margin-bottom: 18px; }
.auth-form {
 background: var(--card-l); border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: var(--r-lg); padding: 22px;
}
.auth-form label { color: var(--title-l); font-weight: 700; }
.auth-form input {
 background: #fff; border: 1.5px solid var(--border-l); color: var(--title-l); font-size: 1rem;
}
.auth-form input:focus {
 outline: 2px solid var(--mint); outline-offset: 1px; border-color: var(--mint);
}
.auth-alt { margin-top: 16px; font-size: 0.95rem; color: var(--body-d); }
.auth-alt a { color: var(--mint); font-weight: 600; }
.auth-foot { font-size: 0.82rem; color: rgba(215, 220, 248, 0.45); text-align: center; }

/* High-contrast safety: light cards always dark text */
.section--indigo .shell-piece,
.section--indigo .story-frame,
.section--indigo .puzzle-piece,
.section--orange .completion-card,
.section--indigo .capacity-board,
.section--indigo .contact-form,
.section--orange .contact-form {
 color: var(--title-l);
}
.section--indigo .shell-piece p,
.section--indigo .story-frame-body p,
.section--indigo .puzzle-piece p { color: var(--body-l); }

/* ========== Markup sync: pages.py class names ========== */
.data-source-strip {
 display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
 padding: 10px 16px; border-bottom: 1px solid var(--border-d);
 background: rgba(0, 0, 0, 0.22); color: var(--body-d); font-size: 0.82rem;
}
.data-source-strip ul { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.data-source-strip li b { color: var(--mint); font-weight: 700; }

.product-frame {
 display: grid;
 grid-template-columns: 1fr 250px;
 grid-template-areas:
 "bar bar"
 "sources sources"
 "body guide";
 min-height: 440px;
}
.product-bar { grid-area: bar; }
.data-source-strip { grid-area: sources; }
.product-body {
 grid-area: body;
 display: grid; grid-template-columns: 200px 1fr; min-height: 360px;
}
.guide-panel {
 grid-area: guide; padding: 14px; border-left: 1px solid var(--border-d);
 background: rgba(0, 0, 0, 0.25); color: var(--body-d); font-size: 0.88rem;
}
.guide-panel p { color: var(--body-d); }
.guide-panel b { color: var(--mint); }
.guide-goal { display: flex; flex-direction: column; gap: 2px; }
.guide-goal strong { color: var(--mint); font-size: 0.92rem; }
.guide-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.guide-warn {
 margin-top: 12px; padding: 10px; border-radius: 8px;
 background: rgba(239, 82, 101, 0.14); border: 1px solid var(--err);
}
.field-rail {
 padding: 14px; border-right: 1px solid var(--border-d);
 background: rgba(0, 0, 0, 0.22);
}
.field-hint { font-size: 0.75rem; color: var(--body-d); margin-top: 8px; }
.canvas-preview {
 margin-top: 8px; padding: 14px; border-radius: 10px;
 background: rgba(34, 43, 101, 0.7); border: 1px solid var(--border-d);
 color: var(--body-d); text-align: center;
}
.canvas-preview.is-ready { border-color: var(--mint); color: var(--title-d); }
.chart-bars {
 display: flex; align-items: flex-end; justify-content: center; gap: 6px;
 height: 72px; margin-bottom: 8px;
}
.chart-bars i {
 display: block; width: 14px; border-radius: 3px 3px 0 0;
 background: linear-gradient(180deg, var(--mint), var(--blue));
 height: calc(30% + 40% * var(--i, 0.5));
}
.chart-bars i:nth-child(1) { height: 38%; }
.chart-bars i:nth-child(2) { height: 62%; }
.chart-bars i:nth-child(3) { height: 48%; }
.chart-bars i:nth-child(4) { height: 78%; }
.chart-bars i:nth-child(5) { height: 55%; }
.drop-zone span {
 font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.05em;
 text-transform: uppercase; color: var(--body-d);
}
.drop-zone em { font-style: normal; font-weight: 700; color: var(--title-d); }
.completion-stats {
 display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; text-align: left;
}
.completion-stats li {
 padding: 10px 8px; border-radius: 8px; background: var(--cream);
 border: 1px solid var(--border-l);
}
.completion-stats .mono-label { color: var(--orange); margin-bottom: 4px; }
.completion-stats b { display: block; color: var(--indigo); font-size: 0.9rem; }

.product-bar {
 display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
 padding: 10px 14px; border-bottom: 1px solid var(--border-d);
 background: rgba(0, 0, 0, 0.28); font-weight: 700; color: var(--title-d);
}
.product-name { color: var(--mint); }
.product-nav { font-size: 0.78rem; font-weight: 500; color: var(--body-d); }
.tag {
 display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-pill);
 font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
 text-transform: uppercase;
}
.tag--ok { background: rgba(39, 185, 129, 0.2); color: var(--ok); }
.tag--err { background: rgba(239, 82, 101, 0.2); color: var(--err); }
.tag--task { background: rgba(248, 228, 92, 0.2); color: var(--task); }
.tag--ai { background: rgba(166, 124, 255, 0.22); color: #d4bfff; }
.tag--connected, .tag--CONNECTED { background: rgba(39, 185, 129, 0.18); color: var(--ok); }
.tag--available, .tag--AVAILABLE { background: rgba(77, 103, 255, 0.18); color: #a8b6ff; }

/* Platform ribbon folds */
.runtime-ribbon {
 display: flex; flex-direction: column; gap: 0;
 border: 1.5px solid var(--border-d); border-radius: var(--r-lg);
 overflow: hidden; background: var(--indigo); color: var(--title-d);
 box-shadow: var(--shadow); margin-bottom: 16px;
}
.runtime-ribbon-head {
 display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
 padding: 12px 16px; background: rgba(0, 0, 0, 0.28); border-bottom: 1px solid var(--border-d);
}
.runtime-ribbon-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--mint); }
.runtime-ribbon-track {
 display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.ribbon-fold {
 border-right: 1px solid var(--border-d); background: var(--card-d); min-height: 200px;
 display: flex; flex-direction: column; transition: background 0.2s, opacity 0.2s;
}
.ribbon-fold:last-child { border-right: none; }
.ribbon-fold.is-open { background: rgba(86, 230, 186, 0.1); box-shadow: inset 0 3px 0 var(--mint); }
.ribbon-fold.is-removed { opacity: 0.4; filter: grayscale(0.4); }
.ribbon-fold.is-removed .ribbon-fold-tab b { text-decoration: line-through; color: var(--err); }
.ribbon-fold-tab {
 display: flex; align-items: center; gap: 8px; width: 100%;
 padding: 14px 12px; text-align: left; color: var(--title-d);
}
.ribbon-fold-tab .fold-no {
 font-family: var(--mono); font-size: 0.65rem; color: var(--mint); font-weight: 700;
}
.ribbon-fold-body { padding: 0 12px 14px; color: var(--body-d); font-size: 0.84rem; }
.ribbon-fold-body em { display: block; font-style: normal; color: var(--task); margin-bottom: 6px; font-weight: 600; }
.signal-panel {
 padding: 16px 18px; border-radius: var(--r-lg);
 background: var(--card-d); border: 1.5px solid var(--border-d); color: var(--body-d);
}
.signal-panel .page-hero-actions { margin-top: 10px; }

/* Sandbox Builder floats */
.shell-board {
 position: relative; min-height: 480px; padding: 24px;
 border-radius: var(--r-lg); border: 1.5px solid var(--border-d);
 background:
 radial-gradient(circle at 30% 40%, rgba(77, 103, 255, 0.12), transparent 40%),
 radial-gradient(circle at 70% 60%, rgba(86, 230, 186, 0.1), transparent 35%),
 var(--indigo);
 overflow: hidden; color: var(--title-d);
}
.shell-board-sky {
 position: absolute; inset: 0; pointer-events: none;
 background: radial-gradient(ellipse at 50% 0%, rgba(248, 228, 92, 0.08), transparent 50%);
}
.shell-float {
 position: absolute; left: var(--x, 20%); top: var(--y, 20%);
 width: min(200px, 42%); padding: 12px 14px; text-align: left;
 border-radius: var(--r); background: var(--card-l); border: 1.5px solid var(--border-l);
 color: var(--title-l); box-shadow: var(--shadow-float); z-index: 2;
 transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
 animation: floatPiece 3.2s ease-in-out infinite;
}
.shell-float:hover, .shell-float.is-active {
 transform: translateY(-4px) scale(1.02); border-color: var(--orange); z-index: 4;
}
.shell-float p { font-size: 0.78rem; color: var(--body-l); margin: 4px 0 6px; }
.mode-tag {
 display: inline-block; font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
 letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
 background: rgba(244, 122, 60, 0.12); color: var(--orange);
}
.mode--real .mode-tag { color: var(--ok); background: rgba(39, 185, 129, 0.12); }
.mode--dummy .mode-tag { color: var(--blue); background: rgba(77, 103, 255, 0.12); }
.mode--locked .mode-tag { color: var(--wait); background: rgba(243, 175, 67, 0.14); }
.mode--hidden .mode-tag { color: var(--err); background: rgba(239, 82, 101, 0.12); }
.mode--reset .mode-tag { color: var(--ai); background: rgba(166, 124, 255, 0.14); }
.shell-inspector {
 position: absolute; right: 18px; bottom: 18px; width: min(280px, 90%);
 padding: 16px; border-radius: var(--r); z-index: 5;
 background: var(--card-l); border: 1.5px solid var(--border-l); color: var(--title-l);
 box-shadow: var(--shadow);
}
.shell-inspector h3 { color: var(--indigo); margin-bottom: 6px; }
.shell-inspector p { font-size: 0.84rem; color: var(--body-l); margin-bottom: 10px; }

/* Scenario storyboard */
.story-frame {
 padding: 16px; border-radius: var(--r); cursor: pointer;
 background: var(--card-l); border: 1.5px solid var(--border-l); color: var(--title-l);
}
.story-frame .frame-no {
 display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--orange);
 letter-spacing: 0.06em; margin-bottom: 6px;
}
.story-frame h3 { font-size: 1rem; margin-bottom: 6px; color: var(--indigo); }
.frame-beat { font-weight: 600; color: var(--blue); margin-bottom: 6px; font-size: 0.88rem; }
.story-detail, .ai-draft-rail {
 margin-top: 16px; padding: 16px 18px; border-radius: var(--r);
 background: var(--card-l); border: 1.5px solid var(--border-l); color: var(--title-l);
}
.section--indigo .story-detail, .section--indigo .ai-draft-rail {
 background: var(--card-d); border-color: var(--border-d); color: var(--body-d);
}
.section--indigo .story-detail h3 { color: var(--title-d); }
.ai-draft-rail ul { display: grid; gap: 8px; margin-top: 8px; }
.ai-draft-rail li b { color: var(--mint); }

/* Adaptive guide deck */
.intensity-meter { margin-bottom: 10px; }
.intensity-bar {
 height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12);
 overflow: hidden; margin: 6px 0;
}
.intensity-bar i {
 display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--task));
 border-radius: 4px; transition: width 0.25s ease;
}
.deck-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mode-chip {
 padding: 6px 10px; border-radius: 8px; text-align: left;
 border: 1px solid var(--border-d); background: var(--card-d); color: var(--body-d);
}
.mode-chip b { display: block; font-size: 0.78rem; color: var(--title-d); }
.mode-chip span { font-size: 0.68rem; }
.mode-chip.is-active { border-color: var(--mint); background: rgba(86, 230, 186, 0.12); }
.deck-cards { display: grid; gap: 6px; }
.deck-card {
 padding: 10px 12px; border-radius: 8px; text-align: left;
 background: var(--card-d); border: 1px solid var(--border-d); color: var(--title-d);
}
.deck-card b { display: block; color: var(--mint); font-size: 0.86rem; margin-bottom: 2px; }
.deck-card span { font-size: 0.78rem; color: var(--body-d); }
.deck-card.is-active, .deck-card.is-locked {
 border-color: var(--blue); background: rgba(77, 103, 255, 0.14);
}
.guide-bubble {
 padding: 12px 14px; border-radius: 10px; margin-bottom: 12px;
 background: rgba(77, 103, 255, 0.12); border: 1px solid rgba(77, 103, 255, 0.35);
 color: var(--indigo); font-size: 0.95rem; font-weight: 600; line-height: 1.5;
}
.guide-product-body { padding: 16px; }
.mini-canvas { display: grid; gap: 8px; }
.mini-canvas .drop-zone { min-height: 72px; }

/* Adaptive Guide — light product pane contrast */
.guide-product .product-bar {
 background: #fff;
 border: 1.5px solid var(--border-l);
 border-radius: 8px;
 color: var(--title-l);
 box-shadow: none;
}
.guide-product .product-name {
 color: var(--indigo);
 font-weight: 800;
 font-size: 1rem;
}
.guide-product .tag--ai {
 background: rgba(166, 124, 255, 0.22);
 color: #4a2d8a;
 border: 1px solid rgba(166, 124, 255, 0.45);
}
.guide-product .drop-zone {
 background: #fff;
 border: 2px dashed var(--border-l);
 color: var(--title-l);
}
.guide-product .drop-zone span {
 color: #4a4560;
 font-weight: 700;
}
.guide-product .drop-zone em {
 color: var(--indigo);
 font-size: 0.95rem;
}
.guide-product .drop-zone.is-warn {
 background: #fff0f2;
 border-color: var(--err);
 border-style: solid;
}
.guide-product .drop-zone.is-warn span { color: #9a2035; }
.guide-product .drop-zone.is-warn em { color: #b02038; }
.guide-product-meta {
 display: grid; gap: 8px; margin-top: 14px;
 padding: 12px 14px; border-radius: 8px;
 background: #fff; border: 1px solid var(--border-l);
}
.guide-product-meta li {
 font-size: 0.86rem; color: var(--body-l);
 display: grid; grid-template-columns: 88px 1fr; gap: 8px;
}
.guide-product-meta b { color: var(--indigo); }
.guide-deck .mono-label { color: #FFB38A; }
.intensity-meter .mono-label { color: #FFB38A; }
.intensity-meter em,
[data-intensity-label] {
 color: #E8ECFF;
 font-style: normal;
 font-size: 0.82rem;
}
.mode-chip span { color: #C5CCF0; }
.deck-card span { color: #C5CCF0; }

/* Stuck path */
.path-svg { width: 100%; height: auto; max-height: 280px; display: block; }
.path-open { stroke: var(--mint); stroke-width: 3; }
.path-knot { stroke: var(--err); stroke-width: 3; opacity: 0.35; }
.path-knot.is-active, .path-open.is-active { opacity: 1; animation: knotPulse 1.4s ease-in-out infinite; }
.path-legend {
 display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
 font-family: var(--mono); font-size: 0.75rem; color: var(--body-d);
}
.lg-open::before, .lg-knot::before {
 content: ""; display: inline-block; width: 16px; height: 3px; margin-right: 6px;
 vertical-align: middle; border-radius: 2px;
}
.lg-open::before { background: var(--mint); }
.lg-knot::before { background: var(--err); }
.knot-panel {
 margin-top: 14px; padding: 14px 16px; border-radius: 10px;
 background: var(--card-d); border: 1px solid var(--border-d);
}
.knot-panel.is-open { border-color: var(--err); box-shadow: 0 0 0 2px rgba(239, 82, 101, 0.2); }

/* Film desk cells / compare */
.film-cell {
 flex: 0 0 100px; padding: 8px; border-radius: 6px; text-align: left;
 background: var(--card-d); border: 2px solid var(--border-d); color: var(--body-d);
}
.film-cell span { display: block; font-family: var(--mono); font-size: 0.62rem; color: var(--mint); }
.film-cell em { font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--title-d); }
.film-cell.is-active { border-color: var(--mint); }
.track-label {
 font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em;
 text-transform: uppercase; color: var(--mint); font-weight: 700;
}
.track-lane {
 position: relative; min-height: 36px; border-radius: 6px;
 background: var(--card-d); border: 1px solid var(--border-d); padding: 4px;
}
.track-event {
 display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px;
 font-size: 0.72rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 35%, transparent);
 color: var(--title-d);
}
.film-track.is-dim { opacity: 0.35; }
.film-track.is-isolated { opacity: 1; outline: 1px solid var(--mint); }
.film-notes {
 padding: 14px 16px; border-top: 1px solid var(--border-d);
 background: rgba(0, 0, 0, 0.22); color: var(--body-d);
}
.film-notes h3 { color: var(--title-d); margin-bottom: 6px; }
.film-playhead { left: var(--pos, 28%); }
.compare-pane {
 padding: 14px 16px; border-top: 1px solid var(--border-d);
 background: rgba(86, 230, 186, 0.08);
}
.compare-cols {
 display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
}
.compare-cols article {
 padding: 12px; border-radius: 8px; background: var(--card-d); border: 1px solid var(--border-d);
}
.compare-cols b { display: block; color: var(--mint); margin-bottom: 4px; }

/* Outcome roles + pieces */
.role-filter {
 display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px;
}
.chip {
 padding: 6px 12px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700;
 border: 1px solid var(--border-d); color: var(--body-d); background: var(--card-d);
}
.section--cream .chip { border-color: var(--border-l); color: var(--body-l); background: var(--card-l); }
.chip.is-active { border-color: var(--mint); color: var(--mint); background: rgba(86, 230, 186, 0.12); }
.puzzle-piece.piece--ok { background: rgba(39, 185, 129, 0.14); border-color: var(--ok); }
.puzzle-piece.piece--wait { background: rgba(243, 175, 67, 0.14); border-color: var(--wait); }
.puzzle-piece.piece--err { background: rgba(239, 82, 101, 0.1); border-color: var(--err); }
.puzzle-piece.piece--blue { background: rgba(77, 103, 255, 0.12); border-color: var(--blue); }
.puzzle-piece.piece--muted { background: var(--cream); border-style: dashed; opacity: 0.8; }
.puzzle-piece.is-dim { opacity: 0.28; filter: grayscale(0.4); }
.puzzle-piece.is-open { outline: 2px solid var(--mint); }
.puzzle-piece strong { display: block; margin-top: 6px; color: var(--indigo); font-size: 0.95rem; }
.outcome-detail {
 margin-top: 16px; padding: 16px; border-radius: var(--r);
 background: var(--card-l); border: 1.5px solid var(--border-l); color: var(--title-l);
}

/* Knowledge curtains */
.curtain-pull {
 display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%;
 padding: 12px 10px; text-align: left; color: var(--title-d);
 background: rgba(0, 0, 0, 0.28); border-bottom: 1px solid var(--border-d);
}
.curtain-pull .curtain-no { font-family: var(--mono); font-size: 0.62rem; color: var(--mint); }
.curtain-pull em { font-style: normal; font-size: 0.72rem; color: var(--wait); margin-left: auto; }
.curtain-panel { padding: 12px; font-size: 0.84rem; color: var(--body-d); }
.drift-list { margin: 8px 0 10px; display: grid; gap: 4px; }
.drift-list li { padding-left: 10px; border-left: 2px solid var(--err); }
.sync-curtain.is-drift { border-color: var(--wait); }
.sync-curtain.is-synced { border-color: var(--ok); }
.sync-curtain.is-open .curtain-pull { background: rgba(86, 230, 186, 0.1); }

/* Developers */
.dev-mods { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border-d); }
.dev-mod {
 padding: 6px 10px; border-radius: 8px; text-align: left;
 border: 1px solid var(--border-d); background: var(--card-d); color: var(--body-d);
}
.dev-mod b { display: block; font-size: 0.78rem; color: var(--mint); }
.dev-mod span { font-size: 0.68rem; }
.dev-mod.is-active { border-color: var(--mint); }
.code-pane {
 margin: 0; padding: 16px; flex: 1; overflow: auto;
 font-family: var(--mono); font-size: 0.78rem; line-height: 1.55;
 color: var(--mint); white-space: pre-wrap; background: transparent;
}
.embed-micro {
 padding: 18px; background: var(--cream); color: var(--title-l);
 display: flex; flex-direction: column; gap: 12px;
}
.module-io {
 display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px;
}
.module-io article {
 padding: 12px; border-radius: 8px; background: var(--card-d); border: 1px solid var(--border-d);
 color: var(--body-d); opacity: 0.55;
}
.module-io article.is-active { opacity: 1; border-color: var(--mint); }
.io-req, .io-res {
 margin: 6px 0 0; padding: 8px; border-radius: 6px; font-size: 0.7rem;
 font-family: var(--mono); white-space: pre-wrap; background: rgba(0, 0, 0, 0.28);
}
.io-res { color: var(--mint); }
.partner-row {
 display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px;
}
.partner-chip {
 padding: 6px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600;
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--title-l);
}
.section--indigo .partner-chip {
 background: var(--card-d); border-color: var(--border-d); color: var(--title-d);
}

/* Pricing layout matching pages.py */
.price-layout {
 display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: start;
}
.packing-table {
 display: block; padding: 20px; border-radius: var(--r-lg);
 background: var(--card-l); border: 1.5px solid var(--border-l); color: var(--title-l);
}
.packing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.plan-compiled .plan-card {
 padding: 24px; border-radius: var(--r-lg);
 background: var(--indigo); border: 2px solid var(--mint);
 color: var(--title-d); box-shadow: var(--shadow);
}
.plan-card h3 { font-size: 1.5rem; margin: 6px 0 8px; color: var(--title-d); }
.plan-card .plan-tag { color: var(--mint); font-size: 0.88rem; font-weight: 600; }
.plan-card .price {
 font-size: 2.2rem; font-weight: 800; margin: 8px 0 14px; color: var(--mint);
}
.plan-card .price span { font-size: 0.9rem; font-weight: 600; color: var(--body-d); }
.plan-card ul { display: grid; gap: 8px; margin: 0 0 12px; }
.plan-card li {
 font-size: 0.92rem; color: var(--body-d); padding-left: 14px; position: relative;
}
.plan-card li::before {
 content: ""; position: absolute; left: 0; top: 0.55em;
 width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
}

/* About session anatomy */
.session-anatomy {
 display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
}
.session-anatomy li {
 padding: 12px 14px; border-radius: 8px;
 background: var(--card-l); border: 1px solid var(--border-l); color: var(--body-l);
}
.session-anatomy b { display: block; color: var(--indigo); margin-bottom: 2px; }
.auth-card--light {
 background: var(--card-l) !important; border-color: var(--border-l) !important;
 color: var(--title-l) !important;
}
.auth-card--light h1, .auth-card--light .kicker { color: var(--indigo) !important; }
.auth-card--light .lead { color: var(--body-l) !important; }
.auth-card--light .auth-alt { color: var(--body-l); }
.auth-card--light .auth-alt a, .auth-card--light .linkish { color: var(--blue); }
.linkish { background: none; border: none; color: var(--mint); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ========== Responsive ========== */
@media (max-width: 1100px) {
 .runtime-ribbon, .runtime-ribbon-track { grid-template-columns: repeat(3, 1fr); }
 .ribbon-fold:nth-child(3) { border-right: none; }
 .sync-curtains { grid-template-columns: repeat(3, 1fr); }
 .shell-board-grid { grid-template-columns: repeat(2, 1fr); }
 .module-io { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
 .nav-main { display: none; }
 .nav-toggle { display: inline-flex; }
 .home-pain-grid { grid-template-columns: 1fr 1fr; }
 .home-path { grid-template-columns: 1fr 1fr; }
 .home-diff, .home-audience { grid-template-columns: 1fr; }
 .product-frame {
 grid-template-columns: 1fr;
 grid-template-areas: "bar" "sources" "body" "guide";
 }
 .product-body { grid-template-columns: 1fr; }
 .guide-panel { border-left: none; border-top: 1px solid var(--border-d); }
 .field-rail { border-right: none; border-bottom: 1px solid var(--border-d); }
 .drop-zones { grid-template-columns: 1fr; }
 .guide-split, .embed-bench, .price-layout,
 .about-grid, .contact-grid, .docs-grid { grid-template-columns: 1fr; }
 .guide-deck { border-right: none; border-bottom: 1px solid var(--border-d); }
 .embed-code { border-right: none; border-bottom: 1px solid var(--border-d); }
 .storyboard-wall { grid-template-columns: 1fr 1fr; }
 .outcome-puzzle { grid-template-columns: 1fr 1fr; }
 .footer-grid { grid-template-columns: 1fr 1fr; }
 .not-sandbox-cols, .not-cicd-cols, .about-etymology { grid-template-columns: 1fr; }
 .film-track { grid-template-columns: 100px 1fr; }
 .hub-grid { grid-template-columns: 1fr 1fr; }
 .completion-stats { grid-template-columns: 1fr; }
 .session-anatomy { grid-template-columns: 1fr; }
 .shell-float { position: relative; left: auto !important; top: auto !important; width: 100%; margin-bottom: 10px; animation: none; }
 .shell-inspector { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 12px; }
 .shell-board { min-height: auto; }
 .runtime-ribbon-track { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
 .home-pain-grid, .home-path { grid-template-columns: 1fr; }
 .site-top { padding-top: 8px; }
 .header-inner.header-float {
 border-radius: 16px; padding: 8px 10px;
 }
 .brand-text span { display: none; }
 .runtime-ribbon-track { grid-template-columns: 1fr; }
 .ribbon-fold { border-right: none; border-bottom: 1px solid var(--border-d); min-height: auto; }
 .storyboard-wall, .outcome-puzzle, .shell-board-grid { grid-template-columns: 1fr; }
 .sync-curtains { grid-template-columns: 1fr 1fr; }
 .footer-grid { grid-template-columns: 1fr; }
 .header-actions .btn-ghost { display: none; }
 .home-hero-head h1 { max-width: none; }
 .hub-grid { grid-template-columns: 1fr; }
 .conn-row { grid-template-columns: 1fr; }
 .film-track { grid-template-columns: 1fr; }
 .capacity-row label { flex-direction: column; align-items: flex-start; }
 .module-io, .compare-cols { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
 .sync-curtains { grid-template-columns: 1fr; }
 .sandbox-controls .btn, .page-hero-actions .btn { width: 100%; }
}