:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-bg: #f0f0f2;
    --color-blue: #2832ff;
    --color-accent: #ff31a7;
    --color-primary: #a6ea00;
    --spacing: .25rem;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --footer-height: clamp(60px, 12vh, 120px);
    --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, monospace;
    --cursor-size: 12px;
  }

  :root { interpolate-size: allow-keywords; }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  ::selection { background: var(--color-primary); color: var(--color-black); }

  body {
    background: var(--color-bg);
    color: var(--color-black);
    font-family: var(--font-mono);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }

  @media (min-width: 721px) and (min-height: 501px) {
    html, body, a, button, .cursor-hover, #globe-container canvas, .work-thumb-wrap { 
      cursor: none !important; 
    }
  }

  @media (hover: none), (pointer: coarse) {
    html, body, a, button, .cursor-hover, #globe-container canvas {
      cursor: auto !important;
    }
    .custom-cursor,
    .glitch-mouse-container {
      display: none !important;
    }
  }

  @property --c-w { syntax: '<length>';     inherits: false; initial-value: 12px; }
  @property --c-r { syntax: '<percentage>'; inherits: false; initial-value: 0%;   }

  .custom-cursor {
    position: fixed; left: 0; top: 0;
    width: var(--c-w); height: var(--c-w);
    background-color: var(--color-primary);
    border: 1px solid var(--color-white);
    border-radius: var(--c-r);
    overflow: hidden; pointer-events: none; z-index: 99999;
    transform: translate(-50%, -50%);
    transition:
      --c-w 0.15s cubic-bezier(0.4, 0, 0.2, 1),
      --c-r 0.15s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.08s ease,
      opacity 0.3s ease,
      transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: none;
  }

  .custom-cursor[data-mode] {
    background-color: transparent;
    transition:
      --c-w 0.15s cubic-bezier(0.4, 0, 0.2, 1),
      --c-r 0.15s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.1s ease 0.05s,
      opacity 0.3s ease,
      transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .custom-cursor[data-mode="hover"]   { --c-w: 56px; --c-r: 50%; }
  .custom-cursor[data-mode="zoom-in"] { --c-w: 40px; --c-r: 50%; }
  .custom-cursor[data-mode="zoom-pan"]{ --c-w: 40px; --c-r: 50%; }

  /* pseudo-elements: always in DOM, visibility via opacity */
  .custom-cursor::before,
  .custom-cursor::after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none; opacity: 0;
    transition: opacity 0.06s ease;
  }
  .custom-cursor::before { mix-blend-mode: difference; }
  .custom-cursor[data-mode]::before,
  .custom-cursor[data-mode]::after { transition: opacity 0.1s ease 0.05s; }

  /* hover visuals */
  .custom-cursor[data-mode="hover"]::before {
    opacity: 1; background-color: rgba(255, 49, 167, 0.4);
  }
  .custom-cursor[data-mode="hover"]::after {
    opacity: 1;
    background:
      linear-gradient(var(--color-white), var(--color-white)) center / 40% 1px no-repeat,
      linear-gradient(var(--color-white), var(--color-white)) center / 1px 40% no-repeat;
  }

  /* zoom visuals */
  .custom-cursor[data-mode="zoom-in"]::before,
  .custom-cursor[data-mode="zoom-pan"]::before {
    opacity: 1; background-color: rgba(255, 49, 167, 0.8);
  }
  .custom-cursor[data-mode="zoom-in"]::after,
  .custom-cursor[data-mode="zoom-pan"]::after {
    opacity: 1;
    background: linear-gradient(var(--color-white), var(--color-white)) center / 55% 1px no-repeat;
  }

  /* zoom vertical line (real element for reliable scaleY animation) */
  .cursor-vline {
    position: absolute; left: 50%; top: 50%;
    width: 1px; height: 55%;
    background-color: var(--color-white);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, opacity 0.08s ease;
    pointer-events: none; opacity: 0;
  }
  .custom-cursor[data-mode="zoom-in"] .cursor-vline,
  .custom-cursor[data-mode="zoom-pan"] .cursor-vline { opacity: 1; }
  .custom-cursor[data-mode] .cursor-vline { transition: transform 0.25s ease, opacity 0.12s ease 0.08s; }
  .custom-cursor[data-mode="zoom-pan"] .cursor-vline { transform: translate(-50%, -50%) scaleY(0); }

  .custom-cursor.cursor-pressed { transform: translate(-50%, -50%) scale(0.7); }
  .custom-cursor.cursor-hide { opacity: 0; }

  .glitch-mouse-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; }
  .glitch-mouse-glyph { position: absolute; font-size: 16px; color: #aaaaaa; pointer-events: none; opacity: 0; }
  @keyframes glyphFade {
    0% { opacity: 0; }
    5% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
  }
  .glitch-mouse-glyph.glyph-active { animation: glyphFade 1s ease-out forwards; }

  .page {
    height: min(100vh, 1200px); min-height: 580px; display: flex; flex-direction: row; align-items: stretch;
    justify-content: center; padding: clamp(2rem, 4.5vh, 4rem) calc(var(--spacing) * 8);
  }

  @media (max-width: 720px), (max-height: 500px) {
    .page { height: auto; min-height: 100vh; flex-direction: column; padding: 0; }
  }

  /* --- Page enter animations --- */
  @keyframes pageCardIn {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes pageItemFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes pageItemFadeTo09 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 0.9; transform: translateY(0); }
  }
  @keyframes pageItemFadeTo06 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 0.6; transform: translateY(0); }
  }
  @keyframes pageSocialIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes expandTL {
    from { clip-path: inset(0 100% 100% 0); }
    to { clip-path: inset(0 0 0 0); }
  }

  .page-enter .card {
    animation: pageCardIn 800ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 500ms;
  }
  .page-enter .logo-container {
    animation: pageItemFade 550ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 850ms;
  }
  .page-enter .intro-name {
    animation: pageItemFade 550ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 1000ms;
  }
  .page-enter .intro-line-main {
    animation: pageItemFade 550ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 1150ms;
  }
  .page-enter .intro {
    animation: pageItemFadeTo09 550ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 1300ms;
  }
  .page-enter .intro-line-sub {
    animation: pageItemFadeTo06 550ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 1400ms;
  }
  .page-enter .contact-email {
    animation: pageItemFade 550ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 1500ms;
  }
  .page-enter .card-social {
    animation: pageSocialIn 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 1050ms;
  }
  .page-enter .social-label {
    animation: pageItemFade 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 1350ms;
  }
  .page-enter .social-links .social-icon {
    animation: pageItemFade 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .page-enter .social-links .social-icon:nth-child(1) { animation-delay: 1450ms; }
  .page-enter .social-links .social-icon:nth-child(2) { animation-delay: 1520ms; }
  .page-enter .social-links .social-icon:nth-child(3) { animation-delay: 1590ms; }
  .page-enter .social-links .social-icon:nth-child(4) { animation-delay: 1660ms; }
  .page-enter .social-links .social-icon:nth-child(5) { animation-delay: 1730ms; }
  .page-enter .social-links .social-icon:nth-child(6) { animation-delay: 1800ms; }

  .page-enter .works {
    animation: expandTL 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 400ms;
  }
  .page-enter .tabs-nav {
    animation: expandTL 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 700ms;
  }
  .page-enter .panel-section {
    animation: expandTL 650ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 850ms;
  }
  .page-enter .works-footer {
    animation: expandTL 650ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 1800ms;
  }
  .page-enter .burger-btn {
    animation: expandTL 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 950ms;
  }

  @media (max-width: 720px), (max-height: 500px) {
    @keyframes pageCardInMobile {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .page-enter .card { animation-name: pageCardInMobile; }
    .page-enter .tabs-nav { animation: none; }
    .page-enter .works { animation: none; }
  }

  .page-enter .card-faded .intro-name,
  .page-enter .card-faded .intro-line-main,
  .page-enter .card-faded .intro,
  .page-enter .card-faded .intro-line-sub,
  .page-enter .card-faded .contact-email,
  .page-enter .card-faded .social-label,
  .page-enter .card-faded .social-links .social-icon {
    animation: none !important;
    opacity: 0 !important;
  }
  .page-enter .card-faded .card-social {
    animation-duration: 300ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .page-enter .card,
    .page-enter .logo-container,
    .page-enter .intro-name,
    .page-enter .intro-line-main,
    .page-enter .intro,
    .page-enter .intro-line-sub,
    .page-enter .contact-email,
    .page-enter .card-social,
    .page-enter .social-label,
    .page-enter .social-links .social-icon,
    .page-enter .works,
    .page-enter .tabs-nav,
    .page-enter .panel-section,
    .page-enter .works-footer,
    .page-enter .burger-btn {
      animation: none !important;
    }
    .card,
    .card .intro-name,
    .card .intro-line-main,
    .card .intro,
    .card .intro-line-sub,
    .card .contact-email,
    .card .social-label,
    .card .social-links,
    .card .logo-container {
      transition-duration: 0s !important;
    }
  }

  .card {
    flex-shrink: 0; width: 300px; background: var(--color-blue); color: var(--color-white);
    border-radius: 0 40px 0 0; display: flex; flex-direction: column;
    position: relative; overflow: hidden;
  }

  @media (max-width: 720px), (max-height: 500px) {
    .card {
      width: 100%;
      border-radius: 0;
      border-right: none;
      border-bottom: none;
      position: sticky;
      top: 0;
      z-index: 45;
      padding-top: env(safe-area-inset-top, 0px);
      transition: clip-path 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
                  margin-bottom 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: clip-path;
    }
    .card.card-scroll {
      position: relative;
      clip-path: none !important;
      margin-bottom: 0 !important;
    }
    .card-body {
      padding-left: max(calc(var(--spacing) * 6), env(safe-area-inset-left, 0px));
      padding-right: max(calc(var(--spacing) * 6), env(safe-area-inset-right, 0px));
    }
    .card-social {
      border-bottom: none;
      height: auto;
      padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
      padding-left: max(calc(var(--spacing) * 6), env(safe-area-inset-left, 0px));
      padding-right: max(calc(var(--spacing) * 6), env(safe-area-inset-right, 0px));
      align-items: center;
      text-align: center;
    }
    .card-social .social-links {
      justify-content: center;
    }
    .panel-section {
      padding-bottom: 0;
    }
  }

  #globe-container { position: absolute; width: 400px; height: 400px; z-index: 1; pointer-events: auto; }
  @media (min-width: 721px) and (min-height: 501px) { #globe-container { bottom: -100px; right: -150px; transition: right 350ms cubic-bezier(0.4, 0, 0.2, 1); } }
  .card-faded #globe-container { right: -150px; }
  @media (max-width: 720px), (max-height: 500px) { #globe-container { top: 0; right: 0; bottom: auto; transform: translate(55%, -44%); } }

  .card-body, .card-social { position: relative; z-index: 10; pointer-events: none; }
  .card-body a, .card-social a, .logo-container, .work-link { pointer-events: auto; display: inline-block; position: relative; text-decoration: none; color: inherit; padding: 2px 0; }

  .card-body a::after, .card-social a::after {
    content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0;
    background-color: currentColor; transform: scaleX(0); transform-origin: bottom left;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .card-body a:hover::after, .card-social a:hover::after { transform: scaleX(1); }

  .work-link {
    padding: 2px 8px;
    border-radius: 0;
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.18s ease;
  }
  .work-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-blue);
    transform: translateX(-105%);
    transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
  }
  .work-link::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='4' y1='20' x2='20' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='10,4 20,4 20,14' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='4' y1='20' x2='20' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='10,4 20,4 20,14' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transform: none;
    transition: transform 0.18s ease;
  }
  .work-link:hover {
    color: var(--color-white);
  }
  .work-link:hover::before { transform: translateX(0); }
  .work-link:hover::after { transform: translate(1px, -1px); }

  .card-body { flex: 1; padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6); }
  .logo-container { margin-bottom: calc(var(--spacing) * 8); width: 120px; }
  .logo-container svg { width: 100%; fill: currentColor; }

  .intro-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); margin-bottom: 0.5rem; }
  .intro-line-main { font-size: var(--text-lg); margin-bottom: 0.5rem; }
  .intro { font-size: var(--text-sm); opacity: 0.9; }
  .intro-line-sub { font-size: var(--text-xs); opacity: 0.6; margin-top: 0.5rem; }
  .contact-email { margin-top: 1.5rem; font-size: var(--text-xs); }
  .contact-link { color: var(--color-primary); display: inline-flex !important; align-items: center; gap: 0.4em; }
  .contact-arrow {
    display: inline-flex;
    overflow: hidden;
    width: 0.9em;
    height: 0.9em;
    position: relative;
    flex: 0 0 auto;
  }
  .contact-arrow::before,
  .contact-arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='2' y1='12' x2='22' y2='12' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='14,4 22,12 14,20' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='2' y1='12' x2='22' y2='12' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='14,4 22,12 14,20' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .contact-arrow::before { transform: translateX(0); }
  .contact-arrow::after { transform: translateX(-120%); }
  .contact-link:hover .contact-arrow::before { transform: translateX(120%); }
  .contact-link:hover .contact-arrow::after { transform: translateX(0); }

  .card-social { 
    height: var(--footer-height); padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6); 
    background: var(--color-black); display: flex; flex-direction: column; justify-content: flex-start;
    transition: height 350ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @media (min-width: 721px) and (min-height: 501px) {
    .card {
      transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-body {
      flex-shrink: 0;
      min-width: 300px;
    }
    .card-social {
      min-width: 300px;
    }
    .logo-container {
      transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* --- Card content: staggered fade-in after card expands (base → visible) --- */
    .intro-name {
      transition: opacity 300ms ease 380ms, transform 300ms ease 380ms;
    }
    .intro-line-main {
      transition: opacity 300ms ease 430ms, transform 300ms ease 430ms;
    }
    .intro {
      transition: opacity 300ms ease 480ms, transform 300ms ease 480ms;
    }
    .intro-line-sub {
      transition: opacity 300ms ease 530ms, transform 300ms ease 530ms;
    }
    .contact-email {
      transition: opacity 300ms ease 580ms, transform 300ms ease 580ms;
    }
    .social-label {
      transition: opacity 300ms ease 480ms, transform 300ms ease 480ms;
    }
    .social-links {
      transition: opacity 300ms ease 540ms, transform 300ms ease 540ms;
    }

    /* --- Faded: card is collapsed --- */
    .card-faded {
      width: 100px;
    }
    .card-faded .logo-container {
      width: 60px;
    }
    .card-faded .card-social {
      height: 40px;
    }
    .card-faded + .works .works-footer {
      height: 40px;
    }

    /* --- Faded content: reverse-stagger fade-out (visible → hidden) --- */
    .card-faded .intro-name {
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: opacity 250ms ease 200ms, transform 250ms ease 200ms;
    }
    .card-faded .intro-line-main {
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: opacity 250ms ease 150ms, transform 250ms ease 150ms;
    }
    .card-faded .intro {
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: opacity 250ms ease 100ms, transform 250ms ease 100ms;
    }
    .card-faded .intro-line-sub {
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: opacity 250ms ease 60ms, transform 250ms ease 60ms;
    }
    .card-faded .contact-email {
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: opacity 250ms ease 0ms, transform 250ms ease 0ms;
    }
    .card-faded .social-label {
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: opacity 250ms ease 80ms, transform 250ms ease 80ms;
    }
    .card-faded .social-links {
      opacity: 0; transform: translateY(16px); pointer-events: none;
      transition: opacity 250ms ease 40ms, transform 250ms ease 40ms;
    }

    /* --- Suppress transitions during initial load --- */
    .card-instant,
    .card-instant * {
      transition-duration: 0s !important;
    }
  }
  .social-label { font-size: var(--text-xs); color: rgba(255,255,255,0.5); margin-bottom: 0.5rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.social-links a { color: var(--color-primary); font-size: var(--text-xs); }
.social-links .social-icon {
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 0;
}
.social-links .social-icon::after {
  display: none;
}
.social-links .social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  transition: transform 0.18s ease, color 0.18s ease;
}
.social-links .social-icon:hover svg {
  transform: translateY(-1px);
}

  .works { flex: 1; max-width: 600px; background: var(--color-white); display: flex; flex-direction: column; }
  @media (min-width: 721px) and (min-height: 501px) {
    .works {
      max-height: calc(min(100vh, 1200px) - clamp(4rem, 9vh, 8rem));
      transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-faded + .works { max-width: 800px; }
  }
  @media (max-width: 720px), (max-height: 500px) {
    .works { max-width: none; width: 100%; border-left: none; border-radius: 0; }
    .works-footer { margin-bottom: 0; }
  }

  .about-content {
    flex: 1;
    min-height: 0;
    padding: 0;
    --about-avatar-size: round(down, min(38%, 240px, 28vh), 1px);
    --about-avatar-height: round(down, calc(var(--about-avatar-size) * 1.34), 1px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .about-content::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -94px;
    bottom: -2px;
    right: -94px;
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 300'%3E%3Cpolygon fill='%23e6e9f4' points='60.88 0 0 0 0 159.34 60.88 0'/%3E%3Cpolygon fill='%23e6e9f4' points='61.26 300 175.88 0 115 0 .39 300 61.26 300'/%3E%3Cpolygon fill='%23e6e9f4' points='176.26 300 230 159.34 230 0 115.39 300 176.26 300'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 92px 120px;
    background-position: 0 0;
    animation: aboutPatternDrift 6s linear infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    pointer-events: none;
  }
  .about-content.drift-reset::before {
    animation: none;
  }
  @keyframes aboutPatternDrift {
    from { transform: translateX(0); }
    to { transform: translateX(-92px); }
  }
  .about-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    justify-self: start;
    min-width: 0;
    width: 100%;
    min-height: 100%;
    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6) calc(var(--spacing) * 6);
    position: relative;
    background-color: var(--color-accent);
    background-image:
      linear-gradient(to right, transparent 0 50%, var(--color-accent) 50% 100%),
      radial-gradient(circle, rgba(206, 0, 128, 0.6) 0.75px, rgba(206, 0, 128, 0) 0.85px);
    background-size: 100% 100%, 8px 8px;
    background-position: 0 0, 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 2;
    overflow: hidden;
  }
  .about-copy .works-intro {
    position: relative;
    z-index: 2;
  }
  .blob-canvas {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }
  .works-avatar {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    display: block;
    margin-left: auto;
    margin-right: 0;
    width: var(--about-avatar-size);
    max-width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 2000 / 2680;
    border-radius: 0;
    object-fit: contain;
    object-position: right top;
    z-index: 3;
  }
  .works-intro {
    margin-top: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 4);
    max-width: none;
    font-size: var(--text-xs);
    color: rgba(0, 0, 0, 0.84);
    line-height: 1.7;
  }
  .works-intro p {
    display: block;
    margin-bottom: 0.6em;
    line-height: 1.7;
  }
  .works-intro p:last-child { margin-bottom: 0; }
  .works-intro p.mt-lg { margin-top: 1.4em; }
  .works-intro p span {
    display: inline;
    color: var(--color-black);
    background: var(--color-white);
    padding: 0.5em 0.6em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .about-hero-line {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    color: var(--color-black);
    font-size: clamp(1.45rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.02em;
    transform: scaleY(0.93);
    transform-origin: left center;
    filter:
      drop-shadow(1px 0 0 var(--color-accent))
      drop-shadow(-1px 0 0 var(--color-accent))
      drop-shadow(0 1px 0 var(--color-accent))
      drop-shadow(0 -1px 0 var(--color-accent));
  }
  .about-content > .about-hero-line {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    margin: 0 0 calc(var(--spacing) * 6) calc(var(--spacing) * 6);
    z-index: 4;
  }
  .about-hero-chip {
    display: block;
    width: fit-content;
    padding: 0.24em 0.3em;
    background: var(--color-primary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }
  .about-hero-chip > span {
    display: inline-block;
    position: relative;
  }
  .about-hero-chip:first-child {
    z-index: 2;
  }
  .about-hero-chip:last-child { z-index: 1; margin-left: 0.5em; }
  .about-hero-chip + .about-hero-chip {
    margin-top: -1px;
  }
  .works-intro a {
    color: var(--color-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
  }
  .works-intro a:hover { border-color: var(--color-blue); }
  @media (max-width: 720px), (max-height: 500px) {
    .about-content {
      --about-avatar-size: round(down, min(56vw, 220px), 1px);
      --about-avatar-height: round(down, calc(var(--about-avatar-size) * 1.34), 1px);
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      padding: 0;
      gap: 0;
    }
    .about-copy {
      grid-column: 1;
      grid-row: 2;
      order: unset;
    }
    .works-avatar {
      grid-column: 1;
      grid-row: 1;
      order: unset;
      width: var(--about-avatar-size);
      justify-self: end;
    }
    .works-intro {
      padding-right: 0;
      max-width: none;
    }
    .about-copy {
      padding: calc(var(--spacing) * 6) calc(var(--spacing) * 5) calc(var(--spacing) * 5);
      padding-left: max(calc(var(--spacing) * 5), env(safe-area-inset-left, 0px));
      padding-right: max(calc(var(--spacing) * 5), env(safe-area-inset-right, 0px));
      padding-bottom: 60vw;
    }
    .blob-canvas {
      width: 100%;
    }
    .about-hero-line {
      font-size: clamp(1.2rem, 6.6vw, 2rem);
    }
    .about-content > .about-hero-line {
      margin: 0 0 calc(var(--spacing) * 3) max(calc(var(--spacing) * 5), env(safe-area-inset-left, 0px));
    }
  }

  .tabs-nav {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    position: relative;
    background-color: var(--color-accent);
    background-image: radial-gradient(circle, rgba(206, 0, 128, 0.6) 0.75px, rgba(206, 0, 128, 0) 0.85px);
    background-size: 8px 8px;
    border: none;
    overflow: hidden;
  }
  /* --- Burger button (mobile only) --- */
  .burger-btn {
    display: none;
  }
  @media (max-width: 720px), (max-height: 500px) {
    .burger-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 7px;
      position: fixed;
      top: env(safe-area-inset-top, 0px);
      right: env(safe-area-inset-right, 0px);
      z-index: 70;
      width: 52px;
      height: 52px;
      border: none;
      background: var(--color-blue);
      padding: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .burger-line {
      display: block;
      width: 24px;
      height: 1px;
      background: var(--color-white);
      border-radius: 0;
      transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: center;
    }
    .burger-btn.is-open .burger-line:first-child {
      transform: translateY(4px) rotate(45deg);
    }
    .burger-btn.is-open .burger-line:last-child {
      transform: translateY(-4px) rotate(-45deg);
    }

    .tabs-nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 65;
      flex-direction: column;
      justify-content: flex-end;
      align-items: stretch;
      gap: 0;
      border: none;
      overflow: hidden;
      background: var(--color-accent);
      transform: translateX(100%);
      pointer-events: none;
      transition: transform 500ms cubic-bezier(0.33, 0, 0.2, 1);
    }
    .tabs-nav.menu-open {
      transform: translateX(0);
      pointer-events: auto;
      transition: transform 480ms cubic-bezier(0.16, 0.7, 0.3, 1);
    }
    .tabs-nav .tab-slider {
      display: none;
    }
    .tabs-nav .tab-btn {
      padding: calc(var(--spacing) * 5) calc(var(--spacing) * 10);
      font-size: 1.5rem;
      font-weight: 400;
      min-width: 0;
      width: 100%;
      justify-content: flex-start;
      color: var(--color-white);
      position: relative;
      z-index: 1;
      overflow: hidden;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      transition: color 0.15s ease;
    }
    .tabs-nav .tab-btn:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    .tabs-nav .tab-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--color-blue);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
      z-index: -1;
    }
    .tabs-nav .tab-btn.active::before {
      transform: scaleX(1);
    }
    .tabs-nav .tab-btn.active {
      color: var(--color-white);
    }
    .card,
    .works > .panel-section,
    .works > .works-footer {
      transition: translate 480ms cubic-bezier(0.16, 0.7, 0.3, 1);
    }
    body.menu-is-open .card,
    body.menu-is-open .works > .panel-section,
    body.menu-is-open .works > .works-footer {
      translate: -25% 0;
      transition: translate 480ms cubic-bezier(0.16, 0.7, 0.3, 1);
    }
    body:not(.menu-is-open) .card,
    body:not(.menu-is-open) .works > .panel-section,
    body:not(.menu-is-open) .works > .works-footer {
      transition: translate 500ms cubic-bezier(0.33, 0, 0.2, 1);
    }
  }
  .tab-slider {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: var(--color-white);
    z-index: 0;
    pointer-events: none;
    transition: right 520ms cubic-bezier(0.4, 0, 0.2, 1), width 520ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .tab-btn {
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
    min-width: 80px;
    border: none;
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .tab-btn:hover { opacity: 0.75; }
  .tab-btn.active {
    color: var(--color-accent);
    opacity: 1;
  }
  .work-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-accent);
  }
  #tab-web,
  #tab-voice {
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207.47 270'%3E%3Cpolygon fill='%23e6e9f4' points='54.91 0 0 0 0 143.41 54.91 0'/%3E%3Cpolygon fill='%23e6e9f4' points='55.26 270 158.65 0 103.74 0 .35 270 55.26 270'/%3E%3Cpolygon fill='%23e6e9f4' points='159 270 207.47 143.41 207.47 0 104.08 270 159 270'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 124px 161.4px;
    background-position: left top;
  }
  #tab-web .work-list,
  #tab-voice .work-list {
    background: transparent;
    overflow: hidden;
  }
  #tab-web .work-list,
  #tab-voice .work-list {
    position: relative;
    padding-bottom: 0;
  }
  #tab-web .work-list::before,
  #tab-voice .work-list::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-accent);
  }
  #tab-web.active.is-entering .work-list::before,
  #tab-voice.active.is-entering .work-list::before {
    animation: expandTL 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
  }
  #tab-web .work-list:has(.is-open),
  #tab-voice .work-list:has(.is-open) {
    padding-bottom: 0;
  background: var(--color-white);
  }
  #tab-web .work-list:has(.is-open)::before,
  #tab-voice .work-list:has(.is-open)::before {
    display: none;
  }
  @media (max-width: 720px), (max-height: 500px) {
    .work-list {
      grid-template-columns: 1fr;
    }
  }
  .work-item { position: relative; z-index: 1; }
  .works-marquee {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 2.05rem;
    background: var(--color-primary);
    color: var(--color-black);
    border-top: 1px solid var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
    line-height: 1;
  }
  .works-marquee-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: max-content;
    gap: 0;
    padding: 0;
    will-change: transform;
    animation: worksMarquee 18s linear infinite;
  }
  .works-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    padding: 0;
  }
  .works-marquee-item::after {
    content: "";
    width: 0.88em;
    height: 0.88em;
    margin-left: 0.72rem;
    margin-right: 0.72rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='2' y1='12' x2='22' y2='12' stroke='black' stroke-width='2'/%3E%3Cpolyline points='14,4 22,12 14,20' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='2' y1='12' x2='22' y2='12' stroke='black' stroke-width='2'/%3E%3Cpolyline points='14,4 22,12 14,20' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
  @keyframes worksMarquee {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }
  .work-list:has(.is-open) + .works-marquee {
    display: none;
  }
  .work-item:not(.is-open) { aspect-ratio: 2 / 1; overflow: hidden; }
  .work-item::after { display: none; }
  .work-title { min-width: 0; font-size: var(--text-sm); font-weight: 700; display: block; color: var(--color-black); }
  .work-item:not(.is-open) .work-title {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    padding: 4px 8px;
    font-size: var(--text-xs);
    background: var(--color-white);
    transition: background-color 350ms ease, color 350ms ease;
  }
  .work-item.is-open .work-title {
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  }
  .work-desc { font-size: var(--text-xs); color: rgba(0, 0, 0, 0.6); margin-bottom: 0.5rem; }
  .work-time {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-block;
    font-size: var(--text-xs);
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 0.25rem;
    letter-spacing: 0.06em;
  }
  .work-link { font-size: var(--text-xs); font-weight: 600; }

  .works-footer {
    flex-shrink: 0;
    height: var(--footer-height); width: 100%; position: relative;
    background: linear-gradient(to right, var(--color-white) 0 50%, var(--color-primary) 50% 100%);
    transition: height 350ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .works-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cpath fill='%23ff31a7' d='M300 33h100v34H300zm-100-33h100v33H200zm100 100h100v34H300zm-100-33h100v33H200zm100 100h100v34H300zm-100-33h100v33H200zM100 33h100v34H100zM0 0h100v33H0zm100 100h100v34H100zM0 67h100v33H0zm100 100h100v34H100zM0 133h100v34H0z'/%3E%3C/svg%3E");
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: left bottom;
    pointer-events: none;
    z-index: 1;
  }
  .works-footer::after { content: "made in Taiwan."; position: absolute; top: 0; right: 0; width: 50%; height: 100%; padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6); display: flex; align-items: flex-end; justify-content: flex-end; color: var(--color-black); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; z-index: 2; }

