:root{
  color-scheme:dark;
  --bg:#05070b;
  --bg-soft:#09111d;
  --surface:rgba(10,17,29,.78);
  --surface-strong:rgba(14,23,39,.92);
  --text:#e0ebf9;
  --muted:#90a2bb;
  --accent:#78b6ff;
  --accent-strong:#9fd0ff;
  --border:rgba(255,255,255,.08);
  --shadow:0 24px 60px rgba(0,0,0,.34);
  --page-width:940px;
  --hero-image:url("asset/mainbgdark.png");
  --hero-image-opacity:.22;
}
body.light{
  color-scheme:light;
  --bg:#dfeffd;
  --bg-soft:#edf6ff;
  --surface:rgba(255,255,255,.66);
  --surface-strong:rgba(245,250,255,.92);
  --text:#102034;
  --muted:#516680;
  --accent:#2f7de1;
  --accent-strong:#1f64bd;
  --border:rgba(16,32,52,.1);
  --shadow:0 20px 40px rgba(32,72,120,.12);
  --hero-image:url("asset/mainbglight.png");
  --hero-image-opacity:.18;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:radial-gradient(circle at top,rgba(120,182,255,.07),transparent 34%),radial-gradient(circle at bottom,rgba(120,182,255,.045),transparent 28%),linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  transition:background-color .35s ease,color .35s ease;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 18% 15%,rgba(123,184,255,.075),transparent 24%),radial-gradient(circle at 82% 20%,rgba(123,184,255,.05),transparent 22%),radial-gradient(circle at 50% 84%,rgba(123,184,255,.04),transparent 28%);
  opacity:.55;
}
.page-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(180deg,rgba(5,7,11,.03),rgba(5,7,11,.14)),var(--hero-image);
  background-size:cover,cover;
  background-position:center center;
  background-repeat:no-repeat,no-repeat;
  opacity:var(--hero-image-opacity);
  filter:saturate(1) contrast(1.02) brightness(1.03);
}
.shell{width:min(100% - 1.15rem,var(--page-width));margin-inline:auto}
.ambient,.grain{position:fixed;inset:0;pointer-events:none}
.ambient-a{background:linear-gradient(115deg,rgba(123,184,255,.03),transparent 30%,transparent 70%,rgba(123,184,255,.02));mix-blend-mode:screen}
.ambient-b{background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.03),transparent 42%);filter:blur(10px)}
.grain{
  opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);
  background-size:22px 22px;
  mix-blend-mode:overlay;
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(18px);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.95rem 0;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.logo{width:34px;height:34px;object-fit:contain;display:block}
nav{display:flex;align-items:center;justify-content:center;gap:1.05rem;flex-wrap:wrap}
nav a,.social-card{
  color:var(--muted);
  text-decoration:none;
  transition:color .2s ease,transform .2s ease,background-color .2s ease,border-color .2s ease;
}
nav a:hover,nav a:focus-visible,.social-card:hover,.social-card:focus-visible{color:var(--text)}
nav a:focus-visible,.social-card:focus-visible,.theme-toggle:focus-visible,.button:focus-visible,.work-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-toggle{
  width:2.75rem;height:2.75rem;flex:0 0 auto;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-strong);
  color:var(--text);
  cursor:pointer;
  box-shadow:var(--shadow);
}
@media (max-width: 900px){
  .topbar-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand toggle"
      "nav nav";
    gap:.55rem .75rem;
    padding:.75rem 0 .82rem;
  }
  .brand{
    grid-area:brand;
    min-width:0;
  }
  .brand span{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  nav{
    grid-area:nav;
    justify-content:flex-start;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
    -ms-overflow-style:none;
    gap:.85rem;
  }
  nav::-webkit-scrollbar{display:none;}
  .theme-toggle{
    grid-area:toggle;
    justify-self:end;
    width:2.45rem;
    height:2.45rem;
  }
  .logo{width:30px;height:30px;}
}
@media (max-width: 560px){
  .topbar-inner{
    gap:.45rem .65rem;
  }
  nav{
    gap:.7rem;
    font-size:.94rem;
  }
}
main{position:relative;z-index:1}
.hero{
  min-height:calc(100vh - 86px);
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(220px,.78fr);
  align-items:center;
  gap:clamp(1.3rem,3.8vw,2.15rem);
  padding:clamp(3.1rem,8vw,5.8rem) 0 clamp(2.4rem,6vw,3.8rem);
}
.hero-copy{max-width:44rem}
.eyebrow,.section-label{
  margin:0 0 .65rem;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
}
h1,h2,h3,p{margin-top:0}
h1{
  margin-bottom:1rem;
  font-size:clamp(3rem,8.8vw,6.3rem);
  line-height:.94;
  letter-spacing:-.06em;
}
.hero-desc{max-width:36rem;margin-bottom:1.4rem;color:var(--muted);font-size:1.01rem}
.hero-tags span,.chip-list li,.work-tags span{
  display:inline-flex;
  align-items:center;
  min-height:2.35rem;
  padding:.52rem .9rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--border);
  color:var(--text);
}
.hero-visual{position:relative;display:grid;place-items:center;margin:0}
.hero-glow{
  position:absolute;
  inset:14%;
  border-radius:40px;
  background:radial-gradient(circle at 50% 30%,rgba(122,184,255,.18),transparent 56%);
  filter:blur(12px);
}
.hero-intro{
  margin-bottom:1.35rem;
  max-width:38rem;
  color:var(--text);
  font-size:1rem;
}
.hero{
  position:relative;
  isolation:isolate;
}
.hero-copy,
.hero-visual{
  position:relative;
  z-index:1;
}
.hero-copy{
  padding:0;
  max-width:44rem;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
.hero-copy .eyebrow{color:var(--text);opacity:.88}
.hero-copy h1{color:var(--text)}
.hero-copy .hero-desc,
.hero-copy .hero-intro{color:var(--text);text-shadow:0 1px 0 rgba(0,0,0,.12)}
.hero-copy .hero-desc{opacity:.94}
.hero-copy .hero-intro{opacity:.98}
.profile-card{
  position:relative;
  width:min(100%,320px);
  aspect-ratio:1/1;
  padding:14px;
  border-radius:34px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-strong) 92%,transparent),color-mix(in srgb,var(--surface) 88%,transparent));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.profile-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 22% 22%,rgba(255,255,255,.12),transparent 20%),radial-gradient(circle at 78% 78%,rgba(122,184,255,.15),transparent 28%);
  pointer-events:none;
}
.profile-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:24px;
  filter:saturate(.98) contrast(1.03);
}
.section{padding:0 0 4rem;scroll-margin-top:112px}
.section-head{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1.25rem}
h2{
  font-size:clamp(1.8rem,4vw,2.75rem);
  line-height:1.05;
  letter-spacing:-.04em;
  margin-bottom:0;
  max-width:20ch;
}
.panel,.social-card,.work-card,.animation-card,.writing-card{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}
.panel{border-radius:28px;padding:clamp(1.2rem,2.8vw,1.9rem)}
.split-panel{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(220px,.85fr);
  gap:1.15rem;
  align-items:start;
}
.split-panel p:last-child{margin-bottom:0}
.meta-card{
  padding:1.1rem;
  border-radius:22px;
  background:color-mix(in srgb,var(--surface-strong) 86%,transparent);
  border:1px solid var(--border);
}
.meta-card h3{
  margin-bottom:1rem;
  font-size:1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-strong);
}
.chip-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.95rem;
  grid-auto-flow:dense;
}
.work-card,
.work-card--wide{
  grid-column:span 4;
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:zoom-in;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.work-card--wide{grid-column:span 6}
.work-card:hover{transform:translateY(-2px);border-color:rgba(120,182,255,.22)}
.work-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:radial-gradient(circle at 18% 20%,rgba(122,184,255,.24),transparent 28%),radial-gradient(circle at 78% 74%,rgba(255,255,255,.08),transparent 22%),linear-gradient(145deg,rgba(9,17,29,.92),rgba(44,81,136,.3));
}
.work-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.24));
  pointer-events:none;
}
.work-card.is-missing .work-media::before{
  content:attr(data-label);
  position:absolute;
  inset:1rem;
  z-index:1;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  font-size:.92rem;
}
.work-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .35s ease,opacity .2s ease;
}
.work-card:hover .work-image,.work-card:focus-visible .work-image{transform:scale(1.04)}
.zoom-badge{
  position:absolute;
  right:.65rem;
  bottom:.65rem;
  width:2rem;
  height:2rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(7,10,16,.56);
  backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  color:var(--text);
  z-index:1;
  transition:transform .2s ease;
}
.zoom-badge svg{width:1rem;height:1rem;fill:currentColor}
.work-meta{padding:.95rem 1rem 1.05rem}
.work-meta h3{margin-bottom:.35rem;font-size:1.02rem}
.work-meta p{margin-bottom:.75rem;color:var(--muted);font-size:.94rem}
.work-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.work-tags span{font-size:.82rem;padding:.35rem .68rem}

