/* Motion Lab: calm paper, precise ink, dark instruments. */
.ws-content-page { padding-top:76px; }
.ws-intro { margin-bottom:48px; }
.ws-intro .page-title { max-width:23ch; }
.ws-note { color:var(--ink-2); font-size:var(--type-small-size); line-height:1.75; }
.ws-button:disabled { cursor:default; color:var(--ink-2); background:var(--surface-3); }
.ws-button-primary { background:var(--accent); border-color:var(--accent); color:white; }
.ws-toolbar,.ws-presets,.ws-next,.ws-keyframes,.ws-analysis-options,.ws-header-links,.ws-clinic-choices { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ws-presets { margin:18px 0; }
.ws-next { justify-content:space-between; margin-top:36px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; }
.ws-reading-block { margin-top:56px; }
.ws-reading-block > h2 { font-size:28px; margin-bottom:18px; }
.ws-reading-block > p { max-width:72ch; margin-bottom:18px; font-size:15px; color:var(--ink-2); }
.ws-learning-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ws-learn-group { margin-top:56px; }
.ws-learn-group-head { max-width:var(--measure-body); margin-bottom:24px; display:grid; gap:10px; }
.ws-learn-group-head .eyebrow { margin-bottom:0; }
.ws-learn-group-intro { margin:0; }
.ws-learn-featured { grid-template-columns:1fr; }
.ws-learn-featured .ws-learning-card { padding:36px 40px; }
.ws-learn-entry { grid-template-columns:1fr; }
.ws-learn-entry .ui-card-title { margin-top:10px; }
.ws-learn-entry .ws-card-open { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; width:100%; }
.ws-learning-card { display:grid; grid-template-columns:1fr auto; align-items:start; gap:6px 16px; padding:28px; }
.ws-learning-card .ui-card-title { grid-column:1; }
.ws-learning-card .ui-small { grid-column:1; margin-top:2px; }
.ws-learning-card .ui-tag { grid-column:2; grid-row:1; }
.ws-learning-card .ws-card-open { grid-column:1; margin-top:14px; color:var(--accent-ink); font-size:var(--type-small-size); }
.ws-learning-card h2,.ws-case-card h2 { font-size:var(--type-card-size); line-height:var(--type-card-leading); letter-spacing:var(--type-card-tracking); }
.ws-learning-card p,.ws-case-card p { font-size:var(--type-small-size); color:var(--ink-2); }
.ws-case-card > span { margin-top:auto; color:var(--accent-ink); font-size:var(--type-small-size); }
.ws-path-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; counter-reset:path; }
.ws-path-list li { counter-increment:path; display:grid; align-content:start; gap:10px; font-size:13px; }
.ws-path-link { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.ws-path-link:hover { color:var(--accent-ink); }
.ws-path-list li::before { content:"0" counter(path); color:var(--ink-3); font:11px var(--font-mono); }
.ws-path-list span { color:var(--ink-2); }
.ws-case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ws-case-card { padding:24px; overflow:hidden; }
.ws-case-art { width:100%; height:150px; border-radius:16px; background:var(--stage); display:flex; flex-direction:column; justify-content:center; gap:9px; padding:26px; }
.ws-case-art i { display:block; height:12px; width:calc(90% - var(--i) * 12%); border-radius:4px; background:var(--track-color); opacity:.8; transition:transform var(--motion-enter) var(--motion-ease); }
.ws-case-context { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:40px 0; }
.ws-case-context section { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:28px; }
.ws-case-context h2 { font-size:21px; margin-bottom:16px; }
.ws-case-context p { font-size:14px; color:var(--ink-2); line-height:1.85; margin-top:8px; }
.ws-case-context .ws-case-question { margin-top:0; color:var(--ink); font-size:15px; font-weight:550; }
.ws-alternatives { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ws-alternatives article { border-top:1px solid var(--line-strong); padding:22px 0; }
.ws-alternatives small { font:11px var(--font-mono); color:var(--ink-3); }
.ws-alternatives h3 { font-size:20px; margin:12px 0; }
.ws-alternatives p { font-size:14px; line-height:1.85; color:var(--ink-2); }
.ws-decision-list { list-style:decimal; padding-left:22px; font-size:15px; line-height:1.85; }
.ws-decision-list li { padding:8px; }
.ws-back { font-size:13px; display:inline-block; margin-bottom:30px; }
.workshop-page { max-width:1440px; padding:50px var(--page-gutter) 80px; margin:auto; }
.ws-header { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:30px; }
.ws-header h1 { font-size:clamp(30px,3vw,44px); margin-bottom:14px; }
.ws-header .ws-note { max-width:55ch; }
.ws-header-links { max-width:380px; justify-content:flex-end; font-size:12px; }
.ws-header-links a { padding:6px 10px; border-radius:20px; color:var(--ink-2); }
.ws-header-links a[aria-current] { background:var(--surface); color:var(--ink); }
.ws-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:24px; }
.ws-tabs .ws-button { border:0; background:transparent; padding:11px 18px; }
.ws-tabs [aria-selected="true"] { color:var(--ink); background:var(--surface); box-shadow:var(--shadow-card); }
.ws-tabs [aria-selected="false"] { color:var(--ink-2); }
.ws-workbench { display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:24px; align-items:start; }
.ws-workbench.is-wide { grid-template-columns:minmax(0,1fr); }
.ws-main,.ws-inspector { min-width:0; }
.ws-stage { border-radius:24px; overflow:hidden; background:linear-gradient(145deg,#191a20,#101012); color:var(--stage-ink); isolation:isolate; }
.ws-canvas { height:390px; position:relative; overflow:hidden; }
.ws-stage-caption { position:relative; z-index:8; padding:14px 20px; font:10px/1.6 var(--font-mono); border-top:1px solid var(--stage-line); color:var(--stage-muted); min-height:45px; }
.ws-ambient { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,#5768ae66,transparent 70%); pointer-events:none; }
.ws-scene-badge { position:absolute; top:24px; left:24px; font:10px var(--font-mono); letter-spacing:.12em; color:var(--stage-muted); }
.ws-object { position:absolute; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:#23252d; box-shadow:0 18px 40px #0003; cursor:crosshair; }
.ws-cover { margin:12px; border-radius:10px; overflow:hidden; background:linear-gradient(130deg,#6f70e5,#79b4d0); display:flex; gap:10px; align-items:center; justify-content:center; }
.ws-cover i { display:block; width:23px; height:65%; background:#fff4; border:1px solid #fff5; transform:skewY(-15deg); border-radius:40px; }
.ws-cover i:nth-child(2) { height:85%; }.ws-cover i:nth-child(3) { height:45%; }
.ws-object-title { padding:0 18px; font-size:17px; font-weight:600; color:#fff; position:relative; }
.ws-object-content { padding:12px 18px; font-size:12px; color:#c0c3d0; line-height:1.8; }
.ws-fake-action { display:inline-block; margin-top:12px; color:#c7d6ff; font-size:11px; }
.ws-save-check { margin:22px 18px 16px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#64d7be25; color:#64d7be; }
.ws-stage[data-scene="filter"] .ws-object { background:transparent; border:0; box-shadow:none; overflow:visible; }
.ws-list-row { position:absolute; inset-inline:0; top:calc(var(--row,0) * 56px); height:48px; display:flex; align-items:center; gap:10px; padding:12px; font-size:13px; background:#272a33; border:1px solid #ffffff18; border-radius:10px; }
.ws-list-row[data-row="1"] { top:56px; }.ws-list-row[data-row="2"] { top:112px; }.ws-list-row[data-row="3"] { top:168px; }
.ws-list-row i { width:8px; height:8px; border-radius:50%; background:#7182ff; }
.ws-list-row small { margin-left:auto; font-size:10px; color:#bbbfcf; }
.ws-filter-count { position:absolute; top:238px; color:#c3c8da; font:12px var(--font-mono); }
.ws-path { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; }
.ws-ghost { position:absolute; border:1px solid #9dabff; border-radius:20px; z-index:5; pointer-events:none; }
.ws-stage[data-boundaries="true"] [data-track] { outline:1px dashed #8b9cff99; outline-offset:-1px; }
.ws-stage[data-boundaries="true"] [data-selected="true"] { outline:2px solid #ffc36f; }
.ws-stage[data-focus="true"] [data-track] { filter:brightness(.6); }
.ws-stage[data-focus="true"] [data-selected="true"],.ws-stage[data-focus="true"] .ws-object:has([data-selected="true"]) { filter:none; }
.ws-stage[data-focus="true"] .ws-object[data-selected="true"] [data-track] { filter:none; }
.ws-stages { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.ws-stages.is-comparing { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ws-stages.is-single { grid-template-columns:1fr; }
.ws-stage-cell { min-width:0; }
.ws-compare-label { display:block; font:10px var(--font-mono); letter-spacing:.04em; color:var(--ink-2); margin-bottom:10px; }
.ws-playback { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:16px 0 8px; }
.ws-time { font:11px var(--font-mono); color:var(--ink-2); margin-left:auto; }
.workshop-page select,.ws-content-page select { max-width:100%; padding:9px 24px 9px 10px; background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:12px; }
.workshop-page input[type="range"],.ws-content-page input[type="range"] { width:100%; accent-color:var(--accent); min-height:26px; cursor:pointer; }
.ws-keyframes { justify-content:space-between; margin:6px 0 24px; }
.ws-keyframes button { background:transparent; border:0; min-height:32px; font-size:11px; padding:5px; color:var(--ink-2); }
.ws-mode-content { padding:24px; border:1px solid var(--line); border-radius:24px; background:var(--surface); margin-bottom:24px; }
.ws-mode-content > h2 { font-size:23px; line-height:1.35; margin-bottom:12px; }
.ws-mode-content > p { font-size:14px; line-height:1.85; color:var(--ink-2); margin-bottom:16px; }
.ws-recipe-caption { font-size:12px; color:var(--ink-2); margin:16px 0; }
.ws-inspector { padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:24px; position:sticky; top:88px; }
.ws-inspector h2 { font-size:23px; margin:14px 0; }.ws-fields { margin-top:22px; display:grid; gap:15px; }
.ws-fields label { display:grid; gap:7px; font-size:12px; color:var(--ink-2); }
.ws-fields input { width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:13px var(--font-mono); color:var(--ink); background:var(--surface-2); }
.ws-advice { margin-top:24px; border-top:1px solid var(--line); padding-top:20px; }.ws-advice h3 { font-size:13px; margin-bottom:12px; }.ws-advice p { color:var(--ink-2); font-size:12px; line-height:1.8; margin:10px 0; }
.ws-section-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:25px 0 16px; }.ws-section-heading h2 { font-size:18px; }.ws-section-heading span { font-size:11px; color:var(--ink-2); }
.ws-timeline { position:relative; padding:20px 0; border-block:1px solid var(--line); overflow:hidden; }
.ws-ruler { display:flex; justify-content:space-between; margin-left:110px; font:9px var(--font-mono); color:var(--ink-3); padding-bottom:10px; }
.ws-track-row { display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; align-items:center; height:50px; }
.ws-track-name { padding:8px 0; border:0; background:none; text-align:left; color:var(--ink-2); font-size:11px; }
.ws-track-lane { position:relative; height:36px; background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/25% 100%; }
.ws-track-bar { position:absolute; top:2px; height:32px; min-height:0; min-width:24px; padding:5px; overflow:hidden; white-space:nowrap; font-size:10px; border:1px solid transparent; border-radius:7px; color:#15151a; background:var(--track-color); opacity:.8; justify-content:flex-start; touch-action:pan-y; user-select:none; }
.workshop-page[data-mode="compose"] .ws-track-bar { cursor:ew-resize; touch-action:none; }
.ws-track-bar[data-selected="true"] { opacity:1; box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--ink-2); }
.ws-playhead { position:absolute; top:40px; bottom:16px; width:1px; background:var(--ink-2); pointer-events:none; opacity:.4; }
.ws-save-status { font-size:11px; color:var(--ink-2); margin-top:14px; }
.ws-analysis-options { font-size:12px; }.ws-analysis-options label { display:flex; align-items:center; gap:5px; padding:5px; }
.ws-delivery-text { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface-3); border:1px solid var(--line); border-radius:14px; padding:20px; font:12px/1.9 var(--font-mono); margin:18px 0; }
.ws-state-flow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }.ws-state-flow button { border-radius:9px; }.ws-state-flow button:not(:last-child)::after { content:" →"; }
.ws-delivery-tracks { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.ws-business { padding-top:10px; }.ws-business textarea { width:100%; resize:vertical; border:1px solid var(--line); border-radius:12px; padding:14px; font-size:14px; margin-bottom:12px; }.ws-business-result { font-size:12px; color:var(--ink-2); margin-top:12px; }
.ws-clinic-menu { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }.ws-clinic-workbench { display:grid; gap:18px; }.ws-clinic-workbench > h2 { font-size:28px; }.ws-clinic-analysis { border:1px solid var(--line); border-radius:24px; padding:28px; background:var(--surface); }.ws-clinic-analysis h3 { font-size:19px; margin:12px 0; }.ws-clinic-analysis p { font-size:14px; line-height:1.85; margin-bottom:18px; }
.mc-workbench { display:grid; gap:22px; padding:32px; border:1px solid var(--line); border-radius:28px; background:var(--surface); }.mc-workbench h2 { font-size:25px; }.mc-workbench > p { font-size:14px; color:var(--ink-2); }.mc-stage { position:relative; height:300px; border-radius:20px; background:var(--stage); overflow:hidden; }.mc-object { position:absolute; left:15%; top:calc(70px + var(--index,0) * 65px); width:48px; height:48px; border-radius:14px; background:#8b99ff; border:1px solid #ffffff40; }.mc-object[data-index="1"] { top:135px; background:#ffc36f; }.mc-object[data-index="2"] { top:200px; background:#67d9c0; }.mc-object span { display:none; }.mc-stage[data-ui="true"] .mc-object { width:110px; height:48px; border-radius:12px; display:grid; place-items:center; }.mc-stage[data-ui="true"] .mc-object span { display:block; font-size:13px; color:#1a2033; }.mc-variable { font-size:13px; }.mc-variable > div { display:flex; align-items:center; gap:16px; margin-top:10px; }.mc-variable span { white-space:nowrap; }
.ml-swatches { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }.ml-swatches > div { display:grid; gap:8px; font-size:13px; }.ml-swatches i { height:96px; display:block; border-radius:18px; border:1px solid var(--line); }.ml-swatches small { font:10px var(--font-mono); color:var(--ink-2); }.ml-type-spec { display:grid; gap:24px; padding:32px; border:1px solid var(--line); border-radius:24px; background:var(--surface); margin:24px 0; }.ml-type-spec small { display:block; font:10px var(--font-mono); color:var(--ink-3); margin-bottom:12px; }.ml-type-display { font-size:clamp(32px,5vw,64px); letter-spacing:-.05em; font-weight:600; }.ml-motion-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.ml-motion-grid article { display:flex; align-items:flex-start; flex-direction:column; gap:14px; padding:20px; border:1px solid var(--line); background:var(--surface); border-radius:24px; }.ml-motion-grid h3 { font-size:20px; }.ml-motion-grid p { font-size:13px; color:var(--ink-2); }.ml-motion-grid code { font-size:11px; }.ml-motion-sample { height:100px; background:var(--surface-3); border-radius:14px; width:100%; display:grid; place-items:center; }.ml-motion-chip { padding:12px 20px; background:var(--ink); color:white; border-radius:12px; font:12px var(--font-mono); }
.ws-home-entry { max-width:var(--max-width); margin:0 auto; padding:0 var(--page-gutter) 64px; }.ws-home-entry-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }.ws-home-entry h2 { font-size:clamp(25px,3vw,36px); }.ws-home-entry-head p { font-size:13px; color:var(--ink-2); max-width:40ch; }.ws-home-compare { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.ws-home-compare .ws-canvas { height:290px; }.ws-home-compare h3 { font-size:17px; margin:16px 0 8px; }.ws-home-compare > div > p { color:var(--ink-2); font-size:12px; margin-bottom:14px; }.ws-home-entry .ws-toolbar { margin-top:20px; }
@media(hover:hover) and (pointer:fine) {
 .ws-learning-card:hover,.ws-case-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); text-decoration:none; border-color:var(--line-strong); }
 .ws-case-card:hover .ws-case-art i { transform:translateX(calc(var(--i) * 6px)); }
}
@media(max-width:1080px) { .ws-workbench { grid-template-columns:minmax(0,1fr) 230px; gap:16px; }.ws-inspector { padding:18px; }.ws-stages.is-comparing { grid-template-columns:1fr; }.ws-case-grid { grid-template-columns:1fr; }.ws-case-card { display:grid; grid-template-columns:180px 1fr; }.ws-case-art { grid-row:1/6; }.ws-header { flex-direction:column; align-items:flex-start; }.ws-header-links { justify-content:flex-start; max-width:none; }.ws-home-compare { grid-template-columns:1fr; }.ws-home-compare .ws-canvas { height:320px; } }
@media(max-width:760px) {
 .workshop-page { padding-top:32px; }.ws-workbench { grid-template-columns:1fr; }.ws-inspector { position:static; }.ws-fields { grid-template-columns:1fr 1fr; }.ws-learning-grid,.ws-case-context,.ws-alternatives { grid-template-columns:1fr; }.ws-path-list { grid-template-columns:1fr; gap:20px; }.ws-path-list li { grid-template-columns:24px 80px 1fr; }.ws-path-list li::before { margin-top:4px; }.ws-intro { margin-bottom:32px; }.ws-content-page { padding-top:48px; }.ws-canvas { height:350px; }.ws-tabs .ws-button { padding:10px 12px; white-space:nowrap; }.ws-tabs { gap:0; }.ws-mode-content { padding:20px; }.ws-time { margin-left:0; }.ws-ruler { margin-left:80px; }.ws-track-row { grid-template-columns:70px minmax(0,1fr); }.ws-track-name { font-size:10px; }.ml-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); }.ml-motion-grid { grid-template-columns:1fr 1fr; }.ws-case-card { display:flex; }.mc-workbench { padding:20px; }.mc-stage[data-ui="true"] .mc-object { width:84px; }.ws-home-entry-head { flex-direction:column; align-items:flex-start; }
}
@media(max-width:440px) { .ml-motion-grid { grid-template-columns:1fr; }.ws-playback .ws-button { padding-inline:10px; }.ws-mode-content > h2 { font-size:21px; }.ws-learning-card { padding:24px; }.ws-tabs .ws-button { padding:10px; font-size:11px; }.ws-home-entry .ws-canvas { height:320px; } }
:root[data-motion="reduced"] .ws-learning-card:hover,:root[data-motion="reduced"] .ws-case-card:hover { transform:none; }
@media(prefers-reduced-motion:reduce) { .ws-learning-card:hover,.ws-case-card:hover,.ws-case-card:hover .ws-case-art i { transform:none; } }
.foundation-workshop-links { display:flex; flex-wrap:wrap; gap:18px; padding-block:30px 0; font-size:12px; }
.filter-chip,.filter-search,.motion-setting,.sheet-close,.sheet-step { transition-timing-function:var(--motion-ease); }
.filter-chip:active { transform:scale(.97); }
@media(prefers-reduced-transparency:reduce) { .site-header { background:var(--bg); } }
.workshop-page :is(button,input,select,textarea,a,[tabindex]),.ws-content-page :is(button,input,select,textarea,a,[tabindex]),.ws-home-entry :is(button,a) { scroll-margin-top:calc(var(--header-h) + 24px); scroll-margin-bottom:28px; }
:root[data-motion="reduced"] .ws-button:active,:root[data-motion="reduced"] .filter-chip:active { transform:none; }
.ws-tabs { position:sticky; top:var(--header-h); z-index:30; padding-top:10px; background:var(--bg); }
.ws-inspector { top:calc(var(--header-h) + 76px); }