:root{
    --phos:      #33ff66;
    --phos-dim:  #1d9944;
    --phos-dark: #0c4020;
    --amber:     #ffb000;
    --bg:        #030a05;
    --white:     #d8ffe4;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ height:100%; background:#000; }
  .requires-js{
    position:fixed; inset:16px; z-index:1000;
    display:grid; place-items:center; padding:24px;
    background:#030a05; color:#33ff66; border:2px solid #33ff66;
    font:20px/1.4 monospace; text-align:center;
  }
  body{
    font-family:'VT323', 'Courier New', monospace;
    color:var(--phos);
    overflow:hidden;
  }
 
  /* ============ CRT SHELL ============ */
  #crt{
    position:fixed; inset:0;
    background:radial-gradient(ellipse at center, var(--bg) 0%, #010402 75%, #000 100%);
    border-radius:2.5% / 4%;
    overflow:hidden;
  }
  /* scanlines */
  #crt::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:50;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0)   0px,
      rgba(0,0,0,0)   2px,
      rgba(0,0,0,.22) 3px,
      rgba(0,0,0,0)   4px
    );
  }
  /* vignette + glass glare */
  #crt::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:51;
    background:
      radial-gradient(ellipse at 30% 12%, rgba(216,255,228,.05), rgba(0,0,0,0) 45%),
      radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  }
  .flicker{ animation:flicker 4s infinite; }
  @keyframes flicker{
    0%,100%{ opacity:1; }
    3%     { opacity:.96; }
    6%     { opacity:1; }
    54%    { opacity:.97; }
    57%    { opacity:1; }
    91%    { opacity:.94; }
    92%    { opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .flicker{ animation:none; }
  }
 
  /* ============ SCREENS ============ */
  .screen{
    position:absolute; inset:0; z-index:10;
    padding:4vh 5vw;
    font-size:clamp(17px, 2.4vmin, 26px);
    line-height:1.25;
    text-shadow:0 0 6px rgba(51,255,102,.65), 0 0 20px rgba(51,255,102,.25);
    display:none;
  }
  .screen.active{ display:block; }
 
  /* ---- dial screen ---- */
  #dial-screen{ text-align:center; }
  #dial-inner{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(90vw, 620px);
  }
  #dial-title{
    font-size:clamp(26px, 5vmin, 52px);
    letter-spacing:.12em;
    margin-bottom:.4em;
  }
  #dial-sub{ color:var(--phos-dim); margin-bottom:2.2em; }
  #dial-btn{
    font-family:inherit; font-size:clamp(19px, 2.8vmin, 30px);
    background:none; color:var(--phos);
    border:2px solid var(--phos);
    padding:.45em 1.6em; cursor:pointer;
    text-shadow:inherit;
    box-shadow:0 0 12px rgba(51,255,102,.35), inset 0 0 12px rgba(51,255,102,.12);
  }
  #dial-btn:hover, #dial-btn:focus-visible{
    background:rgba(51,255,102,.12);
    outline:none;
  }
  #mute-note{ margin-top:1.6em; font-size:.75em; color:var(--phos-dark); }
 
  /* ---- handshake screen ---- */
  #hs-log{ white-space:pre-wrap; }
  #hs-log .amber{ color:var(--amber); text-shadow:0 0 6px rgba(255,176,0,.6); }
  #hs-log .bright{ color:var(--white); }
  #hs-log .dim{ color:var(--phos-dim); }
  #skip-btn{
    position:absolute; right:5vw; bottom:4vh;
    font-family:inherit; font-size:.7em;
    background:none; border:1px solid var(--phos-dark); color:var(--phos-dim);
    padding:.3em .9em; cursor:pointer;
  }
  #skip-btn:hover{ color:var(--phos); border-color:var(--phos-dim); }
 
  /* ---- terminal ---- */
  #terminal{ overflow-y:auto; scrollbar-width:none; }
  #terminal::-webkit-scrollbar{ display:none; }
  #term-out{ white-space:pre-wrap; word-break:break-word; }
  #term-out .amber{ color:var(--amber); text-shadow:0 0 6px rgba(255,176,0,.6); }
  #term-out .bright{ color:var(--white); }
  #term-out .dim{ color:var(--phos-dim); }
