/* Layout: a macOS desktop as the first screen (widgets left, folders right, headline centred, dock floating),
   then one full-screen "app" per section: installer, project folders, skills, terminal, TextEdit, contact. */
:root{
  --bg:#F6F4F5;
  --sky:#FBF8F9;
  --ink:14,13,14;
  --fg:rgb(var(--ink));
  --fg-2:rgba(var(--ink),.62);
  --fg-3:rgba(var(--ink),.5);
  --line:rgba(var(--ink),.1);
  --track:rgba(var(--ink),.08);
  --glass:rgba(255,255,255,.62);
  --glass-edge:rgba(255,255,255,.75);
  --glass-shadow:0 10px 34px rgba(40,20,30,.10);
  --panel:rgba(255,255,255,.80);
  --panel-solid:#FFFFFF;
  --panel-bar:rgba(244,241,243,.92);
  --card-a:#DCE9F1;
  --card-b:#F8DDE6;
  --accent:#C2305A;
  --accent-soft:#F6C9D6;
  --ok:#1F9D55;
  --note:#FFE066;
  --note-ink:#3A2E05;
  --spot:#121212;
  --spot-green:#1DB954;
  --term:#1C1B22;
  --term-bar:#2A2932;
  --term-fg:#E6E3EA;
  --term-dim:#9C98A6;
  --term-prompt:#FF8FAB;
  --term-ok:#7EE0A1;
  --branch:#5B4A4E;
  --font:"Bricolage Grotesque", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-widget:22px;
  --vh:100vh;
}
@supports (height:100dvh){ :root{ --vh:100dvh } }
:root[data-theme="dark"]{
  --bg:#141114; --sky:#1A1519; --ink:246,240,243;
  --glass:rgba(42,36,40,.62); --glass-edge:rgba(255,255,255,.10); --glass-shadow:0 10px 34px rgba(0,0,0,.45);
  --panel:rgba(34,29,33,.84); --panel-solid:#1E1A1D; --panel-bar:rgba(44,38,42,.94);
  --card-a:#1F2D36; --card-b:#3A2430;
  --accent:#FF8FAB; --accent-soft:#5A2A3A; --ok:#4FD28A; --branch:#8C7A80; color-scheme:dark;
}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
*{box-sizing:border-box}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- wallpaper ---------- */
.wall{position:fixed;inset:0;z-index:0;background:radial-gradient(1200px 700px at 78% 8%, var(--accent-soft) 0%, transparent 60%),var(--sky)}
#branches,#petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#branches{z-index:1;opacity:.9;transition:opacity .6s}
#petals{z-index:2}
.veil{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(900px 520px at 50% 52%, color-mix(in srgb,var(--bg) 70%,transparent), transparent 75%);transition:opacity .6s}
body.away .veil{opacity:0}
body.away #branches{opacity:.55}

/* ---------- menu bar ---------- */
.menubar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line);font-size:13px}
.mb-left{display:flex;align-items:center;gap:12px;min-width:0;white-space:nowrap}
.mono-mark{display:inline-grid;place-items:center;height:20px;padding:0 6px;border-radius:6px;background:var(--fg);color:var(--bg);font-weight:800;font-size:11px;letter-spacing:.5px;text-decoration:none}
.mb-name{font-weight:600}
.mb-sub{color:var(--fg-3);overflow:hidden;text-overflow:ellipsis}
.mb-sec{font-weight:600;color:var(--fg-2)}
.mb-sec:empty{display:none}
.mb-sec::before{content:"›";margin-right:10px;color:var(--fg-3);font-weight:400}
.mb-right{display:flex;align-items:center;gap:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lang{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.lang button{border:0;background:transparent;padding:2px 8px;font-size:11px;font-weight:600;letter-spacing:.6px;color:var(--fg-3);cursor:pointer;min-height:22px}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
#mbClock{color:var(--fg-2)}
.theme-btn{width:28px;height:24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--fg-2);cursor:pointer;padding:0}
.theme-btn:hover{color:var(--fg)}
.theme-btn svg{width:14px;height:14px}

/* ---------- desktop (first screen) ---------- */
.desk{position:relative;z-index:5;height:var(--vh);min-height:760px;padding-top:34px}
.widget{position:absolute;border-radius:var(--r-widget);background:var(--glass);border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--glass-shadow);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.25),box-shadow .35s}
.widget:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 44px rgba(40,20,30,.16)}
.w-label{font-size:11px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--fg-3)}

