/* Shared studio identity across all three renderers. */
:root{--ink:#0a0a0a;--muted:#606060;--line:#d9d9d9;--green:#ff0000;color-scheme:light}
body{background:#ffffff;color:var(--ink)}header{padding:20px 30px;border-color:var(--line);gap:20px}h1{font-weight:800;font-size:20px;letter-spacing:-.8px;text-transform:uppercase}header>span{display:none}.studio-link{color:var(--ink);text-decoration:none;font-size:14px;font-weight:750}.studio-link span{display:block;color:var(--muted);font:11px/1.6 system-ui,sans-serif}.studio-link:hover{color:var(--green)}main{grid-template-columns:minmax(0,1fr) 350px;height:auto;min-height:calc(100svh - 90px)}.view{height:calc(100svh - 90px);position:sticky;top:0;background:#ffffff}.screen{background:#ffffff;border-color:var(--line)}aside{padding:28px 26px;border-color:var(--line);gap:26px;overflow:visible}.stage{padding:28px 30px}.stage-head{border-bottom:1px solid var(--line);padding-bottom:12px}.mark,output,.rule code,a{color:var(--green)}.dimension-switch a{border-radius:0;border-color:#b8b8b8}.dimension-switch a[aria-current=page]{background:var(--green);border-color:var(--green);color:#ffffff}button,select{border-radius:0;background:#ffffff;border-color:#b8b8b8;color:var(--ink)}button{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}button:hover{background:#f0f0f0}button.primary{background:var(--green);color:#ffffff;border-color:var(--green)}button.primary:hover{background:#c90000}button:disabled{opacity:.4;cursor:wait}input[type=range]{accent-color:var(--green)}input#colorHex{background:#ffffff!important;border-color:#b8b8b8!important;border-radius:0!important}h2,.export h2{font:700 11px/1.5 system-ui,sans-serif;letter-spacing:1.5px;margin:0 0 14px}.export{border-bottom:1px solid var(--line);padding-bottom:22px}.export p,.studio-credit{font-size:12px;color:var(--muted)}.studio-credit{padding-top:22px;border-top:1px solid var(--line)}.studio-credit a{color:var(--muted);text-underline-offset:4px}.rule{margin-top:0;border-color:var(--line)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:4px}@media(max-width:720px){header{padding:18px 20px;gap:14px}h1{font-size:17px}.studio-link{font-size:12px}.studio-link span{font-size:10px}main{display:block}.view{position:relative;top:auto;height:58svh;min-height:350px}.stage{padding:20px}.screen{height:55svh;min-height:0}aside{padding:24px 20px;border-top:1px solid var(--line)}.dimension-switch{order:3;width:100%}.dimension-switch a{flex:1;text-align:center}}

/* Normalize inherited renderer colors for the light studio palette. */
body{color-scheme:light}.eyebrow,header span,small,.top,.bottom,.stage-foot,p,.hint,.ends,.rule p,.rule a{color:var(--muted)}.dimension-switch a{color:var(--ink)}.dimension-switch a[aria-current=page]{color:#fff}input#colorHex{color:var(--ink)!important}.rule h2,h2{color:var(--muted)}#error{background:#fff;color:#b00000;border:1px solid var(--line)}#colorError{color:#b00000!important}
/* Viewport shell with a fixed canvas and compact controls. */
html,body{height:100%;height:100dvh;overflow:hidden}#app{height:100%;display:flex;flex-direction:column;min-height:0}header{flex:0 0 auto;min-height:68px;padding:12px 22px;flex-wrap:nowrap}main{flex:1;min-height:0;height:auto;display:grid;grid-template-columns:minmax(0,1fr) 310px;overflow:hidden}.view{position:relative;top:auto;height:100%;min-height:0}.stage{min-height:0;padding:18px;overflow:hidden}.screen{min-height:0;height:auto;flex:1}.stage-head{margin-bottom:12px}.stage-foot{margin-top:10px}aside{min-height:0;overflow:hidden;padding:16px;gap:12px;display:flex;flex-direction:column}#control-panel{flex:none;font-weight:700;padding:8px;font-size:13px;min-height:34px}.control-pages{flex:1;min-height:0}.control-page{display:flex;flex-direction:column;gap:16px}.control-page[hidden]{display:none}.control-page section{min-width:0}.control-page label,.control-label{font-size:13px;margin-bottom:6px}.control-page output{font-size:12px}.control-page input[type=range]{min-height:24px;height:24px}.control-page select{padding:7px;font-size:12px;min-height:30px}.control-page button{padding:9px;font-size:11px}.control-page h2{margin-bottom:8px!important;font-size:12px!important}.control-page p{font-size:12px;line-height:1.4;margin-top:5px}.control-page input[style]{margin-bottom:5px!important}.control-page .rule{padding-top:0;border:0}.control-page .hint,.control-page .ends{font-size:11px}.export{flex:none;border-top:1px solid var(--line);border-bottom:0;padding:10px 0 0}.export h2{margin-bottom:8px}.export>p{display:none}.export #export-status:not(:empty){display:block;margin:4px 0 0;font-size:10px}.export button{padding:9px}.studio-credit{padding-top:8px;font-size:10px;flex:none}.studio-credit br{display:none}.studio-credit a{display:block}.top{top:16px}.bottom{bottom:16px;font-size:11px}.view .top,.view .bottom{left:18px;right:18px}input#colorHex{padding:7px!important}#patternColor{height:32px!important}
@media(max-width:720px){header{min-height:58px;padding:10px 14px;gap:10px;flex-wrap:wrap}h1{font-size:14px}.brand{gap:7px}.mark{font-size:21px}.studio-link{font-size:10px}.studio-link span{font-size:9px}.dimension-switch{order:3;width:100%}.dimension-switch a{padding:5px;font-size:12px}main{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,310px)}.view{height:100%;min-height:0}.stage{padding:10px 14px}.stage-head{padding-bottom:6px;margin-bottom:8px}.stage-foot{font-size:10px;margin-top:6px}.stage-foot .readout{font-size:10px}.screen{height:auto;min-height:0}aside{padding:10px 14px;gap:8px;border-left:0;border-top:1px solid var(--line)}.control-page{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.control-page>.buttons,.control-page>.controls{align-self:start}.control-page .rule{grid-column:1/-1}.control-page p,.control-page .hint,.control-page .ends{display:none}.control-page label{font-size:11px}.control-page output{font-size:11px}.control-page h2{font-size:10px!important}.control-page input[type=range]{height:20px;min-height:20px}.control-page .color-control{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.color-control label{margin:0!important}.color-control #patternColor{grid-column:1;grid-row:2}.color-control #colorHex{grid-column:2;grid-row:2}.studio-credit{display:none}.export{padding-top:6px}.export h2{display:none}.control-page .rule p{display:block;font-size:11px}.control-page .rule footer{padding-top:6px;font-size:10px}.control-page .rule footer a{margin:0}.control-page button{padding:7px}.control-page select{padding:5px;min-height:26px}#control-panel{padding:5px;min-height:28px}}
@media(max-height:600px) and (min-width:721px){header{min-height:52px;padding:8px 18px}aside{gap:7px;padding:10px 14px}.control-page{gap:7px}.control-page p,.control-page .hint,.control-page .ends{display:none}.studio-credit{display:none}.export h2{display:none}.control-page .rule p{display:block}}
@media(max-height:500px) and (max-width:720px){header{min-height:48px;padding:6px 12px}.studio-link{display:none}.dimension-switch{order:0;width:auto}.dimension-switch a{flex:none}main{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr)}aside{border-top:0;border-left:1px solid var(--line)}.stage-head,.stage-foot,.view .bottom{display:none}.control-page{gap:5px 10px}}
.studio-credit br::after{content:' '}.studio-credit a{word-spacing:1px}
@media(max-width:720px){.control-page>section:has(#light),.control-page>section:has(#xw){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px 12px}.control-page>section:has(#light) h2,.control-page>section:has(#xw) h2{grid-column:1/-1;margin:0!important}.control-page>section:has(#light) label,.control-page>section:has(#xw) label{margin:0}.control-page>section:has(#light) input,.control-page>section:has(#xw) input{margin:0!important}}
@media(max-height:500px) and (max-width:720px){main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,200px)}aside{border-left:0;border-top:1px solid var(--line)}.control-page .rule p{font-size:10px;line-height:1.2;margin:3px 0}.control-page .rule code{font-size:13px}}

/* All settings share one continuous panel. */
aside{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.control-panel{flex:none;min-height:0;gap:14px}
aside>.export,aside>.studio-credit{flex-shrink:0}
#lightColor{width:100%;height:32px;min-height:32px;padding:2px;border:1px solid #b8b8b8;background:#fff;cursor:pointer;margin-bottom:12px}
@media(max-width:720px){.control-panel{display:flex;gap:12px}.control-panel .color-control{display:grid}.control-panel>section:has(#light),.control-panel>section:has(#xw){display:block}.control-panel p,.control-panel .hint,.control-panel .ends{display:block}.control-panel .rule{margin-top:0}}

.mark{display:inline-flex;width:24px;height:24px;flex:0 0 24px;line-height:1}.mark svg{display:block;width:100%;height:100%}

header .brand{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;flex-shrink:0}header .brand h1{white-space:nowrap}
@media(max-width:720px){header .brand{gap:7px}}

/* Keep exports and credit above the independently scrolling controls. */
aside{overflow:hidden;scrollbar-gutter:auto}
.control-panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:4px}
aside>.export{border-top:0;padding-top:0}
aside>.studio-credit{display:block;border-top:0;border-bottom:1px solid var(--line);padding:0 0 10px}
@media(max-width:720px){aside>.studio-credit{font-size:10px;padding-bottom:6px}}