:root{--paper:#eee7d8;--ink:#27312d;--muted:#6f756d;--rust:#a94830;--green:#526b58;--board:#d9cfbb;--panel:#efe1bd;--edge:#8b6746;--brass:#b8863b;--cell:min(10.2vw,60px)}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
body{margin:0;min-height:100vh;background:#f5f3ef}
.site-header{height:64px;background:#faf9f7;border-bottom:1px solid #deddd9}.site-header-inner{width:min(100%,1180px);height:100%;margin:auto;padding:6px 32px;display:flex;align-items:center}.site-logo-frame{display:block;width:220px;height:44px;overflow:hidden}.site-logo{width:100%;height:100%;object-fit:cover}
button{font:inherit}
button:focus-visible,a:focus-visible,.board:focus-visible{outline:3px solid #af4b3366;outline-offset:3px}
.page-shell{width:min(100%,1120px);margin:auto;padding:34px 32px 64px}
.fold-page-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px}.fold-page-header h1{margin:0;color:var(--ink);font-size:28px;font-weight:850;letter-spacing:.055em}.fold-stats{display:flex;align-items:center;gap:26px}.fold-stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.fold-stat span{color:var(--muted);font-size:12px}.fold-stat strong{color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums}
.game{position:relative;width:min(100%,900px);margin:0 auto;padding:54px 42px 42px;border:1px solid #e1dbd0;border-radius:28px;background:#fbfaf6;box-shadow:0 16px 44px #463b2d18;text-align:center}
.title{margin:0 auto 28px;padding:0 56px}.title p{margin:0 0 8px;color:var(--rust);font-size:12px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.title h2{margin:0;color:var(--ink);font-size:clamp(26px,4vw,34px);font-weight:780;line-height:1.15;letter-spacing:-.025em}
.how-to{position:absolute;z-index:6;right:26px;top:24px;width:46px;height:46px;padding:0;border:1px solid #d6ccbc;border-radius:13px;background:#fffdf9;color:var(--ink);box-shadow:0 4px 12px #4b3b2818;font-size:22px;font-weight:800;cursor:pointer}.how-to:hover{border-color:var(--rust);background:#f9ece7;color:var(--rust)}.how-to:focus-visible{outline-color:#a9483066}
.board{--size:9;position:relative;width:min(calc(var(--size)*var(--cell)),calc(100vw - 32px));aspect-ratio:1;margin:auto;border:1px solid #c4b79e;border-radius:20px;background:linear-gradient(#0000 98%,#bbae961f 98%),linear-gradient(90deg,#0000 98%,#bbae961f 98%),#ded5c2;background-size:calc(100%/var(--size)) calc(100%/var(--size));box-shadow:inset 0 2px 10px #786b5320,0 16px 35px #66543b18;overflow:hidden}
.target,.panel{position:absolute;left:calc(var(--x)*100%/var(--size));top:calc(var(--y)*100%/var(--size));width:calc(100%/var(--size));height:calc(100%/var(--size))}
.target{display:block;border:2px dotted #7c7769aa;background:repeating-linear-gradient(45deg,#f8f5eb66 0 5px,#827b6b16 5px 7px)}
.panel{z-index:2;display:grid;place-items:center;border:1px solid #a88052;border-radius:6px;background:linear-gradient(135deg,#fff1c9,#dfc897);box-shadow:inset 0 0 0 3px #f7eac4,inset -5px -5px 0 #8b674633,0 5px 5px #443c2e40;transition:left .24s cubic-bezier(.2,.8,.2,1),top .24s cubic-bezier(.2,.8,.2,1),transform .24s}
.panel span{width:45%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:#705339;font-family:Georgia,serif;font-size:12px;background:#ffffff30}
.panel.anchor{background:linear-gradient(135deg,#667e67,#405648);border-color:#314238;box-shadow:inset 0 0 0 3px #82927c,inset -5px -5px 0 #26362b55,0 5px 5px #443c2e40}
.panel.anchor span{color:#ead9af}
.panel.invalid{animation:reject .32s;background:#c76b54}
.hinge{position:absolute;z-index:4;left:calc(var(--hx)*100%/var(--size));top:calc(var(--hy)*100%/var(--size));width:32px;height:32px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer}
.hinge:after{content:"";position:absolute;inset:7px;border:4px solid #7a582b;border-radius:50%;background:#5c4327;box-shadow:0 1px 4px #382b1e80}
.hinge.selected:after{border-color:#f0c766;box-shadow:0 0 0 3px #fff4c4aa,0 2px 7px #382b1e}
.directions{margin:16px auto 0;display:flex;justify-content:center;gap:10px}
.directions button,.controls button{min-height:44px;border:1px solid #a99c87;border-radius:12px;background:#f8f3e9;color:var(--ink);font-size:12px;font-weight:850;letter-spacing:.08em;cursor:pointer}
.directions button{min-width:120px;font-size:22px}
.directions span{font-size:10px}
.controls{display:flex;justify-content:center;gap:8px}
.controls button{padding:0 18px}
.controls .primary{background:var(--rust);color:white;border-color:var(--rust)}
button:disabled{cursor:default;opacity:.38}
.message{min-height:22px;margin:13px 0 10px;color:var(--muted);font-size:13px}
.message.error{color:#9b3f2c}
.message.success{color:#315f40;font-weight:800}
.hidden{display:none!important}
dialog{width:min(90vw,480px);padding:32px;border:0;border-radius:20px;color:var(--ink);background:#fbf7ed;box-shadow:0 20px 70px #27231d66;text-align:left}
dialog::backdrop{background:#2b2a2680}
dialog>button{float:right;border:0;background:none;font-size:26px;cursor:pointer}
dialog .eyebrow{color:var(--rust);font-size:11px;font-weight:900;letter-spacing:.14em}
dialog h2{font-family:Georgia,serif;font-size:30px;font-weight:500}
dialog li,dialog>p:last-child{margin:10px 0;color:var(--muted);line-height:1.5}
.close{float:right;border:0;background:none;font-size:26px;cursor:pointer}
.result-dialog{position:relative;text-align:center;width:min(92vw,540px);max-height:92vh;overflow:auto;padding-top:44px}.result-dialog .close{position:absolute;right:16px;top:12px;float:none}.result-dialog h2{margin:0 44px;font-family:inherit;font-size:28px;font-weight:950;line-height:1.15;letter-spacing:.1em;text-align:center}.result-summary{margin:10px 36px 22px;color:var(--ink);font-family:Georgia,serif;font-size:19px;line-height:1.45;text-align:center}.finished-fold{--size:9;position:relative;width:min(100%,360px);aspect-ratio:1;margin:0 auto;border-radius:16px;background:#ded5c2;overflow:hidden;box-shadow:inset 0 2px 10px #786b5320}.finished-fold .panel{transition:none}.result-share{clear:both;float:none;display:block;width:auto;min-width:168px;min-height:50px;margin:22px auto 12px;padding:0 32px;border:1px solid var(--green);border-radius:12px;background:var(--green);color:white;font-size:13px;font-weight:900;letter-spacing:.1em;cursor:pointer}.result-share:hover{filter:brightness(.95)}.result-share:focus-visible{outline:3px solid #5f7a6999;outline-offset:3px}.result-share:active{transform:translateY(1px)}.result-share:disabled{cursor:not-allowed;opacity:.55}.share-status{min-height:18px;margin:0;color:var(--green);font-size:12px}
.tutorial-button{float:none!important;width:100%;min-height:46px;margin-top:10px;border:1px solid var(--rust);border-radius:12px!important;background:var(--rust)!important;color:#fff;font-size:11px!important;font-weight:900;letter-spacing:.09em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes reject{25%{transform:translateX(-4px)}
75%{transform:translateX(4px)}
}
@media(max-width:390px){:root{--cell:min(10.25vw,58px)}
.page-shell{padding-inline:10px}
.board{width:100%}
.directions button{min-width:110px}
}
@media(max-width:620px){.site-header{height:auto;min-height:88px}.site-header-inner{height:auto;min-height:88px;padding:6px 12px;flex-wrap:wrap;gap:2px}.site-logo-frame{width:185px;height:38px}.page-shell{padding-top:18px}.fold-page-header{min-height:46px;padding:0 4px}.fold-page-header h1{font-size:23px}.fold-stats{gap:16px}.fold-stat span{font-size:11px}.fold-stat strong{font-size:15px}.game{padding:52px 10px 28px;border-radius:22px}.title{margin-bottom:22px;padding:0 44px}.title p{font-size:10px;letter-spacing:.09em}.title h2{font-size:25px}.how-to{right:14px;top:14px;width:44px;height:44px}.result-dialog{padding:42px 16px 24px}.result-dialog h2{margin-inline:36px;font-size:25px}.result-summary{margin:9px 22px 18px;font-size:18px}.finished-fold{width:min(100%,300px)}.result-share{min-width:156px;min-height:48px;margin:18px auto 10px}}
@media(prefers-reduced-motion:reduce){.panel{transition-duration:.06s}
.panel.invalid{animation:none}
}

.fold-mode-switch{display:grid;grid-template-columns:1fr 1fr;width:min(100%,260px);margin:16px auto 24px;border:1px solid var(--rust);border-radius:10px;overflow:hidden;background:#fffaf0;box-shadow:0 3px 12px #5b2d1d12}.fold-mode-segment{display:flex;align-items:center;justify-content:center;min-height:42px;padding:9px 16px;color:var(--rust);background:#fffaf0;font-size:12px;font-weight:700;letter-spacing:.08em;text-decoration:none;transition:background .15s,color .15s}.fold-mode-segment+.fold-mode-segment{border-left:1px solid var(--rust)}.fold-mode-segment.active{color:#fff;background:var(--rust);cursor:default}.fold-mode-segment:not(.active):hover{background:#f8e9e4}.fold-mode-segment:focus-visible{position:relative;z-index:1;outline:3px solid #a9483066;outline-offset:-3px}@media(max-width:620px){.fold-mode-switch{width:238px;margin:12px auto 16px}.fold-mode-segment{min-height:44px;padding:8px 12px}}