:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",Meiryo,sans-serif;color:#f5f5e8;background:#12303a}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#52717b 0,#1a3d47 34%,#102a35 80%)}button{font:inherit;cursor:pointer}a{color:inherit}.site-header,footer{max-width:1000px;margin:auto;padding:12px 20px;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:12px}.site-header{border-bottom:1px solid #bdd0c333}.site-header a,footer a{text-decoration:none;color:#e4e6d4}.brand{font-weight:900!important;color:#ffe9aa!important;font-size:16px}.page-title{text-align:center;margin:9px auto 12px;padding:0 12px}.page-title span{font:800 10px ui-monospace,monospace;letter-spacing:.2em;color:#bad9d7}.page-title h1{font-size:clamp(26px,4vw,38px);line-height:1.12;margin:3px 0;color:#fff0cc;letter-spacing:.09em;text-shadow:0 3px 0 #82614c}.page-title p{margin:3px 0;color:#c9dfd8;font-size:12px}.cabinet{position:relative;max-width:790px;margin:0 auto;padding:16px 20px 15px;border:3px solid #d0a76d;border-radius:19px;background:linear-gradient(145deg,#32666a 0,#234c59 42%,#173845 100%);box-shadow:inset 0 0 0 4px #163a45,inset 0 0 0 7px #7eac9c,0 8px 0 #735d4c,0 20px 50px #07151eaf;outline:none;overflow:hidden}.cabinet:focus-visible{outline:3px solid #fff2aa;outline-offset:5px}.cabinet::before{content:"";position:absolute;inset:6px 6px auto;height:6px;border-radius:8px;background:repeating-linear-gradient(90deg,#edd5a0 0 24px,#567f80 24px 31px);opacity:.75}.cabinet-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:5px 0 9px}.cabinet-header small{font:800 9px ui-monospace,monospace;letter-spacing:.16em;color:#aedbd5}.cabinet-header h2{font-size:22px;line-height:1.1;margin:3px 0;color:#fff1d1}.stage-tag{white-space:nowrap;border:1px solid #a9ccc7a9;border-radius:20px;padding:5px 12px;font-size:11px;color:#d9e8df}.stage-tag strong{font-size:17px;color:#ffdb8e}.progress{height:5px;background:#163d4a;border-radius:8px;overflow:hidden}.progress span{display:block;height:100%;width:12.5%;background:linear-gradient(90deg,#f6ad83,#ffe19d);transition:width .25s}.stage-description{font-size:12px;color:#deeee7;margin:9px 2px 9px}.workspace{padding:10px;border:2px solid #7eafa6;border-radius:15px;background:linear-gradient(165deg,#1c4556,#173747 55%,#122e3d);box-shadow:inset 0 0 0 3px #102d3b,0 4px 0 #14303c}.work-header{display:flex;justify-content:space-between;font-size:10px;font-weight:900;letter-spacing:.08em;color:#b7d7cb;margin:2px 6px 9px}.work-header span:first-child{color:#ffe5a8}.work-grid{display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;gap:13px}.board-frame{padding:8px;border:2px solid #cba478;border-radius:12px;background:linear-gradient(135deg,#a47964,#6d5860 52%,#795e5a);box-shadow:inset 0 0 0 3px #d5b795,0 4px 0 #35404b}.board{display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));gap:5px;width:min(100%,370px);aspect-ratio:1;margin:auto;padding:7px;border:2px solid #704d4c;border-radius:8px;background:repeating-linear-gradient(45deg,#314e5c 0 8px,#2b4855 8px 16px);box-shadow:inset 0 3px 9px #182e3e}.gem{position:relative;display:grid;place-items:center;aspect-ratio:1;border:2px solid #ffffff8c;border-bottom:5px solid #172f3b77;border-radius:15px;box-shadow:inset 0 3px 3px #ffffff6b,inset 0 -6px 5px #091a2555,0 3px 4px #081f2b8f;transition:transform .15s,filter .15s}.gem:hover{transform:translateY(-2px);filter:brightness(1.1)}.gem-inner{width:57%;height:57%;display:grid;place-items:center;clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);background:#ffffff70;box-shadow:inset 0 0 7px #ffffffaf}.gem-inner i{width:35%;height:35%;transform:rotate(45deg);background:#ffffffa8}.gem-0{background:radial-gradient(circle at 37% 25%,#ffd1b9,#ed856e 50%,#ab4c60)}.gem-1{background:radial-gradient(circle at 37% 25%,#fff5bd,#f4c55b 50%,#ad723e)}.gem-2{background:radial-gradient(circle at 37% 25%,#d6f5c8,#7ec9a0 50%,#438778)}.gem-3{background:radial-gradient(circle at 37% 25%,#dbf3f5,#83c8d8 50%,#50809e)}.gem-4{background:radial-gradient(circle at 37% 25%,#e9d5f3,#af8dc7 50%,#6c5a91)}.gem.cursor{outline:4px solid #fff6b9;outline-offset:2px;z-index:2}.gem.selected{outline:5px solid #ffb66c;outline-offset:2px;z-index:3;animation:selected-glow 1s ease-in-out infinite alternate}.gem.fixed{border-color:#ffeab9;border-width:4px;border-bottom-width:6px;cursor:default}.lock-mark{position:absolute;right:4px;bottom:1px;color:#fff6c8;font-size:14px;text-shadow:0 1px 2px #533d2e}.gem.matching::after{content:"";position:absolute;top:3px;right:5px;width:6px;height:6px;background:#fff8ca;border-radius:50%;box-shadow:0 0 5px #fff}.reference{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px 8px;border:1px solid #9ec5b58c;border-radius:12px;background:#163947}.reference-title{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:3px;margin-bottom:8px;color:#ffe4a9;font-weight:900;font-size:13px}.reference-title small{color:#bad8d0;font-size:10px}.target-board{width:min(100%,142px);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--size),1fr);gap:3px;padding:5px;border:2px solid #c7ac81;border-radius:7px;background:#4d6164;box-shadow:0 4px 0 #122735}.mini-gem{border:1px solid #ffffff8b;border-radius:5px;box-shadow:inset 0 1px 2px #ffffff9c,inset 0 -3px 3px #122b3266}.mini-gem.fixed{outline:2px solid #ffe6aa;outline-offset:-3px}.ref-note{margin-top:10px;color:#bedbd1;font-size:10px;text-align:center;line-height:1.4}.ref-note b{color:#ffde92}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 5px}.metrics>div{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:7px 10px;border:1px solid #8eb3a893;border-radius:8px;background:#193e4c}.metrics span{font-size:11px;color:#b8d9d0}.metrics strong{font:800 15px ui-monospace,monospace;color:#ffe3a8}.status{min-height:21px;margin:7px 2px 8px;font-size:12px;line-height:1.5;color:#ffe2ab}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button,.overlay button{min-height:43px;border:1px solid #9bc4bb;border-bottom:4px solid #497776;border-radius:8px;background:#2b6670;color:#f0f5e9;font-size:12px;font-weight:800}.actions button:disabled{opacity:.45;cursor:default}.actions button:active,.overlay button:active{transform:translateY(2px);border-bottom-width:2px}.key-help{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:10px;color:#c9ded6;font-size:10px}kbd{padding:2px 4px;border:1px solid currentColor;border-radius:4px;font:800 10px ui-monospace,monospace;white-space:nowrap}.cabinet button:focus-visible,a:focus-visible{outline:3px solid #fff2a8;outline-offset:3px}.overlay{position:absolute;inset:0;z-index:9;display:grid;place-items:center;padding:15px;background:#071d2ddf;backdrop-filter:blur(4px)}.overlay[hidden],.overlay-alt[hidden]{display:none}.overlay-card{width:min(100%,460px);max-height:100%;overflow:auto;padding:20px 24px;border:3px solid #e6c28d;border-radius:16px;background:radial-gradient(circle at 50% 0,#5b837e,#285667 55%,#1c3b51);box-shadow:inset 0 0 0 4px #214b56,0 13px 50px #04131c;text-align:center}.overlay-art{display:flex;justify-content:center;gap:4px;margin:0 auto 8px}.overlay-art i{display:block;width:26px;height:26px;transform:rotate(45deg);border:2px solid #ffefd1;border-radius:6px;box-shadow:0 3px 7px #142d38}.overlay-art i:nth-child(1){background:#ec8e73}.overlay-art i:nth-child(2){background:#eabf60}.overlay-art i:nth-child(3){background:#80c89e}.overlay-art i:nth-child(4){background:#8fc3d4}.overlay-art i:nth-child(5){background:#a98cc6}.overlay-card small{display:block;margin-top:13px;font:800 10px ui-monospace,monospace;letter-spacing:.14em;color:#b8e0d5}.overlay-card h3{font-size:26px;color:#fff1d1;margin:5px 0 8px}.overlay-card p{font-size:13px;line-height:1.65;color:#e9eee1;margin:0 0 13px}.overlay button{width:100%;max-width:290px;background:linear-gradient(#ffdf9c,#dfae6b);border-color:#ffe7b3 #c49058 #9e704f;color:#263c48;font-size:15px}.overlay button.overlay-alt{display:block;margin:8px auto 0;background:#34616a;border-color:#b1d0be #6e9b94 #486c70;color:#f3f2dd;font-size:12px}.overlay-hint{margin-top:11px;color:#c4ddd0;font-size:10px}.below{max-width:790px;margin:17px auto 22px;padding:0 14px;text-align:center;color:#b9d3cb;font-size:11px;line-height:1.7}footer{max-width:1000px;border-top:1px solid #b9d1bc40;color:#a7c7c2}footer small{margin-left:auto}@keyframes selected-glow{to{filter:brightness(1.26)}}@media(max-width:650px){.site-header{padding:10px 13px}.page-title{margin:7px auto}.page-title h1{font-size:27px}.page-title p{font-size:11px}.cabinet{margin:0 8px;padding:12px 9px;border-width:2px;border-radius:12px}.cabinet-header h2{font-size:18px}.workspace{padding:6px}.work-grid{grid-template-columns:minmax(0,1fr) 107px;gap:7px}.board-frame{padding:5px}.board{padding:4px;gap:3px}.gem{border-radius:9px;border-bottom-width:3px}.gem-inner{width:60%;height:60%}.gem.cursor{outline-width:3px;outline-offset:1px}.gem.selected{outline-width:4px;outline-offset:1px}.reference{padding:6px 4px}.reference-title{font-size:11px}.reference-title small{font-size:9px}.target-board{gap:2px;padding:3px}.ref-note{font-size:9px}.metrics>div{display:block;padding:5px 6px}.metrics span,.metrics strong{display:block}.status{font-size:11px}.key-help{font-size:9px}.overlay-card{padding:17px 15px}.overlay-card h3{font-size:22px}.overlay-card p{font-size:12px}.below{font-size:10px}}@media(max-width:390px){.work-grid{grid-template-columns:minmax(0,1fr) 90px;gap:5px}.workspace{padding:4px}.board-frame{padding:4px}.board{gap:2px}.gem{border-radius:6px}.gem.fixed{border-width:2px;border-bottom-width:3px}.lock-mark{font-size:10px;right:1px;bottom:0}.reference-title small{display:none}.ref-note{font-size:8px}.actions button{font-size:10px}.overlay-card{padding:13px 11px}.overlay-card p{line-height:1.45}.overlay-art i{width:21px;height:21px}.page-title span{font-size:9px}}@media(prefers-reduced-motion:reduce){.gem.selected{animation:none}.gem{transition:none}}
.gem-inner{position:relative}.gem-inner em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:clamp(17px,3vw,28px);font-weight:900;color:#204252;text-shadow:0 1px 1px #ffffffb5}.gem-inner i{display:none}.mini-gem{display:grid;place-items:center;font-size:clamp(10px,1.5vw,17px);font-weight:900;color:#254351;text-shadow:0 1px 1px #ffffffb5}
@media(max-width:390px){.work-grid{grid-template-columns:1fr;gap:6px}.board{width:min(100%,280px);padding:5px;gap:3px}.gem{border-radius:9px}.gem-inner em{font-size:clamp(18px,6vw,26px)}.reference{display:grid;grid-template-columns:1fr 98px;grid-template-rows:auto auto;align-items:center;gap:2px 6px;padding:5px 8px}.reference-title{grid-column:1;grid-row:1;margin:0}.target-board{grid-column:2;grid-row:1 / 3;width:96px}.ref-note{grid-column:1;grid-row:2;margin:0;text-align:left;font-size:9px}.mini-gem{font-size:11px}.workspace{padding:5px}.board-frame{padding:4px}}
.overlay button.overlay-alt[hidden]{display:none}