:root{--ground: #f0f2f5;--ink-dark: #1c1b1a;--ink-light: #ffffff;--chrome: #ffffff;--chrome-ink: #1c1b1a;--accent: #3b82f6;--chrome-edge: rgba(0, 0, 0, .08);--chrome-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.1)}html,body,#root{margin:0;height:100%;overflow:hidden}body{background:var(--ground);color:var(--chrome-ink);font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;touch-action:none;-webkit-user-select:none;user-select:none}.stage{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.stage-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;pointer-events:none}.stage-badge{position:fixed;left:16px;bottom:16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.45;pointer-events:none}.toolbar{position:fixed;top:14px;left:14px;display:flex;align-items:center;gap:4px;padding:6px;border-radius:12px;background:color-mix(in srgb,var(--chrome) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 2px #0000000f,0 8px 24px #00000014}.toolbar .divider{width:1px;height:18px;background:#0000001a;margin:0 4px}.toolbar button,.object-menu button,.object-menu select,.object-menu input[type=number]{font:inherit;font-size:12.5px;color:var(--chrome-ink);border:0;border-radius:8px;background:transparent;padding:6px 10px;cursor:pointer}@media(hover:hover)and (pointer:fine){.toolbar button:hover,.object-menu button:hover,.toolbar-menu button:hover,.dev-panel button:hover{background:#0000000f}.toolbar button.active:hover{background:var(--accent)}}.toolbar button,.object-menu button,.toolbar-menu button,.dev-panel button{transition:transform .12s cubic-bezier(.22,1,.36,1)}.toolbar button:active:not(:disabled),.object-menu button:active:not(:disabled),.toolbar-menu button:active:not(:disabled),.dev-panel button:active:not(:disabled){transform:scale(.97)}.toolbar button.active,.segmented button.active{background:var(--accent);color:#fff}.toolbar button:disabled{opacity:.35;cursor:default}.object-menu{position:fixed;top:14px;right:14px;width:232px;padding:12px 14px 14px;border-radius:14px;background:var(--chrome);border:1px solid var(--chrome-edge);box-shadow:var(--chrome-shadow);font-size:12.5px}.object-menu h2{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;font-weight:600}.object-menu .hint{margin:-6px 0 8px;opacity:.5}.object-menu .row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}.object-menu .row>span:first-child{opacity:.7}.object-menu .row.column{flex-direction:column;align-items:stretch;gap:6px;padding:4px 0}.object-menu .row.actions{justify-content:flex-end;margin-top:8px;gap:4px}.object-menu select,.object-menu input[type=number]{background:#0000000d;padding:5px 8px;width:112px}.object-menu input[type=number]{width:64px;text-align:right}.object-menu .unit{opacity:.6}.object-menu input[type=range]{flex:1}.object-menu output{width:28px;text-align:right;font-variant-numeric:tabular-nums}.segmented{display:flex;gap:2px;background:#0000000d;border-radius:9px;padding:2px}.segmented button{padding:4px 8px;border-radius:7px}.palette{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer}.swatch.active{border-color:var(--chrome-ink)}.well{display:inline-flex;align-items:center;gap:6px;cursor:pointer;opacity:.8}.well input[type=color]{width:22px;height:22px;border:0;padding:0;background:none;border-radius:50%;cursor:pointer}.well input[type=color]::-webkit-color-swatch-wrapper{padding:0}.well input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:50%}button.danger{color:#c0392b}.label-editor{background:transparent}.label-editor:focus{outline:none}.stage-badge{pointer-events:none}.object-menu.leaving{opacity:0;transition:opacity .12s cubic-bezier(.22,1,.36,1);pointer-events:none}.app.dev-open .object-menu{right:calc(14px + var(--dev-width) + 10px);top:64px}.menu-host{position:relative}.toolbar-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;display:flex;flex-direction:column;padding:4px;border-radius:10px;background:var(--chrome);box-shadow:0 1px 2px #0000000f,0 8px 24px #0000001f}.toolbar-menu button{font:inherit;font-size:12.5px;color:var(--chrome-ink);text-align:left;border:0;border-radius:7px;background:transparent;padding:7px 10px;cursor:pointer}.toolbar-menu button:disabled{opacity:.35;cursor:default}:root{--dev-width: 268px}.dev-overlay{position:fixed;left:0;top:0;pointer-events:none}.dev-panel{position:fixed;top:14px;right:14px;bottom:14px;width:var(--dev-width);overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 16px;border-radius:14px;box-sizing:border-box;background:var(--chrome);border:1px solid var(--chrome-edge);box-shadow:var(--chrome-shadow);font-size:11.5px;color:var(--chrome-ink);-webkit-user-select:none;user-select:none;touch-action:pan-y}.dev-panel.closing{opacity:0;transition:opacity .12s cubic-bezier(.22,1,.36,1);pointer-events:none}.dev-panel h2{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;font-weight:600}.dev-panel header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding-bottom:6px}.dev-panel .dev-actions{display:flex;gap:2px}.dev-panel button{font:inherit;font-size:11.5px;color:var(--chrome-ink);border:0;border-radius:7px;background:#0000000d;padding:4px 8px;cursor:pointer}.dev-panel button:disabled{opacity:.35;cursor:default}.dev-panel .dev-note{width:100%;margin:0;opacity:.6}.dev-panel section{border-top:1px solid rgba(0,0,0,.07);padding:6px 0 4px}.dev-panel h3{margin:2px 0 4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.45;font-weight:600}.dev-row{display:grid;grid-template-columns:1fr 82px 44px;align-items:center;gap:6px;min-height:22px}.dev-row:has(input[type=checkbox]){grid-template-columns:1fr auto}.dev-row:has(.dev-choice){grid-template-columns:1fr auto}.dev-choice{display:inline-flex;gap:2px;padding:2px;border-radius:7px;background:#0000000f}.dev-choice button{font:inherit;font-size:10px;letter-spacing:.04em;border:0;border-radius:5px;background:transparent;padding:2px 7px;cursor:pointer;opacity:.7}.dev-choice button.on{background:var(--chrome, #fff);opacity:1;color:var(--accent);box-shadow:0 1px 2px #0000001f}.dev-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px}.dev-row.changed>span{opacity:1;color:var(--accent)}.dev-row input[type=range]{width:100%;margin:0;accent-color:var(--accent)}.dev-row output{text-align:right;font-variant-numeric:tabular-nums;font-size:10.5px}.dev-row output small,.dev-readout-row small{opacity:.5;margin-left:1px}.dev-readout-row{display:flex;justify-content:space-between;align-items:center;min-height:22px;font-variant-numeric:tabular-nums}.dev-rest{display:inline-block;padding:1px 7px;border-radius:99px;background:#0000000f;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.dev-rest.at-rest{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}.dev-link{color:var(--accent);text-decoration:none}body.testing{overflow:auto;touch-action:auto;-webkit-user-select:text;user-select:text;background:var(--chrome)}body.testing #root{height:auto;overflow:visible}.test-page{max-width:880px;margin:0 auto;padding:24px 16px 64px;font-size:13px}.test-page header{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;position:sticky;top:0;background:var(--chrome);padding:8px 0}.test-page h1{font-size:18px;margin:0}.test-page .summary{margin:0;opacity:.8}.test-page .bad{color:#c0392b}.test-page header button{font:inherit;border:0;border-radius:8px;background:#0000000f;padding:5px 10px;cursor:pointer}.test-file h2{display:flex;justify-content:space-between;font-size:12px;margin:18px 0 4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.test-file h2 small{opacity:.55;font-weight:400}.test-file ul{list-style:none;margin:0;padding:0}.test-file li{display:grid;grid-template-columns:40px 1fr 70px;gap:8px;padding:3px 0;border-top:1px solid rgba(0,0,0,.05)}.test-file li .mark{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.5;padding-top:2px}.test-file li.bad .mark{opacity:1;color:#c0392b;font-weight:700}.test-file li .suite{opacity:.5}.test-file li .ms{text-align:right;opacity:.55;font-variant-numeric:tabular-nums}.test-file li code{display:block;color:#c0392b;white-space:pre-wrap;font-size:11.5px;margin-top:2px}@media(prefers-reduced-motion:reduce){.toolbar button,.object-menu button,.toolbar-menu button,.dev-panel button{transition:none}.toolbar button:active,.object-menu button:active,.toolbar-menu button:active,.dev-panel button:active{transform:none}.object-menu.leaving,.dev-panel.closing{transition:none}}.dev-row.dev-renderer{grid-template-columns:1fr auto}.dev-renderer .segmented{display:flex;gap:2px}
