:root{--blue:#0000ff;--paper:#eef0f3;--ink:#0a0b0d;--line:#dee1e7;--muted:#5b616e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif;line-height:1.5}a{color:inherit}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #3c8aff;outline-offset:4px}.mono{font-family:'Roboto Mono',monospace;font-size:11px}.bevel{border:1px solid var(--line);border-right-color:var(--ink);border-bottom-color:var(--ink);box-shadow:inset 1px 1px #fff}.site-header{position:sticky;top:0;z-index:10;background:var(--blue);color:white}.header-inner{max-width:1060px;padding:12px 24px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}.brand{font-weight:700;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:5px}.brand img{width:24px;height:24px;object-fit:contain}.back{text-decoration:none;font-size:13px;justify-self:start}.menu-toggle{justify-self:end;border:0;background:transparent;color:white;width:44px;height:36px;display:grid;place-content:center;gap:3px}.menu-toggle span{display:block;width:18px;height:2px;background:currentColor}.site-menu{position:absolute;right:max(20px,calc((100vw - 1012px)/2));top:calc(100% + 6px);width:230px;background:var(--paper);color:var(--ink);padding:5px;border:1px solid var(--ink);box-shadow:3px 3px var(--ink)}.site-menu[hidden]{display:none}.site-menu a{display:block;text-decoration:none;padding:10px 12px;font-size:14px}.site-menu a:hover{background:var(--blue);color:#fff}main{max-width:1060px;margin:auto;padding:48px 24px 72px}.eyebrow{font-family:'Doto',monospace;font-size:12px;text-transform:uppercase;color:var(--blue);margin:0 0 8px}h1{font-size:34px;letter-spacing:-.04em;margin:0 0 8px}header.intro p:last-child{margin:0 0 28px;color:var(--muted)}.folder{background:var(--paper);padding:18px}.toolbar{display:flex;align-items:center;gap:16px;margin-bottom:18px}.address{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.path{background:#fff;border:1px solid var(--line);padding:9px 12px;display:flex;align-items:center;gap:10px;flex:1;white-space:nowrap}.folder-icon{width:15px;height:11px;background:var(--blue);position:relative}.folder-icon:before{content:'';position:absolute;left:0;top:-4px;width:7px;height:4px;background:var(--blue)}.search-wrap{position:relative;width:330px;max-width:100%}.search-wrap label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#videoSearch{width:100%;min-height:42px;padding:10px 36px 10px 12px;border:1px solid #b1b7c3;border-top-color:var(--ink);border-left-color:var(--ink);border-radius:0;background:white;color:var(--ink);font-size:14px}#clearSearch{position:absolute;right:1px;top:1px;bottom:1px;width:34px;background:white;border:0;font-size:20px;color:var(--muted)}[hidden]{display:none!important}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.video-card{background:white;border:1px solid var(--line);text-decoration:none;padding:8px;display:block;min-width:0}.video-card:hover{border-color:var(--blue)}.thumbnail{position:relative;aspect-ratio:16/10;background:#e4e7ed;overflow:hidden;display:grid;place-items:center}.thumbnail img{width:100%;height:100%;object-fit:contain;display:block}.duration{position:absolute;right:8px;bottom:8px;background:rgba(10,11,13,.85);color:#fff;padding:3px 6px;font:11px 'Roboto Mono',monospace}.video-card h2{font-size:16px;line-height:1.35;letter-spacing:-.015em;margin:12px 4px 8px;min-height:2.7em}.folder-footer{border-top:1px solid var(--line);margin-top:18px;padding-top:13px;color:var(--muted)}.empty{padding:60px 16px;text-align:center}.empty h2{font-size:22px;margin:0 0 8px}.empty p{color:var(--muted);margin:0}dialog{width:min(860px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:1px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:4px 4px var(--ink);overflow:auto}dialog::backdrop{background:rgba(10,11,13,.7)}.player-header{display:flex;align-items:center;gap:14px;justify-content:space-between;background:var(--blue);color:white;padding:10px 14px}.player-header h2{font-size:17px;line-height:1.3;margin:0}.close-player{background:var(--paper);color:var(--ink);border:1px solid white;border-right-color:var(--ink);border-bottom-color:var(--ink);font-size:24px;line-height:1;width:36px;height:34px;flex-shrink:0}video{display:block;width:100%;height:min(58dvh,510px);background:#080808;object-fit:contain}.player-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;flex-wrap:wrap}.download{display:inline-block;text-decoration:none;background:var(--blue);color:white;font-weight:600;font-size:14px;padding:10px 18px}.player-status{margin:0;color:var(--muted);font-size:13px;flex:1;min-width:120px}.site-footer{color:var(--muted);margin-top:22px}.skip-link{position:fixed;top:-80px;left:12px;z-index:100;background:#fff;padding:12px}.skip-link:focus{top:12px}@media(max-width:780px){.toolbar{flex-direction:column;align-items:stretch;gap:12px}.search-wrap{width:100%}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-inner{grid-template-columns:1fr auto;padding:10px 16px}.back{display:none}.brand{justify-self:start}.brand img{display:block}main{padding:28px 16px 40px}h1{font-size:30px}.folder{padding:12px}.address>span{font-size:9px}.path{font-size:10px}}@media(max-width:480px){.video-grid{grid-template-columns:1fr;gap:14px}.video-card h2{min-height:0;font-size:17px;margin:12px 4px 10px}.thumbnail{aspect-ratio:16/10}.player-header h2{font-size:15px}video{height:min(56dvh,470px)}.player-footer{padding:12px}.download{width:100%;text-align:center}.site-footer{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Match the paper header and the homepage desktop Start bar. */
body{padding-bottom:44px}.header-inner{max-width:none;height:64px;padding:0 30px;grid-template-columns:1fr auto 1fr}.site-header{border-bottom:1px solid var(--ink)}.brand{gap:15px;font-weight:800;font-size:21px;letter-spacing:-.03em}.brand-divider{font-weight:400;opacity:.5}.brand .pixel{font:800 12px 'Doto',monospace;letter-spacing:.05em}.menu-toggle{display:none}.back{font-size:13px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}main{max-width:1480px;padding:32px 30px 48px}.site-menu{position:fixed;top:auto;right:auto;bottom:44px;left:6px;width:230px;z-index:101;max-height:calc(100dvh - 120px);overflow-y:auto}.site-menu a{display:flex;align-items:center;gap:10px}.site-menu a:before{content:'';display:inline-block;width:10px;height:10px;background:var(--blue);flex-shrink:0}.site-menu a:hover:before{background:white}
@media(max-width:780px){body{padding-bottom:0}.taskbar{display:none}.header-inner{height:56px;padding:0 13px;gap:8px;grid-template-columns:1fr auto 1fr}.back{display:block;font-size:0}.back:before{content:'←';font-size:24px}.brand{font-size:17px;gap:8px;justify-self:center;white-space:nowrap}.brand .pixel{font-size:9px}.menu-toggle{display:grid;height:44px}.site-menu{position:absolute;top:calc(100% + 6px);bottom:auto;right:14px;left:auto;max-height:calc(100dvh - 90px)}main{padding:22px 16px 40px}.folder{padding:12px}}

@media(min-width:781px){.site-menu{display:none!important}}

/* Reused verbatim from the homepage: colors, bevels, Start menu and taskbar. */
  :root{
    --blue:#0000FF;
    --cerulean:#3C8AFF;
    --g0:#FFFFFF;
    --g10:#EEF0F3;
    --g15:#DEE1E7;
    --g30:#B1B7C3;
    --g50:#717886;
    --g60:#5B616E;
    --g80:#32353D;
    --g100:#0A0B0D;
    --green:#66C800;
    --red:#FC401F;
    --yellow:#FFD12F;
  }
  .bevel-out{ box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--g100), inset 2px 2px 0 var(--g15), inset -2px -2px 0 var(--g60); }
  .bevel-in{ box-shadow: inset 1px 1px 0 var(--g100), inset -1px -1px 0 #fff, inset 2px 2px 0 var(--g60), inset -2px -2px 0 var(--g15); }
  .square{ width:13px; height:13px; background:var(--blue); border-radius:2px; flex-shrink:0; display:inline-block; }
  /* ================= taskbar ================= */
  .taskbar{ position:fixed; bottom:0; left:0; right:0; height:44px; z-index:100; background:var(--g10); }
  .taskbar-inner{ width:100%; height:100%; background:var(--g10); border-top:1px solid #fff; box-shadow:inset 0 1px 0 #fff; display:flex; align-items:center; padding:0 6px; gap:8px; }
  .start-btn{ display:flex; align-items:center; gap:8px; height:32px; padding:0 12px; background:var(--g10); border:none; cursor:pointer; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.82rem; color:var(--g100); }
  .start-btn.active{ box-shadow: inset 1px 1px 0 var(--g100), inset -1px -1px 0 #fff, inset 2px 2px 0 var(--g60), inset -2px -2px 0 var(--g15); }
  .taskbar-clock{ margin-left:auto; height:32px; padding:0 14px; display:flex; align-items:center; font-family:'Roboto Mono',monospace; font-size:0.82rem; color:var(--g100); }
  .start-menu{ position:fixed; bottom:44px; left:6px; width:230px; background:var(--g10); border:1px solid var(--g100); z-index:101; box-shadow: 2px 0 0 var(--g100), 0 -2px 0 var(--g100), inset 1px 1px 0 #fff; display:none; flex-direction:column; padding:4px; }
  .start-menu.open{ display:flex; }
  .start-menu a, .start-menu button{ display:flex; align-items:center; gap:10px; padding:10px 12px; font-family:'Inter Tight',sans-serif; font-size:0.85rem; color:var(--g100); text-decoration:none; background:none; border:none; width:100%; text-align:left; cursor:pointer; }
  .start-menu a:hover, .start-menu button:hover{ background:var(--blue); color:#fff; }
  .start-menu hr{ border:none; border-top:1px solid var(--g30); margin:4px 0; }

  .right-group{ margin-left:auto; display:flex; align-items:center; gap:4px; }
  .tray-icon{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:0.85rem; background:var(--g10); cursor:default; }

@media(max-width:780px){.taskbar,.start-menu{display:none!important}}

/* Phone playback follows the actual video ratio without a fixed-height letterbox. */
@media(max-width:780px){#videoPlayer{width:min(100%,calc(60dvh * var(--video-ratio,1.777778)));height:auto;aspect-ratio:var(--video-ratio,1.777778);max-height:60dvh;object-fit:contain;margin-inline:auto}}

/* Crisp, centered close glyph; neutral inset keyboard focus replaces blue halo. */
.close-player,.gallery-preview-header .lightbox-close{display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;border:1px solid #5b616e;border-radius:0;background:#eef0f3;color:#0a0b0d;box-shadow:inset 1px 1px #fff;appearance:none;outline:none}
.close-player svg,.gallery-preview-header .lightbox-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.close-player:hover,.gallery-preview-header .lightbox-close:hover{background:#fff;color:#0a0b0d;border-color:#5b616e}
.close-player:focus-visible,.gallery-preview-header .lightbox-close:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #5b616e}
@media(max-width:780px){.close-player,.gallery-preview-header .lightbox-close{width:40px;height:40px;min-width:40px}}
.site-footer{font-family:'Inter Tight',system-ui,sans-serif;letter-spacing:normal;word-spacing:normal;font-size:12px}