:root{
    --bg:#0a0e14;
    --bg-alt:#0f151d;
    --panel:#131a24;
    --line:#22303f;
    --accent:#4cc9f0;
    --accent2:#f5b942;
    --text:#e9eef2;
    --text-dim:#8ea0ad;
    --radius:14px;
    --text-scale:1;
    --mono:'JetBrains Mono','Courier New',monospace;
  }
  html[data-theme="light"]{
    --bg:#faf6ee;
    --bg-alt:#f2ebda;
    --panel:#fffdf7;
    --line:#e4d8c0;
    --accent:#6fa3c7;
    --accent2:#e2a366;
    --text:#3d3527;
    --text-dim:#8a7d68;
  }
  html[data-theme="blueprint"]{
    --bg:#0b2947;
    --bg-alt:#0f3159;
    --panel:#123a63;
    --line:#2c5680;
    --accent:#8fd3ff;
    --accent2:#ffd166;
    --text:#eaf4ff;
    --text-dim:#9fc3e0;
  }
  html[data-theme="terminal"]{
    --bg:#03110a;
    --bg-alt:#06180f;
    --panel:#082014;
    --line:#163a26;
    --accent:#3dffa0;
    --accent2:#ffcc66;
    --text:#dcffe9;
    --text-dim:#69a687;
  }
  html[data-theme="copper"]{
    --bg:#1a100a;
    --bg-alt:#231508;
    --panel:#2b1a0d;
    --line:#4a2f18;
    --accent:#e08a3c;
    --accent2:#ffce54;
    --text:#f5e6d3;
    --text-dim:#c9a37c;
  }
  html[data-theme="storm"]{
    --bg:#12121c;
    --bg-alt:#181826;
    --panel:#1e1e30;
    --line:#33334d;
    --accent:#a78bfa;
    --accent2:#f472b6;
    --text:#eae8f7;
    --text-dim:#9a94b8;
  }
  html[data-theme="ember"]{
    --bg:#1a0b0b;
    --bg-alt:#230f0f;
    --panel:#2b1212;
    --line:#4a1f1f;
    --accent:#e0503c;
    --accent2:#ff8a54;
    --text:#f5dcd3;
    --text-dim:#c98d7c;
  }
  html[data-theme="solar"]{
    --bg:#1a1608;
    --bg-alt:#231d09;
    --panel:#2b230d;
    --line:#4a3f18;
    --accent:#e0c23c;
    --accent2:#ff8c3c;
    --text:#f5f0d3;
    --text-dim:#c9bc7c;
  }
  html[data-textsize="small"]{--text-scale:0.88;}
  html[data-textsize="large"]{--text-scale:1.18;}

  .theme-surge-wrap{position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:9602;}
  .theme-surge-ring{
    position:absolute;top:0;left:0;border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    border:2px solid var(--surge-color,#4cc9f0);
    box-shadow:0 0 14px -2px var(--surge-color,#4cc9f0);
    opacity:0;
    animation:themeSurgeRing .5s cubic-bezier(.15,.7,.3,1) forwards;
  }
  .theme-surge-core{
    position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    background:var(--surge-color,#4cc9f0);
    box-shadow:0 0 26px 4px var(--surge-color,#4cc9f0);
    animation:themeSurgeCore .35s ease-out forwards;
  }
  @keyframes themeSurgeRing{
    0%{transform:translate(-50%,-50%) scale(0);opacity:.9;}
    100%{transform:translate(-50%,-50%) scale(1);opacity:0;}
  }
  @keyframes themeSurgeCore{
    0%{transform:translate(-50%,-50%) scale(0);opacity:1;}
    55%{transform:translate(-50%,-50%) scale(1);opacity:.95;}
    100%{transform:translate(-50%,-50%) scale(1.15);opacity:0;}
  }

  #powerFlicker{
    position:fixed;inset:0;z-index:9600;pointer-events:none;
    background:#000;opacity:0;
  }
  #powerFlicker.active{animation:powerFlicker .5s ease-in-out forwards;}
  @keyframes powerFlicker{
    0%{opacity:0;}
    45%{opacity:.6;}
    100%{opacity:0;}
  }
  #powerScanline{
    position:fixed;left:0;top:-4px;width:100%;height:3px;z-index:9601;pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--surge-color,#4cc9f0), transparent);
    box-shadow:0 0 14px 1px var(--surge-color,#4cc9f0);
    opacity:0;
  }
  #powerScanline.active{animation:powerScan .55s cubic-bezier(.3,0,.25,1) forwards;}
  @keyframes powerScan{
    0%{transform:translateY(0);opacity:1;}
    85%{opacity:1;}
    100%{transform:translateY(100vh);opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){
    .theme-surge-ring,.theme-surge-core,#powerFlicker.active,#powerScanline.active{animation:none;display:none;}
    .avatar-ring::after{animation:none;opacity:.7;}
    h1.name{animation:none;}
    .footer-spark{display:none;}
    .footer-ticker-fade{animation:none;}
    .footer-led{animation:none;opacity:.8;}
  }

  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);scrollbar-width:none;-ms-overflow-style:none;}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-appearance:none;appearance:none;}
  button::-moz-focus-inner{border:0;padding:0;}
  *::-webkit-scrollbar{display:none;width:0;height:0;}
  html{scroll-behavior:smooth;font-size:calc(100% * var(--text-scale));scrollbar-width:none;-ms-overflow-style:none;}
  html::-webkit-scrollbar{display:none;width:0;height:0;}
  body{
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent),
      var(--bg);
    background-color:var(--bg);
    background-attachment:fixed;
    color:var(--text);
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    transition:background-color .35s ease,color .35s ease;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  body::-webkit-scrollbar{display:none;width:0;height:0;}
  a{color:inherit;text-decoration:none;}
  ::selection{background:color-mix(in srgb, var(--accent) 35%, transparent);color:var(--text);}
  ::-moz-selection{background:color-mix(in srgb, var(--accent) 35%, transparent);color:var(--text);}

  #customScrollbar{
    position:fixed;top:0;right:0;height:100dvh;width:16px;z-index:998;
    display:flex;justify-content:flex-end;
    -webkit-tap-highlight-color:transparent;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  #customScrollbar.visible{opacity:1;pointer-events:auto;}
  #customScrollbar .scroll-track{
    position:relative;width:3px;height:calc(100% - 24px);margin:12px 5px 12px 0;
    background:linear-gradient(to bottom,
      transparent 0%, var(--line) 8%, var(--line) 92%, transparent 100%);
    border-radius:3px;
    transition:width .18s ease,background-color .35s ease,border-color .35s ease;
    cursor:pointer;
    overflow:visible;
  }
  #customScrollbar .scroll-track::before,
  #customScrollbar .scroll-track::after{
    content:'';position:absolute;left:50%;width:7px;height:7px;
    transform:translateX(-50%);border-radius:50%;
    background:var(--line);
    transition:background .15s linear,box-shadow .15s linear;
  }
  #customScrollbar .scroll-track::before{
    top:-9px;
    background:color-mix(in srgb, color-mix(in srgb, var(--accent) 85%, white 15%) var(--top-glow,0%), var(--line));
    box-shadow:0 0 9px 1px color-mix(in srgb, var(--accent) var(--top-glow,0%), transparent),
      0 0 3px color-mix(in srgb, white var(--top-glow,0%), transparent);
  }
  #customScrollbar .scroll-track::after{
    bottom:-9px;
    background:color-mix(in srgb, color-mix(in srgb, var(--accent2) 85%, white 15%) var(--bottom-glow,0%), var(--line));
    box-shadow:0 0 9px 1px color-mix(in srgb, var(--accent2) var(--bottom-glow,0%), transparent),
      0 0 3px color-mix(in srgb, white var(--bottom-glow,0%), transparent);
  }
  #customScrollbar:hover .scroll-track,
  #customScrollbar.dragging .scroll-track{width:4px;}
  #scrollThumb{
    position:absolute;left:50%;top:0;z-index:2;
    width:6px;min-height:38px;border-radius:5px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 92%, white 8%) 0%,
      var(--accent) 50%,
      color-mix(in srgb, var(--accent) 85%, black 15%) 100%);
    box-shadow:0 0 4px color-mix(in srgb, var(--accent) 30%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
    transition:width .18s ease,box-shadow .18s ease,background .2s ease;
    will-change:transform,height;
  }
  .track-fill{
    position:absolute;left:50%;top:0;width:5px;height:0;
    transform:translateX(-50%);
    background:
      repeating-linear-gradient(to bottom,
        transparent 0, transparent 6px,
        var(--bg) 6px, var(--bg) 8px),
      linear-gradient(to bottom, var(--accent), var(--accent2));
    border-radius:2.5px;opacity:.95;overflow:hidden;
    box-shadow:0 0 2px color-mix(in srgb, var(--accent2) 22%, transparent);
    transition:opacity .3s ease;
    will-change:height;
  }
  .track-fill.charging::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to top,
      transparent 0%, rgba(255,255,255,.7) 45%, transparent 88%);
    background-size:100% 220%;
    animation:chargeShimmer 850ms linear infinite;
  }
  @keyframes chargeShimmer{
    0%{background-position:0 120%;}
    100%{background-position:0 -100%;}
  }
  .scroll-trail{
    position:absolute;left:50%;top:0;width:6px;border-radius:5px;
    transform:translateX(-50%);
    pointer-events:none;opacity:0;z-index:1;
    filter:blur(.4px);
    transition:opacity .35s ease;
    will-change:opacity,transform,height;
  }
  #customScrollbar:hover .scroll-trail,
  #customScrollbar.dragging .scroll-trail{width:9px;}
  #scrollThumb::after{
    content:'';position:absolute;left:50%;top:6px;bottom:6px;width:1px;
    transform:translateX(-50%);
    background:color-mix(in srgb, var(--bg) 55%, transparent);
    border-radius:1px;
  }
  #customScrollbar:hover #scrollThumb,
  #customScrollbar.dragging #scrollThumb{
    width:9px;
  }
  #customScrollbar:hover #scrollThumb{
    box-shadow:0 0 6px color-mix(in srgb, var(--accent) 35%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  #customScrollbar.dragging #scrollThumb{
    box-shadow:0 0 14px color-mix(in srgb, var(--accent) 80%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  #customScrollbar.dragging #scrollThumb{
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--accent2) 92%, white 8%) 0%,
      var(--accent2) 50%,
      color-mix(in srgb, var(--accent2) 85%, black 15%) 100%);
    box-shadow:0 0 16px color-mix(in srgb, var(--accent2) 85%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--accent2) 55%, transparent);
  }
  .scroll-readout{
    position:absolute;top:0;right:calc(100% + 8px);
    transform:translateY(0);
    font-family:var(--mono);font-size:.66rem;letter-spacing:.5px;
    background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;
    padding:2px 6px;color:var(--accent);
    box-shadow:0 0 4px -2px var(--accent);
    white-space:nowrap;pointer-events:none;
    opacity:0;transition:opacity .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .scroll-readout::after{
    content:'';position:absolute;right:-5px;top:50%;
    width:0;height:0;transform:translateY(-50%);
    border-top:4px solid transparent;border-bottom:4px solid transparent;
    border-left:5px solid var(--line);
  }
  #customScrollbar.visible .scroll-readout{opacity:.9;}
  #customScrollbar.dragging .scroll-readout{
    opacity:1;color:var(--accent2);border-color:var(--accent2);
    box-shadow:0 0 5px -2px var(--accent2);
  }
  .scroll-readout.label-mode{
    text-transform:uppercase;
  }
  .section-notch{
    position:absolute;left:50%;top:0;z-index:2;
    width:9px;height:2px;border-radius:2px;
    transform:translate(-50%,-50%);
    background:var(--line);
    cursor:pointer;pointer-events:auto;
    transition:background .2s ease,box-shadow .2s ease,width .18s ease;
  }
  .section-notch.passed{
    background:color-mix(in srgb, var(--accent) 65%, var(--line));
  }
  .section-notch.current{
    width:13px;
    background:var(--accent2);
    box-shadow:0 0 7px color-mix(in srgb, var(--accent2) 75%, transparent);
  }
  .section-notch:hover{
    width:13px;
    background:var(--accent2);
    box-shadow:0 0 8px color-mix(in srgb, var(--accent2) 80%, transparent);
  }
  .section-notch-label{
    position:absolute;top:50%;right:calc(100% + 8px);
    transform:translateY(-50%);
    font-family:var(--mono);font-size:.62rem;letter-spacing:.5px;
    background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;
    padding:2px 6px;color:var(--text-dim);
    white-space:nowrap;pointer-events:none;
    opacity:0;transition:opacity .15s ease,color .15s ease,border-color .15s ease;
  }
  .section-notch:hover .section-notch-label{
    opacity:1;color:var(--accent2);border-color:var(--accent2);
  }
  @media(max-width:700px){
    #customScrollbar{width:12px;}
    #customScrollbar .scroll-track{
      width:3px;margin:10px 0;
      border-radius:2px 0 0 2px;border-right:none;
    }
    #scrollThumb{width:5px;border-radius:2px 0 0 2px;}
    #customScrollbar .scroll-track::before,
    #customScrollbar .scroll-track::after{right:0;left:auto;transform:none;width:7px;height:7px;border-radius:2px 0 0 2px;}
    #customScrollbar:hover .scroll-track,
    #customScrollbar.dragging .scroll-track{width:5px;}
    #customScrollbar:hover #scrollThumb,
    #customScrollbar.dragging #scrollThumb{width:7px;}
    .scroll-readout{font-size:.6rem;padding:2px 5px;right:calc(100% + 6px);}
    .section-notch{right:0;left:auto;transform:translateY(-50%);border-radius:2px 0 0 2px;}
    .section-notch-label{display:none;}
  }
  html.scrollbar-dragging #cursorCrosshairH,
  html.scrollbar-dragging #cursorCrosshairV,
  html.scrollbar-dragging #cursorDotCenter,
  html.scrollbar-dragging #cursorReadout,
  html.scrollbar-dragging #scopeCursor,
  html.scrollbar-dragging #cursorDot,
  html.scrollbar-dragging #cursorRing,
  html.scrollbar-dragging #cursorBreaker,
  html.scrollbar-dragging #cursorFuse{
    display:none !important;
  }

  .circuit-bg{
    position:fixed;top:0;left:0;z-index:0;pointer-events:none;opacity:.7;
    width:100vw;height:100vh;
    width:100dvw;height:100dvh;
    transition:opacity .35s ease;
  }
  html[data-theme="light"] .circuit-bg{opacity:.3;}
  .circuit-decor-mobile{display:none;}
  @media(max-width:1024px){
    .circuit-decor-desktop{display:none;}
    .circuit-decor-mobile{display:inline;}
    html{font-size:calc(92% * var(--text-scale));}
  }
  @media(max-width:480px){
    html{font-size:calc(87% * var(--text-scale));}
  }

  .theme-fill{fill:var(--bg);transition:fill .35s ease;}
  .deco-blue{color:var(--accent);transition:color .35s ease;}
  .deco-amber{color:var(--accent2);transition:color .35s ease;}

  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 6.5%;
    background:rgba(10,14,20,.75);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:background .35s ease,border-color .35s ease;
  }
  html[data-theme="light"] nav{background:rgba(250,246,238,.8);}
  .logo{font-weight:700;letter-spacing:1px;color:var(--accent);font-size:1.1rem;display: flex;
    position:relative;
    align-items: center; white-space:nowrap;flex-shrink:0;}
  .logo-path{transition:opacity .3s ease;}
  .logo-path.path-fade{opacity:0;}
  .logo-path,.logo-slash{color:var(--text-dim);}
  .logo-tooltip{
    position:absolute;right:100%;top:25%;margin-right: 12px;
    display:flex;align-items:center;gap:6px;
    font-family:var(--mono);font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--accent);background:var(--panel);border:1px solid var(--line);border-radius:6px;
    padding:5px 9px;white-space:nowrap;
    opacity:0;pointer-events:none;transform:translateY(-4px);
    transition:opacity .2s ease,transform .2s ease;
  }
  .logo-tooltip::before{
    content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;
    background:var(--accent);box-shadow:0 0 6px 1px var(--accent);
  }
  @media(hover:hover) and (pointer:fine){
    .logo:hover .logo-tooltip{opacity:1;transform:translateY(0);}
  }
  @media(max-width:700px){
    .logo-tooltip{display:none;}
  }
  .logo img {
    width: 53px;
    height: 53px;
    margin-right: 12px;
    transition: transform 0.2s ease;
  }
  .logo img:hover {
    animation: wiggle 0.35s ease;
  }

  @keyframes wiggle {
      0%   { transform: rotate(0deg) scale(1); }
      25%  { transform: rotate(-10deg) scale(1.05); }
      50%  { transform: rotate(10deg) scale(1.05); }
      75%  { transform: rotate(-6deg) scale(1.05); }
      100% { transform: rotate(0deg) scale(1); }
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px; 
  }
  .nav-menu{
    display:flex;align-items:center;gap:28px;counter-reset:navpin;
  }
  .nav-links a{
    font-size:.92rem;color:var(--text-dim);position:relative;transition:.25s;
  }
  .nav-links a:hover{color:var(--accent);}
  .nav-menu a::before{
    counter-increment:navpin;content:counter(navpin,decimal-leading-zero);
    font-family:var(--mono);font-size:.62rem;color:var(--accent2);opacity:.55;
    margin-right:5px;transition:opacity .25s ease;
  }
  .nav-menu a:hover::before{opacity:.95;}
  .nav-links a::after{
    content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;
    background:var(--accent);transition:.3s;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-toggle{
    display:none;
    border:1px solid var(--line);background:var(--panel);color:var(--text);
    width:36px;height:36px;padding:0;border-radius:50%;
    flex-direction:column;align-items:center;justify-content:center;gap:4px;
    transition:.25s;
  }
  .nav-toggle:hover{border-color:var(--accent);}
  .nav-toggle:hover .nav-toggle-bar{color:var(--accent);}
  .nav-toggle-bar{
    width:16px;height:2px;background:currentColor;border-radius:2px;transition:.25s ease;
    color: var(--text-dim);
  }
  .nav-toggle.open .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle.open .nav-toggle-bar:nth-child(2){opacity:0;}
  .nav-toggle.open .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  @media(max-width:700px){
    nav{padding-left:3.5%;padding-right:3.5%;}
    .logo img{width:44px;height:44px;margin-right:8px;}
    .logo{font-size:1rem;}
    .nav-toggle{display:flex;}
    .nav-links{gap:12px;}
    .nav-menu{
      position:fixed;top:64px;left:0;right:0;z-index:99;
      flex-direction:column;align-items:stretch;gap:0;
      background:var(--panel);border-bottom:1px solid var(--line);
      max-height:0;overflow:hidden;
      transition:max-height .35s ease;
    }
    .nav-menu a{
      padding:14px 6%;border-top:1px solid var(--line);
    }
    .nav-menu a::after{display:none;}
    .nav-menu.open{max-height:320px;}
  }
  .theme-toggle {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text-dim); 
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
    cursor: pointer;
  }
  .theme-toggle:hover {
    color: var(--accent);       
    border-color: var(--accent);
    transform: translateY(-2px);
  }
  .theme-toggle svg {
    display: block;
    flex-shrink: 0 !important;
    width: 16px !important;     
    height: 16px !important;
    transform: rotate(0deg);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), fill 0.25s ease;
  }
  .theme-toggle:hover svg {
    transform: rotate(360deg);
  }
  .settings-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150;
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  }
  .settings-overlay.open{opacity:1;visibility:visible;}
  .settings-panel{
    position:fixed;top:0;right:0;height:100vh;width:320px;max-width:88vw;
    background:var(--panel);border-left:1px solid var(--line);
    z-index:151;padding:13px 20px;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform .35s ease,background .35s ease,border-color .35s ease;
    display:flex;flex-direction:column;gap:10px;justify-content:space-between;
  }
  @supports (height:100dvh){
    .settings-panel{height:100dvh;}
  }
  .settings-panel.open{transform:translateX(0);}
  .settings-bottom-group{
    display:flex;flex-direction:column;gap:13px;
  }
  .settings-panel-head{
    display:flex;justify-content:space-between;align-items:center;
    font-weight:700;letter-spacing:.5px;color:var(--text);
    border-bottom:1px solid var(--line);padding-bottom:7px;
  }
  .settings-head-actions{display:flex;align-items:center;gap:8px;}
  .settings-close{
    border:1px solid var(--line);background:var(--bg-alt);color:var(--text-dim);
    width:30px;height:30px;padding:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:.25s;font-size:.85rem;
  }
  .settings-close:hover{border-color:var(--accent);color:var(--accent);}
  .settings-reset{
    border:1px solid var(--line);background:var(--bg-alt);color:var(--text-dim);
    height:30px;padding:0 10px;border-radius:15px;
    display:flex;align-items:center;gap:5px;font-size:.7rem;letter-spacing:.2px;white-space:nowrap;
    transition:.25s;
  }
  .settings-reset svg{transition:.25s;}
  .settings-reset:hover{border-color:var(--accent);color:var(--accent);}
  .settings-reset:hover svg{transform:rotate(-70deg);}
  .settings-section-title{
    font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent2);margin-bottom:6px;
  }
  .settings-subtitle{
    font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);
    margin:7px 0 4px;
  }
  .settings-subtitle:first-of-type{margin-top:0;}
  .settings-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px;
  }
  .settings-row:last-child{margin-bottom:0;}
  .settings-row-label{font-size:.85rem;color:var(--text-dim);}
  .cursor-options{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
  .theme-options{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
  .cursor-option, .theme-option {
    border: 1px solid var(--line);
    background: var(--bg-alt);
    color: var(--text-dim);
    padding: 7px 6px 7px 12px;
    border-radius: 8px;
    font-size: .78rem;
    text-align: left;
    transition: .25s;
    display: inline-flex;  
    align-items: center;  
    gap: 12px;             
    line-height: 1;
    white-space: nowrap;
  }
  .cursor-option:hover, .theme-option:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
  }
  .cursor-option svg, .theme-option svg {
    display: block;
    flex-shrink: 0;       
  }
  .cursor-option.active,.theme-option.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);}
  .theme-option-swatch{
    display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:0px;
    box-shadow:0 0 0 1px rgba(0,0,0,.2);vertical-align:-1px;
  }
  .text-size-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
  .text-size-option{
    border:1px solid var(--line);background:var(--bg-alt);color:var(--text-dim);
    padding:7px 6px;border-radius:8px;font-size:.82rem;text-align:center;transition:.25s;
  }
  .text-size-option:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
  .text-size-option.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);}
  .text-size-option[data-textsize-option="small"]{font-size:.72rem;}
  .text-size-option[data-textsize-option="large"]{font-size:.9rem;}
  .settings-wide-btn{
    border:1px solid var(--line);background:var(--bg-alt);color:var(--text-dim);
    padding:7px 6px;border-radius:8px;font-size:.82rem;text-align:center;
    width:100%;transition:.25s;
  }
  .settings-wide-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
  .last-updated {
    font-size: .78rem;
    color: var(--text-dim);
    padding-left: 28px !important;
    padding-right: 14px !important;
  }
  .last-updated svg {
    left: 10px !important; 
    right: auto !important;
  }
  .settings-icon-btn{
    border:1px solid var(--line);background:var(--bg-alt);color:var(--text-dim);
    width:32px;height:32px;padding:0;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:.25s;cursor:pointer;
  }
  .settings-icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
  .volume-control{display:flex;align-items:center;gap:10px;}
  .volume-slider{
    width:100px;accent-color:var(--accent);cursor:pointer;
  }
  .settings-contact-icons{display:flex;gap:10px;justify-content:center;margin-top:0;}
  .settings-contact-icon{
    border:1px solid var(--line);background:var(--bg-alt);color:var(--text-dim);
    width:32px;height:32px;padding:0;border-radius:50%;font-size:.95rem;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:.25s;
  }
  .settings-contact-icon:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
  @media(max-width:480px){
    .settings-panel{width:100%;max-width:100%;}
  }
  .settings-row-uptime{display:none;}
  @media(max-width:820px){
    .settings-row-uptime{display:flex;}
  }

  .footer-views,
  .last-updated {
    box-sizing: border-box !important;
    height: 32px !important;
    display: inline-block !important;
    position: relative !important;   
    
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 20px;
    white-space: nowrap !important;
    transition: .25s ease;
    line-height: 30px !important;   
  }

  .footer-views *,
  .last-updated * {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .footer-views svg,
  .last-updated svg {
    position: absolute !important;
    top: 50% !important;           
    transform: translateY(-50%) !important; 
    width: 14px !important;
    height: 14px !important;
  }

  section{
    position:relative;z-index:1;
    padding:70px clamp(24px,8%,96px) 70px;
    max-width:1200px;margin:0 auto;
  }
  section:not(#home)::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:min(640px,60%);height:1px;
    background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--accent) 35%, var(--line)),transparent);
  }

  #home{
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:100px;
  }
  .hero-grid{
    display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center;
  }
  .eyebrow{
    color:var(--accent);font-size:.85rem;letter-spacing:3px;text-transform:uppercase;
    margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .eyebrow::before{content:'';width:30px;height:2px;background:var(--accent);display:inline-block;}
  h1.name{
    font-size:clamp(2rem,4.2vw,3.4rem);
    font-weight:800;line-height:1.3;white-space:nowrap;
    padding-bottom:0.1em;
    background:linear-gradient(120deg,var(--text) 100%,var(--accent)); /* idk if i want to keep this gradient or not*/
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:namePowerOn 1.1s ease-out;
  }
  @keyframes namePowerOn{
    0%{opacity:0;filter:drop-shadow(0 0 0 transparent);}
    15%{opacity:1;filter:drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 70%, transparent));}
    100%{opacity:1;filter:drop-shadow(0 0 0 transparent);}
  }
  .hook{
    font-size:clamp(1.05rem,2vw,1.35rem);
    color:var(--text-dim);margin-top:18px;max-width:560px;
  }
  .impact-strip{
    display:flex;gap:26px;margin-top:26px;flex-wrap:wrap;
  }
  .impact-item{font-size:.82rem;color:var(--text-dim);display:flex;align-items:center;gap:8px;}
  .impact-item .dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);animation:impactPulse 2.4s ease-in-out infinite;box-shadow:0 0 0 0 color-mix(in srgb, var(--accent2) 60%, transparent);}
  @keyframes impactPulse{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent2) 45%, transparent);}
    50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent2) 0%, transparent);}
  }
  @media(prefers-reduced-motion:reduce){.impact-item .dot{animation:none;}}
  .specs{
    margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:560px;
  }
  .spec-card{
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:14px 16px;transition:.25s ease;position:relative;overflow:hidden;
  }
  .spec-card::before{
    content:'';position:absolute;top:0;left:0;width:3px;height:100%;
    background:var(--accent);transform:scaleY(0);transform-origin:top;
    transition:transform .3s ease;
  }
  .spec-card:hover{
    border-color:var(--accent);transform:translateY(-3px);
    box-shadow:0 10px 24px -14px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .spec-card:hover::before{transform:scaleY(1);}
  .spec-label{font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent2);}
  .spec-val{font-size:.95rem;margin-top:4px;color:var(--text);}
  .spec-links{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;}
  .pill{
    border:1px solid var(--line);padding:8px 14px;border-radius:30px;font-size:.85rem;
    display:flex;align-items:center;gap:6px;transition:.25s;
  }
  .pill:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
  .pill.copied{border-color:var(--accent);color:var(--accent);}
  .pill-primary{
    background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600;
    position:relative;overflow:hidden;
  }
  .pill-primary::after{
    content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,color-mix(in srgb, white 45%, transparent),transparent);
    transform:skewX(-20deg);transition:left .55s ease;pointer-events:none;
  }
  .pill-primary:hover::after{left:130%;}
  .pill-primary:hover{
    background:color-mix(in srgb, var(--accent) 85%, white 15%);
    border-color:color-mix(in srgb, var(--accent) 85%, white 15%);
    color:var(--bg);
  }

  .hero-visual{
    position:relative;display:flex;align-items:center;justify-content:center;
  }

  .avatar-ring{
    width:280px;height:280px;border-radius:50%;
    background:var(--bg-alt);
    border:2px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    position:relative;
    animation:float 5s ease-in-out infinite;
    transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
    box-shadow:0 18px 40px -25px color-mix(in srgb, var(--accent) 18%, transparent),
      inset 0 0 24px -10px color-mix(in srgb, var(--accent) 6%, transparent);
  }
  .avatar-ring::before{
    content:'';position:absolute;inset:-8px;border-radius:50%;
    border:1px dashed var(--accent);opacity:.4;
    animation:spin 18s linear infinite;
  }
  .avatar-ring::after{
    content:'';position:absolute;inset:-50px;border-radius:50%;z-index:-1;
    background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 72%);
    filter:blur(16px);
    animation:avatarGlow 5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes avatarGlow{0%,100%{opacity:.4;}50%{opacity:.75;}}
  .avatar-image{
    width:95%;height:95%;border-radius:50%;
    background:linear-gradient(135deg,var(--panel),var(--bg-alt));
    display:flex;align-items:center;justify-content:center;
    color:var(--text-dim);font-size:.85rem;text-align:center;padding:20px;
    border:1px solid var(--line);
  }
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

  .sec-head{margin-bottom:44px;position:relative;}
  .sec-tag{color:var(--accent);font-size:.8rem;letter-spacing:3px;text-transform:uppercase;
    display:flex;align-items:center;gap:10px;}
  .sec-tag::before{content:'';width:30px;height:2px;background:var(--accent);display:inline-block;}
  .bus-tag{
    color:var(--accent2);border:1px solid var(--accent2);border-radius:5px;
    padding:2px 8px;font-size:.7rem;letter-spacing:1.5px;
  }
  .eyebrow .bus-tag{margin-left:2px;}
  .sec-title{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;margin-top:6px;}
  .sec-sub{color:var(--text-dim);font-size:.95rem;margin-top:10px;max-width:640px;}
  .sec-sub2{color:var(--text-dim);font-size:.90rem;margin-top:10px;margin-bottom:10px;max-width:1000px;}
  .sec-sub3{color:var(--text-dim);font-size:.70rem;margin-top:10px;margin-bottom:20px;max-width:1000px;}

  .bus-link{
    max-width:1200px;margin:0 auto;padding:6px clamp(24px,8%,96px) 6px;
    display:flex;flex-direction:column;align-items:center;gap:6px;
  }
  .bus-link-inner{
    width:100%;display:flex;align-items:center;gap:16px;
  }
  .bus-link-chip{
    flex:none;
    color:var(--text-dim);
    border:1px solid var(--line);
    border-radius:4px;
    padding:1px 6px;
    font-size:.60rem;
    letter-spacing:1px;
    font-family:var(--mono);
    transition:color .3s ease,border-color .3s ease;
}

