*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0b1220;font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;color:#1d2330;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:inherit}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
img{display:block}

/* ---------- themes ---------- */
body{--c1:#1f4f93;--c2:#7fb0de;--c3:#d6e8f4;--sun1:rgba(255,246,222,.95);--sun2:rgba(255,236,200,0);--h1a:#2d5f9c;--h1b:#173b6c;--h2a:#5b8fc6;--h2b:#2d5f9c;--h3a:#9fc3e4;--h3b:#6c9bcd;--cloud:rgba(255,255,255,.35);--river:rgba(214,234,248,.55);
  --ink:#ffffff;--ink-sh:0 1px 3px rgba(20,40,80,.45);--acc:#2f6fd0;--bar:rgba(255,255,255,.5);--bar-ink:rgba(30,34,44,.86);--glass:rgba(255,255,255,.55);--glass-ink:rgba(28,36,54,.92);--glass-br:rgba(0,0,0,.08);--line:rgba(255,255,255,.22);
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5v17.2c0 .5.6.8 1 .4l4-3.7 2.7 5.8c.2.4.6.5 1 .4l2-.9c.4-.2.5-.6.4-1l-2.7-5.8 5.4-.3c.5 0 .8-.6.4-1L6 2c-.4-.3-1 0-1 .5z' fill='%232f6fd0' stroke='white' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2,auto;
  --cur-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='8' fill='%232f6fd0' fill-opacity='.85' stroke='white' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='13' r='2.4' fill='white'/%3E%3C/svg%3E") 13 13,pointer;
  cursor:var(--cur)}
