:root{font-family:Microsoft YaHei,PingFang SC,sans-serif;color:#66574f;font-weight:600;font-synthesis:none;background:#e9e5db}*{box-sizing:border-box}body{margin:0;min-width:300px;background:radial-gradient(ellipse at 30% 20%,#f6eee0,#d6ded4)}button{font:inherit;color:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:3px solid #72a89f;outline-offset:3px}button svg{width:22px;height:22px;flex-shrink:0}#app{width:min(100%,500px);margin:auto;position:relative;overflow:hidden;background:#f5f0e6;min-height:100svh}header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 12px;gap:12px}.icon-button{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;color:#8c8f7d;background:#fffcf3;box-shadow:0 3px #c9c9b94d;border:1px solid #fff}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:13px;min-height:52px;padding:14px 20px;border-radius:18px;font-weight:800}.primary{background:#d89481;color:#fffaf0;box-shadow:0 4px #b47767,inset 0 2px #f6c3ae}.secondary{background:#fffaf0;color:#858777;box-shadow:0 3px #c8ccbb66;border:1px solid #d8ddcf}.primary:active,.secondary:active{transform:translateY(2px)}.brand{font-size:18px;font-weight:900;letter-spacing:2px;color:#9d8270}.home{min-height:650px;height:100svh;display:flex;flex-direction:column;padding-bottom:max(26px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 45%,#fff9ec,#f2ecdf 68%,#e7e9dc)}.heading{text-align:center;margin:19px 0 0}.eyebrow{font-size:12px;letter-spacing:6px;color:#a99b86}.heading h1{font-size:36px;letter-spacing:3px;margin:10px 0;color:#786455;text-shadow:0 2px 0 #fffef1}.hero{position:relative;width:min(100%,340px);min-height:240px;max-height:355px;flex:1;margin:3px auto 10px;container-type:size}.hero-art{position:absolute;inset:0;margin:auto;width:min(100cqw,100cqh);height:min(100cqw,100cqh);display:grid;place-items:center}.halo{position:absolute;width:min(85%,calc(100% - 32px));aspect-ratio:1;border-radius:50%;background:#e9dfcc;box-shadow:0 0 0 13px #fffbef88,0 0 0 14px #dcd3bd66}.hero-art>svg:not(.loose-thread){position:relative;width:88%;height:100%;z-index:1}.loose-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.hero-yarn{position:absolute;z-index:3}.hero-yarn.first{left:22px;bottom:20px;transform:scale(1.75)}.hero-yarn.second{right:24px;bottom:33px;transform:scale(1.45)}.hero-yarn.third{right:13px;top:35px;transform:scale(.9)}.ball{width:32px;height:32px;display:inline-block;border-radius:48%;background:repeating-linear-gradient(38deg,transparent 0 4px,#fff3 4px 5px,transparent 5px 7px,#0001 7px 8px),var(--yarn);position:relative;box-shadow:inset -4px -4px 7px #0002,inset 3px 3px 2px #fff3,0 2px 2px #66574422}.ball i{position:absolute;inset:3px 8px;border-left:2px solid var(--light);border-right:2px solid #fff6;border-radius:50%;transform:rotate(-24deg)}.ball b{position:absolute;bottom:-2px;right:-7px;width:15px;height:10px;border-bottom:3px solid var(--yarn);border-right:3px solid var(--yarn);border-radius:0 0 9px}.mini-collection{display:flex;gap:14px;justify-content:center;margin:0 0 22px}.mini-collection>span{width:59px;height:59px;background:#fff9eb;border:1px dashed #c7bbaa;border-radius:17px;position:relative;opacity:.72}.mini-collection svg{width:100%;height:100%}.mini-collection .done{opacity:1;border-style:solid;border-color:#98b3a5}.mini-collection b{position:absolute;right:-4px;bottom:-4px;border-radius:50%;background:#85a694;color:#fff;font-size:12px;width:20px;height:20px;display:grid;place-items:center}.home-actions{display:grid;gap:13px;margin:0 24px}.home-actions .primary{font-size:20px;min-height:59px}.home-actions .secondary{font-size:15px;min-height:47px;padding:10px}.home-actions .secondary span{font-size:12px;color:#a3a18d}.home .studio-signature{position:relative;display:flex;justify-content:center;align-items:center;gap:3px;flex-shrink:0;min-height:68px;margin:18px 24px 0;padding:6px 0 0}.studio-signature:before{content:"";position:absolute;top:0;left:24%;right:24%;height:1px;background:linear-gradient(90deg,transparent,#b9a9d642,transparent)}.studio-signature img{display:block;width:68px;height:68px;object-fit:contain;flex-shrink:0}.studio-name{font-size:13px;letter-spacing:2px;font-weight:600;color:#8b7f9e;white-space:nowrap}.studio-info{display:flex;align-items:center;gap:3px;background:none;padding:0;border-radius:12px}.archive h1 small{font-size:12px;color:#a39985;font-weight:500;white-space:nowrap}.archive-pages{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 20px 30px}.archive-pages .secondary{font-size:13px;min-height:40px;padding:10px 14px}.about-content{padding:12px 28px 35px;line-height:1.85;font-size:13px;font-weight:400}.about-content>img{display:block;margin:auto}.about-content h2{text-align:center;font-size:19px;color:#8b7f9e}.about-content>p:first-of-type,.about-content>p:nth-of-type(2){text-align:center;color:#9a8c79}.about-content h3{font-size:15px;margin-top:30px}.about-content a{color:#8972ac}.save-actions{display:flex;gap:12px;margin-top:24px}.save-actions button{flex:1;font-size:13px;padding:12px}.save-message{color:#9176ac;min-height:24px}.game{height:100svh;min-height:560px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 57%,#fff9ec,#eeeade 65%,#e5e9df);padding-bottom:max(12px,env(safe-area-inset-bottom))}.level-title{text-align:center;display:grid;gap:5px}.level-title span{font-size:11px;letter-spacing:3px;color:#a39985}.level-title strong{font-size:18px;letter-spacing:2px}#hud{z-index:2;padding:2px 24px 0;flex-shrink:0}.loom-row{display:flex;gap:15px;align-items:center;justify-content:center}.loom{position:relative;width:111px;height:101px;padding:10px 12px;background:repeating-linear-gradient(90deg,#c6b497 0 2px,transparent 2px 12px),#faf4e3;border-left:5px solid #bda17c;border-right:5px solid #bda17c;border-radius:8px;box-shadow:0 3px #b3a58a55}.rod{position:absolute;height:9px;border-radius:6px;background:#d9bd94;left:-11px;right:-11px;top:0;box-shadow:inset 0 2px #f9dfb5,0 2px #aa8c6533}.rod.bottom{top:auto;bottom:0}.threads{display:grid;gap:4px;height:100%}.weft{position:relative;border-radius:5px;border:1px dashed var(--yarn);background:var(--light);display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:.75}.weft.filled{opacity:1;background:repeating-linear-gradient(0deg,#fff2 0 2px,transparent 2px 4px),repeating-linear-gradient(90deg,var(--yarn) 0 4px,var(--light) 4px 6px)}.weft .ball{width:25px;height:25px}.empty-knot{width:22px;height:22px;border-radius:50%;border:2px dashed var(--yarn);background:#fffa}.loom.complete{display:grid;place-items:center;color:#b7bba5;opacity:.45;font-size:27px;background:#e6e8da;border-color:#c6cbb6}.patch-stack{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:33px;color:#a7a38a}.patch-stack span{font-size:25px}.patch-stack b{font-size:11px;font-weight:500}.basket{display:flex;justify-content:center;gap:16px;padding:10px 15px;margin:15px auto 0;width:max-content;border-radius:13px 13px 23px 23px;border-bottom:4px solid #ccb99d;background:repeating-linear-gradient(0deg,#e2d3b9 0 3px,#ecdfc7 3px 6px);box-shadow:0 3px #99896f15}.basket-slot{width:33px;height:33px;border-radius:50%;background:#fff9ed77;display:grid;place-items:center;box-shadow:inset 0 2px 2px #b09e7f15}.basket-slot:empty:after{content:"";width:7px;height:7px;border-radius:50%;background:#c9bba1}.basket .ball{width:29px;height:29px}#stage{position:relative;flex:1;min-height:200px;isolation:isolate;touch-action:none}#stage:before{content:"";position:absolute;z-index:-1;left:20%;right:20%;bottom:17%;height:8%;border-radius:50%;background:#a9997c1c;filter:blur(15px)}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}footer{display:flex;justify-content:space-between;align-items:center;padding:4px 22px;min-height:48px;flex-shrink:0}.quiet{font-size:11px;letter-spacing:2px;color:#b2a78e}.retry{min-height:38px;padding:8px 19px;border-radius:13px;border:1px solid #dfd7c4;background:#fff9eb;color:#a4967e;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.game[data-status=won] #hud{display:none}.prize{position:absolute;z-index:4;bottom:72px;left:24px;right:24px;padding:14px 16px 20px;border-radius:25px;text-align:center;background:#fffaf0f2;box-shadow:0 5px #c8c3ab55;border:2px solid #fffef8}.prize>span{font-size:26px;color:#d4af68}.prize h2{font-size:23px;margin:5px 0 18px;color:#85715c}.actions{display:flex;gap:12px}.actions button{flex:1;font-size:14px;min-height:45px;padding:12px}.scrim{position:absolute;inset:0;display:grid;place-items:center;background:#655e4d44;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}.dialog{width:82%;max-width:350px;background:#fff8e8;border:3px solid #fffdf4;border-radius:27px;padding:24px;text-align:center;box-shadow:0 8px #a89e8744}.dialog h2{font-size:23px;margin:16px 0 25px}.dialog button{width:100%;margin-top:12px}.text-button{background:none;padding:13px;font-size:14px;color:#9d927b}.archive{min-height:100svh;background:#f3ecdf}.archive h1{font-size:22px}.archive-grid{display:grid;gap:17px;padding:20px 23px 30px}.archive-card{display:flex;align-items:center;gap:18px;text-align:left;border-radius:23px;padding:12px;background:#fffaef;border:2px solid #fffdf7;box-shadow:0 4px #ccbea344}.archive-card>svg{width:105px;height:105px}.archive-card>div{display:grid;gap:8px}.archive-card span{font-size:12px;color:#aea18b}.archive-card strong{font-size:19px;color:#86735e}.archive-card small{display:flex;align-items:center;font-size:12px;color:#a39b83;gap:8px}.archive-card small svg{width:15px;height:15px}.empty{text-align:center;color:#aa9d87;margin:90px 0}.flying{position:fixed;z-index:30;pointer-events:none;width:32px;height:32px}.graphics-error{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:25px;padding:25px}@media(min-width:700px){body{padding:18px 0}#app{max-width:470px;min-height:0;border:6px solid #fffaf0;border-radius:31px;box-shadow:0 20px 65px #786e4e2b}.home,.game{height:calc(100svh - 48px);max-height:960px;min-height:620px}.archive{min-height:calc(100svh - 48px)}}@media(max-height:730px){header{padding-top:12px;padding-bottom:9px}.home{min-height:580px}.heading{margin-top:5px}.heading h1{font-size:30px}.hero{min-height:190px}.mini-collection{margin-bottom:16px}.mini-collection>span{width:49px;height:49px}.loom{height:84px;width:102px}.basket{margin-top:10px;padding-top:7px;padding-bottom:7px}}@media(max-width:350px){#hud{padding-left:15px;padding-right:15px}.loom-row{gap:13px}.loom{width:95px}.heading h1{font-size:29px}.quiet{font-size:10px}.game{min-height:550px}}@media(max-height:730px){.home{padding-bottom:max(12px,env(safe-area-inset-bottom))}.home .hero{min-height:135px;margin-bottom:6px}.home .mini-collection{margin-bottom:12px}.home .mini-collection>span{width:43px;height:43px}.home-actions{gap:10px}.home-actions .primary{min-height:51px;padding:11px 18px;font-size:18px}.home-actions .secondary{min-height:40px;padding:8px}.home .studio-signature{min-height:52px;margin-top:12px;padding-top:4px}.studio-signature img{width:52px;height:52px}.studio-name{font-size:12px;letter-spacing:1.5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}