.wt-scrollbar{--sb-accent:#2563eb;--sb-ink:#0f172a;--sb-muted:#64748b;--sb-line:#e2e8f0;--sb-card:#fff;--sb-soft:#f8fafc;max-width:1220px}.wt-scrollbar *{box-sizing:border-box}.wt-scrollbar-hero{padding:34px 0 24px}.wt-scrollbar-hero h1{max-width:930px;margin:10px 0 12px;font-size:clamp(30px,4.4vw,56px);line-height:1.15;letter-spacing:-1.6px}.wt-scrollbar-hero>p{max-width:860px;color:var(--sb-muted);font-size:16px;line-height:2}.wt-scrollbar-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.wt-scrollbar-badges span{padding:7px 11px;border:1px solid #dbeafe;background:#eff6ff;border-radius:999px;color:#1d4ed8;font-size:12px;font-weight:800}.wt-scrollbar-workspace{display:grid;gap:18px}.wt-scrollbar-card{background:var(--sb-card);border:1px solid var(--sb-line);border-radius:24px;padding:22px;box-shadow:0 12px 35px rgba(15,23,42,.045)}.wt-scrollbar-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.wt-scrollbar-title-row{display:flex;gap:12px;align-items:flex-start}.wt-scrollbar-title-row h2,.wt-scrollbar-output-head h2{font-size:20px;margin:0 0 5px}.wt-scrollbar-title-row p,.wt-scrollbar-output-head p{margin:0;color:var(--sb-muted);font-size:13px;line-height:1.85}.wt-scrollbar-step{display:grid;place-items:center;min-width:38px;height:38px;border-radius:13px;background:#eff6ff;color:#2563eb;font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.wt-scrollbar-preview-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.wt-scrollbar-segment{display:flex;gap:5px;padding:4px;background:#f1f5f9;border-radius:13px}.wt-scrollbar-segment button{border:0;background:transparent;border-radius:9px;padding:8px 12px;font-weight:800;cursor:pointer;color:#475569}.wt-scrollbar-segment button.is-active{background:#0f172a;color:#fff;box-shadow:0 3px 10px rgba(15,23,42,.14)}.wt-scrollbar-toggle{display:flex;align-items:center;gap:7px;color:#475569;font-size:12px;font-weight:700}.wt-scrollbar-stage{position:relative;margin-top:18px;border-radius:22px;padding:28px 40px 42px 28px;background:#eef2f7;transition:.2s;overflow:hidden}.wt-scrollbar-stage.is-dark{background:#101827}.wt-scrollbar-stage.is-color{background:linear-gradient(135deg,#dbeafe,#ede9fe 48%,#fce7f3)}.wt-scrollbar-axis-label{position:absolute;z-index:2;font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.4px;color:#64748b}.wt-scrollbar-axis-label-v{right:12px;top:50%;transform:rotate(90deg) translateX(50%);transform-origin:right center}.wt-scrollbar-axis-label-h{bottom:15px;left:50%;transform:translateX(-50%)}.wt-scrollbar-preview{height:440px;overflow:scroll;background:#fff;color:#0f172a;border-radius:18px;border:1px solid rgba(148,163,184,.35);outline:none;scrollbar-gutter:stable}.wt-scrollbar-preview:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.2)}.wt-scrollbar-preview::-webkit-scrollbar{width:var(--wt-sb-w,12px);height:var(--wt-sb-h,12px)}.wt-scrollbar-preview::-webkit-scrollbar-track:vertical{background:var(--wt-sb-v-track,#e2e8f0);border-radius:var(--wt-sb-v-tr,10px)}.wt-scrollbar-preview::-webkit-scrollbar-track:horizontal{background:var(--wt-sb-h-track,#e2e8f0);border-radius:var(--wt-sb-h-tr,10px)}.wt-scrollbar-preview::-webkit-scrollbar-thumb:vertical{background:var(--wt-sb-v-thumb,#475569);border-radius:var(--wt-sb-v-r,10px);border:var(--wt-sb-v-b,3px) solid var(--wt-sb-v-track,#e2e8f0);background-clip:padding-box;min-height:var(--wt-sb-min,36px)}.wt-scrollbar-preview::-webkit-scrollbar-thumb:horizontal{background:var(--wt-sb-h-thumb,#475569);border-radius:var(--wt-sb-h-r,10px);border:var(--wt-sb-h-b,3px) solid var(--wt-sb-h-track,#e2e8f0);background-clip:padding-box}.wt-scrollbar-preview::-webkit-scrollbar-thumb:vertical:hover{background:var(--wt-sb-v-hover,#334155);background-clip:padding-box}.wt-scrollbar-preview::-webkit-scrollbar-thumb:horizontal:hover{background:var(--wt-sb-h-hover,#334155);background-clip:padding-box}.wt-scrollbar-preview::-webkit-scrollbar-thumb:vertical:active{background:var(--wt-sb-v-active,#1e293b);background-clip:padding-box}.wt-scrollbar-preview::-webkit-scrollbar-thumb:horizontal:active{background:var(--wt-sb-h-active,#1e293b);background-clip:padding-box}.wt-scrollbar-preview::-webkit-scrollbar-corner{background:var(--wt-sb-v-track,#e2e8f0)}.wt-scrollbar-stage.is-dark .wt-scrollbar-preview{background:#111827;color:#f8fafc;border-color:#334155}.wt-scrollbar-preview-content{padding:32px;min-width:1120px;min-height:850px}.wt-scrollbar-demo-hero{max-width:720px}.wt-scrollbar-demo-hero h3{font-size:30px;line-height:1.5;margin:12px 0}.wt-scrollbar-demo-hero p{color:#64748b;line-height:2}.wt-scrollbar-stage.is-dark .wt-scrollbar-demo-hero p{color:#94a3b8}.wt-scrollbar-demo-grid{display:grid;grid-template-columns:repeat(4,240px);gap:13px;margin-top:30px}.wt-scrollbar-demo-grid article{padding:18px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}.wt-scrollbar-stage.is-dark .wt-scrollbar-demo-grid article{background:#1e293b;border-color:#334155}.wt-scrollbar-demo-grid strong{font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#2563eb}.wt-scrollbar-demo-grid span{display:block;font-weight:900;margin:9px 0}.wt-scrollbar-demo-grid p{font-size:12px;line-height:1.8;color:#64748b}.wt-scrollbar-wide-row{width:1020px;margin-top:20px;padding:20px;background:#0f172a;color:#fff;border-radius:16px;display:flex;align-items:center;gap:24px}.wt-scrollbar-wide-row span{font-weight:900;white-space:nowrap}.wt-scrollbar-wide-row i{display:block;width:100px;height:8px;border-radius:999px;background:#334155}.wt-scrollbar-tall-list{display:grid;gap:10px;margin-top:24px;width:520px}.wt-scrollbar-tall-list b{font-size:13px}.wt-scrollbar-tall-list span{padding:15px 16px;border-radius:13px;background:#f8fafc;border:1px solid #e2e8f0}.wt-scrollbar-stage.is-dark .wt-scrollbar-tall-list span{background:#1e293b;border-color:#334155}.wt-scrollbar-preview-hint{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin-top:10px;color:#64748b;font-size:11px;font-weight:700}.wt-scrollbar-builder-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}.wt-scrollbar-controls-column,.wt-scrollbar-inspector{display:grid;gap:18px}.wt-scrollbar-inspector{position:sticky;top:22px}.wt-scrollbar-axis-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.wt-scrollbar-axis-mode button{border:1px solid var(--sb-line);background:#fff;border-radius:16px;padding:15px;text-align:right;cursor:pointer}.wt-scrollbar-axis-mode button.is-active{border-color:#60a5fa;background:#eff6ff;box-shadow:0 0 0 2px rgba(37,99,235,.08)}.wt-scrollbar-axis-mode strong,.wt-scrollbar-axis-mode small{display:block}.wt-scrollbar-axis-mode strong{font-size:14px;color:#0f172a}.wt-scrollbar-axis-mode small{font-size:11px;line-height:1.75;color:#64748b;margin-top:5px}.wt-scrollbar-notice{margin-top:12px;padding:11px 13px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:13px;color:#1e40af;font-size:11px;line-height:1.85}.wt-scrollbar-axis-tabs{display:flex;gap:7px;margin:18px 0 14px;padding:4px;background:#f1f5f9;border-radius:13px;width:max-content}.wt-scrollbar-axis-tabs button{border:0;background:transparent;border-radius:9px;padding:9px 15px;font-weight:850;color:#475569;cursor:pointer}.wt-scrollbar-axis-tabs button.is-active{background:#fff;color:#0f172a;box-shadow:0 2px 8px rgba(15,23,42,.08)}.wt-scrollbar-axis-pane{display:none}.wt-scrollbar-axis-pane.is-active{display:block}.wt-scrollbar-controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.wt-scrollbar-axis-pane .wt-scrollbar-controls-grid{margin-top:0}.wt-scrollbar-control{border:1px solid var(--sb-line);background:var(--sb-soft);border-radius:15px;padding:13px;min-width:0}.wt-scrollbar-control>span,.wt-scrollbar-target-grid label>span{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:850;color:#334155;margin-bottom:10px}.wt-scrollbar-control small{font-weight:600;color:#94a3b8}.wt-scrollbar-control>div:not(.wt-scrollbar-color){display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:8px;align-items:center}.wt-scrollbar-control input[type=range]{width:100%}.wt-scrollbar-control output{font:750 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#475569;text-align:left;direction:ltr}.wt-scrollbar-color{display:flex;align-items:center;gap:9px}.wt-scrollbar-color input[type=color]{width:46px;height:34px;padding:2px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}.wt-scrollbar-color code{font-size:12px;direction:ltr}.wt-scrollbar-control select,.wt-scrollbar-target-grid select,.wt-scrollbar-target-grid input{width:100%;height:42px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:0 10px;color:#0f172a}.wt-scrollbar-target-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin-top:18px}.wt-scrollbar-target-grid label{border:1px solid var(--sb-line);border-radius:15px;padding:14px;background:#f8fafc}.wt-scrollbar-target-grid small{display:block;margin-top:8px;color:#64748b;line-height:1.7;font-size:11px}.wt-scrollbar-target-grid code{direction:ltr}.wt-scrollbar-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.wt-scrollbar-options label{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--sb-line);border-radius:14px;padding:12px}.wt-scrollbar-options input{margin-top:4px}.wt-scrollbar-options strong,.wt-scrollbar-options small{display:block}.wt-scrollbar-options strong{font-size:12px}.wt-scrollbar-options small{color:#64748b;line-height:1.7;margin-top:2px;font-size:10px}.wt-scrollbar-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.wt-scrollbar-presets button{text-align:right;border:1px solid var(--sb-line);background:#fff;padding:13px;border-radius:15px;cursor:pointer}.wt-scrollbar-presets button:hover{border-color:#93c5fd;background:#f8fbff}.wt-scrollbar-preset-line{display:block;height:8px;border-radius:999px;margin-bottom:10px}.wt-scrollbar-presets strong,.wt-scrollbar-presets small{display:block}.wt-scrollbar-presets strong{font-size:12px}.wt-scrollbar-presets small{color:#64748b;margin-top:4px;font-size:10px}.wt-scrollbar-score{display:flex;align-items:end;gap:5px;margin:10px 0 14px}.wt-scrollbar-score strong{font-size:48px;line-height:1}.wt-scrollbar-score span{color:#94a3b8}.wt-scrollbar-contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wt-scrollbar-contrast-grid>div{display:flex;justify-content:space-between;gap:8px;background:#f8fafc;border:1px solid var(--sb-line);border-radius:12px;padding:10px;font-size:11px}.wt-scrollbar-contrast-grid strong{direction:ltr}.wt-scrollbar-health-list{display:grid;gap:8px;margin-top:12px}.wt-scrollbar-health-list>div{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.7;color:#475569}.wt-scrollbar-health-list i{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto;background:#22c55e}.wt-scrollbar-health-list .is-warn i{background:#f59e0b}.wt-scrollbar-health-list .is-info i{background:#3b82f6}.wt-scrollbar-health-list .is-bad i{background:#ef4444}.wt-scrollbar-support{display:grid;gap:7px;margin:10px 0}.wt-scrollbar-support span{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;background:#f8fafc;border-radius:10px;font-size:11px}.wt-scrollbar-support b.is-ok{color:#15803d}.wt-scrollbar-support b.is-warn{color:#b45309}.wt-scrollbar-browser p{color:#64748b;font-size:11px;line-height:1.85}.wt-scrollbar-reset{width:100%;height:44px;border:1px dashed #cbd5e1;border-radius:14px;background:#fff;color:#475569;font-weight:800;cursor:pointer}.wt-scrollbar-output-section{padding:0;overflow:hidden}.wt-scrollbar-output-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px}.wt-scrollbar-output-actions{display:flex;gap:8px;flex-wrap:wrap}.wt-scrollbar-code{margin:0;max-height:540px;overflow:auto;background:#0b1220;color:#dbeafe;padding:22px;font:600 12px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;text-align:left;white-space:pre;tab-size:2;border-radius:0 0 24px 24px}.wt-scrollbar [hidden]{display:none!important}@media(max-width:1000px){.wt-scrollbar-builder-grid{grid-template-columns:1fr}.wt-scrollbar-inspector{position:static;grid-template-columns:1fr 1fr}.wt-scrollbar-reset{grid-column:1/-1}.wt-scrollbar-section-head{flex-direction:column}.wt-scrollbar-preview-toolbar{width:100%;justify-content:space-between}.wt-scrollbar-options{grid-template-columns:1fr}.wt-scrollbar-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.wt-scrollbar-card{padding:16px;border-radius:18px}.wt-scrollbar-stage{padding:16px 28px 34px 14px}.wt-scrollbar-preview{height:390px}.wt-scrollbar-controls-grid,.wt-scrollbar-target-grid,.wt-scrollbar-axis-mode,.wt-scrollbar-inspector{grid-template-columns:1fr}.wt-scrollbar-presets{grid-template-columns:1fr 1fr}.wt-scrollbar-output-head{align-items:stretch;flex-direction:column}.wt-scrollbar-output-actions{display:grid;grid-template-columns:1fr 1fr}.wt-scrollbar-code{font-size:10px}.wt-scrollbar-axis-label-v{right:6px}}

/* v4.12 — persistent design workspace */
@media (min-width:1101px){
  .wt-scrollbar-workspace{grid-template-columns:minmax(410px,.95fr) minmax(0,1.08fr);gap:20px;align-items:start}
  .wt-scrollbar-preview-card{grid-column:1;grid-row:1;position:sticky;top:18px;align-self:start;z-index:8;box-shadow:0 18px 55px rgba(15,23,42,.10)}
  .wt-scrollbar-preview-card:before{content:"LIVE CANVAS · DUAL AXIS";display:inline-flex;margin-bottom:12px;padding:5px 9px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
  .wt-scrollbar-builder-grid{grid-column:2;grid-row:1;display:block;min-width:0}
  .wt-scrollbar-controls-column,.wt-scrollbar-side{display:grid;gap:18px}
  .wt-scrollbar-side{position:static;margin-top:18px}
  .wt-scrollbar-output-section{grid-column:1/-1}
  .wt-scrollbar-preview{height:clamp(340px,52vh,520px)}
  .wt-scrollbar-stage{padding:22px 34px 38px 22px}
}