.animation-grid,
.writing-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.95rem;
}
.animation-card,
.animation-card--wide,
.writing-card{
  grid-column:span 6;
  border-radius:24px;
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease;
}
.animation-card--wide{grid-column:span 12}
.animation-card:hover,.writing-card:hover{transform:translateY(-2px);border-color:rgba(120,182,255,.22)}
.video-frame{
  width:100%;
  aspect-ratio:var(--ratio,16 / 9);
  background:#000;
  overflow:hidden;
}
.video-frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
.animation-meta,.writing-meta{padding:.95rem 1rem 1.05rem}
.animation-meta h3,.writing-meta h3{margin:0 0 .35rem;font-size:1rem}
.animation-meta p,.writing-meta p{margin:0;color:var(--muted);font-size:.93rem}
.writing-preview{
  display:grid;
  gap:.8rem;
}
.writing-preview .pdf-chip{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:.4rem .65rem;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  background:color-mix(in srgb,var(--surface-strong) 82%,transparent);
  font-size:.82rem;
}
.writing-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.9rem;
}
.writing-card .button{
  min-height:2.5rem;
  padding:.6rem .95rem;
}

.empty-note{margin:0;color:var(--muted)}
.update-item{
  display:grid;
  gap:.7rem;
  padding:1rem 0;
  border-top:1px solid var(--border);
}
.update-item:first-child{border-top:0;padding-top:0}
.blog-card{
  display:grid;
  gap:.75rem;
  padding:1.05rem 1.05rem 1rem;
  border:1px solid var(--border);
  border-radius:22px;
  background:color-mix(in srgb,var(--surface-strong) 84%,transparent);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease;
}
.blog-card:hover,
.blog-card:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(120,182,255,.22);
}
.blog-card__label{
  margin:0;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
}
.blog-card h3{margin:0;font-size:1.05rem}
.blog-card p{margin:0;color:var(--muted)}
.blog-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  justify-content:space-between;
}
.blog-card__meta small{color:var(--muted)}
.blog-card .button{min-height:2.4rem;padding:.55rem .9rem}

.blog-modal{
  position:fixed;
  inset:0;
  z-index:65;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(4,7,12,.82);
  backdrop-filter:blur(10px);
}
.blog-modal[hidden]{display:none}
.blog-modal__frame{
  width:min(92vw,680px);
  max-height:min(84vh,760px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  overflow:hidden;
  background:rgba(7,11,17,.95);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.blog-modal__bar,
.blog-modal__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1rem;
  color:var(--text);
}
.blog-modal__bar{border-bottom:1px solid rgba(255,255,255,.08)}
.blog-modal__footer{border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}
.blog-modal__title{font-weight:700}
.blog-modal__body{
  overflow:auto;
  padding:1rem 1.05rem 1.15rem;
  color:var(--text);
  line-height:1.75;
}
.blog-modal__timeline{
  margin:.2rem 0 1rem;
  color:var(--accent);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.blog-modal__body p{margin:0 0 1rem;color:var(--text)}
.blog-modal__close{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:999px;
  padding:.5rem .8rem;
  cursor:pointer;
}
.social-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;
}
.social-card{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.85rem .9rem;
  border-radius:18px;
  padding:1rem 1.05rem;
}
.social-icon{
  width:2.2rem;
  height:2.2rem;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-strong) 82%,transparent);
  border:1px solid var(--border);
  color:var(--text);
  grid-row:span 2;
}
.social-icon svg{width:1.15rem;height:1.15rem;fill:currentColor}
.social-card span{font-weight:600}
.social-card small{color:var(--muted)}

.visitor-panel{display:grid;gap:1rem}
.visitor-status{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.visitor-footnote,.visitor-note{margin-bottom:0;color:var(--muted)}
.visitor-graph-wrap{
  padding:1rem;
  border-radius:22px;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface-strong) 88%,transparent);
}
#visitorChart{width:100%;height:120px;display:block}
.visitor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.8rem;
}
.visitor-stat{
  padding:1rem;
  border-radius:20px;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface-strong) 86%,transparent);
}
.visitor-stat span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:.35rem;
}
.visitor-stat strong{
  display:block;
  font-size:clamp(1.3rem,2.2vw,1.85rem);
  line-height:1;
  letter-spacing:-.05em;
}