/* --- Panel --- */
.panel-section {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  overflow-x: clip;
  overflow-y: auto;
}
.panel-section:has(#tab-web.active),
.panel-section:has(#tab-voice.active) {
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207.47 270'%3E%3Cpolygon fill='%23e6e9f4' points='54.91 0 0 0 0 143.41 54.91 0'/%3E%3Cpolygon fill='%23e6e9f4' points='55.26 270 158.65 0 103.74 0 .35 270 55.26 270'/%3E%3Cpolygon fill='%23e6e9f4' points='159 270 207.47 143.41 207.47 0 104.08 270 159 270'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 124px 161.4px;
  background-position: left top;
}
.panel-section::-webkit-scrollbar { width: 6px; border-radius: 0; }
.panel-section::-webkit-scrollbar-track { background: transparent; border-radius: 0; }
.panel-section::-webkit-scrollbar-thumb { background: var(--color-blue); border-radius: 0; }
.tab-content {
  display: none;
}
.tab-content.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@keyframes tabPanelIn {
  from { opacity: 0; transform: scale(0.985); transform-origin: left top; }
  to { opacity: 1; transform: scale(1); transform-origin: left top; }
}
@keyframes introSlideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes aboutHeroIn {
  from { transform: translateY(-10px) scaleY(0.93); transform-origin: left center; }
  to { transform: translateY(0) scaleY(0.93); transform-origin: left center; }
}
@keyframes heroChipBorderIn {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
@keyframes heroTextSlideIn {
  from { left: calc(-100% - 0.6em); }
  to { left: 0; }
}
#tab-about.active.is-entering .about-copy {
  animation: expandTL 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 150ms;
}
#tab-about.active.is-entering .works-avatar {
  opacity: 0;
  transform: scale(0.94);
  transform-origin: left top;
  animation: tabPanelIn 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 400ms;
}
#tab-about.active.is-entering .about-hero-line {
  transform-origin: left center;
  animation: aboutHeroIn 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 150ms;
}
#tab-about.active.is-entering .about-hero-chip {
  animation: heroChipBorderIn 650ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#tab-about.active.is-entering .about-hero-chip:first-child {
  animation-delay: 300ms;
}
#tab-about.active.is-entering .about-hero-chip:last-child {
  animation-delay: 680ms;
}
#tab-about.active.is-entering .about-hero-chip > span {
  animation: heroTextSlideIn 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#tab-about.active.is-entering .about-hero-chip:first-child > span {
  animation-delay: 500ms;
}
#tab-about.active.is-entering .about-hero-chip:last-child > span {
  animation-delay: 880ms;
}
#tab-about.active.is-entering .works-intro p {
  opacity: 0;
  transform: translateX(-30px);
  animation: introSlideIn 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#tab-about.active.is-entering .works-intro p:nth-child(1) { animation-delay: 1200ms; }