#term-out a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
  .prompt-line{ display:flex; }
  .prompt-line .ps1{ white-space:pre; }
  #term-input{
    width:1px;
    font-family:inherit; font-size:inherit; line-height:inherit;
    background:transparent; border:none; outline:none;
    color:var(--phos); text-shadow:inherit;
    caret-color:transparent;
    padding:0;
  }
  #fake-caret{
    display:inline-block; width:.55em; height:1em;
    background:var(--phos);
    vertical-align:text-bottom;
    animation:blink 1.06s steps(1) infinite;
    box-shadow:0 0 8px rgba(51,255,102,.8);
    position:relative; left:0;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  @media (prefers-reduced-motion: reduce){
    #fake-caret{ animation:none; }
    .do-flash{ animation:none; }
  }
 
  /* degauss flash when terminal boots */
  #flash{
    position:absolute; inset:0; z-index:60; pointer-events:none;
    background:var(--white); opacity:0;
  }
  .do-flash{ animation:degauss .35s ease-out; }
  @keyframes degauss{
    0%{ opacity:.9; } 100%{ opacity:0; }
  }
 
  /* quiet escape hatch on the dial screen */
  #pro-link{
    margin-top:2.4em; font-size:.72em;
  }
  #pro-link a{
    color:var(--phos-dim); text-decoration:underline;
    text-underline-offset:3px; cursor:pointer;
  }
  #pro-link a:hover, #pro-link a:focus-visible{ color:var(--phos); outline:none; }
 
  /* ============ MODERN 2026 SITE ============ */
  #modern{
    position:fixed; inset:0; z-index:100;
    display:none;
    overflow-y:auto;
    background:#F6F5F1;
    color:#16211B;
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  #modern.active{ display:block; }
  #modern ::selection{ background:#1E5B3C; color:#F6F5F1; }
  .pro-wrap{ max-width:1020px; margin:0 auto; padding:0 clamp(20px, 5vw, 56px); }
 
  .pro-mono{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem; letter-spacing:.04em;
    color:#1E5B3C;
  }
 
  /* header */
  .pro-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 0 24px; border-bottom:1px solid #D9D6CC;
  }
  .pro-header .wordmark{ color:#16211B; font-weight:500; }
  .pro-ident{ display:flex; align-items:baseline; gap:12px; }
  #link-status{
    font-family:'IBM Plex Mono', monospace; font-size:.62rem;
    color:#778078; letter-spacing:.03em;
  }
  .pro-nav{ display:flex; gap:26px; align-items:center; }
  .pro-nav a{
    font-family:'IBM Plex Mono', monospace; font-size:.78rem;
    color:#4A544D; text-decoration:none;
  }
  .pro-nav a:hover, .pro-nav a:focus-visible{ color:#1E5B3C; }
  #tty-btn{
    font-family:'IBM Plex Mono', monospace; font-size:.72rem;
    background:#16211B; color:#5dff8f;
    border:none; border-radius:3px;
    padding:.45em .8em; cursor:pointer;
  }
  #tty-btn:hover{ background:#0c1510; }
 
  /* hero */
  .pro-hero{ padding:clamp(64px, 12vh, 130px) 0 clamp(48px, 8vh, 90px); }
  .pro-hero h1{
    font-family:'Newsreader', serif; font-weight:400;
    font-size:clamp(2.6rem, 7vw, 4.8rem);
    line-height:1.06; letter-spacing:-0.015em;
    max-width:14ch;
    margin:.5em 0 .45em;
  }
  .pro-hero h1 em{ font-style:italic; color:#1E5B3C; }
  .pro-hero p{ max-width:52ch; color:#3A443D; font-size:1.06rem; }
 
  /* sections */
  .pro-section{ padding:clamp(40px, 7vh, 72px) 0; border-top:1px solid #D9D6CC; }
  .pro-section > .pro-mono{ display:block; margin-bottom:2.2em; }
 
  .work-row{
    display:grid; grid-template-columns:1fr 2fr;
    gap:16px 48px; padding:26px 0;
  }
  .work-row + .work-row{ border-top:1px solid #E7E4DB; }
  .work-row h3{
    font-family:'Newsreader', serif; font-weight:500;
    font-size:1.45rem; line-height:1.2; letter-spacing:-0.01em;
  }
  .work-row .meta{
    font-family:'IBM Plex Mono', monospace; font-size:.72rem;
    color:#6B7168; margin-top:.7em; letter-spacing:.03em;
  }
  .work-row p{ color:#3A443D; }
 
  .pro-about{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
  .pro-about p{ color:#3A443D; }
  .pro-about p + p{ margin-top:1em; }
 
  /* contact */
  .pro-contact a.big-mail{
    font-family:'Newsreader', serif; font-style:italic; font-weight:400;
    font-size:clamp(1.7rem, 5vw, 3.2rem);
    color:#16211B; text-decoration:none;
    border-bottom:2px solid #1E5B3C;
    transition:color .15s ease;
  }
  .pro-contact a.big-mail:hover{ color:#1E5B3C; }
.pro-contact .aside{ margin-top:1.4em; color:#6B7168; font-size:.95rem; }
 
  .pro-footer{
    display:flex; flex-wrap:wrap; gap:12px 24px;
    justify-content:space-between; align-items:center;
    padding:28px 0 44px; border-top:1px solid #D9D6CC;
    color:#6B7168; font-size:.85rem;
  }
  .pro-footer a{ color:#1E5B3C; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
 
  @media (max-width:680px){
    .work-row{ grid-template-columns:1fr; gap:6px; }
    .pro-about{ grid-template-columns:1fr; gap:0; }
    .pro-nav a:not(#tty-btn){ display:none; }
    .pro-ident{ display:block; }
    #link-status{ display:block; margin-top:2px; font-size:.56rem; }
  }