@font-face{font-family:"Inter";src:url("./fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;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%}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;color:#111;
 --g:clamp(20px,5.5vw,40px);
 --pg1:#d8e7f7;--pg2:#eef3fa;--glow:rgba(255,226,170,.75);--ctl-bg:rgba(255,255,255,.62);--ctl-bd:rgba(255,255,255,.9);--ctl-fg:#1c2230;--ctl-mut:#5b6476;--ctl-on:#1c2230;--ctl-onfg:#fff;
 background:radial-gradient(60vmax 50vmax at 78% 8%,var(--glow),transparent 62%),radial-gradient(70vmax 60vmax at 8% 100%,rgba(190,170,255,.35),transparent 60%),linear-gradient(160deg,var(--pg1),var(--pg2));background-color:var(--pg2)}
[data-theme=dark] body{--pg1:#0b1222;--pg2:#141a2c;--glow:rgba(255,170,90,.16);--ctl-bg:rgba(30,36,54,.66);--ctl-bd:rgba(255,255,255,.1);--ctl-fg:#eef1f8;--ctl-mut:#9aa3b8;--ctl-on:#eef1f8;--ctl-onfg:#0e1322;color:#eee}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
img{display:block}
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(40px,7vw,120px);padding:24px var(--g)}
.dev-wrap{position:relative;flex:none}
/* device */
.dev{--fw:12px;--W:360px;--H:780px;position:absolute;left:0;top:0;width:calc(var(--W) + var(--fw)*2);height:calc(var(--H) + var(--fw)*2);padding:var(--fw);border-radius:58px;transform-origin:0 0;
 background:linear-gradient(145deg,#3a3d44,#16171b 40%,#2b2d33 70%,#0e0f12);box-shadow:0 0 0 1.5px #55585f inset,0 0 0 3px #0c0d10 inset,0 40px 80px -20px rgba(20,30,60,.45),0 18px 36px -18px rgba(0,0,0,.5)}
.dev.ti{background:linear-gradient(145deg,#e9e6e1,#b9b5ae 40%,#dedad3 70%,#a7a39c);box-shadow:0 0 0 1.5px #f4f2ee inset,0 0 0 3px #8f8b84 inset,0 40px 80px -20px rgba(20,30,60,.4),0 18px 36px -18px rgba(0,0,0,.35)}
.btn-side{position:absolute;width:4px;border-radius:2px;background:inherit;filter:brightness(.85)}
.b1{left:-3px;top:150px;height:30px}.b2{left:-3px;top:200px;height:58px}.b3{left:-3px;top:270px;height:58px}.b4{right:-3px;top:220px;height:90px}
.scr{position:relative;width:var(--W);height:var(--H);border-radius:46px;overflow:hidden;background:#000;isolation:isolate;contain:paint}
.dev.android{border-radius:44px;--fw:10px}.dev.android .scr{border-radius:34px}
.wall{position:absolute;inset:0;z-index:0;transition:filter .5s}
.wp-dawn{background:radial-gradient(120% 70% at 85% 0%,#ffd7b8 0%,transparent 55%),radial-gradient(90% 60% at 0% 40%,#b8c9ff 0%,transparent 60%),radial-gradient(110% 70% at 70% 100%,#e2b8ff 0%,transparent 60%),linear-gradient(180deg,#9fb8ef,#c9b7f3 55%,#f4c9d9)}
.wp-dusk{background:radial-gradient(120% 60% at 80% 100%,#ff8a5c 0%,transparent 55%),radial-gradient(100% 70% at 10% 20%,#4b3fb8 0%,transparent 65%),linear-gradient(180deg,#121633,#2a2268 45%,#7a3f8f 80%,#d0677a)}
.wp-mint{background:radial-gradient(100% 60% at 20% 0%,#d9fff1 0%,transparent 60%),radial-gradient(120% 70% at 100% 90%,#7fd6c9 0%,transparent 60%),linear-gradient(180deg,#a8e6d8,#5fb7c7 60%,#3d7fa6)}
.wp-ink{background:radial-gradient(90% 50% at 70% 10%,#3b4a6b 0%,transparent 60%),radial-gradient(100% 60% at 0% 100%,#2d2347 0%,transparent 60%),linear-gradient(180deg,#0d1118,#151b29 60%,#0b0d12)}
/* status bar + island */
.sb{position:absolute;z-index:60;left:0;right:0;top:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 36px;color:#fff;font-weight:600;font-size:15.5px;letter-spacing:-.01em;pointer-events:none;transition:color .3s}
.sb.dk{color:#111}
.sb-r{display:flex;align-items:center;gap:6px}.sb-r svg{fill:currentColor}
.bat{width:25px;height:12px;border:1.3px solid currentColor;border-radius:4px;padding:1.5px;position:relative;opacity:.95}.bat::after{content:"";position:absolute;right:-3.5px;top:3.5px;width:1.8px;height:4px;border-radius:0 1px 1px 0;background:currentColor}.bat i{display:block;height:100%;width:78%;background:currentColor;border-radius:1.5px}
.island{position:absolute;z-index:61;top:11px;left:50%;width:120px;height:34px;margin-left:-60px;border-radius:20px;background:#000;transition:width .45s cubic-bezier(.3,1.4,.5,1),margin .45s cubic-bezier(.3,1.4,.5,1),height .3s}
.island.wide{width:180px;margin-left:-90px}
.dev.android .island{width:14px;height:14px;margin-left:-7px;top:16px;border-radius:50%;box-shadow:0 0 0 2px #111}
.dev.android .sb{padding:2px 22px 0 26px;font-size:14px;font-weight:500}
/* lock */
.lock{position:absolute;inset:0;z-index:40;color:#fff;text-align:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}
.lock::before{content:"";position:absolute;inset:0;background:inherit;backdrop-filter:blur(0px)}
.torch-glow{position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 30%,rgba(255,255,240,.55),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.lock.lit .torch-glow{opacity:1}
.lk-ico{margin:62px auto 0;display:block;opacity:.95}
.lk-date{margin:12px 0 0;font-size:19px;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.12)}
.lk-time{margin:-2px 0 0;font-size:96px;line-height:1.02;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums;text-shadow:0 2px 24px rgba(0,0,0,.1)}
.dev.android .lk-time{font-size:118px;font-weight:300;line-height:.9;white-space:pre-line;letter-spacing:-.02em;margin-top:8px}
.dev.android .lk-ico{display:none}.dev.android .lk-date{margin-top:84px;font-size:16px;font-weight:500}
.lk-card{margin:22px 20px 0;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:22px;background:rgba(255,255,255,.22);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.25)}
.lk-card img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.lk-card b{display:block;font-size:14px;font-weight:600}.lk-card span{display:block;font-size:13px;opacity:.9;margin-top:2px;line-height:1.3}
.lk-hint{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;font-weight:500;color:#fff;min-height:44px;padding:4px 12px;opacity:.95}
.lk-hint svg{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.lk-round{position:absolute;bottom:64px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(20,20,30,.32);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .2s,transform .2s}
.lk-round:active{transform:scale(.9)}.lk-round.l{left:44px}.lk-round.r{right:44px}.lock.lit .lk-round.l{background:#fff;color:#111}
/* home */
.home{position:absolute;inset:0;z-index:10;padding:72px 22px 0;opacity:0;transform:scale(1.08);transition:opacity .45s,transform .55s cubic-bezier(.2,.9,.25,1)}
.unlocked .home{opacity:1;transform:none}
.home.dim{transform:scale(.94);opacity:.4;filter:blur(2px)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:20px;column-gap:8px}
.ic{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;min-height:44px;color:#fff}
.ic .t{width:62px;height:62px;border-radius:15px;position:relative;display:grid;place-items:center;box-shadow:0 4px 12px -4px rgba(0,0,0,.25);transition:transform .2s}
.ic:active .t{transform:scale(.9)}
.ic .t svg{width:34px;height:34px}
.ic .l{font-size:12px;font-weight:500;letter-spacing:-.005em;text-shadow:0 1px 6px rgba(0,0,0,.35);white-space:nowrap}
.ic .bd{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ff3b30;color:#fff;font-size:12.5px;font-weight:600;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.dev.android .ic .t{border-radius:50%}
.cal-ic{background:#fff;color:#111;flex-direction:column;display:flex!important;align-items:center;justify-content:center;gap:0}
.cal-ic small{font-size:10.5px;font-weight:600;color:#ff3b30;letter-spacing:.04em;margin-top:2px}.cal-ic b{font-size:28px;font-weight:400;line-height:1;letter-spacing:-.03em}
.spot{position:absolute;left:50%;bottom:126px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;height:30px;padding:0 13px;border-radius:15px;font-size:13px;font-weight:500;color:#fff;background:rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dock{position:absolute;left:12px;right:12px;bottom:14px;height:94px;border-radius:36px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:0 10px;background:rgba(255,255,255,.24);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);border:1px solid rgba(255,255,255,.22)}
.dock .ic .l{display:none}
.dev.android .dock{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* app layer */
.app{position:absolute;inset:0;z-index:30;display:none;overflow:hidden;border-radius:inherit;transform-origin:50% 50%;
 --bg:#fff;--fg:#0f1115;--mut:#6b7280;--line:#e7e8ec;--card:#f3f4f6;--acc:#0a84ff;background:var(--bg);color:var(--fg)}
[data-theme=dark] .app{--bg:#0d0e12;--fg:#f2f3f5;--mut:#9aa0aa;--line:#24262d;--card:#1a1c22}
.app.on{display:flex;flex-direction:column}
.app .body{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:34px}
.app .body::-webkit-scrollbar{display:none}
.hbar{position:absolute;z-index:70;left:50%;bottom:0;width:180px;height:30px;margin-left:-90px;display:grid;place-items:center;touch-action:none;opacity:0;pointer-events:none;transition:opacity .3s}
.hbar i{width:136px;height:5px;border-radius:3px;background:#fff;opacity:.92;transition:background .3s}
.unlocked .hbar{opacity:1;pointer-events:auto}
.hbar.dk i{background:#111}
.toast{position:absolute;z-index:80;left:50%;top:62px;transform:translate(-50%,-14px);opacity:0;pointer-events:none;background:rgba(20,22,28,.9);color:#fff;font-size:13px;font-weight:500;padding:9px 14px;border-radius:14px;white-space:nowrap;transition:.3s}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* shared app chrome */
.top{flex:none;padding:54px 18px 10px;display:flex;align-items:center;gap:10px;min-height:98px}
.top h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big{font-size:32px!important;letter-spacing:-.03em!important}
.back{width:44px;height:44px;margin-left:-12px;display:grid;place-items:center;border-radius:50%;color:var(--acc)}
.back svg{width:24px;height:24px}
.pad{padding:0 18px}
.sec{margin:22px 0 10px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:16px;background:var(--card);font-size:13px;font-weight:500;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.hs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 18px;scroll-snap-type:x mandatory;scroll-padding-inline:18px}.hs::-webkit-scrollbar{display:none}.hs>*{scroll-snap-align:start;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:44px;padding:0 16px;border-radius:12px;font-size:14px;font-weight:600;background:var(--card);color:var(--fg)}
.btn.pri{background:var(--acc);color:#fff}
.row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .ti{flex:1;min-width:0}.row .ti b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .ti span{display:block;font-size:13px;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{border-radius:50%;object-fit:cover;flex:none}
.art{position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.art::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 15%,rgba(255,255,255,.35),transparent 60%)}
.art b{position:relative;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.art em{position:absolute;right:10px;top:8px;font-style:normal;font-size:11px;font-weight:600;opacity:.85}
/* controls */
.ctl{display:flex;flex-direction:column;align-items:flex-start;gap:16px;color:var(--ctl-fg)}
.ctl-head b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em}
.ctl-head span{display:block;margin-top:4px;font-size:14px;color:var(--ctl-mut)}
.seg,.tri,.edi{background:var(--ctl-bg);border:1px solid var(--ctl-bd);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 6px 20px -10px rgba(30,40,70,.3)}
.seg{display:flex;padding:4px;border-radius:24px}
.seg button{height:38px;padding:0 18px;border-radius:19px;font-size:14px;font-weight:600;color:var(--ctl-mut);transition:background .25s,color .25s;min-width:44px}
.seg button.on{background:var(--ctl-on);color:var(--ctl-onfg)}
.tri{display:flex;padding:4px;border-radius:24px;gap:2px}
.tri button{width:44px;height:38px;border-radius:19px;display:grid;place-items:center;color:var(--ctl-mut);transition:.25s}
.tri button.on{background:var(--ctl-on);color:var(--ctl-onfg)}
.edi{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 8px;border-radius:24px}
.sw{width:42px;height:26px;border-radius:13px;background:rgba(120,120,128,.32);position:relative;transition:background .25s}
.sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.3,.5,1)}
[aria-pressed=true] .sw{background:#34c759}[aria-pressed=true] .sw i{transform:translateX(16px)}
.edi-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.edi-t b{font-size:14px;font-weight:600}.edi-t small{font-size:12px;color:var(--ctl-mut)}
@media (max-width:899px){
 .stage{flex-direction:column;justify-content:flex-start;gap:12px;padding:16px var(--g) 12px}
 .ctl{flex-direction:row;align-items:center;justify-content:center;gap:8px;width:100%}
 .ctl-head{display:none}
 .seg button{height:36px;padding:0 12px;font-size:13px}.tri button{width:40px;height:36px}
 .edi{height:44px;padding:0 10px 0 6px;gap:6px}.edi-t small{display:none}.edi-t b{font-size:13px}
 .sw{width:36px;height:22px}.sw i{width:16px;height:16px}[aria-pressed=true] .sw i{transform:translateX(14px)}
}
@media (max-width:374px){.seg button{padding:0 9px;font-size:12.5px}.tri button{width:34px}.edi-t{display:none}.edi{padding:0 6px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
.nos{position:fixed;inset:0;display:grid;place-content:center;text-align:center;padding:var(--g);background:#eef3fa}

/* ---------- app styles ---------- */
.mut{color:var(--mut)}
.lnk{color:var(--acc);font-weight:500}
.sq{width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.srch{height:36px;border-radius:11px;background:var(--card);color:var(--mut);display:flex;align-items:center;padding:0 12px;font-size:15px;margin:0 0 10px}
.grp{background:var(--card);border-radius:14px;padding:0 14px}
.grp .row{border-color:var(--line)}
button.row,a.row{width:100%;text-align:left}
.msg{max-width:78%;margin:6px 0;padding:9px 13px;border-radius:18px;font-size:15px;line-height:1.35;width:fit-content;word-wrap:break-word}
.msg.in{background:var(--card);border-bottom-left-radius:6px}
.msg.out{margin-left:auto;background:var(--acc);color:#fff;border-bottom-right-radius:6px}
.typing i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--mut);animation:dot 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.3;transform:translateY(-3px)}}
/* profile */
.pf-top{min-height:92px}.pf-top h1{font-size:21px}.pf-ic svg{width:26px;height:26px}.pf-ic svg *{stroke:var(--fg)}.pf-ic svg circle:last-child{fill:var(--fg)}
.pf-head{display:flex;align-items:center;gap:22px}
.ring{padding:3px;border-radius:50%;background:conic-gradient(#ffb347,#ff4f7b,#a14bff,#ffb347)}.ring img{border:3px solid var(--bg)}
.pf-st{flex:1;display:flex;justify-content:space-around;text-align:center}.pf-st b{display:block;font-size:18px;font-weight:700}.pf-st span{font-size:13px;color:var(--mut)}
.pf-bio{margin-top:12px;font-size:14px;line-height:1.4}.pf-bio b{display:block;font-size:15px}.pf-bio p{margin:4px 0}
.pf-btn{display:flex;gap:6px;margin-top:12px}.pf-btn .btn{flex:1;height:36px;padding:0 8px;font-size:14px;border-radius:9px}
.hl{margin-top:16px;gap:14px}.hlc{display:flex;flex-direction:column;align-items:center;gap:5px;width:68px}.hlc span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--line)}.hlc small{font-size:12px;white-space:nowrap}
.pf-tabs{display:flex;margin-top:14px;border-top:1px solid var(--line)}.pf-tabs span{flex:1;display:grid;place-items:center;height:44px;color:var(--mut)}.pf-tabs .on{color:var(--fg);box-shadow:inset 0 -1.5px 0 var(--fg)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.pf-grid .art{aspect-ratio:1;padding:9px}.pf-grid .art em{font-size:9.5px;left:9px;right:auto;top:8px}
/* network */
.nw{--bg:#f4f2ee;--card:#fff;--acc:#0a66c2}[data-theme=dark] .nw{--bg:#000;--card:#1b1f23;--acc:#71b7fb}
.nw-bar{flex:none;padding:52px 14px 8px;background:var(--card)}.nw-s{display:flex;align-items:center;gap:8px;height:36px;border-radius:6px;background:var(--bg);padding:0 10px;color:var(--mut);font-size:14px}.nw-s svg{width:20px;height:20px}.nw-s svg *{fill:var(--acc);stroke:var(--acc)}
.nw-cover{height:86px;background:radial-gradient(90% 120% at 80% 0%,#ffd7b8,transparent 60%),linear-gradient(120deg,#0a66c2,#7b5cff)}
.nw-me{background:var(--card);padding-bottom:16px}.nw-me img{margin-top:-46px;border:4px solid var(--card)}.nw-me h2{margin:8px 0 2px;font-size:22px;letter-spacing:-.02em}.nw-me p{margin:0 0 4px;font-size:14.5px;line-height:1.35}.nw-me .mut{font-size:13px}
.nw-btn{display:flex;gap:8px;margin-top:12px}.nw-btn .btn{height:34px;border-radius:17px;font-size:14px;padding:0 14px}.nw-btn .btn:not(.pri){background:transparent;box-shadow:inset 0 0 0 1.5px var(--acc);color:var(--acc)}
.card{background:var(--card);margin-top:8px;padding-top:14px;padding-bottom:14px}.card h3{margin:0 0 10px;font-size:18px}.card p{margin:0;font-size:14.5px;line-height:1.5}
.nw-f{width:150px;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}.nw-f span{height:70px;display:grid;place-items:center;color:#fff;font-size:28px;font-weight:800}.nw-f b{padding:8px 10px 0;font-size:14px}.nw-f small{padding:2px 10px 10px;color:var(--mut);font-size:12.5px}
/* screens */
.sc{--bg:#000;--fg:#fff;--mut:#b3b3b3;--card:#222}
.sc-top{flex:none;display:flex;align-items:center;gap:10px;padding:52px 16px 8px;min-height:96px}.sc-logo{font-weight:900;color:#e50914;letter-spacing:.06em;font-size:22px;flex:1}.sc-top .back{color:#fff}.sc-me{font-size:13px;color:var(--mut)}
.sc-who{text-align:center;padding:24px 18px}.sc-who h2{margin:0;font-size:26px;letter-spacing:-.02em}.sc-who p{margin:6px 0 26px;color:var(--mut);font-size:14px}
.sc-grid{display:grid;grid-template-columns:repeat(2,112px);justify-content:center;gap:22px 28px}.sc-p{display:flex;flex-direction:column;align-items:center;gap:8px}.sc-p span{width:112px;height:112px;border-radius:10px;display:grid;place-items:center;transition:box-shadow .2s}.sc-p:hover span,.sc-p:focus-visible span{box-shadow:0 0 0 3px #fff}.sc-p b{font-size:14px;font-weight:500;color:#ccc}
.sc-mng{margin-top:30px;height:44px;padding:0 18px;border:1px solid #777;color:#aaa;font-size:13px;letter-spacing:.12em}
.sc-hero{margin:4px 16px 8px;border-radius:14px;min-height:300px;display:flex;align-items:flex-end;position:relative;overflow:hidden}.sc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.75))}.sc-hero>div{position:relative;padding:16px}.sc-hero small{font-size:11px;letter-spacing:.14em;font-weight:600}.sc-hero h2{margin:4px 0;font-size:34px;font-weight:900;letter-spacing:-.03em}.sc-hero p{margin:0 0 12px;font-size:13.5px;line-height:1.4;opacity:.92}.sc-hero div div{display:flex;gap:8px}
.sc-play{background:#fff;color:#000;border-radius:6px}.sc-more{background:rgba(110,110,110,.7);color:#fff;border-radius:6px}
.a-screens h4{margin:18px 16px 8px;font-size:16px;font-weight:700}.a-screens .hs{padding:0 16px;gap:8px;scroll-padding-inline:16px}
.pos{width:108px;height:156px;border-radius:6px;padding:10px}
/* chats */
.ch-f{margin:2px 0 6px}.ch-f .chip{height:30px}.chip.on{background:color-mix(in srgb,#25d366 22%,var(--bg));color:color-mix(in srgb,#128c4b 80%,var(--fg))}
.ch-av{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff;background:linear-gradient(140deg,#8ec5ff,#4b7bec)}
.ch-r{min-height:72px}.ch-m{display:flex;flex-direction:column;align-items:flex-end;gap:6px;align-self:flex-start;padding-top:6px}.ch-m small{font-size:12px;color:var(--mut)}.ch-m i{font-style:normal;min-width:20px;height:20px;border-radius:10px;background:#25d366;color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;padding:0 6px}
.ch-t{min-height:96px;border-bottom:1px solid var(--line)}.ch-t h1{font-size:16px;display:flex;flex-direction:column}.ch-t small{font-size:12px;font-weight:400;color:var(--mut)}.ch-t .ch-av{width:36px;height:36px;font-size:15px}
.ch-body{padding:12px 14px 12px;background:radial-gradient(circle at 20% 20%,color-mix(in srgb,#25d366 6%,transparent),transparent 50%)}.ch .msg.out{background:#1fae55}
.ch-in,.ak-in{flex:none;display:flex;gap:8px;padding:8px 12px 30px;border-top:1px solid var(--line);background:var(--bg)}
.ch-in input,.ak-in input{flex:1;min-width:0;height:44px;border-radius:22px;border:1px solid var(--line);background:var(--card);color:var(--fg);padding:0 16px;font:inherit;font-size:16px;outline:none}
.ch-send,.ak-go{width:44px;height:44px;border-radius:50%;background:#1fae55;display:grid;place-items:center;flex:none}.ak-go{background:var(--fg);color:var(--bg)}
/* maps */
.mp{--m-land:#eef0e6;--m-water:#a9d4f5;--m-park:#cfe8c4;--m-road:#fff;--m-road2:#ffe9a8;--m-lbl:#2b2f36}
[data-theme=dark] .mp{--m-land:#1d232b;--m-water:#1b3a57;--m-park:#22382a;--m-road:#36404d;--m-road2:#5a4a24;--m-lbl:#e6e9ee}
.mp-map{position:absolute;inset:0}.mp-map svg{width:100%;height:100%;display:block}.pin{cursor:pointer;transition:transform .2s}.pin:hover path{filter:brightness(1.1)}
.mp-q{position:absolute;left:14px;right:14px;top:54px;height:44px;border-radius:14px;background:var(--bg);box-shadow:0 4px 16px rgba(0,0,0,.14);display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--mut);font-size:15px}
.mp-sheet{position:absolute;left:0;right:0;bottom:0;max-height:62%;overflow:auto;background:var(--bg);border-radius:22px 22px 0 0;padding:8px 18px 34px;box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.grab{display:block;width:38px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.mp-sheet h2{margin:0;font-size:22px;letter-spacing:-.02em}.mp-sheet>p{font-size:14px;line-height:1.45;margin:8px 0 12px}.mp-sheet .mut{font-size:13px}
.mp-h{display:flex;align-items:flex-start;justify-content:space-between}.x{width:44px;height:44px;margin:-6px -10px 0 0;border-radius:50%;color:var(--mut);font-size:16px}
.mp-list .row{border-color:var(--line)}.go{font-size:13px;font-weight:600;color:var(--acc);padding:6px 12px;border-radius:14px;background:var(--card)}
/* calendar */
.cl .top h1{color:#ff3b30}.cl-add{color:#ff3b30;font-size:28px;font-weight:300;margin:0 -12px 0 0}
.cl-dw,.cl-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.cl-dw span{font-size:12px;font-weight:600;color:var(--mut);padding-bottom:6px}
.cl-g button,.cl-g span{height:44px;font-size:17px;display:grid;place-items:center;border-radius:50%;width:44px;margin:0 auto}
.cl-g .td{color:#ff3b30;font-weight:700}.cl-g .sel{background:var(--fg);color:var(--bg)}.cl-g .td.sel{background:#ff3b30;color:#fff}
.cl-h{margin:18px 0 8px;font-size:16px;padding-top:14px;border-top:1px solid var(--line)}
.cl-e{display:flex;gap:12px;align-items:stretch;padding:8px 0}.cl-e time{width:46px;font-size:13px;color:var(--mut);padding-top:9px;font-variant-numeric:tabular-nums}.cl-e div{flex:1;border-radius:10px;padding:9px 12px;background:color-mix(in srgb,var(--c) 14%,var(--bg));box-shadow:inset 3px 0 0 var(--c)}.cl-e b{display:block;font-size:14.5px}.cl-e span{font-size:12.5px;color:var(--mut)}
.cl-n{font-size:13.5px;margin:12px 0}
/* notes */
.nt{--acc:#d9a400}[data-theme=dark] .nt{--acc:#ffd23f}
.nt .row .ti span em{font-style:normal;color:var(--fg);margin-right:4px}.nt-c{text-align:center;font-size:12.5px;margin:18px 0}
.nt-done{color:var(--acc);font-weight:600;font-size:16px}.nt-v small{font-size:12.5px}.nt-v h2{margin:6px 0 12px;font-size:26px;letter-spacing:-.02em}.nt-v p{font-size:16px;line-height:1.6;margin:0}
.nt .back{color:var(--acc)}
/* journal */
.jr-logo{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:26px;letter-spacing:-.03em}
.jr-t{gap:8px;padding-bottom:6px}.jr-t .chip.on{background:var(--fg);color:var(--bg)}
.jr-p{display:block;width:100%;text-align:left;padding:16px 0;border-bottom:1px solid var(--line)}.jr-a{display:flex;align-items:center;gap:8px;font-size:12.5px}.jr-h{display:block;font-size:18px;line-height:1.25;margin:8px 0 4px;letter-spacing:-.015em}.jr-d{display:block;font-size:14px;line-height:1.4;color:var(--mut)}.jr-m{display:block;font-size:12.5px;margin-top:8px}
.jr-v h2{font-family:Georgia,"Times New Roman",serif;font-size:28px;line-height:1.15;margin:10px 0 14px;letter-spacing:-.02em}.jr-tag{font-size:12px;font-weight:600;color:#1a8917;text-transform:uppercase;letter-spacing:.06em}.jr-by{display:flex;gap:10px;align-items:center;margin-bottom:14px}.jr-by b{display:block;font-size:14px}.jr-by span{font-size:12.5px}
.jr-v p{font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.6;margin:0 0 14px}.jr-v .jr-dek{color:var(--mut)}
/* tunes */
.tn{--bg:#121212;--fg:#fff;--mut:#a7a7a7;--card:#232323;--acc:#1ed760}
.tn .top{background:linear-gradient(180deg,#3a2a6b,transparent)}
.tn-q{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tn-c{display:flex;align-items:center;gap:8px;height:48px;border-radius:6px;background:#2a2a2a;font-size:13px;font-weight:700;overflow:hidden;text-align:left}.tn-c span{width:48px;height:48px;flex:none}
.tn-hero{display:flex;gap:14px;align-items:flex-end;margin:22px 0 10px}.tn-cv{width:120px;height:120px;flex:none;border-radius:6px;display:flex;align-items:flex-end;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.5)}.tn-cv b{font-size:19px;line-height:1.05;font-weight:800}.tn-hero small{font-size:11px;font-weight:700;letter-spacing:.08em}.tn-hero h2{margin:4px 0;font-size:24px;letter-spacing:-.02em}.tn-hero .mut{font-size:12.5px}
.tn-act{display:flex;align-items:center;justify-content:space-between;margin:6px 0 4px}.tn-act .mut{font-size:12.5px}.tn-pp{width:52px;height:52px;border-radius:50%;background:var(--acc);color:#000;display:grid;place-items:center}
.tn-r{border:0}.tn-r.on b{color:var(--acc)}.tn-eq{display:none;gap:2px;align-items:flex-end;height:14px}.tn-r.on .tn-eq{display:flex}.tn-eq i{width:3px;background:var(--acc);animation:eq .8s ease-in-out infinite}.tn-eq i:nth-child(2){animation-delay:.2s}.tn-eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.tn-mini{position:absolute;left:8px;right:8px;bottom:34px;height:56px;border-radius:8px;background:#3d2a5c;display:flex;align-items:center;gap:10px;padding:0 8px;z-index:2}.tn-mini b{display:block;font-size:13.5px}.tn-mini span{font-size:12px;color:#ddd}.tn .body{padding-bottom:110px}
/* ask */
.ak{--acc:#10a37f}.ak-t h1 .mut{font-weight:500;font-size:15px}
.ak-hi{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 6px 18px}.ak-o{width:56px;height:56px;border-radius:50%;background:var(--fg);display:grid;place-items:center;margin-bottom:12px}.ak-o svg{width:30px;height:30px}.ak-o svg path{fill:var(--bg)}.ak-hi p{margin:0;font-size:15.5px;line-height:1.45;max-width:280px}
.ak-s{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.ak-s .chip{height:auto;min-height:40px;padding:9px 14px;border-radius:18px;text-align:left;white-space:normal;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.ak .msg.out{background:var(--card);color:var(--fg)}.ak .msg.in{background:transparent;padding-left:0;max-width:100%}
/* mail */
.ml-t{min-height:94px}.ml-t h1{font-size:17px;text-align:center}.ml-x{color:var(--acc);font-size:16px;min-height:44px}.ml-send{width:36px;height:36px;border-radius:50%;background:var(--acc);display:grid;place-items:center}
.ml-b{padding:0 18px 12px}.ml-f{display:flex;align-items:center;gap:6px;min-height:46px;border-bottom:1px solid var(--line);font-size:15.5px}.ml-f span{color:var(--mut)}.ml-f input{flex:1;min-width:0;border:0;background:none;color:var(--fg);font:inherit;font-size:16px;outline:none}.ml-to{font-weight:500;background:var(--card);padding:3px 9px;border-radius:12px;font-size:14.5px}
.ml-b textarea{width:100%;min-height:150px;border:0;background:none;color:var(--fg);font:inherit;font-size:16px;line-height:1.5;padding:12px 0;resize:none;outline:none}
.kb{flex:none;background:#d1d4db;padding:8px 3px 34px;display:flex;flex-direction:column;gap:10px}[data-theme=dark] .kb{background:#2b2b2f}
.kb div{display:flex;justify-content:center;gap:5px}.kb button{width:31px;height:42px;border-radius:6px;background:#fff;color:#111;font-size:19px;box-shadow:0 1px 0 rgba(0,0,0,.3)}[data-theme=dark] .kb button{background:#6b6b70;color:#fff}
.kb .fn{background:#aeb3be;font-size:15px;width:42px}[data-theme=dark] .kb .fn{background:#46464b}.kb .w{width:76px}.kb .sp{flex:1;max-width:180px;font-size:15px}.kb .ret{background:var(--acc)!important;color:#fff!important}
/* code */
.cd{--acc:#2f81f7}.cd-l svg{width:28px;height:28px}.cd-l svg path:first-child{stroke:var(--fg)}.cd-t .btn{height:34px;font-size:13px}
.cd-me{display:flex;align-items:center;gap:14px}.cd-me h2{margin:0;font-size:21px}.cd-bio{font-size:15px;line-height:1.45;margin:12px 0}.cd-f{width:100%;height:38px;box-shadow:inset 0 0 0 1px var(--line);border-radius:8px}
.cd-g{display:flex;gap:3px;overflow:hidden}.cd-g i{display:flex;flex-direction:column;gap:3px}.cd-g b{width:13px;height:13px;border-radius:3px;background:var(--card)}.cd-g .c1{background:#9be9a8}.cd-g .c2{background:#40c463}.cd-g .c3{background:#30a14e}.cd-g .c4{background:#216e39}
[data-theme=dark] .cd-g .c1{background:#0e4429}[data-theme=dark] .cd-g .c2{background:#006d32}[data-theme=dark] .cd-g .c3{background:#26a641}[data-theme=dark] .cd-g .c4{background:#39d353}
.cd-r{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px}.cd-r b{color:var(--acc);font-size:15px;display:inline-flex;gap:6px;align-items:center}.cd-r .pub{float:right;font-size:11.5px;border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--mut)}.cd-r p{margin:6px 0;font-size:13.5px;color:var(--mut);line-height:1.4}.cd-r small{font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:6px}.cd-r small i{width:11px;height:11px;border-radius:50%}.cd-r small span{margin-left:10px}
.a-code .chips{padding-bottom:10px}
/* contact */
.ct-h{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:18px}.ct-h h2{margin:12px 0 2px;font-size:26px;letter-spacing:-.02em}.ct-e{color:var(--acc);font-size:16px}
.ct-q{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.ct-q a{background:var(--card);border-radius:12px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;color:var(--acc)}.ct-q span{width:26px;height:26px;border-radius:50%;background:var(--acc);display:grid;place-items:center}.ct-q svg{width:18px;height:18px}
.ct-b .ti span{font-size:13px;color:var(--fg)}.acc{color:var(--acc)!important;font-weight:500!important}.btn.sm{height:34px;font-size:13px;background:var(--bg)}
/* browser */
.br-h h2{margin:58px 0 12px;font-size:20px}.br-h h2+.br-c{margin-top:0}.br-h h2:not(:first-child){margin-top:24px}
.br-g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px}.br-g a{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}.br-g span{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}.br-g small{font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-c{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px;margin-bottom:8px}.br-c span{width:48px;height:48px;border-radius:10px;background:#0f9b84;color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}.br-c b{display:block;font-size:15px}.br-c small{font-size:12.5px;color:var(--mut)}
.br .body{padding-bottom:100px}.br-bar{position:absolute;left:0;right:0;bottom:0;padding:10px 14px 36px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.br-url{height:46px;border-radius:14px;background:var(--card);display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
/* settings */
.stg{--bg:#f2f2f7;--card:#fff}[data-theme=dark] .stg{--bg:#000;--card:#1c1c1e}
.stg .sw{flex:none}.stg .sw.on{background:#34c759}.stg .sw.on i{transform:translateX(16px)}
.stg-w{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stg-w button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px}.stg-w span{width:100%;aspect-ratio:9/16;border-radius:10px;box-shadow:0 0 0 1px var(--line)}.stg-w .on span{box-shadow:0 0 0 2.5px var(--acc)}
.kv{min-height:46px}.kv .mut{font-size:14.5px}.stg-l{width:100%;margin:22px 0 10px;background:var(--card);color:#ff3b30;height:46px}
/* gallery */
.gl-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.gl-g>*{aspect-ratio:1}.gl-g .art{padding:8px}.gl-me{overflow:hidden}.gl-me img{width:100%!important;height:100%!important;border-radius:0}
.gl-c{text-align:center;font-size:13px;margin:14px 0}
.gl.dark{--bg:#000;--fg:#fff}.gl-v{display:flex;flex-direction:column;align-items:center;justify-content:center}.gl-v img{width:100%;height:auto}.gl-v p{font-size:14px;color:#aaa}
.gl.dark .back{color:#fff}
.ct-q span svg [stroke="#1f6ff0"]{stroke:#fff}.ct-q span svg path[fill="#1f6ff0"]{fill:#fff}