:root{
    --ink:#0b0b1f;
    --cream:#f5f3e7;
    --cream-rgb:245,243,231;
    --cobalt:#2f5cff;
    --lime:#c6ff3d;
    --coral:#ff4d6d;
    --line: rgba(var(--cream-rgb),0.14);
    --surface:#13142d;
    --surface-hover:#171935;
    /* Text on solid bright accent backgrounds (buttons, active icons, the
       marquee strip) always needs to be dark for contrast, regardless of
       theme — this stays fixed rather than swapping with --ink. */
    --on-accent:#0b0b1f;
    --on-accent-light:#f5f3e7;
  }
  html[data-theme="light"]{
    --ink:#ece1c8;
    --cream:#2b2416;
    --cream-rgb:43,36,22;
    --cobalt:#2647c9;
    --lime:#5a8a12;
    --coral:#c9364f;
    --line: rgba(var(--cream-rgb),0.14);
    --surface:#f7f0e1;
    --surface-hover:#efe4cd;
  }
  body, .exp-item, .edu-card, .project-card, .ttt-widget, .ttt-modal-card,
  .stack-tile, nav, .cursor-dot, .cursor-ring{
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  section{scroll-margin-top:96px;}
  body{
    background:var(--ink);
    color:var(--cream);
    font-family:'Space Grotesk',sans-serif;
    overflow-x:hidden;
    cursor:none;
  }
  ::selection{background:var(--lime);color:var(--on-accent);}
  a{color:inherit;text-decoration:none;}

  /* ---------- custom cursor ---------- */
  .cursor-dot, .cursor-ring{
    position:fixed;top:0;left:0;
    pointer-events:none;
    z-index:9999;
    border-radius:50%;
    transform:translate(-50%,-50%);
  }
  .cursor-dot{
    width:8px;height:8px;background:var(--lime);
  }
  .cursor-ring{
    width:38px;height:38px;
    border:1.5px solid var(--lime);
    transition:width .25s, height .25s, border-color .25s, background .25s;
  }
  .cursor-ring.hover{
    width:80px;height:80px;
    background:rgba(198,255,61,0.1);
    border-color:var(--coral);
  }
  .cursor-ring.hover::after{
    content:attr(data-label);
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:0.05em;
    color:var(--cream);
  }
  @media (hover:none){
    .cursor-dot,.cursor-ring{display:none;}
    body{cursor:auto;}
  }

  /* ---------- layout helpers ---------- */
  section{position:relative;padding:0 6vw;}
  .wrap{max-width:1400px;margin:0 auto;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:12px; letter-spacing:0.15em;
    color:var(--lime); text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:'';width:24px;height:1px;background:var(--lime);}

  /* ---------- laptop intro ---------- */
  #laptop-stage{
    position:relative; height:100vh; width:100%;
    overflow:hidden;
    background:radial-gradient(circle at 50% 38%, #16173d 0%, #0b0b1f 72%);
  }
  #laptop-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .matrix-canvas{
    position:absolute; inset:0; width:100%; height:100%; display:block;
    z-index:1; pointer-events:none; opacity:0;
  }
  .stage-label{
    position:absolute; top:110px; left:50%; transform:translateX(-50%);
    text-align:center; z-index:2; pointer-events:none;
  }
  .stage-label .eyebrow{justify-content:center;}
  .stage-label h2{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.6rem,3.6vw,2.6rem);
    text-transform:uppercase; margin-top:10px;
  }
  .enter-hint{
    position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.15em;
    color:rgba(var(--cream-rgb),0.6); display:flex; flex-direction:column; align-items:center; gap:10px;
    transition:opacity .4s; z-index:2;
  }
  .enter-hint .mouse{width:22px;height:34px;border:1.5px solid rgba(var(--cream-rgb),0.6);border-radius:12px;position:relative;}
  .enter-hint .mouse::after{content:'';position:absolute;top:6px;left:50%;width:3px;height:7px;background:var(--lime);border-radius:2px;transform:translateX(-50%);animation:wheel 1.4s infinite;}
  @keyframes wheel{0%{opacity:1;top:6px;}100%{opacity:0;top:16px;}}

  /* ---------- nav ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 6vw;
    font-family:'JetBrains Mono',monospace;
    font-size:13px;
    mix-blend-mode:difference;
  }
  html[data-theme="light"] nav{
    mix-blend-mode:normal;
    color:var(--cream);
  }
  nav .logo{font-weight:700; letter-spacing:0.02em;}
  nav .links{display:flex; gap:28px;}
  nav .links a{position:relative;}
  nav .links a::after{
    content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--cream);
    transition:width .3s;
  }
  nav .links a:hover::after{width:100%;}
  .theme-toggle{
    background:transparent; border:none; cursor:pointer; padding:0;
    display:flex; align-items:center;
    mix-blend-mode:normal;
  }
  .toggle-track{
    position:relative; width:54px; height:28px; border-radius:20px;
    background:#0b0b1f; border:1px solid rgba(245,243,231,0.25);
    overflow:hidden; display:block;
    transition:background .45s ease, border-color .45s ease;
  }
  html[data-theme="light"] .toggle-track{
    background:#bcd4f0; border-color:rgba(43,36,22,0.2);
  }
  .toggle-stars{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:7px; letter-spacing:6px; color:rgba(245,243,231,0.7);
    opacity:1; transition:opacity .4s ease; padding-left:4px;
  }
  html[data-theme="light"] .toggle-stars{ opacity:0; }
  .toggle-thumb{
    position:absolute; top:2px; left:2px;
    width:22px; height:22px; border-radius:50%;
    background:#f5f3e7;
    transition:transform .45s cubic-bezier(.65,0,.35,1), background .45s ease, box-shadow .45s ease;
  }
  /* Dark mode: a crescent moon, carved out of the thumb circle by
     overlaying a smaller circle in the track's own color. */
  .toggle-thumb::after{
    content:'';
    position:absolute; top:-2px; right:-4px;
    width:16px; height:16px; border-radius:50%;
    background:#0b0b1f;
    transition:opacity .35s ease, background .45s ease;
    opacity:1;
  }
  html[data-theme="light"] .toggle-thumb{
    transform:translateX(26px);
    background:#ffab4a;
    box-shadow:0 0 10px 2px rgba(255,171,74,0.55);
  }
  html[data-theme="light"] .toggle-thumb::after{
    opacity:0;
  }

  /* ---------- hero ---------- */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:100px;
  }
  .hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:rgba(var(--cream-rgb),0.75);
    border:1px solid var(--line); padding:8px 16px; border-radius:30px;
    margin-bottom:24px;
  }
  .pulse-dot{
    width:8px; height:8px; border-radius:50%; background:var(--lime); flex:none;
    animation:pulseDot 2.2s ease-out infinite;
  }
  @keyframes pulseDot{
    0%{ box-shadow:0 0 0 0 rgba(198,255,61,0.55); }
    70%{ box-shadow:0 0 0 10px rgba(198,255,61,0); }
    100%{ box-shadow:0 0 0 0 rgba(198,255,61,0); }
  }
  .hero h1{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(3.5rem,11vw,10rem);
    line-height:0.88;
    letter-spacing:-0.02em;
    text-transform:uppercase;
  }
  .hero h1 .line{overflow:hidden; display:block;}
  .hero h1 .line span{display:inline-block; will-change:transform;}
  .hero h1 .accent{ color:var(--cobalt); -webkit-text-stroke:2px var(--cream); color:transparent; }
  .hero .sub{
    margin-top:28px;
    font-family:'JetBrains Mono',monospace;
    font-size:clamp(13px,1.6vw,17px);
    color:rgba(var(--cream-rgb),0.7);
    max-width:520px;
  }
  .hero .sub .cursor-blink{
    display:inline-block;width:8px;height:1em;background:var(--lime);
    animation:blink 1s steps(1) infinite; vertical-align:-2px; margin-left:2px;
  }
  @keyframes blink{50%{opacity:0;}}

  .scroll-cue{
    position:absolute; bottom:40px; left:6vw;
    font-family:'JetBrains Mono',monospace; font-size:11px;
    letter-spacing:0.1em; color:rgba(var(--cream-rgb),0.5);
    display:flex; align-items:center; gap:10px;
  }
  .scroll-cue .bar{width:1px;height:40px;background:linear-gradient(var(--lime),transparent); animation:scrollbar 1.6s ease-in-out infinite;}
  @keyframes scrollbar{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}50.01%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

  /* ---------- marquee ---------- */
  .marquee-strip{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:22px 0; overflow:hidden; background:var(--cobalt);
    transform:rotate(-1.5deg) scale(1.03);
    margin:120px 0;
  }
  .marquee-track{
    display:flex; width:max-content; gap:60px;
    animation:marquee 22s linear infinite;
  }
  .marquee-strip:hover .marquee-track{animation-play-state:paused;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .marquee-track span{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.6rem,3.4vw,3rem);
    text-transform:uppercase; color:var(--on-accent);
    display:flex; align-items:center; gap:60px;
  }
  .marquee-track span::after{content:'✺'; color:var(--on-accent-light); font-size:0.5em;}

  /* ---------- about ---------- */
  .about{padding:60px 6vw 160px;}
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; margin-top:30px;}
  .about-text{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(1.4rem,2.6vw,2.4rem);
    line-height:1.35; font-weight:500;
  }
  .about-text .word{display:inline-block; overflow:hidden; position:relative;}
  .about-text .word span{display:inline-block; will-change:transform;}
  .about-text .hl{color:var(--lime);}
  .stat-block{display:flex; flex-direction:column; gap:28px;}
  .stat{border-top:1px solid var(--line); padding-top:14px;}
  .stat .num{font-family:'Archivo Black',sans-serif; font-size:3rem; color:var(--coral);}
  .stat .label{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; color:rgba(var(--cream-rgb),0.6); text-transform:uppercase;}

  @media (max-width:800px){ .about-grid{grid-template-columns:1fr;} }

  /* ---------- big stylized section headings (ripple lives here only) ---------- */
  .big-heading{ text-align:center; padding:10px 0 50px; transform:translateZ(0); will-change:filter; backface-visibility:hidden; }
  .big-heading .ornament{
    font-size:22px; color:rgba(var(--cream-rgb),0.45); margin-bottom:12px;
  }
  .big-heading .heading-top{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.3rem,2.8vw,2rem);
    text-transform:uppercase; letter-spacing:0.03em;
    color:var(--cream);
  }
  .big-heading .heading-bottom{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(3.2rem,13.5vw,10.5rem);
    line-height:0.86;
    text-transform:uppercase;
    color:transparent;
    -webkit-text-stroke:2px var(--cream);
    letter-spacing:-0.01em;
    margin-top:-4px;
  }
  .exp-heading{}
  .edu-heading{}
  .work-heading{ padding-bottom: 10px; }

  /* ---------- experience (click-to-expand, alternating stack-in) ---------- */
  .experience{padding:60px 6vw 200px;}
  .exp-item{
    display:flex; gap:26px; align-items:flex-start;
    padding:30px 22px; border-radius:14px;
    cursor:pointer; position:relative;
    background:var(--surface);
    box-shadow:0 25px 50px -30px rgba(0,0,0,0.75);
    transition:background .35s ease, box-shadow .35s ease;
  }
  .exp-item:not(:first-child){ margin-top:-12px; }
  .exp-item.open{ margin-bottom:20px; transition:background .35s ease, box-shadow .35s ease, margin-bottom .3s ease; }
  .exp-item:hover{ background:var(--surface-hover); box-shadow:0 30px 60px -25px rgba(0,0,0,0.85); }
  .exp-thumb{
    width:92px; height:92px; border-radius:10px; overflow:hidden; flex:none;
    border:1px solid var(--line);
  }
  .exp-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .exp-item:hover .exp-thumb img{ transform:scale(1.15); }
  .exp-main{ flex:1; min-width:0; }
  .exp-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  .exp-top h3{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.15rem,2.1vw,1.6rem);
    text-transform:uppercase; letter-spacing:-0.01em;
  }
  .exp-company{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--lime); margin-top:6px;}
  .exp-dates{font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(var(--cream-rgb),0.5); white-space:nowrap; margin-top:5px;}
  .acc-icon{
    width:28px; height:28px; border:1px solid var(--line); border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:15px;
    transition:transform .35s ease, background .35s ease, border-color .35s ease, color .35s ease;
  }
  .exp-item.open .acc-icon{ transform:rotate(45deg); background:var(--lime); color:var(--on-accent); border-color:var(--lime); }
  .acc-panel{ max-height:0; overflow:hidden; transition:max-height .5s ease; }
  .acc-panel ul{ padding:18px 0 4px 18px; color:rgba(var(--cream-rgb),0.7); display:flex; flex-direction:column; gap:8px; max-width:680px; }
  @media (max-width:700px){ .exp-item{flex-direction:column;} .exp-thumb{width:100%; height:150px;} }

  /* ---------- education (3D tilt hover) ---------- */
  .education{padding:60px 6vw 160px;}
  .edu-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px;}
  .edu-card{
    border:1px solid var(--line); border-radius:10px; padding:28px; cursor:pointer;
    transition:border-color .3s, background .3s; will-change:transform;
  }
  .edu-card:hover{ border-color:var(--coral); background:rgba(255,77,109,0.04); }
  .edu-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .edu-card h3{font-family:'Archivo Black',sans-serif; font-size:1.25rem; text-transform:uppercase;}
  .edu-card .school{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--coral); margin-top:6px;}
  .edu-card .dates{font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(var(--cream-rgb),0.5); margin-top:4px;}
  .edu-panel{ max-height:0; overflow:hidden; transition:max-height .5s ease; }
  .edu-panel .coursework{font-size:14px; color:rgba(var(--cream-rgb),0.65); line-height:1.5; padding-top:16px;}
  .edu-card .acc-icon{ margin-top:2px; }
  .edu-card.open .acc-icon{ transform:rotate(45deg); background:var(--coral); color:var(--on-accent); border-color:var(--coral); }
  @media (max-width:700px){ .edu-grid{grid-template-columns:1fr;} }

  /* ---------- projects (curved horizontal scroll + traveling bug) ---------- */
  .projects{padding:0;}
  .projects-pin{ padding:70px 0 30px; }
  .projects-pin > .wrap{padding:0 6vw;}
  .horizontal-wrap{
    position:relative; overflow:hidden; padding:30px 0 90px;
  }
  .bug-path{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0;
  }
  .bug-path path{
    fill:none; stroke:rgba(var(--cream-rgb),0.28);
    stroke-width:2; stroke-dasharray:2 10; stroke-linecap:round;
  }
  .path-leaf{
    position:absolute; font-size:26px; opacity:0.5; z-index:0;
    pointer-events:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  }
  .path-leaf.leaf1{ top:18%; left:22%; transform:rotate(-15deg); }
  .path-leaf.leaf2{ top:62%; left:48%; transform:rotate(20deg); }
  .path-leaf.leaf3{ top:30%; left:76%; transform:rotate(-8deg); }
  .travel-bug{
    position:absolute; top:50%; left:6vw; font-size:36px; z-index:0;
    pointer-events:none; filter:drop-shadow(0 8px 14px rgba(0,0,0,0.5));
    will-change:transform;
  }
  .horizontal-track{
    display:flex; width:max-content;
    position:relative; z-index:1;
    will-change:transform;
  }
  .project-slide{
    flex:none; width:100vw;
    display:flex; align-items:center; justify-content:center;
    padding:0 6vw;
    box-sizing:border-box;
  }
  .project-card{
    display:flex; flex-direction:column; gap:18px;
    width:min(480px,64vw); flex:none;
    padding:0; position:relative; cursor:pointer; border-radius:14px;
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .project-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px -25px rgba(0,0,0,0.55);
  }
  .project-media{
    position:relative; height:min(46vh,320px); overflow:hidden; border-radius:10px;
    background:linear-gradient(135deg,var(--cobalt),var(--ink));
    transition:height .45s ease;
  }
  .project-card.open .project-media{
    height:110px;
  }
  .project-media .reveal{
    position:absolute; inset:0; background:var(--lime); transform-origin:bottom; z-index:2;
  }
  .project-media img{
    width:100%; height:100%; object-fit:cover;
    transform:scale(1.15);
    transition:transform .6s cubic-bezier(.16,1,.3,1);
  }
  .project-card:hover .project-media img{transform:scale(1);}
  .project-info .index{font-family:'JetBrains Mono',monospace; color:var(--coral); font-size:13px;}
  .project-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .project-info h3{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.3rem,2.4vw,1.9rem);
    text-transform:uppercase; margin:10px 0 6px;
    letter-spacing:-0.01em;
    transition:font-size .3s ease;
  }
  .project-card.open .project-info h3{
    font-size:clamp(1.1rem,1.8vw,1.4rem);
  }
  .project-panel{ max-height:0; overflow:hidden; transition:max-height .5s ease; }
  .project-panel-inner{ padding-top:14px; }
  .project-info p{color:rgba(var(--cream-rgb),0.65); margin-bottom:20px;}
  .tags{display:flex; gap:10px; flex-wrap:wrap;}
  .tags span{
    font-family:'JetBrains Mono',monospace; font-size:11px;
    border:1px solid var(--line); padding:5px 10px; border-radius:20px;
    color:rgba(var(--cream-rgb),0.8);
    background:var(--ink);
  }
  .project-card .acc-icon{ margin-top:12px; }
  .project-card.open .acc-icon{ transform:rotate(45deg); background:var(--coral); color:var(--on-accent); border-color:var(--coral); }

  /* ---------- stack / magnetic tiles ---------- */
  .stack{padding:60px 6vw 160px;}
  .stack-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:16px; margin-top:40px;
  }
  .stack-tile{
    border:1px solid var(--line); border-radius:10px;
    padding:26px 20px; text-align:center;
    font-family:'JetBrains Mono',monospace; font-size:14px;
    transition:background .3s, border-color .3s;
    will-change:transform;
  }
  .stack-tile:hover{background:rgba(198,255,61,0.06); border-color:var(--lime);}

  /* ---------- contact ---------- */
  .contact{
    min-height:90vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    padding:100px 6vw;
  }
  .contact-ripple{
    display:flex; flex-direction:column; align-items:center;
  }
  .magnetic-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:min(50vw,320px); aspect-ratio:1;
    border-radius:50%; background:var(--coral); color:var(--on-accent);
    font-family:'Archivo Black',sans-serif; font-size:clamp(1.2rem,2.4vw,1.8rem);
    text-transform:uppercase; position:relative; will-change:transform;
  }
  .contact .email{
    margin-top:50px; font-family:'JetBrains Mono',monospace;
    font-size:clamp(1rem,2.4vw,1.6rem); color:rgba(var(--cream-rgb),0.85);
  }

  /* ---------- tic-tac-toe widget ---------- */
  .ttt-widget{
    margin-top:70px; padding:34px; border:1px solid var(--line); border-radius:16px;
    width:min(360px,90vw); background:rgba(var(--cream-rgb),0.02);
  }
  .ttt-intro{
    font-family:'JetBrains Mono',monospace; font-size:13px;
    color:rgba(var(--cream-rgb),0.6); margin-bottom:20px;
  }
  .ttt-picker p{
    font-family:'JetBrains Mono',monospace; font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--lime); margin-bottom:16px;
  }
  .ttt-picker-btns{ display:flex; gap:14px; justify-content:center; }
  .ttt-choice{
    font-family:'Archivo Black',sans-serif; font-size:1.1rem; text-transform:uppercase;
    padding:14px 20px; border-radius:10px; border:1px solid var(--line);
    background:transparent; color:var(--cream); cursor:pointer; flex:1;
    transition:border-color .25s, background .25s, transform .25s;
  }
  .ttt-choice:hover{ border-color:var(--lime); background:rgba(198,255,61,0.08); transform:translateY(-3px); }
  .ttt-game{ display:none; }
  .ttt-game.active{ display:block; }
  .ttt-picker.hidden{ display:none; }
  .ttt-status{
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; color:rgba(var(--cream-rgb),0.65); margin-bottom:18px;
  }
  .ttt-board{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    width:min(240px,80vw); margin:0 auto 22px;
  }
  .ttt-cell{
    aspect-ratio:1; border-radius:8px; border:1px solid var(--line);
    background:rgba(var(--cream-rgb),0.03); cursor:pointer;
    font-family:'Archivo Black',sans-serif; font-size:1.8rem;
    color:var(--cream); display:flex; align-items:center; justify-content:center;
    transition:background .2s, border-color .2s;
  }
  .ttt-cell:not(:disabled):hover{ border-color:var(--lime); background:rgba(198,255,61,0.06); }
  .ttt-cell:disabled{ cursor:default; }
  .ttt-cell.mark-x{ color:var(--cobalt); }
  .ttt-cell.mark-o{ color:var(--coral); }
  .ttt-reset{
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; color:rgba(var(--cream-rgb),0.6);
    border:1px solid var(--line); border-radius:30px; padding:8px 20px;
    background:transparent; cursor:pointer; transition:border-color .25s, color .25s;
  }
  .ttt-reset:hover{ border-color:var(--coral); color:var(--coral); }

  .ttt-modal{
    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    background:rgba(5,6,15,0.75); opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .ttt-modal.show{ opacity:1; pointer-events:auto; }
  .ttt-modal-card{
    background:var(--ink); border:1px solid var(--line); border-radius:16px;
    padding:44px 40px; text-align:center; width:min(320px,86vw);
    transform:scale(0.9); transition:transform .3s ease;
  }
  .ttt-modal.show .ttt-modal-card{ transform:scale(1); }
  .ttt-modal-text{
    font-family:'Archivo Black',sans-serif; font-size:1.6rem; text-transform:uppercase;
    margin-bottom:26px;
  }
  .ttt-modal-btn{
    font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--on-accent); background:var(--lime);
    border:none; border-radius:30px; padding:12px 28px; cursor:pointer;
  }

  footer{
    display:flex; justify-content:space-between; padding:30px 6vw;
    font-family:'JetBrains Mono',monospace; font-size:12px;
    color:rgba(var(--cream-rgb),0.5); border-top:1px solid var(--line);
  }