:root{
  --bg:#fef9f3;
  --bg-strong:#fffcf6;
  --bg-glass:rgba(255,255,255,0.7);
  --bg-glass-strong:rgba(255,255,255,0.88);
  --ink:#1a1a14;
  --muted:#8a7e6e;
  --border:#ddd5c8;
  --accent:#012921;
  --accent-2:#f0b41e;
  --success:#1b8e61;
  --warn:#d08b2d;
  --danger:#a12b2b;
  --shadow:0 24px 80px rgba(1,41,33,0.12);
  --radius:24px;
  --radius-sm:16px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
html[data-theme="night"]{
  --bg:#001210;
  --bg-strong:#041a12;
  --bg-glass:rgba(15,32,27,0.72);
  --bg-glass-strong:rgba(15,32,27,0.92);
  --ink:#d8e0d0;
  --muted:#8a9a80;
  --border:#1a2e24;
  --accent:#4a8a6a;
  --accent-2:#d4a040;
  --success:#4ade80;
  --warn:#fbbf24;
  --danger:#fb7185;
  --shadow:0 24px 80px rgba(0,0,0,0.3);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.demo-page{margin:0;background:radial-gradient(circle at top left, rgba(31,111,87,.12), transparent 30%),var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.df-grid-bg{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);background-size:36px 36px;mask-image:radial-gradient(circle at center, #000 38%, transparent 85%);opacity:.35}
.df-shell{position:relative;z-index:1;max-width:1420px;margin:0 auto;padding:26px 5vw 90px}
.df-header{padding:18px 0 8px}
.df-topnav,.df-nav-links,.controls,.progress-label,.speed-control,.flow-legend,.df-stage-actions,.wa-header,.wa-info,.ops-inline{display:flex;align-items:center}
.df-topnav{justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.demo-brand{display:flex;align-items:center;gap:12px}.demo-brand strong{display:block;font-size:.95rem}.demo-brand small{display:block;color:var(--muted)}
.demo-brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;box-shadow:0 10px 20px rgba(0,0,0,.16)}
.df-nav-links{gap:10px;flex-wrap:wrap}.df-nav-links a,.theme-toggle{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg-glass-strong);box-shadow:0 10px 20px rgba(0,0,0,.06)}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:800;cursor:pointer;color:var(--ink)}
.theme-toggle.compact{padding:8px 12px;font-size:.85rem}
.df-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:.86rem;font-weight:800;letter-spacing:.04em;color:var(--accent-2)}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 rgba(201,162,77,.45);animation:pulseDot 1.8s infinite}
.df-header h1{margin:0;font-size:clamp(2.5rem,5vw,4.9rem);line-height:.96;letter-spacing:-.06em}
.subtitle{max-width:920px;margin:14px 0 0;color:var(--muted);font-size:1.06rem;line-height:1.75}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:rgba(31,111,87,.1);border:1px solid rgba(31,111,87,.16);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.controls{gap:10px;flex-wrap:wrap;margin-top:20px}
.btn,.export-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:999px;border:1px solid transparent;background:linear-gradient(145deg,var(--accent),color-mix(in srgb, var(--accent) 72%, #000));color:#fff;font-weight:900;cursor:pointer;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;box-shadow:0 12px 24px rgba(0,0,0,.12)}
.btn:hover,.export-btn:hover{transform:translateY(-1px)}
.btn.secondary,.related-btn{background:var(--bg-glass-strong);border-color:var(--border);color:var(--ink);box-shadow:0 10px 20px rgba(0,0,0,.06)}
.btn.stop{background:#8a2e2e}
.btn.btn-ghost{box-shadow:none;background:transparent;border-color:var(--border);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.speed-control{gap:10px;flex-wrap:wrap;margin-top:18px;color:var(--muted)}
.speed-control input{width:min(360px,70vw)}
.speed-label{display:inline-flex;min-width:48px;font-weight:800;color:var(--ink)}
.speed-hint{font-size:.9rem}
.progress-wrap{margin-top:16px}
.progress{height:12px;border-radius:999px;border:1px solid var(--border);background:var(--bg-glass);overflow:hidden}
.progress-bar{width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .28s ease}
.progress-label{justify-content:space-between;gap:16px;margin-top:8px;color:var(--muted);font-size:.9rem}
.narrator-bar{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px 16px;border-radius:18px;background:var(--bg-glass-strong);border:1px solid var(--border);box-shadow:var(--shadow)}
.narrator-icon{font-size:1.1rem}
.narrator-text{line-height:1.65;color:var(--ink)}
.stage-nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:18px}
.stage-btn{width:100%;padding:12px 10px;font-size:.85rem}
.stage-btn.is-active{background:linear-gradient(145deg,var(--accent),color-mix(in srgb, var(--accent) 72%, #000));color:#fff;border-color:transparent}
.complete-badge{display:none;margin-top:16px;padding:12px 14px;border-radius:16px;background:rgba(27,142,97,.12);border:1px solid rgba(27,142,97,.24);font-weight:800;color:var(--success)}
.complete-badge.is-visible{display:block}
.stage{display:none;margin-top:18px;padding:22px;border-radius:var(--radius);background:var(--bg-glass-strong);border:1px solid var(--border);box-shadow:var(--shadow)}
.stage.is-active,.stage.stage-inline{display:block}
.stage-inline{margin-top:18px}
.df-stage-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.df-stage-top h2{margin:0;font-size:1.55rem;line-height:1.1;display:flex;align-items:center;gap:12px}
.stage-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;font-size:.88rem;font-weight:900;box-shadow:0 12px 24px rgba(0,0,0,.14)}
.wa-fullpage{border-radius:20px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(31,111,87,.08), transparent),var(--bg-glass);overflow:hidden}
.wa-header{gap:12px;padding:18px;border-bottom:1px solid var(--border)}
.wa-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;font-size:1.3rem;box-shadow:0 12px 24px rgba(0,0,0,.14)}
.wa-info h3{margin:0 0 4px;font-size:1rem}.wa-status{color:var(--success);font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:6px}.wa-status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--success);animation:wa-pulse 2s infinite ease-in-out}
.wa-chat{display:grid;gap:14px;padding:20px;min-height:260px;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231fa855' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.wa-message{display:flex}.wa-message-right{justify-content:flex-end}.wa-message-left{justify-content:flex-start}
.wa-bubble{max-width:min(560px,92%);padding:12px 14px;border-radius:18px;background:#e9fff5;color:#122019;line-height:1.6;box-shadow:0 10px 20px rgba(0,0,0,.08)}
html[data-theme="night"] .wa-bubble{background:#143127;color:#ecfff5}
.wa-message-right .wa-bubble{background:linear-gradient(145deg,var(--accent),color-mix(in srgb, var(--accent) 72%, #000));color:#fff;border-bottom-right-radius:6px}
.wa-message-left .wa-bubble{border-bottom-left-radius:6px}
.wa-message-sender{font-size:.76rem;font-weight:900;margin-bottom:4px;color:var(--accent-2);display:flex;align-items:center;gap:4px}.wa-message-sender::before{content:'\1F916';font-size:.82rem}
.wa-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:6px}
.wa-ticks{font-size:.72rem;letter-spacing:-2px;opacity:.5}
.wa-ticks.read{color:#53bdeb;opacity:.85}
.wa-time{display:inline;font-size:.72rem;opacity:.72}
.wa-typing{display:none;align-items:center;gap:6px;padding:10px 14px;border-radius:16px;background:var(--bg-glass-strong);width:max-content}.wa-typing.visible{display:flex}
.wa-typing-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:typing 1.2s infinite ease-in-out}.wa-typing-dot:nth-child(2){animation-delay:.15s}.wa-typing-dot:nth-child(3){animation-delay:.3s}
.dashboard-grid,.signal-flow-grid,.architecture-grid,.report-grid,.related-grid{display:grid;gap:14px}
.dashboard-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.dashboard-card,.layer-card,.report-card,.related-card,.sim-item{padding:18px;border-radius:18px;background:var(--bg-glass);border:1px solid var(--border)}
.dashboard-card .title,.report-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.dashboard-card .value,.report-value{margin-top:8px;font-size:1.6rem;font-weight:900;letter-spacing:-.03em}
.flow-legend{gap:16px;flex-wrap:wrap;margin-bottom:16px;color:var(--muted);font-size:.88rem}.flow-legend-item{display:inline-flex;align-items:center;gap:8px}.dot{width:8px;height:8px;border-radius:50%;background:#97a79f}.flow-legend-item.active .dot{background:var(--accent)}.flow-legend-item.done .dot{background:var(--success)}
.signal-flow-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.flow-card{position:relative;padding:16px;border-radius:18px;background:var(--bg-glass);border:1px solid var(--border);text-align:center;opacity:.5;transition:all .25s ease}.flow-card.active{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,111,87,.18)}.flow-card.done{opacity:1;border-color:rgba(27,142,97,.26);background:rgba(27,142,97,.08)}.flow-card .icon{display:block;font-size:1.4rem;margin-bottom:10px}.flow-card .label{font-weight:800;font-size:.9rem}
.script-view-toggle{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.view-btn{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg-glass);font-weight:800;cursor:pointer}.view-btn.active{background:linear-gradient(145deg,var(--accent),color-mix(in srgb, var(--accent) 72%, #000));color:#fff;border-color:transparent}
.script-simple{display:grid;gap:12px}.simple-step{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--bg-glass);border:1px solid var(--border);opacity:.6;transition:all .25s ease}.simple-step.active{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,111,87,.18)}.simple-step.done{opacity:1;border-color:rgba(27,142,97,.26);background:rgba(27,142,97,.08)}
.simple-step-num{display:grid;place-items:center;min-width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;font-weight:900}.simple-step-icon{font-size:1.2rem}.simple-step-text strong,.simple-step-text span{display:block}.simple-step-text span{margin-top:4px;color:var(--muted);font-size:.92rem}
.code-block{padding:16px;border-radius:20px;background:#101b15;color:#eaf8f1;border:1px solid rgba(255,255,255,.08);overflow:auto}.code-block pre{margin:0;font-family:var(--mono);font-size:.88rem;line-height:1.7}
.export-bar{margin-top:16px}
.warning-box{margin-top:18px;padding:14px 16px;border-radius:18px;background:rgba(208,139,45,.1);border:1px solid rgba(208,139,45,.22);color:var(--ink);font-weight:700}
.sim-phase-badge{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(31,111,87,.1);border:1px solid rgba(31,111,87,.16);font-weight:800;color:var(--accent);margin-bottom:16px}
.sim-list{display:grid;gap:10px}.sim-item{display:flex;align-items:center;justify-content:space-between;gap:12px;opacity:.55}.sim-item.active{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,111,87,.18)}.sim-item.done{opacity:1;border-color:rgba(27,142,97,.26);background:rgba(27,142,97,.08)}.sim-item-left strong,.sim-item-left span{display:block}.sim-item-left span{margin-top:4px;color:var(--muted);font-size:.9rem}.sim-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:.76rem;font-weight:900}.sim-pill.ok{background:rgba(27,142,97,.12);color:var(--success)}.sim-pill.warn{background:rgba(208,139,45,.12);color:var(--warn)}
.report-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.terminal{padding:16px;border-radius:20px;background:#101b15;color:#d7f7e7;border:1px solid rgba(255,255,255,.08);min-height:180px;max-height:320px;overflow:auto;font-family:var(--mono)}
.terminal-line{padding:2px 0;line-height:1.55}.terminal-system{color:#97f0be}.terminal-user{color:#b7ffe0}.terminal-info{color:#d0e4ff}.terminal-note{color:#ffe7aa}
.architecture-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.layer-title{font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:8px}.layer-items{display:grid;gap:8px}.layer-item{padding:10px 12px;border-radius:14px;background:var(--bg-glass-strong);border:1px solid var(--border);color:var(--muted)}
.safety-notes ul{margin:0;padding-left:20px}.safety-notes li{margin:8px 0;color:var(--muted);line-height:1.65}
.related-strip{margin-top:20px;padding:22px;border-radius:var(--radius);background:var(--bg-glass-strong);border:1px solid var(--border);box-shadow:var(--shadow)}
.related-strip h3{margin:0 0 14px}.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.related-card h4{margin:10px 0}.related-card p{margin:0 0 14px;color:var(--muted);line-height:1.65}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(201,162,77,.45)}70%{box-shadow:0 0 0 12px rgba(201,162,77,0)}100%{box-shadow:0 0 0 0 rgba(201,162,77,0)}}
@keyframes typing{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
@keyframes wa-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
@media (max-width: 1180px){.stage-nav{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-grid,.report-grid,.architecture-grid,.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.signal-flow-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width: 820px){.df-shell{padding-inline:14px}.df-topnav,.df-nav-links,.controls,.speed-control,.stage-nav{align-items:stretch}.df-nav-links,.controls,.stage-nav{display:grid;grid-template-columns:1fr}.btn,.theme-toggle,.df-nav-links a{width:100%}.df-stage-top{flex-direction:column}.dashboard-grid,.signal-flow-grid,.report-grid,.architecture-grid,.related-grid{grid-template-columns:1fr}.wa-chat{min-height:220px}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}