:root{--bg: #0e0e0e;--bg-1: #131313;--bg-2: #181818;--bg-3: #1f1f1f;--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);--button-primary-bg: var(--surface-orange);--button-primary-fg: var(--orange);--button-primary-border: color-mix(in srgb, var(--orange) 22%, transparent);--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-accent-1: linear-gradient(135deg, var(--teal), var(--blue));--grad-accent-2: linear-gradient(135deg, var(--magenta), var(--red));--grad-accent-3: linear-gradient(135deg, var(--red), var(--amber));--grad-accent-4: linear-gradient(135deg, var(--lime), var(--emerald));--grad-accent-5: linear-gradient(135deg, var(--blue), var(--magenta));--grad-primary: var(--grad-accent-1);--grad-secondary: var(--grad-accent-2);--surface: var(--bg-2);--grad-primary-soft: linear-gradient(135deg, color-mix(in srgb, var(--teal) 18%, transparent), color-mix(in srgb, var(--blue) 18%, transparent));--grad-secondary-soft: linear-gradient(135deg, color-mix(in srgb, var(--magenta) 18%, transparent), color-mix(in srgb, var(--red) 18%, transparent));--grad-accent-4-soft: linear-gradient(135deg, color-mix(in srgb, var(--lime) 18%, transparent), color-mix(in srgb, var(--emerald) 18%, transparent));--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: "SF Pro", "Hiragino Sans", sans-serif;--font-ja-display: "Inter", "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: 600;--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: 10px;--radius-lg: 16px;--radius-full: 999px;--border-color: rgba(255, 255, 255, .07);--border-strong: rgba(255, 255, 255, .15);--border: 1px solid var(--border-color);--border-accent: 1px solid transparent;--ease-snap: cubic-bezier(.2, .9, .3, 1.2);--ease-out: cubic-bezier(.2, .7, .2, 1);--t-fast: .13s;--t-med: .22s;--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}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-ja);min-height:100vh;display:flex;align-items:flex-start;justify-content:center}#app{max-width:100%;min-width:0}.wrap{padding:12px 16px 24px;display:flex;flex-direction:column;gap:8px;max-width:100%;min-width:0}.stage{display:flex;align-items:flex-start;gap:12px}canvas{display:block;border-radius:var(--radius);image-rendering:pixelated;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,42px);gap:6px;align-content:start;flex:none}.pad[hidden]{display:none}.pad .key[data-dir=erase]{grid-area:1 / 3;font-size:14px}.tape{display:flex;align-items:flex-start;min-width:0;max-width:100%;border:var(--border);border-radius:var(--radius);overflow:hidden}.tape canvas{display:block;image-rendering:pixelated;border-radius:0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.tape-scroll{min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.pad .key{background:var(--bg-2);color:var(--fg);border:var(--border);border-radius:var(--radius);font-size:16px;line-height:1;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.pad .key.down{border-color:var(--fg)}.pad .key[data-dir=N]{grid-area:1 / 2}.pad .key[data-dir=W]{grid-area:2 / 1}.pad .key[data-dir=hold]{grid-area:2 / 2}.pad .key[data-dir=E]{grid-area:2 / 3}.pad .key[data-dir=S]{grid-area:3 / 2}.bar{display:flex;align-items:center;gap:8px}.bar .spacer{flex:1}.hidden,.bar.hidden,.tape.hidden,.pad.hidden{display:none}select,input[type=text],input[type=number]{background:var(--bg-1);color:var(--fg);border:var(--border);border-radius:var(--radius);padding:6px 8px;font-size:12px;font-family:inherit;min-width:0}input[type=text]:focus,input[type=number]:focus,select:focus{outline:none;border-color:var(--border-strong)}.panel{position:fixed;right:16px;top:124px;z-index:30;width:236px;max-height:70vh;overflow-y:auto;background:var(--bg-2);border:var(--border);border-radius:var(--radius-lg);padding:10px 12px 12px}.panel-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;margin-bottom:8px}.panel-head .x{background:none;border:0;color:var(--fg-subtle);cursor:pointer;font-size:12px;padding:2px 4px}.panel-body{display:flex;flex-direction:column;gap:8px}.field{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--fg-subtle)}.field input{width:76px}.field .ro{color:var(--fg);font-variant-numeric:tabular-nums}.choice{display:flex;gap:4px}.choice .btn{padding:5px 8px;font-size:11px;min-height:30px}@media(max-width:900px){.panel{inset:auto 8px 8px;width:auto;max-height:46vh}}.hint{font-size:11px;color:var(--fg-subtle);letter-spacing:.02em}.sep{width:1px;align-self:stretch;background:var(--border-color);margin:0 2px}.tools{display:flex;gap:6px;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.tools .tool{flex:none;min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:3px 6px}.tools .tool canvas{display:block;image-rendering:pixelated}.tools .tool.axis{padding-inline:10px;font-size:12px}.swatch{width:26px;height:26px;border-radius:5px;display:block}.swatch.water{background:#123240;box-shadow:inset 0 0 0 1px #1b4657}.swatch.tidal{background:repeating-linear-gradient(90deg,#16465a 0 5px,#24647c 5px 7px);box-shadow:inset 0 0 0 1px #205d74}.swatch.land{background:#212a32;box-shadow:inset 0 0 0 1px #4e6070}.colors{display:flex;flex-wrap:wrap;gap:3px;max-width:132px;justify-content:flex-end}.swatch-btn{width:16px;height:16px;border-radius:4px;border:1px solid transparent;cursor:pointer;padding:0}.swatch-btn.on{border-color:var(--fg)}@media(max-width:900px){body{align-items:flex-start}.wrap{padding:8px 8px 20px;width:100%;max-width:100%}.tools{width:100%;order:-1}.tools .tool{min-height:44px}.stage{flex-direction:column;align-items:center;width:100%;min-width:0}.bar{flex-wrap:wrap;row-gap:6px}.bar .btn,.bar button,.bar select{min-height:40px}.hint{order:99;flex-basis:100%}#edit-params label{font-size:11px}#edit-params input[type=number],#edit-params input[type=text]{width:52px;min-height:34px}}@media(max-width:480px){.hint{display:none}}.wrap{--key-drop: 4px;--key-side: #e8ecf1;--key-face: #39424f;--key-face-down: #2b323d}.wrap .bar .btn,.wrap .pad .key,.wrap .swatch-btn{border:none;border-radius:8px;transition:none;background:var(--key-face);color:var(--fg);box-shadow:var(--key-drop) var(--key-drop) 0 var(--key-side);margin:0 var(--key-drop) var(--key-drop) 0}.wrap .bar .btn:hover:not(:disabled):not([aria-disabled=true]){background:var(--key-face)}.wrap .pad .key:hover,.wrap .swatch-btn:hover{background:var(--key-face)}.wrap .bar .btn-primary,.wrap .bar .btn-primary:hover:not(:disabled):not([aria-disabled=true]){background:#eb4b63;color:#fff}.wrap .bar .btn:active:not(:disabled):not([aria-disabled=true]),.wrap .pad .key:active,.wrap .pad .key.down,.wrap .swatch-btn:active,.wrap .swatch-btn.on{transform:translate(var(--key-drop),var(--key-drop));box-shadow:0 0 0 var(--key-side),inset 2px 2px #00000073;background:var(--key-face-down)}.wrap .bar .btn-primary:active:not(:disabled):not([aria-disabled=true]){background:#cf3f56}.wrap .bar .btn-ghost,.wrap .bar .btn-ghost:hover:not(:disabled):not([aria-disabled=true]){background:transparent;box-shadow:none;transform:none;margin:0}.wrap .swatch-btn{--key-drop: 2px}body.skin-modern{--bg: #dde4ea;--bg-1: #eef2f6;--bg-2: #ffffff;--fg: #1b2733;--fg-subtle: #5b6b7a;--border-color: #c3cdd7}body.skin-modern .wrap{--key-side: #b9c5d1;--key-face: #ffffff;--key-face-down: #e4eaf0}body.skin-modern .wrap .bar .btn,body.skin-modern .wrap .pad .key{color:#1b2733}body.skin-modern .tape{border-color:#c3cdd7}body.skin-modern canvas{image-rendering:auto}