body[data-theme="dusk"]{--c1:#2a2d66;--c2:#9a6f9f;--c3:#f0c3c4;--sun1:rgba(255,214,190,.95);--sun2:rgba(255,190,170,0);--h1a:#3b2f63;--h1b:#1d1838;--h2a:#6a4f86;--h2b:#3b2f63;--h3a:#b48aa8;--h3b:#80628f;--river:rgba(250,210,210,.5);--acc:#7b4fd1;
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5v17.2c0 .5.6.8 1 .4l4-3.7 2.7 5.8c.2.4.6.5 1 .4l2-.9c.4-.2.5-.6.4-1l-2.7-5.8 5.4-.3c.5 0 .8-.6.4-1L6 2c-.4-.3-1 0-1 .5z' fill='%237b4fd1' stroke='white' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2,auto;
  --cur-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='8' fill='%237b4fd1' fill-opacity='.85' stroke='white' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='13' r='2.4' fill='white'/%3E%3C/svg%3E") 13 13,pointer}
body[data-theme="green"]{--c1:#4f8a3a;--c2:#a9cf8a;--c3:#eef4dc;--sun1:rgba(255,250,215,.95);--sun2:rgba(255,245,200,0);--h1a:#3f7a2e;--h1b:#24501a;--h2a:#6ea24a;--h2b:#3f7a2e;--h3a:#b4d491;--h3b:#86b665;--river:rgba(225,240,210,.6);--acc:#3d8a2a;
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5v17.2c0 .5.6.8 1 .4l4-3.7 2.7 5.8c.2.4.6.5 1 .4l2-.9c.4-.2.5-.6.4-1l-2.7-5.8 5.4-.3c.5 0 .8-.6.4-1L6 2c-.4-.3-1 0-1 .5z' fill='%233d8a2a' stroke='white' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2,auto;
  --cur-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='8' fill='%233d8a2a' fill-opacity='.85' stroke='white' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='13' r='2.4' fill='white'/%3E%3C/svg%3E") 13 13,pointer}
body[data-theme="black"]{--c1:#050506;--c2:#16171b;--c3:#2a2b31;--sun1:rgba(200,205,220,.35);--sun2:rgba(200,205,220,0);--h1a:#141418;--h1b:#060607;--h2a:#1d1e23;--h2b:#101013;--h3a:#2b2c33;--h3b:#1a1b20;--cloud:rgba(255,255,255,.06);--river:rgba(255,255,255,.12);--acc:#e8e8ea;
  --bar:rgba(20,20,24,.55);--bar-ink:rgba(240,240,244,.9);--glass:rgba(30,30,36,.6);--glass-ink:rgba(240,240,244,.92);--glass-br:rgba(255,255,255,.1);--line:rgba(255,255,255,.08);
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5v17.2c0 .5.6.8 1 .4l4-3.7 2.7 5.8c.2.4.6.5 1 .4l2-.9c.4-.2.5-.6.4-1l-2.7-5.8 5.4-.3c.5 0 .8-.6.4-1L6 2c-.4-.3-1 0-1 .5z' fill='%23111' stroke='white' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2,auto;
  --cur-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='8' fill='%23111' fill-opacity='.85' stroke='white' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='13' r='2.4' fill='white'/%3E%3C/svg%3E") 13 13,pointer}
a,button,.node,[role=button]{cursor:var(--cur-h)}

/* ---------- wallpaper ---------- */
#wall{position:fixed;inset:0;z-index:0}
#wall .land{width:100%;height:100%;display:block}
.s1{stop-color:var(--c1)}.s2{stop-color:var(--c2)}.s3{stop-color:var(--c3)}
.sun1{stop-color:var(--sun1)}.sun2{stop-color:var(--sun2)}
.h1a{stop-color:var(--h1a)}.h1b{stop-color:var(--h1b)}.h2a{stop-color:var(--h2a)}.h2b{stop-color:var(--h2b)}.h3a{stop-color:var(--h3a)}.h3b{stop-color:var(--h3b)}
.clouds ellipse{fill:var(--cloud)}
.clouds{animation:drift 60s linear infinite alternate}
@keyframes drift{to{transform:translateX(60px)}}
.river{stroke:var(--river)}
stop{transition:stop-color 1s ease}
#wall .grain{position:absolute;inset:0;pointer-events:none;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}

/* ---------- brand orb (our mark) ---------- */
.orb{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,#ffd9a8,#ff8f6b,#c86bd6,#6d8cff,#7fe0ff,#ffd9a8);filter:saturate(1.05)}
.mono{position:relative;font-family:Newsreader,Georgia,serif;font-style:italic;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.25);line-height:1}

/* ---------- lock screen ---------- */
#lock{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:9vh;color:#fff;text-align:center;
  background:linear-gradient(180deg,rgba(10,25,55,.28),rgba(10,25,55,.05) 45%,rgba(10,25,55,.35));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .6s}
body.unlocked #lock{opacity:0;transform:translateY(-3%);visibility:hidden;pointer-events:none}
.lk-date{font-size:20px;font-weight:600;letter-spacing:.01em;opacity:.92;text-shadow:0 1px 12px rgba(10,30,60,.3)}
.lk-time{font-family:Antonio,"Arial Narrow",sans-serif;font-weight:300;font-size:clamp(130px,17vw,220px);line-height:.92;letter-spacing:-.03em;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;transform:scaleY(1.08);transform-origin:50% 0;margin-top:4px}
.lk-mark{position:relative;width:64px;height:64px;margin-top:5vh;display:grid;place-items:center;border-radius:50%;box-shadow:0 10px 30px rgba(10,30,70,.3)}
.lk-mark .orb{animation:spin 14s linear infinite}
.lk-mark .mono{font-size:34px}
@keyframes spin{to{transform:rotate(360deg)}}
.lk-name{margin-top:16px;font-size:22px;font-weight:700;letter-spacing:-.01em;text-shadow:0 1px 16px rgba(20,40,70,.35)}
.lk-role{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:4px}
.lk-prog{margin-top:22px;width:160px;height:5px;border-radius:9px;background:rgba(255,255,255,.28);overflow:hidden;transition:opacity .3s}
.lk-prog i{display:block;height:100%;width:0;background:#fff;border-radius:9px;transition:width .25s ease}
#lock.ready .lk-prog{opacity:0;height:0;margin-top:0}
.lk-cta{margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;font-weight:600;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,background .2s}
.lk-cta svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
#lock.ready .lk-cta{opacity:1;transform:none;animation:pulse 2.4s ease-in-out 1s infinite}
.lk-cta:hover{background:rgba(255,255,255,.32)}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,.08)}}
.lk-links{position:absolute;bottom:34px;left:0;right:0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.lk-links a{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:lowercase;text-decoration:none;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s}
.lk-links a:hover{background:rgba(255,255,255,.3)}
.lk-slide{display:none}

/* ---------- menubar ---------- */
body.locked #menubar,body.locked #mstatus,body.locked .stuck{opacity:0;pointer-events:none}
#menubar,#mstatus{transition:opacity .5s ease}
#menubar{position:fixed;top:0;left:0;right:0;height:38px;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:0 14px;gap:12px;white-space:nowrap;
  background:var(--bar);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--glass-br);font-size:12px;letter-spacing:.03em;color:var(--bar-ink);transition:background .6s,color .6s}
