/* ============================================================================
   assets/css/home-v3.css — AU One Home, visual layer v3 (2026-10-05)
   ----------------------------------------------------------------------------
   Owner: "make the Home look more enhanced and professional, simple design …
   dark mode real dark black, not dark green … recognizable, with motion and
   effects … enhance the mobile view too so it will not look outdated. Don't
   touch the working code."

   PRESENTATION ONLY. Loaded by index.html alone, after its own stylesheets.
   It restyles the existing DOM (ids, classes and every script untouched) and
   pairs with assets/js/home-v3.js, which adds purely decorative elements
   (the self-drawing elevation, the gliding nav highlight, count-ups, the
   cursor spotlight). Delete both files and Home is exactly what it was.

   Specificity: the desktop shell already carries four stacked style layers,
   some with 4-class selectors, so desktop rules here use a doubled id
   (#deskShell#deskShell) and phone rules use body:is(.au-in,#h3) — both
   out-rank every existing non-!important rule without touching them.

   Desktop (>=1024px) stays dark-only, as it always has been, now on true
   black. The phone layout follows the light / dark setting: dark is true
   black, light keeps its existing palette with the new structure.
   ========================================================================== */

/* ── shared motion ─────────────────────────────────────────────────────────── */
@keyframes h3draw{ to{ stroke-dashoffset:0 } }
@keyframes h3rise{ from{ transform:translateY(105%) } to{ transform:none } }
@keyframes h3up{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes h3fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes h3kb{ from{ transform:scale(1.1) translate(1.2%,.8%) } to{ transform:scale(1.01) translate(-.8%,-.4%) } }
@keyframes h3fill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes h3spin{ to{ transform:rotate(360deg) } }
@keyframes h3line{ from{ width:0 } to{ width:28px } }
@keyframes h3ping{ 0%{ box-shadow:0 0 0 0 rgba(98,196,142,.5) } 70%{ box-shadow:0 0 0 6px rgba(98,196,142,0) } 100%{ box-shadow:0 0 0 0 rgba(98,196,142,0) } }

/* keyboard hint: desktop only (phones have no Ctrl K) */
.h3-kbd{ display:none }

/* the elevation drawing (both layouts) */
.h3-bp{ position:absolute; pointer-events:none; z-index:0; overflow:visible; transition:opacity .6s cubic-bezier(.22,.9,.24,1) }
.h3-bp *{ fill:none; stroke:var(--h3-draw,rgba(180,196,106,.55)); stroke-width:1; vector-effect:non-scaling-stroke }
.h3-bp .t{ stroke-width:.6; opacity:.75 }
.h3-bp .d{ stroke-dasharray:1; stroke-dashoffset:1; animation:h3draw 2.2s cubic-bezier(.22,.9,.24,1) forwards }
.h3-bp text{ fill:var(--h3-draw,rgba(180,196,106,.55)); stroke:none; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:.08em; opacity:0; animation:h3fade .6s ease 1.9s forwards }

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP SHELL (>=1024px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #deskShell#deskShell{
    --h3-bg:#050505; --h3-panel:#0b0b0b; --h3-raised:#111111; --h3-hover:#171717;
    --h3-line:rgba(255,255,255,.07); --h3-line2:rgba(255,255,255,.13);
    --h3-ink:#f2f2ee; --h3-ink2:#b8b8b1; --h3-mut:#7f7f78;
    --h3-acc:#b4c46a; --h3-acc-ink:#0a0b05; --h3-acc-soft:rgba(180,196,106,.12); --h3-acc-line:rgba(180,196,106,.38);
    --h3-good:#62c48e; --h3-bad:#e2665c;
    --h3-grid:rgba(255,255,255,.045); --h3-draw:rgba(180,196,106,.55);
    --h3-ease:cubic-bezier(.22,.9,.24,1); --h3-spring:cubic-bezier(.34,1.4,.44,1);
    --h3-shadow:0 1px 0 rgba(255,255,255,.035) inset, 0 24px 60px -32px rgba(0,0,0,.95);
    --h3-display:"Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
    --h3-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
    /* the shell's own names, re-pointed so every existing rule turns neutral */
    --ink:var(--h3-ink); --mut:#8b8b85; --mut2:var(--h3-mut); --line:var(--h3-line); --hair:var(--h3-line);
    --olive:var(--h3-acc); --cyan:var(--h3-ink);
    color-scheme:dark;
    background:var(--h3-bg);
    color:var(--h3-ink);
    font-family:var(--h3-display);
    gap:12px; padding:12px;
  }
  #deskShell#deskShell .ds-scroll{ scrollbar-width:thin; scrollbar-color:#262626 transparent }
  #deskShell#deskShell .ds-scroll::-webkit-scrollbar{ width:8px }
  #deskShell#deskShell .ds-scroll::-webkit-scrollbar-thumb{ background:#232323; border-radius:8px; border:2px solid transparent; background-clip:padding-box }

  /* ── floating panels on black ───────────────────────────────────────────── */
  #deskShell#deskShell .ds-side,
  #deskShell#deskShell .ds-head,
  #deskShell#deskShell .ds-foot{
    background:var(--h3-panel); border:1px solid var(--h3-line); border-radius:16px; box-shadow:var(--h3-shadow);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  #deskShell#deskShell .ds-aside{ background:transparent; border:0; padding:0 2px 16px 0; gap:12px }
  #deskShell#deskShell .ds-main{ padding:0 4px 28px 0 }

  /* ── sidebar ────────────────────────────────────────────────────────────── */
  #deskShell#deskShell .ds-side{ position:relative; padding:16px 10px 12px }
  #deskShell#deskShell .ds-brand{ padding:2px 8px 14px; margin-bottom:2px }
  #deskShell#deskShell .ds-brand .lg{ border-radius:11px; box-shadow:0 0 0 1px var(--h3-acc-line), 0 10px 24px -12px var(--h3-acc-line) }
  #deskShell#deskShell .ds-brand b{ font-family:var(--h3-display); font-weight:800; font-size:14.5px; letter-spacing:-.01em; color:var(--h3-ink) }
  #deskShell#deskShell .ds-brand small{ font-family:var(--h3-mono); font-weight:500; font-size:9.5px; letter-spacing:.16em; color:var(--h3-mut) }
  #deskShell#deskShell .ds-navlabel{ font-family:var(--h3-mono); font-weight:500; font-size:9.5px; letter-spacing:.18em; color:var(--h3-mut); padding:12px 10px 6px }
  #deskShell#deskShell .ds-nav{ position:relative; gap:1px }
  #deskShell#deskShell .ds-nav a{
    position:relative; z-index:1; height:36px; padding:0 10px; gap:11px; border-radius:10px;
    font-size:13px; font-weight:600; color:var(--h3-ink2); background:transparent; transition:color .18s, background .18s;
  }
  #deskShell#deskShell .ds-nav a svg{ opacity:.8; transition:opacity .2s, color .2s }
  #deskShell#deskShell .ds-nav a:hover{ color:var(--h3-ink); background:transparent }
  #deskShell#deskShell .ds-nav a.on{ color:var(--h3-ink); background:var(--h3-hover); box-shadow:inset 0 0 0 1px var(--h3-line2) }
  #deskShell#deskShell .ds-nav a.on svg{ color:var(--h3-acc); opacity:1 }
  #deskShell#deskShell .ds-nav a.on::before{ left:-1px; width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--h3-acc); box-shadow:0 0 12px var(--h3-acc) }
  /* when home-v3.js has mounted the gliding highlight, it draws the active state */
  #deskShell#deskShell .ds-side.h3-glide .ds-nav a.on{ background:transparent; box-shadow:none }
  #deskShell#deskShell .ds-side.h3-glide .ds-nav a.on::before{ display:none }
  #deskShell#deskShell .h3-pill{
    position:absolute; left:10px; right:10px; top:0; height:36px; z-index:0; border-radius:10px; pointer-events:none;
    background:var(--h3-hover); box-shadow:inset 0 0 0 1px var(--h3-line2);
    transition:transform .38s var(--h3-spring), height .3s var(--h3-ease), opacity .25s; opacity:0;
  }
  #deskShell#deskShell .h3-pill.on{ opacity:1 }
  #deskShell#deskShell .h3-pill::before{ content:""; position:absolute; left:-1px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--h3-acc); box-shadow:0 0 12px var(--h3-acc); transition:opacity .2s }
  #deskShell#deskShell .h3-pill.peek::before{ opacity:.35 }
  #deskShell#deskShell .ds-nav .cbadge{ font-family:var(--h3-mono); font-weight:600; font-size:10px; min-width:20px; height:18px; padding:0 6px; border-radius:999px; background:var(--h3-bad); color:#fff; border:0; display:inline-grid; place-items:center; margin-left:auto }

  /* ── header ─────────────────────────────────────────────────────────────── */
  #deskShell#deskShell .ds-head{ padding:0 12px; gap:12px }
  #deskShell#deskShell .ds-crumbs{ font-family:var(--h3-display); font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--h3-ink) }
  #deskShell#deskShell .ds-head .gsearch-box{
    height:38px; border-radius:11px; background:var(--h3-raised); border:1px solid var(--h3-line); box-shadow:none;
    transition:border-color .2s, box-shadow .2s;
  }
  #deskShell#deskShell .ds-head .gsearch-box:hover{ border-color:var(--h3-line2) }
  #deskShell#deskShell .ds-head .gsearch-box:focus-within{ border-color:var(--h3-acc-line); box-shadow:0 0 0 3px var(--h3-acc-soft) }
  #deskShell#deskShell .ds-head .gsearch-input{ color:var(--h3-ink); font-family:var(--h3-display) }
  #deskShell#deskShell .h3-kbd{ display:inline-block; font-family:var(--h3-mono); font-size:10.5px; padding:2px 7px; border-radius:6px; border:1px solid var(--h3-line2); color:var(--h3-ink2); white-space:nowrap; pointer-events:none; transition:opacity .2s }
  #deskShell#deskShell .gsearch-box:focus-within .h3-kbd{ opacity:0 }
  #deskShell#deskShell .ds-ibtn{
    width:38px; height:38px; border-radius:11px; background:var(--h3-raised); border:1px solid var(--h3-line); color:var(--h3-ink2);
    transition:transform .15s var(--h3-spring), border-color .2s, color .2s;
  }
  #deskShell#deskShell .ds-ibtn:hover{ border-color:var(--h3-line2); color:var(--h3-ink); background:var(--h3-raised); transform:none }
  #deskShell#deskShell .ds-ibtn:active{ transform:scale(.94) }
  #deskShell#deskShell #dsBellSlot #aurem-bell{ width:38px; height:38px; border-radius:11px; background:var(--h3-raised); border:1px solid var(--h3-line); color:var(--h3-ink2) }
  #deskShell#deskShell .ds-prof{ height:38px; padding:0 12px 0 4px; border-radius:11px; background:var(--h3-raised); border:1px solid var(--h3-line) }
  #deskShell#deskShell .ds-prof:hover{ border-color:var(--h3-line2); background:var(--h3-raised) }
  #deskShell#deskShell .ds-prof .av{ width:30px; height:30px; border-radius:9px }
  #deskShell#deskShell .ds-prof .pn{ font-weight:700; color:var(--h3-ink) }
  #deskShell#deskShell .ds-prof .pr{ font-family:var(--h3-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--h3-mut) }

  /* ── hero: a drafting sheet with a drawing that draws itself ─────────────── */
  #deskShell#deskShell .ds-hero{
    background:var(--h3-panel); border:1px solid var(--h3-line); border-radius:20px; box-shadow:var(--h3-shadow);
    padding-top:28px; padding-left:28px; padding-bottom:24px; margin-bottom:12px; isolation:isolate;
  }
  /* the right padding is the slideshow's reserved column from 1280 up — keep it */
  @media (max-width:1279px){ #deskShell#deskShell .ds-hero{ padding-right:28px } }
  #deskShell#deskShell .ds-hero::before{
    content:""; position:absolute; inset:0; z-index:0; width:auto; height:auto; left:0; top:0; filter:none; pointer-events:none;
    background-image:linear-gradient(var(--h3-grid) 1px,transparent 1px),linear-gradient(90deg,var(--h3-grid) 1px,transparent 1px);
    background-size:28px 28px;
    -webkit-mask-image:radial-gradient(520px 340px at var(--hx,26%) var(--hy,40%),#000 0%,rgba(0,0,0,.35) 60%,transparent 100%);
            mask-image:radial-gradient(520px 340px at var(--hx,26%) var(--hy,40%),#000 0%,rgba(0,0,0,.35) 60%,transparent 100%);
  }
  #deskShell#deskShell .ds-hero::after{ display:none }
  #deskShell#deskShell .ds-hero > .h3-bp{ position:absolute; z-index:0; right:24px; left:auto; bottom:6px; width:min(52%,620px); opacity:.34 }
  #deskShell#deskShell .ds-hero:hover > .h3-bp{ opacity:.62 }
  /* with the project slideshow on the right, the drawing sits in the text column */
  #deskShell#deskShell .ds-hero:has(.ds-slides:not([hidden])) > .h3-bp{ left:20px; right:auto; width:calc(100% - min(52%,600px) - 50px); max-width:560px }
  #deskShell#deskShell .ds-hero .greet{
    font-family:var(--h3-mono); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--h3-acc); margin-bottom:0;
  }
  #deskShell#deskShell .ds-hero .greet::before{ content:""; width:18px; height:1px; background:var(--h3-acc); flex:none }
  #deskShell#deskShell .ds-hero h1{
    font-family:var(--h3-display); font-weight:900; font-size:clamp(32px,3.2vw,54px); line-height:.98; letter-spacing:-.035em;
    margin:14px 0 0; max-width:none; text-wrap:balance;
  }
  #deskShell#deskShell .ds-hero h1 .g{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--h3-ink); -webkit-text-fill-color:currentColor; animation:none }
  #deskShell#deskShell .ds-hero h1 .h3-w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.07em }
  #deskShell#deskShell .ds-hero h1 .h3-w > span{ display:inline-block; animation:h3rise .9s var(--h3-ease) both }
  #deskShell#deskShell .ds-hero h1 .h3-stop{ color:var(--h3-acc) }
  #deskShell#deskShell .ds-hero .sub{ font-size:14px; line-height:1.55; color:var(--h3-ink2); margin-top:10px; max-width:46ch }

  /* stat tiles */
  #deskShell#deskShell .ds-stats{ gap:10px; margin-top:20px }
  #deskShell#deskShell .ds-stat,
  #deskShell#deskShell .ds-stat-people .pr{
    position:relative; overflow:hidden; padding:14px 14px 12px; border-radius:13px;
    background:rgba(17,17,17,.78); border:1px solid var(--h3-line); box-shadow:none;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    transition:transform .25s var(--h3-spring), border-color .25s, background .25s;
    animation:h3up .7s var(--h3-ease) both;
  }
  #deskShell#deskShell .ds-stat-people{ display:contents; background:none; border:0; padding:0; animation:none }
  #deskShell#deskShell .ds-stat-appr{ display:none }
  #deskShell#deskShell .ds-stat:nth-child(1){ animation-delay:.45s }
  #deskShell#deskShell .ds-stat:nth-child(2){ animation-delay:.52s }
  #deskShell#deskShell .ds-stat-people .pr:nth-child(1){ animation-delay:.59s }
  #deskShell#deskShell .ds-stat-people .pr:nth-child(2){ animation-delay:.66s }
  #deskShell#deskShell .ds-stat::before{ display:none }
  #deskShell#deskShell .ds-stat::after,
  #deskShell#deskShell .ds-stat-people .pr::after{
    content:""; position:absolute; left:14px; bottom:10px; height:2px; width:28px; border-radius:2px; background:var(--h3-acc);
    animation:h3line 1s var(--h3-ease) .7s both;
  }
  #deskShell#deskShell .ds-stat:hover,
  #deskShell#deskShell .ds-stat-people .pr:hover{ transform:translateY(-3px); border-color:var(--h3-acc-line); background:rgba(23,23,23,.86); box-shadow:none }
  #deskShell#deskShell .ds-stat .v,
  #deskShell#deskShell .ds-stat-people .v.mini{
    font-family:var(--h3-display); font-weight:800; font-size:clamp(24px,2.1vw,32px); letter-spacing:-.03em; line-height:1;
    color:var(--h3-ink); font-variant-numeric:tabular-nums;
  }
  #deskShell#deskShell .ds-stat .k,
  #deskShell#deskShell .ds-stat-people .k.mini{
    font-family:var(--h3-mono); font-weight:500; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--h3-mut);
    margin:8px 0 10px;
  }

  /* project slideshow */
  #deskShell#deskShell .ds-slides{ border:1px solid var(--h3-line2); border-radius:14px; background:#000; box-shadow:0 24px 50px -24px rgba(0,0,0,.9) }
  #deskShell#deskShell .ds-slide img{ transform:scale(1.06); filter:saturate(.92) contrast(1.04) }
  #deskShell#deskShell .ds-slide.on img{ animation:h3kb 7s linear both }
  #deskShell#deskShell .ds-slides::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,transparent 28%,transparent 58%,rgba(0,0,0,.78) 100%) }
  #deskShell#deskShell .ds-slidecap{
    background:none; padding:0 16px 14px; font-family:var(--h3-display); font-weight:800; font-size:20px; letter-spacing:-.02em; text-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  #deskShell#deskShell .ds-slidedots{ left:14px; right:auto; top:12px; gap:4px; flex-wrap:wrap; max-width:calc(100% - 28px) }
  #deskShell#deskShell .ds-slidedots i{ width:6px; height:3px; border-radius:3px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; transition:width .35s var(--h3-ease), background .3s }
  #deskShell#deskShell .ds-slidedots i.on{ width:26px; background:rgba(255,255,255,.3) }
  #deskShell#deskShell .ds-slidedots i.on::after{ content:""; position:absolute; inset:0; background:#fff; transform-origin:left; animation:h3fill 5.2s linear both }
  #deskShell#deskShell .ds-slidenav{ background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:10px }
  #deskShell#deskShell .ds-slidenav:hover{ background:var(--h3-acc); color:var(--h3-acc-ink) }

  /* ── modules ────────────────────────────────────────────────────────────── */
  #deskShell#deskShell .ds-sectitle{
    font-family:var(--h3-display); font-weight:800; font-size:18px; letter-spacing:-.01em; color:var(--h3-ink);
    padding:18px 4px 0; margin:0 0 14px; display:flex; align-items:baseline; gap:12px; text-transform:none;
  }
  #deskShell#deskShell .ds-sectitle::before{ display:none }
  #deskShell#deskShell .ds-sectitle .hint{ font-family:var(--h3-mono); font-weight:500; font-size:10.5px; letter-spacing:.06em; color:var(--h3-mut); text-transform:none }
  #deskShell#deskShell .ds-grid{ gap:10px }
  #deskShell#deskShell .ds-mod{
    --mx:50%; --my:50%;
    flex-direction:column; align-items:flex-start; gap:10px; min-height:150px; padding:16px;
    background:var(--h3-raised); border:1px solid var(--h3-line); border-radius:14px; box-shadow:none;
    transition:transform .28s var(--h3-spring), border-color .25s, background .25s;
    animation:h3up .6s var(--h3-ease) both;
  }
  #deskShell#deskShell .ds-mod:nth-child(1){ animation-delay:.5s }  #deskShell#deskShell .ds-mod:nth-child(2){ animation-delay:.55s }
  #deskShell#deskShell .ds-mod:nth-child(3){ animation-delay:.6s }  #deskShell#deskShell .ds-mod:nth-child(4){ animation-delay:.65s }
  #deskShell#deskShell .ds-mod:nth-child(5){ animation-delay:.7s }  #deskShell#deskShell .ds-mod:nth-child(6){ animation-delay:.75s }
  #deskShell#deskShell .ds-mod:nth-child(7){ animation-delay:.8s }  #deskShell#deskShell .ds-mod:nth-child(8){ animation-delay:.85s }
  #deskShell#deskShell .ds-mod:nth-child(n+9){ animation-delay:.9s }
  #deskShell#deskShell .ds-mod.wide{ flex-direction:column; align-items:flex-start; gap:10px }
  /* cursor spotlight: a soft fill and a lit border that follow the pointer */
  #deskShell#deskShell .ds-mod::before{
    display:block; content:""; position:absolute; inset:-1px; right:auto; top:auto; width:auto; height:auto; border-radius:inherit; filter:none;
    background:radial-gradient(260px circle at var(--mx) var(--my),var(--h3-acc-soft),transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none;
  }
  #deskShell#deskShell .ds-mod::after{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; transform:none; pointer-events:none;
    background:radial-gradient(200px circle at var(--mx) var(--my),var(--h3-acc-line),transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;
    opacity:0; transition:opacity .3s;
  }
  #deskShell#deskShell .ds-mod:hover{ transform:translateY(-3px); background:var(--h3-raised); border-color:var(--h3-line2); box-shadow:none }
  #deskShell#deskShell .ds-mod:hover::before,
  #deskShell#deskShell .ds-mod:hover::after{ opacity:1; transform:none }
  #deskShell#deskShell .ds-mod .mico,
  #deskShell#deskShell .ds-mod.wide .mico{
    width:38px; height:38px; border-radius:11px; background:var(--h3-hover); border:1px solid var(--h3-line); color:var(--h3-ink2); box-shadow:none;
    transition:background .25s, color .25s, transform .3s var(--h3-spring), border-color .25s;
  }
  #deskShell#deskShell .ds-mod .mico svg,
  #deskShell#deskShell .ds-mod.wide .mico svg{ width:18px; height:18px; color:currentColor; stroke:currentColor }
  #deskShell#deskShell .ds-mod:hover .mico{ background:var(--h3-acc); border-color:var(--h3-acc); color:var(--h3-acc-ink); transform:rotate(-6deg) scale(1.06); box-shadow:0 10px 22px -10px var(--h3-acc-line) }
  #deskShell#deskShell .ds-mod .mbody{ margin-top:auto; position:relative; z-index:1 }
  #deskShell#deskShell .ds-mod .mt,
  #deskShell#deskShell .ds-mod.wide .mt{ font-family:var(--h3-display); font-weight:800; font-size:14.5px; letter-spacing:-.01em; color:var(--h3-ink); flex-wrap:wrap; gap:6px 8px }
  #deskShell#deskShell .ds-mod.wide .mt{ font-size:16px }
  #deskShell#deskShell .ds-mod .md{ font-size:12px; line-height:1.45; color:var(--h3-mut); margin-top:5px; max-width:52ch }
  #deskShell#deskShell .ds-mod .mtag{ font-family:var(--h3-mono); font-weight:600; font-size:9.5px; letter-spacing:.08em; padding:2px 7px; border-radius:999px; white-space:nowrap; border:1px solid var(--h3-acc-line); color:var(--h3-acc); background:var(--h3-acc-soft) }
  #deskShell#deskShell .ds-mod .mtag.soon{ border-color:var(--h3-line2); color:var(--h3-mut); background:transparent }
  #deskShell#deskShell .ds-mod .marrow,
  #deskShell#deskShell .ds-mod.wide .marrow{
    top:16px; right:16px; bottom:auto; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
    color:var(--h3-mut); opacity:1; transform:none; transition:transform .3s var(--h3-spring), color .2s, background .2s;
  }
  #deskShell#deskShell .ds-mod:hover .marrow,
  #deskShell#deskShell .ds-mod.wide:hover .marrow{ color:var(--h3-ink); background:var(--h3-hover); transform:translate(2px,-2px) }
  #deskShell#deskShell .ds-mod:focus-visible{ outline:2px solid var(--h3-acc); outline-offset:2px }

  /* ── right rail ─────────────────────────────────────────────────────────── */
  #deskShell#deskShell .ds-card{ background:var(--h3-panel); border:1px solid var(--h3-line); border-radius:16px; box-shadow:var(--h3-shadow); padding:16px }
  #deskShell#deskShell .ds-card .ch{ font-family:var(--h3-mono); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--h3-mut) }
  #deskShell#deskShell .ds-profcard{ position:relative; overflow:hidden; padding:22px 18px 16px }
  #deskShell#deskShell .ds-profcard::before{ content:""; position:absolute; inset:0 0 auto; height:90px; background:radial-gradient(120% 100% at 50% 0%,var(--h3-acc-soft),transparent 70%); pointer-events:none }
  #deskShell#deskShell .ds-profhead{ position:relative }
  #deskShell#deskShell .ds-profav{ width:76px; height:76px; position:relative; border:1px solid var(--h3-line2); box-shadow:0 0 0 6px var(--h3-panel), 0 0 0 7px var(--h3-acc-line) }
  #deskShell#deskShell .ds-profid .nm{ font-family:var(--h3-display); font-weight:800; font-size:16px; letter-spacing:-.01em; color:var(--h3-ink) }
  #deskShell#deskShell .ds-profid .rl{ font-family:var(--h3-mono); font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--h3-acc); color:var(--h3-acc-ink); border:0 }
  #deskShell#deskShell .ds-profid .em{ color:var(--h3-mut) }
  #deskShell#deskShell .ds-profrow{ border-top:1px solid var(--h3-line) }
  #deskShell#deskShell .ds-profrow dt{ font-family:var(--h3-mono); font-weight:500; font-size:9.5px; letter-spacing:.12em; color:var(--h3-mut) }
  #deskShell#deskShell .ds-profrow dd{ color:var(--h3-ink); font-weight:600 }
  #deskShell#deskShell .ds-profchip{ border-color:var(--h3-acc-line); color:var(--h3-acc); background:var(--h3-acc-soft) }
  #deskShell#deskShell .ds-profopen{ height:38px; border-radius:11px; background:var(--h3-raised); border:1px solid var(--h3-line2); color:var(--h3-ink); font-weight:700; transition:background .2s, border-color .2s, transform .15s var(--h3-spring) }
  #deskShell#deskShell .ds-profopen:hover{ background:var(--h3-acc-soft); border-color:var(--h3-acc-line); color:var(--h3-ink); transform:none }
  #deskShell#deskShell .ds-profopen svg{ transition:transform .25s var(--h3-spring) }
  #deskShell#deskShell .ds-profopen:hover svg{ transform:translateX(3px) }
  #deskShell#deskShell .ds-profopen:active{ transform:scale(.98) }

  /* what's new as a release timeline */
  #deskShell#deskShell .ds-notes{ gap:0 }
  #deskShell#deskShell .ds-note{ position:relative; padding:0 0 14px 18px; border-top:0 }
  #deskShell#deskShell .ds-note::before{ content:""; position:absolute; left:4px; top:9px; bottom:0; width:1px; background:var(--h3-line2) }
  #deskShell#deskShell .ds-note::after{ content:""; position:absolute; left:0; top:4px; width:9px; height:9px; border-radius:50%; background:var(--h3-panel); border:2px solid var(--h3-acc); box-sizing:border-box }
  #deskShell#deskShell .ds-notes > .ds-note:first-child::after{ background:var(--h3-acc); box-shadow:0 0 0 4px var(--h3-acc-soft) }
  #deskShell#deskShell .ds-notever{ font-family:var(--h3-mono); font-weight:600; font-size:10px; letter-spacing:.04em; background:transparent; border:0; padding:0; color:var(--h3-acc) }
  #deskShell#deskShell .ds-notedate{ font-family:var(--h3-mono); font-size:10px; color:var(--h3-mut) }
  #deskShell#deskShell .ds-notettl{ font-size:12.5px; font-weight:700; color:var(--h3-ink) }
  #deskShell#deskShell .ds-noteul li{ color:var(--h3-ink2) }
  #deskShell#deskShell .ds-noteolder summary{ font-family:var(--h3-mono); font-size:10.5px; color:var(--h3-mut) }

  /* system status + footer */
  #deskShell#deskShell .ds-sysrow{ color:var(--h3-ink2) }
  #deskShell#deskShell .ds-sysdot.ok,
  #deskShell#deskShell .ds-foot .dot.ok{ background:var(--h3-good); animation:h3ping 2.6s var(--h3-ease) infinite }
  #deskShell#deskShell .ds-foot{ font-family:var(--h3-mono); font-size:10.5px; letter-spacing:.03em; color:var(--h3-mut); opacity:1; padding:0 16px }
  #deskShell#deskShell .ds-foot b{ color:var(--h3-ink2); font-weight:500 }
  #deskShell#deskShell .ds-footcredit{ color:var(--h3-mut) }
  #deskShell#deskShell .ds-empty{ color:var(--h3-mut) }
}

