[hidden]{display:none!important}
.top,:root:not([data-theme="plain"]) .top{height:52px;flex-shrink:0;gap:6px;justify-content:space-between;margin-bottom:14px}
.top>.icon{width:44px;min-height:48px;flex:0 0 44px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;border-radius:7px;font:10px/1.2 system-ui,sans-serif;color:var(--ink)}
.top>#collection-open{flex-basis:62px}
.puzzle-opener{border:0;background:transparent;color:var(--ink);font:inherit;text-align:center;min-width:100px;min-height:48px;flex:1;cursor:pointer;padding:0 4px;line-height:1.2}
.eyebrow{display:block;font:10px/1.5 system-ui,sans-serif;letter-spacing:.18em;color:var(--muted);margin:0 0 3px}
.puzzle-opener strong{font-weight:400;font-size:19px;font-variant-numeric:tabular-nums}
.puzzle-total{font:12px system-ui,sans-serif;color:var(--muted)}
.puzzle-opener svg{width:14px;height:14px;margin-left:8px;fill:none;stroke:currentColor;stroke-width:1.3}
.new-badge{position:absolute;right:-1px;top:-2px;min-width:28px;padding:2px 4px;border-radius:8px;background:#a54435;color:#fff8ee;border:2px solid var(--paper);font:700 8px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
.title-screen{position:fixed;inset:0;z-index:20;background:var(--paper) var(--room-image,url('../assets/ink-room.png')) center/cover;color:var(--ink)}
.title-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:36px 20px 80px}
.title-emblem{width:86px;height:86px;margin-bottom:32px;stroke:var(--ink);fill:none;stroke-width:.8;opacity:.9;transform:rotate(-5deg)}
.title-emblem circle{fill:var(--ink);stroke:none}
.title-wordmark{font:400 clamp(28px,6vw,54px)/1.3 Georgia,serif;letter-spacing:.24em;padding-left:.24em}
.title-subtitle{font-size:16px;color:var(--muted);margin-top:18px;letter-spacing:.02em}
.title-invitation{font:11px/1.5 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-top:64px;border-bottom:1px solid var(--control-line);padding-bottom:12px}
.title-silent{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:1;min-height:44px}
.text-button{font:12px system-ui,sans-serif;cursor:pointer;color:var(--muted);background:transparent;border:0;padding:12px 18px}
button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.library-dialog{width:min(570px,calc(100vw - 32px));max-width:none}
.collection-dialog{width:min(840px,calc(100vw - 32px));max-width:none}
dialog{max-height:calc(100svh - 36px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
.library-dialog,.collection-dialog{overflow:hidden}
.library-dialog[open],.collection-dialog[open]{display:flex;flex-direction:column}
.dialog-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding-block:8px;padding:18px 4px 4px;margin:0 -4px}
.help-head{gap:16px}.help-head .icon{flex-shrink:0}
.library-dialog .help-head,.collection-dialog .help-head{align-items:center;flex-shrink:0;margin-bottom:0;padding-bottom:16px;border-bottom:1px solid var(--control-line)}
.library-dialog .help-head .icon,.collection-dialog .help-head .icon{width:44px;height:44px}
.library-dialog .help-head .eyebrow,.collection-dialog .help-head .eyebrow{font:10px/1.5 system-ui,sans-serif;letter-spacing:.15em;margin:0 0 7px}
#library-progress,.collection-caption{color:var(--muted);font-size:14px!important;line-height:1.6}
.puzzle-group{padding:12px 0 16px;border-top:1px solid var(--control-line)}
.puzzle-group h2{font:11px system-ui,sans-serif;letter-spacing:.12em;color:var(--muted);margin:0 0 12px}
.levels{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.library-level,:root:not([data-theme="plain"]) .library-level{width:100%;height:42px;min-width:0;border:1px solid var(--control-line);border-radius:7px;background:var(--board);color:var(--ink);font:14px Georgia,serif;position:relative}
.library-level::after,:root:not([data-theme="plain"]) .library-level::after{display:none}
.library-level[aria-current]{outline:1.5px solid var(--ink);outline-offset:2px}
.library-level.complete{background:var(--soft)}
.level-check{display:none;position:absolute;font:8px system-ui,sans-serif;right:3px;bottom:2px}
.complete .level-check{display:block}
.level-lock{display:none;position:absolute;right:3px;bottom:3px;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.35;pointer-events:none}
.library-level.locked,:root:not([data-theme="plain"]) .library-level.locked{background:transparent;border-style:dashed;color:var(--muted);opacity:.65}
.locked .level-lock{display:block}
.library-level.up-next,:root:not([data-theme="plain"]) .library-level.up-next{border-color:var(--ink);border-width:1.5px}
#library-guide{font:12px/1.6 system-ui,sans-serif;color:var(--muted);margin-top:-5px}
.seal-count{font:22px Georgia,serif;margin:0 0 6px}
.skin-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
.skin-card{overflow:hidden;border:1px solid var(--control-line);border-radius:9px;background:var(--board)}
.skin-card.equipped{border-color:var(--ink)}
.skin-preview{height:160px;background-position:center;background-size:cover;display:grid;place-items:center;--board:#f5f1e62e;--ink:#304c40;--line:#8c99817a;--board-empty:#8c987d}
.skin-preview svg{width:118px;height:118px;overflow:visible;filter:drop-shadow(0 5px 5px #0001)}
.preview-surface{fill:var(--board);stroke:var(--line);stroke-width:1.15;filter:url('#paper-edge')}
.preview-grid{fill:none;stroke:var(--line);stroke-width:.8}
.preview-tile{display:none}
.preview-mark{fill:var(--ink);stroke:var(--ink);stroke-width:.22;stroke-opacity:.5;filter:url('#ink-edge')}
.preview-empty{fill:var(--board-empty)}
.skin-preview:is([data-material="ceramic"],[data-material="glass"]) .preview-tile{display:block;fill:var(--tile-fill);stroke:#ffffffaa;stroke-width:1.3}
.skin-preview:is([data-material="ceramic"],[data-material="glass"]) .preview-grid{display:none}
.skin-preview:is([data-material="ceramic"],[data-material="glass"],[data-material="spores"]) .preview-surface,.skin-preview:is([data-material="ceramic"],[data-material="glass"]) .preview-mark{filter:none}
.skin-preview[data-material="ceramic"] svg{filter:drop-shadow(0 3px 2px #75694b3b) drop-shadow(0 10px 22px #70613a1a)}
.skin-preview[data-material="glass"] svg{filter:drop-shadow(0 3px 15px #a8d3c533)}
.skin-preview[data-material="paper"] svg{filter:drop-shadow(1px 4px 5px #4a45292b)}
.skin-preview[data-material="paper"] .preview-surface{stroke-opacity:.6}
.skin-preview[data-material="spores"] .preview-mark{filter:drop-shadow(0 0 4px #e8d88b55);stroke:none}
.skin-info{padding:17px 18px 18px}
.skin-info h2{font-size:19px;font-weight:400;margin:0 0 7px}
.skin-info p{font-size:13px!important;line-height:1.5;color:var(--muted);margin:0 0 9px}
.skin-info .skin-music{font:11px/1.5 system-ui,sans-serif!important;margin:12px 0 16px;letter-spacing:.02em}
.equip-skin{display:block;width:100%;padding:11px 8px;border:1px solid var(--control-line);border-radius:5px;background:transparent;font:12px system-ui,sans-serif;color:var(--ink);cursor:pointer;min-height:40px}
.equip-skin:not(:disabled):hover{background:var(--control-hover)}
.equipped .equip-skin{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.locked .equip-skin{color:var(--muted);border-style:dashed;cursor:default}
#collection-status{font:12px/1.5 system-ui,sans-serif;min-height:18px;color:var(--muted)}
.music-selection{border-top:1px solid var(--control-line);padding-top:16px;margin-top:10px}
.music-selection>label:not(.sound-switch){display:block;font-size:13px;margin:15px 0 8px}
#music-track{width:100%;min-height:42px;background:var(--paper);color:var(--ink);border:1px solid var(--control-line);border-radius:5px;padding:8px;font:13px system-ui,sans-serif}
.sound-note{font-size:12px!important;color:var(--muted);line-height:1.5}
.unlock-notice{display:block;max-width:100%;min-height:44px;margin:0 auto;border:1px solid var(--accent);background:var(--paper);color:var(--ink);border-radius:7px;padding:6px 12px;font:12px/1.4 system-ui,sans-serif;box-shadow:0 2px 8px var(--dialog-shadow);cursor:pointer}
#solve-feedback:has(.unlock-notice:not([hidden]))>:is(.solve-title,#solve-detail){display:none}
@media(max-width:600px){.skin-gallery{grid-template-columns:1fr}.skin-preview{height:145px}.levels{grid-template-columns:repeat(5,minmax(0,1fr))}.collection-dialog,.library-dialog{padding:22px 20px}.collection-dialog .help-head h1{font-size:21px}}
@media(max-height:740px){.top,:root:not([data-theme="plain"]) .top{height:48px;margin-bottom:8px}:root:not([data-theme="plain"]){--board-size:min(380px,calc(100vw - 40px),calc(100svh - 398px))}}
@media(max-height:620px){.top,:root:not([data-theme="plain"]) .top{height:48px;margin-bottom:6px}:root:not([data-theme="plain"]){--board-size:min(328px,calc(100vw - 40px),calc(100svh - 354px))}.title-emblem{width:62px;height:62px;margin-bottom:20px}.title-invitation{margin-top:38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}