.contact-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.5rem;
}
.contact-panel p{max-width:52ch;margin-bottom:0}
.contact-panel a{color:var(--text)}
.contact-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.8rem;
  padding:.72rem 1.15rem;
  border-radius:999px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  background:color-mix(in srgb,var(--surface-strong) 92%,transparent);
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
}
.button:hover{transform:translateY(-1px)}
.button.primary{background:linear-gradient(180deg,rgba(122,184,255,.24),rgba(122,184,255,.12));border-color:rgba(122,184,255,.3)}
.button.secondary{background:color-mix(in srgb,var(--surface-strong) 88%,transparent)}
.site-footer{position:relative;z-index:1}
.footer{display:flex;justify-content:flex-start;padding:1.5rem 0 2.1rem;color:var(--muted)}
.footer p{margin:0}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

.zoom-modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(4,7,12,.82);
  backdrop-filter:blur(10px);
}
.zoom-modal[hidden]{display:none}
.zoom-modal__frame{
  width:min(94vw,1100px);
  height:min(92vh,860px);
  max-height:92vh;
  background:rgba(7,11,17,.82);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.zoom-modal__bar,.zoom-modal__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1rem;
  color:var(--text);
}
.zoom-modal__bar{border-bottom:1px solid rgba(255,255,255,.08)}
.zoom-modal__footer{border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}
.zoom-modal__title{font-weight:600}
.zoom-controls{display:flex;gap:.5rem;flex-wrap:wrap}
.zoom-modal__close,.zoom-modal__control,.writing-actions .button{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:999px;
  padding:.5rem .8rem;
  cursor:pointer;
}
.zoom-modal__stage{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:1rem;
  touch-action:none;
  min-height:0;
  cursor:default;
}
.zoom-modal__stage.is-zoomed{cursor:grab}
.zoom-modal__stage.is-dragging{cursor:grabbing}
.zoom-modal__viewport{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  touch-action:none;
}
.zoom-modal__image{
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  transform-origin:center center;
  transition:transform .12s ease;
  user-select:none;
  -webkit-user-drag:none;
}

.pdf-modal{
  position:fixed;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(4,7,12,.84);
  backdrop-filter:blur(10px);
}
.pdf-modal[hidden]{display:none}
.pdf-modal__frame{
  width:min(96vw,1100px);
  height:min(92vh,920px);
  background:rgba(7,11,17,.92);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.pdf-modal__bar,.pdf-modal__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1rem;
  color:var(--text);
}
.pdf-modal__bar{border-bottom:1px solid rgba(255,255,255,.08)}
.pdf-modal__footer{border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}
.pdf-modal__title{font-weight:600}
.pdf-modal__close,.pdf-modal__open{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:999px;
  padding:.5rem .8rem;
  cursor:pointer;
  text-decoration:none;
}
.pdf-modal__stage{
  width:100%;
  height:100%;
  background:#000;
}
.pdf-modal__stage iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

