* { margin: 0; padding: 0; box-sizing: border-box; }
  /* Global font rendering polish — crisper serif strokes on retina displays,
     proper kerning + ligatures, subpixel alignment for Japanese glyphs */
  html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-kerning: normal;
  }
  body { background: #000; overflow: hidden; font-family: 'Noto Serif JP', 'Georgia', serif; cursor: none; }
  /* Canvas pinned with !important to resist browser extensions (DeepSeek sidebar,
     CareerOps, StealthGPT, etc.) that inject overlay divs or modify canvas positioning.
     Extensions often insert transparent elements above their z-index to capture clicks. */
  canvas {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  #cursor {
    position: fixed; width: 11px; height: 11px; border-radius: 50%;
    background: #e8922a; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); transition: width 0.15s, height 0.15s, background 0.18s;
    box-shadow: 0 0 8px #e8922a88, 0 0 16px #e8922a44; mix-blend-mode: screen;
  }
  #cursor.hover { width: 20px; height: 20px; background: #f0c060; box-shadow: 0 0 12px #f0c06099, 0 0 24px #f0c06044; }
  #cursor-ring {
    position: fixed; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid #e8922a44; pointer-events: none; z-index: 9998;
    transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, border-color 0.2s;
  }
  #cursor-ring.hover { width: 44px; height: 44px; border-color: #f0c060aa; }

  #vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 5;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.7) 100%);
  }
  #scanlines {
    position: fixed; inset: 0; pointer-events: none; z-index: 6;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px);
  }
  #scene-fade {
    position: fixed; inset: 0; opacity: 0; pointer-events: none;
    z-index: 20; transition: opacity 0.48s ease;
    background: radial-gradient(ellipse at 50% 48%, rgba(200,100,20,0.15) 0%, rgba(8,4,1,0.98) 55%, #000 100%);
  }
  #scene-fade.active { opacity: 1; pointer-events: all; }

  #loader {
    position: fixed; inset: 0; background: #060402;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 100; transition: opacity 1s ease;
  }
  #loader.hidden { opacity: 0; pointer-events: none; }
  .loader-sign {
    display: flex; font-size: 4.5rem; letter-spacing: 0.08em; margin-bottom: 0.6rem;
    filter: drop-shadow(0 0 18px #e8922a55);
  }
  .lc { opacity: 0; animation: cin 0.4s ease forwards; }
  .lc:nth-child(1) { color: #f0c060; animation-delay: 0.2s; }
  .lc:nth-child(2) { color: #f0c060; animation-delay: 0.4s; }
  .lc:nth-child(3) { color: #cc3333; animation-delay: 0.65s; text-shadow: 0 0 20px #cc3333aa; }
  @keyframes cin { to { opacity: 1; } }
  .loader-tagline {
    font-size: 0.58rem; color: #5a4020; letter-spacing: 0.32em; text-transform: uppercase;
    opacity: 0; animation: cin 0.5s ease 1.1s forwards;
    margin-bottom: 2.8rem;
  }
  .loader-neon {
    font-size: 1rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: #cc3333; opacity: 0;
    animation: neonOn 0.15s ease 1.5s forwards, neonFlicker 0.5s ease 1.65s;
    text-shadow: 0 0 12px #cc3333, 0 0 28px #cc333366;
    margin-bottom: 2.2rem;
  }
  @keyframes neonOn { to { opacity: 1; } }
  @keyframes neonFlicker {
    0%{opacity:1} 15%{opacity:0.1} 30%{opacity:1} 45%{opacity:0.3}
    60%{opacity:1} 75%{opacity:0.5} 90%{opacity:1} 100%{opacity:1}
  }
  .loader-bar { width: 160px; height: 1px; background: #1a0e06; overflow: hidden; }
  .loader-fill { height: 100%; background: linear-gradient(90deg, #e8922a, #f0c060); animation: lf 1.6s ease 0.9s forwards; width: 0; }
  @keyframes lf { to { width: 100%; } }
  .loader-status {
    font-size: 0.52rem; color: #7a5830; letter-spacing: 0.32em; text-transform: uppercase;
    margin-top: 0.9rem; opacity: 0; animation: cin 0.4s ease 1s forwards;
    transition: opacity 0.3s ease;
  }

  #ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

  #outside-ui {
    position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
    text-align: center; animation: fadeUp 1s ease 2.6s both;
    will-change: transform;
    display: flex; flex-direction: column; align-items: center;
    min-width: max-content;
  }
  @keyframes fadeUp { from { opacity:0; transform:translateX(-50%) translateY(12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
  @keyframes nameBreath {
    0%, 100% {
      text-shadow:
        0 0 20px rgba(232,146,42,0.6),
        0 0 60px rgba(232,146,42,0.25),
        0 0 100px rgba(200,100,20,0.15),
        0 2px 12px rgba(0,0,0,0.9);
    }
    50% {
      text-shadow:
        0 0 28px rgba(245,195,110,0.78),
        0 0 82px rgba(232,146,42,0.38),
        0 0 140px rgba(200,100,20,0.22),
        0 2px 12px rgba(0,0,0,0.9);
    }
  }
  #outside-ui .name {
    font-size: clamp(3rem, 7vw, 5rem); color: #f5d070;
    letter-spacing: 0.12em;
    text-shadow:
      0 0 20px rgba(232,146,42,0.6),
      0 0 60px rgba(232,146,42,0.25),
      0 0 100px rgba(200,100,20,0.15),
      0 2px 12px rgba(0,0,0,0.9);
    margin-bottom: 0.2rem; line-height: 1;
    animation: nameBreath 5s ease-in-out 4s infinite;
    /* Ghost watermark: sits over the shopfront on the landing screen, so it
       reads as faint texture rather than colliding type (kept <=0.12 opacity). */
    opacity: 0.1;
  }
  #outside-ui .name-last {
    font-size: clamp(0.72rem, 1.4vw, 0.95rem); color: #c8a86a;
    letter-spacing: 0.32em; text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,0.9);
    opacity: 0.1;
  }
  @keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

  #time-disp {
    position: absolute; top: 1.5rem; left: 1.8rem; line-height: 1.7;
  }
  #time-disp .t {
    font-size: 0.95rem; color: rgba(232,146,42,0.9); letter-spacing: 0.12em;
    text-shadow: 0 0 12px rgba(232,146,42,0.4), 0 1px 4px rgba(0,0,0,0.8);
    font-variant-numeric: tabular-nums;
  }
  #time-disp .s { font-size: 0.55rem; color: #6a4a22; letter-spacing: 0.22em; text-transform: uppercase; }

  /* ── About strip ── */
  @keyframes fadeUpSimple { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
  .about-strip {
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem;
    justify-content: center; align-items: center;
    margin-top: 0.65rem; font-size: 0.54rem; color: #8a7040;
    letter-spacing: 0.22em; text-transform: uppercase;
    animation: fadeUpSimple 1s ease 3.4s both;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
    max-width: 100%;
  }
  .about-sep { color: #4a3018; opacity: 0.7; }

  #outside-ui .name-line {
    font-size: 0.82rem; color: #e0bd78; letter-spacing: 0.32em;
    font-variant: small-caps; margin-top: 0.7rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.95), 0 0 14px rgba(232,146,42,0.25);
  }
  #outside-ui .tagline {
    font-size: 0.64rem; color: #9a8050; letter-spacing: 0.32em;
    text-transform: uppercase; margin-top: 0.3rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
  }
  #outside-ui .hint {
    margin-top: 1.2rem; font-size: 0.62rem; color: #8a7045;
    letter-spacing: 0.32em; text-transform: uppercase;
    animation: pulse 2.5s ease-in-out infinite;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  }

  /* ── Recruiter CTA button (always visible on desktop) ── */
  #enter-cta {
    display: inline-flex; align-items: center; gap: 0.6rem;
    margin-top: 1.1rem; padding: 0.7rem 2.2rem;
    background: rgba(232,146,42,0.12); border: 1.5px solid rgba(232,146,42,0.6);
    color: #f0c060; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
    font-family: 'Noto Serif JP', Georgia, serif; cursor: none; pointer-events: all;
    transition: all 0.25s ease; text-shadow: 0 0 10px rgba(232,146,42,0.4);
    animation: fadeUpSimple 1s ease 3.8s both;
  }
  #enter-cta:hover {
    background: rgba(232,146,42,0.22); border-color: #f0c060;
    transform: translateY(-2px); box-shadow: 0 4px 20px rgba(232,146,42,0.25);
  }
  #enter-cta .arrow { transition: transform 0.2s; }
  #enter-cta:hover .arrow { transform: translateX(3px); }
  @media (hover: none) and (pointer: coarse) {
    #enter-cta { display: none; }
  }

  /* ── Quick-access bar for recruiters ── */
  .recruiter-quick {
    display: flex; gap: 0.7rem; align-items: center; justify-content: center;
    margin-top: 1.4rem; animation: fadeUpSimple 1s ease 4.2s both;
  }
  .recruiter-quick a {
    font-size: 0.52rem; color: rgba(200,168,112,0.7); letter-spacing: 0.22em;
    text-transform: uppercase; text-decoration: none; pointer-events: all; cursor: none;
    padding: 0.35rem 0.7rem; border: 1px solid rgba(200,168,112,0.2);
    transition: all 0.2s; text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  }
  .recruiter-quick a:hover {
    color: #f0c060; border-color: rgba(232,146,42,0.5);
    background: rgba(232,146,42,0.08);
  }
  .recruiter-quick .sep {
    color: rgba(200,168,112,0.2); font-size: 0.4rem; pointer-events: none;
  }

  #inside-ui { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; }
  #step-outside {
    position: absolute; bottom: 1.5rem; right: 1.5rem;
    background: rgba(6,3,1,0.92); border: 1px solid rgba(232,146,42,0.35);
    color: rgba(232,146,42,0.75); font-size: 0.58rem; letter-spacing: 0.22em;
    text-transform: uppercase; padding: 0.55rem 1.1rem 0.55rem 0.9rem; cursor: none;
    pointer-events: all; transition: all 0.22s; font-family: 'Noto Serif JP', Georgia, serif;
    border-radius: 1px; display: flex; align-items: center; gap: 0.5em;
  }
  #step-outside::before { content: '↖'; font-size: 0.75rem; opacity: 0.7; }
  #step-outside:hover { background: rgba(232,146,42,0.12); border-color: rgba(232,146,42,0.8); color: #f0c060; }
  #inside-hint {
    position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
    font-size: 0.82rem; color: rgba(240,200,130,0.95); letter-spacing: 0.22em; text-transform: uppercase;
    pointer-events: none; white-space: nowrap;
    text-shadow: 0 0 18px rgba(240,180,80,0.5), 0 2px 8px rgba(0,0,0,0.95);
    animation: hintPulse 2.4s ease-in-out infinite, hintFade 1s ease 25s forwards;
    font-weight: 500;
    background: rgba(3,1,0,0.5); padding: 0.5rem 1.2rem; border-radius: 2px;
  }
  @keyframes hintPulse { 0%,100%{opacity:0.75;} 50%{opacity:1;} }
  @keyframes hintFade { to { opacity: 0; pointer-events: none; } }

  /* ── Canvas blocker — solid div over canvas when any overlay opens ── */
  /* ── Canvas dim layer (replaces canvas-blocker - never hides scene) ── */
  #canvas-blocker {
    position: fixed; inset: 0; background: rgba(1,0,0,0.72);
    pointer-events: none; z-index: 45;
    opacity: 0; transition: opacity 0.26s ease;
  }
  #canvas-blocker.active { opacity: 1; }

  /* ── Overlays — opacity transitions, never display:none ── */
  #menu-overlay {
    position: fixed; inset: 0; background: rgba(3,1,0,0.52);
    display: flex; align-items: center; justify-content: center; z-index: 50;
    pointer-events: none; opacity: 0;
    transition: opacity 0.26s ease;
  }
  #menu-overlay.active { opacity: 1; pointer-events: all; }

  /* Menu card pickup animation */
  @keyframes menuPickup {
    from { opacity:0; transform: translateY(48px) scale(0.82) perspective(600px) rotateX(6deg); }
    to   { opacity:1; transform: translateY(0)    scale(1)    perspective(600px) rotateX(0deg); }
  }
  .menu-card {
    background: #faf5e8; border: 1.5px solid #8b1a1a; max-width: 520px; width: 92%;
    padding: 2rem 2rem 1.4rem; position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(139,26,26,0.08), inset 0 1px 0 rgba(255,245,220,0.6);
    animation: menuPickup 0.42s cubic-bezier(0.34,1.4,0.64,1);
  }
  @keyframes overlayFadeOut { from{opacity:1;} to{opacity:0;} }
  .overlay-closing { animation:overlayFadeOut 0.22s ease forwards; pointer-events:none!important; }
  @keyframes slideInRight { from{opacity:0;transform:translateX(28px)} to{opacity:1;transform:translateX(0)} }
  @keyframes slideInLeft  { from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:translateX(0)} }
  .panel-card.slide-right { animation:slideInRight 0.26s cubic-bezier(0.22,1,0.36,1); }
  .panel-card.slide-left  { animation:slideInLeft  0.26s cubic-bezier(0.22,1,0.36,1); }

  /* ── Scroll indicator ── */
  .scroll-hint {
    text-align: center; padding: 0.5rem 0 0.2rem; font-size: 0.55rem;
    color: #8b1a1a55; letter-spacing: 0.2em; text-transform: uppercase;
    animation: scrollBounce 1.8s ease-in-out infinite;
  }
  @keyframes scrollBounce { 0%,100%{opacity:0.3;transform:translateY(0)} 50%{opacity:0.8;transform:translateY(2px)} }
  .menu-card::before { content:''; position:absolute; inset:7px; border:1px solid #c8a06028; pointer-events:none; }
  .menu-header { text-align:center; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid #8b1a1a2a; }
  .menu-title { font-size:1.9rem; color:#8b1a1a; letter-spacing:0.12em; }
  .menu-subtitle { font-size:0.6rem; color:#8a6a3a; letter-spacing:0.32em; text-transform:uppercase; margin-top:0.35rem; }
  .menu-stamp { position:absolute; top:1rem; right:1rem; width:56px; height:56px; border:2px solid #8b1a1a; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#8b1a1a; font-size:0.48rem; text-align:center; letter-spacing:0.05em; transform:rotate(15deg); opacity:0.5; line-height:1.4; }
  .menu-items { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; }
  .menu-item { border:1px solid #8b1a1a22; padding:0.95rem; cursor:none; transition:background 0.18s,border-color 0.18s,transform 0.15s; background:rgba(139,26,26,0.025); }
  .menu-item:hover { background:rgba(139,26,26,0.09); border-color:#8b1a1a77; transform:translateY(-1px); }
  .menu-item-num { font-size:0.56rem; color:#8b1a1a66; letter-spacing:0.2em; margin-bottom:0.28rem; }
  .menu-item-kanji { font-size:1.5rem; color:#8b1a1a; }
  .menu-item-name { font-size:0.77rem; color:#3a2a1a; letter-spacing:0.1em; margin-top:0.18rem; }
  .menu-item-desc { font-size:0.62rem; color:#7a6a5a; margin-top:0.28rem; line-height:1.45; }
  /* ── Button resets ── */
  .menu-close,.kb-close,.panel-close,.panel-nav-btn,.ic-close,.panel-dot {
    background:none; border:none; font-family:'Noto Serif JP',Georgia,serif; appearance:none; -webkit-appearance:none;
  }
  .menu-close { width:100%; }
  .kb-close   { width:100%; }
  .menu-close { text-align:center; margin-top:1.3rem; font-size:0.6rem; padding-top:1rem; color:#8a6a3a88; letter-spacing:0.22em; cursor:none; border-top:1px solid #8b1a1a15; transition:color 0.2s; text-transform:uppercase; }
  .menu-close:hover { color:#8b1a1a; }

  /* Panel overlay — side drawer, shows restaurant behind */
  #panel-overlay {
    position: fixed; inset: 0;
    display: flex; align-items: stretch; justify-content: flex-end; z-index: 60;
    pointer-events: none; opacity: 0;
    transition: opacity 0.26s ease;
  }
  #panel-overlay.active { opacity: 1; pointer-events: all; }
  .panel-card {
    background: #faf5e8; border-left: 2px solid #8b1a1a; max-width: 560px; width: 92%;
    padding: 2rem; position: relative; height: 100%; overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,245,220,0.6);
    animation: slideInFromRight 0.32s cubic-bezier(0.16,1,0.3,1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    border-radius: 0;
  }
  @keyframes slideInFromRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  .panel-card.slide-right { animation: slideInFromRight 0.26s cubic-bezier(0.16,1,0.3,1); }
  .panel-card.slide-left  { animation: slideInFromRight 0.26s cubic-bezier(0.16,1,0.3,1); }
  /* ── Panel read-progress bar ── */
  .panel-progress {
    position: sticky; top: 0; left: 0; right: 0; height: 2px;
    background: #e8d5b0; margin: -2rem -2rem 1.8rem; z-index: 1;
    overflow: hidden;
  }
  .panel-progress-fill {
    height: 100%; background: linear-gradient(90deg, #8b1a1a, #c8502a);
    width: 0%; transition: width 0.1s linear;
  }
  .panel-close {
    position: absolute; top: 0.7rem; right: 0.8rem; cursor: none;
    font-size: 0.58rem; color: #8a6a3a66; letter-spacing: 0.12em; text-transform: uppercase;
    transition: color 0.2s, background 0.2s; padding: 0.35rem 0.65rem;
    border: 1px solid transparent; border-radius: 2px;
  }
  .panel-close:hover { color: #8b1a1a; background: rgba(139,26,26,0.06); border-color: #8b1a1a22; }
  .panel-card::before { content:''; position:absolute; inset:7px; border:1px solid #c8a06028; pointer-events:none; }
  .panel-card::-webkit-scrollbar { width: 4px; }
  .panel-card::-webkit-scrollbar-track { background: #f0e8d0; }
  .panel-card::-webkit-scrollbar-thumb { background: #8b1a1a44; border-radius: 2px; }
  .panel-header { border-bottom:1px solid #8b1a1a2a; padding-bottom:1rem; margin-bottom:1.5rem; }
  .panel-kanji { font-size:2.2rem; color:#8b1a1a; animation: clipReveal 0.72s cubic-bezier(0.22, 1, 0.28, 1) both; }
  .panel-title { font-size:0.95rem; color:#3a2a1a; letter-spacing:0.22em; text-transform:uppercase; margin-top:0.25rem; animation: clipReveal 0.58s cubic-bezier(0.22, 1, 0.28, 1) 0.12s both; }
  /* Softer ease-out — ink bleeds in, not a hard wipe. Cubic (0.22, 1, 0.28, 1)
     decelerates gradually over ~70% of the duration, giving that calligraphic feel. */
  @keyframes clipReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }

  /* ── Current-role badge ── */
  .current-badge {
    display: inline-block; font-size: 0.46rem; padding: 0.06rem 0.42rem;
    background: rgba(139,26,26,0.08); border: 1px solid #8b1a1a44; color: #8b1a1a;
    letter-spacing: 0.14em; text-transform: uppercase; margin-left: 0.55rem;
    vertical-align: middle; border-radius: 2px;
  }
  .panel-content { color:#3a2a1a; line-height:1.78; font-size:0.87rem; }
  .project-entry { margin-bottom:1.4rem; padding-bottom:1.4rem; border-bottom:1px solid #8b1a1a18; }
  .project-entry:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
  .project-num { font-size:0.56rem; color:#8b1a1a66; letter-spacing:0.2em; }
  .project-name { font-size:1rem; color:#2a1a0a; font-weight:bold; margin:0.22rem 0 0.1rem; }
  .project-impact { font-size:0.72rem; color:#8b1a1a; letter-spacing:0.04em; margin-bottom:0.38rem; font-style:italic; }
  .project-tools { font-size:0.66rem; color:#8a6a3a; letter-spacing:0.1em; margin-bottom:0.42rem; }
  .project-desc { font-size:0.8rem; color:#5a4a3a; line-height:1.65; }
  .project-link { display:inline-block; margin-top:0.48rem; font-size:0.66rem; color:#8b1a1a; letter-spacing:0.08em; text-decoration:none; border-bottom:1px solid #8b1a1a2a; padding-bottom:1px; transition:border-color 0.18s; }
  .project-link:hover { border-color:#8b1a1a; }
  /* ── Experience timeline ── */
  .exp-timeline { position: relative; padding-left: 1.4rem; }
  .exp-timeline::before {
    content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem;
    width: 1px; background: linear-gradient(to bottom, #8b1a1a44, #8b1a1a18);
  }
  .exp-entry { position: relative; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #8b1a1a12; }
  .exp-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .exp-entry::before {
    content: ''; position: absolute; left: -1.73rem; top: 0.38rem;
    width: 8px; height: 8px; border-radius: 50%;
    background: #e8d0b0; border: 1.5px solid #8b1a1a33;
  }
  .exp-entry.current::before {
    background: #8b1a1a; border-color: #8b1a1a;
    box-shadow: 0 0 0 3px rgba(139,26,26,0.12);
  }
  .exp-role { font-size: 0.94rem; font-weight: bold; color: #1a0e06; }
  .exp-company { font-size: 0.76rem; color: #8b1a1a; margin-top: 0.12rem; letter-spacing: 0.02em; }
  .exp-date { font-size: 0.58rem; color: #9a7a4a; margin: 0.18rem 0 0.5rem; letter-spacing: 0.1em; }
  .exp-bullets { padding-left: 1rem; font-size: 0.78rem; color: #5a4a3a; line-height: 1.7; }
  .exp-bullets li { margin-bottom: 0.28rem; }
  .exp-bullets li::marker { color: #8b1a1a88; }

  /* ── Project card polish ── */
  .project-entry {
    margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid #8b1a1a14;
    transition: background 0.2s; border-radius: 2px; padding: 0.85rem 0.75rem;
    margin-left: -0.75rem; margin-right: -0.75rem;
  }
  .project-entry:last-child { border-bottom: none; }
  .project-entry:hover { background: rgba(139,26,26,0.026); }
  .project-num { font-size: 0.52rem; color: #8b1a1a55; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 0.18rem; }
  .project-name { font-size: 1rem; color: #1a0e06; font-weight: bold; margin: 0.15rem 0 0.35rem; line-height: 1.25; }
  .project-impact { font-size: 0.71rem; color: #8b1a1a; letter-spacing: 0.03em; margin-bottom: 0.4rem; font-style: italic; }
  .project-desc { font-size: 0.79rem; color: #5a4a3a; line-height: 1.68; }

  /* ── Contact panel callout ── */
  .contact-seeking {
    display: flex; align-items: center; gap: 0.6rem;
    background: rgba(139,26,26,0.04); border: 1px solid #8b1a1a1a;
    border-left: 3px solid #8b1a1a; padding: 0.7rem 0.9rem;
    margin-bottom: 1.2rem; border-radius: 0 2px 2px 0;
  }
  .contact-seeking-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #4caf50;
    box-shadow: 0 0 6px #4caf5088; flex-shrink: 0;
    animation: ping 2.5s ease-in-out infinite;
  }
  .contact-seeking-text { font-size: 0.73rem; color: #3a2a1a; line-height: 1.5; }
  .contact-seeking-text strong { color: #1a0e06; }
  .skill-group { margin-bottom:1rem; }
  .skill-group-title { font-size:0.63rem; color:#8b1a1a; letter-spacing:0.22em; text-transform:uppercase; margin-bottom:0.5rem; }
  .skill-tags { display:flex; flex-wrap:wrap; gap:0.38rem; }
  .skill-tag { font-size:0.69rem; padding:0.2rem 0.62rem; border:1px solid #8b1a1a2a; color:#5a3a1a; transition:all 0.16s; }
  .skill-tag:hover { background:rgba(139,26,26,0.07); border-color:#8b1a1a55; }
  .contact-row { display:flex; align-items:flex-start; gap:1rem; margin-bottom:0.88rem; }
  .contact-label { font-size:0.58rem; color:#8b1a1a; letter-spacing:0.18em; text-transform:uppercase; width:66px; padding-top:0.2rem; flex-shrink:0; }
  .contact-val { color:#3a2a1a; font-size:0.84rem; }
  .contact-val a { color:#8b1a1a; text-decoration:none; border-bottom:1px solid #8b1a1a1a; transition:border-color 0.18s; }
  .contact-val a:hover { border-color:#8b1a1a; }
  /* resume-link styled below in Resume badge section */
  .contact-note { margin-top:1.4rem; padding-top:1rem; border-top:1px solid #8b1a1a15; font-size:0.79rem; color:#6a5a4a; line-height:1.8; font-style:italic; }

  /* ── Between-panel navigation ── */
  .panel-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid #8b1a1a18;
  }
  .panel-nav-btn {
    font-size: 0.6rem; color: #8a6a3a88; letter-spacing: 0.18em; text-transform: uppercase;
    cursor: none; padding: 0.4rem 0.8rem; border: 1px solid transparent;
    transition: all 0.2s; background: none;
    font-family: 'Noto Serif JP', Georgia, serif;
  }
  .panel-nav-btn:hover { color: #8b1a1a; border-color: #8b1a1a22; background: rgba(139,26,26,0.04); }
  .panel-nav-btn:disabled { opacity: 0.2; pointer-events: none; }
  .panel-nav-dots { display: flex; gap: 0.5rem; align-items: center; }
  .panel-dot { width: 7px; height: 7px; border-radius: 50%; background: #8b1a1a20; border: 1px solid #8b1a1a33; transition: background 0.2s, transform 0.2s; cursor: none; }
  .panel-dot:hover { background: #8b1a1a55; transform: scale(1.2); }
  .panel-dot.active { background: #8b1a1a; border-color: #8b1a1a; transform: scale(1.15); }

  /* ── Panel watermark ── */
  .panel-card::after {
    content: 'TJ麺'; position: absolute; bottom: 3.5rem; right: 2rem;
    font-size: 4.5rem; color: rgba(139,26,26,0.04); pointer-events: none;
    letter-spacing: 0.08em; z-index: 0; user-select: none;
    font-family: 'Noto Serif JP', Georgia, serif;
  }

  /* ── Inside nav upgrade ── */
  #inside-nav {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; justify-content: center; align-items: center; gap: 0; padding: 0.9rem 0 0.2rem;
    pointer-events: all;
    background: linear-gradient(to bottom, rgba(2,1,0,0.98) 0%, rgba(3,1,0,0.88) 70%, transparent 100%);
    border-bottom: 1px solid rgba(232,146,42,0.18);
  }
  .inside-nav-btn {
    font-size: 0.64rem; color: rgba(200,168,112,0.8); letter-spacing: 0.22em; text-transform: uppercase;
    padding: 0.75rem 1.4rem 0.85rem; cursor: none; background: none; border: none;
    font-family: 'Noto Serif JP', Georgia, serif;
    transition: color 0.18s, border-bottom-color 0.18s, background 0.18s;
    border-bottom: 2px solid transparent; min-width: 80px; text-align: center;
    text-shadow: 0 1px 8px rgba(0,0,0,0.95);
  }
  .inside-nav-btn sup {
    font-size: 0.72rem; color: #e8c078; opacity: 0.85; margin-left: 0.25em; letter-spacing: 0; vertical-align: super;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
  }
  .inside-nav-btn:hover, .inside-nav-btn.active {
    color: #f0c060; border-bottom-color: #f0c060;
    background: rgba(232,146,42,0.06);
    text-shadow: 0 0 14px rgba(232,146,42,0.7), 0 1px 6px rgba(0,0,0,0.95);
  }
  .inside-nav-btn.active sup { opacity: 1; }
  .inside-nav-resume {
    text-decoration: none; margin-left: 0.5rem;
    border-left: 1px solid rgba(200,168,112,0.15); padding-left: 1.4rem;
    color: rgba(240,192,96,0.85); font-weight: 400;
  }
  .inside-nav-resume:hover { background: rgba(232,146,42,0.1); }
  @media (max-width: 600px) {
    .inside-nav-btn { padding: 0.8rem 0.5rem; font-size: 0.5rem; min-width: 48px; letter-spacing: 0.1em; }
    .inside-nav-btn sup { display: none; }
    #inside-nav { padding-top: 0.3rem; }
  }

  /* ── HUD parallax elements ── */
  #time-disp, #avail-badge { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

  /* ── Click ripple ── */
  .click-ripple {
    position: fixed; border-radius: 50%; border: 1px solid #e8922a;
    pointer-events: none; z-index: 9; transform: translate(-50%, -50%) scale(0);
    animation: rippleOut 0.6s ease-out forwards;
  }
  @keyframes rippleOut {
    0% { width: 10px; height: 10px; opacity: 0.8; transform: translate(-50%,-50%) scale(0); }
    100% { width: 80px; height: 80px; opacity: 0; transform: translate(-50%,-50%) scale(1); }
  }

  /* ── Experience timeline ── */
  .exp-timeline { padding-left: 1.5rem; position: relative; }
  .exp-timeline::before {
    content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0;
    width: 1px; background: linear-gradient(to bottom, #8b1a1a44, transparent);
  }
  .exp-entry { position: relative; }
  .exp-entry::before {
    content: ''; position: absolute; left: -1.72rem; top: 0.38rem;
    width: 6px; height: 6px; border-radius: 50%;
    background: #faf5e8; border: 1.5px solid #8b1a1a; box-shadow: 0 0 0 2px #faf5e8;
  }
  .exp-entry.current::before { background: #8b1a1a; }

  /* ── Resume badge in contact ── */
  .resume-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.65rem; color: #6a5030; letter-spacing: 0.15em; text-transform: uppercase;
    text-decoration: none; border: 1px solid #8b1a1a2a; padding: 0.45rem 0.9rem;
    margin-top: 0.6rem; transition: all 0.18s;
  }
  .resume-link:hover { border-color: #8b1a1a; color: #8b1a1a; background: rgba(139,26,26,0.04); }

  /* ── Tool pills ── */
  .tool-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0.5rem; }
  .tool-pill {
    font-size: 0.58rem; padding: 0.12rem 0.52rem; border-radius: 20px;
    letter-spacing: 0.06em; font-weight: 400; white-space: nowrap;
  }
  .tp-sql   { background: #e6f4ea; color: #1a6630; border: 1px solid #a8d5b0; }
  .tp-py    { background: #e8f0fe; color: #1a47a0; border: 1px solid #aac0e8; }
  .tp-r     { background: #f0e6f6; color: #6a1a8a; border: 1px solid #cca8e0; }
  .tp-excel { background: #e6f6ee; color: #0a5a3a; border: 1px solid #88ccaa; }
  .tp-js    { background: #fef8e0; color: #7a5a00; border: 1px solid #e0c850; }
  .tp-bi    { background: #fff0e6; color: #8a3800; border: 1px solid #e0a878; }
  .tp-other { background: #f5f0e8; color: #5a4a32; border: 1px solid #c8b898; }

  /* ── Project link buttons ── */
  .proj-btn-row { display: flex; gap: 0.6rem; margin-top: 0.65rem; flex-wrap: wrap; }
  .proj-btn-live {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
    padding: 0.38rem 0.85rem; background: #8b1a1a; color: #faf5e8;
    transition: background 0.18s, transform 0.12s;
  }
  .proj-btn-live:hover { background: #a52020; transform: translateY(-1px); }
  .proj-btn-gh {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
    padding: 0.38rem 0.85rem; border: 1px solid #8b1a1a44; color: #8b1a1a;
    transition: all 0.18s;
  }
  .proj-btn-gh:hover { background: rgba(139,26,26,0.08); border-color: #8b1a1a; }

  /* ── Sound waveform ── */
  #sound-wave {
    position: fixed; bottom: 1.65rem; left: 3.4rem; z-index: 15;
    display: flex; align-items: center; gap: 2px; pointer-events: none;
    opacity: 0; transition: opacity 0.4s;
  }
  #sound-wave.active { opacity: 1; }
  .wave-bar {
    width: 2px; background: #e8922a88; border-radius: 1px;
    animation: waveBounce 0.9s ease-in-out infinite;
  }
  .wave-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
  .wave-bar:nth-child(2) { height: 10px; animation-delay: 0.15s; }
  .wave-bar:nth-child(3) { height: 7px; animation-delay: 0.3s; }
  .wave-bar:nth-child(4) { height: 9px; animation-delay: 0.1s; }
  @keyframes waveBounce {
    0%,100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
  }

  /* ── Keyboard shortcut hint ── */
  /* (removed — element not in DOM) */
  #sound-btn {
    position: fixed; bottom: 1.5rem; left: 1.8rem; z-index: 15;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    border-radius: 50%;
    background: rgba(8,4,1,0.82); border: 1px solid #e8922a33;
    color: #e8922a88; font-size: 0.95rem; cursor: none;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.22s; pointer-events: all;
    font-family: 'Noto Serif JP', Georgia, serif;
  }
  #sound-btn:hover { background: rgba(232,146,42,0.12); border-color: #e8922a66; color: #e8922a; }
  #sound-btn.muted { color: #5a4020; border-color: #2a1808; }

  /* ── Interaction card ── */
  #interact-card {
    position: fixed; bottom: 2rem; right: 1.8rem; width: 300px;
    background: #faf5e8; border: 1.5px solid #8b1a1a;
    box-shadow: 0 20px 50px rgba(0,0,0,0.88), 0 0 0 1px rgba(139,26,26,0.06), inset 0 1px 0 rgba(255,245,220,0.5);
    padding: 1.2rem 1.3rem 1rem; z-index: 40; pointer-events: all;
    transform: translateX(130%); transition: transform 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
    opacity: 0;
  }
  #interact-card.visible { transform: translateX(0); opacity: 1; }
  #interact-card::before { content:''; position:absolute; inset:5px; border:1px solid rgba(200,160,96,0.14); pointer-events:none; }
  .ic-emoji { font-size: 1.6rem; line-height: 1; margin-bottom: 0.5rem; display: block; }
  .ic-kanji { font-size: 1.1rem; color: #8b1a1a; letter-spacing: 0.06em; }
  .ic-subtitle { font-size: 0.56rem; color: #8a6a3a; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0.1rem; margin-bottom: 0.62rem; }
  .ic-body { font-size: 0.76rem; color: #4a3a2a; line-height: 1.75; }
  .ic-body strong { color: #2a1a0a; font-weight: bold; }
  .ic-close {
    position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: none;
    font-size: 0.56rem; color: #8a6a3a66; cursor: none; letter-spacing: 0.1em;
    padding: 0.3rem 0.5rem; transition: color 0.18s;
  }
  .ic-close:hover { color: #8b1a1a; }
  .ic-progress {
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #8b1a1a, #c8502a);
    transform-origin: left; animation: icTimer var(--ic-dur, 6s) linear forwards;
  }
  @keyframes icTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

  /* ── Seated overlay — now clickable to stand up ── */
  #seated-overlay {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; pointer-events: all; z-index: 30; cursor: none;
    opacity: 0; transition: opacity 0.5s ease;
  }
  #seated-overlay.visible { opacity: 1; }
  .seated-label {
    font-size: 0.56rem; color: rgba(240,192,96,0.75); letter-spacing: 0.42em;
    text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,0.95);
  }
  .seated-order {
    font-size: 1.05rem; color: #f5d070; letter-spacing: 0.1em;
    text-shadow: 0 0 20px rgba(232,146,42,0.5), 0 2px 8px rgba(0,0,0,0.9);
    margin: 0.35rem 0 0.2rem;
  }
  .seated-hint {
    font-size: 0.48rem; color: rgba(200,168,112,0.4); letter-spacing: 0.3em;
    text-transform: uppercase; margin-top: 0.5rem;
    animation: pulse 2.5s ease-in-out infinite;
  }
  /* ── Project stat callouts ── */
  .proj-stats { display:flex; gap:1.4rem; margin:0.55rem 0 0.6rem; padding:0.55rem 0.8rem; background:rgba(139,26,26,0.03); border-left:2px solid #8b1a1a22; }
  .proj-stat { text-align:center; min-width:36px; }
  .proj-stat-num { font-size:1.05rem; font-weight:bold; color:#8b1a1a; line-height:1; letter-spacing:-0.02em; }
  .proj-stat-label { font-size:0.46rem; color:#9a7a4a; letter-spacing:0.1em; text-transform:uppercase; margin-top:0.15rem; }

  /* ── Certifications ── */
  .cert-entry { display:flex; align-items:flex-start; gap:0.55rem; padding:0.5rem 0; border-bottom:1px solid #8b1a1a0c; }
  .cert-entry:last-child { border-bottom:none; }
  .cert-icon { font-size:0.95rem; flex-shrink:0; margin-top:0.05rem; }
  .cert-name { font-size:0.77rem; color:#2a1a0a; font-weight:bold; line-height:1.3; }
  .cert-issuer { font-size:0.59rem; color:#8a6a3a; margin-top:0.1rem; }

  /* ── Skill bars ── */
  .skill-bar-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; }
  .skill-bar-name { font-size: 0.78rem; color: #3a2a1a; }
  .skill-bar-pct { font-size: 0.6rem; color: #8a6a3a; letter-spacing: 0.1em; }
  .skill-bar-track { height: 3px; background: #e8d5b0; border-radius: 2px; overflow: hidden; }
  .skill-bar-fill {
    height: 100%; background: linear-gradient(90deg, #8b1a1a, #c8502a);
    border-radius: 2px; width: 0;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .skill-section-title { font-size: 0.6rem; color: #8b1a1a; letter-spacing: 0.25em; text-transform: uppercase; margin: 1.2rem 0 0.7rem; padding-bottom: 0.35rem; border-bottom: 1px solid #8b1a1a15; }
  .skill-section-title:first-child { margin-top: 0; }
  .skill-tags-small { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-top: 0.5rem; }
  .skill-tag-sm { font-size: 0.65rem; padding: 0.15rem 0.5rem; border: 1px solid #8b1a1a1a; color: #6a4a2a; background: rgba(139,26,26,0.03); }

  /* ── About intro ── */
  .about-intro {
    font-size: 0.82rem; color: #4a3a2a; line-height: 1.88;
    margin-bottom: 1.35rem; padding-bottom: 1.35rem;
    border-bottom: 1px solid #8b1a1a18; font-style: italic;
  }

  /* ── Contact form ── */
  .contact-form { margin-top: 1.2rem; }
  .cf-row { margin-bottom: 0.75rem; }
  .cf-label { font-size: 0.55rem; color: #8b1a1a; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 0.3rem; }
  .cf-input, .cf-textarea {
    width: 100%; padding: 0.55rem 0.7rem;
    background: rgba(139,26,26,0.03); border: 1px solid #8b1a1a22;
    color: #2a1a0a; font-family: 'Noto Serif JP', Georgia, serif; font-size: 0.8rem;
    transition: border-color 0.18s, background 0.18s; box-sizing: border-box;
  }
  .cf-input:focus, .cf-textarea:focus { outline: none; border-color: #8b1a1a66; background: rgba(139,26,26,0.055); }
  .cf-textarea { resize: vertical; min-height: 90px; }
  .cf-submit {
    width: 100%; padding: 0.72rem; margin-top: 0.15rem;
    background: #8b1a1a; color: #faf5e8; border: none;
    font-family: 'Noto Serif JP', Georgia, serif; font-size: 0.7rem;
    letter-spacing: 0.22em; text-transform: uppercase; cursor: none; transition: background 0.2s;
  }
  .cf-submit:hover { background: #a02020; }
  .cf-note { font-size: 0.54rem; color: #9a7a4a; margin-top: 0.45rem; text-align: center; letter-spacing: 0.06em; }

  /* ── Copy button ── */
  .copy-btn {
    font-size: 0.52rem; padding: 0.1rem 0.42rem; margin-left: 0.45rem;
    background: rgba(139,26,26,0.06); border: 1px solid #8b1a1a33; color: #8b1a1a99;
    letter-spacing: 0.1em; text-transform: uppercase; cursor: none;
    font-family: 'Noto Serif JP', Georgia, serif; transition: all 0.18s; vertical-align: middle;
  }
  .copy-btn:hover { background: rgba(139,26,26,0.14); color: #8b1a1a; border-color: #8b1a1a66; }
  .copy-btn.copied { color: #2a6a2a; border-color: #2a6a2a55; background: rgba(42,106,42,0.06); }
  .contact-cta {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;
    background: #8b1a1a; color: #faf5e8; text-decoration: none;
    font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 0.7rem 1.4rem; transition: background 0.2s, transform 0.15s;
  }
  .contact-cta:hover { background: #a02020; transform: translateY(-1px); }
  .contact-divider { border: none; border-top: 1px solid #8b1a1a15; margin: 1.2rem 0; }
  /* ── Hover label ── */
  #hover-label {
    position: fixed; pointer-events: none; z-index: 9997;
    font-size: 0.6rem; color: #f0c060; letter-spacing: 0.2em; text-transform: uppercase;
    background: rgba(8,4,1,0.82); border: 1px solid #e8922a33;
    padding: 0.3rem 0.7rem; white-space: nowrap;
    opacity: 0; transition: opacity 0.2s ease;
    transform: translate(18px, -50%);
  }
  #hover-label.visible { opacity: 1; }

  /* ── Drag state ring ── */
  #cursor-ring.dragging { width: 28px; height: 28px; border-color: #e8922a22; }

  /* ── Mobile enter button ── */
  #mobile-enter {
    display: none;
    position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%);
    background: rgba(8,4,1,0.88); border: 1px solid #e8922a66;
    color: #e8922a; font-size: 0.72rem; letter-spacing: 0.28em;
    text-transform: uppercase; padding: 0.75rem 2rem;
    font-family: Georgia, serif; pointer-events: all;
    animation: pulse 2s ease-in-out infinite;
  }
  @media (hover: none) and (pointer: coarse) {
    #mobile-enter { display: block; }
    #outside-ui .hint { display: none; }
  }
  @media (max-width: 600px) {
    #time-disp { display: none; }
    #avail-badge { top: 1rem; right: 1rem; font-size: 0.55rem; }
  }

  /* ── Availability badge ── */
  #avail-badge {
    position: fixed; top: 1.4rem; right: 1rem;
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.6rem; color: #8a7040; letter-spacing: 0.2em; text-transform: uppercase;
    animation: fadeUpSimple 1s ease 3s both;
    pointer-events: all; cursor: none; text-decoration: none;
    transition: color 0.2s;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  }
  #avail-badge:hover { color: #c8a060; }
  #avail-badge::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: #4caf50; box-shadow: 0 0 6px #4caf5099, 0 0 12px #4caf5044;
    animation: ping 2.5s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes ping { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }

  /* ── Cursor trail ── */
  .tr { position:fixed; width:5px; height:5px; border-radius:50%; background:#e8922a; pointer-events:none; z-index:9990; transform:translate(-50%,-50%); mix-blend-mode:screen; }

  /* ── Panel stagger ── */
  @keyframes entryIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  .project-entry, .exp-entry, .skill-group, .contact-row, .contact-note { animation: entryIn 0.35s ease both; }
  .project-entry:nth-child(1),.exp-entry:nth-child(1),.skill-group:nth-child(1),.contact-row:nth-child(1) { animation-delay:0.05s; }
  .project-entry:nth-child(2),.exp-entry:nth-child(2),.skill-group:nth-child(2),.contact-row:nth-child(2) { animation-delay:0.12s; }
  .project-entry:nth-child(3),.exp-entry:nth-child(3),.skill-group:nth-child(3),.contact-row:nth-child(3) { animation-delay:0.19s; }
  .project-entry:nth-child(4),.exp-entry:nth-child(4),.skill-group:nth-child(4),.contact-row:nth-child(4) { animation-delay:0.26s; }
  .project-entry:nth-child(5),.exp-entry:nth-child(5),.skill-group:nth-child(5),.contact-row:nth-child(5) { animation-delay:0.33s; }
  .project-entry:nth-child(6) { animation-delay:0.40s; }
  .contact-note { animation-delay:0.55s; }

  @media (max-width:600px) { .menu-items { grid-template-columns:1fr; } .menu-card,.panel-card { padding:1.4rem; } #step-outside { bottom:1rem; right:1rem; } }

  /* ── Skip link ── */
  .skip-link {
    position: fixed; top: -100%; left: 1rem; z-index: 10000;
    background: #faf5e8; color: #8b1a1a; padding: 0.6rem 1.2rem;
    font-size: 0.75rem; letter-spacing: 0.1em; text-decoration: none;
    border: 1.5px solid #8b1a1a; transition: top 0.2s;
  }
  .skip-link:focus { top: 1rem; }

  /* ── Focus visible — never hidden ── */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid #e8922a;
    outline-offset: 3px;
    border-radius: 2px;
  }
  /* Panels/overlays get a stronger focus ring */
  .panel-card :focus-visible, .menu-card :focus-visible, .kb-card :focus-visible {
    outline: 2px solid #8b1a1a; outline-offset: 2px;
  }

  /* ── Touch target minimum 44×44 ── */
  #sound-btn, #kb-btn {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .panel-close, .menu-close, .kb-close { min-height: 36px; }
  .menu-item { min-height: 80px; }
  .inside-nav-btn { min-height: 44px; }

  /* ── kb-btn ── */
  #kb-btn {
    position: fixed; bottom: 1.5rem; left: 5rem; z-index: 15;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(8,4,1,0.82); border: 1px solid rgba(232,146,42,0.2);
    color: #5a4020; font-size: 0.72rem; cursor: none;
    transition: all 0.22s; pointer-events: all;
    font-family: 'Noto Serif JP', Georgia, serif;
  }
  #kb-btn:hover, #kb-btn:focus-visible { background: rgba(232,146,42,0.12); border-color: rgba(232,146,42,0.5); color: #e8922a; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .loader-fill, .skill-bar-fill { transition-duration: 0.3s !important; }
    #scene-fade { transition-duration: 0.1ms !important; }
  }

  /* ── Keyboard shortcuts overlay ── */
  #kb-overlay {
    position: fixed; inset: 0; background: rgba(4,2,1,0.88); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center; z-index: 70;
    pointer-events: all;
  }
  #kb-overlay.active { display: flex; }
  .kb-card {
    background: #faf5e8; border: 2px solid #8b1a1a; max-width: 420px; width: 92%;
    padding: 1.8rem 2rem; animation: slideUp 0.24s ease;
    box-shadow: 0 28px 70px rgba(0,0,0,0.9);
  }
  .kb-card::before { content:''; position:absolute; inset:7px; border:1px solid #c8a06028; pointer-events:none; }
  .kb-title { font-size: 0.7rem; color: #8b1a1a; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid #8b1a1a20; }
  .kb-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.2rem; align-items: center; }
  .kb-key {
    display: inline-flex; align-items: center; justify-content: center;
    background: #f0e8d0; border: 1px solid #c8a870; border-bottom: 2px solid #8b6030;
    border-radius: 3px; padding: 0.18rem 0.55rem; font-size: 0.62rem; color: #4a2a0a;
    letter-spacing: 0.05em; min-width: 28px; font-family: Georgia, serif;
  }
  .kb-desc { font-size: 0.72rem; color: #5a4a3a; }
  .kb-section { grid-column: 1/-1; font-size: 0.55rem; color: #8b1a1a; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid #8b1a1a15; }
  .kb-close { text-align: center; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid #8b1a1a15; font-size: 0.6rem; color: #8a6a3a88; letter-spacing: 0.2em; text-transform: uppercase; cursor: none; transition: color 0.2s; }
  .kb-close:hover { color: #8b1a1a; }
  /* Omikuji fortune card. Centered washi slip, reuses the paper look */
  #omikuji-overlay {
    position: fixed; inset: 0; background: rgba(4,2,1,0.82); backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; z-index: 72;
    pointer-events: all; cursor: none;
  }
  #omikuji-overlay.active { display: flex; }
  .omikuji-card {
    background: #faf5e8; border: 2px solid #8b1a1a; max-width: 340px; width: 86%;
    padding: 2.2rem 2rem 2rem; text-align: center; position: relative;
    box-shadow: 0 28px 70px rgba(0,0,0,0.9); animation: slideUp 0.24s ease;
  }
  .omikuji-card::before { content:''; position:absolute; inset:7px; border:1px solid #c8a06028; pointer-events:none; }
  .omikuji-head { font-size: 0.55rem; color: #8b1a1a; letter-spacing: 0.34em; text-transform: uppercase; margin-bottom: 1rem; }
  .omikuji-kanji { font-size: 2.6rem; color: #8b1a1a; line-height: 1; margin-bottom: 0.5rem; font-family: 'Noto Serif JP', Georgia, serif; }
  .omikuji-en { font-size: 0.72rem; color: #6a4a2a; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
  .omikuji-msg { font-size: 0.82rem; color: #4a3a2a; line-height: 1.6; margin-bottom: 1.3rem; }
  .omikuji-hint { font-size: 0.55rem; color: #8a6a3a88; letter-spacing: 0.2em; text-transform: uppercase; padding-top: 0.9rem; border-top: 1px solid #8b1a1a15; }
  @media (prefers-reduced-motion: reduce) { .omikuji-card { animation: none; } }
  #music-btn {
    position: fixed; bottom: 1.5rem; left: 8.2rem; z-index: 15;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(8,4,1,0.82); border: 1px solid rgba(232,146,42,0.2);
    color: #5a4020; font-size: 0.72rem; cursor: none;
    transition: all 0.22s; pointer-events: all;
    font-family: 'Noto Serif JP', Georgia, serif;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  #music-btn:hover, #music-btn:focus-visible { background: rgba(232,146,42,0.12); border-color: rgba(232,146,42,0.5); color: #e8922a; }
  #music-btn.active { color: #e8922a; border-color: #e8922a44; }
  .typewriter { overflow:hidden; border-right:2px solid #8a7045; white-space:nowrap; animation:typing 2.2s steps(40,end) 3s both, blinkCaret 0.75s step-end infinite 3s; max-width:0; display:inline-block; vertical-align:bottom; }
  @keyframes typing { from{max-width:0} to{max-width:30em} }
  @keyframes blinkCaret { from,to{border-color:transparent} 50%{border-color:#8a7045} }
  @keyframes emojiRain { 0% { transform:translateY(0) rotate(0deg); opacity:1; } 100% { transform:translateY(110vh) rotate(720deg); opacity:0; } }

  /* ─── Film grain overlay (atmospheric, DOM-only) ─────────────────── */
  #grain-layer {
    position: fixed; inset: -12%; pointer-events: none; z-index: 4;
    opacity: 0.06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 0.9s steps(6) infinite;
    will-change: transform;
  }
  @keyframes grainShift {
    0%   { transform: translate(0,0); }
    16%  { transform: translate(-2%, 2%); }
    33%  { transform: translate(3%, -3%); }
    50%  { transform: translate(-3%, 2%); }
    66%  { transform: translate(2%, -1%); }
    83%  { transform: translate(-1%, 3%); }
    100% { transform: translate(0, 0); }
  }
  @media (prefers-reduced-motion: reduce) { #grain-layer { animation: none; } }

  /* ─── Breathing vignette — subtle pulse for scene "aliveness" ────── */
  #vignette { animation: vignetteBreath 7s ease-in-out infinite; }
  @keyframes vignetteBreath {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.78; }
  }
  @media (prefers-reduced-motion: reduce) { #vignette { animation: none; } }

  /* ─── Name hover flicker — stronger glow when recruiter hovers ──── */
  #outside-ui .name:hover {
    animation: nameFlicker 1.2s steps(3) infinite, nameBreath 5s ease-in-out 4s infinite;
  }
  @keyframes nameFlicker {
    0%, 100% { text-shadow:
      0 0 30px rgba(245,195,110,0.9),
      0 0 90px rgba(232,146,42,0.55),
      0 0 160px rgba(200,100,20,0.35),
      0 2px 12px rgba(0,0,0,0.9);
    }
    20% { text-shadow:
      0 0 12px rgba(245,195,110,0.4),
      0 0 40px rgba(232,146,42,0.2),
      0 0 80px rgba(200,100,20,0.1),
      0 2px 12px rgba(0,0,0,0.9);
    }
    60% { text-shadow:
      0 0 36px rgba(255,215,130,1),
      0 0 110px rgba(232,146,42,0.65),
      0 0 180px rgba(200,100,20,0.4),
      0 2px 12px rgba(0,0,0,0.9);
    }
  }

  /* ─── Toast notification stack ─────────────────────────────────── */
  #toast-stack {
    position: fixed; top: 4.8rem; right: 1.5rem; z-index: 90;
    display: flex; flex-direction: column; gap: 0.45rem; pointer-events: none;
    max-width: 320px;
  }
  .toast {
    background: rgba(8,3,1,0.94);
    border: 1px solid rgba(232,146,42,0.45);
    border-left: 3px solid #e8922a;
    padding: 0.6rem 0.95rem 0.62rem 0.9rem;
    color: #f0c060;
    font-family: 'Noto Serif JP', Georgia, serif;
    font-size: 0.74rem; letter-spacing: 0.06em; line-height: 1.55;
    text-shadow: 0 0 6px rgba(232,146,42,0.3), 0 1px 3px rgba(0,0,0,0.95);
    box-shadow: 0 6px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(232,146,42,0.15);
    animation: toastIn 0.38s cubic-bezier(0.22, 1, 0.36, 1), toastOut 0.4s ease 5s forwards;
    backdrop-filter: blur(2px);
    will-change: opacity, transform;
  }
  .toast .toast-kanji {
    display: block; font-size: 1.3rem; line-height: 1; color: #f5d070;
    margin-bottom: 0.25rem;
    text-shadow: 0 0 10px rgba(232,146,42,0.5);
  }
  .toast .toast-sub {
    display: block; font-size: 0.55rem; color: rgba(200,168,112,0.7);
    letter-spacing: 0.28em; text-transform: uppercase; margin-top: 0.28rem;
  }
  .toast strong { color: #f5d070; font-weight: 600; }
  @keyframes toastIn  { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes toastOut { to { opacity: 0; transform: translateX(48px); } }
  @media (max-width: 600px) { #toast-stack { left: 1rem; right: 1rem; max-width: none; top: 3.8rem; } }

  /* ─── Lightning flash — dramatic storm moments ─────────────────── */
  #lightning-flash {
    position: fixed; inset: 0; pointer-events: none; z-index: 7;
    background: radial-gradient(ellipse at 50% 18%, rgba(210,230,255,0.75), rgba(140,170,220,0.35) 40%, transparent 62%);
    opacity: 0; mix-blend-mode: screen;
    transition: opacity 0.08s linear;
  }
  @media (prefers-reduced-motion: reduce) { #lightning-flash { display: none; } }

  /* ─── Bloom halo behind the outside title block ──────────────────── */
  #outside-ui::before {
    content: ''; position: absolute; inset: -80px -120px 40px -120px;
    background: radial-gradient(ellipse at 50% 62%, rgba(232,146,42,0.22) 0%, rgba(200,100,20,0.1) 35%, transparent 68%);
    filter: blur(2px);
    pointer-events: none; z-index: -1;
  }

  /* ─── Day/night toggle button ────────────────────────────────────── */
  #daynight-btn {
    position: fixed; bottom: 1.5rem; left: 11.4rem; z-index: 15;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(8,4,1,0.82); border: 1px solid rgba(232,146,42,0.2);
    color: #5a4020; font-size: 1rem; cursor: none;
    transition: all 0.22s; pointer-events: all;
    font-family: 'Noto Serif JP', Georgia, serif;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  #daynight-btn:hover, #daynight-btn:focus-visible {
    background: rgba(232,146,42,0.12); border-color: rgba(232,146,42,0.5); color: #e8922a;
  }
  #daynight-btn.day {
    color: #ffd77a; border-color: rgba(255,215,130,0.5);
    text-shadow: 0 0 10px rgba(255,200,100,0.6);
  }

  /* ─── Rainbow mode (Konami reward) — 15s hue cycle on the scene ── */
  @keyframes rainbowHue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
  body.rainbow-mode canvas { animation: rainbowHue 6s linear infinite; }
  body.rainbow-mode #outside-ui .name { animation: rainbowHue 3s linear infinite, nameBreath 5s ease-in-out infinite; }
  body.rainbow-mode .loader-neon { animation: rainbowHue 2.5s linear infinite, neonFlicker 0.5s ease infinite; }

  /* ── Night Shift 2.0 — editorial wayfinding layered over the world ── */
  #night-shift {
    position: fixed; inset: 0; z-index: 12; pointer-events: none;
    color: #f4e2ba; opacity: 0; animation: nightShiftIn .9s ease 2.9s forwards;
  }
  @keyframes nightShiftIn { to { opacity: 1; } }
  .shift-mark {
    position: absolute; top: 1.65rem; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: .75rem; font-size: .52rem;
    letter-spacing: .34em; text-transform: uppercase; color: rgba(238,205,144,.82);
    text-shadow: 0 2px 12px #000; white-space: nowrap;
  }
  .shift-mark::before, .shift-mark::after { content: ''; width: 3rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,146,42,.7)); }
  .shift-mark::after { transform: scaleX(-1); }
  .signal-readout {
    position: absolute; top: 1.5rem; right: 1.8rem; width: 12.5rem;
    padding: .7rem 0 .75rem .85rem; border-left: 1px solid rgba(232,146,42,.55);
    background: linear-gradient(90deg, rgba(5,3,1,.55), transparent);
    text-shadow: 0 2px 10px #000;
  }
  .signal-readout .eyebrow, .story-card .eyebrow { color: #d88731; font-size: .48rem; letter-spacing: .28em; text-transform: uppercase; }
  .signal-readout strong { display: block; margin: .3rem 0 .2rem; font-size: .7rem; letter-spacing: .11em; font-weight: 400; color: #f5d070; }
  .signal-readout span { font-size: .48rem; letter-spacing: .14em; color: rgba(238,211,163,.7); }
  .signal-pip { display: inline-block; width: .42rem; height: .42rem; margin-right: .35rem; border-radius: 50%; background: #e8922a; box-shadow: 0 0 0 0 rgba(232,146,42,.6); animation: signalPulse 2s infinite; }
  @keyframes signalPulse { 70% { box-shadow: 0 0 0 .45rem rgba(232,146,42,0); } 100% { box-shadow: 0 0 0 0 rgba(232,146,42,0); } }
  .story-card {
    position: absolute; left: 1.8rem; bottom: 1.65rem; max-width: 16.5rem;
    padding: 1.1rem 1.1rem 1rem; border: 1px solid rgba(239,191,103,.2);
    background: linear-gradient(135deg, rgba(10,6,3,.86), rgba(10,6,3,.36));
    backdrop-filter: blur(10px); box-shadow: 0 15px 40px rgba(0,0,0,.25);
  }
  .story-card h2 { margin: .35rem 0 .55rem; font-size: 1rem; line-height: 1.2; font-weight: 400; letter-spacing: .04em; color: #f5d070; }
  .story-card p { font-family: Georgia, serif; color: rgba(245,227,190,.74); font-size: .72rem; line-height: 1.62; }
  .story-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; pointer-events: all; }
  .story-action { appearance: none; background: transparent; border: 1px solid rgba(232,146,42,.45); color: #f1ce8b; padding: .48rem .65rem; font: inherit; font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; cursor: none; transition: .22s ease; }
  .story-action:hover, .story-action:focus-visible { background: #e8922a; color: #180c03; transform: translateY(-2px); outline: none; box-shadow: 0 7px 18px rgba(232,146,42,.24); }
  .chapter-rail { position: absolute; right: 1.8rem; bottom: 1.7rem; display: flex; flex-direction: column; align-items: flex-end; gap: .38rem; }
  .chapter-rail button { pointer-events: all; display: flex; align-items: center; gap: .55rem; border: 0; background: transparent; color: rgba(236,207,153,.48); font: inherit; font-size: .48rem; letter-spacing: .23em; text-transform: uppercase; cursor: none; transition: .2s ease; }
  .chapter-rail button::after { content: ''; width: 2.5rem; height: 1px; background: rgba(232,146,42,.3); transition: .2s ease; }
  .chapter-rail button:hover, .chapter-rail button:focus-visible { color: #f5d070; outline: none; }
  .chapter-rail button:hover::after, .chapter-rail button:focus-visible::after { width: 4rem; background: #f0c060; }
  .inside-desk { position: absolute; left: 1.8rem; bottom: 1.55rem; max-width: 18rem; opacity: 0; transform: translateY(10px); transition: .45s ease; }
  body.in-shop .inside-desk { opacity: 1; transform: none; }
  .inside-desk .desk-title { color: #f5d070; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
  .inside-desk .desk-caption { max-width: 15rem; margin-top: .42rem; color: rgba(245,227,190,.72); font: .7rem/1.55 Georgia, serif; }
  .inside-desk .desk-actions { display: flex; gap: .45rem; margin-top: .75rem; }
  .desk-actions button { pointer-events: all; border: 0; border-bottom: 1px solid rgba(232,146,42,.55); background: transparent; padding: .24rem 0; color: #f1ce8b; font: inherit; font-size: .48rem; letter-spacing: .18em; text-transform: uppercase; cursor: none; }
  .desk-actions button:hover, .desk-actions button:focus-visible { color: #fff1cf; border-color: #fff1cf; outline: none; }
  body.in-shop #night-shift > .signal-readout, body.in-shop #night-shift > .story-card, body.in-shop #night-shift > .chapter-rail, body.in-shop #night-shift > .shift-mark { opacity: 0; pointer-events: none; transform: translateY(-10px); }
  body.in-shop .shift-mark { opacity: 0 !important; }
  body.in-shop #inside-hint { display: none; }
  #panel-overlay.active ~ #interact-card { display: none !important; }
  body.in-shop #outside-ui, body.in-shop #avail-badge { opacity: 0; }
  body:not(.in-shop) #avail-badge { display: none !important; }
  body.in-shop #inside-nav { top: 1.15rem; left: 50%; right: auto; width: max-content; transform: translateX(-50%); padding: .28rem; gap: .15rem; border: 1px solid rgba(232,146,42,.24); border-radius: 99px; background: rgba(8,4,1,.7); backdrop-filter: blur(12px); box-shadow: 0 10px 34px rgba(0,0,0,.34); }
  body.in-shop .inside-nav-btn { min-width: auto; padding: .62rem .92rem; border: 1px solid transparent; border-radius: 99px; color: rgba(240,211,163,.7); }
  body.in-shop .inside-nav-btn:hover, body.in-shop .inside-nav-btn.active { border-bottom-color: transparent; border-color: rgba(232,146,42,.52); background: rgba(232,146,42,.13); }
  .panel-card .panel-header { position: sticky; top: 0; z-index: 3; padding-top: .3rem; background: linear-gradient(180deg, rgba(18,9,3,.98) 80%, rgba(18,9,3,0)); }
  .project-entry { position: relative; overflow: hidden; }
  .project-entry::after { content: ''; position: absolute; inset: 0 auto 0 -1px; width: 2px; background: #e8922a; transform: scaleY(0); transform-origin: bottom; transition: transform .35s ease; }
  .project-entry:hover::after { transform: scaleY(1); }
  /* Case-study drawer: the portfolio reads like a deliberate service menu,
     rather than a document laid on top of the world. */
  .panel-card { background: linear-gradient(150deg, rgba(19,10,4,.985), rgba(7,5,4,.99)); color: #f5e6c5; border-left-color: #e8922a; box-shadow: -28px 0 80px rgba(0,0,0,.86), inset 1px 0 rgba(255,236,190,.08); background-image: radial-gradient(circle at 86% 4%, rgba(185,75,22,.16), transparent 28%), linear-gradient(150deg, rgba(19,10,4,.985), rgba(7,5,4,.99)); }
  .panel-card::before { border-color: rgba(240,192,96,.14); }
  .panel-card::after { color: rgba(240,192,96,.045); }
  .panel-progress { background: rgba(240,192,96,.12); }
  .panel-progress-fill { background: linear-gradient(90deg, #c74d22, #f0c060, #e8922a); }
  .panel-close { color: rgba(245,218,170,.56); }
  .panel-close:hover { color: #fff2ce; background: rgba(232,146,42,.12); border-color: rgba(232,146,42,.32); }
  .panel-card::-webkit-scrollbar-track { background: #100804; }
  .panel-card::-webkit-scrollbar-thumb { background: rgba(232,146,42,.42); }
  .panel-header { border-color: rgba(240,192,96,.24); }
  .panel-kanji { color: #f0c060; text-shadow: 0 0 22px rgba(232,146,42,.34); }
  .panel-title, .panel-content { color: #f8e8c5; }
  .case-brief { margin: 0 0 1.2rem; padding: .75rem .9rem; border-left: 2px solid #e8922a; background: rgba(232,146,42,.07); color: rgba(248,232,197,.76); font: .77rem/1.55 Georgia, serif; }
  .case-brief b { color: #f5d070; font-weight: normal; }
  .case-filters { display: flex; flex-wrap: wrap; gap: .38rem; margin: 0 0 1.1rem; }
  .case-filter { border: 1px solid rgba(240,192,96,.22); background: transparent; color: rgba(245,218,170,.72); padding: .35rem .5rem; font: .48rem 'Noto Serif JP', Georgia, serif; letter-spacing: .13em; text-transform: uppercase; cursor: none; transition: .2s ease; }
  .case-filter:hover, .case-filter:focus-visible, .case-filter.active { background: #e8922a; border-color: #e8922a; color: #1b0c03; outline: none; }
  .project-entry { border: 1px solid rgba(240,192,96,.13); background: linear-gradient(110deg, rgba(255,239,205,.045), transparent); border-radius: 3px; padding: 1rem; margin: 0 0 .7rem; transition: border-color .25s ease, transform .25s ease, background .25s ease, opacity .2s ease; }
  .project-entry:hover { background: linear-gradient(110deg, rgba(232,146,42,.15), rgba(255,239,205,.04)); border-color: rgba(240,192,96,.42); transform: translateX(-3px); }
  .project-entry.is-filtered { display: none; }
  .project-num { color: rgba(240,192,96,.55); }
  .project-name, .exp-role { color: #fff0ce; }
  .project-impact, .exp-company { color: #f0a24a; }
  .project-desc, .exp-bullets, .contact-note, .contact-val, .contact-seeking-text { color: rgba(245,225,189,.72); }
  .project-desc { max-width: 42rem; }
  .exp-date, .contact-label { color: rgba(240,192,96,.58); }
  .exp-entry { border-color: rgba(240,192,96,.12); }
  .exp-entry::before { background: #1b0c03; border-color: rgba(240,192,96,.4); }
  .exp-entry.current::before { background: #f0a24a; border-color: #f0c060; box-shadow: 0 0 0 3px rgba(232,146,42,.16); }
  .current-badge { color: #f7d28e; border-color: rgba(240,192,96,.35); background: rgba(232,146,42,.12); }
  .tool-pill { background: rgba(255,239,205,.07) !important; color: #f3d29a !important; border-color: rgba(240,192,96,.2) !important; }
  .proj-stat { border-color: rgba(240,192,96,.16) !important; background: rgba(255,239,205,.035) !important; }
  .proj-stat-num { color: #f5d070 !important; }
  .proj-stat-label { color: rgba(245,218,170,.58) !important; }
  .proj-btn-live, .proj-btn-gh { background: transparent !important; border-color: rgba(240,192,96,.35) !important; color: #f2cf91 !important; }
  .proj-btn-live:hover, .proj-btn-gh:hover { background: #e8922a !important; color: #1b0c03 !important; border-color: #e8922a !important; }
  .panel-nav { border-color: rgba(240,192,96,.14); }
  .panel-nav-btn { color: rgba(245,218,170,.6); }
  .panel-nav-btn:hover { color: #fff0ce; border-color: rgba(240,192,96,.35); background: rgba(232,146,42,.08); }
  .panel-dot { background: rgba(240,192,96,.17); border-color: rgba(240,192,96,.3); }
  .panel-dot.active { background: #f0a24a; border-color: #f0c060; }
  @media (max-width: 760px) {
    #night-shift { display: none; }
    body { cursor: auto; }
    .story-action, .chapter-rail button, .desk-actions button { cursor: pointer; }
  }
  @media (prefers-reduced-motion: reduce) { #night-shift, .signal-pip { animation: none; opacity: 1; } }