:root{
    --bg:#161616;
    --bg2:#1B1B1B;
    --line:#2B2B2B;
    --txt:#CDCDCD;
    --dim:#929292;
    --blue:#94b8da;
    --blue-lt:#94b8da;
    --sidebar:max(300px,34vw);
    --mobile-bar:64px;
    --sans:"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
    --mono:"Cascadia Mono",Consolas,"IBM Plex Mono",monospace;
    --term:"VT323","Lucida Console",Consolas,monospace;
  }
  *{box-sizing:border-box}
  html{background:var(--bg)}
  body{
    margin:0;font-family:var(--sans);font-size:15px;line-height:1.6;
    background:var(--bg);color:var(--txt);
    -webkit-font-smoothing:antialiased;min-height:100dvh;
  }
  html.locked,html.album-open,html.viewer-open,html.project-open,
  body.locked,body.album-open,body.viewer-open,body.project-open{overflow:hidden}
  body.locked,body.album-open,body.viewer-open,body.project-open{position:fixed;inset:0;width:100%}
  ::selection{background:var(--blue);color:#fff}
  a{color:inherit;text-decoration:none}
  button{all:unset;cursor:pointer}
  a:focus-visible,button:focus-visible{outline:1px solid var(--blue-lt);outline-offset:3px}
  .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;
  }

  /* ================= layout ================= */
  .app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100dvh}

  /* ================= sidebar ================= */
  .side{
    --sp:42px;
    position:sticky;top:0;height:100dvh;
    display:flex;flex-direction:column;
    padding:34px var(--sp) 0;border-right:1px solid var(--line);
  }
  .logo{width:46px;height:46px;flex:none;position:relative;margin-bottom:70px}
  .logo::before{
    content:"";position:absolute;inset:0;border:3px solid var(--txt);border-radius:50%;
  }
  .logo::after{
    content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;
    transform:translate(-50%,-50%);background:var(--txt);border-radius:50%;
  }
  .idx{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:0;color:var(--dim);margin-bottom:22px}
  nav.main{flex:none;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
  nav.main a{
    font-size:46px;line-height:1.1;letter-spacing:0;
    color:var(--txt);transition:color .15s ease;
  }
  nav.main a:hover{color:#fff}
  nav.main a.on{color:var(--blue-lt)}
  .side-time{
    flex:none;display:flex;flex-direction:column;gap:5px;margin-top:30px;
    font-family:var(--mono);font-size:10px;line-height:1.4;color:var(--dim);
  }
  .side-time-heading{margin-bottom:3px;color:#686868}
  .side-time-row{display:grid;grid-template-columns:58px 40px 1fr;gap:8px;align-items:baseline}
  .side-time-row time{color:var(--txt);font-variant-numeric:tabular-nums}
  .side-time-row small{font:inherit;font-size:9px;color:#686868}

  /* ---------------- terminal ---------------- */
  /* flush against the screen edges, like the reference: no left margin at all */
  .term{
    /* fills whatever height is left — grows into it, never pushes the nav */
    flex:1 1 auto;min-height:0;
    display:flex;flex-direction:column;justify-content:flex-end;
    margin:0 calc(-1 * var(--sp));
    font-family:var(--term);font-size:16px;line-height:1.45;
    color:var(--txt);position:relative;z-index:1;
  }
  .term #tout{
    flex:0 1 auto;min-height:0;overflow-y:auto;
    display:flex;flex-direction:column;
    scrollbar-width:thin;scrollbar-color:rgba(205,205,205,.22) transparent;
    /* older lines fade out as they climb toward the nav */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5.5em);
    mask-image:linear-gradient(to bottom,transparent 0,#000 5.5em);
  }
  /* bottom-anchored when short, scrollable when long (chat-log trick) */
  .term #tout .ln:first-child{margin-top:auto}
  /* while scrolled up to read, lift the fade so the top lines are legible */
  .term #tout.scrolled{-webkit-mask-image:none;mask-image:none}
  .term #tout::-webkit-scrollbar{width:4px}
  .term #tout::-webkit-scrollbar-track{background:transparent}
  .term #tout::-webkit-scrollbar-thumb{background:rgba(205,205,205,.22);border-radius:99px}
  .term .ln{display:block;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .term .ln.wrap{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .term .ln.dim{color:var(--dim)}
  .term .ln.err{color:#B0653A}
  .term .ln.pre{white-space:pre;text-overflow:clip}
  .term .ln .d{color:var(--blue-lt)}
  .term .in{position:relative;display:flex;flex:none;align-items:baseline;min-height:1.45em}
  .term .in .pr{flex:none;color:var(--txt)}
  .term .in .blk{
    width:.55em;height:1.05em;flex:none;align-self:center;
    background:var(--txt);
    animation:blink 1.06s steps(2,start) infinite;
  }
  @keyframes blink{50%{opacity:0}}
  .term input{
    all:unset;position:absolute;inset:0;opacity:0;pointer-events:none;
  }

  /* ---------------- boot screen ---------------- */
  #mobile-notice{display:none}
  #boot{
    position:fixed;inset:0;z-index:1000;background:#000;
    font-family:var(--term);font-size:17px;line-height:1.32;color:#DDD;
    padding:0;overflow-y:auto;scrollbar-width:none;
  }
  #boot::-webkit-scrollbar{display:none}
  #boot .bl{white-space:pre;overflow:hidden}
  #boot .ok{color:#3FBF3F}
  #boot .fail{color:#D55}
  #boot.fade{opacity:0;transition:opacity .2s ease}

  #content-loader{
    position:fixed;inset:0;z-index:900;display:none;place-items:center;
    background:#000;color:#ddd;font-family:var(--term);font-size:18px;
  }
  #content-loader.on{display:grid}

  /* ================= content ================= */
  .pane{position:relative;min-width:0}
  .page{display:none;min-height:100dvh;position:relative}
  .page.on{display:block;animation:appear .35s ease both}
  @keyframes appear{from{opacity:0}to{opacity:1}}

  .crumb{font-family:var(--mono);font-size:11px;letter-spacing:0;color:var(--dim);margin:0 0 34px}

  /* ---------------- intro ---------------- */
  #pg-meowln .bgwrap{position:absolute;inset:0;overflow:hidden}
  #pg-meowln .bgwrap img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity 1.4s ease;
  }
  #pg-meowln .bgwrap img.show{opacity:1}
  #pg-meowln .bgwrap::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(200deg,rgba(22,22,22,.25),rgba(22,22,22,.82));
  }
  /* fallback when no image dropped in yet */
  #pg-meowln .bgwrap{
    background:
      radial-gradient(90rem 40rem at 110% -10%,#22304c 0%,transparent 60%),
      radial-gradient(60rem 40rem at -20% 110%,#1e2a24 0%,transparent 55%),
      #161616;
  }
  #pg-meowln .lay{
    position:relative;min-height:100dvh;
    display:flex;align-items:flex-end;padding:0;
  }
  .glass{
    background:rgba(20,20,20,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:none;
  }
  .intro-panel{
    width:100%;display:grid;
    grid-template-columns:minmax(260px,1.1fr) minmax(170px,190px) minmax(230px,1fr);
    border-radius:0;overflow:hidden;
  }
  .intro-panel .row{display:flex;gap:24px;align-items:center;padding:24px 30px}
  .intro-panel>.fact{padding:28px 30px;border-left:1px solid rgba(255,255,255,.1)}
  .pfp{
    width:112px;height:112px;flex:none;border-radius:50%;overflow:hidden;
    background:rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:center;
    font-size:30px;color:var(--dim);
  }
  .pfp img{width:100%;height:100%;object-fit:cover;display:block}
  .hello{min-width:0}
  .hello strong{display:block;font-size:clamp(25px,2vw,34px);font-weight:400;line-height:1}
  .hello p{max-width:32ch;margin:12px 0 0;color:#d2d2d2;font-size:17px;line-height:1.55}
  .fact{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.8}
  .fact .k{font-family:var(--mono);font-size:11px;letter-spacing:0;color:var(--dim);flex:none}
  .fact .v{min-width:0}
  .fact .v .sub{color:var(--dim)}
  .keyword-card{justify-content:center}
  .keywords{max-width:42ch;font-size:14px;line-height:1.8;color:var(--txt);overflow-wrap:normal}

  /* ---------------- social links ---------------- */
  .social-card{
    min-width:0;display:flex;align-items:center;justify-content:center;
    padding:20px 8px;border-left:1px solid rgba(255,255,255,.1);
  }
  .social-grid{
    width:154px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  }
  .social-link{
    box-sizing:border-box;width:46px;height:46px;flex:none;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.25);color:#fff;
    transition:border-color .2s ease,color .2s ease,background-color .2s ease;
  }
  .social-link:hover,.social-link:focus-visible{
    border-color:var(--blue-lt);background:rgba(148,184,218,.08);color:var(--blue-lt);
  }
  .social-icon{
    width:22px;height:22px;display:block;background:currentColor;
    -webkit-mask:var(--social-icon) center/contain no-repeat;
    mask:var(--social-icon) center/contain no-repeat;
  }
  .social-link[data-brand="vrchat"]{--social-icon:url("/assets/icons/vrchat.svg")}
  .social-link[data-brand="discord"]{--social-icon:url("/assets/icons/discord.svg")}
  .social-link[data-brand="x"]{--social-icon:url("/assets/icons/x.svg")}
  .social-link[data-brand="steam"]{--social-icon:url("/assets/icons/steam.svg")}
  .social-link[data-brand="github"]{--social-icon:url("/assets/icons/github.svg")}

  /* ---------------- shared project rows ---------------- */
  .index-row{
    position:relative;min-width:0;display:flex;align-items:center;justify-content:flex-start;
    padding:24px 30px;overflow:hidden;background:#000;
    border-bottom:1px solid var(--line);color:#fff;isolation:isolate;
    direction:ltr;text-align:left;
  }
  .index-name{
    position:relative;z-index:2;display:inline-block;min-width:0;
    font-size:44px;line-height:1;letter-spacing:0;overflow-wrap:anywhere;
    transition:color .3s ease,transform .3s cubic-bezier(.2,1,.8,1);
  }
  .index-name::before{
    content:"";position:absolute;left:0;top:calc(100% + 5px);
    width:100%;height:1px;background:currentColor;pointer-events:none;
    transform-origin:50% 100%;
    clip-path:polygon(0 0,0 100%,0 100%,0 0,100% 0,100% 100%,0 100%,0 100%,100% 100%,100% 0);
    transition:clip-path .3s,transform .3s cubic-bezier(.2,1,.8,1);
  }
  .index-row:not(:disabled):hover .index-name,.index-row:focus-visible .index-name{color:var(--blue-lt);transform:translate3d(0,-2px,0)}
  .index-row:not(:disabled):hover .index-name::before,.index-row:focus-visible .index-name::before{
    transform:translate3d(0,2px,0) scale3d(1.08,3,1);
    clip-path:polygon(0 0,0 100%,50% 100%,50% 0,50% 0,50% 100%,50% 100%,0 100%,100% 100%,100% 0);
  }
  .index-media{
    position:absolute;z-index:1;inset:0 0 0 auto;width:70%;opacity:0;pointer-events:none;
    mask-image:linear-gradient(to right,transparent 0 14%,#000 57% 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0 14%,#000 57% 100%);
    transition:opacity .4s ease;
  }
  .index-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:1}
  .index-row:not(:disabled):hover .index-media,.index-row:focus-visible .index-media{opacity:.5}
  .index-row:focus-visible{position:relative;z-index:1;outline-offset:-2px}
  .index-row:disabled{opacity:.48;cursor:default}

  /* ---------------- Discord username ---------------- */
  .discord-popover{
    width:min(320px,calc(100vw - 32px));max-width:none;margin:auto;padding:0;
    border:0;border-radius:0;background:transparent;color:#fff;overflow:visible;cursor:default;
  }
  .discord-popover::backdrop{background:rgba(0,0,0,.58)}
  .discord-popover[open]{animation:appear .16s ease both}
  body:has(.discord-popover[open]){overflow:hidden}
  .discord-copy{
    width:100%;min-height:86px;padding:0 22px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    border:1px solid #3a3a3a;border-radius:0;background:#090909;color:#fff;
    box-shadow:0 18px 48px rgba(0,0,0,.45);
  }
  .discord-copy:hover,.discord-copy:focus-visible{border-color:var(--blue-lt)}
  .discord-username{font-size:21px;line-height:1;letter-spacing:0}
  .discord-copy-state{
    font-family:var(--mono);font-size:11px;line-height:1;color:var(--dim);
    transition:color .15s ease;
  }
  .discord-copy:hover .discord-copy-state,.discord-copy:focus-visible .discord-copy-state{color:var(--blue-lt)}
  body.cur .discord-copy{cursor:pointer}

  /* ---------------- music wall ---------------- */
  .wall{
    display:grid;gap:1px;margin:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    background:var(--line);
  }
  .sq{
    display:block;width:100%;
    position:relative;aspect-ratio:1;overflow:hidden;
    border:0;background:var(--bg2);
    transition:box-shadow .15s ease;
  }
  .sq img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
  .sq:hover{box-shadow:inset 0 0 0 1px var(--blue)}
  .sq:hover img{transform:scale(1.03)}
  .sq:focus-visible{outline:1px solid var(--blue-lt);outline-offset:-1px}
  .sq .cap{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;gap:10px;align-items:baseline;
    padding:9px 12px;font-family:var(--mono);font-size:11px;letter-spacing:0;
    background:rgba(22,22,22,.92);border-top:1px solid var(--blue);
    transform:translateY(101%);transition:transform .18s ease;
  }
  .sq .cap i{font-style:normal;color:var(--dim)}
  .sq:hover .cap,.sq:focus-visible .cap{transform:none}

  /* ---------------- album / detail ---------------- */
  .back{
    display:inline-flex;gap:10px;align-items:baseline;
    font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--dim);
    min-height:44px;padding:0 4px;justify-content:center;
  }
  .back:hover{color:var(--blue-lt)}
  /* the album opens as a modal over the content pane — the nav stays visible */
  #amodal{
    position:fixed;top:0;right:0;bottom:0;left:var(--sidebar);
    z-index:40;display:none;
  }
  #amodal.on{display:block;animation:appear .3s ease both}
  #amodal .abg{position:absolute;inset:0}
  #amodal .abg img{width:100%;height:100%;object-fit:cover;display:block}
  #amodal .abg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(200deg,rgba(22,22,22,.35),rgba(22,22,22,.9));
  }
  #amodal .wrapx{
    position:relative;height:100%;
    display:flex;align-items:stretch;justify-content:flex-end;padding:0;overflow:hidden;
  }
  .album-glass-layer{
    position:absolute;z-index:0;inset:0 0 0 auto;
    width:clamp(360px,48%,520px);overflow:hidden;pointer-events:none;
  }
  .album-glass-art{
    position:absolute;right:0;top:0;
    width:calc(100vw - var(--sidebar));height:100%;max-width:none;
    display:block;object-fit:cover;
    filter:blur(12px);
  }
  #amodal .wrapx::before{
    content:"";position:absolute;z-index:1;inset:0 0 0 auto;
    width:clamp(360px,48%,520px);pointer-events:none;
    background:rgba(20,20,20,.66);
  }
  .album-rail{
    width:clamp(360px,48%,520px);height:100%;overflow-y:auto;padding:30px 28px;
    position:relative;z-index:2;background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-radius:0;isolation:isolate;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;
  }
  .album-rail::-webkit-scrollbar{width:5px}
  .album-rail::-webkit-scrollbar-track{background:transparent;margin:20px 0}
  .album-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:0}
  .album-rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}

  /* generic file viewer — same shell as the album modal, opened from the terminal */
  #viewer{
    position:fixed;top:0;right:0;bottom:0;left:var(--sidebar);
    z-index:40;display:none;background:rgba(16,16,16,.34);
  }
  #viewer.on{display:block;animation:appear .3s ease both}
  #viewer .wrapx{
    position:relative;height:100%;
    display:flex;align-items:stretch;justify-content:flex-end;padding:0;
  }
  .viewer-panel{
    width:clamp(340px,62%,520px);height:100%;overflow-y:auto;padding:30px 28px;
    border-radius:0;
    background:rgba(20,20,20,.58);
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;
  }
  .viewer-panel::-webkit-scrollbar{width:5px}
  .viewer-panel::-webkit-scrollbar-track{background:transparent;margin:20px 0}
  .viewer-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:0}
  #viewer .vimg{width:100%;display:block;border-radius:0;margin-top:18px}
  #viewer pre{
    margin:18px 0 0;font-family:var(--term);font-size:15px;line-height:1.5;
    white-space:pre-wrap;color:var(--txt);
  }
  #amodal h2{font-size:42px;font-weight:400;letter-spacing:0;line-height:1.05;margin:14px 0 0;overflow-wrap:anywhere}
  #amodal .who{margin:10px 0 0;color:var(--blue-lt);font-size:17px}
  #amodal .meta{margin:6px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:0;color:var(--dim)}
  #amodal .note{margin:20px 0 0;max-width:44ch}
  #amodal .note:empty{display:none}
  .embeds{margin-top:30px;display:flex;flex-direction:column;gap:18px}
  .embeds iframe{
    width:100%;aspect-ratio:16/9;display:block;
    border:1px solid var(--line);background:var(--bg2);
    box-shadow:none;
  }
  .vids{margin-top:34px;border-top:1px solid var(--line)}
  .vids a{
    display:flex;gap:14px;align-items:baseline;
    padding:14px 2px;border-bottom:1px solid var(--line);
    transition:color .15s ease,padding-left .15s ease;
  }
  .vids a .arr{margin-left:auto;color:var(--dim)}
  .vids a:hover{color:var(--blue-lt);padding-left:10px}
  .vids a:hover .arr{color:var(--blue-lt)}

  /* ---------------- works ---------------- */
  .works-index{
    min-height:100dvh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;background:var(--line);overflow:hidden;
  }
  .work-cat{position:relative;min-width:0;min-height:100dvh;overflow:hidden;background:var(--bg2)}
  .work-cat>img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(.78) brightness(.75);transition:transform .45s ease,filter .25s ease;
  }
  .work-cat::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(12,12,12,.48),transparent 42%,rgba(12,12,12,.78));
  }
  .work-copy{position:absolute;z-index:1;left:24px;right:24px;bottom:25px;padding-right:34px}
  .work-title{font-size:34px;line-height:1.05;color:#fff;letter-spacing:0}
  .work-cat:not(:disabled):hover>img{transform:scale(1.025);filter:saturate(.92) brightness(.88)}
  .work-cat:focus-visible{outline-offset:-2px;z-index:2}
  .work-cat:disabled{opacity:.48;cursor:default}

  .category-toolbar{
    position:sticky;top:0;z-index:5;height:58px;padding:7px 12px;
    display:flex;align-items:center;background:var(--bg);
  }
  .category-back{
    width:44px;height:44px;display:grid;place-items:center;
    border:1px solid var(--line);font-size:26px;line-height:1;color:var(--txt);
  }
  .category-back:hover{border-color:var(--blue-lt);color:var(--blue-lt);background:#202020}

  .projects-index{
    height:calc(100dvh - 58px);display:grid;grid-template-rows:repeat(4,minmax(140px,1fr));
    gap:1px;background:var(--line);overflow-y:auto;
  }
  .projects-index>.index-row{border-bottom:0}

  .fullscreen-project{
    position:fixed;inset:0;z-index:80;display:none;overflow-y:auto;overflow-x:hidden;
    background:#000;color:#fff;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) transparent;
  }
  .fullscreen-project.on{display:block;animation:appear .22s ease both}
  .fullscreen-project::-webkit-scrollbar{width:5px;height:5px}
  .fullscreen-project::-webkit-scrollbar-track{background:#000}
  .fullscreen-project::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26)}
  .film-back{
    position:fixed;z-index:3;left:22px;top:22px;width:44px;height:44px;
    display:grid;place-items:center;border:1px solid rgba(255,255,255,.42);
    border-radius:0;background:rgba(0,0,0,.66);color:#fff;font-size:26px;line-height:1;
  }
  .film-back:hover{border-color:var(--blue-lt);color:var(--blue-lt);background:#000}

  .media-project{overflow-y:auto;background:#000}
  .media-grid{
    min-height:100svh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:calc((100svh - 1px) / 2);gap:1px;background:var(--line);
  }
  .media-item{position:relative;min-width:0;min-height:0;overflow:hidden;background:#090909}
  .media-thumb{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease,filter .22s ease}
  .media-item:hover .media-thumb,.media-item:focus-visible .media-thumb{transform:scale(1.018);filter:brightness(.72)}
  .media-item-meta{
    position:absolute;z-index:1;left:16px;right:16px;bottom:14px;
    color:#fff;font-family:var(--mono);font-size:11px;line-height:1.35;text-align:left;
    opacity:0;transform:translateY(5px);transition:opacity .2s ease,transform .2s ease;
  }
  .media-item:hover .media-item-meta,.media-item:focus-visible .media-item-meta{opacity:1;transform:none}
  .media-viewer{position:fixed;inset:0;z-index:4;display:none;background:#000}
  .media-project.is-viewing .media-grid{display:none}
  .media-project.is-viewing .media-viewer{display:block}
  .media-project.is-viewing .media-back{z-index:6}
  .media-viewer-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .media-viewer-stage img,.media-viewer-stage video{
    flex:none;max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain;background:#000;
  }
  .media-step{
    position:fixed;z-index:5;top:50%;width:44px;height:44px;display:grid;place-items:center;
    transform:translateY(-50%);border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.66);
    color:#fff;font-size:30px;line-height:1;
  }
  .media-prev{left:22px}
  .media-next{right:22px}
  .media-step:hover,.media-step:focus-visible{border-color:var(--blue-lt);color:var(--blue-lt);background:#000}
  .media-step:disabled{visibility:hidden}
  .media-viewer-meta{
    position:fixed;z-index:5;left:50%;bottom:22px;max-width:min(620px,calc(100% - 140px));
    padding:10px 13px;transform:translateX(-50%);background:rgba(0,0,0,.72);text-align:center;
  }
  .media-viewer-meta time{font-family:var(--mono);font-size:10px;color:#aaa}
  .media-viewer-meta p{margin:4px 0 0;color:#ddd;font-size:14px;line-height:1.35}

  .avatars-project{overflow:hidden;background:#000}
  .avatar-track{
    --avatar-selector-width:clamp(250px,23vw,330px);
    --avatar-profile-width:40vw;
    height:100svh;display:flex;gap:1px;overflow-x:auto;overflow-y:hidden;
    background:var(--line);scrollbar-width:none;overscroll-behavior-inline:contain;
  }
  .avatar-track::after{content:"";flex:0 0 0;height:1px}
  .avatar-track.is-positioning::after{flex-basis:calc(100vw - var(--avatar-selector-width))}
  .avatar-track.is-collapsing::after{
    flex-basis:calc(100vw - var(--avatar-selector-width));
    transition:flex-basis .68s cubic-bezier(.22,.8,.28,1);
  }
  .avatar-track.is-positioning.is-expanding::after{
    flex-basis:0;
    transition:flex-basis .68s cubic-bezier(.22,.8,.28,1);
  }
  .avatar-track.is-transitioning .avatar-card{pointer-events:none}
  .avatar-track::-webkit-scrollbar{display:none}
  .avatar-scene{
    position:relative;flex:0 0 var(--avatar-selector-width);height:100svh;overflow:hidden;
    background:#080808;transition:flex-basis .68s cubic-bezier(.22,.8,.28,1);
  }
  .avatar-scene.is-expanded{flex-basis:100vw}
  .avatar-card{position:absolute;z-index:2;inset:0 auto 0 0;width:var(--avatar-selector-width);height:100%;overflow:hidden;background:#080808;isolation:isolate;transition:width .68s cubic-bezier(.22,.8,.28,1),background .35s ease}
  .avatar-scene.is-expanded .avatar-card{width:var(--avatar-profile-width);background:#0c0c0c}
  .avatar-portrait{position:absolute;inset:0;overflow:hidden;transition:height .62s cubic-bezier(.22,.8,.28,1)}
  .avatar-portrait::after{content:"";position:absolute;z-index:1;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));transition:opacity .3s ease}
  .avatar-portrait img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .42s ease,object-position .62s ease}
  .avatar-card:hover .avatar-portrait img{transform:scale(1.018)}
  .avatar-card-caption{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;gap:7px;text-align:left;transition:opacity .24s ease}
  .avatar-card-caption strong{font-size:clamp(30px,3vw,46px);font-weight:400;line-height:.95}
  .avatar-card-caption span,.avatar-profile-copy .avatar-dates{font-family:var(--mono);font-size:11px;color:#d1d1d1}
  .avatar-profile-copy{position:absolute;z-index:3;inset:50% auto 0 0;width:var(--avatar-profile-width);min-height:0;padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;text-align:left;opacity:0;transform:translateX(-34px);pointer-events:none;transition:opacity .34s ease .22s,transform .5s cubic-bezier(.22,.8,.28,1) .22s}
  .avatar-profile-copy h2{margin:0;font-size:clamp(38px,4vw,58px);font-weight:400;line-height:.92}
  .avatar-profile-copy .avatar-dates{margin-top:12px}
  .avatar-profile-copy p{max-width:34ch;min-height:0;flex:1 1 auto;margin:24px 0 0;padding-right:10px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(205,205,205,.28) transparent;color:#d0d0d0;font-size:17px;line-height:1.55}
  .avatar-profile-copy p::-webkit-scrollbar{width:3px}
  .avatar-profile-copy p::-webkit-scrollbar-track{background:transparent}
  .avatar-profile-copy p::-webkit-scrollbar-thumb{background:rgba(205,205,205,.28)}
  .avatar-profile-copy a{color:var(--blue-lt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;pointer-events:auto;transition:color .2s ease}
  .avatar-profile-copy a:hover{color:#fff}
  .avatar-scene.is-expanded .avatar-portrait{height:100%}
  .avatar-scene.is-expanded .avatar-portrait::after{inset:0;opacity:1;background:linear-gradient(180deg,transparent 0 38%,rgba(0,0,0,.68) 54%,#0c0c0c 72% 100%)}
  .avatar-scene.is-expanded .avatar-portrait img{object-position:center 22%}
  .avatar-scene.is-expanded .avatar-card-caption{opacity:0}
  .avatar-scene.is-expanded .avatar-profile-copy{opacity:1;transform:none;pointer-events:auto}
  .avatar-gallery{
    position:absolute;z-index:1;inset:0 0 0 var(--avatar-profile-width);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:1px;
    background:var(--line);clip-path:inset(0 100% 0 0);transform:translateX(-32px);transform-origin:left center;pointer-events:none;transition:clip-path .68s cubic-bezier(.22,.8,.28,1),transform .68s cubic-bezier(.22,.8,.28,1);
  }
  .avatar-scene.is-expanded .avatar-gallery{clip-path:inset(0);transform:none;pointer-events:auto}
  .avatar-gallery-photo{position:relative;min-width:0;min-height:0;overflow:hidden;background:#101010;transition:opacity .24s ease,transform .42s cubic-bezier(.22,.8,.28,1)}
  .avatar-gallery-photo:nth-child(1){grid-area:1/1/6/9}
  .avatar-gallery-photo:nth-child(2){grid-area:1/9/9/13}
  .avatar-gallery-photo:nth-child(3){grid-area:6/1/10/6}
  .avatar-gallery-photo:nth-child(4){grid-area:6/6/13/9}
  .avatar-gallery-photo:nth-child(5){grid-area:10/1/13/6}
  .avatar-gallery-photo:nth-child(6){grid-area:9/9/13/13}
  .avatar-gallery-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
  .avatar-gallery-photo:hover img{transform:scale(1.018)}
  .avatar-gallery.has-focus .avatar-gallery-photo:not(.is-focused){opacity:0;pointer-events:none}
  .avatar-gallery-photo.is-focused{position:absolute;z-index:4;inset:0;grid-area:auto;transform:none;background:#000}
  .avatar-gallery-photo.is-focused img{object-fit:contain;transform:none}

  .film-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#080808}
  .film-hero>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
  .film-hero::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.08) 48%,rgba(0,0,0,.86));
  }
  .film-heading{position:absolute;z-index:1;left:clamp(24px,5vw,76px);right:24px;bottom:clamp(28px,6vw,76px)}
  .film-heading h1{margin:0;max-width:11ch;font-size:clamp(46px,8vw,112px);font-weight:400;line-height:.9;letter-spacing:-.04em}
  .film-heading p{margin:20px 0 0;font-family:var(--mono);font-size:12px;color:#d0d0d0}
  .film-stills{display:flex;flex-direction:column;gap:1px;background:#242424}
  .film-shot{margin:0;overflow:hidden;background:#080808}
  .film-shot img{width:100%;height:100%;display:block;object-fit:cover}
  .film-shot-wide{height:82svh;min-height:520px}
  .film-pair{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:1px;min-height:100svh}
  .film-pair .film-shot:not(.film-shot-tall){min-height:70svh}
  .film-shot-full{height:100svh;min-height:560px}
  .film-outro{padding-bottom:clamp(56px,9vw,132px);background:#000}
  .film-shot-extra{height:82svh;min-height:520px}
  .film-description{max-width:820px;margin:0 auto;padding:clamp(48px,8vw,112px) 24px}
  .film-description p{margin:0;color:#d2d2d2;font-size:clamp(18px,2vw,27px);line-height:1.55}
  .film-embed{width:min(1120px,calc(100% - 48px));margin:0 auto;background:#080808}
  .film-embed iframe{width:100%;aspect-ratio:16/9;display:block;border:0;background:#080808}

  .video-project-inner{
    min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    width:min(1120px,calc(100% - 48px));margin:0 auto;padding:88px 0 64px;
  }
  .video-project-embed{background:#080808}
  .video-project-embed iframe{width:100%;aspect-ratio:16/9;display:block;border:0;background:#080808}
  .video-project-inner>p{max-width:820px;margin:40px 0 0;color:#d2d2d2;font-size:clamp(18px,2vw,27px);line-height:1.55}

  /* ================= custom cursor ================= */
  @media (pointer:fine){
    body.cur, body.cur a, body.cur button{cursor:none}
    #cur{
      position:fixed;left:0;top:0;z-index:999;pointer-events:none;
      width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
      border:1px solid var(--txt);
      transition:border-color .12s ease,background .12s ease;
    }
    #cur::after{
      content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
      transform:translate(-50%,-50%);border-radius:50%;background:var(--txt);
    }
    #cur.hot{transform:scale(1.5);border-color:var(--blue-lt);background:rgba(148,184,218,.12)}
  }
  #cur{display:none}
  body.cur #cur{display:block}
  body.cur:has(iframe:hover) #cur{display:none}

  @media (min-width:861px) and (max-width:1050px){
    .side{--sp:32px}
    nav.main a{font-size:40px;white-space:nowrap}
    .intro-panel{
      grid-template-columns:minmax(215px,1.1fr) minmax(145px,160px) minmax(185px,1fr);
    }
    .intro-panel .row{gap:14px;padding:22px 18px}
    .intro-panel>.fact{padding:22px 18px}
    .social-card{padding:18px 6px}
    .social-grid{width:132px;gap:6px}
    .social-link{width:40px;height:40px}
    .social-icon{width:20px;height:20px}
    .pfp{width:88px;height:88px}
    .hello p{font-size:16px}
  }

  /* ================= mobile ================= */
  .mtop{display:none}
  @media (max-width:860px){
    #mobile-notice{
      position:fixed;inset:0;z-index:1100;display:grid;place-items:center;
      padding:24px;background:#000;color:#ddd;text-align:center;
      font-family:var(--term);font-size:clamp(22px,7vw,32px);line-height:1.2;
    }
    #mobile-notice.fade{opacity:0;transition:opacity .35s ease}
    .app{display:block}
    .page{min-height:calc(100dvh - var(--mobile-bar))}

    /* top bar: logo + terminal button */
    .mtop{
      display:flex;align-items:center;justify-content:space-between;
      position:sticky;top:0;z-index:70;height:var(--mobile-bar);
      padding:0 18px;background:rgba(20,20,20,.84);border-bottom:1px solid var(--line);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      box-shadow:0 5px 16px rgba(0,0,0,.24);
    }
    .mtop .logo{width:26px;height:26px;margin:0}
    .mtop .logo::before{border-width:2px}
    .mtop .logo::after{width:8px;height:8px}
    #tbtn{
      width:40px;height:40px;border:1px solid var(--txt);
      display:flex;align-items:center;justify-content:center;
      font-family:var(--term);font-size:19px;line-height:1;color:var(--txt);
    }
    #tbtn.open{background:var(--txt);color:var(--bg)}

    /* the sidebar becomes a full-screen drawer under the top bar */
    .side{
      position:fixed;inset:0;z-index:60;height:auto;
      --sp:22px;padding:88px var(--sp) 0;
      border-right:none;background:var(--bg);
      transform:translateX(-102%);
      transition:transform .32s cubic-bezier(.22,.8,.28,1);
    }
    .side.open{transform:none}
    .side .logo{display:none}
    nav.main a{font-size:34px}
    /* staggered reveal while the drawer slides in */
    .side .idx,.side nav.main a,.side .side-time,.side .term{
      opacity:0;transform:translateX(-16px);
      transition:opacity .3s ease,transform .3s ease;
    }
    .side.open .idx,.side.open nav.main a,.side.open .side-time,.side.open .term{opacity:1;transform:none}
    .side.open .idx{transition-delay:.08s}
    .side.open nav.main a:nth-child(1){transition-delay:.12s}
    .side.open nav.main a:nth-child(2){transition-delay:.17s}
    .side.open nav.main a:nth-child(3){transition-delay:.22s}
    .side.open .side-time{transition-delay:.27s}
    .side.open .term{transition-delay:.32s}
    .term{font-size:15px}
    .term #tout{max-height:36dvh}

    #pg-meowln .lay{min-height:calc(100dvh - var(--mobile-bar));padding:0}
    .intro-panel{grid-template-columns:1fr;border-radius:0}
    .intro-panel .row,.intro-panel>.fact{padding:20px 18px}
    .intro-panel>.fact,.social-card{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
    .social-card{justify-content:flex-start;padding:20px 18px}
    .intro-panel .row{gap:16px}
    .pfp{width:84px;height:84px}
    .hello strong{font-size:26px}
    .hello p{margin-top:8px;font-size:16px}
    .keywords{max-width:none;font-size:14px}

    .index-row{
      padding:18px;
    }
    .index-name{font-size:30px}

    .wall{grid-template-columns:repeat(2,1fr)}
    .sq .cap{transform:none}
    .works-index{min-height:calc(100dvh - var(--mobile-bar));grid-template-columns:1fr}
    .work-cat{min-height:480px;height:72dvh}
    .work-title{font-size:32px}
    .work-copy{left:18px;right:18px}
    .category-toolbar{top:var(--mobile-bar);height:54px;padding:0 14px}
    .projects-index{
      height:calc(100dvh - var(--mobile-bar) - 54px);
      grid-template-rows:repeat(4,minmax(150px,1fr));
    }
    .film-back{left:12px;top:12px}
    .media-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100svh - 2px) / 3)}
    .media-item-meta{left:10px;right:10px;bottom:9px;font-size:10px}
    .media-prev{left:12px}
    .media-next{right:12px}
    .media-viewer-meta{bottom:12px;max-width:calc(100% - 112px);padding:8px 10px}
    .avatar-track{--avatar-selector-width:max(250px,72vw);--avatar-profile-width:44vw}
    .avatar-scene.is-expanded{flex-basis:100vw;min-width:100vw}
    .avatar-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
    .avatar-gallery-photo:nth-child(n){grid-area:auto}
    .avatar-card-caption{left:18px;right:18px;bottom:22px}
    .avatar-card-caption strong{font-size:36px}
    .avatar-profile-copy{inset:44% auto 0 0;padding:18px}
    .avatar-profile-copy h2{font-size:38px}
    .avatar-profile-copy p{margin-top:18px;font-size:15px;line-height:1.45}
    .film-hero{height:92svh;min-height:500px}
    .film-heading{left:18px;right:18px;bottom:28px}
    .film-heading h1{font-size:clamp(42px,15vw,70px)}
    .film-heading p{margin-top:14px}
    .film-shot-wide,.film-shot-full,.film-shot-extra{height:62svh;min-height:420px}
    .film-pair{grid-template-columns:1fr;min-height:0}
    .film-pair .film-shot,.film-pair .film-shot:not(.film-shot-tall){height:68svh;min-height:460px}
    .film-description{padding:48px 18px}
    .film-description p{font-size:18px}
    .film-embed{width:calc(100% - 24px)}
    .video-project-inner{width:calc(100% - 24px);padding:76px 0 40px}
    .video-project-inner>p{margin-top:28px;font-size:18px}

    #amodal,#viewer{top:var(--mobile-bar);left:0}
    .album-glass-layer{width:100%}
    .album-glass-art{width:100vw}
    #amodal .wrapx::before{width:100%;background:rgba(20,20,20,.76)}
    .album-rail,.viewer-panel{
      width:100%;height:100%;padding:22px 18px;border-radius:0;
    }
    .album-rail{background:transparent}
    .viewer-panel{background:rgba(20,20,20,.82)}
    #amodal h2{font-size:34px}
  }
  @media (hover:none){
    .sq .cap{transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    .page.on,.fullscreen-project.on{animation:none}
    .discord-popover[open]{animation:none}
    #cur{transition:none}
    .avatar-gallery-photo{transition:none}
    .sq img,.work-cat>img,.media-thumb,.media-item-meta,.side,.social-link{transition:none}
  }