/* drewkkennedy.com */
  :root{
    --night:#0B0428;
    --night-2:#160A3E;
    --win:#F0EDF5;
    --win-2:#E4DFEF;
    --ink:#1E1938;
    --ink-soft:#5C5478;
    --bevel-hi:#FFFFFF;
    --bevel-lo:#8E86A8;
    --magenta:#FF3CAC;
    --cyan:#00E5FF;
    --violet:#7A2BD9;
    --gold:#FFD34D;
    --title-grad:linear-gradient(90deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--night);
    color:var(--ink);
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    line-height:1.7;
    overflow-x:hidden;
  }

  .serif{ font-family:'Times New Roman', Times, serif; }
  .mono{ font-family:'Courier New', Courier, monospace; }

  ::selection{ background:var(--magenta); color:#fff; }
  :focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }

  a{ color:#2B49C5; }
  a:visited{ color:var(--violet); }
  a:hover{ color:var(--magenta); }

  .skip{
    position:absolute; left:-9999px; top:0;
    background:var(--ink); color:#fff;
    padding:10px 18px; z-index:1000;
  }
  .skip:focus{ left:12px; top:12px; }

  /* starfield */
  .stars{
    position:fixed; inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
      radial-gradient(1px 1px at 12px 18px, #fff, transparent),
      radial-gradient(1px 1px at 68px 44px, rgba(255,255,255,0.8), transparent),
      radial-gradient(1.5px 1.5px at 120px 90px, var(--cyan), transparent),
      radial-gradient(1px 1px at 160px 24px, rgba(255,255,255,0.65), transparent),
      radial-gradient(1px 1px at 40px 120px, rgba(255,60,172,0.8), transparent),
      radial-gradient(1px 1px at 190px 150px, rgba(255,255,255,0.7), transparent),
      radial-gradient(1.5px 1.5px at 90px 170px, rgba(255,255,255,0.9), transparent);
    background-size:220px 190px;
    animation:twinkle 6s ease-in-out infinite alternate;
  }
  @keyframes twinkle{ from{ opacity:0.75; } to{ opacity:1; } }

  /* crt overlay */
  .crt-overlay{
    position:fixed; inset:0;
    z-index:900;
    pointer-events:none;
    display:none;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 2px, transparent 4px);
  }
  body.crt .crt-overlay{ display:block; }

  #confettiCanvas{
    position:fixed; inset:0;
    width:100%; height:100%;
    z-index:1100; /* above all chrome */
    pointer-events:none;
    display:none; /* shown while active */
  }

  .toast{
    position:fixed;
    bottom:26px; left:50%;
    transform:translate(-50%, 20px);
    z-index:1200; /* always on top */
    background:var(--ink);
    color:#fff;
    border:2px outset var(--bevel-hi);
    padding:12px 20px;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:13px;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s ease, transform 0.4s ease;
    max-width:min(560px, 88vw);
    text-align:center;
  }
  .toast.on{ opacity:1; transform:translate(-50%, 0); }

  /* page column */
  .page{
    position:relative;
    z-index:1;
    max-width:860px;
    margin:0 auto;
    padding:26px 14px 60px;
  }

  /* header banner */
  .banner{
    border:2px outset var(--bevel-hi);
    background:#0B0428;
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:62px 20px 58px;
  }
  /* sunset theme */
  .banner.sunset{
    background:linear-gradient(180deg, #1B0C4A 0%, #4A1663 34%, #B0286E 62%, #FF6B4A 88%, #FFD34D 100%);
  }
  .banner .sun, .banner .grid-floor{ display:none; }
  .banner.sunset .sun, .banner.sunset .grid-floor{ display:block; }
  .banner.sunset .grid-floor{ animation:gridScroll 2s linear infinite, gridHeat 7s ease-in-out infinite; }
  @keyframes gridHeat{
    0%,100%{ transform:perspective(220px) rotateX(58deg) skewX(-1.2deg); }
    50%{ transform:perspective(220px) rotateX(58deg) skewX(1.2deg); }
  }
  .banner .sun{
    position:absolute; left:50%; bottom:-46px; transform:translateX(-50%);
    width:230px; height:230px; border-radius:50%; z-index:0;
    background:linear-gradient(180deg, #FFD34D 0%, #FF6B4A 45%, #FF3CAC 100%);
    opacity:0.85;
    -webkit-mask:repeating-linear-gradient(0deg, #000 0 12px, transparent 12px 19px);
    mask:repeating-linear-gradient(0deg, #000 0 12px, transparent 12px 19px);
  }
  .banner .grid-floor{
    position:absolute; left:-20%; right:-20%; bottom:0; height:38%; z-index:0;
    background:
      repeating-linear-gradient(90deg, rgba(0,229,255,0.35) 0 1px, transparent 1px 52px),
      repeating-linear-gradient(0deg, rgba(0,229,255,0.35) 0 1px, transparent 1px 26px),
      linear-gradient(180deg, transparent, rgba(11,4,40,0.6));
    transform:perspective(220px) rotateX(58deg);
    transform-origin:bottom;
  }
  /* arcade theme */
  .banner-carpet{
    display:none;
    position:absolute;
    top:-160px; left:-240px;
    width:calc(100% + 480px);
    height:calc(100% + 320px);
    z-index:0;
    opacity:0.85;
  }
  .banner.arcade .banner-carpet{
    display:block;
    animation:carpetDrift 22s linear infinite;
    will-change:transform;
  }
  /* dark pocket to keep the title legible */
  .banner.arcade::before{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(ellipse 62% 78% at 50% 46%, rgba(11,4,40,0.94) 0%, rgba(11,4,40,0.78) 42%, rgba(11,4,40,0) 80%);
  }
  /* platformer theme */
  .banner.platformer{
    background:linear-gradient(180deg, #1E5A9E 0%, #4E97D8 46%, #8FCBF0 76%, #CFEEFF 100%);
  }
  .pf-scene{ display:none; position:absolute; inset:0; z-index:0; overflow:hidden; }
  .banner.platformer .pf-scene{ display:block; }
  .pf-layer{ position:absolute; will-change:transform; }
  .pf-clouds{ left:-300px; width:calc(100% + 600px); top:14px; height:72px; animation:pfClouds 90s linear infinite; }
  .pf-hills{ left:-360px; width:calc(100% + 720px); bottom:58px; height:104px; animation:pfHills 34s linear infinite; }
  .pf-ground{ left:-320px; width:calc(100% + 640px); bottom:0; height:150px; animation:pfGround 16s linear infinite; }
  @keyframes pfClouds{ to{ transform:translateX(300px); } } /* one pattern width, loops seamlessly */
  @keyframes pfHills{ to{ transform:translateX(-360px); } }
  @keyframes pfGround{ to{ transform:translateX(-320px); } }
  /* coins spin around their own center */
  .pf-coin{ transform-box:fill-box; transform-origin:center; animation:coinSpin 0.85s ease-in-out infinite; }
  .pf-coin:nth-of-type(2n){ animation-delay:-0.3s; }
  .pf-coin:nth-of-type(3n){ animation-delay:-0.55s; }
  @keyframes coinSpin{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(0.14); } }
  /* dim scene for title contrast */
  .banner.platformer::before{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(ellipse 78% 92% at 50% 50%, rgba(6,14,32,0.26) 0%, rgba(6,14,32,0.17) 58%, rgba(6,14,32,0.14) 100%);
  }
  /* dark outline for title over bright sky */
  .banner.platformer h1{ filter:drop-shadow(2px 3px 0 rgba(10,26,54,0.92)) drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
  .banner.platformer .tagline{ color:#fff; text-shadow:1px 1px 0 rgba(10,26,54,0.95), 0 0 3px rgba(10,26,54,0.6); }
  /* game boy theme */
  .banner.gameboy{ background:#9bbc0f; }
  .banner.gameboy::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    mix-blend-mode:multiply;
    background:
      radial-gradient(circle, rgba(15,56,15,0.18) 22%, transparent 26%) 0 0 / 4px 4px,
      repeating-linear-gradient(0deg, rgba(15,56,15,0.07) 0 1px, transparent 1px 3px);
  }
  .banner.gameboy h1{
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    color:#0f380f; -webkit-text-fill-color:#0f380f;
    filter:none; text-shadow:none;
    overflow:hidden;                 /* clip shine sweep */
    padding:0 0.14em 0.2em;          /* room for italic y descender */
  }
  /* shine sweep after logo lands */
  .banner.gameboy h1::after{
    content:""; position:absolute; top:0; left:0; height:100%; width:55%;
    background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.6) 50%, transparent 68%);
    transform:translateX(-200%); pointer-events:none;
  }
  @keyframes gbBoot{ 0%{ transform:translateY(-230%); } 62%{ transform:translateY(0); } 100%{ transform:translateY(0); } }
  @keyframes gbShine{ to{ transform:translateX(240%); } }
  .banner.gameboy .tagline{ color:#0f380f; text-shadow:none; }
  @keyframes gbFadeIn{ from{ opacity:0; } to{ opacity:1; } }
  .banner.gameboy .net-badge{ filter:drop-shadow(2px 2px 0 rgba(15,56,15,0.5)); }
  .banner.gameboy .net-badge path{ fill:#306230; stroke:#9bbc0f; }
  .banner.gameboy .net-badge text{ fill:#0f380f !important; }
  .gb-start{ display:none; }
  .banner.gameboy .gb-start{
    display:block; position:absolute; left:0; right:0; bottom:12px; z-index:2;
    text-align:center; font-family:'Courier New', Courier, monospace; font-weight:bold;
    font-size:12px; letter-spacing:0.22em; color:#0f380f;
    opacity:0;
  }
  @keyframes gbBlink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
  /* boot plays after the splash clears; delay ~0.8s past the 0.9s fade.
     backwards fill keeps the logo clipped during the delay and frees the
     transform for :hover afterward. dependent delays shift by the same 0.8s. */
  body.entered .banner.gameboy h1{ animation:gbBoot 2s linear 0.8s backwards; }
  body.entered .banner.gameboy h1::after{ animation:gbShine 0.85s ease-in 2.3s 1; }
  body.entered .banner.gameboy .tagline{ animation:gbFadeIn 0.5s ease 2.05s both; }
  body.entered .banner.gameboy .gb-start{ animation:gbBlink 1.05s steps(2) infinite 2.3s; }
  /* defend.exe theme */
  .banner.defend{ background:radial-gradient(ellipse at 50% 22%, #14134a 0%, #06030f 72%); }
  .def-scene{ display:none; position:absolute; inset:0; z-index:0; overflow:hidden; }
  .banner.defend .def-scene{ display:block; }
  .def-stars{
    position:absolute; inset:0;
    background-image:
      radial-gradient(1px 1px at 20px 24px, #fff, transparent),
      radial-gradient(1px 1px at 130px 60px, rgba(255,255,255,0.8), transparent),
      radial-gradient(1.5px 1.5px at 80px 100px, var(--cyan), transparent),
      radial-gradient(1px 1px at 190px 40px, rgba(255,255,255,0.7), transparent),
      radial-gradient(1px 1px at 50px 140px, rgba(255,60,172,0.8), transparent);
    background-size:220px 170px;
  }
  .def-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
  .banner.defend::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(ellipse 60% 70% at 50% 52%, rgba(6,3,15,0.7) 0%, rgba(6,3,15,0.3) 55%, transparent 80%);
  }
  /* scanlines + vignette, overrides the banner scanlines */
  .banner.defend::after{
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse 108% 116% at 50% 50%, transparent 52%, rgba(0,0,0,0.55) 100%);
  }
  /* faint scanlines + diagonal glare */
  .banner::after{
    content:"";
    position:absolute; inset:0;
    z-index:3;
    pointer-events:none;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 4px),
      linear-gradient(115deg, transparent 44%, rgba(255,255,255,0.05) 49%, transparent 56%);
  }
  .banner h1{
    position:relative;
    z-index:2;
    font-family:'Times New Roman', Times, serif;
    font-style:italic;
    font-weight:bold;
    font-size:clamp(38px, 8vw, 76px);
    letter-spacing:0.01em;
    line-height:1.02;
    background:linear-gradient(180deg, #FFFFFF 0%, #D8E8FF 38%, #8FB8E8 48%, #FFFFFF 55%, #B29CE8 78%, #FFFFFF 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(2px 3px 0 rgba(30,10,60,0.85)) drop-shadow(0 0 18px rgba(0,229,255,0.35));
  }
  /* background-clip:text won't paint the italic y descender that dips below the
     box; extend the paint area down and cancel it with margin so layout is
     unchanged. gameboy uses a solid fill and is exempt. */
  .banner:not(.gameboy) h1{ padding-bottom:0.16em; margin-bottom:-0.16em; }
  .banner .tagline{
    position:relative;
    z-index:2;
    margin-top:14px;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:13px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:#FFF6FB;
    text-shadow:1px 1px 0 rgba(30,10,60,0.9);
  }
  /* corner starburst sticker */
  .net-badge{
    position:absolute;
    top:8px; right:12px;
    z-index:4;
    width:clamp(66px, 12vw, 104px);
    height:auto;
    transform:rotate(11deg);
    transform-origin:center;
    filter:drop-shadow(2px 2px 0 rgba(11,4,40,0.7)) drop-shadow(0 0 8px rgba(255,60,172,0.55));
  }
  .net-badge:hover{ animation:netWobble 0.5s ease-in-out infinite; }
  @keyframes netWobble{
    0%,100%{ transform:rotate(4deg) scale(1.08); }
    50%{ transform:rotate(17deg) scale(1.08); }
  }
  @keyframes carpetDrift{ to{ transform:translate(-240px, -160px); } }
  @media (max-width:520px){ .net-badge{ top:4px; right:6px; } }

  /* nav */
  .navbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    background:var(--win-2);
    border:2px outset var(--bevel-hi);
    border-top:none;
    padding:8px;
  }
  .navbtn{
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:12.5px;
    text-decoration:none;
    color:var(--ink) !important;
    background:var(--win);
    border:2px outset var(--bevel-hi);
    padding:7px 16px;
    cursor:pointer;
  }
  .navbtn:hover{ background:#FBF9FF; color:var(--ink) !important; }
  .navbtn:active{ border-style:inset; }

  /* marquee */
  .newsbar{
    margin-top:14px;
    border:2px inset var(--bevel-hi);
    background:#08031C;
    color:var(--cyan);
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:13px;
    overflow:hidden;
    padding:8px 0;
    white-space:nowrap;
  }
  .newsbar .news-track{
    display:inline-block;
    padding-left:100%;
    animation:crawl 30s linear infinite;
  }
  .newsbar:hover .news-track{ animation-play-state:paused; }
  @keyframes crawl{ to{ transform:translateX(-100%); } }
  .newsbar b{ color:var(--magenta); }

  /* windows */
  .window{
    margin-top:26px;
    border:2px outset var(--bevel-hi);
    background:var(--win);
    box-shadow:4px 4px 0 rgba(0,0,0,0.45);
  }
  .titlebar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:var(--title-grad);
    padding:5px 6px 5px 12px;
    border-bottom:2px solid var(--bevel-lo);
  }
  .titlebar .t-label{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:13.5px;
    letter-spacing:0.06em;
    color:#fff;
    text-shadow:1px 1px 0 rgba(30,10,60,0.8);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0; /* allow label to shrink and ellipsize */
  }
  .titlebar .t-btns{ display:flex; gap:4px; flex-shrink:0; }
  .titlebar .t-btns i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px; height:18px;
    background:var(--win);
    border:2px outset var(--bevel-hi);
    font-style:normal;
    font-family:Verdana, sans-serif;
    font-weight:bold;
    font-size:10px;
    color:var(--ink);
    cursor:default;
    user-select:none;
  }
  .titlebar .t-btns i:active{ border-style:inset; }
  .win-body{ padding:22px 24px 26px; }
  .win-body > p{ margin-bottom:1em; }
  .win-body b{ color:var(--ink); }

  h2.win-h{
    font-family:'Times New Roman', Times, serif;
    font-style:italic;
    font-size:30px;
    color:var(--ink);
    margin-bottom:12px;
  }
  .specs{
    margin-top:18px;
    border:2px inset var(--bevel-hi);
    background:#08031C;
    color:#D5F8FF;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:12.5px;
    line-height:1.7;
    padding:12px 15px;
  }
  .specs .spec-title{
    color:var(--gold);
    letter-spacing:0.1em;
    padding-bottom:7px;
    margin-bottom:8px;
    border-bottom:1px dotted rgba(213,248,255,0.3);
  }
  .spec-row{ display:flex; gap:12px; padding:3px 0; }
  .spec-row + .spec-row{ border-top:1px dotted rgba(213,248,255,0.12); }
  .spec-k{
    flex:0 0 118px;
    color:var(--gold);
    letter-spacing:0.04em;
    white-space:nowrap;
  }
  .spec-v{ color:#D5F8FF; font-weight:normal; }
  .spec-v b{ color:#D5F8FF; font-weight:normal; }
  @media (max-width:540px){
    .spec-row{ flex-direction:column; gap:1px; padding:6px 0; }
    .spec-k{ flex-basis:auto; }
  }
  .hr90{
    border:none;
    height:3px;
    margin:16px 0 18px;
    background:repeating-linear-gradient(90deg, var(--magenta) 0 14px, var(--cyan) 14px 28px);
  }

  /* work.exe note line */
  .table-note{ margin-top:16px; font-size:12.5px; color:var(--ink-soft); }

  /* two-column layout inside windows */
  .cols{ display:grid; grid-template-columns:3fr 2fr; gap:26px; align-items:start; }
  @media (max-width:700px){ .cols{ grid-template-columns:1fr; } }

  /* stats box */
  .statbox{
    border:2px inset var(--bevel-hi);
    background:#08031C;
    color:#D5F8FF;
    font-family:'Courier New', Courier, monospace;
    font-size:13px;
    padding:14px 16px;
  }
  .statbox .sb-title{
    color:var(--gold);
    font-weight:bold;
    text-align:center;
    letter-spacing:0.14em;
    margin-bottom:10px;
  }
  .statbox .sb-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:4px 0;
    border-bottom:1px dotted rgba(213,248,255,0.3);
  }
  .statbox .sb-row:last-child{ border-bottom:none; }
  .statbox .sb-row b{ color:var(--cyan); }
  .statbox a, .statbox a:visited{ color:var(--cyan); text-decoration:underline; text-underline-offset:2px; }
  .statbox a:hover{ color:var(--gold); }
  .nowplaying{
    margin-top:14px;
    border:2px inset var(--bevel-hi);
    background:#08031C;
    padding:10px 14px;
    font-family:'Courier New', Courier, monospace;
    font-size:12.5px;
    color:#D5F8FF;
  }
  .nowplaying a{ color:var(--gold); }

  /* watch link opens the player in a modal */
  .rez-watch{
    display:inline-block;
    margin-left:12px;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:12px;
    color:var(--violet);
    text-decoration:none;
    vertical-align:baseline;
  }
  .rez-watch:hover{ color:var(--magenta); }
  .rez-watch .yt-dot{ color:#E62117; }
  #ytModal{
    position:fixed; inset:0;
    z-index:870;
    display:none;
    align-items:center; justify-content:center;
    background:rgba(4,2,16,0.82);
    padding:16px;
  }
  #ytModal.on{ display:flex; }
  .ytm-win{
    background:var(--win);
    border:2px outset var(--bevel-hi);
    box-shadow:6px 6px 0 rgba(0,0,0,0.5);
    width:min(760px, 96vw);
  }
  .ytm-body{ padding:8px; }
  .yt-frame{ position:relative; width:100%; aspect-ratio:16 / 9; border:2px inset var(--bevel-hi); background:#000; }
  .yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .nowplaying .np-eq{ color:var(--magenta); animation:eqblink 1.1s steps(2) infinite; }
  @keyframes eqblink{ 50%{ opacity:0.35; } }

  /* timeline as definition rows */
  .rez-row{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:18px;
    padding:14px 0;
    border-bottom:1px dashed var(--bevel-lo);
  }
  .rez-row:last-child{ border-bottom:none; }
  .rez-when{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:13px;
    color:var(--violet);
    white-space:nowrap;
  }
  .rez-what b{ font-size:15px; }
  .rez-what .rz-role{
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--magenta);
    font-weight:bold;
    margin:2px 0 6px;
  }
  .rez-what p{ color:var(--ink-soft); font-size:13.5px; max-width:64ch; }
  @media (max-width:600px){ .rez-row{ grid-template-columns:1fr; gap:4px; } }

  /* extras grid */
  .extras-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:16px;
  }
  .extra{
    border:2px outset var(--bevel-hi);
    background:#FBF9FF;
    padding:16px 18px;
  }
  .extra b{ display:block; margin-bottom:6px; font-size:14px; }
  .extra p{ font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
  .extra a{ font-size:12.5px; font-weight:bold; }

  /* contact */
  .email-big{
    display:inline-block;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:clamp(16px, 3.4vw, 24px);
    background:#08031C;
    color:var(--cyan) !important;
    border:2px inset var(--bevel-hi);
    padding:14px 26px;
    text-decoration:none;
    margin:6px 0 18px;
  }
  .email-big:hover{ color:var(--gold) !important; }
  .linklist{ columns:2; column-gap:34px; font-size:13.5px; }
  .linklist li{ margin:0 0 8px 18px; }
  @media (max-width:600px){ .linklist{ columns:1; } }

  /* guestbook button */
  .gb-btn{
    display:inline-block;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:13px;
    color:var(--ink) !important;
    text-decoration:none;
    background:var(--win);
    border:2px outset var(--bevel-hi);
    padding:9px 20px;
  }
  .gb-btn:active{ border-style:inset; }
  .gb-btn:hover{ background:#FBF9FF; }

  .contact-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px 26px;
    flex-wrap:wrap;
    margin-bottom:14px;
  }
  .contact-row .email-big{ margin:6px 0; }
  .myspace-cta{ display:inline-block; margin:0; }
  .myspace-cta img{ width:180px; height:auto; image-rendering:auto; mix-blend-mode:multiply; }
  .myspace-cta:hover img{ filter:drop-shadow(0 0 10px rgba(0,229,255,0.7)); }

  .dancing-baby{ width:fit-content; margin:0 auto 20px; } /* shrink to the image so the click area isn't full-width */
  .dancing-baby img{ width:110px; height:auto; mix-blend-mode:screen; }

  /* guestbook */
  .gb-entries{
    border:2px inset var(--bevel-hi);
    background:#FBF9FF;
    max-height:220px;
    overflow-y:auto;
    padding:6px 12px;
    margin-bottom:12px;
    text-align:left;
  }
  .gb-entry{
    padding:9px 0;
    border-bottom:1px dotted var(--bevel-lo);
    font-size:13px;
  }
  .gb-entry:last-child{ border-bottom:none; }
  .gb-entry .gb-who{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    color:var(--violet);
  }
  .gb-entry .gb-date{ color:var(--ink-soft); font-size:11px; margin-left:8px; }
  .gb-entry .gb-text{ margin-top:2px; color:var(--ink); }
  .gb-form input, .gb-form textarea{
    display:block;
    width:100%;
    max-width:460px;
    margin:0 auto 8px;
    border:2px inset var(--bevel-hi);
    background:#FFFFFF;
    color:var(--ink);
    font-family:Verdana, Geneva, sans-serif;
    font-size:13px;
    padding:8px 10px;
  }
  .gb-form textarea{ height:64px; resize:vertical; }
  .gb-note{
    display:block;
    margin-top:8px;
    font-family:'Courier New', Courier, monospace;
    font-size:11px;
    color:var(--good, #2FA84F);
  }
  .dancing-baby figcaption{
    margin-top:6px;
    font-family:'Courier New', Courier, monospace;
    font-size:9.5px;
    letter-spacing:0.22em;
    color:#8F85B8;
  }

  /* footer */
  .footer{
    margin-top:30px;
    text-align:center;
    color:#CFC6E8;
    font-size:12px;
  }
  .badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin-bottom:18px;
  }
  .badges svg{
    width:132px; height:46.5px;
    image-rendering:pixelated;
    border:1px solid rgba(255,255,255,0.25);
  }
  .counter{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Courier New', Courier, monospace;
    font-size:12.5px;
    color:#CFC6E8;
    margin-bottom:14px;
  }
  .counter .digits{ display:inline-flex; gap:2px; }
  .counter .digits i{
    font-style:normal;
    display:inline-block;
    width:16px;
    background:#000;
    color:#3CFF6E;
    border:1px solid #444;
    text-align:center;
    font-weight:bold;
    padding:2px 0;
  }
  .webring{
    margin:14px auto 16px;
    display:inline-block;
    border:2px outset var(--bevel-hi);
    background:var(--win);
    color:var(--ink);
    padding:10px 16px;
    font-size:12px;
  }
  .webring b{ display:block; margin-bottom:6px; font-size:12.5px; }
  .webring a{ font-weight:bold; margin:0 6px; }
  .f-legal{ margin-top:10px; line-height:2; }
  .f-legal a{ color:#CFC6E8; }

  /* enter site */
  .splash{
    position:fixed; inset:0;
    z-index:800;
    background-color:var(--night);
    background-image:
      radial-gradient(1px 1px at 12px 18px, #fff, transparent),
      radial-gradient(1px 1px at 68px 44px, rgba(255,255,255,0.8), transparent),
      radial-gradient(1.5px 1.5px at 120px 90px, var(--cyan), transparent),
      radial-gradient(1px 1px at 160px 24px, rgba(255,255,255,0.65), transparent),
      radial-gradient(1px 1px at 40px 120px, rgba(255,60,172,0.8), transparent),
      radial-gradient(1px 1px at 190px 150px, rgba(255,255,255,0.7), transparent),
      radial-gradient(1.5px 1.5px at 90px 170px, rgba(255,255,255,0.9), transparent);
    background-size:220px 190px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    overflow:hidden;
    cursor:pointer;
    transition:opacity 0.9s ease, visibility 0.9s ease;
  }
  .splash.hidden{ opacity:0; visibility:hidden; }
  /* rainbow divider */
  .sp-divider{
    width:min(560px, 82vw);
    height:6px;
    background:linear-gradient(90deg, #FF3CAC, #FFD34D, #3CFF6E, #00E5FF, #7A2BD9, #FF3CAC);
    background-size:200% 100%;
    animation:rainbowSlide 3s linear infinite;
  }
  @keyframes rainbowSlide{ to{ background-position:200% 0; } }
  .sp-title{
    margin-top:34px;
    font-family:'Times New Roman', Times, serif;
    font-style:italic;
    font-weight:bold;
    font-size:clamp(42px, 9vw, 78px);
    line-height:1.04;
    background:linear-gradient(180deg, #FFFFFF 0%, #D8E8FF 38%, #8FB8E8 48%, #FFFFFF 55%, #B29CE8 78%, #FFFFFF 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(2px 3px 0 rgba(30,10,60,0.85)) drop-shadow(0 0 18px rgba(0,229,255,0.35));
    padding-bottom:0.16em; margin-bottom:-0.16em; /* paint the italic y descender (see .banner h1) */
  }
  .sp-sub{
    margin-top:14px;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:13px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 0 12px rgba(0,229,255,0.5);
  }
  .sp-enter-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(18px, 5vw, 42px);
    margin-top:46px;
  }
  .sp-star{
    width:clamp(34px, 6vw, 50px);
    height:auto;
    animation:starTwirl 2.8s linear infinite;
    filter:drop-shadow(0 0 8px rgba(255,211,77,0.7));
  }
  .sp-star.rev{ animation-direction:reverse; }
  @keyframes starTwirl{ to{ transform:rotate(360deg); } }
  .sp-enter{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:clamp(22px, 4.6vw, 34px);
    letter-spacing:0.18em;
    color:#FFFFFF;
    text-shadow:0 0 12px rgba(0,229,255,0.9), 0 0 30px rgba(0,229,255,0.5);
    animation:enterBlink 1.1s infinite;
    transition:transform 0.15s ease;
  }
  /* hard on/off via opacity so unhover restarts from the visible phase */
  @keyframes enterBlink{ 0%, 54%{ opacity:1; } 55%, 100%{ opacity:0; } }
  .splash:hover .sp-enter{ transform:scale(1.06); animation:none; opacity:1; }
  .sp-divider.btm{ margin-top:46px; }
  /* award sticker, offset down-right from center so it hangs off the info
     instead of drifting to the corner on big screens */
  .sp-award{
    position:absolute;
    left:calc(50% + clamp(100px, 26vw, 290px));
    top:calc(50% + clamp(100px, 16vh, 180px));
    width:clamp(84px, 11vw, 120px);
    animation:awardWobble 4.6s ease-in-out infinite;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,0.55));
  }
  @keyframes awardWobble{
    0%,100%{ transform:rotate(-8deg); }
    50%{ transform:rotate(6deg); }
  }
  /* nyan cat, JS moves it and draws the trail */
  .sp-cat{
    position:absolute;
    top:0; left:0;
    width:66px;
    height:auto;
    image-rendering:pixelated;
    transform:translate(-120px, -120px);
    will-change:transform;
  }
  #trailCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
  }
  .splash-hint{
    margin-top:26px;
    font-family:'Courier New', Courier, monospace;
    font-size:11px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:#7E74A8;
    text-align:center;
  }
  .splash-hint b{ color:var(--gold); }

  /* winamp deck, shown only when music plays */
  .winamp{
    position:fixed;
    bottom:18px; right:18px;
    z-index:700;
    width:236px;
    background:linear-gradient(180deg, #241F33 0%, #14101F 100%);
    border:2px outset var(--bevel-hi);
    box-shadow:4px 4px 0 rgba(0,0,0,0.5);
    padding:0 0 8px;
    user-select:none;
  }
  .wa-top{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--title-grad);
    padding:4px 8px;
    border-bottom:2px solid var(--bevel-lo);
    cursor:move;
  }
  @media (max-width:700px){ .wa-top{ cursor:default; } }
  .wa-led{
    width:7px; height:7px;
    border-radius:50%;
    background:#3CFF6E;
    box-shadow:0 0 6px rgba(60,255,110,0.9);
    animation:waLed 1.2s ease-in-out infinite;
    flex-shrink:0;
  }
  .winamp.paused .wa-led{ animation:none; background:#8F85B8; box-shadow:none; }
  @keyframes waLed{ 50%{ opacity:0.4; } }
  .wa-name{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:10.5px;
    color:#fff;
    text-shadow:1px 1px 0 rgba(30,10,60,0.8);
    flex:1;
    padding:0 2px;
  }
  .wa-name i{ font-style:normal; }
  .wa-eq{ display:flex; align-items:flex-end; gap:2px; height:11px; }
  .wa-eq i{
    display:block;
    width:3px; height:100%;
    background:#3CFF6E;
    transform-origin:bottom;
    animation:waBar 0.8s ease-in-out infinite;
  }
  .wa-eq i:nth-child(2){ animation-delay:0.15s; animation-duration:0.65s; }
  .wa-eq i:nth-child(3){ animation-delay:0.3s; animation-duration:0.9s; }
  .wa-eq i:nth-child(4){ animation-delay:0.1s; animation-duration:0.7s; }
  .wa-eq i:nth-child(5){ animation-delay:0.22s; animation-duration:0.85s; }
  @keyframes waBar{ 0%,100%{ transform:scaleY(0.25); } 50%{ transform:scaleY(1); } }
  .winamp.paused .wa-eq i{ animation-play-state:paused; transform:scaleY(0.2); background:#8F85B8; }
  .wa-lcd{
    margin:8px 8px 6px;
    background:#020108;
    border:2px inset var(--bevel-hi);
    padding:5px 8px;
    overflow:hidden;
    white-space:nowrap;
  }
  .wa-lcd span{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:11.5px;
    color:var(--cyan);
    text-shadow:0 0 6px rgba(0,229,255,0.6);
  }
  .wa-ctrl{
    display:flex;
    justify-content:center;
    gap:6px;
    padding:0 8px;
  }
  .wa-ctrl button{
    flex:1;
    font-size:13px;
    line-height:1;
    color:var(--ink);
    background:var(--win);
    border:2px outset var(--bevel-hi);
    padding:5px 0;
    cursor:pointer;
  }
  .wa-ctrl button:active{ border-style:inset; }
  .wa-ctrl button:hover{ background:#FBF9FF; }
  .wa-shade{
    flex-shrink:0;
    width:18px; height:16px;
    font-size:9px;
    line-height:1;
    color:var(--ink);
    background:var(--win);
    border:2px outset var(--bevel-hi);
    cursor:pointer;
    padding:0;
  }
  .wa-shade:active{ border-style:inset; }
  /* windowshade mode, titlebar only */
  .winamp.shade .wa-lcd, .winamp.shade .wa-ctrl{ display:none; }
  .winamp.shade{ padding-bottom:0; width:170px; }
  /* mobile: slim bottom bar */
  @media (max-width:700px){
    .winamp{
      left:8px; right:8px; bottom:8px;
      width:auto;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:6px;
      padding:5px 7px;
    }
    .wa-top{
      background:transparent;
      border-bottom:none;
      padding:0;
      gap:6px;
    }
    .wa-name{ display:none; }
    .wa-lcd{ margin:0; padding:4px 8px; }
    .wa-ctrl{ padding:0; gap:4px; }
    .wa-ctrl button{ flex:0 0 auto; padding:4px 11px; }
    .winamp.shade{
      left:auto; right:8px;
      width:auto;
      grid-template-columns:auto;
      padding:5px 7px;
    }
  }

  /* sparkle trail canvas */
  #sparkleCanvas{
    position:fixed; inset:0;
    width:100%; height:100%;
    z-index:600;
    pointer-events:none;
    display:none;
  }

  /* site cat, clickable */
  .page-cat{
    position:fixed;
    top:0; left:0;
    width:56px;
    height:auto;
    z-index:590;
    pointer-events:auto;
    cursor:pointer;
    image-rendering:pixelated;
    will-change:transform;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  #nyanPageCanvas{
    position:fixed; inset:0;
    width:100%; height:100%;
    z-index:589;
    pointer-events:none;
    image-rendering:pixelated; /* keep the sub-resolution upscale crisp */
  }

  /* screensaver */
  #dkk-saver{
    position:fixed; inset:0; z-index:1050; /* over everything but confetti/toast */
    background:#05030f; cursor:pointer; overflow:hidden;
    animation:ssFade 0.4s ease;
  }
  @keyframes ssFade{ from{ opacity:0; } to{ opacity:1; } }
  #dkk-saver .ss-logo{
    position:absolute; top:0; left:0; will-change:transform;
    font-family:'Times New Roman', Times, serif; font-style:italic; font-weight:bold;
    font-size:clamp(40px, 8vw, 78px); line-height:1; letter-spacing:0.01em;
    padding:8px 20px 14px; white-space:nowrap; user-select:none;
    color:#FF3CAC; text-shadow:0 0 22px currentColor;
    transition:color 0.25s ease;
  }
  #dkk-saver .ss-hint{
    position:absolute; left:0; right:0; bottom:22px; text-align:center; pointer-events:none;
    font-family:'Courier New', Courier, monospace; font-size:12px; letter-spacing:0.24em;
    text-transform:uppercase; color:rgba(255,255,255,0.32);
  }

  /* popup engine */
  .popup{
    position:fixed;
    width:min(320px, 86vw);
    background:var(--win);
    border:2px outset var(--bevel-hi);
    box-shadow:5px 5px 0 rgba(0,0,0,0.45);
    animation:popIn 0.16s cubic-bezier(0.2,0.9,0.3,1.4);
  }
  @keyframes popIn{ from{ transform:scale(0.88); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .popup .titlebar{ cursor:move; }
  .popup-body{
    padding:16px 16px 14px;
    font-size:13px;
    line-height:1.55;
    color:var(--ink);
  }
  .popup-body b{ color:var(--ink); }
  .popup-btns{
    display:flex;
    justify-content:center;
    gap:10px;
    padding:0 14px 14px;
    flex-wrap:wrap;
  }
  .popup-btns button{
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:12px;
    color:var(--ink);
    background:var(--win);
    border:2px outset var(--bevel-hi);
    padding:6px 18px;
    cursor:pointer;
    position:relative;
  }
  .popup-btns button:active{ border-style:inset; }
  .popup-btns button:hover{ background:#FBF9FF; }

  /* new! blinkers */
  .blink{
    display:inline-block;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:10px;
    letter-spacing:0.08em;
    color:#fff;
    background:var(--magenta);
    padding:1px 6px;
    margin-left:6px;
    vertical-align:middle;
    animation:blinker 1.1s steps(2, start) infinite;
  }
  @keyframes blinker{ to{ visibility:hidden; } }

  /* kennedy toolbar */
  .ktb{
    position:fixed;
    top:0; left:0; right:0;
    z-index:720;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    background:var(--win-2);
    border:2px outset var(--bevel-hi);
    border-top:none; border-left:none; border-right:none;
    box-shadow:0 2px 0 rgba(0,0,0,0.35);
    padding:5px 8px;
  }
  /* push content below the docked toolbar */
  body.has-ktb{ padding-top:var(--ktb-h, 44px); }
  /* anchor jumps clear the docked toolbar */
  body.has-ktb .window, body.has-ktb .banner{ scroll-margin-top:44px; }
  /* on desktop, hand the scrollbar to the body so it starts below the full-width
     toolbar instead of running up alongside it. mobile keeps document scroll
     (overlay scrollbars, and 100vh is unreliable there). */
  @media (min-width:761px){
    html.ktb-lock{ height:100%; overflow:hidden; }
    html.ktb-lock body.has-ktb{
      margin-top:var(--ktb-h, 44px);
      height:calc(100vh - var(--ktb-h, 44px));
      padding-top:0;
      overflow-y:auto;
      overflow-x:hidden;
    }
  }
  .ktb-logo{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:10.5px;
    letter-spacing:0.14em;
    color:var(--violet);
    padding:0 4px;
    white-space:nowrap;
  }
  .ktb button{
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:11px;
    color:var(--ink);
    background:var(--win);
    border:2px outset var(--bevel-hi);
    padding:3px 10px;
    cursor:pointer;
    white-space:nowrap;
  }
  .ktb button:active{ border-style:inset; }
  .ktb button:hover{ background:#FBF9FF; }
  .ktb button:disabled{ opacity:0.5; cursor:default; color:var(--ink-soft); }
  .ktb button:disabled:hover{ background:var(--win); }
  .ktb-search{ display:flex; gap:4px; align-items:center; margin-left:auto; }
  .ktb-search input{
    border:2px inset var(--bevel-hi);
    background:#fff;
    color:var(--ink);
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    padding:3px 6px;
    width:130px;
  }
  .ktb .found{ animation:ktbFound 0.5s steps(2) 3; }
  @keyframes ktbFound{ 50%{ background:var(--gold); } }
  /* certificate link, right-aligned left of search */
  .ktb [data-k="cert"]{ background:#FFF3C9; margin-left:auto; }
  .ktb [data-k="cert"]:hover{ background:#FFF9E2; }
  .ktb [data-k="cert"] ~ .ktb-search{ margin-left:0; }
  @media (max-width:640px){ .ktb-search{ margin-left:0; } }

  /* dkk mega-store */
  .store-popup{ width:min(430px, 94vw); }
  .store-popup input{
    display:block;
    width:100%;
    margin-top:8px;
    border:2px inset var(--bevel-hi);
    background:#fff;
    color:var(--ink);
    font-family:Verdana, Geneva, sans-serif;
    font-size:13px;
    padding:6px 8px;
  }
  .store-lines{ font-family:'Courier New', Courier, monospace; font-size:12.5px; line-height:1.8; }
  .store-hd{ text-align:center; padding:2px 0 4px; }
  .store-logo{
    font-family:'Times New Roman', Times, serif;
    font-style:italic;
    font-weight:bold;
    font-size:25px;
    background:var(--title-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(1px 1px 0 rgba(30,10,60,0.35));
  }
  .store-tag{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:9px;
    letter-spacing:0.14em;
    color:var(--ink-soft);
  }
  .store-steps{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:10px;
    color:var(--bevel-lo);
    border:2px inset var(--bevel-hi);
    background:#FBF9FF;
    padding:4px 6px;
    margin:8px 0 12px;
  }
  .store-steps .cur{ color:var(--magenta); }
  .store-steps .done{ color:var(--violet); text-decoration:line-through; }
  .store-steps b{ color:var(--bevel-lo); font-weight:normal; }
  .store-prod{ display:flex; gap:14px; align-items:flex-start; }
  .store-img{ width:80px; height:auto; flex-shrink:0; }
  .store-name{ font-size:14px; }
  .store-stars{ color:#E8A800; font-size:12px; }
  .store-stars span{ color:var(--ink-soft); font-size:10.5px; }
  .store-price{ margin:4px 0 2px; }
  .store-price s{ color:var(--ink-soft); }
  .store-price b{ color:var(--magenta); font-size:19px; }
  .store-soldout{ color:#E03C31; font-size:16px; letter-spacing:0.06em; }
  /* sold out: product looks disabled */
  .store-prod.soldout{ opacity:0.6; }
  .store-prod.soldout .store-name{ text-decoration:line-through; color:var(--ink-soft); }
  .store-prod.soldout .store-img{ filter:grayscale(0.9); opacity:0.7; }
  .store-prod.soldout .store-stars{ filter:grayscale(1); opacity:0.7; }
  .store-meta{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:10.5px;
    color:var(--ink-soft);
    margin-top:2px;
  }
  .store-qty{
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    border:2px inset var(--bevel-hi);
    background:#fff;
    color:var(--ink);
  }
  .store-desc{ font-size:12px; margin-top:8px; }
  .store-payhd{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:11px;
    letter-spacing:0.08em;
    margin-bottom:6px;
  }
  .store-paycards{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .store-trust{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    align-items:center;
    justify-content:center;
    margin-top:12px;
    padding-top:10px;
    border-top:1px dotted var(--bevel-lo);
  }
  .cc, .bbb{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:58px;
    height:32px;
    padding:0;
    border:1px solid rgba(0,0,0,0.35);
    border-radius:3px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:6.5px;
    font-weight:bold;
    text-align:center;
    line-height:1.25;
    user-select:none;
    flex-shrink:0;
  }
  .cc-vista{
    background:linear-gradient(180deg, #1A1F71 0 66%, #F7B600 66%);
    color:#fff;
    font-style:italic;
    font-size:9.5px;
    justify-content:flex-start;
    padding-top:5px;
  }
  .cc-mc{ background:#F6F1E7; color:var(--ink); position:relative; justify-content:flex-end; padding-bottom:2px; }
  .cc-mc::before, .cc-mc::after{ content:""; position:absolute; top:3px; width:13px; height:13px; border-radius:50%; }
  .cc-mc::before{ left:14px; background:#EB001B; }
  .cc-mc::after{ right:14px; background:#F79E1B; opacity:0.9; }
  .cc-amex{ background:#2E77BC; color:#fff; }
  .cc-disc{ background:#F6F1E7; color:var(--ink); position:relative; overflow:hidden; }
  .cc-disc::after{ content:""; position:absolute; right:-4px; bottom:-4px; width:14px; height:14px; border-radius:50%; background:#F68121; }
  .bbb{ background:#00548B; color:#fff; }
  .bbb b{ font-size:11px; letter-spacing:0.08em; }
  .store-lock{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:9px;
    color:var(--ink-soft);
  }
  button.cc{ cursor:pointer; }
  button.cc:active{ transform:translateY(1px); }
  .store-fine{
    margin-top:8px;
    font-size:8.5px;
    color:var(--ink-soft);
    text-align:center;
    line-height:1.6;
  }
  #certOverlay{
    position:fixed; inset:0;
    z-index:860;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(4,2,16,0.72);
    padding:16px;
  }
  #certOverlay.on{ display:flex; }
  .cert-win{
    background:var(--win);
    border:2px outset var(--bevel-hi);
    box-shadow:6px 6px 0 rgba(0,0,0,0.5);
    max-width:min(560px, 94vw);
    max-height:92vh;
    overflow:auto;
  }
  .cert-paper{
    margin:10px;
    padding:6px;
    background:#FFFEF8;
    border:4px double var(--ink);
  }
  .cert-inner{
    border:1px solid var(--bevel-lo);
    padding:24px 22px 18px;
    text-align:center;
    font-family:'Times New Roman', Times, serif;
    color:var(--ink);
  }
  .cert-inner .c-head{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:10.5px;
    letter-spacing:0.26em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .cert-inner h3{ font-style:italic; font-size:30px; margin:10px 0 2px; }
  .cert-inner p{ font-size:13px; margin:8px 0; }
  .cert-inner .c-name{
    display:inline-block;
    font-size:22px;
    font-weight:bold;
    border-bottom:1px solid var(--ink);
    padding:0 26px 2px;
    margin:6px 0 2px;
  }
  .cert-inner .c-no{ font-family:'Courier New', Courier, monospace; font-weight:bold; color:var(--violet); }
  .cert-inner .c-sig{ margin-top:14px; font-style:italic; font-size:20px; }
  .cert-inner .c-sub{ font-size:9.5px; letter-spacing:0.12em; color:var(--ink-soft); margin-top:4px; }
  .cert-btns{ display:flex; justify-content:center; gap:10px; padding:2px 10px 12px; }

  /* weather.sys */
  #weatherCanvas{
    position:fixed; inset:0;
    width:100%; height:100%;
    z-index:640;
    pointer-events:none;
  }
  .weather-aurora{
    position:fixed; inset:0;
    z-index:640;
    pointer-events:none;
    opacity:0.75;
    mix-blend-mode:screen;
    background:
      radial-gradient(55% 70% at 15% -12%, rgba(60,255,110,0.6), transparent 72%),
      radial-gradient(48% 85% at 50% -18%, rgba(0,229,255,0.55), transparent 76%),
      radial-gradient(55% 75% at 85% -10%, rgba(122,43,217,0.65), transparent 72%),
      radial-gradient(70% 50% at 35% 112%, rgba(255,60,172,0.28), transparent 70%);
    background-size:200% 100%;
    filter:blur(10px);
    transform-origin:top;
    animation:auroraDrift 9s ease-in-out infinite alternate;
  }
  @keyframes auroraDrift{
    from{ background-position:0% 0, 0% 0, 0% 0, 0% 0; transform:translateX(-2%) scaleY(1); }
    to{ background-position:100% 0, 60% 0, 30% 0, 80% 0; transform:translateX(2%) scaleY(1.18); }
  }

  /* memory purge */
  .purge-popup{ width:min(360px, 92vw); }
  .purge-anim{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    font-size:22px;
    margin-bottom:10px;
  }
  .purge-fly{ display:inline-block; animation:purgeFly 1.1s ease-in infinite; }
  @keyframes purgeFly{
    0%{ transform:translate(-28px, 0) rotate(0deg); opacity:1; }
    70%{ transform:translate(18px, -12px) rotate(25deg); opacity:1; }
    100%{ transform:translate(30px, 6px) rotate(90deg); opacity:0; }
  }
  .purge-line{ font-size:12.5px; margin-bottom:8px; min-height:1.6em; }
  .purge-bar{
    height:16px;
    border:2px inset var(--bevel-hi);
    background:#fff;
    overflow:hidden;
  }
  .purge-fill{
    height:100%;
    width:0%;
    background:repeating-linear-gradient(90deg, #2B49C5 0 9px, transparent 9px 12px);
    transition:width 0.3s steps(4);
  }
  .purge-sub{
    margin-top:7px;
    font-family:'Courier New', Courier, monospace;
    font-size:11px;
    color:var(--ink-soft);
  }

  /* work.exe */
  .work-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:18px;
    margin-top:4px;
  }
  .work-card{
    display:flex;
    flex-direction:column;
    border:2px outset var(--bevel-hi);
    background:#FBF9FF;
    box-shadow:3px 3px 0 rgba(0,0,0,0.3);
  }
  /* screenshot frame, fixed aspect so the grid aligns */
  .wc-shot{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    margin:0; padding:0;
    border:none;
    border-bottom:2px solid var(--bevel-lo);
    background:#08031C;
    overflow:hidden;
  }
  button.wc-shot{ cursor:pointer; }
  a.wc-shot{ cursor:pointer; text-decoration:none; }
  .wc-shot img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  /* corner glyphs over a photo */
  .wc-zoom, .wc-count{
    position:absolute;
    background:rgba(11,4,40,0.82);
    color:#fff;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:11px;
    padding:2px 7px;
    border:1px solid rgba(255,255,255,0.35);
    opacity:0;
    transition:opacity 0.15s ease;
  }
  .wc-zoom{ top:7px; right:7px; }
  .wc-count{ bottom:7px; right:7px; opacity:1; }
  /* non-photo tiles */
  .wc-redacted, .wc-play, .wc-none{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    letter-spacing:0.1em;
  }
  .wc-redacted{
    background:repeating-linear-gradient(45deg, #14101F 0 13px, #1B1530 13px 26px);
    color:var(--ink-soft);
    font-size:11px;
  }
  .wc-redacted b{ color:#E03C31; font-size:16px; letter-spacing:0.16em; }
  .wc-play{
    background:linear-gradient(180deg, #241F33 0%, #14101F 100%);
    color:var(--cyan);
    font-size:13px;
  }
  .wc-play .pl-arrow{ font-size:34px; color:var(--gold); line-height:1; }
  .wc-none{
    background:repeating-linear-gradient(90deg, #E4DFEF 0 12px, #EDEAF5 12px 24px);
    color:var(--ink-soft);
    font-size:12px;
  }
  .wc-none .pl-arrow{ font-size:26px; line-height:1; }
  .wc-body{ padding:13px 15px 15px; display:flex; flex-direction:column; }
  .wc-title{
    font-family:'Times New Roman', Times, serif;
    font-style:italic;
    font-size:20px;
    line-height:1.15;
    color:var(--ink);
  }
  .wc-title a{ text-decoration:none; color:var(--ink); }
  .wc-title a:hover{ color:var(--magenta); }
  .wc-meta{
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:11px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--violet);
    margin:5px 0 8px;
  }
  .wc-notes{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
  .wc-link{
    display:inline-block;
    margin-top:9px;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:12px;
    color:var(--violet);
    text-decoration:none;
  }
  .wc-link:hover{ color:var(--magenta); }

  #shotOverlay{
    position:fixed; inset:0;
    z-index:870;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(4,2,16,0.82);
    padding:16px;
  }
  #shotOverlay.on{ display:flex; }
  .shot-win{
    background:var(--win);
    border:2px outset var(--bevel-hi);
    box-shadow:6px 6px 0 rgba(0,0,0,0.5);
    max-width:min(900px, 96vw);
    max-height:92vh;
    display:flex;
    flex-direction:column;
  }
  .shot-win .win-inner{ padding:8px; overflow:auto; }
  .shot-stage{ position:relative; display:flex; align-items:center; justify-content:center; }
  .shot-win img{
    display:block;
    max-width:100%;
    max-height:74vh;
    width:auto; height:auto;
    margin:0 auto;
    border:2px inset var(--bevel-hi);
    image-rendering:auto;
  }
  .shot-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px; height:54px;
    background:var(--win);
    border:2px outset var(--bevel-hi);
    color:var(--ink);
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    display:none;
  }
  .shot-nav:active{ border-style:inset; }
  .shot-nav:hover{ background:#FBF9FF; color:var(--magenta); }
  .shot-nav.prev{ left:6px; }
  .shot-nav.next{ right:6px; }
  .shot-win.multi .shot-nav{ display:block; }
  .shot-cap{
    font-family:'Courier New', Courier, monospace;
    font-size:12px;
    color:var(--ink-soft);
    text-align:center;
    padding:8px 6px 4px;
  }

  /* retro scrollbar */
  ::-webkit-scrollbar{ width:16px; height:16px; }
  ::-webkit-scrollbar-track{ background:var(--win-2); border:1px solid var(--bevel-lo); }
  ::-webkit-scrollbar-thumb{
    background:var(--win);
    border:2px outset var(--bevel-hi);
  }
  ::-webkit-scrollbar-thumb:active{ border-style:inset; }

  /* titlebar buttons */
  .titlebar .t-btns i{ cursor:pointer; }
  .window.min .win-body{ display:none; }
  .window.shake{ animation:winShake 0.3s ease; }
  @keyframes winShake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-5px); }
    75%{ transform:translateX(5px); }
  }

  /* collapses a section into a small draggable live preview.
     the whole window is scaled by one transform (JS sets scale + width)
     so it stays a uniform miniature */
  .window.mini{
    position:fixed;
    margin:0 !important;
    z-index:715;
    overflow:hidden;              /* clip scaled body to tile */
    box-shadow:5px 5px 0 rgba(0,0,0,0.55);
  }
  .window.mini .titlebar{ cursor:grab; }
  .window.mini .titlebar:active{ cursor:grabbing; }
  .window.mini .win-body{ transform-origin:top left; pointer-events:none; }
  .window.mini.min .win-body{ display:none; }
  /* fade at bottom when the body is taller than the tile */
  .window.mini.clipped::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:46px;
    background:linear-gradient(180deg, transparent, var(--win));
    pointer-events:none;
  }

  /* status bar, shows where links go */
  #statusBar{
    position:fixed;
    left:0; bottom:0;
    z-index:650;
    display:none;
    max-width:72vw;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    background:var(--win-2);
    border:2px outset var(--bevel-hi);
    border-left:none; border-bottom:none;
    color:var(--ink);
    font-family:'Courier New', Courier, monospace;
    font-size:12px;
    padding:4px 12px;
  }
  @media (hover:none){ #statusBar{ display:none !important; } }

  /* defend.exe */
  #gameOverlay{
    position:fixed; inset:0;
    z-index:850;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(4,2,16,0.86);
    padding:14px;
  }
  #gameOverlay.on{ display:flex; }
  .game-win{
    background:var(--win);
    border:2px outset var(--bevel-hi);
    box-shadow:6px 6px 0 rgba(0,0,0,0.5);
    max-width:96vw;
  }
  .game-win .win-inner{ padding:8px; }
  #gameCanvas{
    display:block;
    background:#08031C;
    border:2px inset var(--bevel-hi);
    width:min(480px, 92vw, calc(72vh * 0.857));
    height:auto;
    aspect-ratio:6/7;
    image-rendering:pixelated;
    touch-action:none;
    cursor:crosshair;
  }
  .game-status{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size:12.5px;
    padding:7px 4px 3px;
    color:var(--ink);
  }
  .game-status .gs-lives{ color:var(--magenta); letter-spacing:2px; }
  .game-hint{
    font-family:'Courier New', Courier, monospace;
    font-size:10.5px;
    color:var(--ink-soft);
    text-align:center;
    padding:2px 4px 4px;
  }

  /* hover pass */
  .navbtn{ position:relative; overflow:hidden; }
  /* glossy sweep */
  .navbtn::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.65) 50%, transparent 60%);
    transform:translateX(-101%);
    pointer-events:none;
  }
  @keyframes navSheen{ to{ transform:translateX(101%); } }
  .banner-carpet{ transition:opacity 0.35s ease; }
  /* inline-block so the hover zone is the name, not the whole row */
  .banner h1, .sp-title{
    display:inline-block;
    transition:filter 0.3s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  }
  /* floor scrolls one grid cell per loop */
  @keyframes gridScroll{ to{ background-position:0 0, 0 26px, 0 0; } }

  @media (hover:hover) and (pointer:fine){
    .navbtn, .gb-btn, .popup-btns button, .wa-ctrl button, .wa-shade,
    .titlebar, .titlebar .t-btns i, .email-big, .extra, .badges svg,
    .myspace-cta img, .dancing-baby img, .window, .webring, .specs, .newsbar{
      transition:transform 0.1s ease, box-shadow 0.14s ease, background 0.1s ease,
                 color 0.1s ease, filter 0.16s ease, border-color 0.14s ease;
    }

    /* bevel buttons rise on hover, press on click */
    .navbtn:hover, .gb-btn:hover{
      transform:translate(-1px,-1px);
      box-shadow:3px 3px 0 rgba(0,0,0,0.35);
    }
    .navbtn:hover{ color:var(--magenta) !important; }
    .navbtn:hover::after{ animation:navSheen 0.5s ease; }
    .navbtn:active, .gb-btn:active{ transform:translate(1px,1px); box-shadow:none; }
    .popup-btns button:hover{ transform:translate(-1px,-1px); box-shadow:2px 2px 0 rgba(0,0,0,0.3); }
    .popup-btns button:active{ transform:translate(1px,1px); box-shadow:none; }

    /* hovered window reads as focused */
    .window:hover{ box-shadow:4px 4px 0 rgba(0,0,0,0.45), 7px 7px 0 rgba(255,60,172,0.22); }
    .window:hover > .titlebar{ filter:saturate(1.35) brightness(1.06); }
    .titlebar .t-btns i:hover{ background:#FBF9FF; color:var(--violet); }
    .titlebar .t-btns i:last-child:hover{ background:var(--magenta); color:#fff; }

    /* carpet brightens on hover */
    .banner:hover .banner-carpet{ opacity:1; }
    .banner:hover h1{ filter:drop-shadow(2px 3px 0 rgba(30,10,60,0.85)) drop-shadow(0 0 28px rgba(0,229,255,0.6)); }
    /* name grows, tilts, neon */
    .banner h1:hover, .sp-title:hover{
      transform:scale(1.07) rotate(-2.5deg);
      filter:drop-shadow(2px 3px 0 rgba(30,10,60,0.85))
             drop-shadow(0 0 24px rgba(0,229,255,0.9))
             drop-shadow(0 0 48px rgba(255,60,172,0.55));
    }

    /* terminal panels glow on hover */
    .newsbar:hover{ box-shadow:inset 0 0 16px rgba(0,229,255,0.22); }
    .specs:hover{ box-shadow:inset 0 0 18px rgba(0,229,255,0.2); }
    .statbox .sb-row{ transition:background 0.1s ease; }
    .statbox .sb-row:hover{ background:rgba(0,229,255,0.09); }
    .statbox .sb-row:hover b{ text-shadow:0 0 9px rgba(0,229,255,0.9); }

    /* resume rows step forward on hover */
    .rez-row{ transition:background 0.12s ease, box-shadow 0.12s ease, padding 0.12s ease; }
    .rez-row:hover{ background:rgba(122,43,217,0.07); box-shadow:inset 3px 0 0 var(--magenta); padding-left:12px; }
    .rez-row:hover .rez-when{ color:var(--magenta); }

    /* extras cards lift on hover */
    .extra:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 rgba(0,0,0,0.4); background:#FFFFFF; }
    .extra:hover b{ color:var(--violet); }

    /* work cards lift, screenshot zooms slightly */
    .work-card{ transition:transform 0.12s ease, box-shadow 0.16s ease; }
    .work-card:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(0,0,0,0.4), 8px 8px 0 rgba(255,60,172,0.2); }
    .wc-shot img{ transition:transform 0.28s ease, filter 0.2s ease; }
    .work-card:hover .wc-shot img{ transform:scale(1.06); filter:brightness(1.08) saturate(1.1); }
    .work-card:hover .wc-zoom{ opacity:1; }
    .wc-play, .wc-none, .wc-redacted{ transition:filter 0.16s ease; }
    .work-card:hover .wc-play{ filter:brightness(1.2); }


    /* email plate lights up on hover */
    .email-big:hover{
      transform:translate(-1px,-1px);
      box-shadow:0 0 0 1px rgba(0,229,255,0.35), 0 0 18px rgba(0,229,255,0.35);
      text-shadow:0 0 10px rgba(255,211,77,0.6);
    }
    .myspace-cta:hover img{ transform:scale(1.06); }
    /* list links invert on hover */
    .linklist a:hover, .webring a:hover, .f-legal a:hover, .table-note a:hover{
      background:var(--magenta); color:#fff !important; text-decoration:none;
    }
    .gb-entry{ transition:background 0.1s ease; }
    .gb-entry:hover{ background:rgba(122,43,217,0.06); }

    /* the deck */
    .wa-ctrl button:hover, .wa-shade:hover{ background:#FBF9FF; color:var(--magenta); }

    /* footer items on hover */
    .badges svg:hover{ transform:scale(1.12) rotate(-2deg); filter:drop-shadow(0 0 9px rgba(0,229,255,0.55)); border-color:rgba(0,229,255,0.8); }
    .counter .digits i{ transition:color 0.15s ease, text-shadow 0.15s ease; }
    .counter:hover .digits i{ color:#7CFF9E; text-shadow:0 0 9px rgba(60,255,110,0.9); }
    .dancing-baby:hover img{ transform:scale(1.18); filter:drop-shadow(0 0 12px rgba(255,60,172,0.55)); }
    .webring:hover{ box-shadow:0 0 0 1px rgba(0,229,255,0.35), 0 0 16px rgba(0,229,255,0.25); }

    /* award sticker on hover */
    .sp-award:hover{ filter:drop-shadow(0 4px 10px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(255,211,77,0.85)); }
  }

  @media print{
    .splash, .winamp, #sparkleCanvas, .blink, #gameOverlay, #statusBar, .page-cat, #nyanPageCanvas, #weatherCanvas, .weather-aurora{ display:none !important; }
    .stars, .crt-overlay, #confettiCanvas, .toast, .navbar, .newsbar, .badges, .counter, .webring, .ktb, .popup, #shotOverlay, #ytModal{ display:none !important; }
    body:not(.cert-mode) #certOverlay{ display:none !important; }
    /* certificate print mode */
    body.cert-mode > :not(#certOverlay){ display:none !important; }
    body.cert-mode #certOverlay{ display:block; position:static; background:none; padding:0; }
    body.cert-mode .cert-win{ border:none; box-shadow:none; max-width:none; max-height:none; overflow:visible; }
    body.cert-mode .cert-win .titlebar, body.cert-mode .cert-btns{ display:none; }
    body{ background:#fff; }
    .window{ box-shadow:none; border-color:#999; }
    .banner, .banner.sunset, .banner.gameboy, .banner.defend{ background:#fff !important; padding:20px; }
    .banner h1{ color:#000 !important; -webkit-text-fill-color:#000 !important; background:none; filter:none; text-shadow:none; }
    .banner-carpet, .net-badge, .banner .sun, .banner .grid-floor, .pf-scene, .def-scene, .gb-start{ display:none !important; }
    .banner.arcade::before, .banner.platformer::before, .banner.gameboy::before, .banner.defend::before{ display:none; }
    .banner .tagline{ color:#333 !important; text-shadow:none; }
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
    html{ scroll-behavior:auto; }
  }