/* ================= 索拉拉OS: everything WoolOS has ================= */
/* every lantern takes the color picked in the shop */
.lan,.mascot img,.start img,.bootup img,.fl{filter:hue-rotate(var(--lh,0deg))}
/* three skies + snow */
body.sky-morning .sky{background:linear-gradient(180deg,#fff6e0 0%,#ffe6c7 40%,#ffd0b0 75%,#ffbfa3 100%)}
body.sky-night .sky{background:linear-gradient(180deg,#140c2e 0%,#2a1640 45%,#4a1c3d 80%,#6b2335 100%)}
body.sky-night .sky::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 32%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 12%,#fff,transparent),radial-gradient(1px 1px at 63% 26%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 9%,#fff,transparent),radial-gradient(1px 1px at 88% 34%,#fff,transparent),radial-gradient(1px 1px at 6% 44%,#fff,transparent),radial-gradient(1.5px 1.5px at 52% 40%,#fff,transparent);opacity:.9}
body.sky-night .cl{opacity:.12}
body.sky-night .brand p{color:#ffe9d0}
.snow{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.snow i{position:absolute;top:-10px;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.85;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(105vh) translateX(30px)}}
#fx{position:fixed;inset:0;z-index:30;pointer-events:none}
/* boot */
.bootup .tip{max-width:340px;margin:10px 0 0;text-align:center;font:400 16px var(--cn)}
.bootup .tip b{display:block;font:700 12px var(--display);color:var(--red2);letter-spacing:.1em}
.bootup .tip span{display:block;font:600 13px var(--body);color:var(--mute)}
.bootup .skip{margin-top:6px;font:700 13px var(--display);color:var(--mute);text-decoration:underline}
/* 16 icons */
.icons{grid-template-columns:repeat(3,92px);gap:8px 4px}
.icons .ic{width:54px;height:54px;font-size:26px;border-radius:16px}
.icons b{font-size:14px}
.win.tall{height:min(760px,calc(100vh - var(--bar) - 40px))}
.win.tall .wb{flex:1}
.temp b{font:500 14px var(--mono)}
/* start menu */
.menu{position:fixed;left:12px;bottom:calc(var(--bar) + 10px);z-index:25;width:270px;padding:10px;background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);display:flex;flex-direction:column;gap:2px;animation:open .2s cubic-bezier(.3,1.5,.5,1)}
.menu .mh{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding-bottom:8px;border-bottom:2px dashed rgba(58,20,32,.2)}
.menu .mh img{width:30px}.menu .mh b{font:400 20px var(--cn)}.menu .mh small{display:block;font:600 11px var(--body);color:var(--mute)}
.menu button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font:400 17px var(--cn);text-align:left}
.menu button:hover{background:var(--paper2)}
.menu .off{margin-top:6px;border-top:2px dashed rgba(58,20,32,.2);color:var(--red2);font:700 14px var(--display)}
/* portals */
.term{min-height:220px;padding:14px;border-radius:12px;background:#1d0c12;color:#ffd9c2;font:500 14px/1.7 var(--mono)}
.term p{margin:0}.term b{color:var(--gold)}.term button{color:#7fd8b4;text-decoration:underline;font:500 14px var(--mono)}.term span{color:#c79a92}
.cur{animation:blink 1s steps(2) infinite;font-style:normal}
@keyframes blink{50%{opacity:0}}
/* shop */
.shopnav{display:flex;gap:14px;flex-wrap:wrap;padding:0 0 10px;margin-bottom:12px;border-bottom:2px dashed rgba(58,20,32,.2);font:700 13px var(--display);color:var(--mute)}
.shopnav .cart{margin-left:auto;color:var(--ink)}
.shopnav .cart b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--red);color:#fff}
.prod{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px}
.pimg{display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle,#ffe3b0,var(--paper2) 70%);border:2.5px solid var(--ink)}
.pimg img{width:110px}
.kick{margin:0;font:700 11px var(--display);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.prod h3{margin:4px 0;font:400 26px var(--cn)}.prod h3 small{font:600 15px var(--display);color:var(--mute)}
.stars{margin:0 0 8px;color:#e8a320}.stars span{font:700 12px var(--body);color:var(--mute)}
.lab{margin:10px 0 6px;font:700 12px var(--display);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}.lab b{color:var(--ink)}
.swatches{display:flex;gap:8px}
.swatches button{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--ink);background:#e2343c;filter:hue-rotate(var(--h))}
.swatches button:hover{transform:scale(1.12)}
.sizes{display:flex;gap:6px}
.sizes button{min-width:40px;height:34px;border-radius:10px;border:2.5px solid var(--ink);font:700 14px var(--display)}
.sizes button.on{background:var(--gold)}
.rev{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--paper2)}
.rev b{font:700 14px var(--display)}.rev p{margin:2px 0 0;font:600 13px var(--body);color:var(--mute)}
.wb h4{margin:16px 0 4px;font:400 20px var(--cn)}
/* skycast */
.sc .big{display:flex;align-items:baseline;gap:12px;margin:2px 0 10px}
.sc .big span{font:700 64px/1 var(--display);color:var(--red)}.sc .big small{font:600 14px var(--body);color:var(--mute)}
.fcs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0}
.fc{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2);text-align:center;opacity:.6}
.fc.done{opacity:1;background:#fff1c9}
.fc .d{font:700 11px var(--display);color:var(--mute)}.fc .i{font-size:22px}.fc b{font:400 15px var(--cn)}
.fc small{font:600 10px var(--body);color:var(--mute);line-height:1.2}.fc em{font:700 12px var(--display);color:var(--red);font-style:normal}
/* diary */
.hand{margin:0 0 8px;font:400 30px var(--cn);color:var(--red2)}.hand small{font:italic 600 16px var(--display);color:var(--mute)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:7px 12px;border-radius:999px;border:2.5px solid var(--ink);font:400 15px var(--cn)}
.seg button.on{background:var(--gold)}
.dstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.dstats div{padding:8px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2);text-align:center}
.dstats span{display:block;font:700 11px var(--display);color:var(--mute)}.dstats b{font:700 20px var(--display);color:var(--red)}
/* boop.exe */
.boopbox{position:relative;display:grid;place-items:center;padding:10px 0}
.mascot.mini{width:190px}
.boopbox .bubble{left:62%;top:0}
/* dumpling.catch */
.game{position:relative;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;touch-action:none}
.game canvas{display:block;width:100%;height:auto;cursor:none}
.gover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;background:rgba(255,248,240,.88)}
.gover b{font:400 32px var(--cn);color:var(--red)}
/* chat */
.online{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.online img{width:30px}.online b{font:400 18px var(--cn)}.online span{font:700 12px var(--display);color:#2e9d6b}
.clog{height:240px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px;border:2px solid var(--ink);border-radius:12px;background:#fff}
.cm{max-width:85%;padding:8px 12px;border-radius:14px;border:2px solid var(--ink)}
.cm p{margin:0}
.cm.him{background:var(--paper2);border-radius:14px 14px 14px 4px}
.cm.you{align-self:flex-end;background:var(--red);color:#fff;border-radius:14px 14px 4px 14px;font:700 15px var(--body)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.chips button{padding:5px 11px;border-radius:999px;border:2px solid var(--ink);background:var(--paper);font:400 14px var(--cn)}
.chips button:hover{background:var(--gold)}
.cform{display:flex;gap:8px}.cform input{flex:1;height:44px}
/* trash */
.list .it{transition:transform .5s ease,opacity .5s ease}
.list .it.gone{transform:translateX(120%) rotate(12deg);opacity:0}
/* ---------- the site window ---------- */
.site{display:flex;flex-direction:column;gap:30px}
.site section{display:flex;flex-direction:column;gap:6px}
.site h3{margin:0;font:400 30px var(--cn);color:var(--red2)}.site h3 small{font:600 15px var(--display);color:var(--mute)}
.s-hero{align-items:center;text-align:center;padding:20px 10px;border-radius:18px;background:radial-gradient(circle at 50% 30%,#ffe3b0,var(--paper2) 65%);border:2.5px solid var(--ink);cursor:pointer}
.s-hero img{width:120px;animation:bob 3.4s ease-in-out infinite}
.s-hero h2{margin:0;font:700 56px/1 var(--display);color:var(--red);-webkit-text-stroke:2px var(--ink)}
.s-hero h2 span{font:inherit;color:var(--gold)}
.hint{margin:0;font:italic 600 13px var(--display);color:var(--mute)}
.caline{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.caline code{padding:5px 8px;border-radius:8px;background:#fff;border:1.5px dashed var(--ink2);font:500 12px var(--mono);word-break:break-all}
.btn.sm{padding:6px 11px 5px;font-size:13px;box-shadow:0 3px 0 var(--ink)}
.film{position:relative;aspect-ratio:16/9;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;background:#140c2e}
.scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .8s}
.scene p{margin:0;text-align:center;font:400 34px var(--cn);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.scene small{display:block;font:italic 600 16px var(--display);color:#ffd9c2}
.film[data-scene="1"] .s1,.film[data-scene="2"] .s2,.film[data-scene="3"] .s3,.film[data-scene="4"] .s4{opacity:1}
.s1{background:radial-gradient(circle at 50% 20%,#2a1640,#0b0618)}
.s1::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#fff,transparent),radial-gradient(1px 1px at 85% 55%,#fff,transparent)}
.s2{background:#1d0c12}
.thread{position:absolute;left:10%;right:10%;top:45%;height:4px;background:#e2343c;border-radius:2px;transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px #ff5a5f}
.film[data-scene="2"] .thread{animation:draw 2.5s ease forwards}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.s3{background:radial-gradient(circle,#5a1a22,#140c2e)}
.s3 img{width:110px;animation:bob 2s ease-in-out infinite;filter:hue-rotate(var(--lh,0deg)) drop-shadow(0 0 30px #ffb27a)}
.s3 p{position:absolute;bottom:12%}
.s4{background:radial-gradient(circle,#ffd9c2,#e8707f)}
.s4 .ttl{font-size:56px;color:var(--red);-webkit-text-stroke:2px var(--ink)}
.fbar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:6px 10px;background:rgba(0,0,0,.45);color:#fff;font:500 12px var(--mono)}
.fbar button{color:#fff;font-size:14px}
.fbar i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.fbar u{display:block;height:100%;width:0;background:var(--gold)}
.entry{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:12px;border:2px solid var(--ink);border-radius:14px;background:var(--paper2)}
.cam{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:10px;background:#1d0c12;overflow:hidden}
.cam img{width:calc(70px * var(--s));filter:hue-rotate(var(--lh,0deg)) drop-shadow(0 0 16px #ffb27a)}
.cam span{position:absolute;font:500 10px var(--mono);color:#fff}
.cam .rec{top:6px;left:8px;color:#ff5a5f;animation:blink 1.2s steps(2) infinite}
.cam span:nth-child(2){bottom:6px;left:8px}
.entry h4{margin:2px 0 4px;font:400 22px var(--cn)}.entry h4 small{font:600 13px var(--display);color:var(--mute)}
.looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.look{display:flex;flex-direction:column;gap:6px;padding:10px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);text-align:left}
.look.on{box-shadow:0 0 0 3px var(--gold)}
.look .sw{height:60px;border-radius:10px;border:2px solid var(--ink)}
.l-morning .sw{background:linear-gradient(#fff6e0,#ffbfa3)}.l-night .sw{background:linear-gradient(#140c2e,#6b2335)}.l-sunset .sw{background:linear-gradient(#ffe3d3,#ec8190)}
.look b{font:400 18px var(--cn)}.look b small{font:600 12px var(--display);color:var(--mute)}.look .cn{font-size:14px}
.route{border:2.5px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,#fff6e0,#ffd9c2);padding:6px}
.route svg{width:100%;height:auto;display:block}
.kn circle{fill:var(--paper);stroke:var(--ink);stroke-width:3}.kn text{font:400 14px var(--cn);fill:var(--ink)}
.kn.on circle{fill:var(--red)}.kn.on text{fill:#fff}
.knots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.knots button{display:flex;flex-direction:column;gap:2px;padding:8px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);text-align:left}
.knots button.on{background:#fff1c9}
.knots b{font:400 16px var(--cn)}.knots small{font:700 11px var(--display);color:var(--mute)}.knots span{font:600 11px/1.35 var(--body);color:var(--mute)}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.step{padding:12px;border:2px solid var(--ink);border-radius:14px;background:var(--paper2)}
.step span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font:700 14px var(--display)}
.step b{display:block;margin:6px 0 2px;font:400 18px var(--cn)}.step b small{font:600 12px var(--display);color:var(--mute)}.step .cn{font-size:14px}
.string{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-top:16px}
.string svg{position:absolute;left:0;right:0;top:0;width:100%;height:40px}
.hang{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:6px;transform-origin:50% 0;animation:sway 3s ease-in-out infinite}
.hang:nth-child(3){animation-delay:-.7s}.hang:nth-child(4){animation-delay:-1.4s}.hang:nth-child(5){animation-delay:-2.1s}
.hang img{width:64px;transition:transform .2s}.hang b{font:400 18px var(--cn)}.hang small{font:700 11px var(--display);color:var(--mute)}
.hang:hover img{transform:translateY(6px)}
@keyframes sway{50%{transform:rotate(4deg)}}
.missing{max-width:420px;margin:0 auto;padding:18px;text-align:center;background:#fff6dc;border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);transform:rotate(-1deg)}
.missing .mt{margin:0;font:400 38px var(--cn);color:var(--red)}
.missing .mt small{display:block;font:700 16px var(--display);letter-spacing:.3em;color:var(--ink)}
.missing img{width:110px;margin:8px auto;display:block}
.missing dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;text-align:left;margin:8px 0}
.missing dt{font:700 12px var(--display);color:var(--mute)}.missing dd{margin:0;font:400 15px var(--cn)}
.site details{border:2px solid var(--ink);border-radius:12px;background:var(--paper2);padding:8px 12px}
.site summary{cursor:pointer;font:400 17px var(--cn)}.site summary small{font:600 12px var(--display);color:var(--mute)}
.site details p{margin:6px 0 0}
.s-end{align-items:center;text-align:center}.s-end .cn{font-size:26px}
.disc{font:600 11.5px var(--body);color:var(--mute)}
@media (max-width:760px){
  .icons{grid-template-columns:repeat(4,1fr)}
  .prod,.entry{grid-template-columns:1fr}
  .looks,.knots,.steps{grid-template-columns:1fr 1fr}
  .fcs{grid-template-columns:repeat(3,1fr)}
  .temp{display:none}
}
/* keep the lantern visible beside open windows */
@media (min-width:1100px){.hero{left:64%}}
/* ---------- English first, Chinese as small accents ---------- */
.icons b{font:600 12.5px/1.15 var(--display);text-align:center}.icons b small{font:400 11px var(--cn);color:var(--mute)}
.tb .t{font:600 16px var(--display)}.tb .t small{font:400 13px var(--cn);opacity:.9;margin-left:7px}
.tx{margin:0 0 10px;font:700 15px/1.5 var(--body);color:var(--ink)}
.zh{display:block;margin-top:1px;font:400 14px/1.3 var(--cn);color:var(--mute)}
.bubble{font:600 17px/1.25 var(--display)}.bubble small{font:400 14px var(--cn)}
.note b{font:600 19px var(--display)}.note b small{font:400 14px var(--cn);color:var(--mute)}
.brand p{font:600 19px var(--display)}.brand p .zh{display:inline;margin-left:8px;font-size:17px}
.start{font:600 16px var(--display)}.tasks button{font:600 13px var(--display)}
.menu .mh b{font:700 19px var(--display)}.menu button{font:600 15px var(--display)}
.hand{font:600 28px var(--display)}.hand small{font:400 16px var(--cn);color:var(--mute)}
.seg button,.chips button{font:600 14px var(--display)}
.prod h3{font:700 24px var(--display)}.prod h3 small{font:400 15px var(--cn)}
.wb h4{font:700 19px var(--display)}
.fc b{font:600 13px var(--display);line-height:1.15}.fc small{font:400 12px var(--cn)}
.online b{font:700 16px var(--display)}
.site h3{font:700 28px var(--display)}.site h3 small{font:400 15px var(--cn)}
.entry h4{font:700 20px var(--display)}
.look b{font:700 17px var(--display)}.knots b{font:700 14px var(--display)}.knots small{font:400 12px var(--cn)}
.step b{font:700 16px var(--display)}.hang b{font:700 15px var(--display)}
.missing .mt{font:700 38px var(--display);letter-spacing:.06em}.missing .mt small{font:400 16px var(--cn);letter-spacing:0}.missing dd{font:600 15px var(--display)}
.site summary{font:700 16px var(--display)}
.scene p{font:700 34px var(--display)}.scene small{font:400 16px var(--cn)}
.soon{font:600 18px var(--display)}
.bless{margin:4px 0 0;font:700 20px var(--display);text-align:center}.bless .zh{font-size:22px;color:var(--red2)}
.note-s{margin:6px 0 0;font:italic 600 12.5px var(--display);color:var(--mute)}
.slip .lv{font:600 15px var(--display)}
.list .nm b{font:700 16px var(--display)}.list .nm b i{font:400 16px var(--cn);font-style:normal;color:var(--red2);margin-left:4px}
.bootup b{font:600 24px var(--display)}.bootup small{font:600 13px var(--body)}
.bootup .tip{font:600 14px var(--display)}
.clock small{font:600 12px var(--display);color:var(--mute)}