:root{--detective-ink:#103d75;--detective-line:#c9dfed;--detective-mint:#e7f6ef;--detective-yellow:#ffdf7d;--detective-paper:#fffaf0}
*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0;background:linear-gradient(140deg,#edf9ff,var(--detective-paper) 45%,#fffdf8);color:var(--detective-ink);font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.75}
button,input{font:inherit}button,a,input{touch-action:manipulation}button{min-height:46px;padding:9px 20px;border:1px solid #b4d7ee;border-radius:28px;background:#fff;color:var(--detective-ink);font-weight:700;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #126bb0;outline-offset:4px}button.primary{background:linear-gradient(#08adff,#0072e9);color:#fff;border:2px solid #159bff;box-shadow:inset 0 2px 2px #ffffff65,0 3px 0 #005aaf;font-weight:800}button.primary:disabled{box-shadow:none}button:hover:not(:disabled){filter:brightness(1.03)}button:active:not(:disabled){transform:translateY(1px)}a{color:#0864ac}h1,h2,h3,p{overflow-wrap:anywhere}rt{font-size:.42em}#main{max-width:1100px;margin:auto;padding:26px 24px 20px}.subject{display:inline-block;color:#9d275d;background:#ffeaf2;padding:3px 13px;border-radius:22px;font-weight:700;font-size:14px}.eyebrow{font-size:14px;font-weight:700;color:#47718b;letter-spacing:.05em}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:38px;align-items:center;padding:24px 12px 35px}.hero h1{font-size:clamp(40px,5vw,62px);line-height:1.65;margin:4px 0 0;letter-spacing:.06em}.hero p{margin:10px 0 18px}.hero .tagline{font-size:23px;font-weight:700;margin-top:0}.hero button{font-size:18px}.notebook{background:#fff8dc;border:1px solid #ebd792;border-radius:16px;box-shadow:0 6px 0 #eadbb7,0 12px 30px #46647414;padding:14px 18px 0;transform:rotate(2deg);text-align:center}.notebook>span{font-weight:700;letter-spacing:.1em}.notebook p{font-size:14px}.notebook .hero-picture{margin-top:8px}.hero-picture .target{display:none}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-heading h2{font-size:24px}.section-heading p{font-weight:700}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.level-card,.panel,.case-card{background:#fff;border:1px solid var(--detective-line);border-radius:24px;box-shadow:0 5px 16px #31547608}.level-card{padding:20px}.level-card h3{margin:8px 0 6px;font-size:22px}.level-number{display:inline-flex;background:var(--detective-yellow);border-radius:50%;width:34px;height:34px;align-items:center;justify-content:center;font-weight:800}.level-card:nth-child(2) .level-number{background:#b8e8dc}.level-card:nth-child(3) .level-number{background:#cce6ff}.level-card p{margin:8px 0 15px;font-size:16px}.level-card button{width:100%}.level-card details{margin-top:18px;font-size:14px}.level-card summary,.help summary{cursor:pointer;min-height:44px;padding:8px 0;font-weight:700}.level-card ol{padding-left:24px}.level-card li{margin:9px 0}.level-card li span{display:block;font-size:12px}.resume-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--detective-mint);border:1px solid #b5ddce;border-radius:20px;padding:16px 22px;margin-bottom:20px}.resume-panel p{margin:0}.help{margin:24px 0}.help p{max-width:750px}.panel{padding:24px;margin:20px 0}.play-top{display:flex;align-items:center;gap:16px;max-width:780px;margin:auto}.play-top strong{margin-left:auto;white-space:nowrap}.play-top>span{font-size:15px}.progress{display:flex;gap:14px;justify-content:center;list-style:none;padding:0;margin:15px auto 16px}.progress li{width:34px;height:34px;color:#bdccda}.progress li.done{color:#d99d00}.progress li.current{color:#0779c9}.progress svg,.case-solved svg{width:100%;height:100%;stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:#fff}.progress .done svg{fill:#ffe699}.case-card{max-width:780px;margin:auto;padding:15px 24px 12px}.question{max-width:640px;margin:auto}.question .eyebrow{margin:0 0 6px;font-size:13px}.question h2{font-size:23px;line-height:1.6;margin:7px 0 13px;font-weight:800}.question #statement{font-size:19px;line-height:1.85;margin:6px 0}.question .marked{background:linear-gradient(transparent 12%,#ffedae 12%);border-radius:4px;padding:2px 0;box-decoration-break:clone;-webkit-box-decoration-break:clone}.question .marked small{display:inline-flex;width:19px;height:19px;border-radius:50%;background:#d49a0c;color:#fff;font-size:12px;align-items:center;justify-content:center;margin-right:3px;vertical-align:middle}.scene{position:relative;aspect-ratio:600/420;max-width:600px;margin:auto;overflow:hidden;border-radius:17px;border:1px solid #dfdec8;isolation:isolate}.scene>svg{display:block;width:100%;height:100%}.scene-label{position:absolute;top:2%;left:2%;font-size:13px;background:#ffffffdb;padding:1px 9px;border-radius:13px;color:#456378;pointer-events:none}.reference-label{position:absolute;top:25%;left:40%;font-size:14px;font-weight:700;color:#785d3b;pointer-events:none}.target{position:absolute;min-width:44px;min-height:44px;padding:0;border:2px solid #ffffff80;border-radius:20px;background:transparent!important;box-shadow:none!important;cursor:pointer;z-index:1}.target:hover{border-color:#4089b4;filter:none!important}.target:focus-visible{outline:4px solid #0677c8;outline-offset:-4px;background:#ffffff16!important}.target:active{transform:none!important}.target.confirmed{border:3px solid #238777;background:#ffffff12!important}.target[aria-disabled=true]{cursor:default}.target-number{position:absolute;left:6px;bottom:4px;min-width:23px;height:23px;border-radius:13px;background:#fffffff2;color:#375574;border:1px solid #93b6c9;font-size:14px;line-height:21px;text-align:center}.color-name{position:absolute;bottom:3px;right:3px;padding:2px 4px;font-size:12px;line-height:1.3;background:#fffefaed;border-radius:6px;white-space:normal;font-weight:700}.clue-ring{pointer-events:none}.clue-ring rect{fill:none;stroke:#cb8b00;stroke-width:3;stroke-dasharray:6 4}.clue-ring circle{fill:#ffdd70;stroke:#b77800;stroke-width:2}.clue-ring text{fill:#604500;text-anchor:middle;font-family:Arial,sans-serif;font-size:17px;font-weight:bold}.feedback{max-width:640px;margin:12px auto 0;border-radius:14px;padding:9px 13px;min-height:53px;background:#f0f7fa;font-size:16px;line-height:1.7}.feedback p,.feedback h3{margin:0}.feedback h3{font-size:20px}.feedback.wrong{background:#fff3ce}.feedback.correct{background:#e2f5ea;border-left:5px solid #248775;animation:found .45s ease-out}.hint-text{font-size:16px;margin:10px auto 0;max-width:640px;color:#735723;line-height:1.7}.hint-text:empty{display:none}.play-actions{max-width:780px;margin:10px auto 0;position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 1.65fr;gap:12px;padding:9px 2px max(12px,env(safe-area-inset-bottom));background:#fffaf0f2;border-radius:17px 17px 0 0}.play-actions button{min-height:49px}.play-actions small{font-size:12px;white-space:nowrap}.settings{display:flex;gap:22px;flex-wrap:wrap;margin:23px 0 6px}.settings label{display:flex;align-items:center;gap:6px;min-height:36px;font-size:14px;cursor:pointer}.settings input{width:21px;height:21px;accent-color:#087ac6}.save-area{font-size:13px;color:#567184;min-height:30px}.save-area p{margin:8px 0}.save-area button{font-size:14px}footer{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;margin-top:22px}footer a{min-height:36px;padding:5px 0}.result{max-width:760px;text-align:center;margin:auto;padding:30px}.case-solved{width:68px;height:68px;color:#b88500;margin:auto}.case-solved svg{fill:#ffe699}.result h2{font-size:28px}.result-stickers{display:flex;justify-content:center;gap:12px;margin:22px 0}.result-stickers span{display:grid;place-items:center;border-radius:50%;background:#ffe69b;width:52px;height:52px;color:#775511;font-size:26px;font-weight:800;box-shadow:0 3px #dac57a}.result #result-detail{font-size:15px;text-align:left;background:#f0f8fb;border-radius:13px;padding:15px}.result-actions{display:grid;gap:14px;max-width:420px;margin:25px auto 0}.result-actions a{padding:8px}.no-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}@keyframes found{from{box-shadow:0 0 0 6px #a9e4c0;transform:scale(.985)}to{box-shadow:0 0 0 0 transparent;transform:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:700px){#main{padding:16px 12px}.hero{display:block;padding:10px 6px 17px}.hero h1{font-size:43px}.hero .tagline{font-size:20px}.hero p{font-size:16px}.hero button{font-size:16px}.notebook{display:none}.section-heading{align-items:start}.section-heading h2{font-size:21px;margin:16px 0}.section-heading p{font-size:14px;white-space:nowrap;margin-top:21px}.levels{grid-template-columns:1fr;gap:12px}.level-card{padding:17px 19px}.level-card h3{display:inline;margin-left:8px;font-size:21px}.level-card p{margin:8px 0 10px}.level-card details{margin-top:10px}.resume-panel{flex-wrap:wrap;padding:14px;gap:10px}.play-top{gap:10px}.play-top button{font-size:14px;padding:8px 13px}.play-top>span{font-size:13px}.play-top strong{font-size:15px}.progress{margin:10px auto;gap:10px}.progress li{width:27px;height:27px}.case-card{padding:12px 10px;border-radius:20px}.question h2{font-size:20px;line-height:1.6;margin:5px 0 11px}.question #statement{font-size:17px;line-height:1.8}.question .eyebrow{font-size:12px}.scene{border-radius:13px}.scene-label{font-size:10px;padding:0 6px}.reference-label{font-size:10px}.target{border-radius:12px;border-width:1.5px}.target-number{left:3px;bottom:2px;min-width:20px;height:20px;font-size:12px;line-height:18px}.color-name{font-size:10px;bottom:2px;right:1px}.feedback{font-size:16px;padding:8px 10px;margin-top:9px}.feedback h3{font-size:19px}.hint-text{font-size:15px}.play-actions{gap:8px;margin-top:7px;padding-top:8px}.play-actions button{padding:8px;font-size:16px}.settings{gap:8px 15px;margin:16px 0 5px}.settings label{font-size:13px}.result{padding:22px 16px}.result h2{font-size:24px}.result-stickers{gap:9px}.result-stickers span{width:42px;height:42px;font-size:23px}.help p{font-size:15px}.panel{padding:17px}}
@media(max-width:370px){.question h2{font-size:18px}.question #statement{font-size:16px}.hero h1{font-size:38px}.section-heading{display:block}.section-heading p{margin-top:0}.target-number{font-size:11px}.color-name{font-size:10px}.play-top{gap:6px}}

.color-key{max-width:600px;margin:9px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:7px}.color-key p{margin:0;padding:7px 9px;border-radius:10px;background:#f0f7fb;font-size:14px;line-height:1.7}.color-key b{display:inline-grid;place-items:center;border:1px solid #90b6d0;border-radius:50%;width:22px;height:22px;background:#fff}

.color-key span{display:inline-block;white-space:nowrap;margin-right:3px}@media(min-width:900px){#play .scene{max-width:560px}.level-card p{min-height:87px}}