/* Shared access and embedding only. Each demo owns its palette and composition. */
:root.site-theme[data-demo]{--shell-height:44px;--display:var(--sans);--paper:var(--bg);--page:var(--bg);font-family:var(--sans)}
html[data-demo] body.suite-page{font:14px/1.65 var(--sans);background:var(--bg);color:var(--ink)}
html[data-demo] :is(button,input,select,textarea){font-family:inherit}
html[data-demo] .suite-nav{min-height:44px;padding:0 22px;gap:24px;font-size:10px;border-color:var(--line);background:var(--bg)}
html[data-demo] .suite-home{font:500 11px var(--sans);min-height:44px;gap:8px;white-space:nowrap}
html[data-demo] .suite-location{font-size:10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
html[data-demo] .suite-location b{margin:0 8px}
html[data-demo] .suite-actions{gap:12px}.suite-actions .demo-portfolio-link{font-size:10px!important;min-height:40px!important}
html[data-demo] .suite-nav .appearance-control{font-size:10px;padding:6px;min-height:38px;min-width:38px}
html[data-demo] .suite-page :focus-visible{outline:2px solid var(--accent);outline-offset:4px}
:root.site-theme[data-demo][data-embedded=true]{--shell-height:0px}
html[data-demo][data-embedded=true] .suite-nav{display:none}
html[data-demo] .suite-immersive{overflow:hidden}
html[data-demo] .suite-immersive .suite-nav{position:fixed;inset:0 0 auto}
html[data-demo] .suite-immersive header,html[data-demo] .suite-page[data-experience=regex]>header,html[data-demo] .suite-page[data-experience=compression]>header{display:none}
html[data-demo] .suite-immersive .experience-title{position:fixed;z-index:3;margin:0;pointer-events:none;color:#edf1ef}
html[data-demo] .suite-immersive .experience-title>span{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.65}
html[data-demo] .suite-immersive .experience-title h1{line-height:1.15;font-weight:500}
html[data-demo] .suite-immersive .experience-title p{font:12px/1.7 var(--sans);max-width:36ch;opacity:1;color:var(--muted)}
html[data-demo] .suite-immersive .experience-title #m{pointer-events:auto;cursor:pointer;min-height:40px}
.simulation-motion{position:fixed;right:20px;bottom:18px;z-index:7;min-height:40px;padding:8px 14px;border:1px solid #ffffff42;border-radius:5px;background:#10171ee8;color:#e7eaf1;font:11px var(--sans);cursor:pointer}
html[data-demo] .suite-immersive .cap{position:fixed;left:22px;bottom:18px;max-width:calc(100% - 175px);z-index:4;font:10px/1.7 var(--mono);color:#aebac8;pointer-events:none}
html[data-demo] .suite-immersive .experience-title button{font-size:11px}
@media(max-width:650px){html[data-demo] .suite-nav{padding:0 14px;gap:15px}html[data-demo] .suite-location{font-size:9px}html[data-demo] .suite-location b,html[data-demo] .suite-location>span{display:none}html[data-demo] .demo-portfolio-link{display:none!important}.simulation-motion{right:14px;bottom:14px;max-width:128px;font-size:10px;padding:7px 10px}html[data-demo] .suite-immersive .cap{left:14px;bottom:14px;font-size:9px;max-width:calc(100% - 155px)}}
@media(prefers-reduced-motion:reduce){html[data-demo] *{scroll-behavior:auto;transition:none!important}}

/* Product craft: composition and controls follow the task. */
html[data-demo] {--control-radius:6px;--control-height:42px}
html[data-demo] :is(button,input,select,textarea){font-variant-numeric:tabular-nums}
html[data-demo] select {padding-block:9px;padding-inline-start:12px;font-weight:450;line-height:1.4;border:1px solid var(--line)}
html[data-demo] :is(input,textarea)::placeholder{color:var(--muted);opacity:.8}
html[data-demo] :is(input,textarea):focus-visible{border-color:var(--accent)}
html[data-demo] button.primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--bg);filter:brightness(.94)}
html[data-demo] button:disabled {cursor:not-allowed}

/* Workspace pass: interaction before supporting detail. */

html[data-demo] .instrument-dock{position:fixed;z-index:8;right:24px;top:calc(var(--shell-height) + 24px);max-width:calc(100vw - 32px);color:var(--ink);font:13px/1.6 var(--sans)}
html[data-demo] .instrument-dock>summary{list-style:none;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:11px 16px;min-height:44px;box-shadow:0 3px 12px #0001;font:12px/1.6 var(--sans)}
html[data-demo] .instrument-dock>summary::-webkit-details-marker{display:none}
html[data-demo] .instrument-dock>summary:after{content:' +';margin-left:16px;color:var(--muted)}
html[data-demo] .instrument-dock[open]>summary:after{content:' −'}
html[data-demo] .instrument-dock[open]{width:300px;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:0 5px 20px #0002,0 20px 60px #0002;max-height:70dvh;overflow:auto}
html[data-demo] .instrument-dock[open]>summary{border:0;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;box-shadow:none;position:sticky;top:0;z-index:2}
html[data-demo] .instrument-body{padding:20px}
html[data-demo] .instrument-body label{display:block;font:11px/1.7 var(--mono);margin:0 0 20px;color:var(--muted)}
html[data-demo] .instrument-body label>span{display:flex;justify-content:space-between;gap:15px}
html[data-demo] .instrument-body :is(input[type=range],select){width:100%;margin-top:10px}
html[data-demo] .instrument-body output{font-variant-numeric:tabular-nums;color:var(--ink)}
html[data-demo] .instrument-body button{min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:var(--soft);color:var(--ink);font:12px var(--sans);cursor:pointer}
html[data-demo] .instrument-body>p{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 18px}
html[data-demo] .instrument-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:650px){html[data-demo] .instrument-dock{right:14px;top:auto;bottom:72px}html[data-demo] .instrument-dock[open]{max-height:65dvh;width:290px}}