:root,
[data-theme="light"] {
  --demo-toggle-track: linear-gradient(135deg, #e8e4f8, #d4e8df);
  --demo-toggle-thumb: linear-gradient(135deg, #f5d0a8, #f0b87a);
  --demo-toggle-glow: rgba(245, 208, 165, 0.55);
}
:root {
  --bg-root: #FAFAF8; --bg-surface: #FFFFFF; --bg-glass: rgba(255,255,255,0.72);
  --bg-glass-strong: rgba(255,255,255,0.88); --bg-muted: #F4F3F0;
  --lofi-lavender: #C4B5E8; --lofi-sage: #A8C5B5; --lofi-peach: #F5D0C5;
  --lofi-dusty-blue: #9BB5CE; --lofi-mauve: #B8A9C9;
  --accent: #7B9FD4; --accent-deep: #5A7FAD;
  --text-primary: #1A1A1E; --text-secondary: #5C5C66; --text-muted: #8E8E93;
  --border: rgba(0,0,0,0.06); --border-medium: rgba(0,0,0,0.1); --pump-active: #A8C5B5;
  --shadow-soft: 0 4px 24px rgba(26,26,30,0.04);
  --shadow-glass: 0 8px 32px rgba(155,181,206,0.12);
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px;
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono: 'JetBrains Mono','IBM Plex Mono','SF Mono',monospace;
  --gradient-progress: linear-gradient(90deg,var(--lofi-lavender),var(--lofi-dusty-blue));
}
[data-theme="dark"] {
  --demo-toggle-track: linear-gradient(135deg, #1e1b4b, #0f172a);
  --demo-toggle-thumb: linear-gradient(135deg, #818cf8, #6366f1);
  --demo-toggle-glow: rgba(129, 140, 248, 0.45);
  --bg-root: #0f172a; --bg-surface: #1e293b; --bg-glass: rgba(30,41,59,0.72);
  --bg-glass-strong: rgba(30,41,59,0.88); --bg-muted: #1e293b;
  --lofi-lavender: #C4B5E8; --lofi-sage: #A8C5B5; --lofi-peach: #F5D0C5;
  --lofi-dusty-blue: #9BB5CE; --lofi-mauve: #B8A9C9;
  --accent: #93b4e8; --accent-deep: #7da4d4;
  --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b;
  --border: rgba(255,255,255,0.08); --border-medium: rgba(255,255,255,0.14); --pump-active: #A8C5B5;
  --shadow-soft: 0 4px 24px rgba(0,0,0,0.25);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.3);
}
[data-theme="dark"] body { background:var(--bg-root); color:var(--text-primary); }
[data-theme="dark"] .df-grid-bg { background:radial-gradient(ellipse 70% 50% at 15% 20%,rgba(196,181,232,0.08) 0%,transparent 55%),radial-gradient(ellipse 60% 45% at 85% 75%,rgba(155,181,206,0.06) 0%,transparent 55%),radial-gradient(ellipse 50% 40% at 50% 50%,rgba(168,197,181,0.04) 0%,transparent 60%); }
[data-theme="dark"] .df-grid-bg::before { background-image:linear-gradient(rgba(155,181,206,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(155,181,206,0.04) 1px,transparent 1px); }
[data-theme="dark"] .flow-block.pending { background:#1a2332; border-color:#2a3a4e; }
[data-theme="dark"] .flow-block.active { background:linear-gradient(160deg,rgba(196,181,232,0.15) 0%,rgba(30,41,59,0.95) 55%); }
[data-theme="dark"] .flow-block.done { background:linear-gradient(160deg,rgba(168,197,181,0.12) 0%,rgba(30,41,59,0.95) 60%); }
[data-theme="dark"] .wa-fullpage { background:#111827; }
[data-theme="dark"] .wa-message-left .wa-bubble { background:var(--bg-surface); border-color:var(--border); }
[data-theme="dark"] .wa-message-right .wa-bubble { background:rgba(196,181,232,0.18); border-color:rgba(196,181,232,0.25); }
[data-theme="dark"] .warning-box { background:rgba(245,208,197,0.08); border-color:rgba(245,208,197,0.2); color:#f5d0c5; }
[data-theme="dark"] .safety-notes { background:rgba(196,181,232,0.05); border-color:rgba(196,181,232,0.15); }
[data-theme="dark"] .flow-path { stroke:rgba(255,255,255,0.1); }
[data-theme="dark"] ::selection { background:rgba(196,181,232,0.35); color:var(--text-primary); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-sans); background:var(--bg-root); color:var(--text-primary); min-height:100vh; -webkit-font-smoothing:antialiased; line-height:1.5; }
::selection { background:rgba(168,197,181,0.35); color:var(--text-primary); }
.df-grid-bg { position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse 70% 50% at 15% 20%,rgba(196,181,232,0.18) 0%,transparent 55%),radial-gradient(ellipse 60% 45% at 85% 75%,rgba(155,181,206,0.14) 0%,transparent 55%),radial-gradient(ellipse 50% 40% at 50% 50%,rgba(168,197,181,0.08) 0%,transparent 60%); }
.df-grid-bg::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(155,181,206,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(155,181,206,0.07) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 20%,transparent 75%); }
.df-shell { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:28px 20px 60px; }
.demo-backbar { position:sticky; top:12px; z-index:20; display:flex; justify-content:flex-start; margin-bottom:12px; pointer-events:none; }
.demo-back-btn { pointer-events:auto; display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:8px 14px; border-radius:999px; background:var(--bg-glass-strong); border:1px solid var(--border-medium); color:var(--text-primary); text-decoration:none; font-size:13px; font-weight:700; box-shadow:var(--shadow-soft); backdrop-filter:blur(14px); transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease; }
.demo-back-btn:hover { transform:translateY(-1px); border-color:var(--lofi-lavender); box-shadow:var(--shadow-glass); }
.demo-back-btn .demo-back-arrow { font-family:var(--font-mono); font-size:15px; line-height:1; }
.df-header { text-align:center; margin-bottom:32px; }
.df-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
.pulse-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--lofi-sage); box-shadow:0 0 8px rgba(168,197,181,0.8); animation:pulseDot 2.4s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }
.df-header h1 { font-size:32px; font-weight:700; margin-bottom:12px; background:linear-gradient(90deg,var(--text-primary),var(--accent-deep)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.subtitle { font-size:16px; color:var(--text-secondary); max-width:600px; margin:0 auto 20px; }
.badges { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:20px; }
.badge { font-family:var(--font-mono); font-size:11px; padding:4px 12px; border-radius:99px; background:var(--bg-glass-strong); border:1px solid var(--border); backdrop-filter:blur(12px); }
.controls { display:flex; justify-content:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.speed-control { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px; padding:10px 18px; background:var(--bg-glass-strong); border:1px solid var(--border); border-radius:999px; flex-wrap:wrap; max-width:520px; margin-left:auto; margin-right:auto; }
.speed-control label { font-size:13px; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.speed-control input[type="range"] { flex:1; min-width:140px; max-width:220px; accent-color:var(--lofi-lavender); cursor:pointer; }
.speed-label { font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text-primary); min-width:42px; text-align:right; }
.speed-hint { width:100%; text-align:center; font-size:11px; color:var(--text-muted); }
.btn { font-family:var(--font-sans); background:var(--text-primary); color:#fff; border:none; padding:11px 22px; border-radius:999px; font-size:14px; font-weight:500; cursor:pointer; transition:transform 0.15s,box-shadow 0.15s,opacity 0.15s; }
.btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:var(--shadow-soft); }
.btn:disabled { opacity:0.38; cursor:not-allowed; }
.btn.stop { background:transparent; color:var(--text-secondary); border:1px solid var(--border-medium); }
.btn.stop:hover:not(:disabled) { background:rgba(245,208,197,0.35); border-color:var(--lofi-peach); }
.btn.secondary { background:var(--bg-glass-strong); color:var(--text-primary); border:1px solid var(--border); backdrop-filter:blur(12px); }
.btn.secondary:hover:not(:disabled) { border-color:var(--lofi-lavender); box-shadow:var(--shadow-glass); }
.btn-ghost { padding:7px 14px; font-size:13px; }
.progress-wrap { margin-bottom:20px; }
.progress { width:100%; height:4px; background:rgba(155,181,206,0.2); border-radius:99px; overflow:hidden; }
.progress-bar { height:100%; background:var(--gradient-progress); width:0%; transition:width 0.45s cubic-bezier(0.4,0,0.2,1); position:relative; }
.progress-bar::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 10px var(--lofi-lavender); }
.progress-label { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-top:8px; }
#stageNav { display:flex; justify-content:center; align-items:center; gap:0; margin-bottom:24px; flex-wrap:wrap; padding:12px 16px; background:var(--bg-glass); backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-soft); }
.stage-btn { position:relative; background:transparent!important; color:var(--text-muted)!important; border:none!important; padding:8px 6px!important; font-size:0!important; margin:0!important; min-width:32px; height:32px; border-radius:50%!important; box-shadow:none!important; transform:none!important; }
.stage-btn::before { content:attr(data-step); font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--text-muted); }
.stage-btn::after { content:''; position:absolute; top:50%; left:calc(100% - 2px); width:20px; height:1px; background:var(--border-medium); transform:translateY(-50%); }
.stage-btn:last-child::after { display:none; }
.stage-btn:hover:not(.active) { background:rgba(168,197,181,0.2)!important; }
.stage-btn.active { background:var(--lofi-lavender)!important; box-shadow:0 0 0 3px rgba(196,181,232,0.35),var(--shadow-glass)!important; transform:scale(1.08)!important; }
.stage-btn.active::before { color:var(--text-primary); }
.stage { display:none; background:var(--bg-glass-strong); backdrop-filter:blur(24px); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; margin-bottom:20px; box-shadow:var(--shadow-glass); animation:stageIn 0.28s ease-out; }
.stage.active { display:block; }
@keyframes stageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.df-stage-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.df-stage-top h2 { margin-bottom:0; }
.stage-icon { display:inline-block; width:28px; height:28px; line-height:28px; text-align:center; font-family:var(--font-mono); font-size:12px; background:var(--bg-muted); border-radius:6px; margin-right:8px; }
.wa-fullpage { background:#f0f2f5; border-radius:var(--radius-md); padding:16px; margin-bottom:20px; }
.wa-header { background:linear-gradient(135deg,rgba(123,159,212,0.9) 0%,rgba(196,181,232,0.85) 100%); padding:14px 18px; display:flex; align-items:center; gap:14px; color:#fff; }
.wa-avatar { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.wa-info h3 { margin:0; font-size:15px; color:#fff; font-weight:600; }
.wa-status { font-family:var(--font-mono); font-size:11px; opacity:0.92; color:rgba(255,255,255,0.9); }
.wa-chat { display:flex; flex-direction:column; gap:12px; }
.wa-message { margin-bottom:14px; display:flex; flex-direction:column; }
.wa-message-left { align-items:flex-start; }
.wa-message-right { align-items:flex-end; }
.wa-bubble { max-width:82%; padding:11px 15px; border-radius:14px; font-size:14px; line-height:1.55; box-shadow:var(--shadow-soft); }
.wa-message-left .wa-bubble { background:var(--bg-surface); border:1px solid var(--border); border-top-left-radius:4px; }
.wa-message-right .wa-bubble { background:rgba(196,181,232,0.35); border:1px solid rgba(196,181,232,0.4); border-top-right-radius:4px; }
.wa-message-sender { font-weight:600; font-size:12px; margin-bottom:4px; opacity:0.8; }
.wa-time { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-top:4px; }
.wa-typing { display:none; align-items:center; gap:4px; padding:11px 15px; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; border-top-left-radius:4px; margin-bottom:12px; align-self:flex-start; }
.wa-typing.visible { display:flex; }
.wa-typing-dot { width:7px; height:7px; background:var(--lofi-mauve); border-radius:50%; animation:waTypingBounce 1.4s infinite ease-in-out both; }
.wa-typing-dot:nth-child(1) { animation-delay:-0.32s; }
.wa-typing-dot:nth-child(2) { animation-delay:-0.16s; }
@keyframes waTypingBounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.dashboard-card { background:var(--bg-glass-strong); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; text-align:center; transition:transform 0.2s,box-shadow 0.2s; }
.dashboard-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-glass); }
.dashboard-card .title { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.06em; }
.dashboard-card .value { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.dashboard-card .value.normal { color:var(--lofi-sage); }
.dashboard-card .value.low { color:var(--lofi-peach); }
.dashboard-card .value.active { color:var(--pump-active,#A8C5B5); }
.dashboard-card .value.standby { color:var(--text-muted); }
.narrator-bar { display:flex; align-items:flex-start; gap:10px; background:rgba(196,181,232,0.12); border:1px solid rgba(196,181,232,0.28); border-radius:var(--radius-md); padding:12px 16px; margin-bottom:16px; animation:narratorIn 0.4s ease-out; }
.narrator-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.narrator-text { font-size:14px; line-height:1.5; color:var(--text-primary); }
@keyframes narratorIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.signal-flow-wrap { position:relative; width:100%; min-height:120px; padding:12px 4px 8px; }
.signal-flow-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:1; }
.signal-flow-grid { position:relative; z-index:2; display:grid; gap:28px 12px; width:100%; }
.flow-legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:14px; padding:10px 14px; background:var(--bg-muted); border-radius:var(--radius-sm); font-size:12px; }
.flow-legend-item { display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); }
.flow-legend-item .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.flow-legend-item.pending .dot { background:#d1d5db; }
.flow-legend-item.active .dot { background:var(--lofi-lavender); box-shadow:0 0 8px var(--lofi-lavender); animation:legendPulse 1.2s ease-in-out infinite; }
.flow-legend-item.done .dot { background:var(--lofi-sage); }
@keyframes legendPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:0.75} }
.flow-block { position:relative; padding:28px 10px 14px; background:var(--bg-glass-strong); border:2px solid var(--border); border-radius:var(--radius-md); text-align:center; transition:background 0.45s ease,border-color 0.45s ease,box-shadow 0.45s ease,transform 0.45s ease,opacity 0.45s ease; box-shadow:var(--shadow-soft); min-width:0; overflow:hidden; }
.flow-block-index { position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%; background:var(--bg-muted); color:var(--text-muted); font-family:var(--font-mono); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:all 0.4s ease; }
.flow-block-status { position:absolute; top:8px; right:8px; font-size:9px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:3px 7px; border-radius:99px; background:rgba(0,0,0,0.05); color:var(--text-muted); transition:all 0.4s ease; }
.flow-active-bar { position:absolute; bottom:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--lofi-lavender),var(--lofi-dusty-blue)); transition:width var(--flow-step-ms,2600ms) linear,background 0.4s ease; }
.flow-block.pending { opacity:0.5; background:#f4f4f5; border-color:#e4e4e7; }
.flow-block.pending .block-icon { filter:grayscale(0.6); opacity:0.7; }
.flow-block.active { opacity:1; background:linear-gradient(160deg,rgba(196,181,232,0.28) 0%,rgba(255,255,255,0.95) 55%); border-color:var(--lofi-lavender); box-shadow:0 0 0 3px rgba(196,181,232,0.4),0 8px 28px rgba(196,181,232,0.22); transform:scale(1.06); animation:blockActiveGlow 1.4s ease-in-out infinite; }
.flow-block.active .flow-block-index { background:var(--lofi-lavender); color:var(--text-primary); animation:indexPop 0.5s ease; }
.flow-block.active .flow-block-status { background:var(--lofi-lavender); color:var(--text-primary); animation:statusBlink 1s ease-in-out infinite; }
.flow-block.active .flow-active-bar { width:100%; }
.flow-block.active .block-icon { animation:iconBounce 0.7s ease infinite; filter:none; opacity:1; }
.flow-block.done { opacity:1; background:linear-gradient(160deg,rgba(168,197,181,0.22) 0%,rgba(255,255,255,0.95) 60%); border-color:var(--lofi-sage); box-shadow:0 0 0 2px rgba(168,197,181,0.35); transform:scale(1); }
.flow-block.done .flow-block-index { background:var(--lofi-sage); color:#fff; }
.flow-block.done .flow-block-status { background:var(--lofi-sage); color:#fff; }
.flow-block.done .flow-active-bar { width:100%; background:var(--lofi-sage); }
.flow-block.done .block-icon { filter:none; opacity:1; }
.flow-block .block-icon { font-size:22px; margin-bottom:6px; transition:filter 0.4s,transform 0.4s; }
.flow-block .block-label { font-size:12px; font-weight:600; line-height:1.35; }
@keyframes blockActiveGlow { 0%,100%{box-shadow:0 0 0 3px rgba(196,181,232,0.35),0 6px 20px rgba(196,181,232,0.15)} 50%{box-shadow:0 0 0 5px rgba(196,181,232,0.55),0 10px 32px rgba(196,181,232,0.3)} }
@keyframes iconBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes indexPop { 0%{transform:scale(0.7)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes statusBlink { 0%,100%{opacity:1} 50%{opacity:0.65} }
.flow-path { fill:none; stroke:rgba(0,0,0,0.12); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke 0.3s ease; }
.flow-path.active { stroke:var(--lofi-lavender); filter:drop-shadow(0 0 4px rgba(196,181,232,0.55)); animation:drawSignalPath var(--flow-step-ms,2600ms) ease forwards; }
.flow-path.done { stroke:var(--lofi-sage); stroke-dashoffset:0; }
@keyframes drawSignalPath { to{stroke-dashoffset:0} }
.script-view-toggle { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.view-btn { padding:8px 16px; border-radius:99px; border:1px solid var(--border); background:var(--bg-muted); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.view-btn.active { background:var(--lofi-lavender); border-color:var(--lofi-lavender); color:var(--text-primary); }
.script-simple { display:flex; flex-direction:column; gap:12px; }
.simple-step { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--bg-muted); border:1px solid var(--border); border-radius:var(--radius-md); opacity:0.4; transform:translateX(-8px); transition:all 0.4s ease; }
.simple-step.active { opacity:1; transform:translateX(0); border-color:var(--lofi-lavender); box-shadow:0 0 0 2px rgba(196,181,232,0.25); }
.simple-step.done { opacity:1; transform:translateX(0); border-color:var(--lofi-sage); background:rgba(168,197,181,0.12); }
.simple-step-num { width:28px; height:28px; border-radius:50%; background:var(--bg-glass-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:700; flex-shrink:0; }
.simple-step.active .simple-step-num { background:var(--lofi-lavender); }
.simple-step.done .simple-step-num { background:var(--lofi-sage); color:#fff; }
.simple-step-icon { font-size:24px; flex-shrink:0; }
.simple-step-text strong { display:block; font-size:14px; margin-bottom:2px; }
.simple-step-text span { font-size:12px; color:var(--text-secondary); }
.code-block { background:#1e293b; color:#f8fafc; border-radius:var(--radius-md); padding:16px; font-family:var(--font-mono); overflow-x:auto; margin:16px 0; display:none; }
.code-block.active { display:block; }
.export-bar { margin-top:12px; text-align:right; }
.export-btn { padding:8px 16px; border-radius:99px; border:1px solid var(--border); background:var(--lofi-lavender); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.export-btn:hover { box-shadow:var(--shadow-glass); }
.terminal { background:#1e293b; color:#f8fafc; border-radius:var(--radius-md); padding:16px; font-family:var(--font-mono); height:200px; overflow-y:auto; margin:16px 0; }
.terminal-line { margin-bottom:5px; font-size:13px; }
.terminal-system { color:#93c5fd; }
.terminal-stage { color:#a7f3d0; }
.terminal-alert { color:#fcd34d; }
.terminal-action { color:#fca5a5; }
.schematic-container { background:var(--bg-glass-strong); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 16px; box-shadow:var(--shadow-soft); }
.schematic-container .flow-block .block-label { font-family:var(--font-mono); font-size:11px; letter-spacing:-0.01em; }
.warning-box { padding:12px 16px; border-radius:var(--radius-sm); margin-top:16px; font-size:13px; background:rgba(245,208,197,0.2); border:1px solid rgba(245,208,197,0.4); color:#9A4A3A; }
.report-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.report-card { background:var(--bg-glass-strong); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; transition:transform 0.2s,box-shadow 0.2s; }
.report-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-glass); }
.report-label { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.06em; }
.report-value { font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; }
.architecture-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.layer-card { background:var(--bg-glass-strong); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; box-shadow:var(--shadow-soft); transition:transform 0.2s,box-shadow 0.2s; }
.layer-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-glass); }
.layer-title { font-weight:600; margin-bottom:16px; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.layer-title .icon { font-size:18px; }
.layer-items { display:flex; flex-direction:column; gap:8px; }
.layer-item { font-size:14px; padding:8px 12px; background:var(--bg-muted); border-radius:6px; }
.safety-notes { background:rgba(196,181,232,0.1); border:1px solid rgba(196,181,232,0.3); border-radius:var(--radius-md); padding:16px; margin-top:16px; }
.safety-notes ul { padding-left:20px; margin:12px 0; }
.safety-notes li { margin-bottom:8px; font-size:14px; }
.complete-badge { display:none; text-align:center; padding:12px 20px; background:rgba(168,197,181,0.2); border:1px solid var(--lofi-sage); border-radius:var(--radius-md); margin-bottom:20px; font-weight:600; color:var(--text-primary); }
.complete-badge.show { display:block; }
.timer-indicator { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; background:rgba(155,181,206,0.15); padding:4px 10px; border-radius:6px; margin-left:8px; }

.demo-theme-toggle-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 120;
}
.demo-theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  box-shadow: var(--shadow-glass);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.demo-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--lofi-lavender);
  box-shadow: 0 8px 28px rgba(155,181,206,0.22);
}
.demo-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.demo-theme-toggle-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 36px;
}
.demo-theme-toggle-track {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--demo-toggle-track);
  border: 1px solid var(--border-medium);
  flex-shrink: 0;
}
.demo-theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--demo-toggle-thumb);
  box-shadow: 0 0 10px var(--demo-toggle-glow), 0 2px 5px rgba(0,0,0,0.12);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .demo-theme-toggle-thumb { transform: translateX(24px); }
.demo-theme-toggle.is-switching .demo-theme-toggle-thumb {
  animation: demoTogglePulse 0.55s ease;
}
@keyframes demoTogglePulse {
  0%, 100% { box-shadow: 0 0 10px var(--demo-toggle-glow), 0 2px 5px rgba(0,0,0,0.12); }
  50% { box-shadow: 0 0 18px var(--demo-toggle-glow), 0 0 28px var(--demo-toggle-glow); }
}
@media (max-width:768px) {
  .demo-theme-toggle-wrap { top: 12px; right: 12px; }
  .demo-theme-toggle-label { display: none; }
  .df-shell { padding:16px 14px 40px; }
  .demo-backbar { top:8px; margin-bottom:10px; }
  .demo-back-btn { min-height:36px; padding:7px 12px; font-size:12px; }
  .df-header h1 { font-size:24px; }
  .subtitle { font-size:14px; }
  .dashboard-grid, .report-grid, .architecture-grid { grid-template-columns:1fr; }
  #stageNav { gap:4px; padding:10px; }
  .stage-btn::after { width:10px; }
  .stage { padding:18px 14px; }
  .flow-block { padding:12px 8px; }
  .flow-block .block-label { font-size:11px; }
  .signal-flow-grid { gap:24px 8px; }
  .narrator-text { font-size:13px; }
}