#tab-about.active.is-entering .works-intro p:nth-child(2) { animation-delay: 1400ms; }
#tab-about.active.is-entering .works-intro p:nth-child(3) { animation-delay: 1600ms; }
#tab-about.active.is-entering .works-intro p:nth-child(4) { animation-delay: 1800ms; }

@keyframes listItemIn {
  from { clip-path: inset(0 100% 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes marqueeSlideIn {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.work-item.item-reveal {
  animation: listItemIn 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.works-marquee.item-reveal {
  animation: marqueeSlideIn 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #tab-about.active.is-entering .about-copy,
  #tab-about.active.is-entering .about-hero-line,
  #tab-about.active.is-entering .about-hero-chip,
  #tab-about.active.is-entering .works-avatar,
  #tab-about .about-content::before,
  #tab-about.active.is-entering .works-intro p,
  #tab-web.active.is-entering .work-list::before,
  #tab-voice.active.is-entering .work-list::before,
  .work-item.item-reveal,
  .works-marquee.item-reveal {
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    max-width: none !important;
  }
  #tab-about.active.is-entering .about-hero-chip > span {
    animation: none !important;
    left: 0 !important;
  }
}

@media (min-width: 721px) and (min-height: 501px) {
  .panel-section:has(.is-open) { overflow-y: hidden; }
}

/* --- Gallery hover --- */
.work-item:not(.is-open) .work-thumb.active {
  transform: scale(1.01);
  transition: transform 550ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.work-item:not(.is-open)::after {
  display: block !important;
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30% 0, var(--color-accent) 100%);
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}
@keyframes targetLockIn {
  0%   { opacity: 0; transform: scale(1.06); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes targetPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (hover: hover) {
  .work-item:not(.is-open):hover .work-thumb.active {
    transform: scale(1.08);
    filter: brightness(1.1) saturate(1.15);
  }
  .work-item:not(.is-open):hover::before {
    animation: targetLockIn 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both,
               targetPulse 2s ease-in-out 420ms infinite;
  }
  .work-item:not(.is-open):hover::after {
    opacity: 1;
  }
  .work-item:not(.is-open):hover .work-title {
    background: var(--color-primary);
    color: var(--color-black);
  }
}
.work-item.is-hidden { display: none !important; }

.work-item:not(.is-open) .work-desc,
.work-item:not(.is-open) .work-link,
.work-item:not(.is-open) .work-list-minor { display: none; }

.work-list:has(.is-open) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-white);
}
.work-item.is-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-white);
}
.work-item.is-open::-webkit-scrollbar { width: 6px; }
.work-item.is-open::-webkit-scrollbar-track { background: var(--color-bg); }
.work-item.is-open::-webkit-scrollbar-thumb { background: var(--color-blue); border-radius: 0; }
@supports (-moz-appearance: none) {
  .panel-section { scrollbar-width: thin; scrollbar-color: var(--color-blue) transparent; }
  .work-item.is-open { scrollbar-width: thin; scrollbar-color: var(--color-blue) var(--color-bg); }
}
.work-item.is-open .work-thumb-wrap {
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}
.work-item.is-open .work-thumb-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-accent);
  z-index: 8;
  pointer-events: none;
}
.work-item.is-open .work-thumb-wrap .work-time,
.work-item.is-open .work-thumb-wrap .thumb-nav,
.work-item.is-open .work-thumb-wrap .thumb-caption {
  will-change: opacity;
}
.work-item.thumb-collapsed .work-thumb-wrap {
  height: 0 !important;
  min-height: 0 !important;
  aspect-ratio: unset !important;
  overflow: hidden !important;
}
.work-item.is-open .work-title,
.work-item.is-open .work-desc,
.work-item.is-open .work-link { flex-shrink: 0; }

