/* Spiral (scoped) */
  .spiral-section{ padding:32px 0; }
  #spiral{ width:min(420px,90vw); height:min(420px,90vw); margin:12px auto; display:block }
  .spiral-section .wrap{ display:flex; justify-content:center; }
  .spiral-section svg{ width:100%; max-width:min(420px,90vw); height:auto; display:block; margin:0 auto; }
  #spiral circle{ fill: var(--fg); opacity:.6 }
    :root{
      --bg:#000;
      --fg:#fff;
      --muted:#b4b4b4;
      --line:#1a1a1a;
      --card:#0a0a0a;
      --hue:223;
      --sat:10%;
      --accent:#7dd3fc;
      --good:#86efac;
      --bad:#fca5a5;
      --pill:#111;
      --radius:18px;
      --maxw:980px;
      --bg-layer-top:#000000;
      --bg-layer-mid:#0a0a0a;
      --bg-layer-bottom:#000000;
      --bg-art: radial-gradient(1200px 800px at -15% -10%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), radial-gradient(1000px 700px at 115% 110%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%), linear-gradient(180deg, var(--bg-layer-top) 0%, var(--bg-layer-mid) 60%, var(--bg-layer-bottom) 100%);
      --nav-bg: rgba(255,255,255,.86);
      --nav-fg: #0a0a0a;
      --nav-btn-hover: rgba(0,0,0,.08);
      --btn-hover: #111;
      --chip-active-bg: #111;
      --chip-active-fg: #fff;
      --chip-border: #444;
      --card-hover: #0d0d0d;
      --dot-bg-color:#333;
      --dot-fg-color:#ffffff;
      --bg-pattern-color:rgba(255,255,255,0.15);
      --dot-control-width:126px;
      --dot-control-height:264px;
      --sidebar-width:clamp(260px, 22vw, 360px);
      --font-scale-base:1;
      --font-scale-adjust:1;
      --font-scale: calc(var(--font-scale-base) * var(--font-scale-adjust));
      --font-rem-base: calc(1rem / var(--font-scale-adjust)); /* keeps base rem size for UI unaffected by slider */
      --visual-safe-top: env(safe-area-inset-top, 0px);
      --visual-safe-bottom: env(safe-area-inset-bottom, 0px);
      color-scheme: light dark;
    }
    *{box-sizing:border-box}
    html{
      scroll-behavior:smooth;
      font-size:calc(16px * var(--font-scale));
      /* Prevent horizontal page panning/scroll on iPhone */
      overflow-x: clip; /* better than hidden on modern Safari to avoid creating a new formatting context */
      overscroll-behavior-x: none; /* contain accidental sideways swipes */
      touch-action: pan-y; /* allow vertical scrolling, block horizontal page pan */
    }
    /* Redundant safety on body as some mobile Safari versions ignore html overflow */
    body{
      overflow-x: clip;
      overscroll-behavior-x: none;
      touch-action: pan-y;
    }
    @media (max-width:720px){
      :root{ --font-scale-base:1.08; }
    }
    body{
      margin:0;
      color:var(--fg);
      background-color:var(--bg);
      background-image:var(--bg-art);
      background-attachment:fixed;
      background-repeat:no-repeat;
      transition: background-color .25s ease, color .25s ease, background-image .25s ease;
      font-family:-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      font-size:1rem;
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    a, a:visited{
      color:var(--fg);
    }

    body::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background-image:radial-gradient(circle at 2px 2px, var(--bg-pattern-color) 1px, transparent 1px);
      background-size:32px 32px;
      opacity:0.4;
      transition: opacity .25s ease, background-color .25s ease, background-image .25s ease;
    }

    main :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,span,small,strong,em,a),
    .content :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,span,small,strong,em,a) {
      transition: font-size .3s ease;
    }

    @media (prefers-reduced-motion: reduce) {
      body { transition: none; }
      main :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,span,small,strong,em,a),
      .content :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,span,small,strong,em,a) {
        transition: none;
      }
    }

    html[data-theme="dark"]{
      --bg:#000000;
      --fg:#ffffff;
      --muted:#b4b4b4;
      --line:#1a1a1a;
      --card:#0a0a0a;
      --accent:#7dd3fc;
      --nav-bg: rgba(255,255,255,.86);
      --nav-fg: #0a0a0a;
      --nav-btn-hover: rgba(0,0,0,.08);
      --btn-hover:#111;
      --chip-active-bg: #111;
      --chip-active-fg: #fff;
      --chip-border: #444;
      --card-hover: #0d0d0d;
      --dot-bg-color:#333;
      --dot-fg-color:#ffffff;
      --bg-pattern-color:rgba(255,255,255,0.15);
    }

    html[data-theme="light"]{
      --bg:#ffffff;
      --fg:#0a0a0a;
      --muted:#5f6368;
      --line:#e6e6e6;
      --card:#ffffff;
      --pill:#f3f3f3;
      --bg-layer-top:#ffffff;
      --bg-layer-mid:#fafafa;
      --bg-layer-bottom:#ffffff;
      --bg-art:
        radial-gradient(1200px 800px at -15% -10%, rgba(0,0,0,.06), rgba(0,0,0,0) 60%),
        radial-gradient(1000px 700px at 115% 110%, rgba(0,0,0,.05), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, var(--bg-layer-top) 0%, var(--bg-layer-mid) 60%, var(--bg-layer-bottom) 100%);
      --nav-bg: rgba(0,0,0,.82);
      --nav-fg: #ffffff;
      --nav-btn-hover: rgba(255,255,255,.12);
      --btn-hover:#f5f5f5;
      --chip-active-bg:#111;
      --chip-active-fg:#fff;
      --chip-border:#bdbdbd;
      --card-hover:#fafafa;
      --dot-bg-color:#222;
      --dot-fg-color:#ffffff;
      --bg-pattern-color:rgba(0,0,0,0.07);
    }

    /* LAYOUT */
    .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,24px)}
    section{padding:clamp(14px,3.2vh,32px) 0; scroll-margin-top:var(--nav-offset, 96px)}
    /* Override vendor full-height on content sections to remove big gaps */
    .content .section{
      height:auto !important;
      min-height:0 !important;
    }
    @media (max-width:980px){ .content{ margin-top:0; } }
    section + section{border-top:0px solid var(--line)}
    h1,h2,h3{margin:0}
    h2{font-size:calc(clamp(22px,4vw,36px) * var(--font-scale)); letter-spacing:-.01em}
    h3{font-size:calc(clamp(18px,2.6vw,22px) * var(--font-scale)); font-weight:600}
    h1{font-size:calc(clamp(28px,6vw,52px) * var(--font-scale)); line-height:1.15; letter-spacing:-.01em}
    .lead{font-size:calc(clamp(16px,2.2vw,20px) * var(--font-scale)); color:var(--muted); margin-top:.6rem}
    .hero{
      padding:clamp(12px, 3vw, 32px) 0 clamp(18px, 4vw, 48px);
      position:relative;
      margin:0;
      top:clamp(-8px, 0.8vw, 12px);
    }
    .hero .cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem}
    .stats{display:grid; gap:clamp(12px,2vw,18px); grid-template-columns:repeat(2,1fr)}
    @media(min-width:860px){ .stats{grid-template-columns:repeat(4,1fr)} }
    .stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
    .stat__value{font-weight:700; font-size:calc(clamp(20px,4vw,34px) * var(--font-scale))}
    .stat__label{color:var(--muted); margin-top:4px}
    .quote{font-size:calc(clamp(18px,2.6vw,24px) * var(--font-scale)); line-height:1.35; padding:18px 22px; border-left:4px solid var(--accent); background:var(--card); border-radius:var(--radius); border:1px solid var(--line)}
    .icon{width:1.1em;height:1.1em;vertical-align:-0.175em;flex:0 0 auto}
    .with-icon{display:inline-flex;align-items:center;gap:.45rem}
    .btn .icon{width:1.05em;height:1.05em}
    p{margin:.6rem 0 0}
    .muted{color:var(--muted)}
    .hairline{border-top:1px solid var(--line)}
    .grid{display:grid; gap:clamp(16px,2.6vw,24px); grid-template-columns:1fr}
    @media (min-width:860px){ .cols-2{grid-template-columns:1fr 1fr} .cols-3{grid-template-columns:1fr 1fr 1fr} }

    /* INTRO BAR */
    .intro{padding:0}
    .intro__bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(--muted)}
    .dot{width:4px; height:4px; border-radius:50%; background:#666; display:inline-block}

    /* CARDS */
    .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,2.1vw,24px); transition:transform .28s ease, background .28s ease}
    .card:hover{transform:translateY(-2px); background:var(--card-hover)}

    /* PDF viewer */
    .pdf-embed{
      width:100%;
      height:min(84vh, 1200px);
      border:1px solid var(--line);
      border-radius:var(--radius);
      display:block;
      background:var(--card);
    }

    /* TIMELINE */
    .timeline{position:relative; padding-left:48px}
    .timeline:before{content:""; position:absolute; left:24px; top:0; bottom:0; width:1px; background:var(--line); transform:translateX(-12px); opacity:0; transition:transform .6s ease, opacity .6s ease; will-change:transform, opacity}
    .timeline.timeline--revealed:before{transform:none; opacity:1}
    .tl{position:relative; margin:10px 0 16px}
    .tl:before{content:none}
    .timeline .entry-location{
      font-family:"Iowan Old Style","Palatino","Times New Roman",serif;
      font-weight:500;
      letter-spacing:.01em;
      font-size:calc(.8em * var(--font-scale));
    }
    .timeline h3.entry-heading{
      display:flex;
      flex-direction:column;
      gap:.15em;
      margin:0 0 .45em;
      font-size:calc(clamp(1.05rem, 1vw + 1rem, 1.18rem) * var(--font-scale));
      line-height:1.25;
    }
    .timeline .entry-title{
      font-family:"DM Sans","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
      font-weight:650;
      letter-spacing:-0.01em;
      color:var(--fg);
    }
    .timeline .entry-subtitle{
      font-family:"Iowan Old Style","Palatino","Times New Roman",serif;
      font-size:calc(.94em * var(--font-scale));
      font-weight:500;
      color:color-mix(in srgb, var(--fg) 78%, transparent 22%);
    }
    .timeline .entry-meta{
      display:inline-flex;
      align-items:center;
      gap:.25em;
      font-size:calc(.85em * var(--font-scale));
      letter-spacing:.05em;
      color:color-mix(in srgb, var(--fg) 62%, transparent 38%);
    }
    .timeline .entry-period{
      font-family:"SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;
      position:absolute;
      right:20%;
      top:60%;
      transform:translate3d(0, -60%, 0);
      padding:0.4em 1em;
      border-radius:999px;
      background:color-mix(in srgb, var(--card) 82%, transparent);
      border:1px solid color-mix(in srgb, var(--fg) 22%, transparent 78%);
      color:color-mix(in srgb, var(--fg) 85%, transparent 15%);
      letter-spacing:.08em;
      font-size:calc(0.75em * var(--font-scale));
      opacity:0;
      transition:opacity .28s ease, transform .28s ease;
      pointer-events:none;
      white-space:nowrap;
      box-shadow:0 18px 36px rgb(0 0 0 / 0.18);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      z-index:2;
    }
    .timeline .tl.card{
      position:relative;
    }
    .timeline .tl.card:hover .entry-period,
    .timeline .tl.card:focus-within .entry-period{
      opacity:1;
      transform:translate3d(0, -50%, 0);
    }
    @media (hover: none){
      .timeline .entry-period{
        opacity:0;
        pointer-events:none;
      }
      .timeline .tl.card:active .entry-period,
      .timeline .tl.card:focus-within .entry-period{
        opacity:1;
        pointer-events:auto;
        transform:translate3d(0, -50%, 0);
      }
    }
    @media (prefers-reduced-motion: reduce){
      .timeline:before{transform:none !important; opacity:1 !important; transition:none !important}
    }
    ul{margin:.6rem 0 0 1.1rem} li{margin:.35rem 0}

    /* BADGES / PILLS */
    .pill{display:inline-flex; align-items:center; gap:.4rem; padding:.26rem .6rem; border-radius:999px; background:var(--pill); border:1px solid var(--line); font-size:.86rem; color:var(--muted)}
    .stack{display:flex; flex-wrap:wrap; gap:.4rem}

    /* FILTER CHIPS */
    .chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:12px}
    .chip{cursor:pointer; user-select:none}
    .chip[aria-pressed="true"]{background:var(--chip-active-bg); color:var(--chip-active-fg); border-color:var(--chip-border)}

    /* FOOTER */
    footer{padding:56px 0; color:var(--muted); text-align:center}
    .footer__inner{max-width:min(var(--maxw),92vw); margin-inline:auto; display:grid; gap:clamp(12px,2vw,22px); align-items:start; text-align:initial; padding-inline:clamp(16px,4vw,24px)}
    .footer__meta{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:clamp(.6rem,1.6vw,1.5rem); row-gap:.35rem}
    .footer__meta > *{margin:0}
    @media(min-width:860px){
      .footer__inner{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); justify-content:space-between}
      .footer__links{justify-content:flex-end}
    }
    .footer__brand{
      font-family:"Engravers Roman Bold BT","Engravers MT",serif;
      font-weight:50;
      letter-spacing:.03em;
      text-transform:uppercase;
      color:var(--fg)
    }
    .footer__note{margin:0}
    .footer__links{display:flex; flex-wrap:wrap; gap:.6rem 1rem; justify-content:flex-start}
    .footer__links a{color:var(--fg); text-decoration:none}
    .footer__links a:hover{text-decoration:underline; text-underline-offset:4px}
    .footer__copy{margin:0; font-size:.92rem}

    /* FLOAT ACTION */
    .to-top{
      position:fixed;
      right:18px;
      bottom:calc(var(--visual-safe-bottom, env(safe-area-inset-bottom, 0px)) + 18px);
      display:none;
      z-index:300; /* ensure above content, canvas, and dropdown */
    }
    .to-top.show{display:inline-flex}

    @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

    /* PRINT */
    @media print{ .to-top, .chips, .btn{display:none !important} body{background:#fff; color:#000} .card{border-color:#ddd} }

    @media (prefers-color-scheme: light){
      html:not([data-theme="dark"]){
        --bg:#ffffff;
        --fg:#0a0a0a;
        --muted:#5f6368;
        --line:#e6e6e6;
        --card:#ffffff;
        --pill:#f3f3f3;
        --bg-art:
          radial-gradient(1200px 800px at -15% -10%, rgba(0,0,0,.06), rgba(0,0,0,0) 60%),
          radial-gradient(1000px 700px at 115% 110%, rgba(0,0,0,.05), rgba(0,0,0,0) 55%),
          linear-gradient(180deg, #ffffff 0%, #fafafa 60%, #ffffff 100%);
        --nav-bg: rgba(0,0,0,.82);
        --nav-fg: #ffffff;
        --nav-btn-hover: rgba(255,255,255,.12);
        --btn-hover:#f5f5f5;
        --chip-active-bg:#111;
        --chip-active-fg:#fff;
        --chip-border:#bdbdbd;
        --card-hover:#fafafa;
        --dot-bg-color:#222;
        --dot-fg-color:#ffffff;
        --bg-pattern-color:rgba(0,0,0,0.07);
      }
    }

    /* DOT CONTROLS */
    .dot-controls{
      padding:clamp(28px,5vw,48px) 0;
      position:relative;
      isolation:isolate;
    }
    .dot-controls__wrap{
      display:flex;
      flex-direction:column;
      gap:clamp(20px,3vw,32px);
    }
    .dot-controls__header{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
    }
    .dot-controls__title{
      font-weight:600;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:calc(var(--font-rem-base) * 0.95);
    }
    .dot-controls__subtitle{
      margin:0;
      margin-top:.35rem;
      color:var(--muted);
      font-size:calc(var(--font-rem-base) * 0.9);
    }
    .dot-controls__grid{
      display:grid;
      gap:clamp(18px,3.5vw,40px);
      grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
      justify-items:center;
    }
    .dot-controls__control{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:0.15rem;
      text-align:center;
    }
    .dot-control-surface{
      position:relative;
      width:var(--dot-control-width);
      height:var(--dot-control-height);
      max-width:100%;
      border-radius:calc(var(--dot-control-width) * 0.18);
      cursor:pointer;
      overflow:hidden;
      transition:transform .28s ease;
    }
    .dot-control-surface:focus-visible{
      outline:2px solid var(--accent);
      outline-offset:4px;
    }
    .dot-control-surface:hover{
      transform:translateY(-6px);
    }
    .dot-control-surface canvas{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
    }
    .dot-control__label{
      margin:0;
      text-transform:uppercase;
      letter-spacing:.03em;
      font-size:calc(var(--font-rem-base) * 0.48);
      color:var(--fg);
    }
    .dot-control__value{
      margin:0;
      font-size:calc(var(--font-rem-base) * 0.62);
      color:var(--accent);
      font-weight:600;
    }
    .mode-display{
      display:flex;
      align-items:center;
      gap:calc(var(--font-rem-base) * 0.55);
      letter-spacing:.1em;
      text-transform:uppercase;
      font-size:calc(var(--font-rem-base) * 0.85);
      color:var(--fg);
      transition:color .3s ease;
    }
    .mode-indicator{
      display:inline-block;
      width:calc(var(--font-rem-base) * 0.51);
      height:calc(var(--font-rem-base) * 0.51);
      border-radius:50%;
      background-color:var(--fg);
      transition:background-color .3s ease, transform .45s ease;
    }
    html[data-theme="light"] .mode-indicator{
      transform:scale(1.15);
    }
    .content-layout{
      display:grid;
      grid-template-columns:minmax(0, var(--maxw)) minmax(260px, var(--sidebar-width));
      gap:clamp(24px,5vw,64px);
      align-items:flex-start;
      justify-content:space-between;
      width:100%;
      margin-inline:auto;
      padding-inline:clamp(16px,4vw,24px);
    }
    .content-layout > main{
      min-width:0;
      width:100%;
      max-width:var(--maxw);
    }
    .ambient-controls.dot-controls{
      padding:clamp(4px,1vw,12px) 0 clamp(12px,2vw,18px) clamp(4px,1.2vw,12px);
    }
    .ambient-controls{
      width:auto;
      max-width:clamp(160px, 20vw, 220px);
      justify-self:end;
      align-self:start;
      border-radius:clamp(14px,2.4vw,20px);
      background:transparent;
      border:none;
      backdrop-filter:none;
      margin-left:auto;
      margin-right:0;
      margin-top:clamp(-16px,-2.4vw,-28px);
      --dot-control-width:60px;
      --dot-control-height:132px;
    }
    .ambient-controls .dot-controls__wrap{
      max-width:none;
      margin:0;
    }
    .ambient-controls .dot-controls__grid{
      display:grid;
      grid-auto-flow:column;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:clamp(10px, 1.6vw, 16px);
      justify-items:center;
    }
    .ambient-controls .dot-controls__control{
      align-items:center;
      gap:0.1rem;
    }
    .ambient-controls .dot-control-surface{
      width:var(--dot-control-width);
      height:var(--dot-control-height);
    }
    .dropdown__section--three .ambient-controls--mobile{
      display:none;
    }
    @media (min-width: 721px) and (max-width: 1024px){
      .content-layout{
        grid-template-columns:minmax(0, clamp(420px, 62vw, 760px)) minmax(200px, clamp(200px, 24vw, 240px));
        gap:clamp(18px, 3vw, 32px);
        align-items:flex-start;
      }
      .content-layout > main{
        max-width:clamp(420px, 62vw, 760px);
      }
      .hero{
        max-width:100%;
        margin-inline:0;
      }
      .hero .lead{
        max-width:60ch;
      }
      .ambient-controls{
        max-width:clamp(200px, 24vw, 220px);
        margin-top:clamp(-12px,-1vw,0);
      }
    }
    @media (max-width: 720px){
      .content-layout{
        grid-template-columns:1fr;
        justify-content:stretch;
        padding-left:clamp(16px,4vw,24px);
        padding-right:clamp(16px,4vw,24px);
      }
      .ambient-controls{
        justify-self:stretch;
        max-width:none;
        margin-inline:auto;
        margin-top:clamp(16px,4vw,28px);
        align-self:stretch;
      }
    }
    @media (max-width:720px){
      .ambient-controls--desktop{
        display:none;
      }
      .ambient-controls .dot-controls__grid{
        display:flex;
        justify-content:center;
        align-items:flex-start;
        flex-wrap:nowrap;
        gap:clamp(10px, 4vw, 18px);
        overflow-x:auto;
        /* Keep horizontal scroll inside this element and enable momentum scrolling */
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        /* Allow horizontal panning inside this scroller even when the page blocks it */
        touch-action: pan-x;
        padding-bottom:4px;
      }
      .ambient-controls .dot-controls__control{
        flex:0 0 auto;
      }
      .dropdown__section--three .ambient-controls{
        align-self:end;
        justify-self:end;
        margin:0;
      }
      .dropdown__section--three .ambient-controls--mobile{
        display:block;
      }
      .ambient-controls--mobile{
        margin:0;
        padding:0;
        max-width:unset;
      }
      .ambient-controls--mobile.dot-controls{
        padding:0;
      }
      .ambient-controls--mobile .dot-controls__grid{
        justify-content:flex-end;
      }
      .dot-controls__header{align-items:flex-start;}
      .dot-control-surface{
        width:clamp(112px, 36vw, 148px);
        height:clamp(188px, 54vw, 244px);
        border-radius:calc(clamp(112px,36vw,148px) * 0.18);
      }
      .intro.wrap{
        padding-inline:0;
      }
      .hero{
        margin-left:0;
        margin-right:0;
        top:0;
      }
      .section-inner{
        padding-inline:clamp(10px, 3vw, 16px);
      }
      .section-inner > .wrap{
        padding-inline:clamp(10px, 3vw, 16px);
      }
      #education h2,
      #experience h2,
      #projects h2,
      #skills h2{
        font-size:calc(clamp(26px, 6vw, 40px) * var(--font-scale));
      }
    }
    @media (max-width:520px){
      .dot-control-surface{
        width:clamp(96px, 44vw, 128px);
        height:clamp(164px, 62vw, 218px);
        border-radius:calc(clamp(96px,44vw,128px) * 0.18);
      }
    }
/* --- Osmo Glowing Dots (scoped) --- */
.osmo-dots-section{
  padding:0;
  height:60vh;
  min-height:320px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:inherit;
  background-color:inherit;
}
.osmo-dots-wrap{ position:absolute; inset:0; }
.osmo-dots-container{
  position:absolute; inset:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:2em;
  pointer-events:none;
  font-size:16px; /* 1em dot; change to adjust density */
}
.osmo-dot{
  will-change: transform, background-color;
  transform-origin: center;
  background-color: var(--fg); /* base follows theme foreground (opposite of bg) */
  border-radius: 50%;
  width: 1em; height: 1em;
  position: relative;
  transform: translate(0);
}
  /* --- Osmo Ring (scoped) --- */
  .osmo-ring{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none; /* let clicks fall through to the dots */
    z-index:1; /* render above the dots */
  }
  .osmo-ring .ellipse{
    width:min(28vmin, 320px);
    aspect-ratio:1 / 1;
  }
  @media (max-width:720px){
    .osmo-ring .ellipse{
      width:clamp(200px, 60vmin, 320px);
    }
  }
  .osmo-ring .ellipse svg{
    width:100%;
    height:100%;
    transform:rotate(-40deg);
  }
  .osmo-ring text{
    fill:var(--fg);
    font:16px/1 -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  }
  /* --- Glass menu button (scoped to .glass-*) --- */
  @property --glass-angle-1 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
  }
  @property --glass-angle-2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
  }
  :root{
    --glass-hover-time: 400ms;
    --glass-hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
  }
  /* Button wrap */
  .glass-wrap{
    position: relative;
    z-index: 2;
    border-radius: 999vw;
    background: transparent;
    pointer-events: none; /* button inside re-enables */
    transition: all var(--glass-hover-time) var(--glass-hover-ease);
  }
  /* Shadow container */
  .glass-shadow{
    --shadow-cuttoff-fix: 2em;
    position: absolute;
    width: calc(100% + var(--shadow-cuttoff-fix));
    height: calc(100% + var(--shadow-cuttoff-fix));
    top: calc(0% - var(--shadow-cuttoff-fix) / 2);
    left: calc(0% - var(--shadow-cuttoff-fix) / 2);
    filter: blur(clamp(2px, 0.125em, 12px));
    overflow: visible;
    pointer-events: none;
  }
  .glass-shadow::after{
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: 999vw;
    background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
    width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
    height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
    top: calc(var(--shadow-cuttoff-fix) - 0.5em);
    left: calc(var(--shadow-cuttoff-fix) - 0.875em);
    padding: 0.125em;
    box-sizing: border-box;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: all var(--glass-hover-time) var(--glass-hover-ease);
    overflow: visible;
    opacity: 1;
  }
  /* Button base */
  .glass-btn{
    --border-width: clamp(1px, 0.0625em, 4px);
    all: unset;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    pointer-events: auto;
    z-index: 3;
    background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    border-radius: 999vw;
    box-shadow:
      inset 0 0.125em 0.125em rgba(0,0,0,0.05),
      inset 0 -0.125em 0.125em rgba(255,255,255,0.5),
      0 0.25em 0.125em -0.125em rgba(0,0,0,0.2),
      0 0 0.1em 0.25em inset rgba(255,255,255,0.2),
      0 0 0 0 rgba(255,255,255,1);
    backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
    transition: all var(--glass-hover-time) var(--glass-hover-ease);
    display:inline-flex;
    align-items:center;
  }
  .glass-btn:hover{
    transform: scale(0.975);
    backdrop-filter: blur(0.01em);
    -webkit-backdrop-filter: blur(0.01em);
    box-shadow:
      inset 0 0.125em 0.125em rgba(0,0,0,0.05),
      inset 0 -0.125em 0.125em rgba(255,255,255,0.5),
      0 0.15em 0.05em -0.1em rgba(0,0,0,0.25),
      0 0 0.05em 0.1em inset rgba(255,255,255,0.5),
      0 0 0 0 rgba(255,255,255,1);
  }
  .glass-btn:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .glass-btn span{
    position: relative;
    display: block;
    user-select: none;
    letter-spacing: -0.02em;
    font-weight: 600;
    font-size: 1rem;
    color: var(--nav-fg);
    -webkit-font-smoothing: antialiased;
    text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
    transition: all var(--glass-hover-time) var(--glass-hover-ease);
    padding-inline: 1.1em;
    padding-block: 0.55em;
  }
  .glass-btn:hover span{
    text-shadow: 0.025em 0.025em 0.025em rgba(0,0,0,0.12);
  }
  .glass-btn span::after{
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: calc(100% - var(--border-width));
    height: calc(100% - var(--border-width));
    top: calc(0% + var(--border-width) / 2);
    left: calc(0% + var(--border-width) / 2);
    box-sizing: border-box;
    border-radius: 999vw;
    overflow: clip;
    background: linear-gradient(
      var(--glass-angle-2),
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 40% 50%,
      rgba(255, 255, 255, 0) 55%
    );
    z-index: 3;
    mix-blend-mode: screen;
    pointer-events: none;
    background-size: 200% 200%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    transition:
      background-position calc(var(--glass-hover-time) * 1.25) var(--glass-hover-ease),
      --glass-angle-2 calc(var(--glass-hover-time) * 1.25) var(--glass-hover-ease);
  }
  .glass-btn:hover span::after{ background-position: 25% 50%; }
  .glass-btn:active span::after{
    background-position: 50% 15%;
    --glass-angle-2: -15deg;
  }
  @media (hover: none) and (pointer: coarse){
    .glass-btn span::after,
    .glass-btn:active span::after{ --glass-angle-2: -45deg; }
  }
  /* Outline */
  .glass-btn::after{
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 999vw;
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    top: calc(0% - var(--border-width) / 2);
    left: calc(0% - var(--border-width) / 2);
    padding: var(--border-width);
    box-sizing: border-box;
    background:
      conic-gradient(
        from var(--glass-angle-1) at 50% 50%,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0) 5% 40%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0) 60% 95%,
        rgba(0, 0, 0, 0.5)
      ),
      linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: all var(--glass-hover-time) var(--glass-hover-ease), --glass-angle-1 500ms ease;
    box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255,0.5);
  }
  .glass-btn:hover::after{ --glass-angle-1: -125deg; }
  .glass-btn:active::after{ --glass-angle-1: -75deg; }
  @media (hover: none) and (pointer: coarse){
    .glass-btn::after,
    .glass-btn:hover::after,
    .glass-btn:active::after{ --glass-angle-1: -75deg; }
  }
  /* Shadow hover/active via :has */
  .glass-wrap:has(.glass-btn:hover) .glass-shadow{
    filter: blur(clamp(2px, 0.0625em, 6px));
    transition: filter var(--glass-hover-time) var(--glass-hover-ease);
  }
  .glass-wrap:has(.glass-btn:hover) .glass-shadow::after{
    top: calc(var(--shadow-cuttoff-fix) - 0.875em);
    opacity: 1;
  }
  .glass-wrap:has(.glass-btn:active){ transform: rotate3d(1, 0, 0, 25deg); }
  .glass-wrap:has(.glass-btn:active) .glass-shadow{
    filter: blur(clamp(2px, 0.125em, 12px));
  }
  .glass-wrap:has(.glass-btn:active) .glass-shadow::after{
    top: calc(var(--shadow-cuttoff-fix) - 0.5em);
    opacity: 0.75;
  }
  .glass-wrap:has(.glass-btn:active) .glass-btn{
    box-shadow:
      inset 0 0.125em 0.125em rgba(0,0,0,0.05),
      inset 0 -0.125em 0.125em rgba(255,255,255,0.5),
      0 0.125em 0.125em -0.125em rgba(0,0,0,0.2),
      0 0 0.1em 0.25em inset rgba(255,255,255,0.2),
      0 0.225em 0.05em 0 rgba(0,0,0,0.05),
      0 0.25em 0 0 rgba(255,255,255,0.75),
      inset 0 0.25em 0.05em 0 rgba(0,0,0,0.15);
  }

/* Mobile: tighten left rail spacing for timeline */
@media (max-width: 720px){
  .timeline{ padding-left: 0px; }
  .to-top.glass-btn{
    box-shadow: none;
  }
  .to-top.glass-btn::after{
    box-shadow: none;
  }
  .timeline:before{ left: -10px; }
  /* Move the time period pill further right on small screens (closer to the card edge) */
  .timeline .entry-period{ right: 10px; }
}

/* === Square dot control center (override rounded corners) === */
.ambient-controls,
.ambient-controls.dot-controls,
.dot-controls,
.dot-control-surface{
  border-radius: 0 !important;
}