.mb-left,.mb-right{display:flex;align-items:center;gap:2px}
.mb-right{gap:12px}
.mb-menu{position:relative;display:flex;align-items:center}
.mb-logo{position:relative;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-right:6px;transition:transform .2s}
.mb-logo .mono{font-size:13px}
.mb-logo:hover{transform:rotate(-12deg) scale(1.08)}
.mb-trig{padding:4px 9px;border-radius:6px;font-size:12px;transition:background .15s}
.mb-trig.strong{font-weight:700}
.mb-menu.open .mb-trig,.mb-trig:hover{background:rgba(0,0,0,.08)}
body[data-theme="black"] .mb-menu.open .mb-trig,body[data-theme="black"] .mb-trig:hover{background:rgba(255,255,255,.1)}
.mb-drop{position:absolute;top:30px;left:0;min-width:210px;padding:5px;border-radius:10px;background:rgba(246,247,250,.86);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(0,0,0,.1);box-shadow:0 14px 40px rgba(20,30,50,.25);display:none;color:#1d2330}
.mb-menu.open .mb-drop{display:block;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}}
.mb-drop button,.mb-drop a{display:flex;justify-content:space-between;width:100%;padding:6px 10px;border-radius:6px;font-size:13px;text-align:left;text-decoration:none;letter-spacing:0}
.mb-drop button:hover,.mb-drop a:hover{background:var(--acc);color:#fff}
.mb-drop span{opacity:.55}
.mb-sep{height:1px;background:rgba(0,0,0,.1);margin:4px 6px}
.mb-ico{display:grid;place-items:center;width:20px;height:20px;opacity:.75;transition:opacity .15s}
.mb-ico:hover{opacity:1}
.mb-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
#mbDate,#mbClock{font-variant-numeric:tabular-nums}
#mbClock{font-weight:700}

/* ---------- desktop ---------- */
#desk{position:fixed;inset:0;z-index:1;opacity:0;transform:scale(1.03);transition:opacity .7s ease .1s,transform .9s cubic-bezier(.2,.7,.2,1) .1s}
body.unlocked #desk{opacity:1;transform:none}
.bp{position:absolute;inset:0;pointer-events:none}
.bp .h,.bp .v{position:absolute;background:var(--line)}
.bp .h{left:0;right:0;height:1px}.bp .v{top:0;bottom:0;width:1px}
.bp .cross{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%)}
.bp .cross:before,.bp .cross:after{content:"";position:absolute;background:rgba(255,255,255,.6)}
.bp .cross:before{left:8px;top:0;width:1.5px;height:18px}.bp .cross:after{top:8px;left:0;height:1.5px;width:18px}
.bp .dots{position:absolute;width:56px;height:38px;background-image:radial-gradient(rgba(255,255,255,.55) 1.4px,transparent 1.6px);background-size:14px 13px}
.coord{position:absolute;left:3.5%;bottom:150px;font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.5;color:rgba(255,255,255,.7);letter-spacing:.06em}

