:root{--text:#c8c0b8;--text-muted:#7a7268;--bg:#1a1814;--panel:#242018;--border:#3a342c;--accent:#8b7355;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.4 system-ui,Segoe UI,Roboto,sans-serif}*,:before,:after{box-sizing:border-box}body{min-height:100svh;margin:0}h1,h2,h3{margin:0;font-weight:600}h2{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 1rem;font-size:.875rem}ul{margin:0;padding:0;list-style:none}#app{height:100svh}.layout{height:100svh;display:flex;overflow:hidden}.game-area{border-right:1px solid var(--border);background:var(--bg);flex-direction:column;flex:2;justify-content:flex-start;align-items:center;padding:1.5rem;display:flex;overflow-y:auto}.app-header{width:100%;max-width:900px;margin-bottom:1rem}.app-title{letter-spacing:.02em;color:var(--text);font-size:1.375rem}.app-subtitle{color:var(--text-muted);margin:.375rem 0 0;font-size:.875rem}.help-panel{border:1px solid var(--border);background:var(--panel);border-radius:8px;width:100%;max-width:900px;margin-bottom:1rem;padding:1rem 1.125rem}.help-panel summary{cursor:pointer;list-style:none}.help-panel summary::-webkit-details-marker{display:none}.help-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem;font-size:.75rem}.help-panel:not([open]) .help-title{margin-bottom:0}.help-panel[open] .help-title{margin-bottom:.75rem}.help-mobile-only{display:none}.help-desktop-only{display:inline}.help-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem 1.25rem;display:grid}.help-item h3{color:var(--text);margin-bottom:.375rem;font-size:.875rem}.help-item p{color:var(--text-muted);margin:0 0 .5rem;font-size:.8125rem;line-height:1.5}.help-item p:last-child{margin-bottom:0}.help-item em{color:var(--text);font-style:normal;font-weight:500}.help-item code{background:var(--bg);color:var(--text);border-radius:4px;padding:.1rem .35rem;font-size:.75rem}.help-legend{flex-direction:column;gap:.375rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.help-legend li{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.8125rem;line-height:1.4;display:flex}.help-legend strong{color:var(--text);font-weight:600}.legend-swatch{box-sizing:border-box;border-radius:50%;flex-shrink:0;width:1.25rem;height:1.25rem}.legend-swatch--start{border:2px solid #c9a227;box-shadow:0 0 6px #c9a22773}.legend-swatch--target{border:2px solid #5a9e6f;box-shadow:0 0 6px #5a9e6f59}.link-legend{border:1px solid var(--border);background:#1a1814;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.6875rem;font-weight:600;display:inline-flex}.link-legend--same{color:#c9a227}.link-legend--opposite{color:#7eb8d4}.help-note{font-style:italic;margin-top:.5rem!important;font-size:.75rem!important}.gate-select{border:1px solid var(--border);background:var(--panel);width:100%;max-width:900px;color:var(--text-muted);border-radius:6px;align-items:center;gap:.625rem;margin-bottom:1rem;padding:.5rem .75rem;font-size:.8125rem;display:flex}.gate-select select{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:4px;padding:.25rem .5rem;font-size:.8125rem}.pin-mode{border:1px solid var(--border);border-radius:8px;width:100%;margin-bottom:.75rem;display:none;overflow:hidden}.pin-mode-btn{background:var(--bg);color:var(--text-muted);font:inherit;cursor:pointer;border:none;flex:1;margin:0;padding:.625rem .75rem;font-size:.8125rem;font-weight:600}.pin-mode-btn+.pin-mode-btn{border-left:1px solid var(--border)}.pin-mode-btn--active.pin-mode-btn--start{color:#c9a227;background:#c9a2271f}.pin-mode-btn--active.pin-mode-btn--target{color:#5a9e6f;background:#5a9e6f1f}#lock-cards{flex-direction:column;align-items:stretch;gap:1rem;width:100%;max-width:900px;display:flex}.cards-grid{flex-direction:column;gap:.625rem;width:100%;display:flex}.card{flex-direction:row;align-items:center;gap:.5rem;display:flex}.card-label{text-align:center;width:1.5rem;color:var(--text-muted);flex-shrink:0;font-size:.875rem;font-weight:600}.card-face{border:1px solid var(--border);background:linear-gradient(145deg,#2a241c,#1e1a14);border-radius:10px;flex:1;min-width:0;padding:.625rem .75rem;box-shadow:inset 0 1px #ffffff0a}.holes{flex-direction:row;justify-content:center;align-items:center;gap:.375rem;width:100%;padding-bottom:.375rem;display:flex}.hole{cursor:pointer;aspect-ratio:1;background:0 0;border:none;border-radius:50%;flex:0 0 2.25rem;width:2.25rem;height:2.25rem;margin:0;padding:0;position:relative}.hole:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hole-number{color:var(--text-muted);pointer-events:none;font-size:.5625rem;line-height:1;position:absolute;bottom:-.125rem;left:50%;transform:translate(-50%)}.hole-socket,.pin-ring{aspect-ratio:1;border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.hole-socket{background:#0f0d0a;border:1px solid #4a4034;width:56%;height:56%;box-shadow:inset 0 2px 4px #0009}.pin-ring{pointer-events:none;box-sizing:border-box}.pin-ring--current{border:2px solid #c9a227;width:44%;height:44%;box-shadow:0 0 6px #c9a22773}.pin-ring--correct{border:2px solid #5a9e6f;width:72%;height:72%;box-shadow:0 0 6px #5a9e6f59}.link-grid{flex-direction:column;flex-shrink:0;gap:.125rem;min-width:5.5rem;display:flex}.link-grid-title{letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--text-muted);font-size:.5625rem;font-weight:600}.link-grid-cells,.link-grid-labels{gap:.25rem;display:flex}.link-grid-labels span{text-align:center;width:1.5rem;color:var(--text-muted);font-size:.5625rem}.link-cell{border:1px solid var(--border);width:1.5rem;height:1.5rem;color:var(--text);cursor:pointer;background:#1a1814;border-radius:4px;margin:0;padding:0;font-size:.6875rem;font-weight:600}.link-cell:hover:not(:disabled){border-color:var(--accent)}.link-cell:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.link-cell--disabled{opacity:.35;cursor:default;color:var(--text-muted)}.solve-btn{border:1px solid var(--accent);width:100%;color:var(--text);font:inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:linear-gradient(145deg,#3a3024,#2a241c);border-radius:10px;margin-top:.5rem;padding:1rem 1.5rem;font-size:1.125rem;font-weight:700}.solve-btn:hover{background:linear-gradient(145deg,#4a3f30,#3a3024);box-shadow:0 0 12px #8b735540}.solve-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.panel-hint{color:var(--text-muted);margin:-.5rem 0 1rem;font-size:.75rem;line-height:1.4}.solution-summary{border:1px solid var(--border);background:var(--panel);text-align:center;border-radius:6px;padding:.5rem .625rem;font-size:.875rem;font-weight:600}.solution-repeat{color:var(--text-muted);font-weight:600}.solution-step{border:1px solid var(--border);background:var(--bg);font-variant-numeric:tabular-nums;border-radius:6px;padding:.5rem .625rem;font-size:.875rem}.solution-index{color:var(--text-muted);margin-right:.375rem}.solution-error{color:#c97a7a;font-size:.8125rem}.solution-empty{color:var(--text-muted);font-size:.8125rem}#inputs{flex-direction:column;gap:.375rem;display:flex}.sidebar{background:var(--panel);flex-direction:column;flex:1;min-width:0;padding:1.25rem;display:flex;overflow-y:auto}.sidebar-chest{flex-shrink:0}.sidebar-solution{flex-direction:column;flex:1;min-height:0;display:flex}.tab-bar{display:none}.tab-btn{border:none;border-top:1px solid var(--border);background:var(--panel);color:var(--text-muted);font:inherit;cursor:pointer;flex:1;margin:0;padding:.875rem 1rem;font-size:.875rem;font-weight:600}.tab-btn--active{color:var(--text);background:var(--bg);box-shadow:inset 0 2px 0 var(--accent)}.tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.chest-panel{border-bottom:1px solid var(--border);margin-bottom:1.5rem;padding-bottom:1.25rem}.chest-field{color:var(--text-muted);flex-direction:column;gap:.375rem;margin-bottom:.75rem;font-size:.75rem;display:flex}.chest-field input{border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;border-radius:6px;padding:.5rem .625rem}.chest-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.chest-save{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);font:inherit;cursor:pointer;border-radius:6px;padding:.5rem .75rem}.chest-save:hover{border-color:var(--accent)}.chest-status{min-height:1.125rem;color:var(--text-muted);margin:.625rem 0 0;font-size:.75rem}.chest-status--error{color:#c97a7a}.chest-list{flex-direction:column;gap:.5rem;margin-top:.875rem;display:flex}.chest-item{border:1px solid var(--border);background:var(--bg);border-radius:6px;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .625rem;display:flex}.chest-item-name{text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;overflow:hidden}.chest-item-actions{flex-shrink:0;gap:.25rem;display:flex}.chest-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:4px;padding:.25rem .5rem;font-size:.6875rem}.chest-btn:hover{border-color:var(--accent)}.chest-empty{color:var(--text-muted);font-size:.8125rem}.placeholder{color:var(--text-muted);margin:0;font-size:.9375rem}@media (width>=768px){.help-panel summary{cursor:default;pointer-events:none}.tab-bar{display:none!important}.game-area{display:flex!important}.sidebar-chest,.sidebar-solution{display:block!important}}@media (width<=767px){.help-mobile-only{display:inline}.help-desktop-only{display:none}.help-panel summary{justify-content:space-between;align-items:center;display:flex}.help-panel summary:after{content:"▾";color:var(--text-muted);font-size:.75rem;transition:transform .15s}.help-panel[open] summary:after{transform:rotate(180deg)}.layout{padding-bottom:calc(3.25rem + env(safe-area-inset-bottom,0px));flex-direction:column;overflow:hidden}.layout[data-active-tab=setup]{overflow-y:auto}.layout[data-active-tab=solution]{overflow:hidden}.game-area{border-right:none;flex:none;padding:1rem;overflow:visible}.layout[data-active-tab=setup] .game-area{display:flex}.layout[data-active-tab=solution] .game-area{display:none}.sidebar{background:0 0;flex:none;padding:0;overflow:visible}.layout[data-active-tab=setup] .sidebar-chest{background:var(--bg);padding:0 1rem 1rem;display:block}.layout[data-active-tab=solution] .sidebar-chest,.layout[data-active-tab=setup] .sidebar-solution{display:none}.layout[data-active-tab=solution] .sidebar-solution{background:var(--panel);flex:1;min-height:0;padding:1rem;display:flex;overflow-y:auto}.layout[data-active-tab=solution] .sidebar{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.tab-bar{z-index:10;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);display:flex;position:fixed;bottom:0;left:0;right:0}.app-header{margin-bottom:.75rem}.app-title{font-size:1.125rem}.app-subtitle{font-size:.8125rem}.pin-mode{display:flex}.card{border:1px solid var(--border);background:#00000026;border-radius:8px;flex-direction:column;align-items:stretch;gap:.375rem;padding:.5rem}.card-label{text-align:left;width:auto}.card-face{padding:.5rem .375rem}.holes{gap:.25rem;padding-bottom:.25rem}.hole{aspect-ratio:1;flex:1 1 0;width:auto;min-width:1.625rem;max-width:2.25rem;height:auto}.link-grid{align-self:center}.solve-btn{z-index:2;margin-top:.75rem;padding:.875rem 1rem;font-size:1rem;position:sticky;bottom:0;box-shadow:0 -4px 12px #00000059}.chest-panel{border-bottom:none;margin-bottom:0;padding-bottom:0}}