.yarn-unravel{color:#424c45;aspect-ratio:auto;box-sizing:border-box;background:#f5eee2;border-radius:24px;grid-template-rows:auto 1fr;grid-template-columns:repeat(12,minmax(0,1fr));width:100%;max-width:1200px;min-height:min(720px,95dvh);margin:auto;font:16px system-ui,sans-serif;display:grid;position:relative;overflow:hidden;container-type:inline-size}.yarn-unravel canvas{touch-action:none;grid-area:1/1/3/9;align-self:start;width:100%;height:min(720px,95dvh);min-height:560px}.yarn-unravel__top{text-align:center;grid-area:1/9/auto/-1;padding:20px 14px 8px}.yarn-unravel__top h1{margin:0 0 8px;font-size:24px}.yarn-unravel__discs{flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0;display:flex}.yarn-unravel__disc{background:#fffaf1;border:2px solid #d9ccba;border-radius:20px;min-width:110px;padding:8px 16px}.yarn-unravel__slots{justify-content:center;gap:7px;margin:8px 0;display:flex}.yarn-unravel__roll{color:#26322d;background:var(--yarn-color,#e7dece);border:2px solid #cbbb9f;border-radius:50%;place-items:center;width:34px;height:34px;font-size:13px;font-weight:700;display:inline-grid}.yarn-unravel__bottom{padding:10px max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) 12px;text-align:center;grid-area:2/9/auto/-1}.yarn-unravel__bottom p{min-height:24px;margin:6px}.yarn-unravel button{color:#34473a;min-height:44px;font:inherit;cursor:pointer;background:#fffaf1;border:1px solid #b4c0ad;border-radius:14px;margin:3px;padding:8px 15px}.yarn-unravel button:focus-visible{outline:3px solid #506ba8}.yarn-unravel button:not(:disabled):hover{background:#ecf1e6}.yarn-unravel button:not(:disabled):active{transform:translateY(1px)}.yarn-unravel button:disabled{opacity:.45;cursor:default}.yarn-unravel__status{font-weight:600}.yarn-unravel__upcoming{letter-spacing:.04em;margin:4px 0 10px;font-size:12px}.yarn-unravel__tools{flex-wrap:wrap;justify-content:center;display:flex}.yarn-unravel__tools button{background:#e7f0e2;font-size:13px}.yarn-unravel__choose{margin:6px 0;font-size:13px;display:block}.yarn-unravel__choose select{max-width:100%;min-height:44px;font:inherit;color:inherit;background:#fffaf1;border:1px solid #b4c0ad;border-radius:10px;padding:8px}.yarn-unravel__thread{pointer-events:none;width:100%;height:100%;display:none;position:absolute;inset:0;overflow:visible}.yarn-unravel{font-family:ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;box-shadow:0 8px 30px #34473a12}.yarn-unravel__top,.yarn-unravel__bottom{background:#eee4d5}.yarn-unravel__top{padding-top:26px}.yarn-unravel__eyebrow{letter-spacing:.18em;color:#706856;margin:0 0 8px;font:700 10px system-ui,sans-serif}.yarn-unravel__top h1{color:#294c3e;margin-bottom:6px;font-size:30px}.yarn-unravel__top>span{color:#615f50;font-size:12px}.yarn-unravel__discs{gap:10px}.yarn-unravel__disc{background:#fff8e9;border:1px solid #cdbda4;border-bottom:5px solid #c0a583;border-radius:14px;padding:9px 10px 6px;font-size:13px;font-weight:700;box-shadow:0 4px #6b513610}.yarn-unravel__roll{isolation:isolate;background:repeating-linear-gradient(0deg,#00000012 0 1px,transparent 1px 4px),var(--yarn-color);box-sizing:border-box;border:1px solid #6a50382e;border-bottom:4px solid #75583f52;border-radius:7px;width:32px;height:38px;position:relative;box-shadow:inset 3px 0 #ffffff40,inset -3px 0 #00000008}.yarn-unravel__roll--empty{box-shadow:none;background:0 0;border:0}.yarn-unravel__roll--empty:before{content:"";background:linear-gradient(90deg,#b49670,#e4cda9,#bd9f78);border-radius:5px 5px 2px 2px;width:7px;height:26px;position:absolute;bottom:5px}.yarn-unravel__roll--empty:after{content:"";background:#d6bf9a;border-radius:50%;width:27px;height:8px;position:absolute;bottom:0;box-shadow:0 2px #b49a76}.yarn-unravel__top>small{letter-spacing:.1em;font-size:10px;font-weight:700}.yarn-unravel__progress{color:#5b6659;align-items:center;gap:10px;margin:14px 0 2px;font:11px system-ui,sans-serif;display:flex}.yarn-unravel__progress progress{accent-color:#4f856a;flex:1;min-width:0;height:7px}.yarn-unravel__bottom{padding-top:8px}.yarn-unravel__tools{gap:4px;margin:4px 0 10px}.yarn-unravel__tools[hidden]{display:none}.yarn-unravel__tools button{background:#f9f4e9;border-color:#c3b499;border-bottom-width:3px;flex:1;min-width:0;min-height:56px;margin:0;padding:8px 6px;font-size:12px;line-height:1.4}.yarn-unravel__bottom .yarn-unravel__status{color:#3b5945;place-items:center;min-height:44px;margin:8px 0;font-size:13px;line-height:1.45;display:grid}.yarn-unravel__view-controls,.yarn-unravel__actions{flex-wrap:wrap;justify-content:center;gap:5px;margin:6px 0;display:flex}.yarn-unravel__view-controls button,.yarn-unravel__actions button{min-width:44px;margin:0;padding:8px 11px;font-size:12px}.yarn-unravel__view-controls button{background:0 0;border-color:#c7bda9}.yarn-unravel__view-controls [aria-label]{font-size:21px}.yarn-unravel [data-action=next],.yarn-unravel[data-mode=lost] [data-action=retry],.yarn-unravel[data-mode=paused] [data-action=pause]{color:#fff;background:#3f7359;border-color:#305741;order:-1;padding-inline:22px;font-weight:700}.yarn-unravel[data-mode=won] .yarn-unravel__status{color:#295a3a;background:#dcead8;border-radius:12px;font-size:17px}.yarn-unravel[data-mode=lost] .yarn-unravel__status{color:#793f2d;background:#f2dacf;border-radius:12px}.yarn-unravel__choose{color:#656252;font-size:11px}@container (width<=700px){.yarn-unravel canvas{grid-area:2/1/auto/-1;height:42dvh;min-height:320px}.yarn-unravel__top{padding:12px max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));grid-area:1/1/auto/-1}.yarn-unravel__bottom{grid-area:3/1/auto/-1}.yarn-unravel__top h1{font-size:21px}.yarn-unravel__disc{flex:1;min-width:0;max-width:150px;padding:6px 2px}.yarn-unravel__disc .yarn-unravel__slots{gap:3px}.yarn-unravel__disc .yarn-unravel__roll{width:24px;height:28px}.yarn-unravel__eyebrow{margin-bottom:4px;font-size:9px}.yarn-unravel__discs{margin:8px 0}.yarn-unravel__slots{margin:6px 0}.yarn-unravel__upcoming{margin-bottom:5px}.yarn-unravel__progress{margin-top:8px}.yarn-unravel__roll--empty:before{height:20px}.yarn-unravel__roll--empty:after{width:23px}}