:root{--bg: #1a1b1e;--fg: #e6e6e6;--muted: #8a8d93;--accent: #6ea8fe;--cell-bg: #2a2c30;--cell-border: #3a3d42;--head: #ffd166;--error: #ff6b6b;--ok: #5fd068;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg)}body{display:flex;flex-direction:column}header{display:flex;align-items:center;gap:24px;padding:12px 24px;border-bottom:1px solid var(--cell-border)}header h1{font-size:16px;margin:0;font-weight:500;letter-spacing:.04em;color:var(--muted)}.tabs{display:flex;gap:4px}.tabs button{background:transparent;border:1px solid transparent;color:var(--muted);padding:4px 14px;font:inherit;cursor:pointer;border-radius:6px}.tabs button.active{color:var(--fg);background:var(--cell-bg);border-color:var(--cell-border)}main{flex:1;overflow:hidden;display:flex}.tab{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}.tab.hidden{display:none}.panel-tape{display:flex;flex-direction:column;gap:16px;padding:24px;border-right:1px solid var(--cell-border);overflow:auto}.panel-editor{display:flex;flex-direction:column;gap:12px;padding:24px;overflow:hidden}.alphabet{display:flex;flex-wrap:wrap;gap:6px;font-family:ui-monospace,SF Mono,Consolas,monospace;font-size:13px;color:var(--muted);min-height:24px}.alphabet .label{color:var(--muted);font-style:italic}.alphabet .sym{background:var(--cell-bg);border:1px solid var(--cell-border);border-radius:4px;padding:2px 8px;white-space:pre;color:var(--fg);font:inherit;cursor:pointer}.alphabet .sym:hover{border-color:var(--accent);color:var(--accent)}.alphabet .sym:active{transform:translateY(1px)}.tape{display:flex;flex-wrap:nowrap;gap:4px;font-family:ui-monospace,SF Mono,Consolas,monospace;overflow-x:auto;padding-bottom:20px}.tape .cell{position:relative;flex:0 0 auto;width:32px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--cell-bg);border:1px solid var(--cell-border);border-radius:4px;font-size:16px;white-space:pre}.tape .cell.head{border-color:var(--head);box-shadow:0 0 0 1px var(--head) inset;color:var(--head)}.tape .cell.head:after{content:"▲";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);color:var(--head);font-size:10px}.status{font-family:ui-monospace,SF Mono,Consolas,monospace;font-size:13px;color:var(--muted);margin-top:24px;white-space:pre-wrap;word-break:break-word}.status.error{color:var(--error)}.status.ok{color:var(--ok)}.controls{display:flex;gap:8px}.controls button{background:var(--cell-bg);border:1px solid var(--cell-border);color:var(--fg);padding:6px 14px;font:inherit;cursor:pointer;border-radius:6px}.controls button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.controls button:disabled{opacity:.4;cursor:not-allowed}.editor{flex:1;min-height:0;border:1px solid var(--cell-border);border-radius:6px;overflow:hidden}.editor .cm-editor{height:100%;font-size:13px}.editor .cm-editor.cm-focused{outline:none}.editor .cm-focused{border-color:var(--accent)}.editor .cm-scroller{font-family:ui-monospace,SF Mono,Consolas,monospace;line-height:1.5}@media (max-width: 768px){header{flex-wrap:wrap;gap:12px;padding:10px 14px}main{overflow:auto}.tab{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:visible}.panel-tape{padding:16px;border-right:none;border-bottom:1px solid var(--cell-border)}.panel-editor{padding:16px;min-height:60vh}.tape .cell{width:26px;height:34px;font-size:14px}.controls button{flex:1}.alphabet{font-size:12px}}
