:root{--toolbar-bg: #1d232b;--toolbar-ink: #f4f5f7;--panel-bg: #f4f5f7;--panel-ink: #1d232b;--muted-ink: #4a535e;--button-bg: #ffffff;--button-hover-bg: #e3e7ec;--button-ink: #1d232b;--button-border: #6b7480;--primary-bg: #1f5fa8;--primary-hover-bg: #184c87;--primary-ink: #ffffff;--pressed-bg: #1f5fa8;--pressed-ink: #ffffff;--notice-bg: #fff4e5;--notice-ink: #7a2e0e;--focus: #1f5fa8;--focus-on-dark: #ffb454;--radius: 6px;--gap: .5rem}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--panel-ink);background:var(--panel-bg)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.studio{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"toolbar" "view" "inspector" "palette"}.studio-view{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;z-index:0}.studio-view:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.toolbar,.palette,.inspector,.notice{position:relative;z-index:1;min-width:0}.toolbar{grid-area:toolbar;display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap);padding:.5rem .75rem;background:var(--toolbar-bg);color:var(--toolbar-ink)}.brand{font-weight:700;letter-spacing:.02em;margin-right:auto}.status{margin:0;min-width:4.5rem;font-size:.875rem}.panel-heading{margin:0 0 .375rem;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-ink)}.palette,.inspector{background:var(--panel-bg);color:var(--panel-ink);padding:.5rem .75rem}.palette{grid-area:palette;border-top:1px solid var(--button-hover-bg)}.palette-list{list-style:none;margin:0;padding:0 0 .25rem;display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior:contain}.palette-list>li{flex:0 0 auto}.inspector{grid-area:inspector;border-top:1px solid var(--button-hover-bg)}.hint{margin:0;color:var(--muted-ink)}.selection-name{margin:0 0 .25rem;font-weight:600}.selection-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.125rem .75rem;margin:0;font-variant-numeric:tabular-nums}.selection-rows dt{color:var(--muted-ink)}.selection-rows dd{margin:0;overflow-wrap:anywhere}.button{min-height:44px;padding:.5rem .875rem;font:inherit;font-weight:600;color:var(--button-ink);background:var(--button-bg);border:1px solid var(--button-border);border-radius:var(--radius);cursor:pointer}.button:hover{background:var(--button-hover-bg)}.button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.toolbar .button:focus-visible{outline-color:var(--focus-on-dark)}.button-primary{color:var(--primary-ink);background:var(--primary-bg);border-color:var(--primary-bg)}.button-primary:hover{background:var(--primary-hover-bg)}.button[aria-pressed=true]{color:var(--pressed-ink);background:var(--pressed-bg);border-color:var(--pressed-bg)}.palette-item{max-width:11rem;text-align:left;font-weight:500;font-size:.875rem;line-height:1.25}.palette-starter{border-color:var(--primary-bg);border-width:2px}.readout{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--button-hover-bg)}.readout[hidden],.readout [hidden],.frame-time[hidden]{display:none}.readout-heading{margin:0 0 .25rem;font-size:.8125rem;font-weight:700;color:var(--muted-ink)}.frame-time{font-size:.875rem;font-variant-numeric:tabular-nums}.notice{grid-area:view;align-self:center;justify-self:center;max-width:min(32rem,calc(100% - 2rem));margin:0;padding:.75rem 1rem;color:var(--notice-ink);background:var(--notice-bg);border-radius:var(--radius)}.notice[hidden]{display:none}@media(min-width:768px){.studio{grid-template-columns:13rem minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"toolbar toolbar" "palette view" "palette inspector"}.palette{border-top:0;border-right:1px solid var(--button-hover-bg);overflow-y:auto}.palette-list{flex-direction:column;overflow-x:visible}.palette-item{width:100%;max-width:none}.inspector{justify-self:end;width:min(20rem,100%);margin:0 .75rem .75rem 0;border:1px solid var(--button-hover-bg);border-radius:var(--radius)}}@media(min-width:1100px){.studio{grid-template-columns:14rem minmax(0,1fr) 17rem;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"toolbar toolbar toolbar" "palette view inspector"}.inspector{justify-self:stretch;width:auto;margin:0;border:0;border-left:1px solid var(--button-hover-bg);border-radius:0;overflow-y:auto}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}