@keyframes contentIn {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}
.work-item.is-open .work-thumb-wrap .work-time,
.work-item.is-open .thumb-nav,
.work-item.is-open .thumb-caption,
.work-item.is-open .work-title,
.work-item.is-open .work-desc,
.work-item.is-open > .work-link,
.work-item.is-open .work-close,
.work-item.is-open .work-list-minor {
  transform-origin: left top;
}
.work-item.is-open .work-thumb-wrap .work-time {
  animation: contentIn 320ms ease 320ms both;
}
.work-item.is-open .thumb-nav {
  animation: contentIn 320ms ease 320ms both;
}
.work-item.is-open .thumb-caption {
  animation: contentIn 320ms ease 320ms both;
}
.work-item.is-open .work-title {
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4) calc(var(--spacing) * 3);
  animation: contentIn 420ms ease 500ms both;
}
.work-item.is-open .work-desc {
  padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4) calc(var(--spacing) * 4);
  line-height: 1.8;
  animation: contentIn 420ms ease 680ms both;
}
.work-item.is-open .work-desc p + p {
  margin-top: 0.8em;
}
.work-item.is-open > .work-link {
  margin: calc(var(--spacing) * 2) calc(var(--spacing) * 4) calc(var(--spacing) * 6) calc(var(--spacing) * 4);
  animation: contentIn 420ms ease 820ms both;
}
.work-item.is-open .work-close {
  animation: contentIn 360ms ease 500ms both;
}
.work-item.is-open:has(.work-list-minor) .work-title {
  border-bottom: 1px solid var(--color-accent);
}
.work-item.is-open .work-list-minor {
  padding: 0;
  animation: contentIn 420ms ease 820ms both;
}
@media (max-width: 720px), (max-height: 500px) {
  .work-item.is-open .work-title {
    padding-left: max(calc(var(--spacing) * 4), env(safe-area-inset-left, 0px));
    padding-right: max(calc(var(--spacing) * 4), env(safe-area-inset-right, 0px));
  }
  .work-item.is-open .work-desc {
    padding-left: max(calc(var(--spacing) * 4), env(safe-area-inset-left, 0px));
    padding-right: max(calc(var(--spacing) * 4), env(safe-area-inset-right, 0px));
  }
  .work-item.is-open > .work-link {
    margin-left: max(calc(var(--spacing) * 4), env(safe-area-inset-left, 0px));
    margin-right: max(calc(var(--spacing) * 4), env(safe-area-inset-right, 0px));
  }
}

