.studio{--dock-space:84px;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar" "stage";height:100dvh;overflow:hidden;background:var(--bg);--studio-surface:rgba(255,255,255,0.9);--studio-shadow:var(--shadow);--studio-radius:var(--radius)}.studio--message{display:grid;place-items:center;grid-template-areas:none;grid-template-columns:1fr;padding:24px}.studio-bar{grid-area:bar;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-3);min-height:64px;margin:0;padding:8px 12px;border:1px solid rgba(31,26,46,.07);border-radius:0;background:var(--studio-surface);box-shadow:var(--studio-shadow);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);z-index:10}@media (max-width:860px){.studio-bar{margin:0}}.studio-bar__side{display:flex;align-items:center;gap:var(--space-2);min-width:0}.studio-bar__side--end{justify-content:flex-end}.studio-bar__side>.btn{flex:none}.studio-bar__title{min-width:80px;width:280px;flex:0 1 auto;height:36px;padding:0 8px;border:2px solid transparent;border-radius:var(--radius-s);background:transparent;font-size:17px;font-weight:800;text-overflow:ellipsis}.studio-bar__title:hover{border-color:var(--line)}.studio-bar__title:focus{outline:none;border-color:var(--ink);background:var(--paper)}.studio-bar__save{display:inline-flex;align-items:center;flex:none;gap:4px;color:var(--ink-mute);font-size:12px;font-weight:800;white-space:nowrap}.studio-bar__save[data-save=pending]{color:var(--ink-soft)}.studio-bar__save[data-save=error]{padding:3px 8px 3px 6px;border:var(--border-thin);border-color:var(--danger);border-radius:999px;background:#ffe0e3;color:#d42a3c}.studio-bar__tools{display:flex;align-items:center;gap:var(--space-2)}.studio-bar__history{margin-left:var(--space-3)}.studio-tool{position:relative;padding:0 12px 0 10px}.studio-tool[aria-pressed=true]{--btn-bg:var(--brand-soft);--btn-fg:var(--brand-deep);--btn-shadow:var(--shadow-s),var(--edge)}.studio-tool__badge{position:absolute;top:-9px;right:-9px;min-width:20px;padding:1px 4px;border:2px solid var(--ink);border-radius:10px;background:var(--card);font-size:11px;line-height:14px;text-align:center}.settings-menu{position:relative;display:flex}.settings-menu__list{position:absolute;top:calc(100% + 8px);right:0;z-index:6;display:grid;width:min(240px,calc(100vw - 16px));min-width:0;padding:6px;border:var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);animation:pop-in .18s var(--ease-pop)}.settings-menu__colors{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:8px 10px}.settings-menu__colors-label{min-width:0;overflow:hidden;font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.settings-menu__swatches{display:flex;flex:none;gap:6px}.settings-menu__swatch{width:22px;height:22px;padding:0;border:2px solid rgba(31,26,46,.22);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);cursor:pointer}.settings-menu__swatch:hover{border-color:var(--ink)}.settings-menu__swatch[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}.settings-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:8px 10px;border:0;border-radius:var(--radius-s);background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}.settings-menu__item:hover{background:var(--paper)}.settings-menu__switch{position:relative;flex:none;width:30px;height:18px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-deep);transition:background-color .15s}.settings-menu__switch:after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--ink);transition:transform .15s var(--ease-pop)}.settings-menu__item[aria-checked=true] .settings-menu__switch{background:var(--mint)}.settings-menu__item[aria-checked=true] .settings-menu__switch:after{transform:translateX(12px)}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.studio__stage{grid-area:stage;position:relative;min-width:0;min-height:0}.studio__canvas,.studio__intro{position:absolute;inset:0}.studio__intro{z-index:20;display:grid;place-items:center;overflow:auto;padding:clamp(16px,3vw,48px);background:rgba(250,248,245,.72);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);transition:opacity .6s ease}.studio__intro-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(100%,720px);min-height:100%;gap:clamp(2px,.5vh,6px)}.studio__intro-brand{display:block;width:min(58vw,680px);max-width:100%;max-height:min(42vh,430px);height:auto;object-fit:contain;-webkit-user-select:none;user-select:none}.studio__intro-start{display:block;width:min(24vw,220px);max-width:100%;padding:0;border:0;border-radius:999px;background:transparent;line-height:0;transition:transform .25s var(--ease-pop),filter .25s var(--ease)}.studio__intro-start img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}.studio__intro-start:hover{transform:translateY(-3px);filter:brightness(1.04)}.studio__intro-start:active{transform:translateY(0) scale(.98)}.studio__intro--leaving{opacity:0;pointer-events:none}.studio__loading{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:var(--ink-soft);background:var(--bg);pointer-events:none}.studio__intro-loading{font-size:22px;color:var(--ink-2)}@media (max-width:680px){.studio__intro{align-items:start;padding:12px}.studio__intro-content{min-height:100%;gap:4px}.studio__intro-brand{width:86vw;max-height:40vh}.studio__intro-start{width:min(56vw,220px)}}.studio__readout{position:absolute;left:16px;bottom:var(--dock-space);display:grid;gap:6px;width:184px;padding:8px 10px 9px;border:var(--border-thin);border-radius:var(--radius);background:var(--studio-surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);font-size:13px;font-weight:700;pointer-events:none}.studio__readout.studio__readout--follow{bottom:auto;z-index:3}.studio__tray-hint{position:absolute;z-index:3;display:flex;align-items:center;gap:6px;padding:7px 11px;border:var(--border-thin);border-radius:999px;background:var(--studio-surface);box-shadow:var(--shadow-s);color:var(--ink-2);font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none}.readout__head{display:flex;align-items:center;justify-content:space-between;gap:8px}.readout__coord{font-size:18px;line-height:1;white-space:nowrap}.readout__coord small{margin:0 3px 0 0;color:var(--ink-mute);font-family:var(--font-body);font-size:11px;font-weight:700}.readout__coord small:not(:first-child){margin-left:8px}.readout__verdict{padding:2px 7px;border-radius:999px;background:var(--paper-deep);color:var(--ink-soft);font-size:11px;white-space:nowrap}.readout__colors{display:flex;align-items:center;gap:6px;padding-top:6px;border-top:1px dashed var(--line)}.readout__chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-pixel);font-size:14px;line-height:1}.readout__chip i{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 2.5px,#000 3px);mask:radial-gradient(circle,transparent 2.5px,#000 3px)}.readout__arrow,.readout__empty{color:var(--ink-mute)}.studio__readout[data-state=match]{border-color:var(--mint);box-shadow:var(--shadow),inset 0 0 0 2px var(--mint-soft)}.studio__readout[data-state=match] .readout__verdict{background:var(--mint-soft);color:#137552}.studio__readout[data-state=miss],.studio__readout[data-state=off]{border-color:var(--brand);box-shadow:var(--shadow),inset 0 0 0 2px var(--brand-soft)}.studio__readout[data-state=miss] .readout__verdict,.studio__readout[data-state=off] .readout__verdict{background:#ffe0e3;color:#d42a3c}.studio__readout[data-state=occupied] .readout__verdict{background:var(--yellow-soft);color:#8a6400}.studio-dock{--dock-gap:12px;position:absolute;left:16px;right:16px;bottom:var(--dock-gap);z-index:2;height:60px;pointer-events:none}.studio-dock__slide{position:relative;height:100%;transition:transform .22s cubic-bezier(.22,1,.36,1)}.studio-dock[data-state=closed] .studio-dock__slide{transform:translateY(calc(100% + var(--dock-gap)))}.studio-dock[data-state=away] .studio-dock__slide{transform:translateY(calc(100% + var(--dock-gap) + 44px))}.studio-dock__tab{position:absolute;right:20px;bottom:100%;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px 0 8px;border:1px solid rgba(31,26,46,.07);border-bottom:0;border-radius:var(--radius-s) var(--radius-s) 0 0;background:var(--studio-surface);color:var(--ink);font-size:12px;font-weight:800;pointer-events:auto;cursor:pointer}.studio-dock__tab:hover{background:var(--butter-soft)}.studio-dock__tab .pixel{margin-left:2px;color:var(--ink-soft)}.studio-dock__body{display:flex;align-items:center;gap:var(--space-3);height:100%;padding:0 6px 0 8px;border:1px solid rgba(31,26,46,.07);border-radius:var(--studio-radius);background:var(--studio-surface);box-shadow:var(--studio-shadow);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);pointer-events:auto}.dock-summary{display:flex;align-items:center;gap:8px;flex:none;min-width:0}.dock-summary__thumb{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:3px;border:var(--border-thin);border-radius:var(--radius-s);background:var(--lav-soft)}.dock-summary__text{display:grid;gap:3px;width:132px;min-width:0}.dock-summary__count{font-size:17px;line-height:1;white-space:nowrap}.dock-summary__count small{color:var(--ink-mute);font-size:13px}.dock-summary__meter{display:block;height:6px;border:1.5px solid var(--ink);border-radius:999px;background:var(--bg-2);overflow:hidden}.dock-summary__meter i{display:block;height:100%;background:var(--mint);transition:width .3s ease}.dock-summary__note{overflow:hidden;color:var(--ink-soft);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.dock-summary__note em{color:var(--danger);font-style:normal}.dock-summary__note svg{vertical-align:-2px}.dock-summary[data-done] .dock-summary__note{color:#137552}.dock-colors{display:flex;gap:6px;flex:1 1;min-width:0;height:100%;margin:0;padding:0 0 0 var(--space-3);overflow-x:auto;overflow-y:hidden;border-left:var(--border-thin);list-style:none;scrollbar-width:thin;align-items:center}.dock-chip{position:relative;display:grid;justify-items:center;gap:2px;flex:none;width:44px;cursor:default}.dock-chip__swatch{display:grid;place-items:center;width:100%;height:24px;border:var(--border-thin);border-radius:6px;font-size:12px;box-shadow:inset -2px -2px 0 rgba(0,0,0,.12)}.dock-chip__count{color:var(--ink);font-size:13px;line-height:1}.dock-chip__bar{display:block;width:100%;height:3px;border-radius:999px;background:var(--bg-2);overflow:hidden}.dock-chip__bar i{display:block;height:100%}.dock-chip[data-short] .dock-chip__count{color:var(--danger)}.dock-chip[data-complete] .dock-chip__count{color:#1f9d6f}.dock-chip[data-complete],.dock-chip[data-idle]{opacity:.45}.dock-actions{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto;padding-left:6px;border-left:var(--border-thin)}@media (max-width:860px){.studio{--dock-space:146px}.studio-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"side end" "tools tools";row-gap:6px;padding:6px 8px}.studio-bar__side{grid-area:side}.studio-bar__side--end{grid-area:end}.studio-bar__tools{grid-area:tools;justify-self:center}.studio-bar__side .studio-bar__label{display:none!important}.studio-dock{--dock-gap:8px;left:8px;right:8px;height:auto}.studio-dock__body{flex-wrap:wrap;height:auto;padding:8px 8px 6px 10px}.dock-colors{order:3;flex-basis:100%;height:52px;padding:0;border-left:0}}.reference-dialog{width:min(1000px,calc(100vw - 32px));height:min(92dvh,1100px);max-width:none;max-height:none;padding:0;border:1px solid rgba(31,26,46,.08);border-radius:var(--radius-l);color:var(--ink);background:var(--card);box-shadow:var(--shadow-l)}.reference-dialog::backdrop{background:rgba(31,26,46,.28);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.reference-dialog[open]{display:flex;flex-direction:column}.reference-toolbar{flex:0 0 52px;display:flex;align-items:center;gap:20px;padding:0 16px;border-bottom:var(--border-thin)}.reference-toolbar strong{font-size:13px;margin-right:auto}.reference-toolbar label{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:11px}.reference-toolbar input{width:105px;accent-color:#3e6974}.reference-close{display:grid;place-items:center;width:32px;height:32px;border:var(--border-thin);border-radius:50%;color:var(--ink-2);background:var(--bg-2);cursor:pointer}.reference-scroll{flex:1 1;min-height:0;overflow:auto;text-align:center;background:var(--bg-2)}.reference-scroll canvas{display:block;max-width:none;height:auto;margin:0 auto}@media (max-width:680px){.reference-toolbar{gap:8px;padding:0 8px}.reference-toolbar strong{font-size:11px}.reference-toolbar input{width:58px}.reference-toolbar label{gap:4px;font-size:9px}}.debug-panel{position:absolute;top:12px;right:12px;z-index:4;width:264px;padding:8px 12px;border-radius:var(--radius-s);background:rgba(20,24,28,.86);color:#e8edf1;font:11px/1.45 ui-monospace,SF Mono,Menlo,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.debug-panel [data-bad]{color:#ff7a7e}.debug-panel__head{display:flex;align-items:center;gap:8px}.debug-panel__head strong{font-size:14px}.debug-panel__actions{display:flex;gap:4px;margin-left:auto}.debug-panel__actions button{display:inline-flex;align-items:center;padding:1px 6px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:transparent;color:inherit;font:inherit;cursor:pointer}.debug-panel__actions button:hover{background:rgba(255,255,255,.1)}.debug-panel__actions button:disabled{opacity:.4;cursor:default}.debug-panel__graph{display:block;margin:6px 0 2px;border-radius:3px;background:rgba(0,0,0,.3)}.debug-panel__rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 8px;margin:6px 0 0}.debug-panel__rows>div{display:contents}.debug-panel__rows dt{color:#9aa6b0}.debug-panel__rows dd{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.debug-panel__foot{margin:6px 0 0;color:#6f7b85}.perf-strip{position:absolute;top:12px;left:16px;z-index:2;display:flex;align-items:center;gap:10px;height:28px;padding:0 12px 0 10px;border:var(--border-thin);border-radius:999px;background:var(--card);box-shadow:var(--shadow-s);color:var(--ink-soft);font-size:12px;font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}.perf-strip [data-level=smooth]{--level:var(--mint)}.perf-strip [data-level=ok]{--level:var(--yellow)}.perf-strip [data-level=laggy]{--level:var(--pink)}.perf-strip__item{display:inline-flex;align-items:baseline;gap:3px}.perf-strip__item b{color:var(--ink);font-weight:800}.perf-strip__delay,.perf-strip__fps{align-items:center}.perf-strip__average,.perf-strip__delay{padding-left:10px;border-left:var(--border-thin)}.perf-strip__fps b{font-size:15px;line-height:1}.perf-strip__dot{width:8px;height:8px;margin-right:2px;border:2px solid var(--ink);border-radius:50%;background:var(--level)}.robot-panel{position:absolute;top:12px;right:16px;z-index:3;display:grid;gap:8px;width:248px}.studio__stage:has(.debug-panel) .robot-panel{right:292px}.robot-panel__head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;padding:0 4px 0 12px;border:var(--border-thin);border-radius:var(--radius-s);background:var(--card);box-shadow:var(--shadow-s)}.robot-panel__title{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;font-weight:800}.robot-panel__count{color:var(--ink-mute);font-size:13px}.robot-panel__add{justify-self:end}.robot-card{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 8px;border:var(--border-thin);border-radius:var(--radius-s);background:var(--card);box-shadow:var(--shadow-s)}.robot-card__avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border:var(--border-thin);border-radius:50%;color:var(--ink)}.robot-card[data-paused] .robot-card__avatar{filter:grayscale(.85);opacity:.7}.robot-card__body{display:grid;gap:3px;flex:1 1;min-width:0}.robot-card__name{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:13px;font-weight:800;white-space:nowrap}.robot-card__placed{color:var(--ink-mute);font-size:11px;font-weight:700}.robot-card__placed b{color:var(--ink);font-size:13px;font-weight:400}.robot-card__status{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;color:var(--ink-soft);font-size:12px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}.robot-card__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--mint)}.robot-card[data-paused] .robot-card__dot{background:var(--ink-mute)}.robot-card__actions{display:flex;align-items:center;gap:2px;flex:none}@media (max-width:680px){.robot-panel{top:8px;right:8px;width:220px}}.studio-piece{height:min(70dvh,760px);border-radius:var(--radius)}.studio-piece__empty{margin:0;padding:var(--space-6) 0;color:var(--ink-2);text-align:center}