#w-ava{top:66px;left:28px;width:168px;height:168px;padding:0;overflow:hidden}
#w-ava img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

#w-cal{top:66px;left:212px;width:168px;height:168px;padding:16px 14px}
.cal-day{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--accent);text-transform:uppercase}
.cal-num{font-size:26px;font-weight:700;line-height:1;margin:2px 0 8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0;font-size:8.5px;text-align:center;color:var(--fg-2);font-variant-numeric:tabular-nums}
.cal-grid .h{color:var(--fg-3);font-weight:600}
.cal-grid .t{background:var(--fg);color:var(--bg);border-radius:50%;font-weight:700}

#w-spot{top:66px;left:396px;width:344px;height:168px;background:var(--spot);border-color:rgba(255,255,255,.08);color:#fff;padding:16px;display:grid;grid-template-columns:112px 1fr;gap:16px}
.vinyl{width:112px;height:112px;border-radius:12px;background:#1f1d1f;display:grid;place-items:center;overflow:hidden}
.disc{width:96px;height:96px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#0d0d0d 0 2px,#1b1b1b 2px 3px);display:grid;place-items:center;animation:spin 6s linear infinite;animation-play-state:paused}
.disc.playing{animation-play-state:running}
.disc-label{position:relative;width:36%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#121212 0 3px,#F3A6BC 3.5px 100%)}
.disc-label.has-img{width:58%;background:var(--cover) center/cover no-repeat;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.disc-label.has-img::after{content:"";position:absolute;inset:0;margin:auto;width:12%;height:12%;border-radius:50%;background:#121212;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
@keyframes spin{to{transform:rotate(360deg)}}
.sp-body{display:flex;flex-direction:column;min-width:0}
.sp-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-label{font-size:10px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,.62);text-transform:uppercase}
.sp-time{font-size:11px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.sp-logo{width:18px;height:18px;color:var(--spot-green);flex:none}
.sp-title{margin-top:8px;font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-artist{font-size:12.5px;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#w-spot.embed{display:block;padding:8px}
#w-spot.embed iframe{display:block;width:100%;height:152px;border:0;border-radius:14px}
.sp-bar{margin-top:auto;height:4px;border-radius:2px;background:rgba(255,255,255,.18);position:relative;cursor:pointer;touch-action:none}
.sp-bar::before{content:"";position:absolute;inset:-10px 0}
.sp-bar i{display:block;width:0;height:100%;border-radius:2px;background:#fff;position:relative}
.sp-bar:hover i{background:var(--spot-green)}
.sp-bar:hover i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff}
.sp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px}
.sp-user{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;text-decoration:none;color:#fff;min-height:28px;border-radius:999px;padding-right:6px}
.sp-user:hover{text-decoration:underline}
.sp-play{width:36px;height:36px;border:0;padding:0;cursor:pointer;border-radius:50%;background:var(--spot-green);display:grid;place-items:center;color:#000;transition:transform .2s cubic-bezier(.2,.9,.3,1.4)}
.sp-play:hover{transform:scale(1.06)}

#w-weather{top:250px;left:28px;width:352px;padding:16px 18px}
.wx-top{display:flex;align-items:flex-start;justify-content:space-between}
.wx-city{font-weight:700;font-size:14px}
.wx-now{font-size:34px;font-weight:600;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.wx-cond{font-size:12px;color:var(--fg-2);text-align:right}
.wx-days{display:grid;grid-template-columns:repeat(6,1fr);margin-top:12px;font-size:11px;text-align:center;color:var(--fg-2);font-variant-numeric:tabular-nums}
.wx-days svg{width:18px;height:18px;margin:4px auto;display:block}
.wx-days b{color:var(--fg);font-weight:600}
.sample{font-size:9.5px;color:var(--fg-3);letter-spacing:.4px}

#w-sched{top:404px;left:28px;width:352px;padding:16px 18px}
.sc-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sc-main{margin-top:6px;font-size:16px;font-weight:600;line-height:1.35;text-wrap:balance}
.sc-main b{color:var(--accent);font-weight:700}
.sc-next{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--fg-2)}

#w-note{top:548px;left:32px;width:178px;min-height:176px;padding:16px 14px 14px;background:var(--note);border:0;border-radius:4px 4px 16px 4px;color:var(--note-ink);transform:rotate(-2.2deg);box-shadow:0 14px 28px rgba(80,60,0,.18);backdrop-filter:none;-webkit-backdrop-filter:none}
#w-note::before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:18px;margin-left:-32px;background:rgba(255,255,255,.55);transform:rotate(3deg);border-radius:2px}
#w-note:hover{transform:rotate(-1.4deg) translateY(-3px);box-shadow:0 20px 36px rgba(80,60,0,.22)}
#w-note.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:rotate(-2.2deg) translateX(-1px)}20%,80%{transform:rotate(-2.2deg) translateX(3px)}30%,50%,70%{transform:rotate(-2.2deg) translateX(-5px)}40%,60%{transform:rotate(-2.2deg) translateX(5px)}}
.note-h{font-weight:700;font-size:14px;margin-bottom:8px}
.note-list{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px;line-height:1.3}
.note-list label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;min-height:24px}
.note-list input{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:2px 0 0;flex:none;border:1.5px solid rgba(58,46,5,.6);border-radius:3px;display:grid;place-items:center;cursor:pointer;background:transparent}
.note-list input:checked{background:var(--note-ink)}
.note-list input:checked::after{content:"";width:6px;height:3px;border-left:1.5px solid var(--note);border-bottom:1.5px solid var(--note);transform:rotate(-45deg) translate(1px,-1px)}
.note-list input:checked + span{text-decoration:line-through;opacity:.6}
/* the gym box: a soft holographic glow so it stands out without shouting */
.note-list input.holo{border:0;position:relative;background:conic-gradient(from var(--hang,0deg),#FF9EC4,#B8A6FF,#8FE3FF,#B6F5C8,#FFE08A,#FF9EC4);box-shadow:0 0 0 1px rgba(58,46,5,.25),0 0 8px 1px rgba(255,140,190,.55),0 0 14px 2px rgba(150,170,255,.35);animation:holo 4s linear infinite}
.note-list input.holo::before{content:"";position:absolute;inset:2px;border-radius:2px;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.15))}
@property --hang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes holo{to{--hang:360deg}}

#w-clock{top:556px;left:226px;width:160px;height:160px;display:grid;place-items:center}
#clockSvg{width:136px;height:136px}
#clockSvg .tick{stroke:rgba(var(--ink),.35)}
#clockSvg .hand{stroke:var(--fg);stroke-linecap:round}
#clockSvg .sec{stroke:var(--accent)}
#clockSvg text{fill:var(--fg-3);font:600 9px var(--font);letter-spacing:1px}

#w-dc{top:66px;left:756px;width:290px;height:168px;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}
.dc-top{display:flex;align-items:center;gap:12px}
.dc-ava{position:relative;width:46px;height:46px;flex:none;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--accent)}
.dc-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.dc-dot{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;border:3px solid var(--panel-solid);background:#80848E}
.dc-dot.online{background:#23A55A}.dc-dot.idle{background:#F0B232}.dc-dot.dnd{background:#F23F43}
.dc-who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.dc-who b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-who span{font-size:12px;color:var(--fg-3)}
.dc-logo{width:22px;height:22px;margin-left:auto;color:#5865F2;flex:none;align-self:flex-start}
.dc-act{display:flex;flex-direction:column;gap:3px;padding-top:10px;border-top:1px solid var(--line);min-width:0}
.dc-st{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--fg-3)}
.dc-line{font-size:13.5px;font-weight:600;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (min-width:901px) and (max-width:1179px){ #w-dc{display:none} }
.status .dot.idle{background:#F0B232;box-shadow:0 0 0 3px rgba(240,178,50,.2)}
.status .dot.dnd{background:#F23F43;box-shadow:0 0 0 3px rgba(242,63,67,.2)}
.status .dot.off{background:#80848E;box-shadow:0 0 0 3px rgba(128,132,142,.2)}

/* reveal on scroll, tilt, magnetic */
.rv{opacity:0;transform:translateY(28px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s ease var(--d,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.gal-main,.lcard,.mail{transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
#branches{will-change:transform}

/* headline: below the top widget row, centred on the screen */
.hero{position:absolute;left:0;right:0;top:250px;bottom:100px;display:grid;place-items:center;text-align:center;pointer-events:none}
.hero-inner{pointer-events:auto;max-width:min(1000px,calc(100vw - 840px))}
.hero h1{margin:0;font-weight:800;font-size:clamp(34px,3.2vw,60px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.u{white-space:nowrap;text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.12em;text-decoration-color:var(--accent)}
.hero p{margin:22px auto 0;max-width:34em;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--fg-2);text-wrap:balance}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:13px;color:var(--fg-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.status .dot{width:8px;height:8px;border-radius:50%;background:#2FB565;box-shadow:0 0 0 3px rgba(47,181,101,.18)}
@media (min-width:901px) and (max-width:1600px){ .hero{left:396px;right:150px} .hero-inner{max-width:none} }

.folders{position:absolute;top:62px;right:40px;display:flex;flex-direction:column;gap:6px;z-index:6}
.fold{display:flex;flex-direction:column;align-items:center;gap:4px;width:104px;padding:8px 4px;border:0;border-radius:12px;background:transparent;cursor:pointer;text-decoration:none}
.fold svg{width:62px;height:52px;filter:drop-shadow(0 4px 6px rgba(30,60,120,.18));transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.fold span{font-size:12.5px;font-weight:500;line-height:1.25;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--bg) 70%,transparent);text-align:center}
.fold:hover{background:rgba(var(--ink),.06)}
.fold:hover svg{transform:translateY(-2px)}
.fold:active svg{transform:scale(.94)}

/* ---------- dock ---------- */
.dock-wrap{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;justify-content:center;pointer-events:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.dock{pointer-events:auto;display:flex;align-items:flex-end;gap:6px;padding:8px 10px;height:72px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 16px 40px rgba(40,20,30,.16);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%)}
.dock .sep{width:1px;align-self:stretch;margin:6px 4px;background:var(--line)}
.dk{position:relative;width:52px;height:52px;flex:none;border:0;padding:0;background:none;cursor:pointer;text-decoration:none;display:block}
.dk .ic{position:absolute;inset:0;border-radius:24%;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.25)}
.dk .ic svg{width:56%;height:56%}
.dk .tip{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:7px;background:color-mix(in srgb,var(--bg) 88%,transparent);border:1px solid var(--line);font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;color:var(--fg)}
.dk:hover .tip,.dk:focus-visible .tip{opacity:1}
.dk .run{position:absolute;bottom:-6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--fg-2);opacity:0}
.dk.open .run{opacity:1}
.c-gh{background:#1F2328;color:#fff}.c-mail{background:linear-gradient(#5AB6FF,#1E7CF2);color:#fff}.c-fb{background:#1877F2;color:#fff}
.c-ig{background:radial-gradient(circle at 30% 107%,#FDCB52 0%,#FD5D3B 40%,#D52C7D 70%,#7A2FD0 100%);color:#fff}
.c-dc{background:#5865F2;color:#fff}.c-sp{background:#121212;color:#1DB954}.c-val{background:#FF4655;color:#fff}.c-term{background:#1C1B22;color:#fff}

/* ---------- section dots ---------- */
.dots{position:fixed;right:max(6px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:2px}
.dots button{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(var(--ink),.22);transition:transform .3s cubic-bezier(.2,.9,.3,1.4),background .3s}
.dots button:hover::before{background:rgba(var(--ink),.45)}
.dots button[aria-current="true"]::before{background:var(--accent);transform:scale(1.45)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);z-index:80;padding:9px 16px;border-radius:12px;background:var(--fg);color:var(--bg);font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.2,.9,.3,1.2);max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- shared: sections, windows ---------- */
.sec{position:relative;z-index:5;min-height:var(--vh);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-block:76px 112px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}
.sec-head{width:min(1100px,100%);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--fg-3)}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sec h2{margin:8px 0 0;font-weight:800;font-size:clamp(30px,3.3vw,52px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.sec-sub{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--fg-2);max-width:42em}
.mwin{border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px rgba(40,20,30,.14);overflow:hidden;
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.mwin-bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--panel-bar);border-bottom:1px solid var(--line)}
.lights{display:flex;gap:8px}
.lights i{width:12px;height:12px;border-radius:50%;display:block}
.lights i:nth-child(1){background:#FF5F57}.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
.mwin-title{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:var(--fg-2);margin-right:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel-solid);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;color:var(--fg);transition:transform .2s cubic-bezier(.2,.9,.3,1.4),background .2s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:transparent}
.btn svg{width:15px;height:15px}
.chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--fg-2);background:color-mix(in srgb,var(--panel-solid) 60%,transparent)}

/* ---------- education: installer window ---------- */
.inst{width:min(1000px,100%)}
.inst-body{display:grid;grid-template-columns:230px minmax(0,1fr)}
.inst-side{padding:26px 22px;border-right:1px solid var(--line);background:rgba(var(--ink),.025)}
.inst-side ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.inst-side li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--fg-3)}
.inst-side li.done{color:var(--fg-2)}
.inst-side li.active{color:var(--fg);font-weight:700;background:rgba(var(--ink),.06)}
.st{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(var(--ink),.25)}
.done .st{background:var(--ok);border-color:var(--ok);color:#fff}
.done .st svg{width:10px;height:10px}
.active .st{border-color:rgba(var(--ink),.15);border-top-color:var(--accent);border-right-color:var(--accent);animation:spin 1.1s linear infinite}
.inst-main{padding:30px 34px 26px;display:flex;flex-direction:column;min-width:0}
.inst-main h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.inst-meta{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:13px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.pbar{height:10px;border-radius:6px;background:var(--track);overflow:hidden;margin-top:8px}
.pbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#fff));width:var(--p,0%)}
.pbar.anim i{transition:width 1.6s cubic-bezier(.22,1,.36,1)}
.log{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.log li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.log .nm{font-weight:600}
.log .sub{display:block;font-weight:400;font-size:12.5px;color:var(--fg-3);margin-top:2px}
.log .yr{font-size:12.5px;color:var(--fg-2);font-variant-numeric:tabular-nums;text-align:right}
.log .mini{display:block;width:120px;height:4px;border-radius:2px;background:var(--track);margin:6px 0 0 auto;overflow:hidden}
.log .mini i{display:block;height:100%;background:var(--accent);width:var(--p,0%)}
.log li.todo{color:var(--fg-3)}
.log li.todo .nm{font-weight:500}
.inst-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:auto;padding-top:22px}

/* ---------- projects: stacked folders ---------- */
#du-an{display:block;padding:0;height:calc(var(--n,2) * var(--vh))}
.proj-stage{position:sticky;top:0;height:var(--vh);min-height:680px;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding-block:76px 108px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}
.counter{font-family:var(--mono);font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.counter b{color:var(--fg);font-weight:700}
.proj-deck{position:relative;flex:1;width:min(1100px,100%);min-height:0}
.proj-card{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;will-change:transform;transform-origin:50% 0}
.proj-card .tab{align-self:flex-start;height:36px;padding:0 18px 0 16px;border-radius:14px 14px 0 0;background:var(--cc);display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--fg-2)}
.proj-card .tab svg{width:15px;height:15px}
.proj-card .body{flex:1;min-height:0;background:var(--cc);border-radius:0 20px 20px 20px;box-shadow:0 -1px 0 rgba(255,255,255,.3) inset,0 24px 60px rgba(40,20,30,.14);
  padding:30px 34px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;overflow:auto}
.pc-meta{font-family:var(--mono);font-size:12px;color:var(--fg-3)}
.pc-title{margin:8px 0 0;font-size:clamp(24px,2.3vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
.pc-desc{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--fg-2);max-width:40em}
.steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:s}
.steps li{padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--panel-solid) 55%,transparent);border:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--fg-2)}
.steps b{display:block;color:var(--fg);font-size:13px;margin-bottom:3px}
.steps b::before{counter-increment:s;content:counter(s) " ";color:var(--accent);font-family:var(--mono);font-size:11px;margin-right:2px}
.feats{margin:16px 0 0;padding:0 0 0 18px;font-size:14.5px;line-height:1.7;color:var(--fg-2)}
.role{margin:16px 0 0;padding:12px 14px;border-radius:12px;border:1px dashed rgba(var(--ink),.2);font-size:13.5px;line-height:1.55;color:var(--fg-2)}
.role b{color:var(--fg)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.pc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#du-an.single .sec-sub{display:none}
.gal{display:flex;flex-direction:column;gap:10px;min-width:0}
.gal-main{margin:0;border-radius:14px;overflow:hidden;background:#120F1F;aspect-ratio:16/10;box-shadow:0 12px 30px rgba(20,10,40,.25)}
.gal-main img{display:block;width:100%;height:100%;object-fit:contain}
.gal-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gal-th{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#120F1F;cursor:pointer;aspect-ratio:16/10;transition:transform .2s cubic-bezier(.2,.9,.3,1.4),border-color .2s}
.gal-th img{display:block;width:100%;height:100%;object-fit:cover;opacity:.7;transition:opacity .2s}
.gal-th:hover{transform:translateY(-2px)}
.gal-th[aria-pressed="true"]{border-color:var(--accent)}
.gal-th[aria-pressed="true"] img,.gal-th:hover img{opacity:1}
.shot{border-radius:14px;border:1.5px dashed rgba(var(--ink),.22);background:color-mix(in srgb,var(--panel-solid) 45%,transparent);display:grid;place-items:center;text-align:center;padding:20px;min-height:220px;color:var(--fg-3);font-size:13.5px;line-height:1.5}
.shot svg{width:30px;height:30px;margin:0 auto 8px;display:block;opacity:.6}

/* ---------- skills ---------- */
.skills{width:min(1100px,100%);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px}
.panel{border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 44px rgba(40,20,30,.10);padding:24px 26px;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
.grp + .grp{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.grp-h{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.sk{display:grid;grid-template-columns:110px minmax(0,1fr) 44px;align-items:center;gap:14px;padding:7px 0;font-size:15px}
.sk .nm{font-weight:600}
.sk .pc{font-size:13px;color:var(--fg-2);text-align:right;font-variant-numeric:tabular-nums}
.sk .pbar{margin:0;height:8px}
.langs{display:grid;gap:18px;align-content:start}
.lcard{display:flex;align-items:center;gap:18px}
.lbig{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1;min-width:92px}
.lbig.zh{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",var(--font);font-weight:700;color:var(--accent)}
.lname{font-weight:700;font-size:16px}
.ldesc{font-size:13.5px;color:var(--fg-2);margin-top:3px;line-height:1.5}
.footnote{width:min(1100px,100%);margin-top:14px;font-size:12.5px;color:var(--fg-3)}

/* ---------- playground ---------- */
.play{width:min(1100px,100%);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
.twin{background:var(--term);border-color:rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.28)}
.twin .mwin-bar{background:var(--term-bar);border-color:rgba(255,255,255,.06)}
.twin .mwin-title{color:var(--term-dim)}
.twin .term{height:clamp(320px,calc(var(--vh) - 380px),470px)}
.side{display:grid;gap:14px}
.side .panel{padding:20px 22px}
.side h3{margin:0;font-size:16px;font-weight:700}
.side p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--fg-2)}
.cmds{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cmds button{font-family:var(--mono);font-size:12.5px;min-height:32px;padding:0 11px;border-radius:8px;border:1px solid var(--line);background:var(--panel-solid);cursor:pointer;transition:transform .2s cubic-bezier(.2,.9,.3,1.4)}
.cmds button:hover{transform:translateY(-1px);border-color:var(--accent)}
.lnk{display:flex;align-items:center;gap:14px;text-decoration:none}
.lnk .ico{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center}
.lnk .ico svg{width:24px;height:24px}
.lnk .go{margin-left:auto;font-size:13px;font-weight:600;color:var(--fg-2);white-space:nowrap}
.lnk:hover .go{color:var(--accent)}
.orb-ico{background:radial-gradient(circle at 35% 35%,#FFB3C9,#E0466F 60%,#7A1735);position:relative}
.orb-ico::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;right:-4px;bottom:-4px;background:radial-gradient(circle at 35% 35%,#BDE6FF,#3D9BF0 60%,#163F78);box-shadow:0 0 0 2px var(--panel-solid)}

/* ---------- terminal (window + inline) ---------- */
.win{position:fixed;z-index:70;left:50%;top:50%;width:min(680px,calc(100vw - 32px));height:min(440px,calc(100vh - 140px));margin:0;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--term) 96%,transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.4);display:flex;flex-direction:column;will-change:transform,opacity;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.win.zoomed{width:min(980px,calc(100vw - 32px));height:min(640px,calc(100vh - 120px))}
.win-bar{height:36px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--term-bar);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.tl{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;color:rgba(0,0,0,.55)}
.tl svg{width:8px;height:8px;opacity:0}
.win-bar:hover .tl svg{opacity:1}
.tl-c{background:#FF5F57}.tl-m{background:#FEBC2E}.tl-z{background:#28C840}
.win-title{flex:1;text-align:center;font-size:12.5px;color:var(--term-dim);margin-right:52px}
.term{flex:1;overflow:auto;padding:12px 16px 16px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--term-fg);cursor:text;overscroll-behavior:contain}
.term pre{margin:0;font:inherit;white-space:pre-wrap;word-break:break-word}
.term .p{color:var(--term-prompt)}
.term .d{color:var(--term-dim)}
.term .ok{color:var(--term-ok)}
.term .e{color:#FF8A80}
.term .dir{color:#8EC5FF;font-weight:700}
.term a{color:#8EC5FF}
.line-in{display:flex;gap:8px}
.line-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--term-fg);font:inherit;caret-color:var(--term-prompt);padding:0}

/* ---------- about-me.txt ---------- */
.textedit{width:min(880px,100%)}
.te-tools{display:flex;align-items:center;justify-content:center;padding:10px 14px;background:var(--panel-bar);border-bottom:1px solid var(--line)}
.seg{display:inline-flex;padding:3px;border-radius:9px;background:rgba(var(--ink),.07)}
.seg button{border:0;background:transparent;min-height:32px;padding:0 16px;border-radius:7px;font-size:13.5px;font-weight:600;color:var(--fg-2);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--panel-solid);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.te-paper{background:var(--panel-solid);padding:34px clamp(22px,5vw,56px) 30px;min-height:330px}
.te-paper p{margin:0 0 14px;font-size:17px;line-height:1.7;max-width:62ch}
.te-paper .sig{margin-top:22px;color:var(--fg-3);font-size:15px}
.caret::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-3px;background:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- contact ---------- */
.contact{width:min(1100px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.mails{display:grid;gap:10px}
.mail{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:var(--panel-solid);border:1px solid var(--line)}
.mail .lbl{font-size:12px;color:var(--fg-3)}
.mail .addr{font-size:16px;font-weight:600;user-select:all;-webkit-user-select:all;word-break:break-all}
.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.soc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel-solid);border:1px solid var(--line);text-decoration:none;cursor:pointer;text-align:left;transition:transform .2s cubic-bezier(.2,.9,.3,1.4)}
.soc:hover{transform:translateY(-2px)}
.soc .ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center}
.soc .ic svg{width:20px;height:20px}
.soc .t1{font-weight:600;font-size:14px}
.soc .t2{font-size:12px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc > span:last-child{min-width:0}
.foot{width:min(1100px,100%);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--fg-3)}
.foot .mono{font-family:var(--mono)}

/* ---------- phone-only pieces stay out of the desktop ---------- */
.page{display:contents}
.apps,.pdots,.appbar,.homebar{display:none}

/* ---------- phones & small tablets: an iPhone home screen; each section opens as a full-screen app ---------- */
@media (max-width:900px){
  html,body{height:100%;overflow:hidden}
  .menubar{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mb-sub,.mb-sec,#mbClock,.dots,.folders,.veil{display:none}
  body.app-open .menubar{display:none}
  #branches,body.away #branches{opacity:.35}
  .win{display:none !important}

  .desk{height:var(--vh);min-height:0;padding:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .desk::-webkit-scrollbar{display:none}
  .page{--colw:calc((min(100vw,480px) - 40px - 42px)/4);
    flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;overflow-x:hidden;
    display:grid;grid-template-columns:repeat(4,var(--colw));grid-auto-rows:calc(var(--colw) + 6px);grid-auto-flow:row dense;gap:14px;justify-content:center;align-content:start;
    padding:calc(env(safe-area-inset-top,0px) + 50px) max(20px,env(safe-area-inset-right,0px)) 170px max(20px,env(safe-area-inset-left,0px))}
  .widget,.hero{position:relative;inset:auto !important;width:auto !important;height:auto !important;min-height:0;transform:none;grid-column:span 2;grid-row:span 2;border-radius:22px}
  .hero,#w-spot,#w-sched{grid-column:span 4}
  .hero{display:block;text-align:left;padding:18px;overflow:hidden;pointer-events:auto;background:var(--glass);border:1px solid var(--glass-edge);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--glass-shadow);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
  .hero-inner{max-width:none}
  .hero h1{font-size:clamp(21px,6.2vw,28px);line-height:1.1}
  .hero p{margin:8px 0 0;font-size:13px;line-height:1.45;max-width:none;text-wrap:pretty}
  .status{margin-top:10px;font-size:12px;padding:5px 10px 5px 8px}
  #w-ava{padding:0}
  #w-cal{padding:14px}
  #w-spot{grid-template-columns:auto minmax(0,1fr);padding:14px;gap:14px}
  .vinyl{width:auto;height:100%;aspect-ratio:1}
  .disc{width:86%;height:86%}
  #w-weather{padding:14px}
  .wx-now{font-size:30px}
  .wx-days{grid-template-columns:repeat(3,1fr);margin-top:8px}
  .wx-days > div:nth-child(n+4){display:none}
  #w-clock{display:grid;place-items:center}
  #clockSvg{width:88%;height:88%}
  #w-sched{padding:14px 16px}
  #w-dc{grid-column:span 4;padding:14px 16px}
  #w-note{min-height:0;padding:14px 12px 10px;transform:rotate(-1.5deg)}
  #w-note:hover{transform:rotate(-1.5deg)}
  .note-list{gap:1px;font-size:12.5px}
  .note-list label{min-height:22px}

  .apps{display:grid;grid-column:span 4;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .apps.a2{grid-column:span 2;grid-row:span 2;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .app{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-width:0;border:0;background:none;padding:0;cursor:pointer;text-decoration:none;color:var(--fg);-webkit-tap-highlight-color:transparent}
  .app-ic{width:100%;max-width:62px;aspect-ratio:1;border-radius:23%;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s cubic-bezier(.2,.9,.3,1.4),filter .2s}
  .app-ic svg{width:56%;height:56%}
  .app-lb{font-size:11.5px;font-weight:500;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app:active .app-ic{transform:scale(.9);filter:brightness(.88)}
  .ai-edu{background:linear-gradient(#8C8CFF,#5B5BE6)}
  .ai-proj{background:linear-gradient(#5AB6FF,#1E7CF2)}
  .ai-skill{background:linear-gradient(#5BE584,#1FB84A)}
  .ai-play{background:linear-gradient(#FF8FAB,#E0466F)}
  .ai-about{background:#FFFFFF}
  .ai-contact{background:linear-gradient(#FFB547,#F28C28)}

  .pdots{display:flex;position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 112px);justify-content:center;gap:8px;z-index:41;pointer-events:none;transition:opacity .2s}
  .pdots i{width:7px;height:7px;border-radius:50%;background:rgba(var(--ink),.25);transition:background .25s}
  .pdots i.on{background:var(--fg)}
  .dock-wrap{bottom:calc(10px + env(safe-area-inset-bottom,0px));transition:opacity .2s}
  .dock{width:min(100%,440px);height:86px;justify-content:space-around;align-items:center;padding:12px 14px;border-radius:32px}
  .dk{width:60px;height:60px}
  .dk-x,.dock .sep,.dk .tip,.dk .run{display:none}
  body.app-open .dock-wrap,body.app-open .pdots{opacity:0;pointer-events:none}

  /* sections are apps */
  .sec{position:fixed;inset:0;z-index:65;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg);justify-content:flex-start;min-height:0;will-change:transform,opacity;
    padding-block:calc(env(safe-area-inset-top,0px) + 72px) calc(env(safe-area-inset-bottom,0px) + 56px);padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .sec:not(.open){display:none !important}
  .sec .kicker{display:none}
  .sec h2{margin-top:0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:20px}
  .inst-body{grid-template-columns:1fr}
  .inst-side{display:none}
  .inst-main{padding:22px 18px}
  .log .mini{width:80px}
  #du-an{display:block;height:auto;padding-block:calc(env(safe-area-inset-top,0px) + 72px) calc(env(safe-area-inset-bottom,0px) + 56px);padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  #du-an .sec-sub{display:none}
  .proj-stage{position:static;height:auto;min-height:0;overflow:visible;padding:0}
  .counter{display:none}
  .proj-deck{flex:none;display:grid;gap:22px}
  .proj-card{position:relative;inset:auto !important;transform:none !important;filter:none !important}
  .proj-card .body{grid-template-columns:1fr;padding:22px 18px;overflow:visible}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skills,.play,.contact{grid-template-columns:1fr}
  .sk{grid-template-columns:90px minmax(0,1fr) 40px;gap:10px}
  .socials{grid-template-columns:1fr}
  .twin .term{height:min(380px,calc(var(--vh) - 300px))}
  .textedit .te-paper{padding:24px 20px}

  .appbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:66;align-items:center;height:calc(env(safe-area-inset-top,0px) + 52px);
    padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line)}
  .app-back{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent);font-size:16px;font-weight:500;min-height:44px;padding:0 8px;cursor:pointer}
  .app-title{position:absolute;left:50%;transform:translateX(-50%);font-weight:700;font-size:16px;white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis}
  .homebar{display:grid;place-items:center;position:fixed;left:0;right:0;bottom:0;z-index:66;height:calc(env(safe-area-inset-bottom,0px) + 30px);border:0;background:none;padding:0 0 env(safe-area-inset-bottom,0px);cursor:pointer;touch-action:none}
  .homebar i{width:134px;height:5px;border-radius:3px;background:var(--fg);opacity:.8}
}
@media (max-width:420px){ .steps{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .disc,.note-list input.holo,#w-note.shake,.active .st,.caret::after{animation:none}
  .toast{transition:opacity .2s}
  .widget,.widget:hover,#w-note:hover,.btn,.soc,.fold svg{transition:none}
  .widget:hover,.btn:hover,.soc:hover{transform:none}
  .pbar.anim i{transition:none}
}