html,body{height:100%;overflow:hidden}
#app{height:100vh;height:100dvh}
.app{height:100%;display:grid;grid-template-rows:64px minmax(0,1fr);background:var(--bg-page);color:var(--text-body);font-family:var(--font-body)}
.app.narrow{grid-template-rows:56px minmax(0,1fr)}
.skip{position:absolute;left:12px;top:12px;z-index:100;padding:8px 20px;border-radius:var(--radius-pill);background:var(--orange-500);color:var(--text-on-brand);font-weight:800;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.noscript{padding:40px 24px;font-size:18px}

.board{position:relative;overflow:clip;min-width:0;touch-action:none;user-select:none;-webkit-user-select:none;background-color:var(--bg-sunken);background-image:radial-gradient(circle,var(--border-default) 1.2px,transparent 1.6px)}
.world{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0}
.world.glide{transition:transform 320ms var(--ease-out)}
.board.glide{transition:background-position 320ms var(--ease-out),background-size 320ms var(--ease-out)}
.wire{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.port{position:absolute;top:19px;width:14px;height:14px;border-radius:50%;background:var(--surface-card);cursor:crosshair;transition:border-color 300ms ease-in-out,opacity 180ms var(--ease-out)}
.port:hover{border-color:var(--orange-500)!important}
.hov-sunken{transition:background 180ms var(--ease-out)}
.hov-sunken:hover{background:var(--bg-sunken)}
.choice{text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--border-default);background:var(--surface-card);cursor:pointer;display:flex;flex-direction:column;gap:2px;font-family:var(--font-body)}
.choice-bind:hover{background:var(--surface-accent-soft)!important;border-color:var(--green-500)!important}
.choice-cmd:hover{background:var(--surface-brand-soft)!important;border-color:var(--orange-500)!important}
.problem:hover{box-shadow:inset 0 0 0 1px var(--border-default)}
.overline{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.label{font-size:14px;font-weight:700;color:var(--text-strong)}
.field{display:flex;flex-direction:column;gap:8px}
.stack{display:flex;flex-direction:column;gap:16px}
.pin-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.pin-grid button{height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;cursor:pointer}
.tile{height:88px;border-radius:14px;border:0;background:var(--bg-sunken);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 6px;text-align:center;cursor:pointer;font-family:var(--font-body)}
.menu-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:0;border-radius:14px;background:var(--bg-sunken);color:var(--text-strong);font:800 15px var(--font-body);cursor:pointer;text-align:left}

.sheet{position:fixed;left:0;right:0;bottom:0;max-height:66vh;max-height:66dvh;overflow:auto;background:var(--surface-card);border-radius:28px 28px 0 0;border-top:1px solid var(--border-subtle);box-shadow:var(--shadow-3);padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;z-index:20;color:var(--text-body)}
.sheet.full{top:0;max-height:none;border-radius:0;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.scrim{position:fixed;inset:0;background:rgba(43,51,56,.45);z-index:19;border:0;padding:0}
@keyframes sheet-in{from{transform:translateY(100%)}}
@keyframes fade-in{from{opacity:0}}
.sheet{animation:sheet-in 280ms var(--ease-out)}
.scrim{animation:fade-in 200ms ease-out}
@keyframes sheet-out{to{transform:translateY(100%)}}
@keyframes fade-out{to{opacity:0}}
.leaving{pointer-events:none}
.leaving .sheet{animation:sheet-out 240ms var(--ease-out) forwards}
.leaving .scrim{animation:fade-out 200ms ease-out forwards}
@media (prefers-reduced-motion:reduce){.sheet,.scrim{animation:none}.leaving{display:none}.world.glide,.board.glide{transition:none}}
.handle{width:36px;height:5px;border-radius:999px;background:var(--border-default);align-self:center;flex:none}
.dock{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--border-subtle);box-shadow:var(--shadow-3)}
.dock button{position:relative;border:0;background:transparent;color:var(--text-body);font:800 11px var(--font-body);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:76px;height:56px;cursor:pointer;border-radius:999px}
.dock .add{width:56px;background:var(--orange-500);color:var(--text-on-brand);box-shadow:var(--shadow-brand)}
.dock .count{position:absolute;top:2px;right:14px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--state-danger);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}