/* A deliberately light, fabric-and-candy visual identity. All assets are local. */
:root{color-scheme:light;--ground:#fbf7f2;--paper:#fffdf9;--ink:#513e4b;--muted:#877680;--pink:#bd5879;--blush:#f8e3e8;--sage:#6a917e;--honey:#d3a04b;--border:#e9dedb;--display:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Microsoft YaHei",sans-serif;--body:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.65 var(--body);padding-inline:24px;background-image:radial-gradient(#cdbbb333 .7px,transparent .7px);background-size:7px 7px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--border);background:var(--paper);transition:background .18s,transform .18s}button:hover:not(:disabled){background:var(--blush);transform:translateY(-2px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:4px}button:active:not(:disabled){transform:translateY(1px)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);text-wrap:balance}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.shell{max-width:1160px;margin:auto}.masthead{display:flex;justify-content:space-between;align-items:center;padding-block:28px;border-bottom:1px solid var(--border)}.brand{display:flex;gap:15px;align-items:center;font:800 29px/1.2 var(--display);letter-spacing:2px}.brand small{display:block;font:11px/1.6 var(--body);letter-spacing:1px;color:var(--muted);margin-top:6px}.yarn-logo{display:block;width:46px;height:46px;border:3px solid var(--pink);border-radius:50%;transform:rotate(-28deg);background:repeating-linear-gradient(0deg,transparent 0 5px,var(--pink) 5px 7px,transparent 7px 10px);position:relative;box-shadow:inset 0 0 0 4px var(--ground)}.yarn-logo:after{content:"";position:absolute;right:-10px;bottom:-4px;width:20px;height:19px;border-right:3px solid var(--pink);border-bottom:3px solid var(--pink);border-radius:0 0 12px 0}.header-actions{display:flex;gap:10px}.icon-button{border-radius:50%;width:40px;height:40px;font:600 21px var(--display)}.studio{display:grid;grid-template-columns: .8fr 1.3fr;gap:65px;align-items:center;padding-block:48px 30px}.story{padding-left:20px;display:flex;flex-direction:column;align-items:flex-start;gap:23px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:600}.story h1{font-size:clamp(38px,4.5vw,58px);font-weight:800;line-height:1.45;letter-spacing:3px}.story h1 span{color:var(--pink);position:relative}.story h1 span:after{content:"";position:absolute;bottom:-5px;left:0;width:95%;height:8px;border-top:3px solid #deacb9;border-radius:50%}.intro{font-size:14px;line-height:2.1;color:var(--muted)}.paper-note{background:#f2efdf;padding:25px 25px 20px;transform:rotate(-2deg);position:relative;margin-top:6px;box-shadow:2px 5px 0 #e8e0d448;max-width:100%}.paper-note h2{font-size:16px}.paper-note ol{padding-left:20px;font-size:12px;line-height:2.3;margin:10px 0}.paper-note p{font-size:11px;color:#817662;border-top:1px dashed #d4cbb3;padding-top:10px}.pin{position:absolute;top:-10px;left:40%;height:22px;width:64px;background:#d9e3d5cc;transform:rotate(5deg)}.spools{display:flex;align-items:center;gap:9px;margin-top:12px}.spools i{display:block;width:25px;height:32px;border-radius:8px;background:repeating-linear-gradient(0deg,#d095aa 0 3px,#e3b2c1 3px 5px);transform:rotate(-15deg);border-block:4px solid #e8d5b5}.spools i:nth-child(2){background:repeating-linear-gradient(0deg,#8da894 0 3px,#b4c5ac 3px 5px);transform:rotate(10deg)}.spools i:nth-child(3){background:repeating-linear-gradient(0deg,#d2ad70 0 3px,#e3c593 3px 5px)}.spools span{font-size:10px;color:var(--muted);margin-left:8px;letter-spacing:1px}.play-area{min-width:0}.game-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.game-heading h2{font-size:24px;margin-top:4px}.game-heading h2>span:first-child{font-variant-numeric:tabular-nums}.difficulty{display:inline-block;vertical-align:middle;font:11px var(--body);background:#e8eee5;color:#587361;padding:6px 9px;border-radius:6px;margin-left:8px;white-space:nowrap}.text-button{border:0;background:transparent;font-size:12px;padding:8px}.text-button span{font-size:17px;margin-left:6px}.quilt{background:var(--paper);border:1px solid #e5d5ce;border-radius:24px;padding:22px;box-shadow:0 6px 0 #ecdfd8,0 15px 35px #74534209;position:relative}.quilt:before{content:"";position:absolute;inset:9px;border:1px dashed #e4d4cf;border-radius:17px;pointer-events:none}.quilt-top{display:flex;align-items:center;justify-content:space-between;padding-inline:6px;gap:8px}.hearts{color:var(--pink);font-size:24px;letter-spacing:3px;white-space:nowrap;line-height:1.3}.heart-empty{color:#e7dce0}.thread-count{font-size:11px;color:var(--muted)}.thread-count strong{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}.board-wrap{position:relative;width:100%;aspect-ratio:1;max-width:100%;margin-block:13px 6px;overflow:hidden;border-radius:12px;background:#fdfaf6}#board{display:block;width:100%;height:100%;touch-action:none;overflow:hidden}.loading{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;background:var(--paper);color:var(--muted)}.quilt-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;color:var(--muted);font-size:11px;text-align:center}.stitch{color:#cbb5a7}.tools{display:flex;gap:12px;margin-top:22px}.tools button{border-radius:13px;padding:11px 16px;flex:1;font-size:13px;box-shadow:0 3px 0 #e9dfda}.tools button span{font-size:22px;vertical-align:-2px;margin-right:4px}.tools .hint-button{background:var(--blush);border-color:#edcbd5;color:#994965;flex:1.4}.under-board{text-align:center;color:var(--muted);font-size:11px;margin-top:18px;letter-spacing:.5px}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:20px 24px;margin-top:15px;border-top:1px solid var(--border);font-size:10px;color:var(--muted);letter-spacing:1px}.yarn{--yarn-width:5.5;cursor:pointer;outline:none}.yarn .strand{stroke-width:var(--yarn-width);stroke-linecap:round;stroke-linejoin:round;fill:none}.yarn .fiber{stroke:#fff9;stroke-width:1;stroke-dasharray:2 3;fill:none;pointer-events:none}.yarn .hit{fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke}.yarn .tip{fill:none;stroke-width:var(--yarn-width);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.yarn:hover,.yarn:focus-visible{--yarn-width:8}.yarn:focus-visible .hit{stroke:#513e4b18}.yarn.hinted{--yarn-width:9}.yarn.hinted .strand,.yarn.hinted .tip{filter:drop-shadow(0 0 4px #d7a733);animation:breathe .8s ease-in-out 3}.yarn.blocked{--yarn-width:8}.yarn.blocked .strand,.yarn.blocked .tip{stroke:#ba3659!important}.yarn.bump{animation:bump .32s ease-in-out}.yarn.exit{pointer-events:none}.board-locked .yarn{pointer-events:none}@keyframes breathe{50%{opacity:.45}}@keyframes bump{25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)}}dialog{border:1px solid var(--border);border-radius:24px;background:var(--paper);color:var(--ink);width:min(540px,calc(100% - 32px));max-height:85dvh;padding:28px;box-shadow:0 20px 90px #513e4b25}dialog::backdrop{background:#513e4b55;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}.dialog-heading h2{font-size:24px}.close-button{border:0;border-radius:50%;width:34px;height:34px;font-size:25px;background:var(--ground);flex-shrink:0}.chapter-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.chapter-picker h3{font-size:15px;text-align:center}.chapter-picker button{width:34px;height:34px;border-radius:10px;flex-shrink:0}.level-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}.level-grid button{aspect-ratio:1;border-radius:9px;font-size:12px;padding:0;position:relative}.level-grid button.completed{background:#eaf1e8;color:#55785c}.level-grid button.completed:after{content:"✓";position:absolute;right:2px;top:-3px;font-size:9px}.level-grid button.current{border:2px solid var(--pink);color:var(--pink);font-weight:700}.dialog-footnote{font-size:11px;color:var(--muted);margin-top:20px}.help-copy{display:grid;gap:14px;font-size:14px;margin-bottom:24px}.primary-button{display:block;width:100%;border:1px solid #b25a78;border-radius:13px;background:var(--pink);color:white;padding:12px 20px;font-weight:600}.primary-button:hover:not(:disabled){background:#aa496a}#result-dialog{text-align:center;max-width:390px;padding-block:35px}.result-decoration{font-size:55px;margin-bottom:12px}#result-dialog h2{font-size:29px;margin-block:10px}#result-copy{color:var(--muted);font-size:13px;margin-bottom:24px}#result-select{margin-top:12px}@media(min-width:1400px){.studio{padding-block:60px 35px}}@media(max-width:850px){.studio{gap:30px;grid-template-columns:.7fr 1.3fr}.story{padding-left:0}.story h1{font-size:38px}.paper-note{padding-inline:15px}.intro{font-size:12px}.spools span{display:none}.quilt{padding:19px}.hearts{font-size:20px}}@media(max-width:650px){body{padding-inline:16px}.masthead{padding-block:19px}.brand{font-size:24px}.brand small{font-size:9px}.yarn-logo{width:36px;height:36px}.studio{grid-template-columns:1fr;padding-block:24px 12px;gap:0}.story{display:none}.play-area{width:100%;max-width:520px;margin:auto}.game-heading h2{font-size:22px}.game-heading{margin-bottom:15px}.quilt{padding:18px}.board-wrap{margin-top:17px}.tools{gap:9px;margin-top:20px}.tools button{padding:10px 8px;font-size:12px}.under-board{font-size:10px}footer{font-size:9px;margin-top:12px}dialog{padding:22px}.level-grid{grid-template-columns:repeat(5,1fr);gap:8px}.level-grid button{aspect-ratio:auto;min-height:38px}.difficulty{font-size:10px;margin-left:4px}.eyebrow{letter-spacing:1px}.quilt-bottom{font-size:10px;min-height:36px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.view-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;padding-block:6px 10px;color:var(--muted);font-size:11px}.view-tools>span{margin-right:auto}.view-tools button{min-width:36px;min-height:36px;border-radius:9px;padding:3px 9px}.view-tools output{min-width:40px;text-align:center;font-variant-numeric:tabular-nums}#board.panning,#board.panning .yarn{cursor:grabbing}#board{user-select:none;-webkit-user-select:none}@media(max-width:650px){.view-tools>span{flex-basis:100%;text-align:center}.view-tools{justify-content:center}}