:root{--bg: #080a0d;--bg-1: #0d1014;--bg-2: #13171c;--bg-3: #1b2128;--fg: #ffffff;--fg-muted: #b5bdc7;--fg-subtle: #737d89;--cyan: #6bd1e0;--magenta: #e040b8;--green: #3fc763;--blue: #5964d3;--white: #ffffff;--red: #ff6060;--orange: #ffa25c;--yellow: #f8ff5c;--teal: #2ecbb4;--purple: #d74bec;--amber: #ffcc00;--lime: #a8e040;--emerald: #28c878;--pink: #ff64b5;--cyan-dim: #3d8c9a;--magenta-dim: #a82888;--green-dim: #2d8a42;--blue-dim: #3e479e;--red-dim: #cc3a3a;--orange-dim: #cc6a28;--yellow-dim: #9c9e00;--teal-dim: #1e8a78;--purple-dim: #9e2cb8;--amber-dim: #b89000;--lime-dim: #609800;--emerald-dim: #1a9055;--pink-dim: #cc3d88;--surface-cyan: rgba(107, 209, 224, .12);--surface-magenta: rgba(224, 64, 184, .12);--surface-green: rgba(63, 199, 99, .12);--surface-blue: rgba(89, 100, 211, .12);--surface-red: rgba(255, 96, 96, .12);--surface-orange: rgba(255, 162, 92, .12);--surface-yellow: rgba(248, 255, 92, .1);--surface-teal: rgba( 46, 203, 180, .12);--surface-purple: rgba(215, 75, 236, .12);--surface-amber: rgba(255, 204, 0, .12);--surface-lime: rgba(168, 224, 64, .1);--surface-emerald: rgba(40, 200, 120, .12);--surface-pink: rgba(255, 100, 181, .12);--color-primary: var(--cyan);--color-secondary: var(--magenta);--color-success: var(--green);--color-info: var(--blue);--color-danger: var(--red);--color-warning: var(--orange);--color-caution: var(--yellow);--grad-primary: linear-gradient(135deg, var(--cyan), var(--purple));--grad-alt: linear-gradient(135deg, var(--magenta), var(--orange));--grad-rainbow: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple), var(--magenta));--grad-ocean: linear-gradient(135deg, var(--blue), var(--cyan), var(--emerald));--grad-aurora: linear-gradient(135deg, var(--green), var(--teal), var(--blue));--grad-forest: linear-gradient(135deg, var(--lime), var(--green), var(--emerald));--grad-fire: linear-gradient(135deg, var(--red), var(--orange), var(--yellow));--grad-sunset: linear-gradient(135deg, var(--orange), var(--magenta), var(--purple));--grad-neon: linear-gradient(135deg, var(--cyan), var(--magenta));--grad-cold: linear-gradient(135deg, var(--blue), var(--purple), var(--cyan));--grad-warm: linear-gradient(135deg, var(--amber), var(--orange), var(--red));--font-display: "Inter", sans-serif;--font-ui: "Inter", sans-serif;--font-body: "SF Pro", sans-serif;--font-label: "Helvetica Neue", sans-serif;--font-accent: "DM Sans", sans-serif;--font-tag: "Switzer", sans-serif;--font-ja: "Hiragino Sans", sans-serif;--font-ja-display: "Noto Sans JP", sans-serif;--font-mono: "Fira Code", monospace;--font-math: "CM Unicode", serif;--font-prose: "CM Unicode", serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.75rem;--font-size-2xl: 2.5rem;--font-size-3xl: 4rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--font-weight-black: 900;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.25rem;--sp-6: 1.5rem;--sp-8: 2rem;--sp-12: 3rem;--sp-16: 4rem;--shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.18);--shadow-md: 0 8px 24px rgba(0,0,0,.32);--shadow-lg: 0 18px 48px rgba(0,0,0,.42);--radius: 8px;--border-color: #303944;--border-strong: #465363;--border: 1px solid var(--border-color);--border-accent: 1px solid var(--cyan);--surface-interactive: rgba(107, 209, 224, .18);--surface-interactive-hover: rgba(107, 209, 224, .32);--surface-neutral-hover: rgba(255, 255, 255, .05);--surface-highlight: rgba(255, 255, 255, .12);--surface-noise: #ffffff;--scrim: rgba(0, 0, 0, .7);--on-accent: #000000;--focus-ring: 0 0 0 3px rgba(107, 209, 224, .35)}.select{appearance:none;width:100%;padding:var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-4);background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center;border:var(--border);border-radius:var(--radius);color:var(--fg);font-family:var(--font-ui);font-size:var(--font-size-md);cursor:pointer;outline:none;transition:border-color .15s}.select:focus{border-color:var(--cyan)}.checkbox,.radio{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-ui);font-size:var(--font-size-sm);color:var(--fg);cursor:pointer}.checkbox input[type=checkbox],.radio input[type=radio]{appearance:none;width:16px;height:16px;border:var(--border);border-radius:2px;background:var(--bg-2);cursor:pointer;transition:border-color .15s,background .15s;flex-shrink:0}.checkbox input[type=checkbox]:focus-visible,.radio input[type=radio]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;box-shadow:var(--focus-ring)}.radio input[type=radio]{border-radius:50%}.checkbox input[type=checkbox]:checked,.radio input[type=radio]:checked{background:var(--cyan);border-color:var(--cyan)}.toggle{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-ui);font-size:var(--font-size-sm);cursor:pointer}.toggle-track{width:36px;height:20px;background:var(--bg-3);border:var(--border);border-radius:999px;position:relative;transition:background .15s,border-color .15s;flex-shrink:0}.toggle-track:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--fg-muted);border-radius:50%;transition:transform .15s,background .15s}.toggle input:checked+.toggle-track{background:var(--cyan);border-color:var(--cyan)}.toggle input:checked+.toggle-track:after{transform:translate(16px);background:var(--bg)}.toggle input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.toggle input:focus-visible+.toggle-track{outline:2px solid var(--cyan);outline-offset:2px;box-shadow:var(--focus-ring)}:root{--void: #0b0c14;--panel: #12141f;--panel-2: #181b2b;--line: #262a3d;--text: #d9deef;--muted: #7b81a0;--accent: var(--cyan, #6bd1e0);--deny: var(--red, #ff6060)}[hidden]{display:none!important}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:radial-gradient(1100px 700px at 30% -10%,#131629 0%,transparent 60%),var(--void);color:var(--text);font-family:var(--font-ja, "Hiragino Sans", sans-serif);-webkit-text-size-adjust:100%}body{min-height:100%}canvas{touch-action:none}button,label{touch-action:manipulation}.app{height:100dvh;min-height:560px;display:grid;grid-template-columns:minmax(360px,1fr) clamp(380px,32vw,460px);gap:clamp(14px,2vw,28px);padding:clamp(12px,2vw,24px)}.board-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0}.board-card{padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px #00000073}.board-wrap{position:relative;width:min(calc(100dvh - 110px),calc(100vw - 560px),720px);aspect-ratio:1}#screen{width:100%;height:100%;image-rendering:pixelated;background:#000;cursor:crosshair;display:block}#screenOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#screen.locked{cursor:not-allowed}.transport{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.transport .mini-toggle{height:34px;padding:0 8px;border:2px solid var(--line);background:var(--panel);box-shadow:2px 2px #0000008c;color:var(--muted)}.transport button{width:46px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font-size:15px;cursor:pointer}.transport button:hover{border-color:var(--muted)}.transport button.on{border-color:var(--accent);color:var(--accent)}.transport button:disabled{opacity:.45;cursor:default}.apply-toggle{justify-content:flex-start;margin:2px 0 8px;color:var(--muted)}.side{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto}.side.locked{opacity:.72}.side.locked #sheet,.side.locked #draftCanvas,#editorPanel.locked button,#editorPanel.locked input{pointer-events:none}.side.locked #sheet,.side.locked #draftCanvas{cursor:not-allowed}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}.panel h2{margin:0 0 2px;font-family:var(--font-ja-display, "Noto Sans JP", sans-serif);font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--accent)}.micro{margin:2px 0 10px;font-size:11px;line-height:1.6;color:var(--muted)}.add{margin-top:10px;width:100%;padding:7px 0;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--muted);font-family:var(--font-ja, sans-serif);font-size:12px;cursor:pointer}.add:hover{border-color:var(--accent);color:var(--accent)}.editor-row{display:flex;gap:10px;align-items:flex-start}#draftCanvas{width:136px;height:136px;image-rendering:pixelated;background:#0a0b12;border:1px solid var(--line);border-radius:6px;cursor:crosshair;flex:none}.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.chips button{min-width:24px;height:22px;padding:0 7px;border:1px solid var(--line);border-radius:5px;background:var(--panel-2);color:var(--muted);font-size:12px;cursor:pointer}.chips button.on{border-color:var(--text);color:var(--text)}.chips button.swatch{min-width:22px;padding:0}.chips button.swatch.on{outline:2px solid var(--text);outline-offset:1px;border-color:transparent}.shake{animation:shake .28s linear}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}@media(prefers-reduced-motion:reduce){.shake{animation:none}}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#editNext canvas{width:14px;height:14px;image-rendering:pixelated;background:#0a0b12;border-radius:2px;display:block}#editNext button{height:24px}.sheet-wrap{position:relative;width:100%;aspect-ratio:1}#sheet{width:100%;height:100%;image-rendering:pixelated;background:#000;cursor:pointer;display:block;border-radius:6px}#sheetOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.add.danger:hover{border-color:var(--deny);color:var(--deny)}.px-icon{width:16px;height:16px;image-rendering:pixelated;display:block;margin:0 auto}.editor-row>div:last-child{flex:1;min-width:110px}.editor-row{flex-direction:column;gap:8px}.editor-actions{display:flex;gap:6px}.editor-actions .add{flex:1}.panel,.board-card,.transport button,.chips button,.add,#dirPad button,#screen,#sheet,#draftCanvas{border-radius:0!important}.panel,.board-card{border:2px solid var(--line);box-shadow:4px 4px #0000008c}.transport button,.chips button,.add,#dirPad button{border-width:2px;box-shadow:2px 2px #0000008c}.transport button:active,.chips button:active,.add:active,#dirPad button:active{transform:translate(2px,2px);box-shadow:none}.chips button.swatch.on{outline-width:2px;outline-offset:0}#screen,#sheet{border:2px solid var(--line)}#draftCanvas{border-width:2px}html,body{background:var(--void)}.editor-top{display:flex;gap:10px;align-items:flex-start;justify-content:center}#dirPad{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:3px}#dirPad button{border:2px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:13px;cursor:pointer;padding:0;box-shadow:2px 2px #0000008c}#dirPad button.on{border-color:var(--accent);color:var(--accent);background:#6bd1e014}#dirPad button:active{transform:translate(2px,2px);box-shadow:none}.sheet-wrap{width:min(100%,clamp(272px,calc(100dvh - 440px),400px));margin:0 auto}@media(max-height:900px){.panel{padding:10px}.panel .micro{display:none}.side{gap:10px}#draftCanvas{width:96px;height:96px}#dirPad{grid-template-columns:repeat(3,29px);grid-template-rows:repeat(3,29px)}.chips button{height:20px;font-size:11px}.chips button.swatch{min-width:20px}.add{padding:5px 0;margin-top:6px}.app{padding:10px 16px;gap:12px}}@media(max-width:760px){html,body{overflow:auto}body{min-height:100svh}.app{height:auto;min-height:100svh;grid-template-columns:1fr;gap:10px;padding:8px}.board-zone{justify-content:flex-start;gap:8px}.board-card{padding:4px}.board-wrap{width:min(calc(100vw - 20px),calc(100dvh - 110px),560px)}.transport{width:min(calc(100vw - 16px),560px);gap:6px}.transport button{width:44px;height:40px}.transport .mini-toggle{height:40px}.side{overflow:visible}.panel{padding:8px}.sheet-wrap{width:min(100%,calc(100vw - 32px),420px)}.editor-top{justify-content:flex-start}#draftCanvas{width:min(112px,32vw);height:min(112px,32vw)}}