:root{--bg-0: #f2ecdc;--bg-1: #d7cab0;--panel: #ece2cf;--ink: #221b16;--accent: #8d5f2c;--lcd-bg: #b9d2a0;--lcd-pixel: #1f3b2a;--muted: #5d5143}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Space Grotesk,sans-serif;color:var(--ink);background:radial-gradient(1200px 600px at 85% -10%,rgba(141,95,44,.25),transparent 60%),radial-gradient(1000px 800px at -20% 110%,rgba(34,27,22,.18),transparent 60%),linear-gradient(160deg,var(--bg-0),var(--bg-1))}.app-shell{width:min(1120px,100% - 2rem);margin:0 auto;padding:1.2rem 0 2rem}.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.2rem}.hero h1{margin:0;letter-spacing:.03em;font-weight:700;font-size:clamp(1.15rem,2.5vw,2rem)}.hero p{margin:0;font-family:IBM Plex Mono,monospace;font-size:.85rem;color:var(--muted)}.panel-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1rem;align-items:start}.device-panel,.status-panel{background:color-mix(in oklab,var(--panel),white 8%);border:1px solid color-mix(in oklab,var(--ink),white 70%);border-radius:14px;box-shadow:0 18px 36px -28px #211a1699,inset 0 1px #ffffffa6}.device-panel{padding:1rem;display:grid;gap:.6rem;align-content:start}.device-body{background:linear-gradient(145deg,#d8c9af,#beab8e);border-radius:18px;border:1px solid #9a835f;padding:1rem;display:grid;gap:.9rem}.device-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.7rem;font-family:IBM Plex Mono,monospace;font-size:.78rem;color:#403528;text-transform:uppercase}.boot-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #8c7a60;background:#faf5e999;color:#3d3124;font-size:.68rem;letter-spacing:.04em;padding:.16rem .55rem;min-height:1.35rem;text-transform:uppercase}.boot-status[data-state=ready]{background:#e0f0dd;border-color:#72926c;color:#244020}.boot-status[data-state=booting]{background:#f4ebd4;border-color:#a59062;color:#4d3d1d}.boot-status[data-state=stalled]{background:#f6e1c7;border-color:#b07630;color:#65370a}.boot-status[data-state=failed]{background:#f5d9d9;border-color:#b45f5f;color:#6e1f1f}.lcd-bezel{background:#2f3b30;border-radius:12px;border:2px solid #212920;padding:.75rem}.lcd-screen{border-radius:8px;background:#9fb98a;padding:.32rem;box-shadow:inset 0 1px #ffffff47}#lcd{display:block;width:100%;height:auto;border-radius:6px;background:var(--lcd-bg)}.controls{display:flex;gap:.55rem;flex-wrap:wrap}button{appearance:none;border:1px solid #7f6845;border-bottom-width:3px;background:linear-gradient(180deg,#f8f0e0,#d4c2a3);color:#2b2217;border-radius:9px;padding:.5rem .9rem;font-family:IBM Plex Mono,monospace;font-size:.82rem;cursor:pointer}button:active{transform:translateY(1px);border-bottom-width:2px}button[data-active="1"]{background:linear-gradient(180deg,#d6efcd,#a9c99f);border-color:#5e7a54;color:#203018}.status-panel{padding:1rem;display:grid;gap:.6rem;align-content:start}.editor-tabs{display:flex;gap:.4rem}.editor-tab{border-radius:999px;padding:.32rem .72rem;border-bottom-width:2px}.editor-tab[aria-selected=true]{background:linear-gradient(180deg,#d6efcd,#a9c99f);border-color:#5e7a54;color:#203018}.basic-editor-panel{margin:0;padding:.65rem;border-radius:8px;border:1px solid #b9a68a;background:color-mix(in oklab,var(--panel),white 20%);display:grid;gap:.45rem}.basic-editor-panel[hidden]{display:none}.basic-editor-head{display:flex;align-items:center;justify-content:space-between;gap:.45rem}.basic-run-status{font-family:IBM Plex Mono,monospace;font-size:.72rem;color:#2f251a;background:#e8dec8;border:1px solid #b9a68a;border-radius:999px;padding:.1rem .45rem}.basic-run-status[data-state=running]{color:#204020;background:#d9ecd4;border-color:#7ba06f}.basic-run-status[data-state=failed]{color:#6e1f1f;background:#f5d9d9;border-color:#b45f5f}.basic-run-status[data-state=ok]{color:#244020;background:#e0f0dd;border-color:#72926c}.basic-editor-hint,.basic-editor-ref{margin:0;font-family:IBM Plex Mono,monospace;font-size:.7rem;color:var(--muted)}.basic-editor-ref a{color:#244020}.basic-editor-body{border:1px solid #b9a68a;border-radius:8px;background:#f4ecdc;display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden}.basic-editor-lines{margin:0;padding:.5rem .35rem;min-width:2.2rem;text-align:right;color:#7a6651;background:#e5d8c0;border-right:1px solid #c2ae8f;font-family:IBM Plex Mono,monospace;font-size:.75rem;line-height:1.4;user-select:none;overflow:hidden}.basic-editor{resize:vertical;min-height:180px;margin:0;border:0;outline:none;padding:.5rem .6rem;background:transparent;color:#2a2118;font-family:IBM Plex Mono,monospace;font-size:.8rem;line-height:1.4}.basic-editor-controls{display:flex;flex-wrap:wrap;gap:.5rem}.asm-dump-view{max-height:240px;overflow:auto;white-space:pre}.status-panel h2,.status-panel h3{margin:0;font-size:.9rem}.debug-view,.log-view,.keymap-list{margin:0;padding:.65rem;border-radius:8px;border:1px solid #b9a68a;background:color-mix(in oklab,var(--panel),white 20%);font-family:IBM Plex Mono,monospace;font-size:.74rem;line-height:1.4;max-height:220px;overflow:auto;white-space:pre-wrap}.machine-monitor{--mon-cyan-1: #7ff7ff;--mon-cyan-2: #19ecff;--mon-cyan-3: #00b7ff;--mon-lime-1: #7ce86a;--mon-amber-1: #ffc15a;--mon-bg-1: rgba(8, 10, 34, .96);--mon-bg-2: rgba(6, 18, 52, .95);--mon-bg-3: rgba(5, 28, 66, .9);margin:0;padding:.78rem;border-radius:10px;border:1px solid var(--mon-cyan-2);background:radial-gradient(520px 260px at 84% -12%,rgba(124,232,106,.14),transparent 62%),radial-gradient(620px 250px at -8% 122%,rgba(255,193,90,.11),transparent 58%),linear-gradient(135deg,var(--mon-bg-1),var(--mon-bg-2) 55%,var(--mon-bg-3));display:grid;gap:.62rem;box-shadow:inset 0 0 0 1px #7ff7ff52,0 0 24px #19ecff4d,0 0 38px #7ce86a21,0 12px 30px -18px #000000d1}.machine-monitor:before{content:"";position:absolute;pointer-events:none}.machine-monitor h2{font-size:1rem;color:#f2fdff;text-shadow:0 0 12px rgba(127,247,255,.9),0 0 15px rgba(124,232,106,.28)}.monitor-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.monitor-summary{font-family:IBM Plex Mono,monospace;font-size:.76rem;border-radius:999px;border:1px solid var(--mon-cyan-2);background:linear-gradient(180deg,#061a3aeb,#06142ceb);color:#ccfbff;padding:.14rem .56rem;box-shadow:inset 0 0 0 1px #adf5ff3d,0 0 10px #19ecff75,0 0 13px #7ce86a29}.monitor-grid{display:grid;gap:.5rem;align-items:start}.monitor-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-items:start}.shadow-stack{display:grid;gap:.5rem;align-content:start}.monitor-bus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-items:start}.monitor-card{border-radius:8px;border:1px solid rgba(127,247,255,.9);background:linear-gradient(180deg,#081a42eb,#061028f0),repeating-linear-gradient(180deg,rgba(127,247,255,.13) 0,rgba(127,247,255,.13) 1px,transparent 1px,transparent 4px);padding:.52rem .56rem;display:grid;gap:.4rem;box-shadow:inset 0 0 0 1px #7ff7ff38,0 0 14px #19ecff3d,0 0 17px #7ce86a1a}.monitor-card h3{margin:0;font-size:.88rem;line-height:1.2;color:#dcfeff;letter-spacing:.02em;text-shadow:0 0 9px rgba(127,247,255,.7),0 0 11px rgba(124,232,106,.15)}.monitor-card-wide{grid-column:1 / -1}.register-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.34rem .45rem;align-content:start}.register-item{display:grid;gap:.08rem}.register-name{font-family:IBM Plex Mono,monospace;font-size:.66rem;color:#74d7ff;text-transform:uppercase}.register-value{font-family:IBM Plex Mono,monospace;font-size:.9rem;line-height:1.15;color:#f8fdff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(76,237,255,.58)}.bus-hex{font-family:IBM Plex Mono,monospace;font-size:.98rem;line-height:1.25;color:#f5feff;background:linear-gradient(180deg,#083056f5,#061a38fa);border:1px solid var(--mon-cyan-2);border-radius:6px;padding:.32rem .64rem;display:inline-flex;align-items:center;justify-content:center;min-height:2.1rem;min-width:7.2ch;width:fit-content;white-space:nowrap;overflow:visible;box-shadow:inset 0 0 0 1px #8df1ff3d,0 0 14px #19ecff75,0 0 17px #7ce86a26}.bit-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.24rem}.flag-bit-grid{grid-template-columns:repeat(8,minmax(2.4ch,1fr))}.bit-chip{font-family:IBM Plex Mono,monospace;font-size:.7rem;line-height:1.2;text-align:center;border-radius:4px;border:1px solid #4d9cff;background:#091e40e0;color:#c4e3ff;padding:.16rem .1rem}.bit-chip[data-on="1"]{border-color:#63efb0;background:linear-gradient(180deg,#128092f5,#0a506afa);color:#f2fffd;box-shadow:0 0 10px #4ff5ff73,0 0 14px #7ce86a33}.pin-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem .35rem}.pin-item{display:flex;align-items:center;justify-content:space-between;gap:.35rem;border:1px solid #4e95de;border-radius:6px;padding:.2rem .3rem;background:#081c3ce0}.pin-name{font-family:IBM Plex Mono,monospace;font-size:.68rem;color:#9dd9ff}.pin-state{font-family:IBM Plex Mono,monospace;font-size:.68rem;font-weight:600;border-radius:999px;padding:.03rem .45rem;border:1px solid #6faee7;color:#cfe8ff;background:#122d54f0}.pin-state[data-high="1"]{border-color:#63efb0;color:#edfffd;background:linear-gradient(180deg,#0f8494f2,#0a526cfa);box-shadow:0 0 10px #4ff5ff61,0 0 14px #7ce86a2e}.machine-monitor .log-view,.machine-monitor .keymap-list{border-color:#45b7ff;background:#081834e6;color:#e8f6ff}.keymap-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.35rem .6rem}.keymap-list span{display:block}.font-debug-panel{margin:0;padding:.65rem;border-radius:8px;border:1px solid #b9a68a;background:color-mix(in oklab,var(--panel),white 20%);display:grid;gap:.45rem}.font-debug-panel[hidden]{display:none}.font-debug-head{display:flex;align-items:center;justify-content:space-between;gap:.45rem}.font-debug-head h3{margin:0;font-size:.82rem}.font-debug-meta{font-family:IBM Plex Mono,monospace;font-size:.72rem;color:#2f251a;background:#e8dec8;border:1px solid #b9a68a;border-radius:999px;padding:.1rem .45rem;white-space:nowrap}.font-debug-hint{margin:0;font-family:IBM Plex Mono,monospace;font-size:.7rem;color:var(--muted)}#font-debug-canvas{width:100%;height:auto;border-radius:8px;border:1px solid #7f6845;background:#dbeacc;image-rendering:pixelated;cursor:crosshair}.font-kana-title{margin:.1rem 0 0;font-size:.78rem}#font-kana-canvas{width:100%;height:auto;border-radius:8px;border:1px solid #7f6845;background:#dbeacc;image-rendering:pixelated;cursor:crosshair}@media(max-width:900px){.panel-grid{grid-template-columns:1fr}.hero{flex-direction:column;align-items:flex-start}.pin-grid,.monitor-top-grid,.monitor-bus-grid{grid-template-columns:1fr}.register-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bit-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}