@media (max-width:940px){
  .section{scroll-margin-top:170px}
  .topbar-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      'brand toggle'
      'nav nav';
    align-items:center;
    justify-content:stretch;
    gap:.45rem .75rem;
    padding:.72rem 0 .58rem;
  }
  .brand{grid-area:brand;width:auto;justify-content:flex-start;min-width:0}
  nav{
    grid-area:nav;
    width:100%;
    justify-content:flex-start;
    gap:.75rem;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:.1rem;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap}
  .theme-toggle{grid-area:toggle;justify-self:end;margin-left:0}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:4rem}
  .hero-copy{max-width:100%}
  .hero-visual{order:2}
  .split-panel{grid-template-columns:1fr}
  .work-card,.work-card--wide,.animation-card,.animation-card--wide,.writing-card{grid-column:span 6}
  .social-grid{grid-template-columns:1fr}
  .visitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-panel{flex-direction:column;align-items:flex-start}
  .contact-actions{width:100%;justify-content:flex-start}
}
@media (max-width:640px){
  .shell{width:min(100% - 1rem,var(--page-width))}
  .section{scroll-margin-top:240px}
  .topbar-inner{
    gap:.35rem .6rem;
    padding:.62rem 0 .5rem;
  }
  .brand{gap:.7rem}
  .logo{width:30px;height:30px}
  .theme-toggle{width:2.45rem;height:2.45rem}
  nav{gap:.6rem;max-width:100%}
  nav a{font-size:.9rem}
  .chip-list li{width:100%;justify-content:center}
  .work-grid,.animation-grid,.writing-grid{grid-template-columns:1fr}
  .work-card,.work-card--wide,.animation-card,.animation-card--wide,.writing-card{grid-column:auto}
  .panel,.social-card{border-radius:20px}
  .profile-card{border-radius:28px}
  .profile-image{border-radius:20px}
  .visitor-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* Viewer fix: center image properly so zoom/pan work from the middle */
.zoom-modal__viewport{
  position:relative;
}
.zoom-modal__image{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate3d(-50%, -50%, 0) scale(1);
  transform-origin:center center;
  will-change:transform;
}

/* Play / mini game */
.play-panel{
  display:grid;
  gap:1rem;
}
.play-copy{
  display:grid;
  gap:1rem;
  justify-items:center;
  text-align:center;
}
.play-note{
  margin:0;
  color:var(--muted);
  max-width:60ch;
}
.play-collection{
  display:grid;
  gap:1rem;
}
.mini-game{
  display:grid;
  gap:1rem;
  padding:1rem;
  border-radius:24px;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface-strong) 80%,transparent);
}
.mini-game__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.mini-game__label{
  margin:0 0 .35rem;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
}
.mini-game h3{
  margin:0;
  font-size:1.08rem;
}
.play-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
}
.play-stats--compact{
  min-width:min(100%,260px);
}
.play-stat{
  padding:1rem;
  border-radius:20px;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface-strong) 86%,transparent);
}
.play-stat span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:.35rem;
}
.play-stat strong{
  display:block;
  font-size:1.5rem;
  line-height:1;
  letter-spacing:-.04em;
}
.play-layout,
.mini-play-layout{
  display:grid;
  grid-template-columns:minmax(240px,320px);
  justify-content:center;
  justify-items:center;
  gap:1rem;
  align-items:center;
}
.puzzle-board,
.mini-board{
  display:grid;
  gap:.65rem;
  width:100%;
  max-width:320px;
}
.puzzle-board{
  grid-template-columns:repeat(3,minmax(0,1fr));
  aspect-ratio:1 / 1;
}
.mini-board{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.puzzle-tile,
.mini-tile{
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(122,184,255,.20),rgba(122,184,255,.08));
  color:var(--text);
  box-shadow:var(--shadow);
  font:inherit;
  font-weight:700;
  font-size:clamp(1.2rem,3vw,1.8rem);
  cursor:pointer;
  display:grid;
  place-items:center;
  min-height:72px;
  user-select:none;
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease;
}
.mini-tile{
  min-height:98px;
  font-size:clamp(1rem,2.4vw,1.28rem);
  cursor:grab;
  touch-action:none;
  text-align:center;
  padding:.8rem;
}
.puzzle-tile:hover,
.mini-tile:hover{
  transform:translateY(-1px);
  border-color:rgba(120,182,255,.24);
}
.mini-tile.is-dragging{
  opacity:.55;
  transform:scale(.97);
  cursor:grabbing;
}
.puzzle-tile:focus-visible,
.mini-tile:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.puzzle-empty{
  background:transparent;
  box-shadow:none;
  border:1px dashed rgba(120,182,255,.18);
}
.puzzle-board.is-solved .puzzle-tile:not(.puzzle-empty),
.mini-board.is-solved .mini-tile{
  background:linear-gradient(180deg,rgba(122,184,255,.28),rgba(122,184,255,.14));
}
.play-actions{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.play-actions .button{
  min-width:120px;
}
@media (max-width: 940px){
  .play-layout,
  .mini-play-layout{
    grid-template-columns:1fr;
  }
  .puzzle-board,
  .mini-board{
    max-width:100%;
  }
}



/* === V8: Marquee and Draw For Me === */
.site-marquee{
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(127,127,127,.15);
  border-bottom: 1px solid rgba(127,127,127,.15);
  backdrop-filter: blur(6px);
  color: var(--text-color, inherit);
  opacity: .9;
}
.marquee-top{ margin-top: 0; }
.marquee-bottom{ margin-top: 2rem; }
.marquee-track{
  display: flex;
  width: max-content;
  gap: 3rem;
  padding: .65rem 1rem;
  will-change: transform;
  animation: deftrial-marquee 90s linear infinite;
}
.site-marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-item{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  letter-spacing: .08em;
  font-size: .92rem;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes deftrial-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.topbar .site-marquee{
  border-top:0;
  background:color-mix(in srgb,var(--bg) 64%,transparent);
}
.site-footer .marquee-bottom{margin-top:0}
@media (max-width: 900px){
  .marquee-track{animation-duration: 110s; gap: 2.35rem;}
  .marquee-item{font-size:.84rem;}
}
.draw-section{scroll-margin-top:150px}
.draw-panel{
  display:grid;
  gap:1rem;
}
.draw-intro,
.draw-gallery-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.draw-intro h3,
.draw-rules h3,
.draw-gallery h3{
  margin-bottom:.35rem;
}
.draw-intro p,
.draw-status{
  margin:0;
  color:var(--muted);
}
.draw-rules{
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
  background:color-mix(in srgb,var(--surface-strong) 78%,transparent);
}
.draw-rules ul{
  margin:.45rem 0 0;
  padding-left:1.2rem;
  color:var(--muted);
}
.draw-rules li + li{margin-top:.35rem}
.draw-board{
  display:grid;
  gap:.8rem;
}
.draw-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  border:1px solid var(--border);
  border-radius:18px;
  padding:.8rem;
  background:color-mix(in srgb,var(--surface-strong) 82%,transparent);
}
.draw-toolbar label{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:var(--muted);
  font-size:.94rem;
}
.draw-toolbar select,
.draw-toolbar input[type="color"],
.draw-toolbar input[type="range"]{
  accent-color:var(--accent);
}
.draw-toolbar select{
  border:1px solid var(--border);
  border-radius:999px;
  padding:.48rem .7rem;
  background:var(--surface-strong);
  color:var(--text);
}
.draw-toolbar input[type="color"]{
  width:2.6rem;
  height:2.3rem;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.15rem;
  background:var(--surface-strong);
}
#drawCanvas{
  width:100%;
  aspect-ratio:1200 / 760;
  display:block;
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
  touch-action:none;
  cursor:crosshair;
}
.draw-gallery{
  display:grid;
  gap:.75rem;
}
.draw-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:.85rem;
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
  background:var(--surface-strong);
}
.draw-gallery-grid .empty-note{
  grid-column:1 / -1;
}
.draw-gallery-card{
  display:block;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  min-height:132px;
}
.draw-gallery-card img{
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:contain;
  background:#fff;
}
@media (max-width: 640px){
  .draw-intro,
  .draw-gallery-head{
    flex-direction:column;
  }
  .draw-toolbar .button{
    flex:1 1 130px;
  }
}


/* Revision 4 marquee/mobile fixes */

.marquee, .marquee-track {
  animation-duration: 90s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  will-change: transform;
}

@media (max-width: 1024px) {
  .marquee, .marquee-track {
    animation-duration: 120s !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .marquee, .marquee-track {
    animation-play-state: running !important;
  }
}


/* Revision 5: marquee + drawing studio */
.site-marquee{
  touch-action: pan-x;
}
.marquee-track{
  transform: translate3d(0,0,0);
}
.draw-studio{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:1rem;
  align-items:start;
}
.draw-stage{
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
#drawCanvas{
  width:100%;
  height:auto;
  aspect-ratio:1200 / 760;
  display:block;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  cursor:crosshair;
}
.draw-layers{
  border:1px solid var(--border);
  border-radius:18px;
  padding:.85rem;
  background:color-mix(in srgb,var(--surface-strong) 82%,transparent);
}
.draw-layers__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}
.draw-layers__head h3{
  margin:0;
}
.draw-layers__list{
  display:grid;
  gap:.55rem;
}
.layer-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.45rem .5rem;
  align-items:center;
  padding:.7rem .75rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.layer-item.is-active{
  border-color:color-mix(in srgb,var(--accent) 60%, var(--border));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%, transparent) inset;
}
.layer-item__meta{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}
.layer-item__meta input[type="text"]{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-strong);
  color:var(--text);
  padding:.45rem .55rem;
}
.layer-item__controls{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  grid-column:1 / -1;
}
.layer-item__controls button{
  padding:.36rem .55rem;
}
@media (max-width: 980px){
  .draw-studio{
    grid-template-columns:1fr;
  }
  .draw-layers{
    order:2;
  }
}
@media (max-width: 900px){
  .marquee-track{
    gap:4.5rem;
  }
}
@media (max-width: 560px){
  .marquee-item{
    font-size:.8rem;
  }
}


