:root{color-scheme:light}body{margin:0}.yarn-page{max-width:1240px;margin:24px auto 40px;padding:0 18px;color:#233e58;font-family:'Zen Maru Gothic','Yu Gothic',Meiryo,sans-serif}.page-intro h1{font-size:clamp(26px,3vw,35px);margin:0 0 5px}.page-intro p{margin:0 0 22px}.yarn-app{background:#f4eddf url('./assets/linen.webp') center/650px;color:#233e58;box-shadow:0 12px 35px #253d5222;border:1px solid #bcb5a6;border-radius:18px;overflow:hidden}.yarn-app *{box-sizing:border-box}.yarn-app [hidden]{display:none!important}.yarn-app button,.yarn-app input,.yarn-app select{font:inherit}.yarn-app button{min-width:44px;min-height:44px;padding:11px 18px;border:1px dashed #8997a0;border-radius:9px;background:#fff9ec;color:#233e58;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #a1a09a40}.yarn-app button:hover:not(:disabled){background:#f0dfbd}.yarn-app button:disabled{cursor:default;opacity:.65}.yarn-app button:focus-visible,.yarn-app a:focus-visible,.yarn-app input:focus-visible,.yarn-app select:focus-visible,.yarn-app summary:focus-visible{outline:3px solid #cf603f;outline-offset:4px}.yarn-app .primary{color:#fffaf2;background:#c45b43;border:1px dashed #ffdfb9;outline:3px solid #c45b43;outline-offset:-1px;box-shadow:0 4px 0 #994c3b}.yarn-app .primary:hover{background:#b34f37}.toolbar{display:flex;gap:18px;align-items:center;padding:12px 22px;background:#294560;color:#fff8e6;border-bottom:2px dashed #d1c5ab;box-shadow:0 5px 0 #294560}.toolbar a{color:#fff8e6;display:grid;place-items:center;min-height:44px;font-size:13px;font-weight:800}.room-label{font-size:12px;letter-spacing:.12em;margin-right:auto}.game-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.game-tools button{padding:8px 10px;font-size:11px;background:#f7efdc;box-shadow:none}.game-tools button[aria-pressed=true]{background:#bfd2d8}.scene{padding:35px}.cover{display:grid;grid-template-columns:.85fr 1.35fr;gap:28px 35px;align-items:center}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:800;color:#59687a}.invitation h2{font-size:clamp(34px,4vw,51px);line-height:1.5;letter-spacing:.03em;margin:17px 0}.invitation h2 em{font-style:normal;color:#b4513d}.invitation p{font-size:16px;line-height:1.9}.yarn-app .large{padding:16px 24px;font-size:20px;min-height:62px;width:100%;margin-top:12px}.saved{display:flex;justify-content:space-between;gap:12px;font-size:11px!important;margin-top:25px}.saved span{border-bottom:1px dashed #a29a88;padding-bottom:7px}.cover-art{margin:0;position:relative;border:2px dashed #587189;outline:7px solid #f2e9d4;box-shadow:6px 7px 0 #91886b22;background:#f3ead7;padding:9px;border-radius:16px}.cover-art img{width:100%;height:auto;aspect-ratio:1.13;object-fit:cover;display:block;border-radius:9px}.cover-art figcaption{text-align:center;font-size:12px;padding:14px 5px 6px;letter-spacing:.07em}.three-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:17px 0 0}.three-steps li{padding:17px;border:1px dashed #8f9fa8;border-radius:8px;background:#fffcf2bb;display:flex;align-items:center;justify-content:center;gap:18px;font-size:14px;font-weight:800;line-height:1.7}.three-steps b{width:32px;height:32px;display:grid;place-items:center;background:#2e4f6b;color:#fff9eb;border-radius:50%;font-size:15px}.play{background:#304e68;padding:23px}.play-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 22px;color:#fff9e6}.play-heading h2{background:#faf1dd;color:#233e58;border:1px dashed #9fa49d;outline:4px solid #ede3cf;padding:12px 21px;border-radius:3px;font-size:21px;margin:4px}.play-heading h2 b{font-size:29px;margin-left:5px}.play-heading h2 small{font-size:16px}.stats{display:flex;gap:10px}.stats>span{border:1px dashed #bdc0bb;border-radius:8px;padding:8px 20px;text-align:center;min-width:95px}.stats small{display:block;font-size:10px;white-space:nowrap}.stats b{font-size:26px;color:#fff0ce}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:23px;align-items:start}.board-area{min-width:0}.mat{background:#f9f0de url('./assets/linen.webp') center/650px;border-radius:16px;padding:10px;border:2px dashed #66809a;outline:6px solid #eee1c7;outline-offset:-1px;box-shadow:3px 5px 0 #152a3a28;position:relative}.mat::before,.mat::after{position:absolute;content:'×';color:#52708d;top:4px;font-size:21px;pointer-events:none}.mat::before{left:9px}.mat::after{right:9px}.mat svg{width:100%;height:auto;display:block;aspect-ratio:700/610;touch-action:none;user-select:none;-webkit-user-select:none;overflow:visible}.thread-shadow{stroke:#fffcf2;stroke-width:14;stroke-linecap:round}.thread{stroke-width:7;stroke-linecap:round}.thread.cross{stroke:#c74248;stroke-dasharray:11 7;stroke-width:8}.yarn-node{cursor:grab;touch-action:none}.yarn-node:active{cursor:grabbing}.yarn-ball{filter:drop-shadow(0 4px 2px #6c543733)}.selection-ring{stroke:transparent}.yarn-node.selected .selection-ring,.yarn-node:focus-visible .selection-ring{stroke:#294b70;stroke-dasharray:4 3}.yarn-node.overlap .yarn-ball{stroke:#b13546;stroke-dasharray:5 3}.yarn-node:focus{outline:none}.node-number{fill:#223e59;font:900 16px 'Zen Maru Gothic',sans-serif;pointer-events:none}.yarn-node path,.yarn-node text,.yarn-node circle:not(.node-hit){pointer-events:none}.pocket{border:2px dashed #bcc3bd;border-radius:11px;padding:20px 15px;background:#29465f;color:#fff9e7;box-shadow:inset 0 0 0 5px #37566e}.pocket h3{font-size:17px;letter-spacing:.05em;text-align:center;margin:0 0 24px}.pocket-actions{display:grid;gap:15px}.pocket-actions button{font-size:14px;min-height:60px;padding:10px}.pocket .primary{margin-bottom:5px}.progress-thread{background:#1e354d;height:8px;border-radius:4px;margin-top:28px;overflow:hidden}.progress-thread i{display:block;background:#ee9d78;height:100%}.tip{font-size:13px;line-height:1.9;text-align:center}.fine-controls{border-top:1px dashed #899cad;margin-top:20px;padding-top:8px}.fine-controls summary{min-height:44px;cursor:pointer;font-size:13px;font-weight:800;display:flex;align-items:center}.fine-controls summary::before{content:'＋';margin-right:8px}.fine-controls[open] summary::before{content:'−'}.fine-controls label{display:block;font-size:12px}.fine-controls select{width:100%;min-height:44px;padding:7px;background:#fff9ec;color:#233e58;border-radius:7px;border:1px solid #ccd2cd;font-size:12px;margin-top:6px}.direction-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.direction-pad button{font-size:21px;padding:4px;min-width:44px}.direction-pad #up{grid-column:2}.direction-pad #left{grid-column:1}.fine-controls p{font-size:11px;text-align:center}.move-count{font-size:12px;line-height:2;padding-top:12px;border-top:1px dashed #8ca0ae;margin-bottom:0}.board-area #feedback{background:#faf0dc;border-radius:5px;padding:14px 18px;color:#294560;font-size:15px;line-height:1.8;min-height:56px;margin:20px 0 0}.board-area #finish{display:block;margin:18px auto 5px;font-size:17px;min-height:55px;width:min(100%,420px)}.bench{display:flex;gap:15px;justify-content:center;border-top:1px dashed #d0c8b6;margin:24px -23px -23px;padding:20px 23px;background:#294560}.bench button{min-height:48px;padding:10px 25px}.record-heading{text-align:center;padding:0 0 20px}.record-heading h2{font-size:clamp(29px,3vw,43px);margin:12px 0}.record-heading p{font-size:18px;font-weight:800}.sample-card{position:relative;width:min(850px,100%);margin:auto;padding:23px;background:#fcf6e8;border:1px dashed #6c8499;outline:7px solid #eee4cf;border-radius:12px;box-shadow:4px 6px 0 #89764a20}.sample-card .mat{width:min(590px,90%);margin:auto;padding:12px;outline:0;box-shadow:none}.cloth-badge{position:absolute;left:25px;top:25px;background:#294560;color:#fff5dc;border:1px dashed #d1c7b5;outline:4px solid #294560;font-size:28px;padding:14px;z-index:1;border-radius:4px}.sample-card p{font-size:14px;font-weight:800;text-align:center;margin:22px 0 0}.sample-card .yarn-node{cursor:default}.record-actions{display:flex;justify-content:center;gap:17px;margin-top:33px;flex-wrap:wrap}.record-actions button{min-height:55px}.record-note{text-align:center;font-size:12px;line-height:1.9;margin-top:23px}.yarn-app dialog{width:min(92vw,550px);max-height:90dvh;padding:27px;border:3px solid #627f95;border-radius:16px;background:#fff6e2;color:#233e58;box-shadow:0 20px 70px #20384a55}.yarn-app dialog::backdrop{background:#18324c99}.yarn-app dialog h2{font-size:25px;margin:0 0 18px}.yarn-app dialog p{font-size:16px;line-height:1.9}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}#sound-settings input{width:100%;min-height:44px;accent-color:#315778}#sound-settings output{float:right}#screen-note{margin:0;text-align:center;font-size:13px}#screen-note:not(:empty){padding:12px}.parent-note{margin:20px 10px;font-size:13px;line-height:1.9}.parent-note summary{display:flex;align-items:center;min-height:44px;font-weight:800;cursor:pointer}.yarn-app:fullscreen{width:100%;height:100dvh;border:0;border-radius:0;overflow:auto}.yarn-app:fullscreen .scene{max-width:1240px;margin:auto}.yarn-app:fullscreen .cover{min-height:calc(100dvh - 72px)}.yarn-app[data-paused=true] *{animation-play-state:paused!important}
@media(max-width:1000px){.room-label{display:none}.toolbar{justify-content:space-between}.scene{padding:25px}.cover{gap:25px}.invitation h2{font-size:38px}.invitation p{font-size:14px}.yarn-app .large{font-size:17px;padding:14px}.cover-art img{aspect-ratio:.85}.three-steps li{font-size:12px;gap:12px;padding:13px}.play{padding:20px}.workbench{grid-template-columns:minmax(0,1fr) 190px;gap:20px}.pocket{padding:17px 12px}.pocket h3{font-size:14px}.pocket-actions button{font-size:12px;padding:8px;min-height:52px}.stats>span{padding:7px 13px;min-width:80px}.stats b{font-size:24px}.play-heading h2{font-size:17px;padding:12px}.play-heading h2 b{font-size:25px}.play-heading h2 small{font-size:13px}.bench{margin:23px -20px -20px;padding:20px}.fine-controls summary{font-size:11px}.pocket .direction-pad{gap:5px}.direction-pad button{min-width:44px}.cloth-badge{left:16px;top:16px;font-size:23px;padding:10px}}
@media(max-width:820px){.yarn-page{padding:0 10px}.toolbar{padding:10px 13px;gap:8px}.game-tools{gap:5px;justify-content:flex-end}.game-tools button{font-size:10px;padding:7px}.scene{padding:20px}.cover{grid-template-columns:1fr 1.25fr;gap:25px 20px}.invitation h2{font-size:32px}.eyebrow{font-size:10px}.invitation p{font-size:13px}.saved{font-size:10px!important;gap:8px}.cover-art figcaption{font-size:10px}.three-steps{gap:12px;margin-top:7px}.three-steps li{font-size:11px;gap:10px;padding:11px}.three-steps b{width:25px;height:25px;font-size:12px}.workbench{grid-template-columns:minmax(0,1fr);gap:25px}.pocket{padding:15px}.pocket h3{display:none}.pocket-actions{grid-template-columns:repeat(3,1fr);gap:15px}.pocket .primary{margin-bottom:0}.pocket-actions button{font-size:13px}.progress-thread{margin-top:20px}.tip{margin:14px 0;font-size:12px}.tip br{display:none}.fine-controls{margin-top:10px}.fine-controls summary{font-size:13px}.fine-controls label{max-width:260px;margin:auto}.direction-pad{max-width:190px;margin:13px auto 0}.move-count{text-align:center;font-size:12px;margin-top:16px;padding-top:15px}.move-count br{display:none}.move-count b{margin-right:14px}.play-heading{gap:15px}.stats{gap:8px}.stats>span{min-width:70px;padding:7px 11px}.stats small{font-size:9px}.bench button{font-size:13px;padding:9px 17px}.board-area #feedback{font-size:14px}.sample-card{padding:20px}.sample-card .mat{width:94%}.cloth-badge{left:8px;top:8px;font-size:20px;padding:9px}.record-heading h2{font-size:32px}}
@media(max-width:560px){.yarn-page{padding:0 5px;margin-top:17px}.page-intro{padding:0 8px}.toolbar{flex-wrap:wrap;padding:9px 10px}.game-tools{margin-left:auto}.yarn-app{border-radius:12px}.scene{padding:18px}.cover{display:flex;flex-direction:column;gap:23px}.invitation{text-align:center;width:100%}.invitation h2{font-size:33px;line-height:1.6;margin:10px 0}.invitation h2 br{display:none}.invitation h2 em{display:block}.invitation p{font-size:14px;margin:14px 0}.invitation p br{display:none}.yarn-app .large{font-size:18px;min-height:59px}.saved{font-size:11px!important;margin:23px 0 0!important;justify-content:center;gap:24px}.cover-art{width:100%;padding:5px;outline-width:4px}.cover-art img{aspect-ratio:1.5}.cover-art figcaption{font-size:10px;padding:12px 3px 6px}.three-steps{width:100%;gap:9px;margin-top:4px}.three-steps li{flex-direction:column;text-align:center;gap:8px;padding:10px 6px;font-size:10px}.three-steps b{width:25px;height:25px}.play{padding:13px}.play-heading{display:block;text-align:center;margin-bottom:25px}.play-heading h2{font-size:19px;padding:10px}.play-heading h2 b{font-size:26px}.stats{justify-content:center;gap:10px;margin-top:22px}.stats>span{flex:1;padding:7px;min-width:0}.stats b{font-size:25px}.stats small{font-size:10px}.mat{padding:4px;border-radius:10px;outline-width:4px}.mat::before,.mat::after{top:-1px;font-size:17px}.mat::before{left:6px}.mat::after{right:6px}.board-area #feedback{font-size:13px;padding:13px;min-height:63px;margin-top:20px}.workbench{gap:23px}.pocket{padding:14px 12px}.pocket-actions{grid-template-columns:1fr 1fr;gap:14px 11px}.pocket .primary{grid-column:1/-1;min-height:52px;font-size:14px}.pocket-actions button{font-size:12px;padding:8px;min-height:48px}.move-count{font-size:11px}.move-count b{margin-right:7px}.bench{margin:23px -13px -13px;padding:18px 12px;gap:9px;flex-wrap:wrap}.bench button{padding:9px 12px;font-size:12px}.record{padding:20px 14px}.record-heading h2{font-size:29px;line-height:1.6}.record-heading p{font-size:15px}.sample-card{padding:14px 10px;outline-width:4px}.sample-card .mat{width:100%;padding:3px}.cloth-badge{left:2px;top:2px;font-size:15px;padding:6px;outline-width:2px}.sample-card p{font-size:12px;line-height:1.8;margin-top:16px}.record-actions{display:grid;grid-template-columns:1fr 1fr;gap:15px 11px;margin-top:28px}.record-actions .primary{grid-column:1/-1}.record-actions button{font-size:13px;padding:9px;min-height:49px}.record-note{font-size:11px}.yarn-app dialog{padding:22px}.yarn-app dialog p{font-size:14px}.yarn-app:fullscreen .cover{min-height:0}}
@media(max-width:350px){.yarn-page{padding:0 3px}.scene{padding:15px}.play{padding:10px}.toolbar{padding:8px}.invitation h2{font-size:29px}.three-steps{gap:7px}.three-steps li{font-size:9px}.bench{margin-left:-10px;margin-right:-10px;margin-bottom:-10px;padding:17px 8px;gap:7px}.bench button{font-size:11px;padding:8px 10px}.record-heading h2{font-size:25px}.stats small{font-size:9px}}
@media(max-height:500px) and (min-width:561px){.yarn-app:fullscreen .cover{min-height:0}.cover-art img{aspect-ratio:1.8}.invitation h2{font-size:28px}.invitation h2 br{display:none}.invitation p{margin:10px 0}.yarn-app .large{min-height:49px}.three-steps{margin-top:0}.cover{gap:20px}}
@media(prefers-reduced-motion:reduce){.yarn-app *{animation:none!important;transition:none!important}}
.cover-art img{aspect-ratio:16/10}.yarn-app{background-image:linear-gradient(#fffaf366,#fffaf366),url('./assets/linen.webp')}.mat{background-image:linear-gradient(#fffaf355,#fffaf355),url('./assets/linen.webp')}