:root{--board:#2e4b3f;--board-deep:#243b32;--chalk:#f3efe4;--paper:#fbf8ee;--grid:#d9e7dd;--grid-bold:#c4dacb;--ink:#26343a;--accent:#e2702a;--danger:#d64533;--sel:#2f7fd1;--wire:#46555e}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0;overscroll-behavior:none}body{font-family:Hiragino Maru Gothic ProN,BIZ UDPGothic,Yu Gothic UI,Meiryo,system-ui,sans-serif;color:var(--ink);display:flex;flex-direction:column;height:100dvh;background:var(--paper);user-select:none;-webkit-user-select:none}header{flex:0 0 auto;background:var(--board);color:var(--chalk);display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:4px solid #b98a4f;box-shadow:0 2px 6px #0000002e;z-index:20}header h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.08em;text-shadow:0 0 6px rgba(243,239,228,.25);white-space:nowrap}header .sub{font-size:11px;opacity:.75;letter-spacing:.12em;white-space:nowrap}header .spacer{flex:1}.hbtn{font:inherit;font-size:13px;font-weight:700;color:var(--chalk);background:#ffffff14;border:1.5px solid rgba(243,239,228,.55);border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap}.hbtn:hover{background:#ffffff29}.hbtn:focus-visible{outline:2px solid #ffd75e;outline-offset:2px}.hbtn.warn{border-color:#ffa08cb3;color:#ffd6cc}#app{flex:1;display:flex;min-height:0}#palette{flex:0 0 104px;background:linear-gradient(180deg,var(--board) 0%,var(--board-deep) 100%);border-right:4px solid #b98a4f;padding:10px 8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;z-index:10}#palette .ptitle{color:var(--chalk);font-size:11px;text-align:center;letter-spacing:.2em;opacity:.8;margin-bottom:2px}.pal-item{background:var(--paper);border:2px solid #9fb4a6;border-radius:10px;padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:grab;touch-action:none;box-shadow:0 2px #00000040}.pal-item:active{cursor:grabbing;transform:translateY(1px);box-shadow:0 1px #00000040}.pal-item svg{width:72px;height:48px;display:block;pointer-events:none}.pal-item .plabel{font-size:11px;font-weight:700;pointer-events:none}#stage{flex:1;position:relative;min-width:0;background:linear-gradient(var(--grid-bold) 1px,transparent 1px),linear-gradient(90deg,var(--grid-bold) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),var(--paper);background-size:100px 100px,100px 100px,20px 20px,20px 20px;overflow:hidden}#canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}.comp{cursor:grab}.comp.dragging{cursor:grabbing}.comp .hitbox{fill:transparent}.comp .selbox{fill:none;stroke:var(--sel);stroke-width:2;stroke-dasharray:6 5;rx:10;display:none;pointer-events:none}.comp.selected .selbox{display:block}.comp.ghost{opacity:.55;pointer-events:none}.term-hit{fill:transparent;cursor:crosshair}.comp [data-ctrl]{cursor:pointer}.term-dot{fill:#fff;stroke:#5a6b74;stroke-width:2.5;pointer-events:none;transition:r .1s}.term-dot.plus{stroke:var(--danger)}.term-dot.minus{stroke:#37474f}.term-hot .term-dot{fill:#ffe9a8;stroke:var(--accent)}.comp .vtext{font-family:ui-monospace,monospace;font-size:13px;font-weight:700;fill:var(--ink);stroke:var(--paper);stroke-width:3.5;paint-order:stroke}.wire .base{fill:none;stroke:var(--wire);stroke-width:5;stroke-linecap:round}.wire .flow{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 16;opacity:0;pointer-events:none}.wire .hit{fill:none;stroke:transparent;stroke-width:18;cursor:pointer}.wire.selected .base{stroke:var(--sel)}.wire.flowing .flow{opacity:1}#tempwire{fill:none;stroke:var(--accent);stroke-width:4;stroke-dasharray:7 6;stroke-linecap:round;pointer-events:none}#toolbar{position:absolute;display:none;gap:6px;z-index:15;background:#fff;border:2px solid #9fb4a6;border-radius:12px;padding:5px;box-shadow:0 3px 10px #0003}#toolbar.show{display:flex}#toolbar button{font:inherit;font-size:13px;font-weight:700;border:none;border-radius:8px;padding:8px 12px;cursor:pointer;background:#eef4ef;color:var(--ink);min-width:44px;min-height:40px}#toolbar button:hover{background:#dcebe0}#toolbar button:focus-visible{outline:2px solid var(--sel)}#toolbar button.del{background:#fdebe8;color:var(--danger)}#toolbar button.del:hover{background:#f8d6d0}#status{position:absolute;left:50%;bottom:12px;transform:translate(-50%);max-width:min(92%,560px);background:#2e4b3feb;color:var(--chalk);font-size:13px;font-weight:700;letter-spacing:.04em;padding:9px 18px;border-radius:999px;box-shadow:0 3px 8px #00000040;pointer-events:none;text-align:center;z-index:14;transition:background .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#status.danger{background:#d64533f2}#status.active{background:#e2702af2}dialog{border:none;border-radius:16px;padding:0;max-width:min(92vw,480px);width:100%;box-shadow:0 10px 40px #00000059}dialog::backdrop{background:#243b328c}.dlg-head{background:var(--board);color:var(--chalk);padding:14px 20px;font-size:16px;font-weight:700;letter-spacing:.1em}.dlg-body{padding:16px 20px 20px;font-size:14px;line-height:1.9}.dlg-body ol{margin:0 0 14px;padding-left:22px}.dlg-body li{margin-bottom:4px}.dlg-body .tip{background:#f3f8f4;border-left:4px solid var(--accent);padding:8px 12px;border-radius:0 8px 8px 0;font-size:13px}.dlg-close{display:block;margin:14px auto 0;font:inherit;font-weight:700;font-size:14px;background:var(--board);color:var(--chalk);border:none;border-radius:10px;padding:10px 28px;cursor:pointer}.dlg-close:focus-visible{outline:2px solid var(--sel);outline-offset:2px}@media(max-width:640px){header{padding:6px 10px;gap:8px}header h1{font-size:15px}header .sub{display:none}#palette{flex-basis:88px;padding:8px 6px}.pal-item svg{width:62px;height:42px}}