*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --y: #FFF500;
      --b: #1727FF;
      --m: #FF2D78;
      --dk:#111111;
      --g: #c0c0c0;
      --gd:#808080;
      --gl:#dfdfdf;
      --w: #ffffff;
      --mono:'Sometype Mono', monospace;
    }

    html, body {
      font-family: var(--mono);
      background: #000;
      width: 100%; height: 100%;
      overflow: hidden;
      cursor: default;
      user-select: none;
      touch-action: manipulation;
    }

    /* ── BOOT ── */
    #boot {
      position: fixed; inset: 0;
      background: #000;
      display: flex; align-items: center; justify-content: center;
      z-index: 9999;
      transition: opacity .6s ease;
    }
    #boot.out { opacity: 0; pointer-events: none; }

    #boot-lines {
      font-family: var(--mono); font-size: 12px;
      line-height: 1.9; color: var(--y); width: min(420px, 90vw);
    }
    #boot-lines .dim { color: #444; }
    #boot-lines .ok  { color: #4ade80; }
    .bcur {
      display: inline-block; width: 7px; height: 13px;
      background: var(--y); vertical-align: text-bottom;
      animation: blink .75s step-end infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* ── DESKTOP ── */
    #desktop {
      position: relative; width: 100vw; height: calc(100vh - 36px);
      overflow: hidden;
      background:
        linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)),
        url('/images/wallpaper.jpg') center/cover no-repeat;
    }
    /* subtle dot grid on top */
    #desktop::after {
      content:''; position:absolute; inset:0; pointer-events:none;
      background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 22px 22px; z-index: 0;
    }

    /* ── ICONS ── */
    #icons {
      position: absolute; top: 14px; left: 14px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .icon {
      display: flex; flex-direction: column; align-items: center;
      width: 76px; padding: 5px 4px;
      border: 1px solid transparent; cursor: pointer; gap: 5px;
    }
    .icon:hover { background:rgba(255,245,0,.08); border-color:rgba(255,245,0,.35); }
    .icon.sel   { background:rgba(255,245,0,.15); border-color:rgba(255,245,0,.6); }
    .icon-g { font-size:30px; line-height:1; pointer-events:none; }
    .icon-l {
      font-family:var(--mono); font-size:9.5px; color:#fff;
      text-align:center; text-shadow:1px 1px 3px #000;
      word-break:break-all; line-height:1.25; pointer-events:none;
    }

    /* ── WINDOW ── */
    .win {
      position: absolute; min-width: 260px; min-height: 80px;
      background: var(--g);
      border-top:2px solid var(--w); border-left:2px solid var(--w);
      border-right:2px solid #404040; border-bottom:2px solid #404040;
      box-shadow: 2px 2px 0 #000;
      display: none; z-index: 10;
      resize: both; overflow: hidden;
      display: none; flex-direction: column;
    }
    .win.open   { display: flex; }
    .win.active { z-index: 200; }

    .wtbar {
      display:flex; align-items:center; justify-content:space-between;
      padding:3px 4px 3px 6px;
      background: linear-gradient(90deg, var(--b) 0%, #0c16cc 100%);
      cursor: grab; user-select: none;
    }
    .win:not(.active) .wtbar {
      background: linear-gradient(90deg, #5a5a5a 0%, #424242 100%);
    }
    .wtbar:active { cursor: grabbing; }

    .wtitle {
      font-family:var(--mono); font-size:11px; font-weight:700;
      color:#fff; letter-spacing:.03em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width:calc(100% - 44px);
    }
    .wbtns { display:flex; gap:2px; }
    .wbtn {
      width:16px; height:14px; background:var(--g);
      border-top:1px solid var(--w); border-left:1px solid var(--w);
      border-bottom:1px solid var(--gd); border-right:1px solid var(--gd);
      display:flex; align-items:center; justify-content:center;
      font-size:9px; font-weight:700; cursor:pointer; color:#000;
      font-family:var(--mono);
    }
    .wbtn:active { border-top:1px solid var(--gd); border-left:1px solid var(--gd); border-bottom:1px solid var(--w); border-right:1px solid var(--w); }
    .wbtn.x:hover  { background:var(--m); color:#fff; }
    .wbtn.mn:hover { background:var(--y); color:#000; }

    .wbody {
      border-top:2px solid var(--gd); border-left:2px solid var(--gd);
      border-right:2px solid var(--gl); border-bottom:2px solid var(--gl);
      overflow: auto; flex: 1; min-height: 0;
    }
    /* Windows are `resize: both`, so every image inside one has to keep its own
       aspect ratio as the window is dragged. The bodies set width:100% but the
       HTML height="" attribute then pinned the height — widening a window
       stretched the image sideways (the logofolio gif rendered 1034x420 from a
       420x420 source). An actual CSS rule outranks the presentational attribute,
       so this fixes all of them, and anything added later. */
    .wbody img { max-width: 100%; height: auto; }

    /* logofolio.gif resizes PROPORTIONALLY — drag it and it stays square.
       Scoped to this one window by id, so every other window keeps `resize: both`
       and is unaffected.
       How it works: `resize: horizontal` means the grip only ever sets a width,
       so the window's height is never pinned by the browser and stays `auto`.
       The body is then as tall as the square gif inside it, and the whole window
       follows the image's proportions on its own. No JS, no resize observer. */
    #win-logofolio { resize: horizontal; }
    #win-logofolio .wbody { flex: 0 0 auto; }
    #win-logofolio .wbody img { width: 100%; }

    .wbody::-webkit-scrollbar { width:16px; }
    .wbody::-webkit-scrollbar-track { background:var(--g); }
    .wbody::-webkit-scrollbar-thumb {
      background:var(--g);
      border-top:1px solid var(--w); border-left:1px solid var(--w);
      border-bottom:1px solid var(--gd); border-right:1px solid var(--gd);
    }

    /* ── TERMINAL ── */
    .term {
      background:#0a0a0a; color:#e0e0e0;
      font-family:var(--mono); font-size:12px; line-height:1.75;
      padding:14px 16px; min-height:100%;
    }
    .term .p  { color:var(--b); }
    .term .y  { color:var(--y); }
    .term .m  { color:var(--m); }
    .term .g  { color:#4ade80; }
    .term .dim{ color:#555; }

    /* ── ARTICLE / DOC WINDOWS ── */
    .doc {
      background:#0a0a0a; color:#d0d0d0;
      font-family:var(--mono); font-size:12px; line-height:1.7;
      padding:18px 20px; min-height:100%;
    }
    .doc-h1 {
      font-size:18px; font-weight:700; color:var(--y);
      margin-bottom:14px; line-height:1.3; letter-spacing:.02em;
    }
    .doc-h2 {
      font-size:13px; font-weight:700; color:var(--m);
      margin-bottom:6px; letter-spacing:.04em;
    }
    .doc-num {
      font-size:28px; font-weight:700; color:var(--b); opacity:0.5;
      line-height:1; margin-bottom:2px;
    }
    .doc-body { color:#bbb; margin-bottom:12px; font-size:12px; }
    .doc-sep { border-top:1px solid #222; margin:14px 0; }
    .doc-entry {
      padding:10px 12px; margin:8px 0; cursor:pointer;
      border-left:2px solid var(--b); background:rgba(255,255,255,.03);
      transition: background .15s;
    }
    .doc-entry:hover { background:rgba(255,255,255,.07); }
    .doc-tag { font-size:9px; color:var(--m); letter-spacing:.06em; margin-bottom:4px; }
    .doc-title { font-size:12px; font-weight:700; color:var(--y); }
    .doc-desc { font-size:11px; color:#777; margin-top:4px; }
    .doc-link { color:inherit; text-decoration:underline; text-decoration-color:var(--y); text-underline-offset:3px; }
    .doc-link:hover { color:var(--y); }
    .doc-body .doc-link { color:var(--y); }

    /* ── MS PAINT ── */
    .paint-wrap { display:flex; flex-direction:column; height:100%; background:var(--g); }
    .paint-toolbar {
      display:flex; flex-wrap:wrap; align-items:center; gap:3px;
      padding:3px 4px; border-bottom:1px solid var(--gd);
      background:var(--g);
    }
    .paint-btn {
      width:26px; height:26px; display:flex; align-items:center; justify-content:center;
      background:var(--g); cursor:pointer; font-size:14px;
      border-top:1px solid var(--w); border-left:1px solid var(--w);
      border-bottom:1px solid var(--gd); border-right:1px solid var(--gd);
    }
    .paint-btn:hover { background:#d0d0d0; }
    .paint-btn.active {
      border-top:1px solid var(--gd); border-left:1px solid var(--gd);
      border-bottom:1px solid var(--w); border-right:1px solid var(--w);
      background:#b0b0b0;
    }
    .paint-sep { width:1px; height:22px; border-left:1px solid var(--gd); border-right:1px solid var(--w); margin:0 2px; }
    .paint-colors {
      display:flex; flex-wrap:wrap; gap:1px;
      padding:3px 4px; border-bottom:1px solid var(--gd);
      background:var(--g);
    }
    .paint-swatch {
      width:22px; height:22px; cursor:pointer;
      border:1px solid #000; box-sizing:border-box;
    }
    .paint-swatch.active { border:2px solid #fff; outline:1px solid #000; }
    .paint-canvas-wrap {
      flex:1; overflow:hidden; min-height:0;
      border-top:1px solid var(--gd); border-left:1px solid var(--gd);
      border-bottom:1px solid var(--w); border-right:1px solid var(--w);
      margin:2px;
    }
    .paint-canvas-wrap canvas { display:block; cursor:crosshair; }
    .paint-status {
      font-family:var(--mono); font-size:9px; color:#555;
      padding:2px 6px; border-top:1px solid var(--gd);
    }

    /* light doc style for case studies */
    .doc.doc-light { background:#fff; color:#222; }
    .doc.doc-light .doc-h1 { color:var(--b); }
    .doc.doc-light .doc-h2 { color:var(--m); }
    .doc.doc-light .doc-body { color:#333; }
    .doc.doc-light .doc-sep { border-top-color:#ddd; }
    .doc.doc-light .doc-tag { color:var(--m); }
    .doc.doc-light .doc-num { color:var(--b); opacity:0.3; }

    .sbar { margin:3px 0; }
    .sbar-row { display:flex; justify-content:space-between; font-size:10.5px; color:#bbb; margin-bottom:3px; }
    .sbar-row span:last-child { color:var(--y); }
    .sbar-bg   { height:7px; background:rgba(255,255,255,.08); }
    .sbar-fill { height:7px; background:var(--y); }

    .cur { display:inline-block; width:7px; height:13px; background:var(--y); vertical-align:text-bottom; animation:blink .75s step-end infinite; }

    .tl { opacity:0; animation:tlfade .18s ease forwards; }
    @keyframes tlfade { to{opacity:1} }
    .tl:nth-child(1){animation-delay:.05s} .tl:nth-child(2){animation-delay:.10s}
    .tl:nth-child(3){animation-delay:.15s} .tl:nth-child(4){animation-delay:.20s}
    .tl:nth-child(5){animation-delay:.25s} .tl:nth-child(6){animation-delay:.30s}
    .tl:nth-child(7){animation-delay:.35s} .tl:nth-child(8){animation-delay:.40s}
    .tl:nth-child(9){animation-delay:.45s} .tl:nth-child(10){animation-delay:.50s}
    .tl:nth-child(11){animation-delay:.55s}.tl:nth-child(12){animation-delay:.60s}
    .tl:nth-child(13){animation-delay:.65s}.tl:nth-child(14){animation-delay:.70s}
    .tl:nth-child(15){animation-delay:.75s}.tl:nth-child(16){animation-delay:.80s}
    .tl:nth-child(17){animation-delay:.85s}.tl:nth-child(18){animation-delay:.90s}
    .tl:nth-child(19){animation-delay:.95s}.tl:nth-child(20){animation-delay:1.00s}
    .tl:nth-child(21){animation-delay:1.05s}.tl:nth-child(22){animation-delay:1.10s}
    .tl:nth-child(23){animation-delay:1.15s}.tl:nth-child(24){animation-delay:1.20s}

    /* ── FORMS ── */
    .tinput {
      background:transparent; border:none; border-bottom:1px solid var(--y);
      color:var(--y); font-family:var(--mono); font-size:12px;
      outline:none; width:100%; padding:2px 0; caret-color:var(--y);
      user-select:text;
    }
    .tinput::placeholder { color:rgba(255,245,0,.25); }
    .ttarea {
      background:rgba(255,255,255,.03); border:1px solid rgba(255,245,0,.25);
      color:var(--y); font-family:var(--mono); font-size:12px;
      outline:none; width:100%; padding:5px; resize:none;
      caret-color:var(--y); user-select:text; line-height:1.6;
    }
    .ttarea:focus { border-color:var(--y); }
    .tbtn {
      background:var(--b); color:#fff;
      border:none; border-top:1px solid #5060ff; border-left:1px solid #5060ff;
      border-bottom:1px solid #0010bb; border-right:1px solid #0010bb;
      font-family:var(--mono); font-size:11px; font-weight:700;
      padding:5px 16px; cursor:pointer; letter-spacing:.06em; margin-top:10px;
    }
    .tbtn:hover { background:var(--m); }
    .tbtn:active { border-top:1px solid #0010bb; border-left:1px solid #0010bb; border-bottom:1px solid #5060ff; border-right:1px solid #5060ff; }
    .tbtn.alt { background:var(--m); }
    .tbtn.alt:hover { background:var(--y); color:#000; }

    /* ── BLOG ── */
    .be { border-bottom:1px solid rgba(255,245,0,.15); padding:9px 0; cursor:pointer; }
    .be:hover .bt { color:var(--m); }
    .bm  { font-size:10px; color:#555; }
    .btag{ display:inline-block; background:var(--b); color:#fff; font-size:9px; padding:1px 5px; margin-left:6px; }
    .bt  { color:var(--y); font-size:12px; margin-top:3px; }

    /* ── PORTFOLIO BTN ── */
    .pbtn {
      display:block; width:fit-content;
      background:var(--y); color:#000;
      font-family:var(--mono); font-size:12px; font-weight:700;
      padding:7px 18px; text-decoration:none; margin-top:10px;
      border-top:2px solid #ffff80; border-left:2px solid #ffff80;
      border-bottom:2px solid #999900; border-right:2px solid #999900;
    }
    .pbtn:hover { background:var(--m); color:#fff; }
    .pbtn.b {
      background:var(--b); color:#fff;
      border-top:2px solid #6070ff; border-left:2px solid #6070ff;
      border-bottom:2px solid #0010aa; border-right:2px solid #0010aa;
    }
    .pbtn.b:hover { background:var(--m); }

/* ── PHOTO WINDOWS ── */
    .photowin .wbody { padding:0; overflow:hidden; }
    .photowin img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }

    /* ── TASKBAR ── */
    #taskbar {
      position:fixed; bottom:0; left:0; right:0; height:36px;
      background:var(--g); border-top:2px solid var(--w);
      display:flex; align-items:center; padding:2px 4px; gap:4px; z-index:1200;
    }
    #startbtn {
      font-family:var(--mono); font-size:11px; font-weight:700; color:#000;
      background:var(--g);
      border-top:2px solid var(--w); border-left:2px solid var(--w);
      border-bottom:2px solid var(--gd); border-right:2px solid var(--gd);
      padding:2px 10px; cursor:pointer; white-space:nowrap; letter-spacing:.06em;
    }
    #startbtn:active { border-top:2px solid var(--gd); border-left:2px solid var(--gd); border-bottom:2px solid var(--w); border-right:2px solid var(--w); }
    .tsep { width:2px; height:26px; border-left:1px solid var(--gd); border-right:1px solid var(--w); margin:0 2px; }
    #tbar-wins { display:flex; gap:3px; flex:1; overflow:hidden; }
    .tbar-win {
      font-family:var(--mono); font-size:10px; color:#000; background:var(--g);
      border-top:1px solid var(--w); border-left:1px solid var(--w);
      border-bottom:1px solid var(--gd); border-right:1px solid var(--gd);
      padding:2px 8px; cursor:pointer; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis;
    }
    .tbar-win.active { border-top:1px solid var(--gd); border-left:1px solid var(--gd); border-bottom:1px solid var(--w); border-right:1px solid var(--w); background:#b8b8b8; }
    #clock { font-family:var(--mono); font-size:11px; color:#000; border:1px solid var(--gd); padding:2px 10px; white-space:nowrap; }

    /* ════════════════════════════════════════
       MOBILE
    ════════════════════════════════════════ */
    /* Mobile header — hidden on desktop */
    #mob-header {
      display:none;
      position:fixed; top:0; left:0; right:0; height:40px;
      background:var(--g);
      border-bottom:2px solid #404040;
      align-items:center; justify-content:space-between;
      padding:0 8px; z-index:1200;
      font-family:var(--mono); font-size:11px; font-weight:700; color:#000;
    }
    #mob-clock { font-size:11px; }

    /* burger / start button */
    #mob-start {
      display:flex; align-items:center; gap:5px;
      background:var(--g);
      border-top:2px solid var(--w); border-left:2px solid var(--w);
      border-bottom:2px solid var(--gd); border-right:2px solid var(--gd);
      padding:3px 8px; cursor:pointer;
      font-family:var(--mono); font-size:11px; font-weight:700; color:#000;
    }
    #mob-start:active {
      border-top:2px solid var(--gd); border-left:2px solid var(--gd);
      border-bottom:2px solid var(--w); border-right:2px solid var(--w);
    }

    /* Windows 98-style Start menu — desktop: rises above taskbar */
    #start-menu {
      display:none;
      position:fixed; bottom:36px; left:0;
      width:230px;
      background:var(--g);
      border-top:2px solid var(--w); border-left:2px solid var(--w);
      border-right:2px solid #404040; border-bottom:2px solid #404040;
      box-shadow:3px 3px 0 #000;
      z-index:1100;
      flex-direction:row;
    }
    #start-menu.open { display:flex; }

    @media (max-width:800px) {
      /* on mobile: drops from header, capped so it clears the system bar */
      #start-menu {
        bottom:auto; top:40px;
        max-height: calc(100dvh - 90px);
      }
      #sm-items { overflow-y:auto; }
    }

    /* vertical brand stripe */
    #sm-stripe {
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      background:linear-gradient(to top, var(--b), #050f99);
      color:rgba(255,255,255,.18);
      font-family:var(--mono); font-size:20px; font-weight:700;
      letter-spacing:3px;
      padding:12px 5px;
      user-select:none; flex-shrink:0;
    }

    /* menu items list */
    #sm-items {
      flex:1;
      display:flex; flex-direction:column;
      border-left:1px solid var(--gd);
    }
    .sm-sep {
      height:1px;
      border-top:1px solid var(--gd); border-bottom:1px solid var(--w);
      margin:2px 0;
    }
    .sm-item {
      display:flex; align-items:center; gap:8px;
      padding:6px 10px;
      font-family:var(--mono); font-size:11px; color:#000;
      cursor:pointer; white-space:nowrap;
    }
    .sm-item:hover { background:var(--b); color:#fff; }
    .sm-item .sm-icon { font-size:14px; flex-shrink:0; }

    /* Mobile photo strip — hidden on desktop */
    #mob-photos {
      display:none;
      overflow-x:auto; gap:8px; padding:0 0 6px 0;
      scrollbar-width:none;
    }
    #mob-photos::-webkit-scrollbar { display:none; }
    #mob-photos .mphoto {
      flex:0 0 160px; height:210px;
      background:var(--g);
      border-top:2px solid var(--w); border-left:2px solid var(--w);
      border-right:2px solid #404040; border-bottom:2px solid #404040;
      display:flex; flex-direction:column;
    }
    #mob-photos .mphoto-bar {
      background: linear-gradient(90deg, var(--b) 0%, #0c16cc 100%);
      color:#fff; font-family:var(--mono); font-size:10px; font-weight:700;
      padding:3px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      flex-shrink:0;
    }
    #mob-photos .mphoto img { width:100%; flex:1; object-fit:cover; display:block; min-height:0; }

    /* Mobile footer — hidden on desktop */
    #mob-footer {
      display:none;
      flex-direction:column; align-items:center; gap:10px;
      padding:20px 0 32px;
      font-family:var(--mono); font-size:11px; color:#555;
      text-align:center;
    }
    #mob-footer a { color:var(--m); text-decoration:none; margin:0 8px; }
    #mob-footer a:hover { color:var(--y); }

    @media (max-width: 800px) {
      html, body { overflow-y:auto; height:auto; }

      #mob-header { display:flex; }

      /* desktop becomes a scrollable column */
      #desktop {
        position:static; width:100%; height:auto;
        overflow:visible;
        background:
          linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,.70)),
          url('/images/wallpaper.jpg') center/cover fixed;
      }
      #desktop::after { display:none; }

      /* hide desktop icon strip — Start menu replaces it */
      #icons { display:none; }

      /* desktop fills full screen even when empty */
      #desktop {
        min-height:100vh;
        display:flex; flex-direction:column; gap:10px;
        padding:52px 10px 24px;
        justify-content:flex-start;
        align-items:stretch;
      }

      /* windows: static full-width cards, shown/hidden via .open */
      .win {
        position:static !important;
        width:100% !important;
        min-width:unset !important;
        box-shadow:2px 2px 0 rgba(0,0,0,.6);
        z-index:auto !important;
        resize:none !important;
      }
      .win.open { display:flex; }
      .wbody { max-height:none !important; }

      /* photo windows on mobile: fixed height so image shows nicely */
      .photowin .wbody { height:260px !important; overflow:hidden; }

      /* disable drag cursor on mobile */
      .wtbar { cursor:default; }

      /* hide photo strip (photos are now windows via Start menu) */
      #mob-photos { display:none; }

      /* show mobile footer */
      #mob-footer { display:flex; }

      /* hide desktop taskbar */
      #taskbar { display:none; }

      /* hide minimize on mobile — X truly closes */
      .wbtn.mn { display:none; }

      /* forms: bigger touch targets */
      .tinput { font-size:14px; padding:4px 0; }
      .ttarea  { font-size:14px; }
      .tbtn    { font-size:13px; padding:8px 20px; }

      /* term font slightly larger on mobile */
      .term { font-size:13px; padding:12px 14px; }
    }

    /* ── Crawlable-but-hidden content (search engines + AI) ── */
    .sr-only {
      position:absolute; width:1px; height:1px;
      padding:0; margin:-1px; overflow:hidden;
      clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

    /* ══════════════════════════════════════════════════════
       MAIL.EXE — three-pane Win98 mail client
       ══════════════════════════════════════════════════════ */
    .mail-wrap { display:flex; flex-direction:column; height:100%; min-width:0; overflow:hidden; background:var(--g); }

    .mail-toolbar {
      display:flex; flex-wrap:wrap; align-items:center; gap:3px; flex-shrink:0;
      padding:3px 4px; border-bottom:1px solid var(--gd); background:var(--g);
    }
    .mail-tb {
      display:flex; align-items:center; gap:5px;
      padding:4px 9px; background:var(--g); cursor:pointer;
      font-family:var(--mono); font-size:11px; color:#000; white-space:nowrap;
      border-top:1px solid var(--w); border-left:1px solid var(--w);
      border-bottom:1px solid var(--gd); border-right:1px solid var(--gd);
    }
    .mail-tb:hover { background:var(--gl); }
    .mail-tb:active {
      border-top:1px solid var(--gd); border-left:1px solid var(--gd);
      border-bottom:1px solid var(--w); border-right:1px solid var(--w);
    }
    .mail-tb.primary { background:var(--b); color:#fff; font-weight:700; }
    .mail-tb.primary:hover { background:var(--m); }

    .mail-panes { display:flex; flex:1; min-height:0; }

    /* folder tree */
    .mail-folders {
      flex:0 0 128px; background:var(--w); overflow-y:auto; padding:5px 0;
      border-right:1px solid var(--gd);
    }
    .mail-folder {
      display:flex; align-items:center; gap:6px;
      padding:4px 9px; font-family:var(--mono); font-size:11px;
      color:#000; cursor:pointer; white-space:nowrap;
    }
    .mail-folder:hover { background:var(--gl); }
    .mail-folder.active { background:var(--b); color:#fff; }
    .mail-folder .cnt { margin-left:auto; font-weight:700; }

    /* message list */
    .mail-list {
      flex:0 0 210px; background:var(--w); overflow-y:auto;
      border-right:1px solid var(--gd);
    }
    .mail-item {
      padding:6px 9px; border-bottom:1px solid #e6e6e6; cursor:pointer;
      font-family:var(--mono); font-size:11px; color:#000;
    }
    .mail-item:hover { background:var(--gl); }
    .mail-item.active { background:var(--b); color:#fff; }
    .mail-item.active .mail-from, .mail-item.active .mail-date { color:#fff; }
    .mail-item.unread .mail-subj { font-weight:700; }
    .mail-item.unread::before { content:'●'; color:var(--b); margin-right:5px; font-size:9px; }
    .mail-item.active.unread::before { color:#fff; }
    .mail-from { color:#444; font-size:10px; }
    .mail-subj { display:block; margin:2px 0; }
    .mail-date { color:#888; font-size:9px; }
    .mail-empty { padding:14px 10px; font-family:var(--mono); font-size:11px; color:#888; }

    /* reading pane */
    .mail-read { flex:1; min-width:0; background:var(--w); overflow-y:auto; }
    .mail-head {
      padding:10px 16px; border-bottom:1px solid var(--gd); background:var(--gl);
      font-family:var(--mono); font-size:11px; color:#000;
    }
    .mail-head .h-subj { font-size:14px; font-weight:700; margin-bottom:6px; color:var(--b); }
    .mail-head .h-row { color:#555; margin-top:2px; }
    .mail-head .h-row b { color:#000; font-weight:700; }
    .mail-body { padding:18px 22px; }

    /* the letter */
    .letter { font-family:var(--mono); font-size:12.5px; line-height:1.75; color:#1a1a1a; user-select:text; }
    .letter p { margin-bottom:13px; }
    .letter .lead { font-size:14px; }
    .letter .pull {
      border-left:3px solid var(--b); padding:6px 0 6px 14px; margin:16px 0;
      color:var(--b); font-weight:700;
    }
    .letter h3 {
      font-size:11px; letter-spacing:.1em; text-transform:uppercase;
      color:var(--m); margin:22px 0 9px; font-weight:700;
    }
    .letter .sig { margin-top:22px; color:#555; }
    .letter .sig b { color:#000; display:block; font-size:13px; margin-top:3px; }
    /* The reply button repeats at the foot of the letter — by the time someone
       has read to the sign-off, the toolbar is scrolled far out of sight. */
    .letter-reply { margin-top:26px; padding-top:18px; border-top:1px solid #d8d8d8; }
    .letter a { color:var(--b); }

    .mail-status {
      flex-shrink:0; padding:3px 8px; background:var(--g);
      border-top:1px solid var(--w);
      font-family:var(--mono); font-size:10px; color:#555;
    }

    /* ── COMPOSER ── */
    .cmp-wrap { display:flex; flex-direction:column; height:100%; background:var(--g); }
    .cmp-fields { flex-shrink:0; padding:8px 10px; background:var(--gl); border-bottom:1px solid var(--gd); }
    .cmp-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .cmp-row label {
      flex:0 0 54px; font-family:var(--mono); font-size:10px;
      letter-spacing:.08em; text-transform:uppercase; color:#555; font-weight:700;
    }
    .cmp-in {
      flex:1; background:var(--w); border:1px solid var(--gd);
      font-family:var(--mono); font-size:12px; color:#000;
      padding:4px 6px; outline:none; user-select:text; min-width:0;
    }
    .cmp-in:focus { border-color:var(--b); }
    .cmp-in[readonly] { background:#eee; color:#555; }
    .cmp-body {
      flex:1; min-height:0; margin:0; width:100%;
      background:var(--w); border:none; border-bottom:1px solid var(--gd);
      font-family:var(--mono); font-size:12.5px; line-height:1.65; color:#1a1a1a;
      padding:12px 14px; outline:none; resize:none; user-select:text;
    }
    .cmp-foot {
      flex-shrink:0; display:flex; align-items:center; gap:10px;
      padding:7px 10px; background:var(--g);
    }
    .cmp-note { font-family:var(--mono); font-size:10px; color:#666; }
    .cmp-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

    /* sending progress */
    .cmp-progress { flex:1; height:16px; background:var(--w); border:1px solid var(--gd); padding:2px; display:none; }
    .cmp-progress.on { display:block; }
    .cmp-progress i { display:block; height:100%; width:0; background:var(--b); transition:width .25s linear; }

    @media (max-width: 800px) {
      /* these three grow with their content instead of being fixed-height boxes */
      #win-mail, #win-compose { height:auto !important; }
      .mail-wrap, .cmp-wrap { height:auto; }
      .mail-panes { flex-direction:column; }
      .mail-read { max-height:70vh; overflow-y:auto; }
      .mail-folders { flex:0 0 auto; display:flex; overflow-x:auto; padding:0; border-right:none; border-bottom:1px solid var(--gd); }
      .mail-folder { flex:0 0 auto; }
      .mail-list { flex:0 0 auto; max-height:150px; border-right:none; border-bottom:1px solid var(--gd); }
      .mail-read { max-height:none; }
      .mail-body { padding:14px 15px; }
      .cmp-body { min-height:220px; }
    }

    /* unread badge on the inbox icon */
    .icon-g.icon-mail { position:relative; }
    .icon-badge {
      position:absolute; top:-4px; right:-8px;
      background:var(--m); color:#fff;
      font-family:var(--mono); font-size:9px; font-weight:700; line-height:1;
      padding:2px 4px; border:1px solid #fff; border-radius:2px;
    }
    .icon-badge.hide { display:none; }
    .sm-new.hide { display:none; }
    .sm-new {
      margin-left:auto; background:var(--m); color:#fff;
      font-size:9px; font-weight:700; padding:1px 4px;
    }

    /* Reading content must be selectable — people copy the email address,
       a quote, a font name. Only the OS chrome stays unselectable. */
    .doc, .term, .letter, .mail-read, .mail-head, .doc-body, .doc-h1, .doc-h2,
    .wtitle, .bt, .bm { user-select:text; -webkit-user-select:text; }

    @media (max-width: 800px) {
      /* nothing may push the page wider than the phone */
      #desktop { overflow-x:hidden; }
      .win { max-width:100%; overflow-x:hidden; }
      .mail-panes, .mail-read, .mail-body, .mail-list { min-width:0; max-width:100%; }
      .letter { overflow-wrap:anywhere; }
    }