/* hero */
#hero{position:absolute;top:96px;left:clamp(40px,15.4vw,222px);z-index:20;display:flex;align-items:center;gap:22px;color:var(--ink);text-shadow:var(--ink-sh);max-width:min(600px,calc(100vw - 600px))}
.portrait{position:relative;flex:0 0 auto;width:168px;height:168px;border-radius:50%;display:grid;place-items:center;overflow:hidden;box-shadow:0 18px 40px rgba(10,30,70,.28)}
.portrait .orb{inset:-20%;border-radius:0;animation:spin 18s linear infinite;background:conic-gradient(from 0deg,#ffd9a8,#ff9b73,#d977c9,#7c8dff,#86e3ff,#c8f2c2,#ffd9a8);filter:blur(10px) saturate(1.1)}
.portrait .ring{position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 40px rgba(255,255,255,.25)}
.portrait .mono{font-size:64px;letter-spacing:-.04em}
.hero-col{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.avail:before{content:"";width:7px;height:7px;border-radius:50%;background:#5ef08a;box-shadow:0 0 0 3px rgba(94,240,138,.25);animation:blink 2.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.4}}
.lede{font-size:12.5px;line-height:1.5;font-weight:500;opacity:.92;max-width:430px}
.lede a{color:inherit;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.more{margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid currentColor;opacity:.85;transition:opacity .2s,letter-spacing .3s}
.more:hover{opacity:1;letter-spacing:.13em}
.more span{display:inline-block;transition:transform .25s}.more:hover span{transform:translateX(3px)}

/* icons */
#icons{position:absolute;inset:0;pointer-events:none}
.node{position:absolute;pointer-events:auto;left:calc(clamp(40px,15.4vw,222px) + 90px + var(--x) * clamp(130px,12.4vw,178px));top:calc(40vh + var(--y) * 24vh);width:120px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
.node .tile{position:relative;width:104px;height:104px;display:grid;place-items:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .2s;filter:drop-shadow(0 8px 14px rgba(15,30,60,.28))}
.node:hover .tile{transform:translateY(-4px) scale(1.05)}
.node.sel .tile{filter:drop-shadow(0 0 0 2px rgba(255,255,255,.7)) drop-shadow(0 8px 14px rgba(15,30,60,.28))}
.node:active .tile{transform:scale(.96)}
.node .lab{font-size:12px;font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:5px;text-shadow:0 1px 3px rgba(0,0,0,.45);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s,background .2s}
.node:hover .lab,.node:focus-visible .lab,.node.sel .lab{opacity:1;transform:none}
.node.sel .lab{background:var(--acc);text-shadow:none}
.node .cap{display:none}
.icon-tile{width:100px!important;height:100px!important;border-radius:22px;background:linear-gradient(180deg,#fff,#eef1f5);border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 1px 0 #fff}
body[data-theme="black"] .icon-tile{background:linear-gradient(180deg,#2a2a30,#161619);border-color:rgba(255,255,255,.16)}
.t-folder svg{width:118px;height:98px}
.t-sticky .sn{position:absolute;width:76px;height:76px;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.sn1{background:linear-gradient(160deg,#fff6a8,#ffe36b);transform:rotate(-4deg);display:grid;place-items:center}
.sn1:after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 14px 14px;border-color:transparent transparent rgba(0,0,0,.12) transparent}
.sn1 em{font-family:Newsreader,serif;font-size:20px;color:#6a5a10}
.sn2{background:#ffc2d6;transform:rotate(7deg) translate(8px,-6px)}
.sn3{background:#bfe6ff;transform:rotate(-12deg) translate(-8px,4px)}
.t-apps{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px}
.t-apps img{width:100%;aspect-ratio:1;border-radius:7px;object-fit:cover}
.t-doc .paper{position:relative;width:78px;height:98px;background:#fff;border-radius:4px;border:1px solid rgba(0,0,0,.1);padding:12px 11px;display:flex;flex-direction:column;gap:5px;box-shadow:0 1px 0 #ddd,0 2px 0 #f4f4f4,0 3px 0 #ddd}
.t-doc .paper b{font-family:Newsreader,serif;font-style:italic;font-size:17px;color:#1d2330;line-height:1}
.t-doc .paper i{height:3px;background:#d7dce4;border-radius:2px}.t-doc .paper i.s{width:60%}
.t-doc .paper em{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:8px;color:#7a8394}
.t-bot svg,.t-sites svg{width:70px;height:70px}
.t-calc{padding:0!important;overflow:hidden}
.t-calc img{width:100%;height:100%;object-fit:cover}
.t-photos img{position:absolute;width:86px;height:58px;object-fit:cover;border:4px solid #fff;border-bottom-width:12px;border-radius:2px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.t-photos img:nth-child(1){transform:rotate(-10deg) translate(-8px,8px)}
.t-photos img:nth-child(2){transform:rotate(8deg) translate(8px,-4px)}
.t-photos img:nth-child(3){transform:rotate(-2deg) translateY(-12px)}

/* edge tab */
#edgeTab{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:30;width:30px;height:190px;background:rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.3);border-left:0;border-radius:0 6px 6px 0;color:#fff;display:grid;place-items:center;transition:width .2s,background .2s}
#edgeTab span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em}
#edgeTab:hover{width:36px;background:rgba(255,255,255,.3)}

/* rail */
#rail{position:absolute;top:50px;right:14px;width:300px;z-index:40;display:flex;flex-direction:column;gap:10px}
.widget{background:var(--glass);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--glass-br);border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(30,50,80,.14);color:var(--glass-ink);transition:background .5s,color .5s}
.w-title{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;margin-bottom:7px;font-weight:600}
.wp-card{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}
.wp-card .w-title{margin:0}
.wp-grid{display:flex;gap:8px}
.sw{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .15s}
.sw:hover{transform:scale(1.12)}
.sw.on{box-shadow:0 0 0 2px var(--acc),0 1px 4px rgba(0,0,0,.18)}
.sw[data-theme="blue"]{background:linear-gradient(135deg,#d6e8f4,#3f74b8)}
.sw[data-theme="dusk"]{background:linear-gradient(135deg,#f0c3c4,#2a2d66)}
.sw[data-theme="green"]{background:linear-gradient(135deg,#eef4dc,#4f8a3a)}
.sw[data-theme="black"]{background:linear-gradient(135deg,#3a3a3e,#060607)}
.wx-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wx-card{border-radius:11px;padding:10px 11px;background:linear-gradient(160deg,rgba(80,140,210,.95),rgba(40,90,170,.95));color:#fff;min-height:96px;display:flex;flex-direction:column}
.wx-card+.wx-card{background:linear-gradient(160deg,rgba(255,170,120,.95),rgba(220,95,110,.95))}
body[data-theme="black"] .wx-card{background:linear-gradient(160deg,#2b2c33,#17181c)}
.wx-loc{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.wx-loc svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2}
.wx-temp{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.wx-temp small{font-size:12px;font-weight:600;letter-spacing:0;opacity:.85}
.wx-foot{margin-top:auto;font-size:11px;display:flex;gap:5px;opacity:.95}
.pl{display:flex;gap:11px;background:#16181d;border-radius:11px;padding:9px;color:#fff}
.pl-art{width:96px;height:96px;border-radius:7px;overflow:hidden;flex:0 0 auto;background:#2a2d33}
.pl-art img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.pl-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.pl-meta b{font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meta small{font-size:10.5px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pl-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.18);margin-top:auto;overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;background:#fff}
.pl-ctl{display:flex;gap:6px;align-items:center;margin-top:8px}
.pl-ctl button,.pl-ctl a{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:rgba(255,255,255,.1);text-decoration:none;transition:background .15s}
.pl-ctl button:hover,.pl-ctl a:hover{background:rgba(255,255,255,.25)}
.pl-ctl #plPlay{background:#fff;color:#111}
.cnt{opacity:.8}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.st-grid a{display:flex;flex-direction:column;padding:8px 10px;border-radius:9px;text-decoration:none;background:rgba(255,255,255,.45);border:1px solid rgba(0,0,0,.06);transition:background .2s,transform .2s}
body[data-theme="black"] .st-grid a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.st-grid a:hover{background:rgba(255,255,255,.8);transform:translateY(-1px)}
.st-grid b{font-size:12.5px}.st-grid small{font-size:10px;opacity:.65}

/* dock */
#dockWrap{position:absolute;left:0;right:0;bottom:0;z-index:60;display:flex;flex-direction:column;align-items:center;padding-bottom:14px;pointer-events:none}
.dock-lbl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.35);margin-bottom:7px}
.dock{pointer-events:auto;display:flex;align-items:flex-end;gap:8px;padding:9px 14px;border-radius:18px;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%),linear-gradient(180deg,rgba(240,244,252,.55),rgba(200,210,225,.42));background-blend-mode:overlay,normal;
  border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 14px 40px rgba(20,30,50,.28),inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -6px 14px rgba(0,0,0,.1)}
body[data-theme="black"] .dock{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.di{position:relative;display:flex;flex-direction:column;align-items:center}
.di-ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(160deg,var(--a),var(--b));color:#fff;font-weight:700;font-size:15px;box-shadow:0 3px 10px rgba(30,50,80,.22),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .22s cubic-bezier(.34,1.56,.64,1);transform-origin:bottom center;will-change:transform}
.di-ico svg{width:28px;height:28px}
.di-lbl{position:absolute;bottom:64px;padding:4px 9px;border-radius:6px;background:rgba(30,32,40,.82);color:#fff;font-size:11px;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none}
.di:hover .di-lbl{opacity:1;transform:none}

/* buddy */
#buddy{position:absolute;right:28px;bottom:24px;z-index:70;display:flex;align-items:flex-end;gap:10px}
.bot{width:64px;height:78px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25));transition:transform .25s cubic-bezier(.34,1.56,.64,1);animation:bob 4s ease-in-out infinite}
.bot:hover{transform:translateY(-5px) rotate(-4deg)}
.bot svg{width:100%;height:100%}
.bot .eye{animation:wink 5s infinite;transform-origin:center 30px}
@keyframes bob{50%{translate:0 -4px}}
@keyframes wink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.bubble{width:250px;padding:14px 15px 12px;border-radius:14px 14px 4px 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(20,30,50,.28);color:#1d2330;opacity:0;transform:translateY(8px) scale(.97);transform-origin:bottom right;pointer-events:none;transition:opacity .25s,transform .25s}
#buddy.talk .bubble{opacity:1;transform:none;pointer-events:auto}
.bubble .step{font-family:"IBM Plex Mono",monospace;font-size:10px;opacity:.55;letter-spacing:.08em}
.bubble h4{font-size:15px;margin:3px 0 4px}
.bubble p{font-size:12.5px;line-height:1.45;opacity:.85}
.bubble .row{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.bubble .row button{padding:6px 12px;border-radius:7px;font-size:12px;font-weight:600;background:var(--acc);color:#fff}
.bubble .row .ghost{background:rgba(0,0,0,.06);color:#1d2330}
body[data-theme="black"] .bubble .row button:not(.ghost){color:#111}

#madeby{position:absolute;left:16px;bottom:11px;z-index:50;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:var(--ink-sh);opacity:.85;pointer-events:none}
#drawer,#mstatus,#msheet{display:none}

/* ---------- windows ---------- */
#wins{position:fixed;inset:0;z-index:400;pointer-events:none}
.win{position:absolute;pointer-events:auto;display:flex;flex-direction:column;min-width:320px;max-width:calc(100vw - 24px);max-height:calc(100vh - 60px);border-radius:13px;overflow:hidden;background:rgba(250,251,253,.94);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(0,0,0,.12);box-shadow:0 30px 80px rgba(10,20,40,.38),0 0 0 .5px rgba(255,255,255,.4) inset;color:#1d2330;
  animation:winIn .28s cubic-bezier(.2,.8,.25,1)}
.win.closing{animation:winOut .2s ease-in forwards}
.win.blur{box-shadow:0 18px 50px rgba(10,20,40,.25)}
.win.blur .w-bar{opacity:.8}
@keyframes winIn{from{opacity:0;transform:scale(.94) translateY(10px)}}
@keyframes winOut{to{opacity:0;transform:scale(.95)}}
.w-bar{flex:0 0 auto;height:40px;display:flex;align-items:center;padding:0 14px;gap:8px;border-bottom:1px solid rgba(0,0,0,.08);background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(240,242,246,.75));touch-action:none;user-select:none;-webkit-user-select:none;position:relative}
.lights{display:flex;gap:8px;z-index:1}
.lights button{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2);display:grid;place-items:center;font-size:9px;line-height:1;color:transparent}
.lights button:nth-child(2){background:#febc2e}.lights button:nth-child(3){background:#28c840}
.lights:hover button{color:rgba(0,0,0,.55)}
.w-title2{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:700;pointer-events:none}
.w-body{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.w-pad{padding:22px 24px 26px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b7486}
.win h2{font-size:30px;line-height:1.08;letter-spacing:-.02em;margin:8px 0 10px;font-weight:700}
.win h2 em{font-family:Newsreader,serif;font-weight:400}
.win p{font-size:14.5px;line-height:1.6;color:#3a4252}
.win .muted{color:#6b7486;font-size:13px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:9px;background:#1d2330;color:#fff;text-decoration:none;font-size:13px;font-weight:600;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px);background:var(--acc)}
.btn.lite{background:rgba(0,0,0,.06);color:#1d2330}
.btn.lite:hover{background:rgba(0,0,0,.12)}

/* work (case hub) */
.hub{display:grid;grid-template-columns:240px 1fr;height:100%;min-height:0}
.hub nav{border-right:1px solid rgba(0,0,0,.08);background:rgba(236,239,244,.6);overflow:auto;padding:10px 8px}
.hub nav button{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;padding:9px 11px;border-radius:8px;margin-bottom:2px;transition:background .15s}
.hub nav button:hover{background:rgba(0,0,0,.05)}
.hub nav button.on{background:var(--acc);color:#fff}
.hub nav .n{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;opacity:.6;text-transform:uppercase}
.hub nav b{font-size:14px;margin-top:2px}
.hub nav small{font-size:11px;opacity:.7}
.hub section{overflow:auto;min-height:0}
.shot{margin:16px 0 18px;border-radius:10px;overflow:hidden;border:1px solid rgba(0,0,0,.1);box-shadow:0 12px 30px rgba(20,30,50,.15);background:#e9edf2;aspect-ratio:16/10}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.chips span{font-size:11.5px;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.05);color:#4a5262}
.next-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.wgrid button{text-align:left;border-radius:10px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);transition:transform .2s,box-shadow .2s}
.wgrid button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.14)}
.wgrid img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#e9edf2}
.wgrid b{display:block;font-size:13px;padding:8px 10px 0}
.wgrid small{display:block;font-size:11px;color:#6b7486;padding:0 10px 9px}

/* list rows (apps, bots, sites) */
.rows{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.row{display:flex;align-items:center;gap:14px;padding:11px 10px;border-radius:10px;text-decoration:none;transition:background .15s}
a.row:hover{background:rgba(0,0,0,.045)}
.row img{width:48px;height:48px;border-radius:12px;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.row .ri{flex:1;min-width:0}
.row b{font-size:14.5px}
.row p{font-size:12.5px;line-height:1.45;margin-top:2px}
.row .dom{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--acc);margin-top:3px;display:block}
body[data-theme="black"] .row .dom{color:#3a64c8}
.row .go{font-size:16px;opacity:.35;transition:opacity .15s,transform .15s}
a.row:hover .go{opacity:.9;transform:translate(2px,-2px)}
.appcard{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.07);margin-top:10px}
.appcard img{width:64px;height:64px;border-radius:15px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.appcard b{font-size:16px}.appcard .v{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#6b7486;margin-left:6px}
.appcard p{font-size:13px;margin:3px 0 10px}
.appcard .links{display:flex;flex-wrap:wrap;gap:6px}
.appcard .links a{font-size:12px;padding:5px 10px;border-radius:7px;background:rgba(0,0,0,.05);text-decoration:none;font-weight:600;transition:background .15s}
.appcard .links a:hover{background:var(--acc);color:#fff}
.appcard .links a.main{background:#1d2330;color:#fff}
.sec-h{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b7486;margin:22px 0 4px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}
.ed{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.ed a{text-decoration:none;border-radius:10px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);transition:transform .2s}
.ed a:hover{transform:translateY(-2px)}
.ed img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ed b{display:block;font-size:12.5px;padding:7px 9px 0}.ed small{display:block;font-size:10.5px;color:#6b7486;padding:0 9px 8px}

/* about */
.about-top{display:flex;gap:18px;align-items:center}
.about-top .portrait{width:86px;height:86px;box-shadow:0 8px 20px rgba(10,30,70,.2)}
.about-top .portrait .mono{font-size:34px}
.facts{display:grid;grid-template-columns:110px 1fr;gap:8px 14px;margin-top:18px;font-size:13px;border-top:1px solid rgba(0,0,0,.08);padding-top:14px}
.facts dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6b7486;padding-top:2px}
.win .about p+p{margin-top:10px}

/* stickies */
.stk{display:grid;grid-template-columns:150px 1fr;height:100%}
.stk aside{padding:14px;border-right:1px solid rgba(0,0,0,.08);background:rgba(236,239,244,.6);display:flex;flex-direction:column;gap:12px}
.stk aside small{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6b7486}
.pens,.papers{display:flex;flex-wrap:wrap;gap:7px}
.pens button,.papers button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.pens button.on,.papers button.on{box-shadow:0 0 0 2px var(--acc)}
.stk .cv{display:grid;place-items:center;padding:20px;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(0,0,0,.035) 27px 28px)}
.stk canvas{width:min(100%,340px);aspect-ratio:1;border-radius:3px;box-shadow:0 10px 26px rgba(0,0,0,.18);touch-action:none;transform:rotate(-1.5deg);background:#ffe97a}

/* calc */
.calc{padding:14px;background:#111317;color:#fff;height:100%;display:flex;flex-direction:column}
.calc .scr{text-align:right;padding:16px 8px 12px;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end}
.calc .ex{font-size:14px;opacity:.5;min-height:18px;font-family:"IBM Plex Mono",monospace;word-break:break-all}
.calc .out{font-size:44px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;word-break:break-all;line-height:1.1}
.calc .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.calc .keys button{height:58px;border-radius:16px;background:#2a2d34;font-size:20px;transition:filter .1s,transform .1s}
.calc .keys button:active{transform:scale(.95)}
.calc .keys button:hover{filter:brightness(1.2)}
.calc .keys .op{background:#ff9f0a}.calc .keys .fn{background:#5c606a}
.calc .keys .z{grid-column:span 2}
.calc .note{font-size:11px;opacity:.5;text-align:center;margin-top:12px}
.calc .note a{color:#ffb54a}

/* screens gallery */
.gal{columns:3 200px;column-gap:10px;padding:14px}
.gal a{display:block;margin-bottom:10px;break-inside:avoid;border-radius:8px;overflow:hidden;position:relative;text-decoration:none}
.gal img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#e9edf2;transition:transform .4s}
.gal a:hover img{transform:scale(1.03)}
.gal span{position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff}

/* emoji stickers */
#emojiPick{position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:700;width:300px;padding:14px;border-radius:14px;background:rgba(250,251,253,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 20px 50px rgba(10,20,40,.3);border:1px solid rgba(0,0,0,.1)}
#emojiPick h4{font-size:13px;margin-bottom:8px}
#emojiPick .x{position:absolute;right:10px;top:8px;font-size:18px;opacity:.5}
#emojiPick p{font-size:11px;color:#6b7486;margin-top:8px}
.eg{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.eg button{font-size:22px;padding:3px;border-radius:7px}
.eg button:hover,.eg button.on{background:rgba(0,0,0,.08)}
.stuck{position:fixed;z-index:350;font-size:38px;line-height:1;transform:translate(-50%,-50%);touch-action:none;user-select:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));cursor:grab;animation:stick .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes stick{from{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
body.placing{cursor:crosshair}
body.placing .node,body.placing a,body.placing button{cursor:crosshair}
.nojs{position:fixed;inset:auto 0 0 0;z-index:9999;background:#fff;padding:14px;text-align:center;font-size:14px}

/* ---------- mid widths ---------- */
@media (max-width:1180px) and (min-width:761px){
  #rail{width:260px}
  #hero{max-width:calc(100vw - 340px)}
  .portrait{width:120px;height:120px}.portrait .mono{font-size:46px}
  .node{left:calc(48px + var(--x) * clamp(118px,15vw,160px))}
}
@media (max-height:760px) and (min-width:761px){
  .node{top:calc(36vh + var(--y) * 25vh)}
  .node .tile{transform:scale(.86)}
  #rail #wStores{display:none}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  html,body{overflow:hidden}
  #menubar,#edgeTab,#buddy .bubble{display:none}
  .lk-time{font-size:clamp(120px,36vw,200px)}
  #lock{padding-top:12vh}
  .lk-cta{display:none}
  .lk-slide{display:block;position:absolute;left:0;right:0;bottom:100px;padding:0 28px}
  #lock:not(.ready) .lk-slide{opacity:.4;pointer-events:none}
  .lk-track{position:relative;height:56px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;overflow:hidden}
  .lk-track span{font-size:15px;font-weight:600;letter-spacing:.02em;background:linear-gradient(90deg,rgba(255,255,255,.5) 30%,#fff 50%,rgba(255,255,255,.5) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 2.6s linear infinite}
  @keyframes shine{from{background-position:150% 0}to{background-position:-50% 0}}
  .lk-knob{position:absolute;left:4px;top:4px;width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;touch-action:none;box-shadow:0 4px 10px rgba(0,0,0,.2)}
  .lk-knob svg{width:20px;height:20px;fill:none;stroke:#2a5fa3;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .lk-links{bottom:36px}
  #mstatus{display:flex;position:fixed;top:0;left:0;right:0;height:calc(46px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;z-index:500;align-items:center;justify-content:space-between;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
  #msClock{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;min-width:50px}
  .ms-logo{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
  .ms-logo .mono{font-size:14px}
  .ms-logo.big{width:40px;height:40px}.ms-logo.big .mono{font-size:22px}
  #msMenu{width:50px;height:36px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px}
  #msMenu i{display:block;width:20px;height:2px;border-radius:2px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  #msheet{display:block;position:fixed;inset:0;z-index:800;pointer-events:none}
  #msheet .msh-scrim{position:absolute;inset:0;background:rgba(5,10,20,.4);opacity:0;transition:opacity .3s}
  #msheet .msh-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);background:rgba(248,249,251,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 20px 24px}
  #msheet.open{pointer-events:auto}
  #msheet.open .msh-scrim{opacity:1}#msheet.open .msh-panel{transform:none}
  .msh-head{display:flex;justify-content:space-between;align-items:center}
  .msh-brand{display:flex;gap:11px;align-items:center}
  .msh-brand b{display:block;font-size:16px}.msh-brand small{font-size:12px;color:#6b7486}
  .msh-close{font-size:13px;font-weight:600;padding:6px 10px;border-radius:7px;background:rgba(0,0,0,.06)}
  .msh-nav{margin-top:28px;display:flex;flex-direction:column}
  .msh-nav button{display:flex;justify-content:space-between;align-items:baseline;padding:14px 2px;border-bottom:1px solid rgba(0,0,0,.08);font-size:22px;font-weight:600;letter-spacing:-.01em;text-align:left}
  .msh-nav button span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#6b7486}
  .msh-foot{margin-top:auto}
  .msh-foot small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6b7486}
  .msh-foot a{font-size:16px;font-weight:600;text-decoration:none;color:var(--acc)}
  body[data-theme="black"] .msh-foot a{color:#3a64c8}

  #desk{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:calc(58px + env(safe-area-inset-top)) 0 210px;overscroll-behavior:contain}
  .bp,.coord{display:none}
  #hero{position:relative;top:auto;left:auto;max-width:none;margin:0 20px;gap:14px;align-items:center}
  #hero .portrait{width:64px;height:64px}
  #hero .portrait .mono{font-size:26px}
  #hero .portrait .ring{inset:6px}
  .lede{font-size:11.5px}
  .avail{font-size:10px}
  #icons{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 6px;padding:28px 14px 10px}
  .node{position:relative;left:auto;top:auto;width:auto;gap:6px;touch-action:manipulation}
  .node .tile{transform:scale(.8);margin:-10px 0}
  .node:hover .tile{transform:scale(.8)}
  .node .lab{opacity:1;transform:none;font-size:12px}
  #rail{display:none}
  #dockWrap{position:fixed;bottom:calc(60px + env(safe-area-inset-bottom));padding:0;z-index:600}
  .dock-lbl{display:none}
  .dock{gap:6px;padding:7px 9px;border-radius:16px;max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none}
  .dock::-webkit-scrollbar{display:none}
  .di-ico{width:38px;height:38px;border-radius:10px;font-size:12px}
  .di-ico svg{width:22px;height:22px}
  .di-lbl{display:none}
  .di:nth-child(n+7){display:none}
  #buddy{position:fixed;right:12px;bottom:calc(122px + env(safe-area-inset-bottom));z-index:610}
  .bot{width:44px;height:54px}
  #buddy.talk .bubble{display:block;position:fixed;left:14px;right:14px;bottom:calc(186px + env(safe-area-inset-bottom));width:auto;border-radius:14px}
  #madeby{position:fixed;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom));text-align:center;z-index:620;font-size:9px}
  #drawer{display:block;position:fixed;left:0;right:0;bottom:0;z-index:605;height:calc(54px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;background:rgba(245,247,250,.72);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);transition:height .4s cubic-bezier(.2,.8,.25,1);overflow:hidden}
  body[data-theme="black"] #drawer{background:rgba(25,25,30,.75);border-color:rgba(255,255,255,.1)}
  #drHandle{display:grid;place-items:center;width:100%;height:28px}
  #drHandle i{width:44px;height:5px;border-radius:5px;background:rgba(0,0,0,.25)}
  body[data-theme="black"] #drHandle i{background:rgba(255,255,255,.35)}
  #drBody{padding:4px 14px 90px;display:flex;flex-direction:column;gap:10px;overflow:auto;height:calc(100% - 28px)}
  #drawer.open{height:78vh}
  #drawer:not(.open) #drBody{visibility:hidden;opacity:0}
  #drBody{transition:opacity .3s}
  body.drawer-open #dockWrap,body.drawer-open #buddy,body.drawer-open #madeby{opacity:0;pointer-events:none}
  #madeby{transition:opacity .3s}
  #drBody .widget{box-shadow:none}

  .win{left:0!important;top:auto!important;right:0;bottom:0;width:100%!important;height:calc(100% - 50px - env(safe-area-inset-top))!important;max-width:none;max-height:none;border-radius:18px 18px 0 0;animation:sheetIn .38s cubic-bezier(.2,.8,.25,1)}
  .win.closing{animation:sheetOut .25s ease-in forwards}
  @keyframes sheetIn{from{transform:translateY(100%)}}
  @keyframes sheetOut{to{transform:translateY(100%)}}
  .w-pad{padding:18px 18px 40px}
  .win h2{font-size:26px}
  .hub{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .hub nav{display:flex;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(0,0,0,.08);padding:8px;scrollbar-width:none}
  .hub nav button{flex:0 0 auto;width:auto;margin:0;padding:7px 11px}
  .hub nav small,.hub nav .n{display:none}
  .hub nav b{margin:0;font-size:13px}
  .stk{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .stk aside{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid rgba(0,0,0,.08);align-items:center}
  .ed{grid-template-columns:1fr 1fr}
  .gal{columns:2 140px}
  .calc .keys button{height:64px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .clouds,.portrait .orb,.lk-mark .orb{animation:none!important}
}