.bus-link.closed .bus-link-chip{
    color:var(--accent2);
    border-color:var(--accent2); z-index: 5;
}
  .bus-link-svg{flex:1;min-width:60px;height:50px;overflow:visible;display:block;z-index: 5;}
  .bl-line{stroke:var(--line);stroke-width:2;transition:stroke-dashoffset 1.1s ease,stroke .3s ease;}
  .bus-link.visible .bl-line-l{stroke-dashoffset:0;stroke:var(--accent);}
  .bus-link.visible .bl-line-r{stroke-dashoffset:0;stroke:var(--accent);transition-delay:.95s;}
  .bl-post{fill:var(--line);transition:fill .3s ease;}
  .bus-link.visible .bl-post{fill:var(--accent2);transition-delay:.65s;}
  .bl-pulse{fill:var(--accent);opacity:0;filter:drop-shadow(0 0 4px var(--accent));}
  .bus-link.visible .bl-pulse{animation:blTravel 1.5s linear 1.1s 1;}
  .bus-link-status{
    font-family:var(--mono);font-size:.6rem;letter-spacing:2px;
    color:var(--text-dim);text-transform:uppercase;opacity:.75;transition:color .3s ease;
  }
  .bus-link.closed .bus-link-status{color:var(--accent);}
  @keyframes blFlash{0%{opacity:0;r:2;}35%{opacity:1;r:7;}100%{opacity:0;r:2;}}
  @keyframes blTravel{0%{opacity:0;cx:0;}6%{opacity:1;}94%{opacity:1;}100%{opacity:0;cx:600;}}

  .bus-link[data-type="breaker"] .bl-arm{
    stroke:var(--line);stroke-width:3;stroke-linecap:round;
    transform-origin:275px 30px;transform:rotate(-30deg);
    transition:
          transform .4s cubic-bezier(.34,1.56,.64,1) .65s,
          stroke .3s ease .65s,
          filter .3s ease .65s;
  }
  .bus-link[data-type="breaker"].visible .bl-arm{transform:rotate(0deg);stroke:var(--accent2);}
  .bus-link[data-type="breaker"] .bl-flash{fill:var(--accent2);opacity:0;}
  .bus-link[data-type="breaker"].visible .bl-flash{animation:blFlash .5s ease-out .95s 1;}
  .bus-link[data-type="breaker"].closed .bl-arm{filter:drop-shadow(0 0 4px var(--accent2));}

  .bus-link[data-type="voltage"] .bl-mid-wire{stroke:var(--line);stroke-width:2;transition:stroke .3s ease .55s;}
  .bus-link[data-type="voltage"].closed .bl-mid-wire{stroke:var(--accent2);}
  .bus-link[data-type="voltage"] .bl-resistor{
    fill:none;stroke:var(--line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
    transition:stroke .3s ease .55s,filter .3s ease .55s;
  }
  .bus-link[data-type="voltage"].closed .bl-resistor{stroke:var(--accent2);filter:drop-shadow(0 0 3px var(--accent2));}
  .bus-link[data-type="voltage"] .bl-tap-wire{
    stroke:var(--line);stroke-width:2;stroke-dasharray:18;stroke-dashoffset:18;
    transition:stroke-dashoffset .35s ease .8s,stroke .3s ease .8s;
  }
  .bus-link[data-type="voltage"].closed .bl-tap-wire{stroke-dashoffset:0;stroke:var(--accent);}
  .bus-link[data-type="voltage"] .bl-tap-node{fill:var(--line);transition:fill .3s ease .8s;}
  .bus-link[data-type="voltage"].closed .bl-tap-node{fill:var(--accent);}
  .bus-link[data-type="voltage"] .bl-tap-probe{
    fill:var(--bg);stroke:var(--line);stroke-width:1.5;
    transition:stroke .3s ease .95s,fill .3s ease .95s,filter .3s ease .95s;
  }
  .bus-link[data-type="voltage"].closed .bl-tap-probe{stroke:var(--accent);fill:var(--accent);filter:drop-shadow(0 0 5px var(--accent));}
  .bus-link[data-type="voltage"] .bl-flash{fill:var(--accent);opacity:0;}
  .bus-link[data-type="voltage"].visible .bl-flash{animation:blFlash .5s ease-out 1.05s 1;}

  .bus-link[data-type="capacitor"] .bl-cap-plate{
    fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;
    transition:stroke .3s ease .55s,filter .3s ease .55s;
  }
  .bus-link[data-type="capacitor"].visible .bl-cap-plate{stroke:var(--accent2);}
  .bus-link[data-type="capacitor"].closed .bl-cap-plate{filter:drop-shadow(0 0 4px var(--accent2));}
  .bl-cap-label{
    font-family:var(--mono);font-size:13px;fill:var(--text-dim);
    text-anchor:middle;transition:fill .3s ease .55s;
  }
  .bus-link[data-type="capacitor"].visible .bl-cap-label{fill:var(--accent2);}
  .bus-link[data-type="capacitor"] .bl-flash{fill:var(--accent2);opacity:0;}
  .bus-link[data-type="capacitor"].visible .bl-flash{animation:blFlash .5s ease-out .95s 1;}

  .bus-link[data-type="inductor"] .bl-coil{
    fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round;
    transition:stroke .3s ease .65s,filter .3s ease .65s;
  }
  .bus-link[data-type="inductor"].visible .bl-coil{stroke:var(--accent2);}
  .bus-link[data-type="inductor"].closed .bl-coil{
    filter:drop-shadow(0 0 3px var(--accent2));
    stroke-dasharray:7 5;
    animation:coilFlow 1.1s linear infinite;
  }
  @keyframes coilFlow{to{stroke-dashoffset:-24;}}
  .bl-coil-core{stroke:var(--line);stroke-width:1.5;transition:stroke .3s ease .75s;}
  .bus-link[data-type="inductor"].visible .bl-coil-core{stroke:var(--accent2);}
  .bus-link[data-type="inductor"] .bl-flash{fill:var(--accent2);opacity:0;}
  .bus-link[data-type="inductor"].visible .bl-flash{animation:blFlash .5s ease-out 1.05s 1;}

  @media(max-width:700px){
    footer{padding-left:3.5%;padding-right:3.5%;}
    .bus-link{padding:4px 6% 4px;}
    .bus-link-inner{gap:10px;}
    .bus-link-chip{font-size:.30rem;padding:2px 6px;}
    .bus-link-svg{height:20px;}
  }
  @media(prefers-reduced-motion:reduce){
    .bl-line{stroke-dashoffset:0!important;stroke:var(--accent)!important;transition:none!important;}
    .bl-post{fill:var(--accent2)!important;}
    .bl-flash,.bl-pulse{display:none!important;}
    .bus-link-chip{color:var(--accent2)!important;border-color:var(--accent2)!important;}
    .bus-link-status{color:var(--accent)!important;}
    .bus-link[data-type="breaker"] .bl-arm{transform:rotate(0deg)!important;stroke:var(--accent2)!important;transition:none!important;}
    .bus-link[data-type="voltage"] .bl-mid-wire{stroke:var(--accent2)!important;}
    .bus-link[data-type="voltage"] .bl-resistor{stroke:var(--accent2)!important;filter:none!important;}
    .bus-link[data-type="voltage"] .bl-tap-wire{stroke-dashoffset:0!important;stroke:var(--accent)!important;transition:none!important;}
    .bus-link[data-type="voltage"] .bl-tap-node{fill:var(--accent)!important;}
    .bus-link[data-type="voltage"] .bl-tap-probe{stroke:var(--accent)!important;fill:var(--accent)!important;filter:none!important;}
    .bus-link[data-type="capacitor"] .bl-cap-plate{stroke:var(--accent2)!important;filter:none!important;transition:none!important;}
    .bl-cap-label{fill:var(--accent2)!important;transition:none!important;}
    .bus-link[data-type="inductor"] .bl-coil{stroke:var(--accent2)!important;filter:none!important;animation:none!important;stroke-dasharray:none!important;transition:none!important;}
    .bl-coil-core{stroke:var(--accent2)!important;transition:none!important;}
  }

  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
  .about-text{color:var(--text-dim);font-size:1rem;display:flex;flex-direction:column;}
  .about-text p{margin-bottom:14px;}
  .skills-wrap h3, .edu-wrap h3{
    font-size:1rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent2);margin-bottom:16px;
  }
  .edu-wrap{margin-bottom:36px;}
  .skill-tags{display:flex;flex-wrap:wrap;gap:10px;}
  .skill-tag{
    background:var(--panel);border:1px solid var(--line);padding:8px 14px;
    border-radius:8px;font-size:.85rem;transition:.25s ease;
  }
  .skill-tag.hi{border-color:var(--accent);color:var(--accent);}

  .edu-timeline{display:flex;gap:18px;align-items:stretch;}
  .edu-marker-single{flex-shrink:0;display:flex;flex-direction:column;align-items:center;}
  .uni-link:hover{text-decoration:underline;}
  .uni-logo-slot{
    width:46px;height:46px;border:1px dashed var(--line);border-radius:8px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:.6rem;color:var(--text-dim);background:var(--bg-alt);margin-bottom:6px;
    line-height:1.2;transition:.35s ease;
  }
  .company-logo-link:hover .uni-logo-slot{
    border-color:var(--accent);border-style:solid;
    box-shadow:0 0 14px -2px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .edu-entries{display:flex;flex-direction:column;justify-content:space-between;flex:1;}
  .edu-content{padding:6px 0;}
  .edu-degree{font-weight:700;}
  .edu-meta{color:var(--text-dim);font-size:.85rem;margin-top:2px;}
  .edu-desc{color:var(--text-dim);font-size:.85rem;margin-top:8px;line-height:1.55;}

  .hobbies-wrap{margin-top:24px;}
  .hobbies-wrap h3{
    font-size:1rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent2);margin-bottom:16px;
  }
  .hobby-carousel{margin-top:25px;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;}
  .peek-viewport{
    position:relative;width:100%;height:150px;overflow:hidden;
  }
  .peek-track{
    position:center;top:0;left:0;height:100%;
    display:flex;align-items:center;gap:10px;
    transition:transform .45s cubic-bezier(.65,0,.35,1);
    will-change:transform;
  }
  .peek-slide{
    flex:0 0 calc(20% - 10px);height:78%;border-radius:9px;overflow:hidden;
    position:relative;background:var(--bg-alt);border:1px solid var(--line);
    transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .45s ease,height .45s ease,filter .45s ease,border-color .25s ease;
  }
  .peek-slide img{
    width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;
  }
  .peek-slide.placeholder{
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:6px;color:var(--text-dim);font-size:.62rem;border-style:dashed;
  }
  .peek-slide .label{
    position:absolute;left:0;right:0;bottom:0;padding:7px 8px;font-size:.68rem;color:#fff;
    background:linear-gradient(transparent,rgba(0,0,0,.65));
    opacity:0;transition:opacity .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .peek-slide.d0{height:100%;filter:saturate(1);opacity:1;z-index:5;cursor:zoom-in;border-color:var(--accent);}
  .peek-slide.d0 .label{opacity:1;}
  .peek-slide.d1{height:82%;filter:saturate(.8);opacity:.7;z-index:3;}
  .peek-slide.d2{height:66%;filter:saturate(.55);opacity:.4;z-index:1;}
  .peek-slide.dfar{height:66%;opacity:0;z-index:0;pointer-events:none;}
  .peek-slide:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .peek-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;}
  .peek-dot{
    width:6px;height:6px;border-radius:50%;border:none;background:var(--line);
    padding:0;cursor:pointer;transition:background .2s,transform .2s;
  }
  .peek-dot.active{background:var(--accent);transform:scale(1.35);}
  .peek-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  @media(prefers-reduced-motion:reduce){
    .peek-track,.peek-slide{transition:none;}
  }
  .jump-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:transparent;
    color:var(--accent2);
    font-size:28px;
    visibility: hidden;
    opacity:0;
    pointer-events:none;
    transition: opacity 0s, visibility 0s;
    z-index:10;
  }
  .jump-arrow.show{
      opacity:1;
      visibility: visible;
      pointer-events:auto;
      transition:
          opacity 0.3s ease 0.3s,
          visibility 0s linear 0s;
  }
  .jump-arrow.left{
      left:325px;      
  }
  .jump-arrow.right{
      right:325px;
  }
  @media(max-width:700px){
    .jump-arrow.left{left:4px;}
    .jump-arrow.right{right:4px;}
  }
  .jump-arrow:hover {
      color: var(--accent);
      text-shadow:
          0 0 5px var(--accent),
          0 0 10px var(--accent),
          0 0 30px var(--accent),
  }

  .card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:28px;margin-bottom:28px;
    transition:.35s ease;
    position:relative;
  }
  .card:hover{border-color:var(--accent);transform:translateY(-2px);}
  .card.expanded:hover{box-shadow:0 14px 34px -15px color-mix(in srgb, var(--accent) 25%, transparent);}
  .card::before,.card::after{
    content:'';position:absolute;width:0;height:0;pointer-events:none;
    transition:border-color .3s ease,opacity .2s ease,width .4s cubic-bezier(.22,1,.36,1),height .4s cubic-bezier(.22,1,.36,1);
    opacity:0;
  }
  .card::before{
    top:-12px;left:-12px;border-top:2px solid var(--panel);border-left:2px solid var(--panel);border-top-left-radius:4px;
  }
  .card::after{
    bottom:-12px;right:-12px;border-bottom:2px solid var(--panel);border-right:2px solid var(--panel);border-bottom-right-radius:4px;
  }
  .card.expanded::before,.card.expanded::after{opacity:1;width:16px;height:16px;}
  .card.expanded::after{transition-delay:.08s;}
  .card:hover::before,.card:hover::after{border-color:var(--accent);}
  .card-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;cursor:pointer;}
  .card-title{font-size:1.25rem;font-weight:700;}
  .card-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
  .featured-badge{
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
    color:var(--accent2);border:1px solid var(--accent2);border-radius:20px;padding:3px 10px 3px 8px;
    background:color-mix(in srgb, var(--accent2) 10%, transparent);white-space:nowrap;
    transition:opacity .25s ease,transform .25s ease;
    transform:translateY(12px);
  }
  .featured-badge svg{width:11px;height:11px;fill:var(--accent2);}
  .card.expanded .featured-badge{opacity:0;transform:translateY(12px) translateX(6px);pointer-events:none;}
  .card-sub{color:var(--accent);font-size:.85rem;margin-top:4px;}
  
  .card-top-left{display:flex;gap:14px;align-items:flex-start;}
  .company-logo-link{flex-shrink:0;}
  .company-logo-slot{
    width:56px;height:56px;border:1px dashed var(--line);border-radius:8px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:.62rem;color:var(--text-dim);background:var(--bg-alt);
    transition:.25s;
  }
  .company-logo-link:hover .company-logo-slot{border-color:var(--accent);color:var(--accent);}
  .card-company-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px;}
  .card-company-link{
    display:inline-block;color:var(--accent);font-size:1rem;font-weight:600;
    transition:.2s;
  }
  .card-company-link:hover{text-decoration:underline;}
  .card-location{color:var(--text-dim);font-size:.85rem;display:flex;align-items:center;gap:5px;}
  .card-period{color:var(--text-dim);font-size:.85rem;white-space:nowrap;text-align:right;position:relative;}

  @keyframes cardHighlightFlash{
    0%{box-shadow:0 0 0 0 transparent;border-color:var(--line);}
    15%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);border-color:var(--accent);}
    100%{box-shadow:0 0 0 0 transparent;border-color:var(--line);}
  }
  .card.link-highlight{animation:cardHighlightFlash 1.8s ease-out;}

  .card-toggle-btn{
    margin-top:16px;background:transparent;border:1px solid var(--line);color:var(--accent);
    padding:6px 16px;border-radius:8px;font-size:.82rem;font-family:inherit;transition:.25s;
    display:inline-flex;align-items:center;gap:6px;
  }
  .card-toggle-btn:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);}
  .card.expanded .card-toggle-btn{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);}
  .card-toggle-btn .chevron{display:inline-block;transition:transform .3s ease;font-size:.7rem;}
  .card.expanded .card-toggle-btn .chevron{transform:rotate(180deg);}
  .card-details{
    max-height:0;overflow:hidden;opacity:0;padding:4px;margin:-4px;
    transition:max-height .45s ease,opacity .3s ease,margin-top .45s ease;
  }
  .card.expanded .card-details{max-height:4000px;opacity:1;margin-top:0px;}

  .card-main-img{
    position:absolute;top:calc(100% + 8px);right:0;z-index:1;
    width:170px;height:116px;border-radius:8px;overflow:hidden;
    border:1px solid var(--line);opacity:1;
    transition:opacity .3s ease,transform .3s ease;
  }
  .card-main-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .card.expanded .card-main-img{opacity:0;transform:translateY(-4px);pointer-events:none;}
  @media(max-width:1024px){
    .card-main-img{display:none;}
  }

  .card-imgs{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
  .img-slot{
  width:140px;height:100px;border-radius:8px;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);font-size:.72rem;text-align:center;padding:3px;
  background:var(--bg-alt);transition:.35s ease,box-shadow .2s ease;
  cursor:zoom-in;overflow:hidden;object-fit:contain;
  }
  .img-slot:hover{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);}
  .img-slot img, .uni-logo-slot img, .company-logo-slot img{
  width:100%;height:100%;object-fit:contain;border-radius:inherit;
  min-width:0;min-height:0;display:block;transition:transform .35s ease;
  }
  .img-slot:hover img{transform:scale(1.06);}

  .card-imgs.is-carousel{
    flex-wrap:nowrap;overflow:hidden;position:relative;
    padding:6px 0;margin-top:-6px;margin-bottom:12px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
  }
  .card-imgs.is-carousel .carousel-track{
    display:flex;gap:12px;width:max-content;
    animation:carouselScroll linear infinite;
  }
  .card-imgs.is-carousel .img-slot{flex:0 0 auto;}
  .card-imgs.is-carousel:hover .carousel-track{animation-play-state:paused;}
  @keyframes carouselScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media(prefers-reduced-motion:reduce){
    .card-imgs.is-carousel .carousel-track{animation:none;}
  }
  .carousel-imgs-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
  .carousel-count{
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    color:var(--text-dim);font-size:.68rem;font-weight:600;
    padding:3px 9px;border-radius:20px;border:1px solid var(--line);
    letter-spacing:.02em;
  }
  .carousel-imgs-wrap .card-imgs{width:100%;}

  .lightbox-overlay{
    position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);
    display:none;align-items:center;justify-content:center;padding:40px;
    cursor:zoom-out;
  }
  .lightbox-overlay.active{display:flex;}
  .lightbox-content{
    max-width:min(90vw,600px);max-height:85vh;overflow:auto;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:28px;display:flex;align-items:center;justify-content:center;
    color:var(--text-dim);font-size:1rem;text-align:center;
    transform:scale(.85);opacity:0;transition:transform .3s ease,opacity .3s ease;
  }
  .lightbox-overlay.active .lightbox-content{transform:scale(1);opacity:1;}
  .lightbox-content img{max-width:100%;max-height:80vh;border-radius:8px;display:block;}
  @media(max-width:700px){
    .lightbox-overlay{padding:16px;}
    .lightbox-content{padding:10px;border-width:1px;border-radius:8px;}
  }

  .subtabs{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap;}
  .subtab-btn{
    padding:6px 16px;border-radius:20px;border:1px solid var(--line);
    background:transparent;color:var(--text-dim);font-size:.82rem;transition:.25s;
  }
  .subtab-btn:hover{border-color:var(--accent2);color:var(--accent2);}
  .subtab-btn.active{
    background:var(--accent2);color:#1a1206;border-color:var(--accent2);font-weight:600;
    position:relative;overflow:hidden;
  }
  .subtab-btn.active::after{
    content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,color-mix(in srgb, white 45%, transparent),transparent);
    transform:skewX(-20deg);animation:tabShine 2.6s ease-in-out .3s 1;
  }
  .subtab-panel{display:none;}
  .subtab-panel.active{display:block;animation:fadeIn .4s ease;}

  .coming-soon-card{text-align:center;padding:54px 28px;}
  .coming-soon-icon{
    font-size:2.6rem;display:inline-block;margin-bottom:18px;
    animation:spin 4s linear infinite;
  }
  .coming-soon-card h4{font-size:1.3rem;font-weight:700;margin-bottom:8px;}
  .coming-soon-card p{color:var(--text-dim);font-size:.9rem;margin-bottom:24px;}
  .progress-track{
    width:100%;max-width:280px;height:8px;background:var(--bg-alt);
    border-radius:4px;overflow:hidden;margin:0 auto;position:relative;
    border:1px solid var(--line);
  }
  .progress-fill{
    position:absolute;top:0;left:-40%;width:40%;height:100%;
    background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;
    animation:loadBar 1.8s ease-in-out infinite;
  }
  @keyframes loadBar{
    0%{left:-40%;}
    50%{left:60%;}
    100%{left:100%;}
  }

  .career-timeline{margin:0 0 40px;position:relative;}
  .ct-wrap{position:relative;}
  .ct-wrap::before,.ct-wrap::after{
    content:'';position:absolute;top:0;bottom:14px;width:28px;z-index:2;pointer-events:none;
  }
  .ct-wrap::before{left:0;background:linear-gradient(90deg,var(--bg) 15%,transparent);}
  .ct-wrap::after{right:0;background:linear-gradient(270deg,var(--bg) 15%,transparent);}
  .ct-scroll{
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding:2px 4px 12px;margin:0 -4px;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  }
  .ct-scroll::-webkit-scrollbar{height:6px;}
  .ct-scroll::-webkit-scrollbar-track{background:transparent;}
  .ct-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
  .ct-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent);}
  .ct-inner{position:relative;width:max-content;min-width:100%;padding:0 6px;}
  .ct-line-track{position:absolute;top:8px;left:12px;right:12px;height:2px;background:var(--line);border-radius:2px;}
  .ct-line-fill{
    position:absolute;top:0;left:0;height:2px;width:0;border-radius:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    transition:width 1.8s cubic-bezier(.16,1,.3,1) .25s;
  }
  .reveal.visible .ct-line-fill{width:100%;}
  .ct-nodes{display:flex;position:relative;z-index:1;}
  .ct-node{
    width:142px;flex:0 0 142px;display:flex;flex-direction:column;align-items:center;
    text-align:center;cursor:pointer;padding:0 6px;scroll-snap-align:start;
  }
  .ct-dot{
    width:14px;height:14px;border-radius:50%;background:var(--bg-alt);
    border:2px solid var(--line);margin-bottom:14px;flex-shrink:0;
    transition:.3s ease;position:relative;z-index:2;
  }
  .ct-node.ct-past .ct-dot{border-color:var(--text-dim);}
  .ct-node.ct-current .ct-dot{
    border-color:var(--accent);background:var(--accent);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .ct-node.ct-future .ct-dot{border-style:dashed;border-color:var(--accent2);}
  .ct-node:hover .ct-dot{border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent);}
  .ct-node:hover .ct-title{color:var(--accent);}
  .ct-badge{
    display:inline-flex;align-items:center;gap:6px;font-size:.62rem;letter-spacing:1.5px;
    text-transform:uppercase;color:var(--accent);font-family:var(--mono);margin-bottom:6px;
  }
  .ct-badge .footer-led{width:5px;height:5px;}
  .ct-title{font-weight:700;font-size:.86rem;line-height:1.35;transition:.25s;}
  .ct-meta{color:var(--text-dim);font-size:.72rem;margin-top:7px;font-family:var(--mono);}
  .ct-meta-tag{text-transform:uppercase;letter-spacing:1px;font-size:.64rem;}
  .ct-node[data-type="proj"] .ct-meta-tag{color:var(--accent2);}
  .ct-node[data-type="exp"] .ct-meta-tag{color:var(--accent);}
  .ct-node[data-type="edu"] .ct-meta-tag{color:var(--text-dim);}

  .ct-legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px;color:var(--text-dim);font-size:.78rem;}
  .ct-legend-item{display:flex;align-items:center;gap:7px;}
  .ct-legend-dot{width:10px;height:10px;border-radius:50%;background:var(--bg-alt);border:2px solid var(--line);flex-shrink:0;}
  .ct-legend-dot.is-past{border-color:var(--text-dim);}
  .ct-legend-dot.is-current{border-color:var(--accent);background:var(--accent);box-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);}
  .ct-legend-dot.is-future{border-style:dashed;border-color:var(--accent2);}
  .ct-arrow{
    position:absolute;top:6px;width:30px;height:30px;border-radius:50%;
    border:1px solid var(--line);background:var(--bg-alt);color:var(--accent2);
    display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
    cursor:pointer;transition:.25s;z-index:3;padding:0;
  }
  .ct-arrow:hover{border-color:var(--accent2);color:var(--accent);}
  .ct-arrow-left{left:-4px;}
  .ct-arrow-right{right:-4px;}
  @media(max-width:820px){
    .ct-wrap::before,.ct-wrap::after,.ct-arrow{display:none;}
    .ct-scroll{overflow:visible;padding:0;margin:0;}
    .ct-inner{width:auto;min-width:0;padding:0;}
    .ct-line-track{display:none;}
    .ct-nodes{flex-direction:column;align-items:stretch;gap:0;}
    .ct-node{
      width:auto;flex:1 1 auto;flex-direction:row;align-items:flex-start;text-align:left;
      gap:16px;padding:0 0 26px 0;position:relative;
    }
    .ct-node:last-child{padding-bottom:0;}
    .ct-node:not(:last-child)::before{
      content:'';position:absolute;left:6px;top:20px;bottom:-12px;width:2px;background:var(--line);
    }
    .ct-dot{margin-bottom:0;margin-top:2px;}
  }

  .testimonials-wrap{margin-top:44px;}
  .testimonials-wrap h3{font-size:1.1rem;font-weight:700;margin-bottom:6px;}
  .testimonials-wrap .sec-sub{margin-top:0;margin-bottom:24px;}
  .testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
  .testimonial-card{
    background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);
    padding:24px;transition:.3s ease;position:relative;
  }
  .testimonial-card:hover{border-color:var(--accent2);}
  .testimonial-quote-mark{
    font-family:Georgia,serif;font-size:2.4rem;line-height:1;color:var(--accent2);
    opacity:.5;margin-bottom:6px;display:block;
  }
  .testimonial-text{color:var(--text-dim);font-size:.88rem;line-height:1.6;font-style:italic;min-height:66px;}
  .testimonial-author{display:flex;align-items:center;gap:12px;margin-top:20px;}
  .testimonial-avatar{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
    color:var(--text-dim);font-size:.6rem;text-align:center;background:var(--bg-alt);
  }
  .testimonial-name{font-weight:700;font-size:.85rem;}
  .testimonial-role{color:var(--text-dim);font-size:.76rem;margin-top:1px;}

  .card-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .col-label{
    font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent2);margin-bottom:8px;
  }
  .col-label.acc{color:var(--accent);}
  ul.plain{list-style:none;color:var(--text-dim);font-size:.9rem;}
  ul.plain li{margin-bottom:6px;padding-left:14px;position:relative;}
  ul.plain li::before{content:'▹';position:absolute;left:0;color:var(--accent);}

  .card-footer{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
  .skill-chip{
    background:var(--bg-alt);border:1px solid var(--line);padding:5px 11px;
    border-radius:6px;font-size:.78rem;color:var(--text-dim);transition:.35s ease;
  }
  .dl-btns{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap;}
  .dl-btn{
    display:flex;align-items:center;gap:6px;
    background:transparent;border:1px solid var(--accent);color:var(--accent);
    padding:6px 14px;border-radius:8px;font-size:.82rem;transition:.25s;
  }
  .dl-btn:hover{background:var(--accent);color:#04121a;}
  .dl-btn-primary{background:var(--accent);border-color:var(--accent);color:#04121a;font-weight:600;position:relative;overflow:hidden;}
  .dl-btn-primary::after{
    content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,color-mix(in srgb, white 45%, transparent),transparent);
    transform:skewX(-20deg);transition:left .55s ease;pointer-events:none;
  }
  .dl-btn-primary:hover::after{left:130%;}
  .dl-btn-primary:hover{background:color-mix(in srgb, var(--accent) 85%, white 15%);border-color:color-mix(in srgb, var(--accent) 85%, white 15%);color:#04121a;}
  .launch-desktop-note{display:none;font-style:italic;color:var(--text-dim);font-size:.82rem;}
 
  .tabs-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:36px;}
  .tabs{display:flex;gap:10px;margin-bottom:0;flex-wrap:wrap;}
  .tab-btn{
    padding:6px 20px;border-radius:30px;border:1px solid var(--line);
    background:transparent;color:var(--text-dim);font-size:.9rem;transition:.25s;
  }
  .tab-btn:hover{border-color:var(--accent);color:var(--accent);}
  .tab-btn.active{
    background:var(--accent);color:#04121a;border-color:var(--accent);font-weight:600;
    position:relative;overflow:hidden;
  }
  .tab-btn.active::after{
    content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,color-mix(in srgb, white 45%, transparent),transparent);
    transform:skewX(-20deg);animation:tabShine 2.6s ease-in-out .3s 1;
  }
  @keyframes tabShine{0%{left:-60%;}100%{left:130%;}}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;animation:fadeIn .4s ease;}

  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

  .contact-links{display:flex;justify-content:center;gap:22px;margin-top:30px;flex-wrap:wrap;}
  .contact-card{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:34px 34px;width:300px;max-width:100%;min-height:132px;transition:.35s ease;
    display:flex;flex-direction:column;justify-content:center;text-align:left;position:relative;
    overflow:hidden;
  }
  .contact-card::before{
    content:'';position:absolute;top:0;left:0;width:100%;height:3px;
    background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
  }
  .contact-card:hover::before{transform:scaleX(1);}
  .contact-card:hover{
    border-color:var(--accent);transform:translateY(-4px);
    box-shadow:0 12px 28px -16px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .contact-icon{font-size:1.6rem;margin-bottom:10px;color:var(--accent);height:1.6rem;width:fit-content;display:flex;align-items:center;transition:transform .3s ease;transform-origin:center;}
  .contact-card:hover .contact-icon{transform:scale(1.15);}
  .contact-label{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;}
  .contact-val{margin-top:4px;font-size:.95rem;overflow-wrap:break-word;word-break:break-word;}

  footer{
    position:relative;
    padding:14px 6.5%;color:var(--text-dim);font-size:.82rem;
    border-top:1px solid var(--line);
    background:var(--panel);
    text-align:center;transition:.35s ease;
  }
  footer .bus{color:var(--accent2);}
  .footer-trace{
    position:absolute;top:-6px;left:0;width:100%;height:12px;
    overflow:visible;display:block;pointer-events:none;z-index:1;
  }
  .footer-trace-line{stroke:var(--line);stroke-width:1;transition:stroke .35s ease;}
  .footer-spark{
    position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 6px var(--accent);
    transform:translate(-50%,-50%);pointer-events:none;z-index:1;
    animation:footerSparkMove 5s linear infinite,footerSparkFade 5s linear infinite;
  }
  @keyframes footerSparkMove{0%{left:0%;}100%{left:100%;}}
  @keyframes footerSparkFade{0%,100%{opacity:0;}5%,95%{opacity:1;}}
  .footer-row{
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:10px 20px;
  }
  .footer-copy{grid-column:2;text-align:center;}
  .footer-left{
    grid-column:1;justify-self:start;
    display:flex;align-items:center;
  }
  .local-time-corner{
    position:fixed;left:10px;bottom:10px;z-index:90;
    display:flex;align-items:center;gap:5px;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.5px;
    color:var(--text-dim);opacity:0;pointer-events:none;
    transition:opacity .4s ease;
  }
  .local-time-corner.visible{opacity:.6;}
  .local-time-corner .footer-led{width:4px;height:4px;}
  .footer-right{
    grid-column:3;justify-self:end;
    display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  }
  .footer-status{
    display:flex;align-items:center;gap:9px;
    font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--text-dim);font-family:var(--mono);
    white-space:nowrap;
  }
  .footer-cv-link{
    font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
    color:var(--text-dim);font-family:var(--mono);
    white-space:nowrap;
    border:1px solid var(--line);border-radius:6px;
    padding:4px 10px;
    transition:color .2s ease,border-color .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .footer-cv-link:hover{color:var(--accent);border-color:var(--accent);}
  .sec-updates-link{
    font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
    color:var(--text-dim);font-family:var(--mono);
    white-space:nowrap;
    border:1px solid var(--line);border-radius:6px;
    padding:7px 14px;
    transition:color .2s ease,border-color .2s ease,transform .2s ease;
    display:inline-flex;align-items:center;gap:7px;
    flex-shrink:0;
  }
  .sec-updates-link svg{width:14px;height:14px;flex-shrink:0;}
  .sec-updates-link:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px);}
  .footer-status-val{color:var(--accent);font-variant-numeric:tabular-nums;}
  .footer-led{
    width:6px;height:6px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 6px 1px var(--accent);
    animation:footerLedPulse 2.4s ease-in-out infinite;
  }
  @keyframes footerLedPulse{
    0%,100%{opacity:.4;box-shadow:0 0 4px 0 var(--accent);}
    50%{opacity:1;box-shadow:0 0 8px 2px var(--accent);}
  }
  .footer-ticker{
    font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--text-dim);font-family:var(--mono);
    min-height:14px;
  }
  .footer-ticker-fade{animation:footerTickerFade .5s ease;}
  @keyframes footerTickerFade{
    from{opacity:0;transform:translateY(3px);}
    to{opacity:1;transform:translateY(0);}
  }
  .footer-views {
    font-size: .78rem;
    color: var(--text-dim);
    padding-left: 28px !important;
    padding-right: 14px !important;
  }
  .footer-views svg {
    left: 10px !important;  
    right: auto !important;
  }
  .bus-rail{
    position:fixed;left:32px;top:50%;transform:translateY(-50%);
    z-index:90;display:flex;flex-direction:column;align-items:center;
  }
  .rail-line-svg{
    position:absolute;left:50%;top:0;transform:translateX(-50%);
    height:100%;width:2px;overflow:visible;pointer-events:none;z-index:1;
  }
  .bus-line{stroke:var(--line);stroke-width:2;}
  .bus-current{
    stroke:var(--accent);stroke-width:2;stroke-dasharray:6 10;
    animation:flow 1.4s linear infinite;
  }
  @keyframes flow{to{stroke-dashoffset:-32;}}

  .bus-source, .bus-ground{
    display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
    transform-origin:center;color:var(--line);
  }
  .bus-source.pulse-anim{animation:sourcePulse .7s ease;}
  @keyframes sourcePulse{
    0%{transform:scale(1);filter:none;}
    45%{transform:scale(1.5);filter:drop-shadow(0 0 10px var(--accent2));}
    100%{transform:scale(1);filter:none;}
  }
  .travel-spark{
    position:absolute;left:50%;top:0%;width:7px;height:7px;border-radius:50%;
    background:var(--accent2);transform:translate(-50%,-50%);
    box-shadow:0 0 10px var(--accent2);opacity:0;pointer-events:none;z-index:1;
  }

  .bus-node-wrap{
    position:relative;display:flex;align-items:center;justify-content:center;
    padding:32px 0;z-index:2;
  }
  .bus-dot{
    width:14px;height:14px;border-radius:50%;background:var(--bg-alt);
    border:2px solid var(--line);transition:.3s;flex-shrink:0;position:relative;z-index:2;
  }
  .bus-node-wrap.active .bus-dot{
    border-color:var(--accent);background:var(--accent);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent),0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .bus-dot.lit{
    border-color:var(--accent2) !important;background:var(--accent2) !important;
    box-shadow:0 0 0 6px color-mix(in srgb, var(--accent2) 25%, transparent),0 0 16px color-mix(in srgb, var(--accent2) 80%, transparent) !important;
  }
  .bus-letter{
    position:absolute;left:24px;top:50%;transform:translateY(-50%);
    font-size:.68rem;font-weight:700;color:var(--text-dim);letter-spacing:.5px;transition:.25s;
  }
  .bus-node-wrap.active .bus-letter{color:var(--accent);}

  .reveal{
    opacity:0;transform:translateY(30px);
    transition:opacity .6s ease,transform .6s ease;
  }
  .reveal.visible{opacity:1;transform:translateY(0);}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  #cursorCrosshairH,#cursorCrosshairV,#cursorDotCenter,#cursorReadout,#scopeCursor,#cursorDot,#cursorRing,#cursorBreaker,#cursorFuse{
    display:none;
  }
  @media(hover:hover) and (pointer:fine){
    html:not([data-cursor="none"]) *{cursor:none;}
    html[data-cursor="none"] a,
    html[data-cursor="none"] button,
    html[data-cursor="none"] .bus-source,
    html[data-cursor="none"] .bus-node-wrap,
    html[data-cursor="none"] .card-toggle-btn,
    html[data-cursor="none"] .img-slot,
    html[data-cursor="none"] .tab-btn,
    html[data-cursor="none"] .subtab-btn,
    html[data-cursor="none"] .cursor-option{
      cursor:pointer;
    }

    #cursorCrosshairH,#cursorCrosshairV,#cursorDotCenter,#cursorReadout,#scopeCursor,#cursorDot,#cursorRing,#cursorBreaker,#cursorFuse{
      display:none;
    }
    html[data-cursor="voltmeter"] #cursorCrosshairH,
    html[data-cursor="voltmeter"] #cursorCrosshairV,
    html[data-cursor="voltmeter"] #cursorDotCenter,
    html[data-cursor="voltmeter"] #cursorReadout,
    html[data-cursor="oscilloscope"] #cursorCrosshairH,
    html[data-cursor="oscilloscope"] #cursorCrosshairV{
      display:block;
    }
    .cursor-crosshair-h,.cursor-crosshair-v{
      position:fixed;top:0;left:0;background:var(--accent);pointer-events:none;z-index:9999;
      box-shadow:0 0 6px var(--accent);transition:background .2s ease,box-shadow .2s ease;
    }
    .cursor-crosshair-h{width:14px;height:1.5px;transform:translate(-50%,-50%);}
    .cursor-crosshair-v{width:1.5px;height:14px;transform:translate(-50%,-50%);}
    .cursor-crosshair-h.hovering,.cursor-crosshair-v.hovering{
      background:var(--accent2);box-shadow:0 0 8px var(--accent2);
    }
    .cursor-dot-center{
      position:fixed;top:0;left:0;
      width:3px;height:3px;border-radius:50%;
      background:var(--accent);pointer-events:none;z-index:9999;
      transform:translate(-50%,-50%);transition:background .2s ease;
    }
    .cursor-dot-center.hovering{background:var(--accent2);}
    .cursor-readout{
      position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
      transform:translate(16px,-30px);
      font-family:var(--mono);font-size:.68rem;letter-spacing:.5px;
      background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;
      padding:2px 7px;color:var(--accent);opacity:.85;
      box-shadow:0 0 8px -2px var(--accent);transition:color .2s ease,border-color .2s ease,box-shadow .2s ease;
      white-space:nowrap;
    }
    .cursor-readout.hovering{
      color:var(--accent2);border-color:var(--accent2);box-shadow:0 0 10px -2px var(--accent2);
    }
    .cursor-ripple{
      position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
      border:1.5px solid var(--accent);pointer-events:none;z-index:9997;
      transform:translate(-50%,-50%);
      animation:cursor-ripple .6s ease-out forwards;
    }

    html[data-cursor="oscilloscope"] #scopeCursor{display:block;}
    #scopeCursor{
      position:fixed;top:0;left:0;width:64px;height:32px;
      pointer-events:none;z-index:9999;will-change:transform;
      background:rgba(4,8,12,.55);border:1px solid var(--accent);border-radius:4px;
      box-shadow:0 0 10px rgba(0,0,0,.35),inset 0 0 8px rgba(0,0,0,.4);
      transition:border-color .2s ease,opacity .2s ease;
      overflow:hidden;
    }
    html[data-theme="light"] #scopeCursor{background:rgba(255,255,255,.55);}
    #scopeCursor.active{border-color:var(--accent2);}
    #scopeCursor.ping .scope-corner{animation:scopePing .35s ease;}
    @keyframes scopePing{
      0%{box-shadow:inset 0 0 0 0 currentColor;}
      35%{box-shadow:inset 0 0 0 3px currentColor;}
      100%{box-shadow:inset 0 0 0 0 currentColor;}
    }
    .scope-corner{position:absolute;inset:0;border-radius:4px;pointer-events:none;color:var(--accent);}

    html[data-cursor="ring"] #cursorDot{display:block;}
    html[data-cursor="ring"] #cursorRing{display:block;}
    #cursorDot{
      position:fixed;top:0;left:0;z-index:9999;
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);pointer-events:none;
      transform:translate(-50%,-50%);
      box-shadow:0 0 8px var(--accent);
      transition:width .2s ease,height .2s ease,background .2s ease,opacity .2s ease;
    }
    #cursorRing{
      position:fixed;top:0;left:0;z-index:9999;
      width:34px;height:34px;border-radius:50%;
      border:1.5px dashed var(--accent);pointer-events:none;opacity:.6;
      transform:translate(-50%,-50%);
      animation:cursor-spin 6s linear infinite;
      transition:width .3s ease,height .3s ease,border-color .3s ease,opacity .3s ease;
    }
    #cursorDot.hovering{width:5px;height:5px;background:var(--accent2);box-shadow:0 0 8px var(--accent2);}
    #cursorRing.hovering{
      width:52px;height:52px;border-color:var(--accent2);opacity:1;
      border-style:solid;animation-duration:2.5s;
    }
    #cursorDot.bus-hover{
      width:6px;height:6px;background:var(--accent2);
      box-shadow:0 0 12px var(--accent2),0 0 24px var(--accent2);
      border-radius:2px;transform:translate(-50%,-50%) rotate(45deg);
    }
    #cursorRing.bus-hover{
      width:46px;height:46px;border-radius:6px;border-color:var(--accent2);
      border-style:solid;opacity:1;animation-duration:1.4s;
      box-shadow:0 0 16px -4px var(--accent2);
    }

    html[data-cursor="breaker"] #cursorBreaker{display:block;}
    #cursorBreaker{
      position:fixed;top:0;left:0;z-index:9999;
      width:16px;height:24px;pointer-events:none;
      transform:translate(-50%,-50%);
      background:var(--bg-alt);border:1.5px solid var(--accent);border-radius:3px;
      transition:border-color .2s ease;
    }
    .breaker-lever{
      position:absolute;left:50%;bottom:3px;width:4px;height:11px;
      background:var(--accent);border-radius:2px;
      transform:translateX(-50%) rotate(0deg);transform-origin:bottom center;
      transition:transform .2s ease,background .2s ease;
    }
    #cursorBreaker.hovering{border-color:var(--accent2);}
    #cursorBreaker.hovering .breaker-lever{background:var(--accent2);transform:translateX(-50%) rotate(165deg);}
    #cursorBreaker.tripped .breaker-lever{animation:breakerTrip .45s ease;}
    @keyframes breakerTrip{
      0%{transform:translateX(-50%) rotate(0deg);}
      45%{transform:translateX(-50%) rotate(200deg);}
      100%{transform:translateX(-50%) rotate(165deg);}
    }
    .breaker-spark-wrap{
      position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;z-index:9998;
    }
    .breaker-spark-line{
      position:absolute;top:0;left:0;width:2px;height:16px;
      background:linear-gradient(var(--accent2),transparent);
      border-radius:1px;box-shadow:0 0 6px var(--accent2);
      transform-origin:top center;
      transform:rotate(var(--ang)) translateY(0);
      animation:sparkFly .45s ease-out forwards;
    }
    .breaker-spark-flash{
      position:absolute;top:0;left:0;width:26px;height:26px;border-radius:50%;
      transform:translate(-50%,-50%);background:var(--accent2);opacity:.9;
      box-shadow:0 0 18px var(--accent2);
      animation:sparkFlash .3s ease-out forwards;
    }
    @keyframes sparkFly{
      0%{opacity:1;transform:rotate(var(--ang)) translateY(0);}
      100%{opacity:0;transform:rotate(var(--ang)) translateY(-30px);}
    }
    @keyframes sparkFlash{
      0%{opacity:.9;transform:translate(-50%,-50%) scale(.2);}
      100%{opacity:0;transform:translate(-50%,-50%) scale(1);}
    }

    html[data-cursor="fuse"] #cursorFuse{display:block;}
    #cursorFuse{
      position:fixed;top:0;left:0;z-index:9999;
      width:26px;height:12px;pointer-events:none;
      transform:translate(-50%,-50%);
      background:var(--bg-alt);border:1.5px solid var(--accent);border-radius:8px;
      transition:border-color .2s ease;
    }
    .fuse-filament{
      position:absolute;top:50%;left:4px;right:4px;height:1.5px;
      background:var(--accent);transform:translateY(-50%);
      transition:background .2s ease;
    }
    #cursorFuse.hovering{border-color:var(--accent2);}
    #cursorFuse.hovering .fuse-filament{background:var(--accent2);}
    #cursorFuse.blown .fuse-filament{animation:fuseBlow .45s ease;}
    @keyframes fuseBlow{
      0%{opacity:1;transform:translateY(-50%) scaleX(1);}
      35%{opacity:.15;background:var(--accent2);transform:translateY(-50%) scaleX(.4);}
      60%{opacity:1;transform:translateY(-50%) scaleX(.15);}
      100%{opacity:.35;transform:translateY(-50%) scaleX(.15);}
    }

    html.img-zoom-hover .img-slot,
    html.img-zoom-hover .img-slot *,
    html.img-zoom-hover .peek-slide.d0,
    html.img-zoom-hover .peek-slide.d0 *{
      cursor:zoom-in !important;
    }
    html.img-zoom-hover #cursorCrosshairH,
    html.img-zoom-hover #cursorCrosshairV,
    html.img-zoom-hover #cursorDotCenter,
    html.img-zoom-hover #cursorDot,
    html.img-zoom-hover #cursorRing,
    html.img-zoom-hover #cursorBreaker,
    html.img-zoom-hover #cursorFuse{
      opacity:0 !important;
    }
    html.img-zoom-hover #scopeTrace{opacity:0;}
    #scopeZoomText{
      position:absolute;inset:0;display:none;align-items:center;justify-content:center;
      font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:1px;
      color:var(--accent2);
    }
    html.img-zoom-hover #scopeZoomText{display:flex;}
    html.lightbox-open .lightbox-overlay,
    html.lightbox-open .lightbox-overlay *{
      cursor:zoom-out !important;
    }
    html.lightbox-open #cursorCrosshairH,
    html.lightbox-open #cursorCrosshairV,
    html.lightbox-open #cursorDotCenter,
    html.lightbox-open #cursorDot,
    html.lightbox-open #cursorRing,
    html.lightbox-open #cursorBreaker,
    html.lightbox-open #cursorFuse{
      opacity:0 !important;
    }
    html.lightbox-open #scopeTrace{opacity:0;}
    html.lightbox-open #scopeZoomText{display:flex;}
  }
  @keyframes cursor-ripple{
    from{width:10px;height:10px;opacity:.8;}
    to{width:70px;height:70px;opacity:0;}
  }
  @keyframes cursor-spin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}

  .copy-toast{
    position:absolute;bottom:10px;right:16px;font-size:.72rem;color:var(--accent);
    opacity:0;transition:opacity .3s ease;pointer-events:none;
  }
  .copy-toast.show{opacity:1;}

  .konami-active{animation:konami-spin 1s ease-in-out;}
  @keyframes konami-spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }

  @media(max-width:700px), (hover:none), (pointer:coarse){
    .settings-section-cursor{display:none;}
  }
  @media(max-width:1024px), (hover:none), (pointer:coarse){
    .settings-section-sound{display:none;}
  }

  @media(max-width:1050px){
    .bus-rail{left:16px;}
  }
  @media(max-width:900px){
    .bus-rail{left:8px;transform:translateY(-50%) scale(0.85);}
  }
  @media(max-width:700px){
    .bus-rail{left:4px;transform:translateY(-50%) scale(0.6) translateX(-50%);}
    .bus-letter{display:none;}
    .nwb-launch-btn{display:none;}
    .ied-launch-btn{display:none;}
    .NEM-launch-btn{display:none;}
    .launch-desktop-note{display:block;}
  }

  @media(max-width:820px){
    .hero-grid,.about-grid{grid-template-columns:1fr;}
    .card-cols{grid-template-columns:1fr;}
    .hero-visual{order:-1;margin-bottom:10px;}
    .avatar-ring{width:200px;height:200px;}
    .dl-btns{margin-left:0;width:100%;}
    .code-window{width:100%;}
    footer{padding-top:14px;}
    .footer-row{grid-template-columns:1fr;justify-items:center;}
    .footer-copy{grid-column:1;}
    .footer-left{grid-column:1;justify-self:center;order:2;}
    .footer-right{display:none;}
    .local-time-corner{display:none;}
    h1.name{white-space:normal;font-size:clamp(1.8rem,8vw,2.6rem);}
  }