:root{color:#171714;background:#f4f1e9;font-family:Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit}main{width:min(1040px,100% - 32px);margin:0 auto;padding:28px 0 56px}header{border-bottom:1px solid #bbb7ae;justify-content:space-between;align-items:end;gap:24px;padding-bottom:20px;display:flex}h1,h2,p{margin:0}h1{font-size:1.15rem;font-weight:600}header p,.intro,.note{color:#68655f}header p{margin-top:4px;font-size:.82rem}nav{gap:20px;display:flex}nav a{color:#68655f;font-size:.82rem;text-decoration:none}nav a[aria-current]{color:#171714;text-underline-offset:5px;text-decoration:underline}#app{padding-top:28px}.intro{max-width:660px;margin-bottom:24px;font-size:.9rem;line-height:1.5}.presets{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.text-button{cursor:pointer;background:0 0;border:1px solid #bbb7ae;padding:7px 10px}.text-button[aria-pressed=true],.text-button:hover{border-color:#171714}.comparison{grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,72px);display:grid}.strategy h2{font-size:.95rem;font-weight:600}.strategy-copy{color:#68655f;min-height:38px;margin:5px 0 16px;font-size:.78rem;line-height:1.4}.wall{aspect-ratio:1;grid-template-columns:repeat(5,1fr);gap:5px;width:100%;max-width:400px;display:grid}.cell{border:1px solid color-mix(in srgb, var(--tile) 35%, #b5b1a8);background:color-mix(in srgb, var(--tile) 10%, transparent);color:#0000;place-items:center;min-width:0;font-size:clamp(.7rem,2.2vw,1rem);display:grid;position:relative}.cell.filled{border-color:var(--tile);background:var(--tile);color:var(--ink)}.cell.latest{outline-offset:2px;z-index:1;outline:3px solid #171714}.cell .points{opacity:.8;font-size:.65rem;position:absolute;bottom:3px;right:4px}button.cell{cursor:pointer;padding:0}button.cell:hover,button.cell:focus-visible{outline-offset:1px;outline:2px solid #171714}.blue{--tile:#2672a6;--ink:#fff}.yellow{--tile:#e3b82f;--ink:#171714}.red{--tile:#b9473f;--ink:#fff}.black{--tile:#333532;--ink:#fff}.white{--tile:#d8d6cd;--ink:#171714}.scoreline{gap:22px;margin-top:16px;display:flex}.scoreline span,.breakdown span{color:#68655f;text-transform:uppercase;letter-spacing:.06em;font-size:.67rem;display:block}.scoreline strong{font-size:1.25rem;font-weight:500}.stepper{border-top:1px solid #bbb7ae;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:30px;padding-top:18px;display:grid}.stepper input{accent-color:#171714;width:100%}.stepper output{text-align:center;min-width:70px;font-size:.78rem}.stepper .text-button{width:38px;height:34px;padding:0}.takeaway{margin-top:18px;font-size:.85rem;line-height:1.5}.custom-layout{grid-template-columns:minmax(280px,480px) 1fr;align-items:start;gap:clamp(30px,8vw,90px);display:grid}.custom-layout .wall{max-width:none}.custom-panel h2{margin-bottom:10px;font-size:1rem}.custom-panel>p{color:#68655f;margin-bottom:20px;font-size:.84rem;line-height:1.5}.breakdown{border-block:1px solid #bbb7ae;grid-template-columns:1fr auto;gap:10px 20px;padding:16px 0;display:grid}.breakdown strong{text-align:right;font-weight:500}.breakdown .total{font-size:1.15rem}.actions{gap:8px;margin-top:16px;display:flex}.note{margin-top:20px;font-size:.75rem;line-height:1.5}.optimize-controls{border-block:1px solid #bbb7ae;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px;padding-block:14px;font-size:.82rem;display:flex}.turn-control{grid-template-columns:auto minmax(140px,260px) 24px;align-items:center;gap:12px;display:grid}.turn-control input{accent-color:#171714;width:100%}.turn-control output{text-align:right}.check-control{align-items:center;gap:8px;display:flex}.check-control input{accent-color:#171714}.optimize-layout{grid-template-columns:minmax(280px,480px) 1fr;align-items:center;gap:clamp(30px,8vw,90px);display:grid}.optimize-layout .wall{max-width:none}.optimize-score{max-width:300px}@media (width<=680px){main{width:min(100% - 24px,520px);padding-top:20px}header{flex-direction:column;align-items:start;gap:16px}.comparison{gap:14px}.strategy-copy{min-height:64px}.wall{gap:3px}.scoreline{gap:5px;display:grid}.scoreline div{justify-content:space-between;align-items:baseline;display:flex}.custom-layout{grid-template-columns:1fr}.optimize-controls{flex-direction:column;align-items:stretch}.optimize-layout{grid-template-columns:1fr}}