@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;overflow:hidden;background:#0b1a4a;overscroll-behavior:none}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-optical-sizing:auto;color:#1d1d1f;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
a{color:inherit}
svg{display:block}
:focus-visible{outline:2px solid #4c8dff;outline-offset:2px}
:root{--g:clamp(20px,5.5vw,40px);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.4,.5,1);
--win:rgba(250,250,252,.82);--winb:rgba(255,255,255,.6);--side:rgba(236,236,242,.6);--txt:#1d1d1f;--mut:#6e6e73;--line:rgba(0,0,0,.08);--acc:#0a7cff;--hov:rgba(0,0,0,.05);--sel:rgba(10,124,255,.14)}
.dark{--win:rgba(32,32,38,.8);--winb:rgba(255,255,255,.12);--side:rgba(44,44,52,.55);--txt:#f5f5f7;--mut:#a1a1aa;--line:rgba(255,255,255,.1);--hov:rgba(255,255,255,.07);--sel:rgba(10,124,255,.3)}
.glass{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08),0 12px 40px rgba(0,10,40,.22)}
.no-glass .glass,.no-glass .win,.no-glass #menubar,.no-glass .pop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.no-glass .glass{background:rgba(40,52,90,.92)}
.no-glass .win{background:#f6f6f8}.no-glass.dark .win{background:#25252b}
#os{position:fixed;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#wall{position:absolute;inset:0;background:#0b1a4a center/cover no-repeat}
#wallimg{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .6s ease}
#wallimg.on{opacity:1}
#wall,#wallimg{transform:scale(1.06);transition:transform 1s var(--ease),filter .8s var(--ease),opacity .6s ease}
.state-lock #wall,.state-login #wall{filter:blur(0)}
.state-login #wallimg{filter:blur(18px) brightness(.85)}
.state-desk #wall,.state-desk #wallimg{transform:scale(1)}
#dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .3s}
/* lock */
#lock,#login,#desk,#pocket{position:absolute;inset:0}
#lock{display:flex;flex-direction:column;align-items:center;padding-top:clamp(64px,12vh,120px);color:#fff;cursor:pointer;transition:transform .7s var(--ease),opacity .5s ease;will-change:transform}
.lk-date{font-size:clamp(17px,1.6vw,22px);font-weight:600;letter-spacing:.01em;text-shadow:0 1px 12px rgba(0,0,0,.2)}
.lk-time{font-size:clamp(84px,11vw,148px);font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:var(--s1);text-shadow:0 2px 30px rgba(0,0,0,.18);font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,rgba(255,255,255,.72));-webkit-background-clip:text;background-clip:text;color:transparent}
.lk-hint{position:absolute;bottom:clamp(40px,8vh,72px);left:0;right:0;text-align:center;font-size:14px;font-weight:500;opacity:.85;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}
.only-mob{display:none}
#login{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.lg-card{display:flex;flex-direction:column;align-items:center;transform:translateY(12px) scale(.98);transition:transform .6s var(--ease)}
.lg-av{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 10px 40px rgba(0,0,0,.3);background:#9db8ff}
.lg-name{margin-top:var(--s4);font-size:22px;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.lg-btn{margin-top:var(--s5);min-width:132px;height:44px;padding:0 var(--s6);border-radius:22px;font-size:15px;font-weight:600;color:#fff;transition:transform .2s var(--ease),background .2s}
.lg-btn:hover{background:rgba(255,255,255,.26)}.lg-btn:active{transform:scale(.96)}
.lg-tip{margin-top:var(--s3);font-size:13px;opacity:.7}
.lg-power{position:absolute;bottom:clamp(32px,7vh,64px);display:flex;gap:var(--s8)}
.lg-power button{display:flex;flex-direction:column;align-items:center;gap:var(--s2);font-size:12px;font-weight:500;color:rgba(255,255,255,.88);min-width:64px;min-height:44px}
.pw-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);transition:background .2s,transform .2s var(--ease)}
.lg-power button:hover .pw-ic{background:rgba(255,255,255,.28)}.lg-power button:active .pw-ic{transform:scale(.92)}
.pw-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.state-login #lock{opacity:0;transform:translateY(-6vh);pointer-events:none}
.state-login #login{opacity:1;visibility:visible;transition:opacity .45s ease .1s}
.state-login .lg-card{transform:none}
#desk,#pocket{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.state-desk #lock,.state-desk #login{opacity:0;visibility:hidden;pointer-events:none}
.state-desk #lock{transform:translateY(-8vh)}
.state-desk #desk{opacity:1;visibility:visible;transition:opacity .5s ease}
/* menubar */
#menubar{position:absolute;top:0;left:0;right:0;height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--s2);color:#fff;font-size:13.5px;background:rgba(10,20,60,.16);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);z-index:50;text-shadow:0 0 8px rgba(0,0,0,.18);transform:translateY(-100%);transition:transform .6s var(--ease) .15s}
.state-desk #menubar{transform:none}
.mb-l,.mb-r{display:flex;align-items:center;height:100%}
.mb-i{height:24px;padding:0 10px;border-radius:6px;display:flex;align-items:center;font-weight:500;letter-spacing:.005em;transition:background .15s}
.mb-i:hover,.mb-i.open{background:rgba(255,255,255,.2)}
.mb-app{font-weight:700}
.mb-sys svg{width:16px;height:16px;fill:#fff}
.mb-ico svg,.mb-bat svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.mb-ico svg .f,.mb-bat svg .f{fill:#fff;stroke:none}
.mb-bat svg{width:26px;height:13px;stroke-width:1.3;opacity:.95}
.mb-s{display:flex;align-items:center;gap:6px;padding:0 10px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
#island{position:absolute;top:40px;left:50%;height:30px;min-width:118px;padding:0 var(--s4);border-radius:16px;background:#050507;color:#fff;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--s2);z-index:49;transform:translateX(-50%) scale(.6);opacity:0;transition:transform .55s var(--spring),opacity .35s,min-width .5s var(--spring),height .5s var(--spring),border-radius .5s;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.state-desk #island{transform:translateX(-50%);opacity:1}
#island.big{min-width:300px;height:44px;border-radius:22px}
.is-dot{width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 10px #30d158}
/* widgets */
#widgets{position:absolute;top:56px;left:var(--s5);display:grid;grid-template-columns:repeat(2,168px);gap:var(--s4);z-index:2;opacity:0;transform:translateY(8px);transition:opacity .6s ease .35s,transform .7s var(--ease) .35s}
.state-desk #widgets{opacity:1;transform:none}
.wg{height:168px;border-radius:24px;padding:var(--s4);color:#fff;overflow:hidden;position:relative}
.wg-cal .mo{font-size:11px;font-weight:700;letter-spacing:.08em;color:#ff6961;text-transform:uppercase}
.wg-cal .gr{display:grid;grid-template-columns:repeat(7,1fr);gap:1px 0;margin-top:6px;font-size:9.5px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.wg-cal .gr b{font-weight:700;opacity:.6;font-size:9px}
.wg-cal .gr span{height:16px;line-height:16px;border-radius:8px}
.wg-cal .gr .o{opacity:.35}
.wg-cal .gr .t{background:#ff453a;color:#fff}
.wg-clock{display:grid;place-items:center}
.wg-clock svg{width:136px;height:136px}
.wg-wide{grid-column:span 2;height:auto;padding:var(--s4)}
.wg-wide h4{margin:0 0 var(--s3);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;font-weight:700}
.pins{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.pin{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:600;text-decoration:none;color:#fff;min-height:44px}
.pin .ic{width:44px;height:44px;border-radius:12px}
/* desktop icons */
#icons{position:absolute;top:56px;right:var(--s5);display:flex;flex-direction:column;gap:var(--s3);z-index:2;opacity:0;transition:opacity .6s ease .45s}
.state-desk #icons{opacity:1}
.dicon{width:88px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 4px;border-radius:8px;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.dicon:hover{background:rgba(255,255,255,.12)}.dicon.sel{background:rgba(255,255,255,.22)}
.dicon .ic{width:56px;height:56px;border-radius:14px}
/* app icons */
.ic{container-type:size;position:relative;display:grid;place-items:center;border-radius:22.5%;overflow:hidden;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.18)}
.ic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 50%);pointer-events:none}
.ic svg{width:58%;height:58%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.ic .mono{position:relative;z-index:1;color:#fff;font-weight:800;font-size:16px;font-size:38cqw;letter-spacing:-.03em;line-height:1}
/* windows */
#wins{position:absolute;inset:0;pointer-events:none;z-index:10}
.win{position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;border-radius:20px;background:var(--win);color:var(--txt);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--winb);box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 24px 70px rgba(0,8,40,.35),0 4px 14px rgba(0,8,40,.14);overflow:hidden;transform-origin:50% 60%;will-change:transform;contain:layout paint}
.win.blur{box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 14px 40px rgba(0,8,40,.22)}
.win.anim{transition:transform .42s var(--ease),opacity .3s ease,width .42s var(--ease),height .42s var(--ease)}
.win.closing{opacity:0}
.w-bar{height:52px;flex:none;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);cursor:default;touch-action:none}
.lights{display:flex;gap:8px;flex:none}
.lights button{width:13px;height:13px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.lights button::before{content:"";position:absolute;inset:-8px -4px}
.lights .c{background:#ff5f57}.lights .m{background:#febc2e}.lights .z{background:#28c840}
.win.blur .lights button{background:rgba(128,128,128,.35)}
.lights svg{width:13px;height:13px;stroke:rgba(0,0,0,.55);stroke-width:1.6;opacity:0;transition:opacity .12s}
.lights:hover svg{opacity:1}
.w-title{flex:1;text-align:center;font-size:13.5px;font-weight:600;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:60px}
.w-body{flex:1;min-height:0;display:flex;position:relative}
.w-grip{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;touch-action:none;z-index:3}
.scroll{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.4) transparent}
/* sidebar layout */
.side{width:196px;flex:none;background:var(--side);border-right:1px solid var(--line);padding:var(--s2) var(--s2) var(--s4)}
.side h5{margin:var(--s4) var(--s3) var(--s2);font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.02em}
.side h5:first-child{margin-top:var(--s1)}
.si{display:flex;align-items:center;gap:var(--s2);width:100%;height:32px;padding:0 var(--s3);border-radius:8px;font-size:13.5px;font-weight:500;text-align:left;transition:background .12s}
.si:hover{background:var(--hov)}.si.on{background:var(--sel);color:var(--acc)}
.si i{width:16px;height:16px;border-radius:5px;flex:none}
.list{width:250px;flex:none;border-right:1px solid var(--line);padding:var(--s2)}
.li{display:block;width:100%;text-align:left;padding:var(--s3);border-radius:10px;transition:background .12s;min-height:44px}
.li:hover{background:var(--hov)}.li.on{background:var(--sel)}
.li b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li span{display:block;margin-top:2px;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc{flex:1;min-width:0;padding:var(--s6) var(--s8) var(--s10)}
.doc h1{margin:0 0 var(--s2);font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:750}
.doc h2{margin:var(--s6) 0 var(--s2);font-size:17px;font-weight:700;letter-spacing:-.01em}
.doc p,.doc li{font-size:15px;line-height:1.6;color:var(--txt)}
.doc p{margin:0 0 var(--s3)}
.doc .kick{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:var(--s2)}
.doc .lede{font-size:17px;color:var(--mut);line-height:1.5}
.doc ul{margin:0 0 var(--s3);padding-left:20px}
.doc a{color:var(--acc);text-decoration:none;font-weight:600}
.doc a:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--s4);border-radius:18px;background:var(--hov);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--txt)!important;text-decoration:none!important;transition:background .15s,transform .15s var(--ease)}
.chip:hover{background:var(--sel)}.chip:active{transform:scale(.97)}
.chip.pri{background:var(--acc);border-color:transparent;color:#fff!important}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s3);margin:var(--s4) 0}
.card{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);border-radius:14px;background:var(--hov);border:1px solid var(--line);text-decoration:none!important;color:var(--txt)!important;transition:transform .2s var(--ease),background .15s;min-height:64px}
.card:hover{transform:translateY(-2px);background:var(--sel)}
.card .ic{width:40px;height:40px;border-radius:10px}
.card b{display:block;font-size:14px}.card span{display:block;font-size:12px;color:var(--mut);font-weight:500}
/* finder */
.fgrid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));align-content:start;gap:var(--s2);padding:var(--s4)}
.fi{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--s2) var(--s1);border-radius:10px;font-size:12.5px;font-weight:600;text-align:center;text-decoration:none;color:var(--txt);min-height:44px}
.fi:hover{background:var(--hov)}
.fi svg{width:64px;height:52px}
.fi small{display:block;font-size:11px;color:var(--mut);font-weight:500;margin-top:-4px}
.fbar{height:44px;flex:none;display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4);border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.col{flex:1;min-width:0;display:flex;flex-direction:column}
/* terminal */
.term{flex:1;background:rgba(14,14,20,.92);color:#e6e6ea;font:13px/1.55 ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;padding:var(--s3) var(--s4);cursor:text;user-select:text;-webkit-user-select:text}
.term .ln{white-space:pre-wrap;word-break:break-word}
.term .p{color:#7ee787}.term .h{color:#79c0ff}.term .y{color:#f2cc60}.term .d{color:#8b8b95}
.term a{color:#79c0ff}
.term .in{display:flex;gap:8px}
.term input{flex:1;min-width:0;background:none;border:0;outline:0;color:inherit;font:inherit;padding:0;caret-color:#7ee787}
.win[data-app=terminal]{background:rgba(20,20,26,.86);border-color:rgba(255,255,255,.12)}
.win[data-app=terminal] .w-title{color:#a1a1aa}
/* browser */
.bbar{height:52px;flex:none;display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4) 0 0}
.url{flex:1;height:34px;border-radius:10px;background:var(--hov);border:1px solid var(--line);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);font-size:13px;color:var(--mut)}
.url input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;color:var(--txt);text-align:center}
.url input:focus{text-align:left}
.bbtn{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--mut)}
.bbtn:hover{background:var(--hov)}
.bbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bview{flex:1;position:relative;background:var(--win)}
.bview iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.start{max-width:760px;margin:0 auto;padding:var(--s8) var(--s6)}
.start h3{margin:0 0 var(--s4);font-size:20px;font-weight:750;letter-spacing:-.01em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--s4) var(--s3);margin-bottom:var(--s8)}
.tile{display:flex;flex-direction:column;align-items:center;gap:var(--s2);font-size:12px;font-weight:600;text-align:center;color:var(--txt);text-decoration:none;min-height:44px}
.tile .ic{width:60px;height:60px;border-radius:16px;transition:transform .2s var(--ease)}
.tile:hover .ic{transform:translateY(-3px) scale(1.04)}
/* mail */
.mail{flex:1;padding:0 var(--s6) var(--s6);display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:var(--s3);min-height:44px;border-bottom:1px solid var(--line);font-size:14px}
.mrow label{width:64px;color:var(--mut);font-weight:500;flex:none}
.mrow input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;color:var(--txt);height:44px}
.mail textarea{flex:1;min-height:140px;resize:none;border:0;outline:0;background:none;font:15px/1.55 Inter,sans-serif;color:var(--txt);padding:var(--s4) 0}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding-top:var(--s3);font-size:12.5px;color:var(--mut)}
.btn{height:40px;padding:0 var(--s5);border-radius:20px;background:var(--acc);color:#fff;font-size:14px;font-weight:650;transition:transform .15s var(--ease),filter .15s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.97)}
.err{color:#ff453a}
/* calculator */
.calc{flex:1;display:flex;flex-direction:column;background:rgba(28,28,32,.92);padding:var(--s3)}
.cdisp{flex:1;display:flex;align-items:flex-end;justify-content:flex-end;color:#fff;font-size:44px;font-weight:300;padding:0 var(--s2) var(--s2);font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}
.ckeys{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.ck{height:48px;border-radius:24px;background:#3a3a3f;color:#fff;font-size:19px;font-weight:500;transition:filter .1s,transform .1s}
.ck:active{transform:scale(.95);filter:brightness(1.3)}
.ck.f{background:#a5a5aa;color:#111}.ck.o{background:#ff9f0a}.ck.o.on{background:#fff;color:#ff9f0a}.ck.w{grid-column:span 2}
.win[data-app=calc]{background:rgba(28,28,32,.88);border-color:rgba(255,255,255,.12)}
/* settings */
.set{flex:1;padding:var(--s6) var(--s8)}
.set h2{margin:0 0 var(--s4);font-size:22px;font-weight:750;letter-spacing:-.01em}
.grp{border-radius:14px;background:var(--hov);border:1px solid var(--line);margin-bottom:var(--s5)}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:52px;padding:var(--s2) var(--s4);font-size:14px;font-weight:500}
.row+.row{border-top:1px solid var(--line)}
.row small{display:block;color:var(--mut);font-size:12px;font-weight:500;margin-top:2px}
.sw{width:46px;height:28px;border-radius:14px;background:rgba(120,120,128,.32);position:relative;flex:none;transition:background .25s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .3s var(--spring)}
.sw.on{background:#30d158}.sw.on::after{transform:translateX(18px)}
.seg{display:flex;background:rgba(120,120,128,.16);border-radius:10px;padding:2px}
.seg button{height:32px;padding:0 var(--s4);border-radius:8px;font-size:13px;font-weight:600;color:var(--mut)}
.seg button.on{background:var(--win);color:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding:var(--s4)}
.wsw{aspect-ratio:16/10;border-radius:12px;background:center/cover;border:2px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .2s var(--ease)}
.wsw:hover{transform:scale(1.03)}.wsw.on{border-color:var(--acc)}
input[type=range]{width:160px;accent-color:var(--acc)}
/* dock */
#dock{position:absolute;left:50%;bottom:8px;z-index:40;transform:translate(-50%,130%);transition:transform .7s var(--ease) .25s}
.state-desk #dock{transform:translate(-50%,0)}
.dk-bg{position:absolute;inset:0;border-radius:26px;transform-origin:50% 100%}
.dk-row{position:relative;display:flex;align-items:flex-end;gap:6px;padding:7px 8px;height:70px}
.dk{position:relative;width:54px;height:54px;flex:none;transform-origin:50% 100%;will-change:transform}
.dk .ic{width:54px;height:54px;border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px rgba(0,0,0,.25)}
.dk .tip{position:absolute;bottom:calc(100% + 18px);left:50%;transform:translate(-50%,4px);padding:4px 10px;border-radius:8px;background:rgba(30,30,36,.85);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.dk:hover .tip{opacity:1;transform:translate(-50%,0)}
.dk .run{position:absolute;bottom:-6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(255,255,255,.9);opacity:0;transition:opacity .2s}
.dk.running .run{opacity:1}
.dk.bounce .ic{animation:bounce .9s var(--ease)}
@keyframes bounce{0%,100%{transform:none}25%{transform:translateY(-22px)}50%{transform:none}70%{transform:translateY(-10px)}}
.dk-sep{width:1px;height:46px;align-self:center;background:rgba(255,255,255,.35);margin:0 4px;flex:none}
/* popovers */
#layer{position:absolute;inset:0;z-index:60;pointer-events:none}
#layer>*{pointer-events:auto}
.pop{position:absolute;min-width:220px;padding:6px;border-radius:14px;background:rgba(246,246,250,.78);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.6);box-shadow:0 0 0 .5px rgba(0,0,0,.15),0 16px 50px rgba(0,0,0,.28);color:#1d1d1f;font-size:13.5px;animation:pop .18s var(--ease);transform-origin:top left}
.dark .pop{background:rgba(40,40,46,.8);color:#f5f5f7;border-color:rgba(255,255,255,.12)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(-4px)}}
.mi{display:flex;justify-content:space-between;gap:var(--s6);width:100%;height:30px;align-items:center;padding:0 10px;border-radius:7px;text-align:left;font-weight:500}
.mi:hover{background:var(--acc);color:#fff}
.mi kbd{font:inherit;opacity:.5}
.msep{height:1px;margin:5px 10px;background:rgba(0,0,0,.1)}.dark .msep{background:rgba(255,255,255,.12)}
.mi.dis{opacity:.4;pointer-events:none}
/* control centre */
.cc{right:8px;top:40px;width:320px;padding:var(--s3);display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);transform-origin:top right}
.cct{border-radius:16px;background:rgba(255,255,255,.55);padding:var(--s3);display:flex;align-items:center;gap:var(--s3);font-weight:600;font-size:13px;min-height:64px;text-align:left}
.dark .cct{background:rgba(255,255,255,.08)}
.cct .b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(120,120,128,.3);flex:none;transition:background .2s}
.cct.on .b{background:var(--acc)}
.cct .b svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cct small{display:block;font-size:11.5px;color:var(--mut);font-weight:500}
.ccw{grid-column:span 2;flex-direction:column;align-items:stretch;gap:var(--s2)}
.ccw input{width:100%}
/* spotlight */
.spot{left:50%;top:22vh;width:min(640px,calc(100vw - 2*var(--g)));transform:translateX(-50%);padding:0;border-radius:22px;animation:spot .22s var(--ease);transform-origin:top center}
@keyframes spot{from{opacity:0;transform:translateX(-50%) scale(.97)}}
.spot .sin{display:flex;align-items:center;gap:var(--s3);height:60px;padding:0 var(--s5)}
.spot .sin svg{width:22px;height:22px;fill:none;stroke:var(--mut);stroke-width:2;stroke-linecap:round;flex:none}
.spot input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 22px Inter,sans-serif;color:inherit}
.sres{max-height:340px;border-top:1px solid rgba(0,0,0,.08);padding:6px}
.sr{display:flex;align-items:center;gap:var(--s3);width:100%;height:48px;padding:0 var(--s3);border-radius:10px;text-align:left;font-size:14px;font-weight:600}
.sr .ic{width:30px;height:30px;border-radius:8px}
.sr span{margin-left:auto;font-size:12px;color:var(--mut);font-weight:500}
.sr.on{background:var(--acc);color:#fff}.sr.on span{color:rgba(255,255,255,.8)}
/* launchpad */
.lp{position:absolute;inset:0;background:rgba(10,20,60,.32);-webkit-backdrop-filter:blur(36px) saturate(150%);backdrop-filter:blur(36px) saturate(150%);display:flex;flex-direction:column;align-items:center;padding:72px var(--g) 120px;animation:lp .35s var(--ease)}
@keyframes lp{from{opacity:0;transform:scale(1.06)}}
.lp.out{animation:lpo .25s ease forwards}@keyframes lpo{to{opacity:0;transform:scale(1.06)}}
.lp input{width:240px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;font:14px Inter,sans-serif;text-align:center;outline:0}
.lp input::placeholder{color:rgba(255,255,255,.7)}
.lpg{margin-top:var(--s10);display:grid;grid-template-columns:repeat(6,112px);gap:var(--s8) var(--s6)}
.lpi{display:flex;flex-direction:column;align-items:center;gap:var(--s2);color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.4);text-decoration:none}
.lpi .ic{width:80px;height:80px;border-radius:19px;transition:transform .2s var(--ease)}
.lpi:hover .ic{transform:scale(1.06)}.lpi:active .ic{transform:scale(.94)}
/* toast/notification */
.note{right:12px;top:44px;width:340px;padding:var(--s3) var(--s4);border-radius:18px;display:flex;gap:var(--s3);align-items:center;animation:nin .5s var(--spring);transform-origin:top right}
.note .ic{width:38px;height:38px;border-radius:10px}
.note b{display:block;font-size:13.5px}.note span{font-size:12.5px;color:var(--mut)}
@keyframes nin{from{opacity:0;transform:translateX(30px)}}
.note.out{transition:opacity .3s,transform .3s var(--ease);opacity:0;transform:translateX(30px)}
/* boot */
#boot{position:absolute;inset:0;z-index:90;background:#000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--s8);color:#fff}
#boot.on{display:flex}
#boot svg{width:64px;height:64px;fill:#fff}
.bt-bar{width:180px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.bt-bar i{display:block;height:100%;width:100%;background:#fff;border-radius:3px;transform:translateX(-100%)}
#boot.run .bt-bar i{transition:transform 1.7s cubic-bezier(.6,.1,.3,1);transform:none}
.bt-off{display:none;font-size:14px;opacity:.6}
#boot.off svg,#boot.off .bt-bar{display:none}#boot.off .bt-off{display:block}
/* ---------- pocket ---------- */
#pocket{display:none;flex-direction:column;color:#fff;padding-top:env(safe-area-inset-top)}
.ph-status{height:48px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 var(--g);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.ph-sig{display:flex;align-items:center;gap:6px}
.ph-sig svg{width:18px;height:12px;fill:#fff}
.ph-sig .st{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}.ph-sig .st circle{fill:#fff;stroke:none}
.ph-sig .bt{width:27px;height:13px;fill:none;stroke:#fff;stroke-width:1.4}.ph-sig .bt .f{fill:#fff;stroke:none}
.ph-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s2) var(--g) var(--s4)}
.ph-widgets{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.ph-widgets .wg{height:auto;aspect-ratio:1/1;border-radius:22px;padding:var(--s4)}
.ph-widgets .wg-clock svg{width:100%;height:100%;max-width:140px;max-height:140px}
.ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5) 0;margin-top:var(--s6)}
.pa{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:550;color:#fff;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.35);min-height:44px;-webkit-touch-callout:none}
.pa .ic{width:60px;height:60px;border-radius:15px;transition:transform .2s var(--ease)}
.pa:active .ic{transform:scale(.9)}
.pa span{max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-dots{flex:none;display:flex;justify-content:center;gap:8px;padding:var(--s2) 0}
.ph-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4)}.ph-dots i.on{background:#fff}
.ph-dock{flex:none;margin:0 var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));border-radius:32px;padding:var(--s3) var(--s4);display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}
.ph-dock .pa>span:last-child{display:none}
.sheet{position:absolute;inset:0;z-index:70;background:rgba(246,246,249,.94);color:var(--txt);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);display:flex;flex-direction:column;border-radius:0;will-change:transform;transform-origin:0 0}
.dark .sheet{background:rgba(28,28,32,.94)}
.sheet.anim{transition:transform .5s var(--ease),border-radius .5s var(--ease),opacity .35s ease}
.sh-top{flex:none;display:flex;align-items:center;justify-content:space-between;height:52px;padding:calc(env(safe-area-inset-top)) var(--g) 0;margin-top:44px}
.sh-top b{font-size:17px;font-weight:700}
.sh-back{display:flex;align-items:center;gap:2px;height:44px;min-width:44px;color:var(--acc);font-size:16px;font-weight:550}
.sh-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sh-body{flex:1;min-height:0;display:flex;flex-direction:column}
.sh-home{flex:none;height:34px;display:grid;place-items:center;touch-action:none;padding-bottom:env(safe-area-inset-bottom)}
.sh-home i{width:134px;height:5px;border-radius:3px;background:var(--txt);opacity:.85}
.sheet[data-app=terminal]{background:rgba(14,14,20,.96);color:#e6e6ea}
.sheet[data-app=terminal] .sh-home i{background:#fff}
.sheet[data-app=calc]{background:#111;color:#fff}
.sheet[data-app=calc] .sh-home i{background:#fff}
/* responsive */
@media (max-width:767px){
 #desk{display:none}#pocket{display:flex}
 .only-desk{display:none}.only-mob{display:inline}
 .state-desk #pocket{opacity:1;visibility:visible;transition:opacity .5s ease}
 .lk-time{font-size:clamp(80px,24vw,104px)}
 .lk-date{font-size:17px}
 .lg-power{gap:var(--s6)}
 .m .side{width:auto;border:0;background:none;padding:0 var(--g)}
 .m .doc{padding:var(--s2) var(--g) var(--s10)}
 .m .doc h1{font-size:26px}
 .m .list{flex:1;width:auto;border:0;padding:0 var(--g) var(--s6)}
 .m .chip{height:44px}
 .m .li{padding:var(--s3) var(--s4);background:var(--hov);margin-bottom:var(--s2);border-radius:12px}
 .m .fgrid{padding:var(--s2) var(--g) var(--s6);grid-template-columns:repeat(3,1fr)}
 .m .set{padding:var(--s2) var(--g) var(--s10)}
 .m .mail{padding:0 var(--g) var(--s4)}
 .m .term{padding:var(--s3) var(--g)}
 .m .calc{padding:var(--s3) var(--g) var(--s4)}
 .m .ck{height:auto;aspect-ratio:1/1;border-radius:50%;font-size:26px}
 .m .ck.w{aspect-ratio:auto;border-radius:999px}
 .m .cdisp{font-size:64px}
 .m .start{padding:var(--s4) var(--g) var(--s8)}
 .m .tiles{grid-template-columns:repeat(4,1fr)}
 .m .cards{grid-template-columns:1fr}
 .m .walls{grid-template-columns:repeat(3,1fr);padding:var(--s3)}
 .m .row{padding:var(--s2) var(--s4)}
 .m .grp{border-radius:14px}
 .m .sec{display:block}
}
@media (pointer:coarse){.chip{height:44px}}
@media (max-width:359px){.pa .ic{width:54px;height:54px;border-radius:13px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.rm *,.rm *::before,.rm *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}