:root{--ink:#16181d;--panel:#1e2128;--panel-raised:#242832;--line:#2e323b;--text:#e8eaed;--muted:#8b919c;--red:#ff4545;--select:#38e0ff;--font-sans:system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--header-h:56px;--panel-w:320px;--btn-fixed-w:148px;--radius:6px;--gap:16px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--ink);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0;font-size:14px;line-height:1.6}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--text);outline-offset:2px}.app{grid-template-rows:var(--header-h) 1fr;height:100dvh;min-height:0;display:grid}.app--loading{background:var(--ink)}.workspace{grid-template-columns:var(--panel-w) 1fr;min-height:0;display:grid}.header{align-items:center;gap:var(--gap);padding:0 var(--gap);border-bottom:1px solid var(--line);background:var(--panel);display:flex}.header__brand{align-items:baseline;gap:10px;min-width:0;display:flex}.header__title{letter-spacing:.02em;white-space:nowrap;margin:0;font-size:15px;font-weight:600}.header__hud{font-family:var(--font-mono);color:var(--muted);letter-spacing:.08em;white-space:nowrap;font-size:11px}.header__spacer{flex:1}.header__actions{align-items:center;gap:10px;display:flex}.header__error{color:var(--red);font-size:12px}.help{display:flex;position:relative}.help__btn{border:1px solid var(--line);background:var(--panel-raised);width:26px;height:26px;font-family:var(--font-mono);color:var(--muted);cursor:pointer;border-radius:50%;place-items:center;padding:0;font-size:12px;transition:color .15s,border-color .15s;display:grid}.help__btn:hover,.help__btn[aria-expanded=true]{color:var(--text);border-color:#3c414d}.help__popover{z-index:20;width:min(360px, calc(100vw - 2 * var(--gap)));border:1px solid var(--line);background:var(--panel-raised);border-radius:8px;padding:16px;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 18px 48px #0000008c}.help__section+.help__section{margin-top:14px}.help__label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;font-size:10px;font-weight:500}.help__list{color:var(--text);margin:0;padding-left:1.15em;font-size:12px;line-height:1.65}.help__list li+li{margin-top:3px}.help__list ::marker{color:var(--muted)}.help__list li::marker{color:var(--muted)}.btn:disabled{opacity:.55;cursor:default}.preview-toggle[aria-pressed=true]{border-color:var(--select);background:color-mix(in srgb, var(--select) 14%, transparent);color:var(--select)}.preview-toggle[aria-pressed=true]:hover{background:color-mix(in srgb, var(--select) 20%, transparent);border-color:var(--select)}.btn{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-raised);cursor:pointer;justify-content:center;align-items:center;gap:7px;padding:7px 14px;transition:background-color .15s,border-color .15s;display:inline-flex}.btn svg{flex:none}.btn:hover{background:#2a2f3a;border-color:#3c414d}.btn--primary{background:var(--text);border-color:var(--text);color:var(--ink);font-weight:600}.btn--primary:hover{background:#fff;border-color:#fff}.btn--sm{padding:4px 10px;font-size:12px}.btn--fixed{width:var(--btn-fixed-w);white-space:nowrap}.btn--block{width:100%;display:flex}.field{margin-top:10px}.field__label{color:var(--muted);justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;font-size:12px;display:flex}.field__value{font-family:var(--font-mono);color:var(--text);font-size:11px}.field__row{align-items:center;gap:8px;display:flex}.field__stack{gap:8px;display:grid}.color{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-raised);cursor:pointer;width:40px;height:30px;padding:2px}input[type=range]{width:100%;accent-color:var(--text)}.textarea{border:1px solid var(--line);border-radius:var(--radius);background:var(--ink);resize:vertical;width:100%;padding:8px 10px;font-size:13px;line-height:1.5}.btn--on{background:var(--text);border-color:var(--text);color:var(--ink);font-weight:600}.btn--danger{color:var(--red);border-color:color-mix(in srgb, var(--red) 40%, var(--line))}.btn--danger:hover{background:color-mix(in srgb, var(--red) 14%, transparent);border-color:var(--red)}.segmented{border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:repeat(3,1fr);display:grid;overflow:hidden}.segmented--compact{font-family:var(--font-mono);align-items:stretch;display:inline-flex}.segmented__icon{background:var(--panel-raised);color:var(--muted);place-items:center;padding:0 7px;display:grid}.segmented--compact .segmented__item{letter-spacing:.1em;padding:6px 9px;font-size:11px}.segmented__item{border:none;border-left:1px solid var(--line);background:var(--panel-raised);color:var(--muted);cursor:pointer;padding:6px 4px;font-size:12px;transition:background-color .15s,color .15s}.segmented__item:first-child{border-left:none}.segmented__item:hover{color:var(--text)}.segmented__item--on{background:var(--text);color:var(--ink);font-weight:600}.hint{color:var(--muted);margin:8px 0 0;font-size:11px;line-height:1.5}.hint--error{color:var(--red)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.swatches{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.swatch{border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;height:34px;padding:0;transition:border-color .15s,box-shadow .15s}.swatch:hover{border-color:#4a5160}.swatch--active{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}.panel{border-right:1px solid var(--line);background:var(--panel);flex-direction:column;min-height:0;display:flex;overflow:hidden}.section{padding:12px var(--gap);border-bottom:1px solid var(--line);flex:none}.section--inspector{scrollbar-gutter:stable;border-bottom:none;flex:1;min-height:0;transition:background-color .15s,box-shadow .15s;overflow-y:auto}.section--inspector.is-active{background:color-mix(in srgb, var(--select) 6%, transparent);box-shadow:inset 3px 0 0 var(--select)}.section__title{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 8px;font-size:10px;font-weight:500;display:flex}.section.is-collapsed .section__title{margin-bottom:0}.section__toggle{width:100%;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;gap:8px;padding:0;transition:color .15s;display:flex}.section__toggle:hover{color:var(--text)}.section__chevron{flex:none;transition:transform .15s}.section__toggle[aria-expanded=false] .section__chevron{transform:rotate(-90deg)}@media (prefers-reduced-motion:reduce){.section__chevron{transition:none}}.badge{border:1px solid var(--line);letter-spacing:.06em;text-transform:none;color:#6b7280;border-radius:999px;flex:none;padding:2px 8px}.badge--on{border-color:color-mix(in srgb, var(--select) 55%, transparent);background:color-mix(in srgb, var(--select) 16%, transparent);color:var(--select)}html[lang=ja] .section__title{font-family:var(--font-sans);letter-spacing:.08em;font-size:11px;font-weight:600}.stage{padding:var(--gap);background:radial-gradient(ellipse at 50% 0%, #1b1e25 0%, var(--ink) 70%), repeating-linear-gradient(45deg, transparent 0 12px, #ffffff03 12px 13px);place-items:center;min-width:0;min-height:0;display:grid}.stage__frame{width:100%;max-width:min(100%, calc((100dvh - var(--header-h) - var(--gap) * 2) * 16 / 9));flex-direction:column;gap:8px;min-width:0;display:flex}.canvas-layer{position:relative}.canvas-editor{resize:none;white-space:pre;background:0 0;border:none;outline:none;margin:0;padding:0;position:absolute;overflow:hidden}.stage__canvas{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);touch-action:none;background:#000;width:100%;display:block;box-shadow:0 18px 48px #00000073}.preview{position:relative}.preview .stage__canvas{border-color:color-mix(in srgb, var(--select) 45%, var(--line));box-shadow:0 0 0 1px color-mix(in srgb, var(--select) 25%, transparent), 0 18px 48px #00000073}.preview__status{border-radius:var(--radius);color:var(--text);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000009e;margin:0;padding:8px 12px;font-size:12px;line-height:1.5;position:absolute;inset:auto 12px 12px}.preview__status--error{color:var(--red)}@media (width<=900px){.workspace{grid-template-rows:auto 1fr;grid-template-columns:1fr;overflow-y:auto}.panel{border-right:none;border-bottom:1px solid var(--line);order:2;display:block;overflow:visible}.section--inspector{border-bottom:1px solid var(--line);overflow:visible}.stage{order:1}.stage__frame{max-width:100%}}