.work-close {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-white);
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.work-close::before,
.work-close::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 0;
  border-top: 1px solid var(--color-accent);
  transition: border-color 150ms ease;
}
.work-close::before { transform: rotate(45deg); }
.work-close::after { transform: rotate(-45deg); }
.work-close:hover { background: var(--color-accent); }
.work-close:hover::before,
.work-close:hover::after { border-color: var(--color-white); }
.work-item.is-open .work-close { display: flex; }

.work-item .work-link {
  padding: 5px 14px;
  font-size: var(--text-sm);
}

.work-list .work-item .work-title,
.work-list .work-item .work-thumb-wrap .work-time {
  transition: opacity 360ms ease, transform 360ms ease;
  transform-origin: left top;
}
.work-list.labels-fade-out .work-item .work-title,
.work-list.labels-fade-out .work-item .work-thumb-wrap .work-time,
.work-list.labels-fade-in .work-item .work-title,
.work-list.labels-fade-in .work-item .work-thumb-wrap .work-time {
  opacity: 0;
  transform: scale(0.88);
}

/* --- Thumbnail carousel --- */
.work-thumb-wrap {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}
.work-item:not(.is-open) .work-thumb-wrap {
  position: absolute;
  inset: 0;
}
.work-thumb-wrap .work-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-bg);
  opacity: 0;
  transform: translateX(0);
  will-change: transform;
}
.work-thumb-wrap .work-thumb.is-entering { opacity: 1; }
.work-thumb-wrap .work-thumb.active { opacity: 1; }
.work-thumb-wrap .work-time {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  padding: 2px 8px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  margin: 0;
}
.thumb-nav {
  position: absolute;
  z-index: 6;
  bottom: 0;
  right: 0;
  display: none;
  gap: 0;
}
.work-item.is-open .thumb-nav { display: flex; }
.thumb-nav-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-white);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  position: relative;
  cursor: pointer;
}
.thumb-nav-btn::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-left: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  transition: border-color 150ms ease;
}
.thumb-nav-btn::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 0;
  border-top: 1px solid var(--color-accent);
  transition: border-color 150ms ease;
}
.thumb-nav-btn:first-child::before {
  transform: rotate(45deg);
  left: 5px;
}
.thumb-nav-btn:first-child::after {
  left: 3px;
}
.thumb-nav-btn:last-child::before {
  transform: rotate(-135deg);
  right: 5px;
}
.thumb-nav-btn:last-child::after {
  right: 3px;
}
.thumb-nav-btn:hover { background: var(--color-accent); }
.thumb-nav-btn:hover::before,
.thumb-nav-btn:hover::after { border-color: var(--color-white); }
.thumb-nav-btn:disabled {
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--color-white) calc(50% - 0.5px), var(--color-white) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--color-accent);
  pointer-events: none;
}
.thumb-nav-btn:disabled::before,
.thumb-nav-btn:disabled::after { display: none; }
.thumb-caption {
  position: absolute;
  z-index: 5;
  bottom: 0;
  right: 72px;
  min-height: 36px;
  padding: 0 14px;
  display: none;
  align-items: center;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-white);
  background: var(--color-blue);
}
.work-thumb-wrap.thumb-static .thumb-caption {
  right: 0;
}
.thumb-caption:empty { display: none !important; }
.work-item.is-open .thumb-caption { display: flex; }

