@font-face{font-family:In;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Mo;src:url(fonts/mono.woff2) format("woff2");font-display:swap}
:root{--g:clamp(20px,5.5vw,40px);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
--bar:48px;--top:0px;--r:8px;--r2:12px;--ac:#6c7cff;--ac2:#3ec5c9;--ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.3,1.35,.5,1);
--glass:rgba(32,33,44,.78);--glass2:rgba(44,45,58,.86);--fg:#f3f4f8;--mu:rgba(243,244,248,.62);--line:rgba(255,255,255,.09);--hov:rgba(255,255,255,.07);--act:rgba(255,255,255,.12);
--win:#1f2029;--win2:#262733;--card:rgba(255,255,255,.05);--sh:0 24px 64px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.07);--blur:saturate(160%) blur(28px)}
[data-theme=light]{--glass:rgba(246,246,250,.82);--glass2:rgba(250,250,253,.92);--fg:#16171d;--mu:rgba(22,23,29,.6);--line:rgba(0,0,0,.08);--hov:rgba(0,0,0,.05);--act:rgba(0,0,0,.08);
--win:#f7f7fa;--win2:#eeeff4;--card:rgba(255,255,255,.7);--sh:0 24px 64px rgba(10,12,30,.28),0 0 0 1px rgba(0,0,0,.08)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%;overflow:hidden}
body{height:100%;overflow:hidden;font:400 14px/1.45 In,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--fg);background:#0b0d1c;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;user-select:text;-webkit-user-select:text}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.wall{position:fixed;inset:0;background:#0b0d1c center/cover no-repeat;transition:filter .6s var(--ease)}
.wall[data-w=dusk]{background-image:radial-gradient(120% 80% at 70% 110%,#ff9a6b 0,#c2477a 32%,#3b1f5e 62%,#120c24 100%)!important}
.wall[data-w=mist]{background-image:radial-gradient(90% 70% at 30% 20%,#cfe7ff 0,#8fb3e8 35%,#5469a8 70%,#28305c 100%)!important}
/* desktop icons */
.desk{position:fixed;inset:0 0 var(--bar) 0;z-index:1}
.icons{position:absolute;inset:0;padding:var(--s1);display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,86px);grid-auto-columns:76px;gap:var(--s2) 0;align-content:start}
.dic{width:76px;height:86px;display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s2) var(--s1) 0;border-radius:4px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.dic:hover{background:rgba(255,255,255,.1)}.dic:focus-visible,.dic.sel{background:rgba(255,255,255,.18);outline:0}
.dic .ic{width:44px;height:44px}
.dic span{font-size:12px;line-height:16px;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.icons.sz-l{grid-template-rows:repeat(auto-fill,104px);grid-auto-columns:96px}.icons.sz-l .dic{width:96px;height:104px}.icons.sz-l .ic{width:60px;height:60px}
.icons.sz-s{grid-template-rows:repeat(auto-fill,70px);grid-auto-columns:68px}.icons.sz-s .dic{width:68px;height:70px}.icons.sz-s .ic{width:32px;height:32px}
.icons.flash .dic{animation:flash .5s var(--ease)}@keyframes flash{0%{opacity:0}100%{opacity:1}}
.ic{width:24px;height:24px;flex:none;border-radius:22%}
.ic.av{border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
/* taskbar */
.bar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);z-index:1000;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.bar-mid{display:flex;align-items:center;gap:var(--s1);height:100%}
.tb{position:relative;width:44px;height:44px;border-radius:6px;display:grid;place-items:center;transition:background .15s}
.tb:hover{background:var(--hov)}.tb:active .ic{transform:scale(.86)}
.tb .ic{width:26px;height:26px;transition:transform .2s var(--spring)}
.tb.on{background:var(--hov)}
.tb::after{content:"";position:absolute;bottom:2px;left:50%;width:0;height:3px;border-radius:2px;background:var(--mu);transform:translateX(-50%);transition:width .25s var(--spring),background .2s}
.tb.open::after{width:6px}.tb.foc::after{width:16px;background:var(--ac)}
.tray{position:absolute;right:var(--s2);top:0;bottom:0;display:flex;align-items:center;gap:var(--s1)}
.trb{height:40px;padding:0 var(--s2);border-radius:6px;display:flex;align-items:center;gap:var(--s2);font-size:12px;line-height:16px;text-align:right}
.trb:hover,.trb.on{background:var(--hov)}
.trb svg{width:16px;height:16px}
.clockb{flex-direction:column;justify-content:center;align-items:flex-end;gap:0;min-width:72px}
.status{display:none}
/* panels */
.pn{position:fixed;z-index:1100;background:var(--glass2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--r);box-shadow:var(--sh);color:var(--fg);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .2s var(--ease),transform .3s var(--ease);overflow:hidden}
.pn.show{opacity:1;transform:none;pointer-events:auto}
.pn-start{left:50%;bottom:calc(var(--bar) + 12px);width:640px;max-height:calc(100% - var(--bar) - 24px);margin-left:-320px;display:flex;flex-direction:column}
.pn-search{left:50%;bottom:calc(var(--bar) + 12px);width:640px;height:min(600px,calc(100% - var(--bar) - 24px));margin-left:-320px;display:flex;flex-direction:column}
.pn-qs{right:12px;bottom:calc(var(--bar) + 12px);width:360px}
.pn-cal{right:12px;bottom:calc(var(--bar) + 12px);width:360px}
.pn-wid{left:12px;top:12px;bottom:calc(var(--bar) + 12px);width:520px;transform:translateX(-24px);display:flex;flex-direction:column}
.pn-wid.show{transform:none}
.sbox{margin:var(--s8) var(--s8) var(--s4);height:36px;border-radius:18px;background:var(--card);border:1px solid var(--line);border-bottom:2px solid var(--ac);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4)}
.sbox svg{width:16px;height:16px;opacity:.7}.sbox input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14px;height:100%}
.sbox input::placeholder{color:var(--mu)}
.sec{display:flex;justify-content:space-between;align-items:center;padding:0 var(--s10) 0 var(--s10);height:32px}
.sec b{font-size:14px;font-weight:600}
.pill{height:28px;padding:0 var(--s3);border-radius:4px;background:var(--card);border:1px solid var(--line);font-size:12px;display:flex;align-items:center;gap:var(--s1)}
.pill:hover{background:var(--hov)}
.pins{display:grid;grid-template-columns:repeat(6,1fr);padding:var(--s2) var(--s8) var(--s4);gap:var(--s1) 0;overflow:auto}
.pin{height:84px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);font-size:12px;line-height:16px;padding:0 var(--s1);text-align:center}
.pin:hover{background:var(--hov)}.pin .ic{width:32px;height:32px}
.pin span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recs{display:grid;grid-template-columns:1fr 1fr;padding:var(--s2) var(--s8) var(--s6);gap:var(--s1) var(--s4)}
.rec{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:4px;text-align:left;min-height:52px}
.rec:hover{background:var(--hov)}.rec .ic{width:32px;height:32px}
.rec b{display:block;font-size:13px;font-weight:500;line-height:18px}.rec small{display:block;font-size:12px;line-height:16px;color:var(--mu)}
.sfoot{margin-top:auto;height:64px;flex:none;border-top:1px solid var(--line);background:rgba(0,0,0,.12);display:flex;align-items:center;justify-content:space-between;padding:0 var(--s10)}
[data-theme=light] .sfoot{background:rgba(0,0,0,.03)}
.me{display:flex;align-items:center;gap:var(--s3);height:44px;padding:0 var(--s3) 0 var(--s2);margin-left:calc(-1 * var(--s2));border-radius:4px;font-size:13px}
.me:hover,.pw:hover{background:var(--hov)}.me img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.pw{width:44px;height:44px;border-radius:4px;display:grid;place-items:center}.pw svg{width:18px;height:18px}
.pwm{position:absolute;right:var(--s8);bottom:72px;background:var(--glass2);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s1);display:none;min-width:160px}
.pwm.show{display:block}
.mi{display:flex;align-items:center;gap:var(--s3);width:100%;height:36px;padding:0 var(--s3);border-radius:4px;font-size:13px;text-align:left}
.mi:hover{background:var(--hov)}.mi svg{width:16px;height:16px;opacity:.85}
.allv{overflow:auto;padding:0 var(--s8) var(--s4)}
.allv h6{font-size:12px;font-weight:600;color:var(--mu);padding:var(--s3) var(--s3) var(--s1)}
.alli{display:flex;align-items:center;gap:var(--s3);width:100%;height:44px;padding:0 var(--s3);border-radius:4px;font-size:13px;text-align:left}.alli:hover{background:var(--hov)}.alli .ic{width:28px;height:28px}
/* search */
.sres{flex:1;overflow:auto;padding:0 var(--s8) var(--s6)}
.sres h6{font-size:13px;font-weight:600;padding:var(--s4) 0 var(--s2)}
.toprow{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.toprow .pin{background:var(--card);border:1px solid var(--line)}
.qk{display:flex;align-items:center;gap:var(--s3);height:40px;width:100%;padding:0 var(--s3);border-radius:4px;font-size:13px;text-align:left}.qk:hover{background:var(--hov)}
.qk svg{width:16px;height:16px;opacity:.8}
.empty{padding:var(--s6) 0;color:var(--mu);font-size:13px}
/* quick settings */
.qs{padding:var(--s6) var(--s6) var(--s4);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3) var(--s3)}
.qt{display:flex;flex-direction:column;align-items:center;gap:var(--s2);font-size:12px;line-height:16px}
.qt i{width:100%;height:48px;border-radius:6px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);transition:background .2s,color .2s}
.qt i svg{width:18px;height:18px}
.qt.on i{background:var(--ac);border-color:transparent;color:#fff}
.sl{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s6);height:44px}
.sl svg{width:18px;height:18px;opacity:.85;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:44px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ac) var(--p,50%),var(--mu) var(--p,50%))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--mu)}input[type=range]::-moz-range-progress{height:4px;background:var(--ac);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#fff;border:5px solid var(--ac);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:5px solid var(--ac)}
.qfoot{height:48px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 var(--s6);font-size:12px;background:rgba(0,0,0,.1)}
.qfoot span{display:flex;align-items:center;gap:var(--s2)}.qfoot svg{width:16px;height:16px}
/* calendar */
.calh{padding:var(--s4) var(--s6);border-bottom:1px solid var(--line);font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;height:56px}
.calm{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4) 0 var(--s6);font-weight:600}
.calm div{display:flex}.calm button{width:44px;height:44px;border-radius:4px;display:grid;place-items:center}.calm button:hover{background:var(--hov)}.calm svg{width:14px;height:14px}
.calg{display:grid;grid-template-columns:repeat(7,1fr);padding:var(--s2) var(--s4) var(--s4);text-align:center;font-size:12px}
.calg span{height:44px;display:grid;place-items:center;border-radius:50%}
.calg .dw{height:32px;color:var(--mu);font-weight:600}.calg .ot{color:var(--mu);opacity:.6}
.calg .td{background:var(--ac);color:#fff;font-weight:600;width:40px;height:40px;margin:2px auto}
/* widgets */
.wtop{padding:var(--s6) var(--s6) var(--s4);display:flex;justify-content:space-between;align-items:flex-end}
.wtop b{font-size:20px;font-weight:600;letter-spacing:-.01em;display:block}.wtop small{color:var(--mu);font-size:13px}
.wgrid{padding:0 var(--s6) var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);overflow:auto}
.wc{border-radius:var(--r2);background:var(--card);border:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);min-height:150px}
.wc.wide{grid-column:span 2}
.wc h5{font-size:12px;font-weight:600;color:var(--mu);display:flex;align-items:center;gap:var(--s2)}
.wc h5 .ic{width:16px;height:16px}
.wc .big{font-size:40px;line-height:44px;font-weight:600;letter-spacing:-.02em}
.wc p{font-size:13px;line-height:19px;color:var(--mu)}
.wc .lnk{margin-top:auto;font-size:13px;font-weight:600;color:var(--ac);display:inline-flex;align-items:center;min-height:44px;gap:var(--s1)}
[data-theme=dark] .wc .lnk{color:#a9b3ff}
.wspot{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;border:0}.wspot h5,.wspot p{color:rgba(255,255,255,.82)}.wspot .lnk{color:#fff!important}
.wsites{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{height:32px;padding:0 var(--s3);border-radius:16px;background:var(--hov);border:1px solid var(--line);font-size:12px;font-weight:500;display:inline-flex;align-items:center}
.chip:hover{background:var(--act)}
/* context menu */
.ctx{position:fixed;z-index:1200;min-width:240px;background:var(--glass2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s1);animation:pop .18s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.ctx hr{border:0;border-top:1px solid var(--line);margin:var(--s1) 0}
.ctx .mi{justify-content:flex-start}.ctx .mi em{margin-left:auto;font-style:normal;color:var(--mu);font-size:12px}
.sub{position:relative}.sub .ctx{position:absolute;left:100%;top:-4px;display:none;animation:none}.sub:hover>.ctx,.sub:focus-within>.ctx{display:block}
/* windows */
.wins{position:fixed;inset:0 0 var(--bar) 0;z-index:10;pointer-events:none}
.win{position:absolute;pointer-events:auto;background:var(--win);border-radius:var(--r);box-shadow:var(--sh);display:flex;flex-direction:column;overflow:hidden;min-width:320px;min-height:220px;transform-origin:50% 60%;transition:opacity .18s var(--ease),transform .26s var(--ease)}
.win.enter{opacity:0;transform:scale(.92)}
.win.min{opacity:0;transform:translateY(40%) scale(.6);pointer-events:none}
.win.max{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0}
.win.anim{transition:opacity .18s var(--ease),transform .26s var(--ease),left .26s var(--ease),top .26s var(--ease),width .26s var(--ease),height .26s var(--ease)}
.win.blur .wt{opacity:.7}
.wt{height:40px;flex:none;display:flex;align-items:center;gap:var(--s3);padding-left:var(--s3);background:var(--win2);touch-action:none}
.wt .ic{width:16px;height:16px;border-radius:4px}
.wt b{flex:1;font-size:12px;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wb{width:46px;height:40px;display:grid;place-items:center}.wb svg{width:10px;height:10px}
.wb:hover{background:var(--hov)}.wb.x:hover{background:#d93a3a;color:#fff}
.wc0{flex:1;overflow:auto;position:relative;user-select:text;-webkit-user-select:text;overscroll-behavior:contain}
.rz{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;touch-action:none}
/* app: files */
.fx{display:flex;flex-direction:column;height:100%}
.fxbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
.fxbar .nb{width:36px;height:36px;border-radius:4px;display:grid;place-items:center}.fxbar .nb:hover{background:var(--hov)}.fxbar .nb svg{width:14px;height:14px}.fxbar .nb[disabled]{opacity:.35;pointer-events:none}
.crumb{flex:1;min-width:0;height:36px;border-radius:4px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;gap:var(--s1);padding:0 var(--s3);font-size:13px;overflow:hidden;white-space:nowrap}
.crumb button{padding:0 var(--s1);height:28px;border-radius:4px}.crumb button:hover{background:var(--hov)}.crumb i{font-style:normal;color:var(--mu)}
.fxb{flex:1;display:flex;min-height:0}
.fxnav{width:188px;flex:none;border-right:1px solid var(--line);padding:var(--s2);overflow:auto}
.fxnav button{display:flex;align-items:center;gap:var(--s2);width:100%;height:36px;padding:0 var(--s2);border-radius:4px;font-size:13px;text-align:left}
.fxnav button:hover{background:var(--hov)}.fxnav button.on{background:var(--act)}.fxnav .ic{width:18px;height:18px}
.fxnav hr{border:0;border-top:1px solid var(--line);margin:var(--s2) 0}
.fxm{flex:1;overflow:auto;padding:var(--s4)}
.fxm h4{font-size:13px;font-weight:600;margin:0 0 var(--s3)}
.fxg{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s2)}
.fi{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s3) var(--s2);border-radius:6px;text-align:center;min-height:112px}
.fi:hover{background:var(--hov)}.fi .ic{width:48px;height:48px}
.fi b{font-size:13px;font-weight:500;line-height:18px}.fi small{font-size:12px;line-height:16px;color:var(--mu)}
.fxs{height:28px;flex:none;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 var(--s3);font-size:12px;color:var(--mu)}
/* app: browser */
.br{display:flex;flex-direction:column;height:100%;background:var(--win)}
.brbar{display:flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s2);border-bottom:1px solid var(--line)}
.brbar .nb{width:36px;height:36px;border-radius:4px;display:grid;place-items:center;flex:none}.brbar .nb:hover{background:var(--hov)}.brbar .nb svg{width:15px;height:15px}
.url{flex:1;min-width:0;height:36px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4)}
.url svg{width:13px;height:13px;opacity:.6;flex:none}.url input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13px}
.brv{flex:1;position:relative;min-height:0}
.brv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.brhome{position:absolute;inset:0;overflow:auto;padding:var(--s10) var(--s8);display:flex;flex-direction:column;align-items:center}
.brhome h2{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;text-align:center}
.brhome p{color:var(--mu);font-size:14px;margin:var(--s2) 0 var(--s6);text-align:center}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s3);width:100%;max-width:720px}
.tile{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s3) var(--s1);border-radius:8px;font-size:12px;min-height:96px;justify-content:center}
.tile:hover{background:var(--hov)}.tile .ic{width:40px;height:40px}
.brhint{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3);background:var(--glass2);backdrop-filter:var(--blur);font-size:12px;border-top:1px solid var(--line)}
.brhint a{font-weight:600;color:var(--ac);min-height:44px;display:inline-flex;align-items:center}
[data-theme=dark] .brhint a{color:#a9b3ff}
/* app: products (store) */
.st{padding:var(--s6)}
.sthero{border-radius:var(--r2);padding:var(--s8) var(--s6);background:linear-gradient(120deg,#3b2b8f,#1b6f86);color:#fff;margin-bottom:var(--s6)}
.sthero small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.sthero h2{font-size:28px;line-height:34px;font-weight:650;letter-spacing:-.02em;margin:var(--s2) 0}
.sthero p{opacity:.85;max-width:44ch}
.stg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3)}
.sc{border-radius:var(--r2);background:var(--card);border:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.sc .ic{width:48px;height:48px}
.sc b{font-size:15px;font-weight:600}.sc em{font-style:normal;font-size:12px;color:var(--mu)}
.sc p{font-size:13px;line-height:19px;color:var(--mu);flex:1}
.btn{height:36px;padding:0 var(--s4);border-radius:4px;background:var(--ac);color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-width:88px}
.btn:hover{filter:brightness(1.1)}.btn.gh{background:var(--card);color:var(--fg);border:1px solid var(--line)}
.sc .btn{align-self:flex-start}
/* app: terminal */
.term{background:#0c0c12;color:#d8dbe8;font:13px/20px Mo,ui-monospace,Menlo,monospace;padding:var(--s3) var(--s4);min-height:100%;white-space:pre-wrap;word-break:break-word}
.term .p{color:#7ee2b8}.term .h{color:#a9b3ff}.term .d{color:#8a8fa3}.term .e{color:#ff8f8f}
.term a{color:#7fd3ff;text-decoration:underline}
.tl{display:flex}.tl input{flex:1;min-width:0;background:none;border:0;outline:0;color:inherit;font:inherit;caret-color:#7ee2b8}
/* app: notes */
.nt{display:flex;flex-direction:column;height:100%}
.ntm{display:flex;gap:0;padding:0 var(--s2);border-bottom:1px solid var(--line);font-size:12px}
.ntm button{height:32px;padding:0 var(--s3);border-radius:4px}.ntm button:hover{background:var(--hov)}
.nt textarea{flex:1;resize:none;border:0;outline:0;background:var(--win);padding:var(--s4);font:14px/22px Mo,ui-monospace,monospace}
/* calc */
.ca{display:flex;flex-direction:column;height:100%;padding:var(--s2);gap:var(--s2);background:var(--win2)}
.cad{flex:1;min-height:84px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:0 var(--s3)}
.cad small{color:var(--mu);font-size:13px;min-height:20px}.cad b{font-size:40px;line-height:48px;font-weight:600;overflow:hidden;max-width:100%;white-space:nowrap}
.cak{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1)}
.cak button{height:48px;border-radius:4px;background:var(--card);border:1px solid var(--line);font-size:16px}
.cak button:hover{background:var(--hov)}.cak .op{background:var(--hov)}.cak .eq{background:var(--ac);color:#fff;border-color:transparent}
/* settings */
.se{display:flex;height:100%}
.senav{width:220px;flex:none;padding:var(--s4) var(--s2);background:var(--win2);overflow:auto}
.seme{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3) var(--s4)}
.seme img{width:56px;height:56px;border-radius:50%;object-fit:cover}.seme b{display:block;font-size:14px;font-weight:600}.seme small{font-size:12px;color:var(--mu)}
.senav button{display:flex;align-items:center;gap:var(--s3);width:100%;height:40px;padding:0 var(--s3);border-radius:4px;font-size:13px;text-align:left;position:relative}
.senav button:hover{background:var(--hov)}.senav button.on{background:var(--act)}
.senav button.on::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--ac)}
.senav svg{width:16px;height:16px}
.sem{flex:1;overflow:auto;padding:var(--s6) var(--s8)}
.sem h3{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s4)}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4);min-height:64px;border-radius:6px;background:var(--card);border:1px solid var(--line);margin-bottom:var(--s1)}
.row b{display:block;font-size:13px;font-weight:500}.row small{display:block;font-size:12px;color:var(--mu)}
.row input[type=range]{max-width:220px}
.tg{width:52px;height:44px;position:relative;flex:none}
.tg::before{content:"";position:absolute;left:4px;top:10px;width:44px;height:24px;border-radius:12px;border:1px solid var(--mu);box-sizing:border-box;transition:background .2s,border-color .2s}
.tg::after{content:"";position:absolute;top:15px;left:9px;width:14px;height:14px;border-radius:50%;background:var(--fg);transition:transform .25s var(--spring)}
.tg.on::before{background:var(--ac);border-color:var(--ac)}.tg.on::after{transform:translateX(20px);background:#fff}
.tgw{min-height:44px;display:flex;align-items:center}
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.walls button{aspect-ratio:16/10;border-radius:6px;background:#222 center/cover;outline:2px solid transparent;outline-offset:2px}
.walls button.on{outline-color:var(--ac)}
.accs{display:flex;gap:var(--s2);flex-wrap:wrap}.accs button{width:44px;height:44px;border-radius:50%;border:3px solid transparent}.accs button.on{border-color:var(--fg)}
.prof{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:6px;background:var(--card);border:1px solid var(--line);margin-bottom:var(--s3)}
.prof img{width:72px;height:72px;border-radius:50%;object-fit:cover}.prof b{font-size:18px;font-weight:600;display:block}.prof small{color:var(--mu)}
/* profile app */
.pf{padding:var(--s8) var(--s6);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3)}
.pf img{width:132px;height:132px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--win),0 0 0 6px var(--ac)}
.pf h2{font-size:28px;line-height:34px;font-weight:650;letter-spacing:-.02em;margin-top:var(--s2)}
.pf p{color:var(--mu);max-width:46ch}
.pfst{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);width:100%;max-width:420px;margin:var(--s2) 0}
.pfst div{border-radius:6px;background:var(--card);border:1px solid var(--line);padding:var(--s3) var(--s2)}.pfst b{display:block;font-size:22px;font-weight:650}.pfst small{font-size:12px;color:var(--mu)}
.pfb{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}
.pfb .btn{height:44px}
/* contact */
.ct{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);max-width:560px}
.ct h3{font-size:22px;font-weight:600}
.ct label{display:flex;flex-direction:column;gap:var(--s1);font-size:12px;font-weight:600;color:var(--mu)}
.ct input,.ct textarea{height:44px;border-radius:4px;border:1px solid var(--line);border-bottom:2px solid var(--mu);background:var(--card);padding:0 var(--s3);font-size:14px;color:var(--fg);outline:0;font-weight:400}
.ct textarea{height:120px;padding:var(--s3);resize:vertical}
.ct input:focus,.ct textarea:focus{border-bottom-color:var(--ac)}
.ct .bad{border-bottom-color:#e5484d}
.ctl{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ctl a{height:44px}
.ok{font-size:13px;color:var(--mu);min-height:20px}
/* bin */
.bn{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s6);text-align:center;color:var(--mu)}
.bn .ic{width:64px;height:64px;opacity:.9}.bn b{color:var(--fg);font-size:16px;font-weight:600}
/* dialog */
.dlg{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;background:rgba(0,0,0,.25);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.dlgb{width:min(480px,calc(100% - 2*var(--g)));background:var(--win);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;animation:pop .25s var(--ease)}
.dlgb .in{padding:var(--s6)}
.dlgb h3{font-size:20px;line-height:28px;font-weight:600;margin-bottom:var(--s2)}
.dlgb p{color:var(--mu);font-size:14px;line-height:21px;margin-bottom:var(--s2)}
.dlgf{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s4) var(--s6);background:var(--win2)}
.dlgf .btn{height:44px}
/* lock */
.lock{position:fixed;inset:0;z-index:2000;background:#0b0d1c center/cover;color:#fff;overflow:hidden;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.lock.gone{opacity:0;pointer-events:none;transform:translateY(-4%)}
.lock::before{content:"";position:absolute;inset:0;background:rgba(5,6,18,.18);transition:background .4s,backdrop-filter .4s}
.lock.auth::before{background:rgba(5,6,18,.45);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.lk1{position:absolute;left:0;right:0;top:12vh;display:flex;flex-direction:column;align-items:center;transition:opacity .35s,transform .45s var(--ease);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.lk1 b{font-size:clamp(72px,20vw,120px);line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lk1 span{font-size:clamp(18px,4.6vw,24px);font-weight:500;margin-top:var(--s3)}
.lock.auth .lk1{opacity:0;transform:translateY(-40px)}
.lk2{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .35s .05s,transform .45s .05s var(--ease)}
.lock.auth .lk2{opacity:1;transform:none;pointer-events:auto}
.lk2 img{width:clamp(128px,34vw,184px);height:clamp(128px,34vw,184px);border-radius:50%;object-fit:cover;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.lk2 b{font-size:28px;line-height:34px;font-weight:600}
.sign{height:44px;min-width:132px;padding:0 var(--s6);border-radius:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);font-weight:600;color:#fff}
.sign:hover{background:rgba(255,255,255,.24)}
.lkhint .lm{display:none}
.lkhint{position:absolute;left:0;right:0;bottom:calc(var(--s10) + env(safe-area-inset-bottom));text-align:center;font-size:13px;opacity:.8;transition:opacity .3s}
.lock.auth .lkhint{opacity:0}
.lkst{position:absolute;right:var(--g);bottom:calc(var(--s6) + env(safe-area-inset-bottom));display:flex;gap:var(--s3);opacity:.9}.lkst svg{width:18px;height:18px}
/* boot */
.boot{position:fixed;inset:0;z-index:3000;background:#000;display:grid;place-items:center;transition:opacity .45s var(--ease)}
.boot.gone{opacity:0;pointer-events:none}
.bootin{display:flex;flex-direction:column;align-items:center;gap:var(--s12,48px)}
.bootin .mark{width:96px;height:96px}
.spin{width:36px;height:36px;margin-top:64px;animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.off{position:fixed;inset:0;z-index:3100;background:#000;color:rgba(255,255,255,.55);display:grid;place-items:center;font-size:13px;cursor:pointer}
.night{position:fixed;inset:0;z-index:4000;pointer-events:none;background:#ff9a3c;mix-blend-mode:multiply;opacity:0;transition:opacity .4s}
.dim{position:fixed;inset:0;z-index:4001;pointer-events:none;background:#000;opacity:0}
.toast{position:fixed;right:12px;bottom:calc(var(--bar) + 12px);z-index:1300;width:340px;background:var(--glass2);backdrop-filter:var(--blur);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s4);display:flex;gap:var(--s3);animation:tin .35s var(--ease)}
@keyframes tin{from{opacity:0;transform:translateX(30px)}}
.toast .ic{width:32px;height:32px}.toast b{font-size:13px;font-weight:600;display:block}.toast p{font-size:12px;color:var(--mu)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ===== narrow layout ===== */
@media (max-width:640px){
:root{--bar:56px;--top:40px}
.pn-start>div:nth-child(2){overflow:auto}.pn-start .pins{overflow:visible;flex:none}
.pill{height:44px;padding:0 var(--s3);margin-right:-12px}
.fxbar .nb,.brbar .nb{width:44px;height:44px}.crumb{height:44px}.crumb button{height:44px}.url{height:44px;border-radius:22px}
.ntm button{height:44px}.calm button{width:44px;height:44px}
.lkhint .lw{display:none}.lkhint .lm{display:inline}
.btn{height:44px}.crumb button{min-width:44px}
.chip{height:44px;border-radius:22px;padding:0 var(--s4)}
.pn{background:var(--glass2)}
[data-theme=dark] .pn{background:rgba(36,37,50,.94)}[data-theme=light] .pn{background:rgba(250,250,253,.96)}
.url input,.sbox input{align-self:stretch;height:auto}

.status{display:flex;position:fixed;left:0;right:0;top:0;height:var(--top);z-index:1050;align-items:center;justify-content:space-between;padding:0 var(--g);font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.status.solid{background:var(--win2);color:var(--fg);text-shadow:none}
.st-tray{display:flex;align-items:center;gap:var(--s2);height:44px;margin:-2px calc(-1 * var(--s3)) -2px 0;padding:0 var(--s3);color:inherit}
.st-tray svg{width:15px;height:15px}
.desk{top:var(--top)}
.icons{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;padding:var(--s6) var(--g) 0;gap:var(--s4) 0}
.dic,.icons.sz-l .dic,.icons.sz-s .dic{width:auto;height:auto;padding:var(--s1) 0;min-height:84px}
.dic .ic,.icons.sz-l .ic,.icons.sz-s .ic{width:56px;height:56px}
.dic:hover{background:none}
.bar{padding:0 var(--g)}.tray{display:none}
.bar-mid{gap:var(--s2)}
.tb .ic{width:28px;height:28px}
.tb.xtra,.tb.xo{display:none}.tb.xtra.foc,.tb.xo.foc{display:grid}
.wins{top:var(--top)}
.win{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0;min-width:0;box-shadow:none}
.wt{height:48px;padding-left:var(--g)}.wt b{font-size:14px;font-weight:600}.wt .ic{width:20px;height:20px}
.wb{width:48px;height:48px}.wb.mx,.rz{display:none}
.wb.x{margin-right:calc(var(--g) - 14px)}
.pn{left:0!important;right:0!important;width:auto!important;margin:0!important;bottom:var(--bar)!important;top:auto;border-radius:16px 16px 0 0;max-height:calc(100% - var(--bar) - var(--top) - 8px)}
.pn-search{height:calc(100% - var(--bar) - var(--top) - 8px)}
.pn-wid{top:auto;height:calc(100% - var(--bar) - var(--top) - 8px);transform:translateY(16px)}
.sbox{margin:var(--s6) var(--g) var(--s3);height:44px;border-radius:22px}
.sec{padding:0 var(--g)}
.pins{grid-template-columns:repeat(4,1fr);padding:var(--s2) var(--g) var(--s3)}
.pin{height:84px}
.recs{grid-template-columns:1fr;padding:var(--s1) var(--g) var(--s4)}
.rec{padding:var(--s2) 0;margin:0}
.sfoot{padding:0 var(--g)}.pwm{right:var(--g)}
.allv,.sres{padding-left:var(--g);padding-right:var(--g)}
.toprow{grid-template-columns:repeat(4,1fr)}
.qs{padding:var(--s6) var(--g) var(--s4)}.sl{padding:var(--s2) var(--g)}.qfoot{padding:0 var(--g)}
.calh{padding:0 var(--g)}.calm{padding:var(--s3) calc(var(--g) - 12px) 0 var(--g)}.calg{padding:var(--s2) calc(var(--g) - 4px) var(--s4)}
.wtop{padding:var(--s6) var(--g) var(--s4)}.wgrid{padding:0 var(--g) var(--s6);grid-template-columns:1fr}.wc.wide{grid-column:auto}
.fxnav{display:none}.fxm{padding:var(--s4) var(--g)}.fxbar{padding:var(--s2) calc(var(--g) - 8px)}.fxs{padding:0 var(--g)}
.fxg{grid-template-columns:repeat(3,1fr)}
.fi{min-height:108px;padding:var(--s3) 0}
.brhome{padding:var(--s8) var(--g)}.brhome h2{font-size:24px;line-height:30px}
.tiles{grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.brbar{padding:var(--s2) calc(var(--g) - 8px)}
.brhint{padding:var(--s2) var(--g)}
.st{padding:var(--s4) var(--g) var(--s6)}.sthero{padding:var(--s6) var(--s5)}.sthero h2{font-size:24px;line-height:30px}
.stg{grid-template-columns:1fr}
.term{padding:var(--s3) var(--g)}
.nt textarea{padding:var(--s4) var(--g)}.ntm{padding:0 calc(var(--g) - 12px)}
.ca{padding:var(--s3) var(--g) var(--s4)}.cak button{height:56px;font-size:18px}
.se{flex-direction:column}.senav{width:auto;padding:var(--s3) var(--g) 0;display:flex;gap:var(--s1);overflow-x:auto;flex:none;scrollbar-width:none}
.senav::-webkit-scrollbar{display:none}
.seme{display:none}.senav button{width:auto;flex:none;height:44px;white-space:nowrap}
.senav button.on::before{left:12px;right:12px;top:auto;bottom:4px;width:auto;height:3px}
.sem{padding:var(--s5) var(--g) var(--s6)}.sem h3{font-size:20px;line-height:28px}
.row{padding:var(--s3)}.row input[type=range]{max-width:150px}
.pf{padding:var(--s8) var(--g)}
.ct{padding:var(--s5) var(--g) var(--s6)}
.ctx{min-width:220px;max-width:calc(100% - 2*var(--g))}
.toast{left:var(--g);right:var(--g);width:auto;bottom:calc(var(--bar) + 8px)}
.lkst{right:var(--g)}
}
@media (max-width:360px){.tiles{grid-template-columns:repeat(3,1fr)}.toprow{grid-template-columns:repeat(4,1fr)}}
