*{box-sizing:border-box}body{margin:0;color:#253b46;background:#f5f0e6;font:16px/1.5 system-ui,sans-serif}header{padding:32px max(5vw,20px) 26px;background:#1d3541;color:#fff5df;border-bottom:5px solid #c79651}header p{margin:4px 0;color:#d4ddd8}h1{font:clamp(42px,6vw,68px)/1.05 Georgia,serif;margin:10px 0}h1 i{color:#d5ac70;font-weight:normal}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px}main{max-width:1180px;margin:auto;padding:25px 24px}h2{font:28px Georgia,serif;margin:5px 0 12px}h3{margin:20px 0 5px;font-size:16px}p{margin:6px 0 14px}.intro{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:24px}.intro>div:first-child{max-width:540px}.toolbar{display:flex;flex-wrap:wrap;gap:7px;max-width:360px}button{font:inherit;font-size:14px;border:1px solid #81918b;background:#fffdf5;color:#243e49;border-radius:6px;padding:10px 13px;cursor:pointer;min-height:44px}button:hover{background:#ebe3d4}button:focus-visible{outline:3px solid #c17c19;outline-offset:3px}#new,#next{background:#274b59;color:white;border-color:#274b59}button:disabled{opacity:.45;cursor:default}.bench{display:grid;grid-template-columns:1.15fr 1fr;gap:25px}.fabric,.controls{border:1px solid #d4ccba;border-radius:12px;padding:24px;background:#fffaf0;box-shadow:0 6px 22px #2639450a}.sectionhead{display:flex;justify-content:space-between;align-items:center}#score{font-weight:800;color:#88601e}.swatch{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:10px solid #b69261;border-radius:4px;background:#394d56;overflow:hidden;box-shadow:inset 0 0 25px #0004}.cell{position:relative;background:linear-gradient(0deg,#d4c7aa,#f4ebd6 45%,#bdb393 70%,#eee4c8);border:.5px solid #1b2d3430}.cell:after{content:'';position:absolute;inset:0;background:url(textile.webp) center/300px;opacity:.14;mix-blend-mode:multiply}.cell.up{background:linear-gradient(90deg,#1f3c4e,#496776 45%,#203e4d 70%,#4b6871)}.cell.wrong:before{content:'';position:absolute;inset:3px;border:2px solid #f1b247;z-index:1}.reference{display:grid;grid-template-columns:1fr 140px;gap:20px;align-items:center;margin-top:20px}.reference .swatch{border-width:4px}.reference p{font-size:13px}.meter{display:flex;justify-content:space-between;border-top:1px solid #d3c7ae;margin:20px 0;padding-top:12px;font-size:12px}.threading{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.threading button{padding:6px 0;font-weight:700;position:relative}.threading small{display:block;font-size:9px;font-weight:400}.tieup{display:grid;grid-template-columns:45px repeat(4,1fr);gap:5px;text-align:center;align-items:center}.tieup button{padding:8px;background:#e8e0d0}.tieup button.on{background:#284c5b;color:white}.tieup span{font-size:12px}.controls p{font-size:13px;color:#4c5b5c}.controls .how{font-size:15px}details{margin:20px 0;border-top:1px solid #ded2bd;padding-top:15px}summary{cursor:pointer}#feedback{min-height:48px;margin-top:15px;font-weight:600}#hinttext{min-height:35px}footer{margin:30px 0;font-size:11px;color:#52615f}[hidden]{display:none!important}@media(max-width:720px){header{padding:24px 18px}.intro{display:block}.toolbar{max-width:none}.bench{grid-template-columns:1fr}main{padding:20px 14px}.fabric,.controls{padding:18px}.reference{grid-template-columns:1fr 120px}.threading{gap:3px}.threading button{font-size:16px}.intro p{font-size:14px}.sectionhead h2{font-size:25px}}