/* --- Minor projects --- */
.work-list-minor {
  list-style: none;
  padding: 0;
}
.work-minor {
  display: flex;
  align-items: stretch;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--color-accent);
}
.minor-thumb {
  flex-shrink: 0;
  align-self: flex-start;
  width: 130px;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-bg);
}
.minor-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-start;
  gap: 0.25rem 0.75rem;
  padding: calc(var(--spacing) * 3);
  border-left: 1px solid var(--color-accent);
}
.work-minor .minor-title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--color-black);
}
.work-minor .minor-year {
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.06em;
}
.work-minor .minor-desc {
  flex-basis: 100%;
  color: rgba(0, 0, 0, 0.5);
}
.work-minor .work-link {
  flex-shrink: 0;
  margin-top: 0.25rem;
  padding: 4px 10px;
  font-size: var(--text-xs);
}

/* --- Orientation guard (landscape mobile) --- */
.orientation-guard {
  display: none;
}
@media (max-height: 500px) and (orientation: landscape) and (hover: none) {
  .orientation-guard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--color-blue);
    color: var(--color-white);
    text-align: center;
    font-size: var(--text-sm);
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
  .orientation-guard svg {
    animation: orientRotate 2s ease-in-out infinite;
  }
  @keyframes orientRotate {
    0%, 100% { transform: rotate(0deg); }
    30%, 70% { transform: rotate(-90deg); }
  }
}