/* Revision 7 add-ons */
.draw-gateway{
  display:grid;
  gap:1rem;
}
.draw-gateway__lead{
  display:grid;
  gap:.75rem;
}
.draw-gateway__lead h3{
  margin:0;
}
.draw-gateway__lead p{
  margin:0;
  color:var(--muted);
  max-width:60ch;
}
.draw-gateway__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.draw-gateway__box{
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
  background:var(--surface);
}
.draw-gateway__box h3{
  margin:0 0 .45rem;
}
.draw-gateway__box ul{
  margin:.2rem 0 0;
  padding-left:1.2rem;
  color:var(--muted);
}
.visitor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
}
.visitor-stat{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  padding:1rem;
  display:grid;
  gap:.35rem;
}
.visitor-stat span{
  color:var(--muted);
  font-size:.94rem;
}
.visitor-stat strong{
  font-size:2rem;
  line-height:1.1;
}
@media (max-width: 760px){
  .draw-gateway__grid{
    grid-template-columns:1fr;
  }
}

/* v104 dynamic scanner/admin safe additions */
.empty-note{color:var(--muted,#9ca3af);padding:1rem}.update-card{border:1px solid rgba(255,255,255,.12);border-radius:1.25rem;padding:1rem;margin:.75rem 0;background:rgba(255,255,255,.045)}.update-card time{display:block;color:var(--muted,#9ca3af);font-size:.82rem;margin-bottom:.35rem}.update-card h3{margin:.1rem 0 .35rem}.inline-link{font-weight:800;text-decoration:none}.visitor-card{border:1px solid rgba(255,255,255,.12);border-radius:1.1rem;padding:1rem;background:rgba(255,255,255,.045)}.visitor-card span{display:block;color:var(--muted,#9ca3af);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.visitor-card strong{display:block;margin-top:.25rem;font-size:clamp(1.25rem,3vw,2rem)}.visitor-card--wide{grid-column:1/-1}.image-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.88);backdrop-filter:blur(12px);padding:24px}.image-modal.is-open{display:flex}.image-modal figure{margin:0;max-width:min(1120px,94vw);max-height:92vh}.image-modal img{display:block;max-width:100%;max-height:82vh;object-fit:contain;border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.5)}.image-modal figcaption{padding:.75rem 0;text-align:center;color:#e5e7eb;font-weight:800}.image-modal__close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(15,23,42,.8);color:#fff;font-size:30px;line-height:1;cursor:pointer}.tile,.mini-tile{touch-action:manipulation}.site-footer .admin-entry{opacity:.55;font-size:.85rem;text-decoration:none}.site-footer .admin-entry:hover{opacity:1}@media(max-width:700px){.visitor-card--wide{grid-column:auto}.image-modal{padding:12px}}

/* v105 stabilization: recursive media, real viewer, puzzle polish, smoother interactions */
html.modal-open,html.modal-open body{overflow:hidden}.topbar,.brand,nav,.theme-toggle,.work-card,.animation-card,.writing-card,.button,.tile,.mini-tile,.video-load,.image-modal__tools,.image-modal__nav,.image-modal__close{user-select:none}.work-card,.writing-card,.tile,.mini-tile,.video-load{cursor:pointer}.work-card.is-missing{opacity:.55}.zoom-badge{pointer-events:none}.image-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.9);backdrop-filter:blur(14px);padding:18px}.image-modal.is-open{display:flex}.image-modal figure{position:relative;margin:0;width:min(1180px,94vw);height:min(860px,92vh);display:grid;grid-template-rows:1fr auto auto;gap:.6rem}.image-modal__stage{min-height:0;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.image-modal__stage.is-panning img{cursor:grabbing!important}.image-modal img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:16px;box-shadow:0 24px 90px rgba(0,0,0,.45);will-change:transform;transition:transform .08s linear;transform-origin:center center}.image-modal figcaption{display:flex;justify-content:space-between;gap:1rem;color:#e5e7eb;align-items:center;text-align:left}.image-modal figcaption strong{font-weight:900}.image-modal figcaption span{color:#aab4c5;font-size:.9rem}.image-modal__close,.image-modal__nav,.image-modal__tools button{border:1px solid rgba(255,255,255,.18);background:rgba(15,23,42,.82);color:#fff;box-shadow:0 18px 60px rgba(0,0,0,.28)}.image-modal__close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:999px;font-size:30px;line-height:1;z-index:3}.image-modal__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:999px;font-size:42px;line-height:1;z-index:3}.image-modal__prev{left:16px}.image-modal__next{right:16px}.image-modal__tools{display:flex;justify-content:center;gap:.55rem}.image-modal__tools button{border-radius:999px;padding:.65rem 1rem;font-weight:900}.video-frame{min-height:220px;display:grid;place-items:center;overflow:hidden}.video-load{width:100%;height:100%;min-height:220px;border:0;background:radial-gradient(circle at 50% 40%,rgba(125,211,252,.22),rgba(15,23,42,.74));color:inherit;display:grid;place-items:center;align-content:center;gap:.25rem;text-align:center}.video-load span{display:grid;place-items:center;width:58px;height:58px;border-radius:999px;background:rgba(255,255,255,.12);font-size:1.5rem}.video-load strong{font-size:1rem}.video-load small{max-width:80%;color:var(--muted,#9ca3af);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.update-card .update-full{margin-top:.75rem;white-space:pre-wrap;color:var(--muted,#a7b0c0);line-height:1.65;border-top:1px solid rgba(255,255,255,.1);padding-top:.75rem}.update-more{margin-right:.75rem}.visitor-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.visitor-card--wide{grid-column:1/-1}.puzzle-board,.mini-board{touch-action:manipulation}.tile,.mini-tile{transition:transform .15s ease,border-color .15s ease,background .15s ease}.tile:hover,.mini-tile:hover,.mini-tile.is-selected{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent,#7dd3fc) 60%,rgba(255,255,255,.18));}.mini-tile.is-selected{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#7dd3fc) 32%,transparent) inset}.tile.empty{cursor:default;opacity:.5}.empty-note{border:1px dashed rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.035)}@media(max-width:700px){.image-modal{padding:10px}.image-modal figure{width:96vw;height:90vh}.image-modal__nav{width:40px;height:54px;font-size:34px}.image-modal__prev{left:8px}.image-modal__next{right:8px}.image-modal__close{top:10px;right:10px}.image-modal figcaption{font-size:.9rem;flex-direction:column;align-items:flex-start;gap:.15rem}.video-frame,.video-load{min-height:180px}}

/* v106 public polish: tighter header, cleaner blog/PDF/video, finished modal controls */
html{scroll-padding-top:118px}
.section{scroll-margin-top:118px}
.site-marquee{min-height:28px;opacity:.78;border-block-color:color-mix(in srgb,var(--border) 70%,transparent)}
.marquee-track{animation-duration:135s!important;gap:2.6rem!important;padding:.28rem 0!important}
.marquee-item,.marquee-track span{font-size:.78rem!important;letter-spacing:.18em!important;font-weight:700!important;opacity:.82}
.site-marquee::before,.site-marquee::after{content:"";position:absolute;top:0;bottom:0;width:72px;z-index:2;pointer-events:none}.site-marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}.site-marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.update-card{display:grid;gap:.68rem}.update-kicker{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem}.update-kicker span{border:1px solid var(--border);border-radius:999px;padding:.12rem .5rem}.update-card p.update-excerpt{margin:0;color:var(--muted)}.update-card.is-expanded .update-excerpt{display:none}.update-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.button.tiny{display:inline-flex;align-items:center;justify-content:center;min-height:2.15rem;padding:.42rem .78rem;border-radius:999px;font-size:.84rem;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);font-weight:800;cursor:pointer;text-decoration:none}.button.ghost{background:transparent}.button.tiny:hover,.button.ghost:hover{border-color:color-mix(in srgb,var(--accent) 44%,var(--border));transform:translateY(-1px)}.update-card .update-full{margin-top:.15rem;padding-top:.82rem;border-top:1px solid var(--border);color:var(--text);background:color-mix(in srgb,var(--surface) 68%,transparent);border-radius:0 0 16px 16px;line-height:1.74}.writing-actions{display:flex;gap:.55rem;flex-wrap:wrap;padding:0 1rem 1rem}.writing-card{cursor:default}.writing-card .button{white-space:nowrap}.video-frame{background:linear-gradient(135deg,rgba(120,182,255,.11),rgba(255,255,255,.035));position:relative}.video-frame::after{content:"Click to open in focused player";position:absolute;left:1rem;right:1rem;bottom:.85rem;text-align:center;color:var(--muted);font-size:.78rem;pointer-events:none}.video-load{border:1px solid transparent}.video-load:hover span{transform:scale(1.06)}.video-load span{transition:transform .18s ease}.video-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.88);backdrop-filter:blur(14px);padding:18px}.video-modal.is-open{display:flex}.video-modal__box{width:min(1040px,96vw);max-height:92vh;border:1px solid rgba(255,255,255,.16);border-radius:24px;background:rgba(10,16,28,.94);box-shadow:0 28px 90px rgba(0,0,0,.45);padding:1rem;position:relative;color:#e5e7eb}.video-modal__box h3{margin:0 3rem .7rem 0}.video-modal__close{position:absolute;top:.75rem;right:.75rem;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1;cursor:pointer}.video-modal__stage{border-radius:18px;overflow:hidden;background:#000}.video-modal video{display:block;width:100%;max-height:74vh;background:#000}.video-modal__meta{margin:.7rem 0 0;color:#aab4c5;font-size:.9rem}.image-modal figure{grid-template-rows:1fr auto auto auto}.image-modal__hint{text-align:center;color:#aab4c5;font-size:.84rem}.image-modal__zoom{min-width:4.25rem;text-align:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:.56rem .78rem;font-weight:900}.image-modal__tools{align-items:center;flex-wrap:wrap}.visitor-card--quiet strong{font-size:1.15rem!important}.visitor-card small{display:block;margin-top:.35rem;color:var(--muted);line-height:1.35}.play-panel{scroll-margin-top:130px}.mini-game{overflow:visible}.puzzle-board,.mini-board{user-select:none}.tile,.mini-tile{-webkit-tap-highlight-color:transparent}.empty-note{line-height:1.6}.admin-entry{user-select:none}
@media(max-width:900px){html{scroll-padding-top:150px}.section{scroll-margin-top:150px}.site-marquee{min-height:24px}.marquee-track{animation-duration:160s!important}.marquee-item,.marquee-track span{font-size:.72rem!important}.site-marquee::before,.site-marquee::after{width:42px}.video-modal__box{padding:.75rem;border-radius:20px}.video-modal video{max-height:68vh}.image-modal__hint{display:none}.image-modal__tools button,.image-modal__zoom{padding:.5rem .7rem;font-size:.86rem}.writing-actions{padding:.85rem 1rem 1rem}}
@media(max-width:620px){.site-marquee{display:none}html{scroll-padding-top:116px}.section{scroll-margin-top:116px}.topbar-inner{border-bottom:0}.update-actions,.writing-actions{align-items:stretch}.button.tiny,.writing-actions .button{width:100%}.video-frame::after{display:none}.video-modal{padding:10px}.video-modal__box h3{font-size:1rem}.visitor-card--wide{grid-column:auto}}


/* v107 hotfix + final polish pass */
html{scroll-padding-top:156px}
.section{scroll-margin-top:156px}
.topbar .site-marquee{min-height:22px;opacity:.62}
.site-marquee{background:color-mix(in srgb,var(--panel) 52%,transparent)}
.marquee-track{padding:.18rem 0!important;animation-duration:170s!important}
.marquee-item,.marquee-track span{font-size:.69rem!important;letter-spacing:.16em!important;opacity:.72!important}
.topbar-inner{backdrop-filter:blur(18px)}
.image-modal figure{max-width:min(1180px,94vw)}
.image-modal__stage{height:min(74vh,760px);overflow:hidden;touch-action:none;border-radius:20px;background:rgba(0,0,0,.38)}
.image-modal__stage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;will-change:transform}
.image-modal__nav{opacity:.84;transform:translateY(-50%) scale(.94)}
.image-modal__prev{left:max(14px,calc(50vw - 690px))}
.image-modal__next{right:max(14px,calc(50vw - 690px))}
.image-modal__close{top:18px;right:18px;z-index:5}
.video-modal{padding:24px;overflow:auto}
.video-modal__box{width:min(1040px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:.85rem}
.video-modal__stage{display:flex;align-items:center;justify-content:center;min-height:240px;background:#02030a;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}
.video-modal video{width:auto;max-width:100%;height:auto;max-height:70vh;background:#000;object-fit:contain}
.video-modal__actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.video-modal__meta{text-align:center;opacity:.76;margin:.1rem 0 0}
.video-load{min-height:210px}
.video-frame{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));}
.writing-actions a[target="_blank"]::after{content:" ↗";font-size:.9em;opacity:.78}
.admin-link{opacity:.72}
@media(max-width:900px){html{scroll-padding-top:132px}.section{scroll-margin-top:132px}.video-modal{padding:12px}.video-modal__stage{min-height:180px}.video-modal video{max-height:64vh}.image-modal__stage{height:68vh}.image-modal__nav{top:auto;bottom:18px;transform:none}.image-modal__prev{left:18px}.image-modal__next{right:18px}}
@media(max-width:620px){html{scroll-padding-top:104px}.section{scroll-margin-top:104px}.topbar .site-marquee{display:none}.video-load{min-height:170px}.video-modal__box{width:96vw}.image-modal__tools{gap:.35rem}.image-modal__tools button,.image-modal__zoom{padding:.45rem .55rem}.image-modal__stage{height:62vh;border-radius:16px}}

/* v114 content control, previews, visitor graph */
.more-row{grid-column:1/-1;display:flex;justify-content:center;padding:.85rem 0 .25rem}.more-button{min-width:min(100%,240px);border-radius:999px}.video-frame{position:relative;background:#050812}.video-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;filter:saturate(.95) contrast(1.05);transition:opacity .2s ease,transform .45s ease}.video-frame:hover .video-preview{opacity:.92;transform:scale(1.025)}.video-load{position:relative;z-index:2;background:linear-gradient(180deg,rgba(2,6,23,.18),rgba(2,6,23,.72));backdrop-filter:none}.video-load span{background:rgba(2,6,23,.58);border:1px solid rgba(255,255,255,.2)}.video-frame::after{z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.8)}.visitor-graph-card{display:grid;gap:.65rem}.visitor-chart{width:100%;height:150px;display:block;overflow:visible}.visitor-chart__grid{fill:none;stroke:color-mix(in srgb,var(--muted) 22%,transparent);stroke-width:1;stroke-dasharray:4 6}.visitor-chart__line{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--accent) 24%,transparent))}.visitor-chart circle{fill:var(--surface-strong);stroke:var(--accent);stroke-width:3}.visitor-card small{font-size:.79rem}.visitor-card strong{word-break:break-word}.work-grid,.animation-grid,.writing-grid{align-items:stretch}.animation-card,.work-card,.writing-card{content-visibility:auto;contain-intrinsic-size:320px}.site-marquee{opacity:.78}.site-marquee:hover .marquee-track{animation-play-state:paused}@media(max-width:700px){.more-row{padding:.6rem 0}.more-button{width:100%}.video-preview{opacity:.88}.visitor-chart{height:128px}}

/* v114 public-ready formatting pass */
.video-load small{letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;color:rgba(226,232,240,.78)}
.video-modal__actions{justify-content:flex-end}.video-modal__meta{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}.writing-actions{padding-top:.25rem}.writing-actions .pdf-read{min-width:150px}.visitor-chart__fill{fill:color-mix(in srgb,var(--accent) 14%,transparent)}.visitor-chart__label{fill:var(--muted);font-size:11px;font-weight:700}.visitor-chart__label--end{text-anchor:end}.visitor-graph-card small{max-width:70ch}.image-modal__stage{cursor:zoom-in}.image-modal__stage.is-panning{cursor:grabbing}.image-modal__tools button[data-action="actual"]{min-width:4.25rem}.more-button::after{content:" ↓"}.more-button[aria-expanded="true"]::after{content:" ↑"}@media(max-width:620px){.visitor-chart__label{font-size:10px}.video-modal__actions{align-items:stretch}.video-modal__actions .button{width:100%}.writing-actions .pdf-read{width:100%}}


/* v114 public-ready reliability polish */
.empty-note { min-height: 1.5rem; }
.visitor-card--wide { grid-column: 1 / -1; }
.video-frame video.video-preview { opacity: .62; object-fit: cover; }
.video-frame:hover video.video-preview { opacity: .9; }
.work-meta h3, .animation-meta h3, .writing-meta h3 { text-transform: none; }

/* v115 archive and public-ready refinements */
.section-head{align-items:flex-end;gap:18px}
.section-link{font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:color-mix(in srgb,var(--panel) 80%,transparent);box-shadow:var(--shadow-soft)}
.section-link:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.draw-gateway--portal .draw-gateway__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.archive-body{min-height:100vh;background:var(--bg);color:var(--text)}
.archive-topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.archive-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.archive-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.archive-nav a{color:var(--muted);text-decoration:none;font-weight:800;font-size:.84rem;border:1px solid transparent;border-radius:999px;padding:9px 12px}
.archive-nav a:hover,.archive-nav a[aria-current="page"]{color:var(--text);border-color:var(--line);background:var(--panel)}
.archive-main{padding-top:44px;padding-bottom:80px}
.archive-hero{border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 90%,transparent),color-mix(in srgb,var(--panel-2) 72%,transparent));border-radius:var(--radius-lg);padding:clamp(24px,4vw,46px);box-shadow:var(--shadow);margin-bottom:24px;position:relative;overflow:hidden}
.archive-hero:before{content:"";position:absolute;inset:auto -10% -50% 50%;height:180px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%);pointer-events:none}
.archive-hero h1{font-size:clamp(2.2rem,7vw,5.8rem);line-height:.9;margin:8px 0 16px;letter-spacing:-.06em}
.archive-hero p{max-width:780px;color:var(--muted);font-size:1.05rem;line-height:1.8}
.archive-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.archive-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}.archive-filter .is-active{background:var(--text);color:var(--bg)}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.archive-grid--docs{grid-template-columns:repeat(2,minmax(0,1fr))}
.archive-card,.archive-post-card{border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--panel) 86%,transparent);box-shadow:var(--shadow-soft);overflow:hidden}.archive-card[hidden]{display:none!important}
.archive-media{display:block;aspect-ratio:4/3;background:color-mix(in srgb,var(--panel-2) 70%,transparent);overflow:hidden}.archive-card--image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.archive-card--image:hover img{transform:scale(1.03)}
.archive-video-frame{aspect-ratio:16/10}.archive-video-frame video{width:100%;height:100%;object-fit:contain;background:#05070b;display:block}.archive-card__body{padding:16px}.archive-card__body h2,.archive-post-card h2{margin:6px 0 8px;font-size:1.18rem;line-height:1.2}.archive-card__body p,.archive-post-card p{color:var(--muted);line-height:1.65;margin:0 0 14px}.archive-card__kicker{color:var(--muted);font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.archive-doc-icon{margin:16px 16px 0;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;border:1px solid var(--line);font-weight:900;color:var(--text);background:linear-gradient(135deg,var(--panel-2),var(--panel))}.archive-list{display:grid;gap:14px}.archive-post-card{padding:20px}.archive-post-card time,.archive-post-detail time{display:inline-block;color:var(--muted);font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}.archive-post-card h2 a{color:var(--text);text-decoration:none}.archive-post-card h2 a:hover{text-decoration:underline}.post-body{max-width:880px;margin:0 auto}.post-body p{font-size:1.05rem;line-height:1.9;color:var(--muted)}.post-body p:first-child{color:var(--text)}
@media(max-width:900px){.archive-grid,.archive-grid--docs{grid-template-columns:1fr 1fr}.archive-topbar__inner{align-items:flex-start;flex-direction:column}.archive-nav{justify-content:flex-start}.section-head{align-items:flex-start}}
@media(max-width:620px){.archive-grid,.archive-grid--docs{grid-template-columns:1fr}.archive-hero h1{font-size:2.4rem}.archive-main{padding-top:22px}.section-link{width:100%;text-align:center}.draw-gateway--portal .draw-gateway__actions .button{width:100%;justify-content:center}}

/* v116 public finalization polish */
:root{scroll-padding-top:132px}
.hero{grid-template-columns:minmax(0,1.12fr) minmax(220px,.72fr);gap:clamp(1.5rem,4vw,4rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.35rem}.hero-actions .button{min-height:42px}.hero-visual .profile-card{max-width:min(300px,72vw);margin-inline:auto}.profile-image{aspect-ratio:1/1;object-fit:cover}
.site-marquee{min-height:28px;opacity:.72;border-block-color:rgba(255,255,255,.055)}.marquee-track{animation-duration:120s!important}.marquee-item,.marquee-track span{font-size:.78rem;letter-spacing:.22em;opacity:.82}.topbar .site-marquee{background:rgba(5,7,11,.38)}.site-footer .marquee-bottom{display:none}.archive-body .site-marquee{display:none!important}
.section{scroll-margin-top:150px}.section-head{align-items:end}.section-link{white-space:nowrap}.admin-entry{font-size:.72rem;opacity:.48;text-decoration:none;margin-left:.45rem}.admin-entry:hover,.admin-entry:focus-visible{opacity:.88;text-decoration:underline}.footer{gap:.45rem;align-items:center;flex-wrap:wrap}
.work-grid,.archive-grid--art{align-items:stretch}.work-card,.archive-card--image{overflow:hidden}.work-card .work-media,.archive-card--image .archive-media{aspect-ratio:4/3;display:block;background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.06)}.work-card--wide .work-media{aspect-ratio:16/9}.work-image,.archive-card--image img{width:100%;height:100%;object-fit:cover}.archive-card__body{display:grid;gap:.48rem}.archive-card__body h2{line-height:1.15}.archive-card__kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.archive-card__action{width:max-content;pointer-events:none}.archive-filter{position:sticky;top:82px;z-index:3;backdrop-filter:blur(18px);background:color-mix(in srgb,var(--bg) 74%,transparent);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:.55rem;margin-bottom:1.1rem}
.video-frame,.archive-video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,rgba(120,182,255,.09),rgba(160,120,255,.07));cursor:pointer}.video-preview,.archive-video-frame video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.04);opacity:.82}.video-frame::after,.archive-video-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 34%,rgba(0,0,0,.22) 100%);pointer-events:none}.archive-play-badge,.video-load span{position:relative;z-index:2}.archive-play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:rgba(8,12,22,.72);border:1px solid rgba(255,255,255,.22);box-shadow:0 16px 36px rgba(0,0,0,.32);font-size:1.1rem}.archive-card--video:hover .archive-play-badge{transform:translate(-50%,-50%) scale(1.06)}.video-modal__box{width:min(980px,94vw);max-height:92vh}.video-modal__stage{display:grid;place-items:center;background:#02040a;border-radius:18px;overflow:hidden}.video-modal__stage video{width:100%;max-height:72vh;object-fit:contain;background:#02040a}.video-modal__actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:.85rem}.archive-video-modal .video-modal__box h3{margin-right:2rem}
.writing-card,.archive-card--document{min-height:100%;}.archive-doc-icon{display:grid;place-items:center;min-height:120px;border-radius:18px;background:linear-gradient(135deg,rgba(120,182,255,.12),rgba(160,120,255,.08));border:1px solid rgba(255,255,255,.07);font-weight:800;letter-spacing:.18em;color:var(--text)}.archive-doc-meta{display:flex;gap:.5rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem}.archive-doc-meta span{border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.18rem .52rem;background:rgba(255,255,255,.035)}
.post-meta-line{display:flex;gap:.75rem;flex-wrap:wrap;color:var(--muted);margin:.7rem 0 1rem}.post-body{max-width:860px;margin-inline:auto;font-size:1.02rem;line-height:1.82}.post-body p{margin:0 0 1.1rem}.post-nav{max-width:860px;margin:1.2rem auto 0;display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.archive-post-detail{text-align:left;max-width:860px;margin-inline:auto}.archive-post-detail h1{max-width:16ch}
.visitor-graph-card{min-width:0}.visitor-chart{overflow:visible}.visitor-chart__line{stroke-width:2.4}.visitor-chart__grid{opacity:.38}.visitor-card small{line-height:1.45}.visitor-footnote{font-size:.86rem}
.empty-note{border:1px dashed rgba(255,255,255,.14);border-radius:18px;padding:1rem;color:var(--muted);background:rgba(255,255,255,.028)}
.error-page{min-height:70vh;display:grid;place-items:center;text-align:center}.error-page .panel{max-width:640px;margin:auto}.error-page h1{font-size:clamp(3.5rem,12vw,8rem);line-height:.9;margin:.2rem 0}.error-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:1.2rem}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-actions{margin-top:1rem}.hero-visual .profile-card{max-width:min(240px,70vw)}.site-marquee{display:none}.archive-filter{position:static}.archive-card--image .archive-media,.work-card .work-media{aspect-ratio:1/1}.work-card--wide .work-media{aspect-ratio:4/3}.video-modal__stage video{max-height:66vh}.archive-post-detail h1{max-width:100%}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none!important}.video-preview,.archive-video-frame video{opacity:.9}}