/* ════════════════════════════════════════════════════════════════════════════
   PHONE / TABLET HOME (<1024px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  /* true black when dark; the light palette is untouched */
  html:not([data-theme="light"]){
    --au-bg:#050505; --au-bg-glow:rgba(180,196,106,.07);
    --au-surface:#0e0e0e; --au-surface-raised:#151515;
    --au-text:#f2f2ee; --au-text-muted:#8b8b85; --au-border:rgba(255,255,255,.08);
    --au-accent:#b4c46a; --au-accent-ink:#0a0b05; --au-accent-soft:rgba(180,196,106,.13);
    --au-glass:rgba(16,16,16,.72);
    --h3-draw:rgba(180,196,106,.5);
  }
  html[data-theme="light"]{ --h3-draw:rgba(92,106,34,.4) }
  html:not([data-theme="light"]) body .bg{ background:#050505 }
  html:not([data-theme="light"]) body .bp g{ stroke:#262624 }
  body{ font-family:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif }

  /* header */
  body:is(.au-in,#h3) .gbtn,
  body:is(.au-in,#h3) #mBellSlot #aurem-bell,
  body:is(.au-in,#h3) .mprofchip .av,
  body:is(.au-in,#h3) #mCommunitySlot .aucb{ width:42px; height:42px; border-radius:13px; background:var(--au-surface); border:1px solid var(--au-border) }
  body:is(.au-in,#h3) .mbrand b{ font-weight:900; letter-spacing:-.03em }
  body:is(.au-in,#h3) .mbrand span{ font-weight:600; letter-spacing:.14em; font-size:12px; color:var(--au-text-muted) }

  /* greeting card with the drawing behind it */
  body:is(.au-in,#h3) .mdash{
    position:relative; overflow:hidden; isolation:isolate; margin:10px 0 18px; padding:20px 16px 16px; gap:12px;
    background:var(--au-surface); border:1px solid var(--au-border); border-radius:22px;
  }
  body:is(.au-in,#h3) .mdash::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:linear-gradient(var(--au-border) 1px,transparent 1px),linear-gradient(90deg,var(--au-border) 1px,transparent 1px);
    background-size:24px 24px;
    -webkit-mask-image:radial-gradient(120% 90% at 100% 0%,rgba(0,0,0,.7),transparent 70%); mask-image:radial-gradient(120% 90% at 100% 0%,rgba(0,0,0,.7),transparent 70%);
  }
  body:is(.au-in,#h3) .mdash > .h3-bp{ right:-18%; top:6px; width:96%; opacity:.42 }
  body:is(.au-in,#h3) .mdash > *:not(.h3-bp){ position:relative; z-index:1 }
  body:is(.au-in,#h3) .mdash-greet{ font-weight:900; font-size:clamp(26px,8vw,34px); line-height:1.02; letter-spacing:-.035em; text-wrap:balance }
  body:is(.au-in,#h3) .mdash-sub{ font-size:13.5px; margin-top:-4px }
  body:is(.au-in,#h3) .mdash-grid{ gap:8px; margin-top:4px }
  body:is(.au-in,#h3) .mdash-stat{
    border-radius:16px; padding:12px 11px; background:var(--au-surface-raised); border:1px solid var(--au-border);
    animation:h3up .55s cubic-bezier(.22,.9,.24,1) both;
  }
  body:is(.au-in,#h3) .mdash-stat:nth-child(1){ animation-delay:.15s } body:is(.au-in,#h3) .mdash-stat:nth-child(2){ animation-delay:.21s }
  body:is(.au-in,#h3) .mdash-stat:nth-child(3){ animation-delay:.27s } body:is(.au-in,#h3) .mdash-stat:nth-child(4){ animation-delay:.33s }
  body:is(.au-in,#h3) .mdash-ic{ background:var(--au-accent-soft); color:var(--au-accent); border-radius:10px }
  body:is(.au-in,#h3) .mdash-stat .v{ font-weight:800; font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
  body:is(.au-in,#h3) .mdash-stat .k{ font-weight:600; font-size:9px; letter-spacing:.04em; text-transform:uppercase }
  body:is(.au-in,#h3) #mStPeopleCard .v{ font-size:18px }

  /* search, attention, section titles */
  body:is(.au-in,#h3) .gsearch-box{ height:50px; border-radius:16px; background:var(--au-surface); border:1px solid var(--au-border) }
  body:is(.au-in,#h3) .msec{ font-weight:800; letter-spacing:-.02em; font-size:19px }
  body:is(.au-in,#h3) .mattn-row{ border-radius:16px }

  /* module tiles */
  body:is(.au-in,#h3) .cards{ gap:9px }
  body:is(.au-in,#h3) .card{
    --mx:50%; --my:50%;
    min-height:124px; border-radius:20px; padding:15px 14px 13px; background:var(--au-surface); border:1px solid var(--au-border);
    animation:h3up .55s cubic-bezier(.22,.9,.24,1) both;
    transition:transform .2s cubic-bezier(.34,1.4,.44,1), background-color .24s, border-color .24s;
  }
  body:is(.au-in,#h3) .card::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
    background:radial-gradient(220px circle at var(--mx) var(--my),var(--au-accent-soft),transparent 60%); opacity:0; transition:opacity .3s;
  }
  body:is(.au-in,#h3) .card:nth-child(1){ animation-delay:.3s }  body:is(.au-in,#h3) .card:nth-child(2){ animation-delay:.34s }
  body:is(.au-in,#h3) .card:nth-child(3){ animation-delay:.38s } body:is(.au-in,#h3) .card:nth-child(4){ animation-delay:.42s }
  body:is(.au-in,#h3) .card:nth-child(5){ animation-delay:.46s } body:is(.au-in,#h3) .card:nth-child(6){ animation-delay:.5s }
  body:is(.au-in,#h3) .card:nth-child(n+7){ animation-delay:.54s }
  body:is(.au-in,#h3) .card:active{ transform:scale(.97) }
  body:is(.au-in,#h3) .card:active::before{ opacity:1 }
  body:is(.au-in,#h3) .card .crow{ position:relative; z-index:1 }
  body:is(.au-in,#h3) .ico{ width:42px; height:42px; border-radius:13px; background:var(--au-accent-soft); border:1px solid transparent; transition:background .25s, transform .3s cubic-bezier(.34,1.4,.44,1) }
  body:is(.au-in,#h3) .card:active .ico{ background:var(--au-accent); transform:rotate(-6deg) scale(1.05) }
  body:is(.au-in,#h3) .card:active .ico svg{ color:var(--au-accent-ink) }
  body:is(.au-in,#h3) .ct{ font-weight:800; font-size:15px; letter-spacing:-.02em }
  @media (hover:hover){
    body:is(.au-in,#h3) .card:hover{ transform:translateY(-2px); background:var(--au-surface); border-color:var(--au-accent) }
    body:is(.au-in,#h3) .card:hover::before{ opacity:1 }
    body:is(.au-in,#h3) .card:hover .ico{ background:var(--au-accent); transform:rotate(-6deg) scale(1.05) }
    body:is(.au-in,#h3) .card:hover .ico svg{ color:var(--au-accent-ink) }
  }

  /* floating glass tab bar with a sliding indicator */
  body:is(.au-in,#h3) .tabs{
    border-radius:24px; background:var(--au-glass); border:1px solid var(--au-border);
    backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:0 22px 44px -18px rgba(0,0,0,.75);
  }
  body:is(.au-in,#h3) .tabs.h3-rel{ position:relative }
  body:is(.au-in,#h3) .tabs .h3-tind{
    position:absolute; top:6px; bottom:6px; left:0; width:0; border-radius:18px; pointer-events:none; z-index:0;
    background:var(--au-accent-soft); border:1px solid color-mix(in srgb,var(--au-accent) 40%,transparent);
    transition:transform .42s cubic-bezier(.34,1.4,.44,1), width .3s cubic-bezier(.22,.9,.24,1); opacity:0;
  }
  body:is(.au-in,#h3) .tabs .h3-tind.on{ opacity:1 }
  body:is(.au-in,#h3) .tabs .tab{ position:relative; z-index:1 }
  body:is(.au-in,#h3) .tabs.h3-glide .tab.on .tibox{ background:transparent }
  body:is(.au-in,#h3) .tabs.h3-glide .tab.on .tibox::after{ display:none }
  body:is(.au-in,#h3) .tab.on svg{ transform:translateY(-1px) scale(1.08); transition:transform .3s cubic-bezier(.34,1.4,.44,1) }
}

/* ── motion safety: the app's own Reduce-motion switch and the OS setting ── */
@media (prefers-reduced-motion:reduce){
  .h3-bp .d{ animation:none; stroke-dashoffset:0 }
  .h3-bp text{ animation:none; opacity:1 }
  #deskShell#deskShell .ds-hero h1 .h3-w > span,
  #deskShell#deskShell .ds-stat, #deskShell#deskShell .ds-stat-people .pr,
  #deskShell#deskShell .ds-stat::after, #deskShell#deskShell .ds-stat-people .pr::after,
  #deskShell#deskShell .ds-mod, #deskShell#deskShell .ds-slide.on img,
  #deskShell#deskShell .ds-slidedots i.on::after,
  #deskShell#deskShell .ds-sysdot.ok, #deskShell#deskShell .ds-foot .dot.ok,
  body:is(.au-in,#h3) .card, body:is(.au-in,#h3) .mdash-stat{ animation:none !important }
  #deskShell#deskShell .h3-pill, body:is(.au-in,#h3) .tabs .h3-tind{ transition:none }
}
body.reduce .h3-bp .d{ animation:none; stroke-dashoffset:0 }
body.reduce .h3-bp text{ animation:none; opacity:1 }
body.reduce .card, body.reduce .mdash-stat{ animation:none !important }