.playground { max-width:1440px; }
.demo-stage-legend { display:none; }
.demo-marker text.demo-marker-compact { font-size:34px; }
@media(max-width:600px) { .demo-stage-legend { display:block; font-size:12px; color:var(--muted); padding-left:20px; columns:2; }.demo-stage-legend li { break-inside:avoid; padding:3px; } }
.demo-heading { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:22px 0 28px; }
.demo-heading h1 { font-size:clamp(34px,4.5vw,62px); margin:15px 0 20px; letter-spacing:-2px; }.demo-heading h1 span { color:var(--muted); }.demo-heading p { color:var(--muted); font-size:16px; }
.demo-heading-number { display:flex; align-items:center; gap:20px; border-left:1px solid var(--line); padding:12px 38px; }.demo-heading-number strong { font-size:80px; font-weight:400; letter-spacing:-5px; line-height:1; }.demo-heading-number span { color:var(--muted); font-size:13px; }
.demo-disclaimer { border-left:3px solid #a9be86; padding:10px 16px; background:var(--soft); font-size:13px; margin:0 0 28px; }
.demo-file { margin-bottom:24px; border:1px solid var(--line); border-radius:12px; padding:18px 22px; background:var(--panel); }
.demo-file-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }.demo-file h2 { margin:0 0 6px; font-size:17px; }.demo-file p { font-size:13px; color:var(--muted); margin:6px 0; overflow-wrap:anywhere; }.demo-file-heading>.button { flex-shrink:0; }
#demo-import-review { border-top:1px solid var(--line); margin-top:16px; padding-top:12px; }.demo-file-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
@media(max-width:600px) { .demo-file { padding:16px; }.demo-file-heading { flex-direction:column; align-items:start; }.demo-file-actions>.button { width:100%; } }
.demo-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; }
.demo-library { border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--panel); }.demo-library h2 { font-size:18px; margin:10px 0 20px; }.demo-library .field { margin-bottom:12px; }
.demo-presets { display:grid; gap:8px; max-height:690px; overflow:auto; padding:2px 5px 2px 2px; scrollbar-width:thin; }
.demo-preset { display:flex; flex-direction:column; gap:4px; padding:13px; border:1px solid var(--line); border-radius:8px; color:var(--text); text-decoration:none; background:var(--bg); }.demo-preset:hover,.demo-preset[aria-current] { border-color:#83a761; background:var(--soft); }.demo-preset[aria-current] { box-shadow:inset 3px 0 #83a761; }.demo-preset span { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; }.demo-preset strong { font-size:14px; }.demo-preset small { color:var(--muted); font-size:12px; }
.demo-workbench { min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:28px; }
.demo-toolbar { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:24px; }.demo-toolbar h2 { font-size:27px; letter-spacing:-.7px; margin:8px 0; }.demo-toolbar p { font-size:13px; color:var(--muted); margin:0; }.demo-live { white-space:nowrap; font-size:11px; padding:6px 9px; border:1px solid var(--line); border-radius:6px; }.demo-live span { color:#86ac59; margin-right:5px; }
.demo-settings { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; }.playground .field { min-width:0; }.playground .field input,.playground .field select,.playground .field textarea { width:100%; min-width:0; background:var(--bg); color:var(--text); border:1px solid var(--line); }.playground .field span { display:block; font-size:12px; margin-bottom:6px; }
.demo-stage-head,.demo-section-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:26px; }.demo-stage-head h3,.demo-section-head h3 { font-size:17px; margin:0; }.demo-stage-head>span,.demo-section-head h3 span { font-size:12px; color:var(--muted); font-weight:400; }.demo-hint { font-size:12px; color:var(--muted); margin:8px 0 14px; }
#demo-stage { width:100%; display:block; background:#263138; border:1px solid #526268; border-radius:10px; touch-action:pan-y; }
.demo-stage-floor { fill:#303f46; stroke:#829196; stroke-width:2; }.demo-grid { stroke:#9aadb9; stroke-width:1; opacity:.14; }.demo-stage-label { fill:#c4d1d5; font:13px "Segoe UI",sans-serif; letter-spacing:1.5px; text-anchor:middle; }
.demo-marker { cursor:grab; touch-action:none; }.demo-marker:active { cursor:grabbing; }.demo-marker rect { fill:#c8dc9e; stroke:#e6f5cc; stroke-width:1; }.demo-marker text { fill:#1d3029; font:12px "Segoe UI",sans-serif; font-weight:650; text-anchor:middle; pointer-events:none; }.demo-marker circle { fill:#344a3e; }.demo-marker .demo-marker-number { fill:#eff8e4; font-size:11px; }.demo-marker:focus { outline:none; }.demo-marker:focus rect,.demo-marker[aria-pressed="true"] rect { stroke:#fff; stroke-width:4; }
.demo-position-settings { display:grid; grid-template-columns:1.4fr 1.5fr 1fr 1fr; gap:12px; margin-top:14px; padding:16px; background:var(--soft); border-radius:8px; }.demo-position-settings button { justify-self:start; }
.demo-table-scroll { overflow:auto; border:1px solid var(--line); border-radius:8px; }.demo-channel-table { min-width:720px; width:100%; border-collapse:collapse; font-size:12px; }.demo-channel-table th { text-align:left; color:var(--muted); background:var(--soft); padding:10px; }.demo-channel-table td { padding:7px 6px; border-top:1px solid var(--line); }.demo-channel-table th:first-child { width:35px; }.demo-channel-table th:nth-child(4) { width:108px; }.demo-channel-table th:last-child { width:38px; }.demo-channel-table input,.demo-channel-table select { width:100%; min-width:0; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:5px; padding:8px 6px; font:inherit; }.demo-channel-table button { border:1px solid var(--line); background:var(--soft); color:var(--text); min-width:32px; min-height:36px; cursor:pointer; }
.demo-notes { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:25px 0; }.demo-notes textarea { resize:vertical; min-height:130px; }.demo-export { padding-top:18px; border-top:1px solid var(--line); }.demo-export p { font-size:12px; color:var(--muted); }.demo-export>div { display:flex; gap:10px; flex-wrap:wrap; }.demo-export .button { font-size:13px; }.demo-status { font-size:12px; color:var(--muted); min-height:20px; margin-bottom:0; }
.demo-next { display:flex; align-items:center; justify-content:space-between; gap:28px; border-top:1px solid var(--line); margin:36px 0 0; padding:26px 0 0; }.demo-next h2 { font-size:22px; margin:0 0 8px; }.demo-next p { font-size:14px; color:var(--muted); }.demo-next .button { white-space:nowrap; }
#demo-print-report { display:none; }.playground [hidden] { display:none !important; }
@media(max-width:1100px) { .demo-layout { grid-template-columns:220px minmax(0,1fr); gap:18px; }.demo-workbench { padding:20px; }.demo-toolbar { flex-direction:column; gap:10px; }.demo-position-settings { grid-template-columns:1fr 1fr; }.demo-heading-number { padding:12px 20px; } }
@media(max-width:800px) { .demo-heading-number { display:none; }.demo-layout { grid-template-columns:1fr; }.demo-presets { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:210px; }.demo-library .demo-js { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.demo-library h2 { margin-bottom:16px; }.demo-heading { padding-top:5px; }.demo-settings { grid-template-columns:1fr 1fr; }.demo-settings>.field:first-child { grid-column:1/-1; }.demo-next { flex-direction:column; align-items:start; } }
@media(max-width:480px) { .playground.container { padding:24px 14px 45px; }.demo-workbench,.demo-library { padding:16px; }.demo-notes { grid-template-columns:1fr; }.demo-heading h1 { letter-spacing:-1px; }.demo-heading p { font-size:14px; }.demo-library .demo-js { grid-template-columns:1fr; gap:0; }.demo-export .button { width:100%; }.demo-position-settings { padding:12px; gap:10px; } }
@media print {
  @page { margin:16mm; }
  body { background:white !important; color:#17242b !important; }
  .header,footer,#privacy-notice,.playground>*,#demo-data { display:none !important; }
  .playground.container { margin:0; padding:0; max-width:none; min-height:0; }
  #demo-print-report { display:block !important; font-size:10pt; color:#17242b; }
  #demo-print-report h1 { font-size:24pt; margin:0 0 10px; } #demo-print-report h2 { font-size:15pt; margin:20px 0 8px; }
  #demo-print-report p { white-space:pre-wrap; overflow-wrap:anywhere; } #demo-print-report svg { width:100%; max-height:230px; }
  #demo-print-report .demo-stage-floor { fill:#eff2f1; stroke:#687d80; } #demo-print-report .demo-stage-label { fill:#344a53; }
  #demo-print-report table { border-collapse:collapse; width:100%; font-size:9pt; } #demo-print-report th,#demo-print-report td { border-bottom:1px solid #ccd3d6; text-align:left; padding:5px; overflow-wrap:anywhere; }
  #demo-print-report tr { break-inside:avoid; } #demo-print-report thead { display:table-header-group; } #demo-print-report .demo-print-warning { font-size:9pt; border-left:3px solid #617b4c; padding:8px 12px; }
  #demo-print-report th,#demo-print-report .eyebrow { color:#42534b !important; }
}