:root{color-scheme:light;--ink:#233c37;--paper:#f6efd9;--amber:#bc883f;--night:#141e2b}*{box-sizing:border-box}body{margin:0;background:var(--night);color:var(--paper);font:18px/1.75 system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif}.wrap{max-width:1000px;margin:auto;padding:32px 24px}h1,h2,h3{font-family:'Hiragino Mincho ProN','Yu Mincho',serif;line-height:1.5;overflow-wrap:anywhere}h1{font-size:clamp(36px,7vw,60px);margin:10px 0}h2{font-size:28px}.eyebrow{font-size:14px;letter-spacing:.12em;color:#d7b776}.scene{border:8px solid #624c35;box-shadow:0 0 0 2px #bc883f;margin:28px 0;background:#292a27}.scene svg{display:block;width:100%;max-height:380px;image-rendering:pixelated}.paper{background:var(--paper);color:var(--ink);padding:32px;border:4px solid #957047;box-shadow:8px 8px 0 #080f18;margin:32px 0}.paper .eyebrow{color:#6f4821}button{font:inherit;line-height:1.4;min-height:48px;border:2px solid #37574b;background:#254c40;color:#fff8de;padding:12px 18px;cursor:pointer;box-shadow:3px 3px 0 #a68b61;margin:5px 5px 5px 0;max-width:100%;overflow-wrap:anywhere}button:hover{background:#3c6250}button[aria-pressed=true]{outline:3px solid #9d5c19;outline-offset:2px;background:#654c28}button:disabled{background:#d4cfbe;color:#5b6258;box-shadow:none;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid #b95214;outline-offset:4px}fieldset{border:1px solid #ab9877;min-width:0;padding:16px}legend{padding:0 8px}nav{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid #b7a78b;padding-bottom:16px}blockquote{margin:24px 0;padding:20px;border-left:5px solid #ad7938;background:#e9dfc4;white-space:pre-line}p{overflow-wrap:anywhere}.note,footer{font-size:15px}footer{margin:36px 0}a{color:inherit;text-underline-offset:4px}#question{white-space:pre-line;margin:24px 0}#guide{font-size:16px}.books{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:20px 0}.book{border:3px solid #72502f;padding:16px 4px;background:repeating-linear-gradient(0deg,#dfc89e 0 7px,#d4b884 7px 9px);text-align:center;font-weight:700;color:#213b34;min-height:80px}#choices{display:flex;flex-wrap:wrap;gap:6px}#choices button{flex:1 1 130px}.grid{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));max-width:480px;border:3px solid #5d4b32;gap:3px;padding:5px;background:#ae9b75}.cell{min-height:72px;text-align:center;padding:5px;border:1px solid #927b58;color:#1c332e;display:flex;flex-direction:column;justify-content:center;font-size:14px;font-weight:600}.stripe{background:repeating-linear-gradient(45deg,#f1e6c9 0 5px,#d4c19c 5px 7px)}.dot{background-color:#f5edda;background-image:radial-gradient(#a18760 1.5px,transparent 1.5px);background-size:9px 9px}.card{display:grid;grid-template-columns:repeat(3,1fr);max-width:340px;gap:6px;padding:12px;border:4px solid #85613d;background:#c4ae80}.card .cell{font-size:25px;min-height:52px;background:#f8efd9;position:relative}.card .hole{outline:4px solid #285343;outline-offset:-4px;background:#fffbed}.card .hole:after{content:'窓';font-size:11px;position:absolute;top:0;left:4px}.orientation{padding:14px;border:2px dashed #876237;white-space:pre-line}.whitebook{width:100px;height:130px;border:5px solid #bc9d67;background:#fffbed;box-shadow:8px 8px 0 #31483a;margin:20px auto;position:relative}.whitebook:after{content:'';position:absolute;width:12px;height:60px;background:#9b5542;right:12px;top:-8px}#feedback:not(:empty){padding:16px;border-left:4px solid #895b27;background:#e4d5af}details{padding:18px 0;border-top:1px solid #b4a180;margin-top:24px}summary{cursor:pointer;padding:10px}#solution{border-top:3px solid #99703b;margin-top:24px;padding-top:10px}#explanation{white-space:pre-line}dialog{color:#233c37;background:#f6efd9;border:4px solid #927047;max-width:min(760px,calc(100% - 24px));max-height:85vh;padding:24px;font-size:18px;line-height:1.75}dialog::backdrop{background:#101c2bd9}dialog h3{border-bottom:2px solid #a68b61}#notes-body p{white-space:pre-line}.review-link{font-size:16px} [hidden]{display:none!important}@media(min-width:900px){#welcome,#play,#ending{padding:40px 64px}}@media(max-width:480px){.wrap{padding:20px 12px}.paper{padding:20px 14px;margin:24px 0}h2{font-size:25px}.scene{border-width:4px}.cell{min-height:64px;font-size:12px}.books{gap:4px}.book{padding:16px 2px}button{padding:12px}dialog{padding:18px}fieldset{padding:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root{--pixel-edge:#49303a;--pixel-light:#f1d599;--pixel-shadow:#614237}
.scene{display:flex;justify-content:center;align-items:center;padding:16px;background:#241f2b;border:4px solid #49303a;box-shadow:inset 0 0 0 4px #b58050,0 0 0 2px #f1d599,6px 6px 0 #0c1520}
.scene svg{width:480px;height:336px;max-height:none;flex:none;shape-rendering:crispEdges}
.paper{border:4px solid #49303a;box-shadow:inset 0 0 0 4px #d4aa6c,8px 8px 0 #0c1520;background:#f7efd8}
button{border:2px solid #49303a;box-shadow:inset 2px 2px 0 #8c9c72,inset -2px -2px 0 #1e3733,3px 3px 0 #614237;border-radius:0}
button:hover{background:#50705b}button:disabled{box-shadow:inset 2px 2px 0 #fff0bc;color:#614237}button[aria-pressed=true]{outline:3px solid #b58050;outline-offset:2px;background:#614237;box-shadow:inset 2px 2px 0 #d4aa6c,inset -2px -2px 0 #49303a,3px 3px 0 #49303a}
#notebook:before,#inspect:before,#review:before{content:'';display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-right:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23241f2b' d='M1 1h8v8H1z'/%3E%3Cpath fill='%23d4aa6c' d='M2 2h6v6H2z'/%3E%3Cpath fill='%23fff0bc' d='M3 2h4v5H3z'/%3E%3Cpath fill='%23713f4e' d='M6 1h1v5H6z'/%3E%3C/svg%3E") center/20px 20px no-repeat;image-rendering:pixelated}
.book{border:3px solid #49303a;background:#b58050;box-shadow:inset 3px 3px 0 #f1d599,inset -3px -3px 0 #614237;color:#241f2b}
.book:nth-child(2){background:#8c9c72}.book:nth-child(3){background:#d4aa6c}.book:nth-child(4){background:#ac6858}.book:nth-child(5){background:#d4c4a0}
.book:before{content:'';display:block;width:16px;height:4px;background:#49303a;margin:0 auto 8px;box-shadow:0 8px 0 #f1d599}
.grid{border:4px solid #49303a;background:#614237;box-shadow:inset 2px 2px 0 #b58050;padding:4px;gap:4px}
.cell{border:2px solid #8c5b42;color:#241f2b;font-size:14px}
.stripe{background-color:#fff0bc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23d4c4a0' d='M0 0h2v2H0zM2 2h2v2H2zM4 4h2v2H4zM6 6h2v2H6z'/%3E%3C/svg%3E");background-size:16px 16px}
.dot{background-color:#fff0bc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23b58050' d='M1 1h2v2H1zM5 5h2v2H5z'/%3E%3C/svg%3E");background-size:16px 16px}
.card{border:4px solid #49303a;background:#8c5b42;box-shadow:inset 3px 3px 0 #d4aa6c}.card .cell{border:2px solid #614237;background:#fff0bc}.card .hole{outline:4px solid #284b42;background:#fff8df;box-shadow:inset 6px 6px 0 #d4aa6c}
.orientation{border:2px solid #8c5b42;box-shadow:inset 3px 3px 0 #d4c4a0;background:#efe2c4}
.whitebook{border:4px solid #49303a;box-shadow:inset 4px 4px 0 #fff0bc,inset -4px -4px 0 #d4c4a0,8px 8px 0 #284b42;background:#fff8df}.whitebook:after{background:#713f4e;border:2px solid #49303a;clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
dialog{border:4px solid #49303a;box-shadow:inset 3px 3px 0 #d4aa6c,8px 8px 0 #0c1520}
@media(max-width:600px){.scene{padding:12px}.scene svg{width:240px;height:168px}.cell{font-size:12px}.paper{box-shadow:inset 0 0 0 3px #d4aa6c,4px 4px 0 #0c1520}}