:root{
    --bg:#000; --ink:#fff; --accent:#ffff23; --muted:#9a9a9a;
    --line:#2c2c2c; --win:#0b0b0b;
    --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
    --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;
    overflow:hidden;-webkit-font-smoothing:antialiased}
  a{color:inherit}

  /* ---------- IMAGE LIGHTBOX ---------- */
  .zoom{cursor:zoom-in}
  #lightbox{position:fixed;inset:0;z-index:13000;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;cursor:zoom-out}
  #lightbox.show{display:flex}
  #lightbox img{max-width:94vw;max-height:90vh;object-fit:contain;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.85)}
  #lightbox .lb-close{position:fixed;top:16px;right:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:24px;line-height:1;color:#fff;background:rgba(0,0,0,.5);border:1px solid var(--line);cursor:pointer}
  #lightbox .lb-close:hover{border-color:var(--accent);color:var(--accent)}

  /* ---------- WALLPAPER ---------- */
  #desk{position:fixed;inset:0;overflow:hidden}
  #map-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
  /* let pointer events pass through the flat fill/vignette to the contour lines */
  #map-bg > rect{pointer-events:none}
  #topo .cl{pointer-events:none}
  #scanlines{position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(180deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px);
    mix-blend-mode:overlay;opacity:.5}

  /* ---------- TOP MENU BAR ---------- */
  #menubar{position:fixed;top:0;left:0;right:0;height:64px;z-index:9000;
    display:flex;align-items:center;gap:8px;padding:0 16px 0 8px;
    background:transparent;font-size:14px;letter-spacing:.01em}
  #menubar .blogo{height:50px;width:auto;display:block;border:1px solid var(--line)}
  #menubar .spacer{flex:1}
  #menubar .right{display:flex;gap:16px;align-items:center;color:var(--muted);font-family:var(--mono);font-size:13px}
  #menubar .tm{color:var(--accent);font-family:var(--mono);font-weight:700;letter-spacing:.01em}

  /* folder tabs in the menu bar — same height as the logo */
  #ftabs{display:flex;align-items:center;gap:8px}
  .ftab{display:flex;flex-direction:column;justify-content:center;gap:3px;height:50px;width:120px;cursor:pointer;
    padding:0 13px;border:1px solid var(--line);background:#000;color:#cfcfcf;font-family:var(--mono);font-size:13px;user-select:none}
  .ftab:hover{border-color:var(--accent);color:var(--accent)}
  .ftab.is-open{background:var(--accent);color:#000;border-color:var(--accent)}
  .ftab .trow{display:flex;align-items:center;gap:8px}
  .ftab .ficon{width:20px;height:15px;flex:0 0 auto;display:flex}
  .ftab svg{width:100%;height:100%;overflow:visible}
  .ftab .open{display:none}
  .ftab.is-open .closed{display:none}
  .ftab.is-open .open{display:block}
  .ftab .t1{font-size:13px;color:inherit}
  .ftab .t2{font-size:10.5px;color:var(--muted);letter-spacing:0}
  .ftab:hover .t2{color:var(--accent)}
  .ftab.is-open .t2{color:#000}
  /* organize-windows action — plain mono text like the clock; only appears with 2+ windows open */
  #organize{display:none;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;user-select:none;
    font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.01em;transition:color .15s ease}
  #organize.active{display:inline-flex}
  #organize svg{width:13px;height:13px;flex:0 0 auto}
  #organize:hover{color:var(--accent)}
  #organize.active ~ .tm{border-left:1px solid var(--line);padding-left:16px}   /* 1px divider before the tagline */
  /* hamburger — square nav-button styling, appears when the tab ribbon collapses */
  #hamburger{display:none;align-items:center;justify-content:center;width:50px;height:50px;flex:0 0 auto;
    background:#000;border:1px solid var(--line);color:#cfcfcf;cursor:pointer;padding:0;user-select:none}
  #hamburger svg{width:22px;height:16px}
  #hamburger:hover{border-color:var(--accent);color:var(--accent)}
  body.nav-open #hamburger{background:var(--accent);color:#000;border-color:var(--accent)}
  /* responsive menu bar: drop tagline + clock first, then collapse the ribbon into a hamburger */
  @media(max-width:1280px){ #menubar .tm, #menubar .clk{display:none} }
  @media(max-width:1024px){ #ftabs{display:none} #hamburger{display:flex} }

  /* folder menu — hidden until the hamburger opens it (dropdown panel below the menu bar) */
  #folderlist{display:none}
  body.nav-open #folderlist{display:flex;flex-direction:column;gap:8px;position:fixed;top:64px;left:0;right:0;z-index:8000;
    background:rgba(0,0,0,.97);border-bottom:1px solid var(--line);padding:12px 14px;max-height:calc(100vh - 64px);overflow:auto}
  #folderlist .pl{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);
    padding:15px 16px;background:#000;cursor:pointer;font-family:var(--mono);letter-spacing:.02em;font-size:14px}
  #folderlist .pl .c{color:var(--muted);font-size:11px}
  #folderlist .pl.is-open .c{color:var(--accent)}
  #folderlist .pl .prow{display:flex;align-items:center;gap:12px}
  #folderlist .pl .ficon{width:22px;height:17px;flex:0 0 auto;display:flex;color:#fff}
  #folderlist .pl .ficon svg{width:100%;height:100%;overflow:visible}
  #folderlist .pl .open{display:none}
  #folderlist .pl.is-open .closed{display:none}
  #folderlist .pl.is-open .open{display:block}
  #folderlist .pl.is-open .ficon{color:var(--accent)}

  /* ---------- WINDOWS ---------- */
  .win{position:absolute;min-width:300px;background:rgba(10,10,10,.80);
    backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
    border:1px solid var(--line);
    box-shadow:0 36px 96px rgba(0,0,0,.92),0 12px 30px rgba(0,0,0,.72);
    display:flex;flex-direction:column;z-index:100;
    transition:width .22s ease,height .22s ease,border-color .15s ease,box-shadow .15s ease;
    animation:winIn .24s cubic-bezier(.18,.82,.2,1)}
  .win.closing{animation:winOut .2s ease forwards}
  @keyframes winIn{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
  @keyframes winOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(26px) scale(.965)}}
  /* gripped (while dragging): whole panel + top bar turn yellow */
  .win.dragging{border-color:var(--accent);
    box-shadow:0 44px 110px rgba(0,0,0,.95),0 0 0 3px rgba(255,255,35,.14)}
  .win .titlebar{height:46px;flex:0 0 auto;display:flex;align-items:center;gap:10px;
    padding:0 0 0 16px;background:#000;border-bottom:1px solid var(--line);cursor:grab;user-select:none;
    transition:border-color .15s ease}
  .win.dragging .titlebar{cursor:grabbing}
  .win .ctrls{display:flex;gap:0;height:100%;margin-left:8px;position:relative;z-index:9}
  .ctrl{width:48px;height:100%;border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted);
    display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;cursor:pointer;font-family:var(--mono)}
  .ctrl:hover{color:var(--accent);background:rgba(255,255,35,.2)}
  .win .wtitle{font-family:var(--mono);font-size:13px;letter-spacing:.01em;color:var(--accent)}
  .win .wtitle b{color:#fff;font-weight:400}
  .win .coords{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .ctrl.exp{width:auto;padding:0 14px;gap:7px}
  .ctrl.exp .ex-lbl{font-size:11px;letter-spacing:.02em}
  .ctrl.exp .ex-ico{font-size:21px;line-height:1}
  .win .body{padding:18px;overflow:auto;container-type:inline-size}
  .win .body::-webkit-scrollbar{width:10px}
  .win .body::-webkit-scrollbar-thumb{background:#222;border:2px solid #000}
  /* ---- drag-resize handles ---- */
  .win.resizing{transition:none;user-select:none}
  /* smooth slide+resize while auto-tiling (drag stays instant — it has no left/top transition) */
  .win.tiling{transition:left .24s cubic-bezier(.2,.8,.2,1),top .24s cubic-bezier(.2,.8,.2,1),width .24s cubic-bezier(.2,.8,.2,1),height .24s cubic-bezier(.2,.8,.2,1)}
  .win .rz{position:absolute;z-index:5;touch-action:none}
  .win .rz.n{top:-3px;left:10px;right:10px;height:7px;cursor:ns-resize}
  .win .rz.s{bottom:-3px;left:10px;right:10px;height:7px;cursor:ns-resize}
  .win .rz.e{top:10px;bottom:10px;right:-3px;width:7px;cursor:ew-resize}
  .win .rz.w{top:10px;bottom:10px;left:-3px;width:7px;cursor:ew-resize}
  .win .rz.ne{top:-4px;right:-4px;width:15px;height:15px;cursor:nesw-resize;z-index:6}
  .win .rz.nw{top:-4px;left:-4px;width:15px;height:15px;cursor:nwse-resize;z-index:6}
  .win .rz.se{bottom:-4px;right:-4px;width:16px;height:16px;cursor:nwse-resize;z-index:6}
  .win .rz.sw{bottom:-4px;left:-4px;width:15px;height:15px;cursor:nesw-resize;z-index:6}
  .win .rz.se::after{content:"";position:absolute;right:3px;bottom:3px;width:7px;height:7px;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);opacity:.55}
  .win.dragging .rz,.win.max .rz{display:none}
  /* ---- snap preview ghost ---- */
  #snapghost{position:fixed;z-index:8800;border:2px solid var(--accent);background:rgba(255,255,35,.10);
    box-shadow:0 0 0 9999px rgba(0,0,0,0) inset;pointer-events:none;display:none;
    transition:left .11s ease,top .11s ease,width .11s ease,height .11s ease}
  #snapghost.show{display:block}

  h2.sec{font-size:15px;letter-spacing:.02em;color:var(--ink);
    margin-bottom:13px;font-weight:700;border-bottom:1px dashed var(--line);padding-bottom:9px}
  .lead{font-size:15.5px;line-height:1.55;color:var(--muted);margin-bottom:15px}
  .kv{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-bottom:5px}
  .kv b{color:#fff;font-weight:400}

  .grid{display:grid;gap:13px;align-items:start}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card{display:block;text-decoration:none;border:1px solid var(--line);background:rgba(0,0,0,.5);cursor:pointer;
    transition:border-color .12s,transform .12s}
  .card:hover{border-color:#555;transform:translateY(-2px)}
  .card .thumb{width:100%;height:auto;display:block;background:transparent;filter:grayscale(.2)}
  .card:hover .thumb{filter:grayscale(0)}
  .card .meta{padding:10px 11px}
  .card .ttl{font-size:15px;font-weight:700;line-height:1.25}
  .card .sub{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.35}
  .card .open{font-family:var(--sans);font-size:11px;color:var(--accent);margin-top:8px;letter-spacing:.02em}

  /* experiments image gallery */
  .gallery2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .gallery2 a{display:block;position:relative;overflow:hidden;background:#0d0d0d;border:1px solid var(--line);cursor:pointer;
    transition:border-color .12s,transform .12s}
  .gallery2 img{width:100%;height:auto;display:block;filter:grayscale(.2);transition:filter .25s ease}
  .gallery2 a:hover{border-color:#555;transform:translateY(-2px)}
  .gallery2 a:hover img{filter:grayscale(0)}
  .gallery2 .gcap{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:11px;color:#fff;
    background:linear-gradient(transparent,rgba(0,0,0,.78));opacity:0;transition:opacity .2s}
  .gallery2 a:hover .gcap{opacity:1}
  @media(max-width:760px){.gallery2{grid-template-columns:repeat(2,1fr)}}
  /* card grids + content columns follow the WINDOW width, so narrow windows drop to fewer columns */
  @container (max-width:560px){ .grid.three{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @container (max-width:430px){ .grid.two,.grid.three,.gallery2{grid-template-columns:1fr} }

  .btn{display:inline-block;font-family:var(--sans);font-size:13px;letter-spacing:.01em;text-decoration:none;
    border:1px solid var(--line);color:var(--accent);padding:10px 17px;background:#000;cursor:pointer}
  .btn:hover{background:var(--accent);color:#000;border-color:var(--accent)}
  .btn.ghost{border-color:var(--line);color:#cfcfcf}
  .btn.ghost:hover{border-color:#555;color:var(--accent);background:#000}

  .portrait{width:66px;height:66px;border:1px solid var(--line);object-fit:cover;background:#111;flex:0 0 auto}
  .aboutpic{width:100%;height:auto;display:block;border-left:1px solid #3a3a3a;border-right:1px solid #3a3a3a;padding:0 18px;background:transparent;margin-bottom:56px}   /* image — thin line both sides; gap to content matches gap before image samples */

  /* ---- two-column "about" page layout (Helvetica content) ---- */
  .about2{font-family:var(--sans)}
  .about2 .titleblock{border-left:3px solid var(--accent);padding-left:18px;margin-bottom:24px}   /* thick line — title, left only */
  .about2 .name{font-size:26px;font-weight:700;line-height:1.14;color:#fff;margin:0}
  .about2 .rolebig{font-size:26px;font-weight:700;line-height:1.14;color:var(--accent);margin:0 0 8px}
  .about2 .tagline{font-size:14px;color:var(--muted);margin:0}
  .about2 .sect{margin:0 0 32px;padding-bottom:0;border-bottom:0}
  .about2 .sect:last-child{margin-bottom:0}
  .sec-h{display:flex;align-items:center;margin:0 0 16px;border-left:3px solid var(--accent);padding-left:18px}   /* thick line — title, left only */
  .sec-h .bar{display:none}
  .sec-h .t{font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em}
  .about2 .twocol{display:grid;grid-template-columns:1fr 1fr;margin-top:2px;border-left:1px solid #3a3a3a;border-right:1px solid #3a3a3a}
  .about2 .twocol.onecol{grid-template-columns:1fr}
  .about2 .twocol > *{padding:1px 20px;min-width:0}
  .about2 .twocol > * + *{border-left:1px solid #3a3a3a}   /* single divider between columns (no double line) */
  .about2 .lead2{font-size:15.5px;font-weight:400;line-height:1.5;color:#fff;margin-bottom:14px}
  .about2 p{font-size:14px;line-height:1.62;color:#d2d2d2;margin-bottom:14px}
  .about2 .grp{margin-bottom:16px}
  .about2 .grp .lab{font-size:12px;color:var(--muted);margin-bottom:7px}
  .about2 ul{list-style:none}
  .about2 li{font-size:14px;color:#dcdcdc;line-height:1.75;padding-left:15px;position:relative}
  .about2 li::before{content:"•";position:absolute;left:0;color:var(--muted)}
  .about2 a{color:#dcdcdc;text-decoration:underline;text-underline-offset:2px}
  .about2 a:hover{color:var(--accent)}
  .about2 .footer{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:18px;border-top:1px solid var(--line)}
  .row{display:flex;gap:15px;align-items:flex-start;margin-bottom:15px}
  .chat{font-family:var(--sans);font-size:13px;line-height:1.55;color:#cfcfcf}
  .chat .me{color:var(--accent)}

  /* ---------- PROJECT PANEL ---------- */
  .proj .hero{width:100%;aspect-ratio:16/7.5;object-fit:cover;display:block;border:1px solid var(--line);background:#111}
  .proj .dtitle{font-size:25px;font-weight:700;line-height:1.12;margin:16px 0 3px}
  .proj .dsub{font-size:14px;color:var(--accent);font-family:var(--sans);margin-bottom:16px}

  /* expandable details menu */
  .reveal{border:1px solid var(--line);margin-bottom:24px}
  .reveal .rhead{display:flex;justify-content:space-between;align-items:center;cursor:pointer;
    padding:12px 14px;font-family:var(--sans);font-size:13px;color:var(--accent);background:rgba(255,255,255,.03)}
  .reveal .rhead .chev{transition:transform .25s ease}
  .reveal.open .rhead .chev{transform:rotate(180deg)}
  .reveal .rbody{max-height:0;overflow:hidden;transition:max-height .32s ease}
  .reveal.open .rbody{max-height:760px}
  .reveal .inner{padding:4px 14px 16px}
  .facts{display:flex;flex-wrap:wrap;border:1px solid var(--line);margin:6px 0 14px}
  .facts .f{flex:1 1 30%;min-width:140px;padding:10px 13px;border-right:1px solid var(--line)}
  .facts .f:last-child{border-right:0}
  .facts .lab{font-family:var(--sans);font-size:11px;color:var(--muted);margin-bottom:3px}
  .facts .val{font-size:13.5px;font-weight:700;line-height:1.3}
  .reveal h4{font-family:var(--sans);font-size:12px;color:var(--accent);letter-spacing:.01em;margin:14px 0 6px}
  .reveal p{font-size:14.5px;line-height:1.6;color:#dcdcdc;margin-bottom:10px}

  /* full-width image showcase + comments + vertical lines */
  .shots h3{font-family:var(--sans);font-size:13px;color:var(--accent);letter-spacing:.01em;
    margin-bottom:14px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
  .proj2 .shots-sect{margin-top:56px}                        /* gap before image samples — matches the hero→content gap */
  .shot{margin-bottom:72px}                                  /* space before the next sample */
  .proj2 .shot:last-child{margin-bottom:22px}                /* tighter before the prev/next footer */
  .shot .shot-title{border-left:3px solid var(--accent);padding-left:18px;font-size:14px;font-weight:700;color:#fff;margin:0 0 18px}   /* title — thick line */
  .shot a{display:block;background:transparent;border-left:1px solid #3a3a3a;border-right:1px solid #3a3a3a;padding:0 18px;margin-bottom:18px}   /* image — thin line both sides */
  .shot .shot-video{border-left:1px solid #3a3a3a;border-right:1px solid #3a3a3a;padding:0 18px;margin-bottom:18px}   /* video — same thin-line frame */
  .shot .shot-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
  .shot img{width:100%;display:block}
  .shot .shot-desc{border-left:1px solid #3a3a3a;border-right:1px solid #3a3a3a;padding:2px 18px;margin:0;font-size:14px;color:#d2d2d2;line-height:1.6}   /* paragraph — thin line both sides */
  /* chapter divider between groups of shots — vertical line, title-case, aligned with Overview */
  .shot-sec{position:relative;margin:0 0 40px;padding-top:40px;border-top:1px solid var(--line)}
  .shot-sec:first-child{padding-top:0;border-top:0}
  .shot-sec::before{content:"";position:absolute;left:0;top:40px;bottom:0;width:3px;background:var(--accent)}  /* yellow line spans title + supporting text */
  .shot-sec:first-child::before{top:0}
  .shot-sec-t{padding-left:21px;font-family:var(--sans);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.01em}
  .shot-sec-t .bar{display:none}
  .shot-sec-d{margin:13px 0 0;padding-left:21px;font-size:14px;color:var(--muted);line-height:1.6;max-width:64ch}
  .proj .footer{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}

  /* Role / Company / Field / Scope — 2×2 quadrant under the title (→ 1×4 when expanded) */
  .proj2 .rfs{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid #3a3a3a;border-top:1px solid #3a3a3a;margin:2px 0 0}
  .proj2 .rfs .cell{padding:13px 18px;border-right:1px solid #3a3a3a;border-bottom:1px solid #3a3a3a;min-width:0}
  .proj2 .rfs .lab{font-size:11px;color:var(--muted);margin-bottom:5px}
  .proj2 .rfs .v{font-size:13.5px;font-weight:700;line-height:1.32;color:#fff}

  /* Overview context — clamp + Read more toggle */
  .proj2 .ctx.clamped{display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden}
  .proj2 .more{display:inline-block;margin:-4px 0 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--accent);cursor:pointer;border-bottom:1px solid transparent}
  .proj2 .more:hover{border-bottom-color:var(--accent)}
  .proj2 .sc .grp .lab{font-size:11px;color:var(--accent);margin-bottom:6px}
  .proj2 .sc .grp p{font-size:14px;line-height:1.6;color:#d2d2d2;margin-bottom:18px}

  /* "By the Numbers" stat grid — 2 columns (→ 4 when the window is expanded) */
  .proj2 .statgrid{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid #3a3a3a;border-top:1px solid #3a3a3a;margin-top:2px}
  .proj2 .stat{padding:16px 18px;border-right:1px solid #3a3a3a;border-bottom:1px solid #3a3a3a;min-width:0}
  .proj2 .stat .n{font-size:25px;font-weight:700;color:var(--accent);line-height:1.08;margin-bottom:7px;letter-spacing:-.01em}
  .proj2 .stat .l{font-size:12.5px;color:#b3b3b3;line-height:1.45}
  /* expanded window → denser 4-column grids */
  .win.max .proj2 .rfs,.win.max .proj2 .statgrid{grid-template-columns:repeat(4,1fr)}
  /* content columns follow the WINDOW width — placed after the base rules so they win the tie */
  @container (max-width:520px){
    .about2 .twocol,.proj2 .rfs,.proj2 .statgrid{grid-template-columns:1fr}
    .about2 .twocol > * + *{border-left:0;border-top:1px solid #3a3a3a;padding-top:14px;margin-top:4px}
  }

  /* ---------- MARQUEE ---------- */
  #ticker{position:fixed;bottom:0;left:0;right:0;height:32px;z-index:9000;
    background:var(--accent);border-top:1px solid #000;overflow:hidden;display:flex;align-items:center}
  #ticker .track{display:inline-flex;white-space:nowrap;will-change:transform;
    font-family:var(--mono);font-size:13px;letter-spacing:.02em}
  #ticker .track span{padding:0 26px;color:#000}
  #ticker .track span b{color:#000;font-weight:700}

  /* ---------- BOOT ---------- */
  #boot{position:fixed;inset:0;z-index:11000;background:#000;display:flex;
    flex-direction:column;align-items:center;justify-content:center;gap:18px;cursor:pointer}
  #boot .blogo{position:absolute;top:7px;left:8px;height:50px;width:auto;display:block;border:1px solid var(--line)}   /* identical to the menu-bar logo */
  #boot .sq{width:152px;height:auto;display:block;margin:0 auto}
  #boot .sq path{fill:none;stroke:var(--muted);stroke-width:0.7;vector-effect:non-scaling-stroke;stroke-linejoin:round;animation:bob 2.6s ease-in-out infinite}
  #boot .t1{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--muted)}
  #boot .t1 .os{color:var(--accent)}
  #boot .t2{font-size:12px;color:var(--muted);font-family:var(--mono)}
  #boot.gone{opacity:0;pointer-events:none;transition:opacity .5s}
  @keyframes blink{50%{opacity:.2}}
  @keyframes bob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}

  .hint{position:fixed;left:16px;bottom:42px;z-index:60;font-family:var(--mono);font-size:12px;color:var(--muted);transition:opacity .25s}
  .hint b{color:var(--accent);font-weight:400}
  .hint.hide{opacity:0}

  @media(max-width:760px){
    #organize{display:none!important}              /* windows are full-width on mobile — nothing to tile */
    .win{left:3vw!important;right:3vw;top:84px!important;width:94vw!important;height:auto!important;max-height:calc(100vh - 150px)}
    .win .rz{display:none}
    #snapghost{display:none!important}
    .grid.three,.grid.two,.about2 .twocol,.about2 .twocol.bio{grid-template-columns:1fr}
    .proj2 .statgrid,.win.max .proj2 .statgrid{grid-template-columns:1fr 1fr}
    .proj2 .rfs,.win.max .proj2 .rfs{grid-template-columns:1fr 1fr}
    .hint{display:none}
  }