/* --- In-place zoom (desktop only) --- */
.work-item.is-open .work-thumb-wrap.is-zoomed .work-thumb.active {
  transition: none;
}
.work-item.is-open .work-thumb-wrap.is-zoomed .thumb-nav,
.work-item.is-open .work-thumb-wrap.is-zoomed .thumb-caption,
.work-item.is-open .work-thumb-wrap.is-zoomed .work-time {
  opacity: 0;
  pointer-events: none;
}

/* --- Love Popups --- */
.love-popup {
  position: fixed;
  z-index: 9999;
  width: 320px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  box-shadow: 10px 10px var(--color-blue);
  animation: lovePopIn 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  user-select: none;
  -webkit-user-select: none;
}
.love-popup-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
  border-bottom: 1px solid var(--color-accent);
  cursor: grab;
}
.love-popup-bar:active {
  cursor: grabbing;
}
.love-popup-close {
  all: unset;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--color-white);
  border-left: 1px solid var(--color-accent);
  transition: background 150ms ease;
}
.love-popup-close::before,
.love-popup-close::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 0;
  border-top: 1px solid var(--color-accent);
  transition: border-color 150ms ease;
}
.love-popup-close::before {
  transform: rotate(45deg);
}
.love-popup-close::after {
  transform: rotate(-45deg);
}
.love-popup-close:hover {
  background: var(--color-accent);
}
.love-popup-close:hover::before,
.love-popup-close:hover::after {
  border-color: var(--color-white);
}
.love-popup-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.love-popup-out {
  animation: lovePopOut 280ms ease-out forwards !important;
}
@keyframes lovePopIn {
  from { opacity: 0; transform: scale(0.4) rotate(-4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes lovePopOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .love-popup, .love-popup-out {
    animation: none;
  }
}