:root{--bg:#fff8ea;--card:#fff;--bd:#e2d3b4;--tx:#3b2a6b;--sub:#6f5f8f;--board:#fdeec8;--grid:rgba(120,90,40,.16);--sel:#6a4fd0;--warn:#c0392b;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
@media (prefers-color-scheme:dark){:root{--bg:#1d1830;--card:#2c2447;--bd:#4a3f72;--tx:#f0e8ff;--sub:#b3a6d6;--board:#34294f;--grid:rgba(255,255,255,.09);--sel:#bfb0ff;--warn:#ff8a80}}
body{margin:0;background:var(--bg);color:var(--tx);font-family:"Trebuchet MS",system-ui,sans-serif;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
a{color:var(--sel)}
h1{margin:16px 14px 2px;font-size:1.5rem}
.sub{margin:0 14px 12px;color:var(--sub);font-size:.9rem}
main{display:grid;gap:12px;padding:0 12px 16px;grid-template-areas:"b" "t";max-width:1200px;margin:auto}
@media (min-width:860px){main{grid-template-columns:250px 1fr;grid-template-areas:"t b"}}
#bd{grid-area:b;min-width:0}#tl{grid-area:t}
.bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;font-size:14px}
.bar.out{margin-top:10px}
button{font:inherit;font-size:14px;color:var(--tx);background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:6px 12px;min-height:36px;cursor:pointer}
button.pri{background:var(--sel);color:#fff;border-color:var(--sel);font-weight:700}
@media (prefers-color-scheme:dark){button.pri{color:#1d1830}}
button:hover:not(:disabled){border-color:var(--sel)}button:disabled{opacity:.35;cursor:default}
:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
#ctx.off .sw,#ctx.off #ca{opacity:.35;pointer-events:none}
#ca{display:flex;flex-wrap:wrap;gap:6px}
.sw{display:flex;gap:6px;flex-wrap:wrap}
.sw button{width:32px;height:32px;min-height:0;padding:0;border-radius:50%}
.sw button[aria-pressed="true"]{outline:3px solid var(--sel);outline-offset:1px}
#cnt{margin-left:auto;font-weight:700}#cnt.bad{color:var(--warn)}
select{font:inherit;font-size:14px;color:var(--tx);background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:6px 8px;min-height:36px}
.chk{display:inline-flex;gap:6px;align-items:center}
svg#b{width:100%;height:auto;display:block;background:var(--board);border:1px solid var(--bd);border-radius:14px;touch-action:none;user-select:none;-webkit-user-select:none}
#layer g{cursor:grab}#layer g:focus{outline:none}#layer g:focus-visible .hit{stroke:var(--sel);stroke-width:2}
.pg{margin-bottom:12px}.pg h3{margin:0 0 6px;font-size:.8rem;color:var(--sub);text-transform:uppercase;letter-spacing:.06em}
.pl{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}
.pl button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:12px}
#hint{color:var(--sub);font-size:13px}
#msg{min-height:1.2em;margin:4px 2px;color:var(--sub);font-size:14px}
footer{text-align:center;padding:8px 12px 24px;color:var(--sub);font-size:14px}
dialog{border:1px solid var(--bd);border-radius:16px;background:var(--card);color:var(--tx);max-width:min(440px,94vw);padding:16px}
dialog::backdrop{background:rgba(20,10,40,.45)}
dialog h2{margin:0 0 10px;font-size:1.15rem}
dialog form{display:grid;gap:10px}
dialog label{display:grid;gap:4px;font-size:14px}dialog label.chk{display:flex;align-items:flex-start;font-size:13px;color:var(--sub)}
dialog input:not([type=checkbox]),dialog textarea{font:inherit;font-size:16px;padding:8px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--tx)}
#pv{width:100%;max-height:200px;object-fit:contain;background:var(--board);border-radius:10px}
.row{display:flex;gap:8px;justify-content:flex-end}
#smsg{margin:0;min-height:1.2em;font-size:14px}#smsg.err,#msg.err{color:var(--warn)}
.defs-only{position:absolute;width:0;height:0;overflow:hidden}
#ctx.off #cm{display:none}
#hint{display:block;flex:1 0 100%;height:2.6em;line-height:1.3em;overflow:hidden;margin:0}
.codebox{margin-top:10px;padding:10px;border:1px solid var(--bd);border-radius:12px;background:var(--card)}
.codebox h3{margin:0 0 4px;font-size:.8rem;color:var(--sub);text-transform:uppercase;letter-spacing:.06em}
.sub0{margin:0 0 6px;color:var(--sub);font-size:13px}
#code{width:100%;font:12px/1.35 ui-monospace,Menlo,Consolas,monospace;padding:8px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--tx);resize:vertical;word-break:break-all}
#cmsg{font-size:13px;color:var(--sub)}#cmsg.err{color:var(--warn)}
.pl button{touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ghost{position:fixed;left:0;top:0;pointer-events:none;z-index:50;opacity:.85;filter:drop-shadow(0 6px 8px rgba(40,20,60,.35));will-change:transform}
.ghost.off{opacity:.55}.ghost.bad{opacity:.6}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.notice{margin:0;font-size:12.5px;line-height:1.4;color:var(--sub)}
.boardwrap{position:relative}
#trash{position:absolute;top:8px;right:8px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;pointer-events:none;background:var(--card);border:1px solid var(--bd);color:var(--sub);opacity:.5;transition:opacity .12s,transform .12s,background .12s}
#trash svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#trash .lid{transform-origin:20px 6px;transition:transform .12s}
#trash.show{opacity:.9}
#trash.hot{opacity:1;background:#e4506a;border-color:#c0392b;color:#fff;transform:scale(1.15)}
#trash.hot .lid{transform:rotate(-25deg) translateY(-2px)}
@media (prefers-reduced-motion:reduce){#trash,#trash .lid{transition:none}}