:root {
      color-scheme: dark;
      --bg: #050505;
      --ink: #f7f7f4;
      --muted: rgba(247,247,244,.56);
      --dim: rgba(247,247,244,.3);
      --line: rgba(255,255,255,.11);
      --glass: rgba(18,18,18,.68);
      --page: min(1360px, calc(100vw - 64px));
      --out: cubic-bezier(.16,1,.3,1);
      --brand-teal: #007c70;
      --brand-blue: #1737d7;
      --brand-violet: #7b14ed;
      --brand-magenta: #dd19e9;
      --brand-pink: #f06ca8;
      --brand-gold: #ffdc58;
      --brand-lilac: #c8c5ee;
      --lightframe-gradient: linear-gradient(102deg,var(--brand-teal) 0%,var(--brand-blue) 18%,var(--brand-violet) 32%,var(--brand-magenta) 46%,var(--brand-pink) 59%,var(--brand-gold) 73%,var(--brand-lilac) 86%,var(--brand-teal) 100%);
    }

    * {
      box-sizing: border-box;
      font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    }

    html {
      background: #050505;
      scroll-behavior: auto;
      scroll-snap-type: y mandatory;
      scrollbar-color: rgba(255,255,255,.22) transparent;
      overflow-x: clip;
    }
    .js.motion-booting { overflow: hidden; }

    body {
      margin: 0;
      min-width: 320px;
      min-height: 100vh;
      color: var(--ink);
      background: var(--bg);
      font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      line-break: strict;
      overflow-x: clip;
      overscroll-behavior-y: none;
    }

    .js.motion-booting main,
    .js.motion-booting footer {
      visibility: hidden;
    }

    body::before {
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(880px circle at 88% 120%, rgba(191,90,242,.08), transparent 54%),
        linear-gradient(180deg, #070707, #030303);
      pointer-events: none;
      content: "";
    }

    body::after {
      position: fixed;
      inset: 0;
      z-index: 20;
      background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25vw - 1px), rgba(255,255,255,.018) 25vw);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 82%);
      pointer-events: none;
      content: "";
    }

    ::selection { color: #050505; background: var(--ink); }
    a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
    a, button { touch-action: manipulation; }
    a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
    h1, h2, h3, p { margin: 0; word-break: keep-all; overflow-wrap: break-word; }
    h1, h2, h3 { text-wrap: balance; }

    .noise {
      position: fixed;
      inset: 0;
      z-index: 21;
      opacity: .026;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      pointer-events: none;
    }
    body.is-transitioning .noise { opacity: 0; }
    body.is-transitioning .flow-track,
    body.is-transitioning .status-dot,
    body.is-transitioning .scroll-cue::before { animation-play-state: paused; }

    .progress { position: fixed; top: 0; right: 0; z-index: 50; width: 2px; height: 100vh; background: rgba(255,255,255,.07); }
    .progress::after { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleY(var(--scroll,0)); transform-origin: top; content: ""; }

    .intro-screen { position: fixed; inset: -1px; z-index: 100; display: grid; place-items: center; color: #111; background: #050505; box-shadow: 0 14px 30px rgba(0,0,0,.12); overflow: hidden; isolation: isolate; }
    .intro-screen::before, .intro-screen::after { display: none; }
    .intro-spectrum { position: absolute; inset: 0 auto 0 0; z-index: 0; width: 400vw; opacity: 0; background: linear-gradient(90deg,var(--brand-teal) 0%,var(--brand-blue) 17%,var(--brand-violet) 31%,var(--brand-magenta) 43%,var(--brand-pink) 53%,var(--brand-gold) 64%,var(--brand-lilac) 71%,#fff 76%,#fff 100%); will-change: transform,opacity; }
    .intro-white { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
    .intro-grid { position: absolute; inset: -10%; z-index: 1; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size: clamp(42px,5vw,82px) clamp(42px,5vw,82px); mask-image: radial-gradient(circle at center,#000,transparent 66%); transform: perspective(700px) rotateX(60deg) scale(1.35); transform-origin: center 60%; }
    .intro-particles { position: absolute; top: 50%; left: 50%; z-index: 4; width: 1px; height: 1px; }
    .intro-particles i { position: absolute; width: 6px; aspect-ratio: 1; background: #fff; border-radius: 50%; box-shadow: 0 0 18px 4px rgba(255,255,255,.72); transform: translate(-50%,-50%); }
    .intro-particles i:nth-child(3n) { width: 9px; }
    .intro-particles i:nth-child(4n) { width: 4px; }
    .intro-lockup { position: relative; z-index: 5; display: grid; gap: 17px; place-items: center; opacity: 0; will-change: transform,opacity; }
    .intro-logo { display: block; width: auto; height: min(44svh,390px); max-width: min(64vw,382px); aspect-ratio: 391 / 580; object-fit: contain; filter: none; }
    .intro-credit { color: rgba(17,17,20,.62); font-size: .67rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
    .intro-code { position: absolute; top: calc(50% + min(27vw,210px)); left: 50%; z-index: 5; display: grid; width: min(84vw,650px); gap: 7px; text-align: center; transform: translateX(-50%); perspective: 800px; }
    .intro-code > * { display: block; opacity: 0; }
    .intro-code span { color: rgba(17,17,20,.52); font-size: clamp(.68rem,1vw,.82rem); font-weight: 550; letter-spacing: .08em; }
    .intro-code strong { font-size: clamp(1rem,2vw,1.65rem); font-weight: 650; letter-spacing: -.035em; }
    .intro-meter { position: absolute; bottom: clamp(22px,5vh,54px); left: 50%; z-index: 5; width: min(72vw,520px); height: 6px; opacity: 0; border-radius: 99px; background: rgba(60,60,70,.28); transform: translateX(-50%); overflow: hidden; }
    .intro-meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--brand-teal),var(--brand-blue),var(--brand-violet),var(--brand-magenta),var(--brand-pink),var(--brand-gold),var(--brand-lilac)); transform: scaleX(0); transform-origin: left; }

    .frame-flash {
      position: fixed;
      inset: 0;
      z-index: 38;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 24px;
      padding: clamp(28px,5vw,72px);
      isolation: isolate;
      overflow: hidden;
      color: #fff;
      background: #08080b;
      opacity: 0;
      transform: translate3d(0,110%,0);
      pointer-events: none;
      will-change: transform,opacity;
    }
    .frame-flash::before {
      position: absolute;
      inset: -18% -42%;
      z-index: -2;
      background: linear-gradient(102deg,var(--brand-teal) 0%,var(--brand-blue) 15%,var(--brand-violet) 28%,var(--brand-magenta) 42%,var(--brand-pink) 56%,var(--brand-gold) 70%,var(--brand-lilac) 84%,var(--brand-teal) 100%);
      transform: translate3d(-13%,0,0) scale(1.08) skewX(-5deg);
      animation: frame-flash-spectrum 2.2s ease-in-out infinite alternate;
      content: "";
      will-change: transform;
    }
    .frame-flash::after {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(110deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.02) 48%,rgba(0,0,0,.2) 100%);
      content: "";
      pointer-events: none;
    }
    .frame-flash-name,.frame-flash-index { position: relative; z-index: 1; }
    .frame-flash-name { max-width: 10ch; font-size: clamp(3rem,9vw,10rem); font-weight: 720; letter-spacing: -.055em; line-height: .98; text-shadow: 0 12px 36px rgba(0,0,0,.22); }
    .frame-flash-index { padding-bottom: .08em; font-size: clamp(.8rem,1.2vw,1.05rem); font-weight: 600; letter-spacing: .08em; text-shadow: 0 4px 18px rgba(0,0,0,.3); }

    @keyframes frame-flash-spectrum {
      0% { transform: translate3d(-13%,0,0) scale(1.08) skewX(-5deg); }
      52% { transform: translate3d(3%,-2%,0) scale(1.13) skewX(2deg); }
      100% { transform: translate3d(13%,2%,0) scale(1.08) skewX(5deg); }
    }

    .site-header {
      --header-surface: rgba(255,255,255,.15);
      --header-border: rgba(0,0,0,.46);
      --header-highlight: transparent;
      --header-shadow: rgba(0,0,0,.22);
      position: fixed;
      top: 18px;
      left: 50%;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(1040px, calc(100% - 40px));
      height: 60px;
      padding: 0 9px 0 18px;
      isolation: isolate;
      overflow: hidden;
      background: var(--header-surface);
      border: 1px solid var(--header-border);
      border-radius: 22px;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 18px 52px var(--header-shadow);
      transform: translateX(-50%);
      backdrop-filter: saturate(155%) blur(22px);
      -webkit-backdrop-filter: saturate(155%) blur(22px);
      transition: background-color 340ms var(--out), border-color 340ms var(--out), box-shadow 340ms var(--out);
    }

    .site-header > * { position: relative; z-index: 1; }
    .site-header.is-on-light { --header-surface: rgba(255,255,255,.54); --header-border: rgba(20,20,23,.24); --header-highlight: transparent; --header-shadow: rgba(20,20,24,.16); }

    .brand { display: inline-flex; min-height: 38px; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; letter-spacing: -.01em; transition: opacity 220ms ease, transform 300ms var(--out); }
    .brand:hover { opacity: .74; }
    .brand:active { opacity: .55; transform: scale(.96); }
    .brand-logo { display: block; width: auto; height: 34px; aspect-ratio: 391 / 580; object-fit: contain; }
    .brand-dot, .status-dot { width: 7px; height: 7px; background: var(--ink); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.07); }
    .site-nav { display: flex; align-items: center; gap: 3px; }
    .site-nav a { display: grid; min-height: 40px; padding: 0 14px; place-items: center; color: rgba(247,247,244,.62); border-radius: 14px; font-size: .82rem; font-weight: 550; letter-spacing: -.015em; transition: color 220ms ease, background 220ms ease, transform 180ms var(--out); }
    .site-header.is-on-light .site-nav a { color: rgba(15,15,18,.78); text-shadow: none; }
    .site-header.is-on-light .site-nav a:hover { color: #000; background: rgba(0,0,0,.07); }
    .site-nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
    .site-nav a:active { background: rgba(255,255,255,.12); transform: scale(.96); }

    .page { width: var(--page); margin-inline: auto; }
    .frame { position: relative; height: 100svh; min-height: 100svh; isolation: isolate; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }

    .hero { --hero-progress: 0; position: relative; display: flex; min-height: 100svh; padding: clamp(150px,20vh,220px) 0 72px; flex-direction: column; justify-content: space-between; isolation: isolate; overflow: visible; }
    .hero-beat-stage { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); z-index: 4; width: 100vw; overflow: hidden; opacity: 0; pointer-events: none; }
    .hero-beat-wash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(102deg,var(--brand-teal) 0%,var(--brand-blue) 23%,var(--brand-violet) 40%,var(--brand-magenta) 56%,var(--brand-pink) 70%,var(--brand-gold) 85%,var(--brand-lilac) 100%); transform: translate3d(0,0,0); will-change: transform; }
    .hero-beat-status { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: min(680px,72vw); gap: 14px; color: rgba(255,255,255,.96); transform: translate(-50%,-50%); will-change: transform,opacity; }
    .hero-beat-status-name { font-size: clamp(.68rem,.75vw,.82rem); font-weight: 720; letter-spacing: .18em; text-align: center; text-shadow: 0 1px 20px rgba(26,19,56,.28); }
    .hero-beat-ticks { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
    .hero-beat-ticks i { height: 2px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 0 14px rgba(255,255,255,.4); will-change: transform,opacity; }
    .hero-beat-line { position: absolute; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,.8); box-shadow: 0 0 24px rgba(255,255,255,.72); transform: scaleX(0); will-change: transform,opacity; }
    .hero-beat-line:first-of-type { top: 31%; transform-origin: left; }
    .hero-beat-line:last-of-type { bottom: 24%; transform-origin: right; }
    .hero-beat-index { position: absolute; right: 0; bottom: 25%; color: rgba(255,255,255,.66); font-size: .66rem; font-weight: 650; letter-spacing: .14em; transform: translateY(-12px); }
    .hero-beat-index span { display: inline-block; }
    .hero-ambient { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); z-index: 0; width: 100vw; overflow: hidden; opacity: 0; transition: opacity 650ms var(--out); pointer-events: none; }
    .hero.is-assembled .hero-ambient { opacity: 1; }
    .hero-orb { position: absolute; width: min(54vw,760px); aspect-ratio: 1; border-radius: 50%; filter: blur(110px); opacity: .13; will-change: transform; }
    .hero-orb-a { top: -34%; left: -18%; background: var(--brand-blue); animation: ambient-orbit-a 9s ease-in-out infinite alternate; }
    .hero-orb-b { right: -18%; bottom: -42%; background: var(--brand-magenta); animation: ambient-orbit-b 11s ease-in-out infinite alternate; }
    .hero-scan { position: absolute; top: 0; bottom: 0; left: -16%; width: 11%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.028),rgba(255,255,255,.075),transparent); filter: blur(6px); transform: skewX(-10deg); animation: ambient-scan 5.8s cubic-bezier(.65,0,.35,1) infinite; will-change: transform; }
    .hero-kinetic-rail { position: absolute; top: 43%; left: 0; display: flex; width: max-content; color: transparent; opacity: .085; font-size: clamp(7rem,17vw,17rem); font-weight: 760; letter-spacing: -.055em; line-height: .8; white-space: nowrap; -webkit-text-stroke: 1px rgba(255,255,255,.68); animation: kinetic-rail 13s linear infinite; will-change: transform; }
    .hero-kinetic-rail span { display: block; }
    .hero-signal { position: absolute; right: max(32px,calc((100vw - var(--page))/2)); top: 48%; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 9px; color: rgba(255,255,255,.24); font-size: .58rem; font-weight: 650; letter-spacing: .16em; writing-mode: vertical-rl; }
    .hero-signal i { width: 5px; aspect-ratio: 1; background: var(--brand-gold); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,220,88,.07),0 0 18px rgba(255,220,88,.36); animation: signal-pulse 1.7s ease-in-out infinite; }
    .hero-signal b { color: rgba(255,255,255,.52); font-weight: 720; }
    .kinetic-hero .hero-title .char { transition: none; }
    .kinetic-hero .site-header,
    .kinetic-hero .hero-meta,
    .kinetic-hero .code-label,
    .kinetic-hero .hero-bottom { will-change: transform,opacity,filter; }
    .hero::before, .hero::after { position: absolute; z-index: -1; width: clamp(250px,34vw,580px); aspect-ratio: 1; border-radius: 50%; filter: blur(90px); pointer-events: none; content: ""; }
    .hero::before { top: 18%; left: -20%; background: rgba(10,132,255,.16); opacity: calc(.08 + var(--hero-progress) * .72); transform: translate3d(calc(var(--hero-progress) * 16vw),calc(var(--hero-progress) * 12vh),0) scale(calc(.7 + var(--hero-progress) * .5)); }
    .hero::after { right: -22%; bottom: -15%; background: rgba(255,45,85,.13); opacity: calc(.04 + var(--hero-progress) * .65); transform: translate3d(calc(var(--hero-progress) * -14vw),calc(var(--hero-progress) * -8vh),0) scale(calc(.65 + var(--hero-progress) * .55)); }
    .hero-primary { position: relative; z-index: 1; opacity: calc(1 - var(--hero-progress) * .7); transform: translate3d(0,calc(var(--hero-progress) * -9vh),0) scale(calc(1 - var(--hero-progress) * .08)); transform-origin: 50% 20%; }
    .hero-bottom { position: relative; z-index: 1; opacity: calc(1 - var(--hero-progress) * .45); transform: translate3d(0,calc(var(--hero-progress) * 5vh),0); }
    .hero-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(30px,5vh,66px); color: var(--muted); font-size: .78rem; font-weight: 500; letter-spacing: .04em; }
    .status { display: flex; align-items: center; gap: 10px; }
    .status-dot { animation: breathe 2.8s ease-in-out infinite; }
    .code-label { margin-bottom: 16px; color: rgba(255,255,255,.72); font-size: clamp(.86rem,1.1vw,1rem); letter-spacing: -.02em; }
    .code-label::after { display: inline-block; margin-left: .22em; color: var(--brand-gold); content: "_"; animation: code-caret 1.05s steps(1,end) infinite; }
    .code-label .syntax { color: rgba(255,255,255,.42); }

    .hero-title { max-width: 1240px; font-size: clamp(3.7rem,8.75vw,9.2rem); font-weight: 700; letter-spacing: -.055em; line-height: .98; }
    .hero-title .line { display: flex; min-width: 0; align-items: baseline; }
    .hero-title .line:last-child { justify-content: flex-end; }
    .hero-title .quote, .hero-title .semi { color: rgba(255,255,255,.3); font-size: .54em; font-weight: 400; letter-spacing: 0; }
    .hero-title [data-split] { display: inline-flex; }
    .hero-title .char { display: inline-block; opacity: 0; filter: blur(16px); transform: translateY(.56em) rotate(2deg); }
    .ready .hero-title .char { opacity: 1; filter: blur(0); transform: translateY(0) rotate(0); transition: opacity 850ms var(--out), filter 900ms var(--out), transform 950ms var(--out); transition-delay: calc(120ms + (var(--i) * 34ms)); }

    .hero-bottom { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,440px); gap: 56px; align-items: end; margin-top: clamp(52px,10vh,120px); }
    .scroll-cue { display: flex; align-items: center; gap: 13px; width: fit-content; color: var(--dim); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
    .scroll-cue::before { width: 38px; height: 1px; background: currentColor; animation: cue 2.2s var(--out) infinite; transform-origin: left; content: ""; }
    .scroll-cue:active { opacity: .55; }
    .hero-description { color: rgba(255,255,255,.7); font-size: clamp(1.04rem,1.45vw,1.28rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.72; }
    .hero-description strong { color: var(--ink); font-weight: 600; }

    .section { display: flex; padding: clamp(104px,12vh,132px) 0 clamp(30px,5vh,54px); flex-direction: column; justify-content: center; }
    .section-label { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(26px,4vh,46px); color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .08em; }
    .section-label::before { width: 7px; height: 7px; background: var(--ink); border-radius: 50%; content: ""; }

    .statement { position: relative; display: grid; grid-template-columns: .42fr 1fr; gap: clamp(28px,7vw,120px); align-items: start; }
    .statement-side { color: var(--muted); font-size: .94rem; line-height: 1.65; }
    .statement-side strong { display: block; margin-bottom: 10px; color: var(--ink); font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; }
    .statement-copy { max-width: 900px; font-size: clamp(2.5rem,5vw,5.6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.12; }
    #about.is-scene-active .statement-copy .flow-word { animation: statement-word-cadence 3.7s var(--out) 1.05s infinite; }
    #about.is-scene-active .statement-copy .flow-word:nth-child(3n+2) { animation-delay: 1.17s; }
    #about.is-scene-active .statement-copy .flow-word:nth-child(3n) { animation-delay: 1.29s; }
    .muted { color: rgba(255,255,255,.25); }

    #about { width: 100%; padding-inline: max(32px,calc((100vw - 1360px)/2)); }
    #about::before { position: absolute; top: 0; bottom: 0; left: 50%; z-index: -2; width: 100vw; background: #050505; transform: translateX(-50%); content: ""; }

    .reveal { opacity: 0; transform: translateY(42px) scale(.985); transition: opacity 560ms var(--out), transform 680ms var(--out); }
    .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
    .reveal.is-springing { transition: none !important; }

    .principles { position: relative; left: 50%; width: 100vw; margin-top: clamp(42px,7vh,72px); margin-left: -50vw; border-top: 1px solid var(--line); }
    .principle { --principle-fill:#fff; --principle-ink:#050505; position: relative; display: grid; grid-template-columns: 72px minmax(0,1fr) minmax(220px,.48fr) 54px; gap: 24px; align-items: center; min-height: clamp(84px,12vh,112px); padding-inline: max(32px,calc((100vw - 1360px)/2)); border-bottom: 1px solid var(--line); isolation: isolate; overflow: hidden; transition: color 220ms ease, transform 220ms var(--out); }
    .principle::before { position: absolute; inset: 0; z-index: -1; background: var(--principle-fill); transform: scaleX(0); transform-origin: right; transition: transform 620ms var(--out); content: ""; }
    .principle:hover::before, .principle.is-sweeping::before { transform: scaleX(1); transform-origin: left; }
    .principle.is-sweeping::before { transition-duration: 140ms; }
    .principle.is-sweeping { transition-duration: 100ms; }
    .principle:hover, .principle.is-sweeping { color: var(--principle-ink); }
    .principle:hover .principle-index, .principle:hover p, .principle.is-sweeping .principle-index, .principle.is-sweeping p { color: currentColor; }
    .principle:active { transform: scale(.992); }
    #about.is-scene-active .principle { animation: principle-cadence 3.1s var(--out) 1s infinite; }
    #about.is-scene-active .principle:nth-child(2) { animation-delay: 1.24s; }
    #about.is-scene-active .principle:nth-child(3) { animation-delay: 1.48s; }
    #about.is-scene-active .principle-arrow { animation: principle-arrow-cadence 3.1s var(--out) 1s infinite; }
    #about.is-scene-active .principle:nth-child(2) .principle-arrow { animation-delay: 1.24s; }
    #about.is-scene-active .principle:nth-child(3) .principle-arrow { animation-delay: 1.48s; }
    .principle-index { color: var(--dim); font-size: .78rem; }
    .principle h3 { font-size: clamp(1.65rem,2.9vw,3.4rem); font-weight: 600; letter-spacing: -.038em; line-height: 1.14; }
    .principle p { color: var(--muted); font-size: .94rem; letter-spacing: -.006em; line-height: 1.68; }
    .principle-arrow { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 1.18rem; transition: background 320ms ease, color 320ms ease, transform 620ms var(--out); }
    .principle:hover .principle-arrow, .principle.is-sweeping .principle-arrow { color: #fff; background: #050505; border-color: #050505; transform: rotate(45deg); }

    .now-grid { display: grid; grid-template-columns: minmax(0,.72fr) minmax(340px,1fr); gap: clamp(24px,6vw,90px); align-items: start; }
    .now-title { font-size: clamp(3.4rem,7vw,7.8rem); font-weight: 650; letter-spacing: -.05em; line-height: 1.02; }
    #now.is-scene-active .now-title .flow-word { animation: now-word-cadence 3.1s var(--out) 1.02s infinite; }
    #now.is-scene-active .now-title .flow-word:nth-child(even) { animation-delay: 1.2s; }
    .interest-list { display: grid; gap: 12px; }
    #now::before { position: absolute; top: 0; bottom: 0; left: 50%; z-index: -2; width: 100vw; background: #050505; transform: translateX(-50%); content: ""; }
#now::after { display: none; content: none; }
    .interest { --tilt-x: 0deg; --tilt-y: 0deg; --card-scale: 1; --card-bg:#fff; --card-ink:#111114; position: relative; min-height: clamp(132px,19vh,172px); padding: clamp(20px,2.3vw,30px); color: var(--card-ink); background: var(--card-bg); border: 1px solid rgba(255,255,255,.74); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 20px 45px rgba(0,0,0,.18); overflow: hidden; transform-origin: center; }
    .interest:nth-child(2), .interest:nth-child(3) { --card-bg:#fff; --card-ink:#111114; }
    .interest:nth-child(2), .interest:nth-child(3) { top: auto; }
    .interest { transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale)); }
    .interest::after { position: absolute; top: 0; right: 0; width: 28%; height: 100%; background: linear-gradient(110deg, transparent, rgba(15,15,18,.07), transparent); transform: translateX(101%); transition: transform 560ms var(--out); content: ""; }
    .interest:hover::after { transform: translateX(0); }
    .interest:active { filter: brightness(.97); }
    #now.is-scene-active .interest { animation: interest-cadence 3.3s var(--out) 1s infinite; }
    #now.is-scene-active .interest:nth-child(2) { animation-delay: 1.42s; }
    #now.is-scene-active .interest:nth-child(3) { animation-delay: 1.84s; }
    #now.is-scene-active .interest::after { animation: card-sheen 3.3s var(--out) 1s infinite; }
    #now.is-scene-active .interest:nth-child(2)::after { animation-delay: 1.42s; }
    #now.is-scene-active .interest:nth-child(3)::after { animation-delay: 1.84s; }
    .interest-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(16px,2.5vh,26px); color: currentColor; opacity: .68; font-size: .7rem; letter-spacing: .04em; }
    .interest h3 { margin-bottom: 10px; font-size: clamp(1.55rem,2.35vw,2.5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.16; }
    .interest p { max-width: 600px; color: currentColor; opacity: .78; font-size: .88rem; letter-spacing: -.004em; line-height: 1.68; }

    .stack-section { --flow-x: 0; --flow-y: 0; position: relative; display: block; width: 100%; height: 100svh; min-height: 100svh; padding: 0; background: linear-gradient(135deg,#ffffff 0%,#f7f5ff 43%,#fff3fa 72%,#fffbe9 100%); color: #111114; overflow: visible; }
    .stack-sticky { position: relative; top: 0; display: flex; height: 100svh; min-height: 100svh; padding: clamp(92px,13vh,122px) 0 24px; flex-direction: column; justify-content: center; overflow: hidden; }
    .stack-sticky .stack-montage { z-index: 8; }
    .stack-section::before { position: absolute; inset: -8%; z-index: 0; display: block; opacity: 0; background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.42) 0 8%,transparent 34%),conic-gradient(from 218deg at 50% 52%,#008b78,#064fe4,#7628ee,#e51cd8,#ff4f9a,#ffd95f,#c9c7f4,#008b78); transform: scale(.55) rotate(-12deg); pointer-events: none; content: ""; will-change: transform,opacity; }
    .stack-section::after { position: absolute; inset: -28%; z-index: 1; background: radial-gradient(circle at 14% 36%,rgba(0,120,255,.26),transparent 22%),radial-gradient(circle at 72% 22%,rgba(231,0,255,.22),transparent 21%),radial-gradient(circle at 88% 78%,rgba(255,47,101,.22),transparent 24%),radial-gradient(circle at 33% 88%,rgba(0,230,164,.2),transparent 23%); transform: translate3d(-2%,-1%,0) scale(1.04); animation: stack-neon-drift 8s ease-in-out infinite alternate; pointer-events: none; content: ""; will-change: transform,opacity; }
    .stack-section.is-scene-active::before { animation: stack-color-burst 1.35s var(--out) both; }
    .stack-heading { position: relative; z-index: 2; width: var(--page); margin: 0 auto clamp(18px,3vh,30px); }
    .stack-heading .section-label { color: rgba(29,29,31,.56); }
    .stack-heading .section-label::before { background: #1d1d1f; }
    .stack-heading h2 { max-width: 1200px; font-size: clamp(3rem,5.7vw,6.7rem); font-weight: 700; letter-spacing: -.052em; line-height: 1.02; }
    .stack-heading .muted { display: inline; color: transparent; background: var(--lightframe-gradient); background-position: 0% 50%; background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: saturate(1.18); animation: stack-brand-gradient 5s ease-in-out infinite alternate; }
    .stack-heading .muted .flow-word { display: inline; color: inherit; background: none; -webkit-text-fill-color: inherit; }
    .stack-section.is-scene-active .stack-heading .flow-word { animation: stack-word-cadence 3.2s var(--out) 1s infinite; }
    .stack-section.is-scene-active .stack-heading .flow-word:nth-child(2n) { animation-delay: 1.14s; }
    .stack-section.is-scene-active .stack-heading .flow-word:nth-child(3n) { animation-delay: 1.28s; }
    .flow-field { --flow-gradient:linear-gradient(90deg,var(--brand-teal) 0%,var(--brand-blue) 20%,var(--brand-violet) 38%,var(--brand-magenta) 54%,var(--brand-pink) 69%,var(--brand-gold) 84%,var(--brand-lilac) 100%); position: relative; z-index: 2; display: grid; gap: 8px; width: 100%; padding: 4px 0 10px; overflow: visible; isolation: isolate; background: transparent; transform: translate3d(calc(var(--flow-x) * .35px),calc(var(--flow-y) * .25px),0); }
    .flow-field::before { display: none; }
    .flow-lane { width: 100%; overflow: visible; contain: layout; }
    .flow-lane:nth-child(1) { --flow-gradient:linear-gradient(90deg,#008b78 0%,#0846db 19%,#7628ee 36%,#d91fd8 52%,#f56fa9 67%,#ffd95f 83%,#c9c7f4 100%); }
    .flow-lane:nth-child(2) { --flow-gradient:linear-gradient(90deg,#ffd95f 0%,#f18eb8 16%,#ec2b9d 31%,#8c27ef 48%,#2358de 65%,#008b78 82%,#c9c7f4 100%); }
    .flow-lane:nth-child(3) { --flow-gradient:linear-gradient(90deg,#1455d9 0%,#009888 17%,#f0cf55 34%,#f276aa 50%,#dc20c7 66%,#6d2ee8 83%,#bfc7f5 100%); }
    .flow-lane:nth-child(4) { --flow-gradient:linear-gradient(90deg,#ee3c93 0%,#ffb74d 18%,#00a884 36%,#1769e0 55%,#8b2be2 73%,#ff5f6d 88%,#ffd95f 100%); }
    .flow-lane:nth-child(5) { --flow-gradient:linear-gradient(90deg,#6d2ee8 0%,#1769e0 18%,#00a884 36%,#ffd95f 54%,#f276aa 70%,#dc20c7 86%,#bfc7f5 100%); }
    .stack-section.is-scene-active .flow-lane { animation: lane-cadence 2.8s var(--out) 1s infinite; }
    .stack-section.is-scene-active .flow-lane:nth-child(even) { animation-name: lane-cadence-reverse; }
    .flow-track { --track-gap:10px; --half-gap:5px; --pill-lift:0px; display: flex; width: max-content; gap: var(--track-gap); padding-right: var(--track-gap); animation: flow-left 28s linear infinite; backface-visibility: hidden; transform: translate3d(0,0,0); will-change: transform; }
    .flow-lane:nth-child(2) .flow-track { animation-name: flow-right; animation-duration: 32s; }
    .flow-lane:nth-child(3) .flow-track { animation-duration: 36s; }
    .flow-lane:nth-child(4) .flow-track { animation-name: flow-right; animation-duration: 30s; }
    .flow-lane:nth-child(5) .flow-track { animation-duration: 34s; }
    .stack-pill { --pill:#0066ff; --pill-ink:#fff; position: relative; display: grid; min-height: clamp(62px,7.4vh,82px); padding: 0 clamp(34px,4.5vw,72px); place-items: center; color: var(--tile-ink,#fff); background: var(--tile-color,#008254); border: 0; border-radius: 0; box-shadow: none; font-size: clamp(1.7rem,2.8vw,3.35rem); font-weight: 720; letter-spacing: -.04em; text-shadow: none; white-space: nowrap; overflow: hidden; filter: none; transition: filter 140ms ease,transform 140ms var(--out); }
    .stack-pill--lightframe { font-weight: 700; }
    .stack-pill::before { position: absolute; inset: 0; display: block; background: linear-gradient(108deg,transparent 28%,rgba(255,255,255,.13) 48%,transparent 67%); transform: translateX(-125%); animation: pill-light-pass 3.2s var(--out) infinite; content: ""; pointer-events: none; }
    .stack-pill::after { display: none; }
    .stack-pill:nth-child(3n+2), .stack-pill:nth-child(4n) { border-radius: 0; clip-path: none; }
    .stack-pill:hover { z-index: 3; filter: saturate(1.48) contrast(1.06) brightness(1.06); }
    .stack-pill:active { filter: brightness(.88); transform: scale(.985); }
    .flow-note { width: var(--page); margin: 12px auto 0; color: rgba(29,29,31,.46); font-size: .72rem; letter-spacing: .04em; text-align: right; }
    .stack-heading,.flow-lane { will-change: transform,opacity; }

    .flow-word { display: inline-block; transform-origin: 50% 90%; backface-visibility: hidden; }
    .text-drift { transform-origin: 0 50%; backface-visibility: hidden; }

    .archive-frame { width: 100%; color: #080808; background: #f8f7f4; }
    .archive-frame::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 73% 54%,rgba(173,157,237,.17),transparent 43%),radial-gradient(ellipse at 15% 90%,rgba(96,168,181,.1),transparent 36%); pointer-events: none; content: ""; }
    .archive-frame-inner { position: relative; display: grid; width: min(1360px,calc(100% - 64px)); height: 100%; margin: auto; padding: clamp(100px,13vh,140px) 0 66px; grid-template-columns: minmax(0,.93fr) minmax(0,1.07fr); gap: clamp(20px,4vw,64px); align-items: center; }
    .archive-intro { position: relative; z-index: 2; align-self: center; }
    .archive-index { margin-bottom: clamp(22px,4vh,38px); color: rgba(8,8,8,.54); font-size: .67rem; font-weight: 650; letter-spacing: .13em; }
    .archive-index span { margin: 0 .45em; color: rgba(8,8,8,.24); }
    .archive-title { position: relative; width: max-content; max-width: 100%; font-size: clamp(4.2rem,8.5vw,9rem); font-weight: 610; letter-spacing: -.075em; line-height: .83; }
    .archive-spark { position: absolute; right: -.2em; bottom: .01em; color: #eac416; font-size: .24em; letter-spacing: 0; }
    .archive-copy { margin-top: clamp(26px,5vh,46px); color: rgba(8,8,8,.58); font-size: clamp(.9rem,1.1vw,1.04rem); line-height: 1.65; letter-spacing: -.005em; }
    .scroll-highlight { color: inherit; background-color: transparent; background-image: linear-gradient(102deg,rgba(0,124,112,.28) 0%,rgba(23,55,215,.28) 18%,rgba(123,20,237,.28) 32%,rgba(221,25,233,.28) 46%,rgba(240,108,168,.28) 59%,rgba(255,220,88,.28) 73%,rgba(200,197,238,.28) 86%,rgba(0,124,112,.28) 100%); background-position: 0 92%; background-size: 0% 68%; background-repeat: no-repeat; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size .82s cubic-bezier(.16,1,.3,1); }
    .scroll-highlight .lightframe-ink { color: transparent; background: linear-gradient(102deg,var(--brand-teal) 0%,var(--brand-blue) 18%,var(--brand-violet) 32%,var(--brand-magenta) 46%,var(--brand-pink) 59%,var(--brand-gold) 73%,var(--brand-lilac) 86%,var(--brand-teal) 100%); background-size: 100% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .scroll-highlight .lightframe-ink .flow-word { display: inline; color: inherit; background: none; -webkit-text-fill-color: inherit; }
    #about.is-accent-revealed .scroll-highlight { background-size: 100% 68%; transition-duration: 1.2s; }
    .block-reveal-line { position: relative; display: inline-block; color: inherit; }
    .motion-detail-ready .block-reveal-line { clip-path: inset(0 100% 0 0); }
    .block-reveal-line::after { position: absolute; inset: 0; background: #1737d7; content: ""; transform: translateX(-101%); }
    .archive-copy.is-block-visible .block-reveal-line { clip-path: inset(0 0 0 0); transition: clip-path .62s cubic-bezier(.16,1,.3,1); }
    .archive-copy.is-block-visible .block-reveal-line::after { transform: translateX(101%); transition: transform .7s cubic-bezier(.7,0,.2,1); }
    .archive-copy.is-block-visible .block-reveal-line:nth-of-type(2), .archive-copy.is-block-visible .block-reveal-line:nth-of-type(2)::after { transition-delay: .16s; }
    .archive-link { display: inline-flex; min-height: 56px; width: min(100%,292px); margin-top: clamp(28px,5vh,50px); padding: 0 0 8px; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid rgba(8,8,8,.32); font-size: .9rem; font-weight: 650; letter-spacing: -.02em; transition: color 240ms ease,border-color 240ms ease,transform 260ms var(--out); }
    .archive-link:hover { color: #1737d7; border-color: #1737d7; }
    .archive-link:active { transform: scale(.975); transition-duration: 60ms; }
    .archive-link:focus-visible { outline: 2px solid #1737d7; outline-offset: 5px; }
    .archive-link-arrow { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 1.1rem; font-weight: 400; transition: transform 260ms var(--out); }
    .archive-link:hover .archive-link-arrow { transform: translate(2px,-2px); }
    .archive-preview { position: relative; height: min(60vh,560px); min-height: 360px; }
    .archive-preview-card { position: absolute; width: 35%; margin: 0; filter: drop-shadow(0 20px 28px rgba(30,24,49,.1)); transform: rotate(var(--rotation)); }
    .archive-preview-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; transition: transform 380ms var(--out); }
    .archive-preview-caption,.archive-preview-card figcaption { display: flex; gap: 9px; padding-top: 9px; align-items: baseline; font-size: clamp(.68rem,.85vw,.78rem); letter-spacing: -.015em; }
    .archive-preview-caption > span:first-child,.archive-preview-card figcaption span { color: rgba(8,8,8,.42); font-size: .64rem; }
    .archive-preview-caption strong,.archive-preview-card figcaption strong { font-weight: 650; }
    a.archive-preview-card { color: inherit; text-decoration: none; cursor: pointer; transition: filter .25s ease,transform .25s var(--out); }
    a.archive-preview-card:hover { filter: drop-shadow(0 24px 34px rgba(30,24,49,.19)); transform: translateY(-5px) rotate(var(--rotation)); }
    a.archive-preview-card:hover img { transform: scale(1.045); }
    a.archive-preview-card:active { transform: translateY(0) scale(.97) rotate(var(--rotation)); transition-duration: .06s; }
    a.archive-preview-card:focus-visible { outline: 2px solid #1737d7; outline-offset: 8px; }
    .archive-preview-caption .preview-arrow { margin-left: auto; color: #1737d7; font-size: 1rem; line-height: .7; }
    .preview-lightframe { --rotation: 6deg; top: 1%; left: 35%; width: 38%; z-index: 2; }
    .preview-tile { --rotation: -7deg; top: 39%; left: 2%; width: 34%; z-index: 1; }
    .preview-aura { --rotation: 5deg; top: 53%; right: 3%; width: 27%; z-index: 3; }
    .archive-preview-cross { position: absolute; top: 39%; right: 9%; color: rgba(8,8,8,.24); font-size: 1.6rem; font-weight: 200; }
    .archive-frame-bottom { position: absolute; bottom: 25px; left: 0; display: flex; width: 100%; justify-content: space-between; color: rgba(8,8,8,.4); font-size: .62rem; font-weight: 650; letter-spacing: .1em; }


    .profile-frame { width: 100%; color: #101014; background: #f7f6f4; }
    .profile-frame.is-profile-scrub-ready { height: 600svh; min-height: 600svh; overflow: visible; }
    .profile-stage { position: relative; height: 100svh; overflow: hidden; isolation: isolate; }
    .profile-intro { position: absolute; inset: 0; z-index: 9; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; background: #07070a; color: #fff; visibility: hidden; pointer-events: none; }
    .profile-intro-item { position: relative; display: flex; min-width: 0; padding: clamp(110px,15vh,160px) clamp(20px,4vw,64px) clamp(58px,9vh,100px); flex-direction: column; justify-content: flex-end; border-right: 1px solid rgba(255,255,255,.16); background: linear-gradient(160deg,transparent 42%,rgba(255,255,255,.055)); }
    .profile-intro-item:nth-child(2) { background: linear-gradient(155deg,rgba(62,26,177,.12),rgba(129,0,255,.24)); }
    .profile-intro-item:nth-child(3) { border-right: 0; background: linear-gradient(155deg,rgba(227,52,247,.08),rgba(255,221,88,.2)); }
    .profile-intro-item span { margin-bottom: auto; opacity: .62; font-size: clamp(.62rem,.8vw,.8rem); font-weight: 650; letter-spacing: .15em; }
    .profile-intro-item strong { font-size: clamp(6rem,17vw,20rem); font-weight: 620; line-height: .75; letter-spacing: -.09em; font-variant-numeric: tabular-nums; }
    .profile-intro-item em { margin-top: clamp(25px,5vh,50px); font-size: clamp(1rem,2.2vw,2.5rem); font-style: normal; font-weight: 640; letter-spacing: -.04em; }
    .profile-intro > p { position: absolute; right: clamp(20px,4vw,64px); bottom: 20px; margin: 0; opacity: .58; font-size: .65rem; font-weight: 650; letter-spacing: .16em; }
    .is-profile-scrub-ready .profile-stage { position: sticky; top: 0; }
    .profile-montage { position: absolute; inset: 0; z-index: 3; display: grid; overflow: hidden; place-items: center; background: #000000; color: #fff; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity; }
    .profile-montage-track { position: relative; display: grid; width: min(88vw,1280px); height: min(66vh,680px); place-items: center; }
    .profile-montage-card { display: flex; width: 100%; flex-direction: column; align-items: flex-start; }
    .profile-montage-kicker { margin: 0 0 clamp(22px,4vh,46px); color: inherit; font-size: clamp(.72rem,.95vw,.9rem); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
    .profile-montage-line { max-width: 13ch; margin: 0; color: inherit; font-size: clamp(3rem,8vw,8rem); font-weight: 700; line-height: .98; letter-spacing: -.07em; text-align: left; white-space: pre-line; word-break: keep-all; text-wrap: balance; }
    .profile-montage-detail { max-width: 58ch; margin: clamp(20px,4vh,42px) 0 0; color: inherit; font-size: clamp(.9rem,1.45vw,1.2rem); font-weight: 520; line-height: 1.55; letter-spacing: -.025em; word-break: keep-all; }
    .profile-montage-counter { position: absolute; right: max(32px,calc((100vw - 1360px)/2)); bottom: 7vh; color: inherit; opacity: .56; font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .16em; }
    .stack-montage .profile-montage-line { position: absolute; inset: 0; display: grid; max-width: none; margin: 0; place-items: center; text-align: center; }
    .stack-montage-brand-text { display: inline-block; padding-bottom: .24em; color: transparent; background: linear-gradient(100deg,var(--brand-teal),var(--brand-blue) 18%,var(--brand-violet) 38%,var(--brand-magenta) 58%,var(--brand-gold) 82%,var(--brand-lilac)); background-size: 220% 100%; background-position: 0% 50%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.24; }
    .profile-stage::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 87% 15%,rgba(221,25,233,.16),transparent 36%),radial-gradient(ellipse at 8% 88%,rgba(0,124,112,.12),transparent 39%),radial-gradient(ellipse at 65% 78%,rgba(23,55,215,.08),transparent 42%); pointer-events: none; content: ""; }
    .profile-inner { position: relative; display: grid; width: min(1360px,calc(100% - 64px)); height: 100%; margin: auto; padding: clamp(105px,14vh,145px) 0 clamp(40px,7vh,76px); grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); grid-template-rows: minmax(0,1fr); gap: clamp(35px,6vw,100px); }
    .is-profile-scrub-ready .profile-inner { opacity: 0; pointer-events: none; }
    .is-profile-content-ready .profile-inner { pointer-events: auto; }
    .profile-heading { align-self: center; }
    .profile-heading h2 { margin: 0; font-size: clamp(3.8rem,6.7vw,7.9rem); font-weight: 680; line-height: 1.04; letter-spacing: -.073em; word-break: keep-all; }
    .profile-heading h2 span { color: transparent; background: linear-gradient(100deg,var(--brand-teal),var(--brand-blue) 25%,var(--brand-violet) 52%,var(--brand-magenta) 78%,var(--brand-gold)); background-clip: text; -webkit-background-clip: text; }
    .profile-heading > p:last-child { max-width: 340px; margin: clamp(26px,4vh,42px) 0 0; color: #66636c; font-size: clamp(.9rem,1.15vw,1.02rem); line-height: 1.7; word-break: keep-all; }
    .profile-content { display: flex; min-height: 0; flex-direction: column; align-self: stretch; }
    .profile-tabs { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(24,22,33,.18); }
    .profile-tab { position: relative; display: flex; min-height: 58px; padding: 0 5px 13px; align-items: center; justify-content: flex-start; gap: 9px; border: 0; background: transparent; color: #77737e; font: 650 clamp(.84rem,1vw,.98rem) Pretendard,system-ui,sans-serif; letter-spacing: -.025em; cursor: pointer; transition: color .2s,transform .16s; }
    .profile-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #18171d; transform: scaleX(0); transform-origin: left; transition: transform .26s ease; content: ""; }
    .profile-tab span { align-self: center; color: #93909b; font-size: .63rem; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
    .profile-tab[aria-selected="true"] { color: #17161c; }
    .profile-tab[aria-selected="true"]::after { transform: scaleX(1); }
    .profile-tab:hover:not([aria-selected="true"]) { color: #16151b; }
    .profile-tab:active { transform: translateY(2px); }
    .profile-tab:focus-visible,.profile-panel:focus-visible { outline: 2px solid #6b30ff; outline-offset: 3px; }
    .profile-panel { flex: 1 1 auto; min-height: 0; margin-top: 17px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: rgba(39,34,53,.3) transparent; counter-reset: profile-record; mask-image: linear-gradient(to bottom,#000 0%,#000 94%,transparent 100%); }
    .profile-panel[hidden] { display: none; }
    .profile-record { position: relative; min-height: 104px; padding: clamp(12px,1.7vh,20px) 14px clamp(13px,1.8vh,21px) clamp(60px,6vw,94px); border-bottom: 1px solid rgba(29,27,35,.14); counter-increment: profile-record; transition: background .25s ease,padding-left .25s ease; }
    .profile-record:first-child { border-top: 0; }
    .profile-record::before { position: absolute; top: clamp(16px,2.2vh,24px); left: 4px; color: #85808c; font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .08em; content: counter(profile-record,decimal-leading-zero); }
    .profile-record:hover { padding-left: clamp(66px,6.5vw,102px); background: rgba(255,255,255,.43); }
    .profile-record > span { display: block; color: #615b69; font-size: .73rem; font-weight: 680; letter-spacing: .01em; }
    .profile-record h3 { max-width: 26ch; margin: 5px 0 0; font-size: clamp(1.45rem,2.4vw,2.4rem); font-weight: 720; line-height: 1.12; letter-spacing: -.055em; word-break: keep-all; text-wrap: balance; }
    #profile-panel-activities .profile-record h3 { margin-top: 0; }
    .profile-record-facts { display: flex; margin: 9px 0 6px; align-items: center; flex-wrap: wrap; gap: 7px 10px; }
    .profile-record-role { color: #242128; font-size: clamp(.9rem,1.1vw,1.08rem); font-weight: 650; line-height: 1.35; letter-spacing: -.025em; }
    .profile-record-status { display: inline; color: #615b69; font-size: clamp(.8rem,.95vw,.9rem); font-weight: 540; line-height: 1.4; }
    #profile-panel-activities .profile-record > span { font-size: .7rem; font-weight: 560; }
    .profile-record p { margin: 5px 0 0; color: #66616e; font-size: clamp(.8rem,.95vw,.9rem); line-height: 1.45; }
    .profile-record p + p { display: inline-block; margin-top: 4px; color: #898391; font-size: .75rem; font-variant-numeric: tabular-nums; }
    .profile-scroll-hint { margin: 10px 0 0; color: #66616d; font-size: .72rem; font-weight: 650; }
    .profile-scroll-hint[hidden] { display: none; }
    @media (max-width: 780px) { .profile-inner { width: calc(100% - 34px); padding: 90px 0 28px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 25px; } .profile-heading { align-self: start; } .profile-heading h2 { font-size: clamp(2.8rem,8.5vw,5rem); } .profile-heading > p:last-child { margin-top: 12px; } .profile-panel { margin-top: 14px; } .profile-tab { min-height: 43px; padding-inline: 4px; font-size: .8rem; } .profile-tab span { font-size: .59rem; } .profile-record { min-height: 0; padding: 12px 3px 14px 44px; } .profile-record:hover { padding-left: 44px; } .profile-record::before { top: 15px; left: 0; } .profile-record h3 { font-size: clamp(1.18rem,4vw,1.65rem); } .profile-intro-item { padding: 90px 11px 56px; } .profile-intro-item strong { font-size: clamp(3rem,17vw,8rem); } .profile-intro-item em { font-size: clamp(.75rem,2.8vw,1.1rem); } .profile-intro-item span { font-size: .52rem; } .profile-montage-track { width: calc(100% - 44px); height: 62vh; } .profile-montage-kicker { margin-bottom: 26px; font-size: .68rem; } .profile-montage-line { max-width: 10ch; font-size: clamp(2.5rem,10vw,4.4rem); } .profile-montage-detail { max-width: 34ch; font-size: .88rem; } .profile-montage-counter { right: 22px; bottom: 32px; } }
    @media (prefers-reduced-motion: reduce) { .profile-frame.is-profile-scrub-ready { height: 100svh; min-height: 100svh; overflow: hidden; } .is-profile-scrub-ready .profile-stage { position: relative; } .profile-montage,.profile-intro { display: none; } .is-profile-scrub-ready .profile-inner { opacity: 1; pointer-events: auto; } .profile-tab,.profile-tab::after,.profile-record { transition-duration: .15s; } }
    @media (max-height: 620px) { .profile-inner { padding-top: 78px; padding-bottom: 16px; } .profile-heading h2 { font-size: clamp(2.3rem,5vw,4.5rem); } .profile-heading > p:last-child { margin-top: 10px; } .profile-record { padding-block: 9px; } }

    .contact { display: flex; width: 100%; height: 100svh; min-height: 100svh; padding: clamp(94px,15vh,130px) max(32px,calc((100vw - 1360px)/2)) clamp(22px,5vh,40px); color: #fff; flex-direction: column; justify-content: space-between; }
    .contact::before { position: absolute; top: 0; bottom: 0; left: 50%; z-index: -2; width: 100vw; background: #050505; transform: translateX(-50%); content: ""; }
    .contact::after { position: absolute; inset: 0; z-index: 1; display: block; background: linear-gradient(90deg,rgba(0,0,0,.64),rgba(0,0,0,.3) 48%,rgba(0,0,0,.08)),linear-gradient(180deg,rgba(0,0,0,.22),transparent 20%,transparent 77%,rgba(0,0,0,.34)); pointer-events: none; content: ""; }
    .contact-squares { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
    .contact > :not(.contact-squares) { position: relative; z-index: 2; }
    .contact .section-label, .contact .contact-copy, .contact .footer-line { color: rgba(255,255,255,.72); }
    .contact .muted { color: rgba(255,255,255,.72); }
    .contact-title { max-width: 1100px; font-size: clamp(3.6rem,9vw,10.5rem); font-weight: 650; letter-spacing: -.052em; line-height: 1; text-shadow: 0 12px 36px rgba(0,0,0,.55); }
    .contact-bottom { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-top: clamp(26px,7vh,64px); }
    .contact-details { display: grid; justify-items: start; gap: clamp(16px,3vh,28px); }
    .contact-copy { max-width: 450px; color: var(--muted); font-size: 1rem; letter-spacing: -.006em; line-height: 1.72; }
    .contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .contact-secondary { display: inline-flex; min-height: 42px; padding: 0 13px; align-items: center; gap: 18px; color: var(--social-ink,#fff); background: var(--social-bg,#fff); border-radius: 8px; font-size: .86rem; font-weight: 650; letter-spacing: -.015em; text-decoration: none; transition: filter 180ms ease, transform 180ms var(--out); }
    .contact-velog { --social-bg: #12b886; --social-ink: #062820; }
    .contact-linkedin { --social-bg: #0a66c2; --social-ink: #fff; }
    .contact-threads { --social-bg: #fff; --social-ink: #050505; }
    .contact-instagram { --social-bg: linear-gradient(110deg,#833ab4 0%,#c13584 35%,#e1306c 62%,#f77737 100%); --social-ink: #fff; }
    .contact-secondary span { display: inline-block; transition: transform 180ms var(--out); }
    .contact-secondary:hover span { transform: translate(3px,-3px); }
    .contact-secondary:hover { filter: brightness(1.12); }
    .contact-secondary:active { filter: brightness(.84); transform: scale(.97); transition-duration: 60ms; }
    .contact-secondary:focus-visible, .magnetic:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
    .magnetic { display: grid; width: clamp(132px,14vw,180px); height: clamp(132px,14vw,180px); flex: 0 0 auto; place-items: center; color: #050505; background: #fff; border-radius: 50%; box-shadow: none; transition: box-shadow 220ms ease; will-change: transform; }
    .magnetic:hover, .magnetic:focus-visible { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 22px 5px rgba(255,255,255,.16); }
    .magnetic-inner { display: grid; gap: 8px; place-items: center; font-size: .86rem; font-weight: 650; transition: transform 300ms var(--out); }
    .magnetic-inner span { text-align: center; line-height: 1.3; }
    .magnetic-inner strong { font-size: 2.2rem; font-weight: 400; line-height: 1; }
    .magnetic:hover .magnetic-inner { transform: rotate(-8deg) scale(1.05); }
    .magnetic:active .magnetic-inner { transform: rotate(-8deg) scale(.92); }
    .contact.is-scene-active .contact-title .flow-word { animation: contact-word-cadence 2.9s var(--out) 1s infinite; }
    .contact.is-scene-active .contact-title .flow-word:nth-child(2n) { animation-delay: 1.16s; }
    .contact.is-scene-active .contact-title .flow-word:nth-child(3n) { animation-delay: 1.32s; }
    .contact.is-scene-active .magnetic { animation: contact-button-cadence 2.9s var(--out) 1.18s infinite; }
    .footer-line { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(24px,5vh,48px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.24); font-size: .72rem; letter-spacing: .04em; }

    @keyframes breathe { 0%,100% { opacity:.5; transform:scale(.84); } 50% { opacity:1; transform:scale(1); } }
    @keyframes cue { 0%,100% { opacity:.28; transform:scaleX(.45); } 50% { opacity:1; transform:scaleX(1); } }
    @keyframes ambient-orbit-a { from { transform: translate3d(-4vw,-2vh,0) scale(.88); } to { transform: translate3d(24vw,18vh,0) scale(1.16); } }
    @keyframes ambient-orbit-b { from { transform: translate3d(5vw,4vh,0) scale(.92); } to { transform: translate3d(-22vw,-16vh,0) scale(1.18); } }
    @keyframes ambient-scan { 0%,18% { opacity:0; transform:translate3d(-20vw,0,0) skewX(-10deg); } 32% { opacity:1; } 66% { opacity:.75; } 82%,100% { opacity:0; transform:translate3d(132vw,0,0) skewX(-10deg); } }
    @keyframes kinetic-rail { to { transform:translate3d(-50%,0,0); } }
    @keyframes signal-pulse { 0%,100% { opacity:.42; transform:scale(.76); } 48% { opacity:1; transform:scale(1); } }
    @keyframes code-caret { 0%,46% { opacity:1; } 47%,100% { opacity:.16; } }
    @keyframes principle-cadence { 0%,32%,100% { translate:0 0; } 12% { translate:18px 0; } }
    @keyframes principle-arrow-cadence { 0%,32%,100% { transform:rotate(0) scale(1); } 12% { transform:rotate(45deg) scale(1.1); } }
    @keyframes interest-cadence { 0%,38%,100% { translate:0 0; scale:1; } 14% { translate:0 -10px; scale:1.025; } }
    @keyframes card-sheen { 0%,8% { transform:translateX(101%); } 34%,100% { transform:translateX(-410%); } }
    @keyframes lane-cadence { 0%,22%,100% { translate:0 0; } 10% { translate:-20px 0; } }
    @keyframes lane-cadence-reverse { 0%,22%,100% { translate:0 0; } 10% { translate:20px 0; } }
    @keyframes stack-neon-drift { from { opacity:.68; transform:translate3d(-3%,-2%,0) scale(1.02) rotate(-2deg); } to { opacity:1; transform:translate3d(4%,3%,0) scale(1.12) rotate(3deg); } }
    @keyframes pill-light-pass { 0%,58% { transform:translateX(-125%); } 82%,100% { transform:translateX(125%); } }
    @keyframes contact-word-cadence { 0%,20%,100% { translate:0 0; opacity:1; } 8% { translate:0 -10px; opacity:.52; } }
    @keyframes contact-button-cadence { 0%,24%,100% { rotate:0deg; scale:1; } 10% { rotate:-8deg; scale:1.07; } }
    @keyframes statement-word-cadence { 0%,54%,100% { translate:0 0; scale:1; opacity:1; } 62% { translate:0 -10px; scale:1.025; opacity:.48; } 73% { translate:0 3px; scale:.995; opacity:1; } 82% { translate:0 0; scale:1; } }
    @keyframes now-word-cadence { 0%,48%,100% { translate:0 0; scale:1; } 59% { translate:10px -8px; scale:1.045; } 72% { translate:-3px 2px; scale:.99; } 82% { translate:0 0; scale:1; } }
    @keyframes stack-word-cadence { 0%,48%,100% { translate:0 0; scale:1; } 58% { translate:0 -12px; scale:1.035; } 68% { translate:0 4px; scale:.985; } 80% { translate:0 0; scale:1; } }
    @keyframes stack-brand-gradient { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
    @keyframes stack-color-burst {
      0% { opacity:0; transform:scale(.42) rotate(-16deg); }
      38% { opacity:.7; }
      72% { opacity:.26; }
      100% { opacity:0; transform:scale(1.3) rotate(7deg); }
    }
    @keyframes flow-left { to { transform: translate3d(calc(-50% - var(--half-gap)),0,0); } }
    @keyframes flow-right { from { transform: translate3d(calc(-50% - var(--half-gap)),0,0); } to { transform: translate3d(0,0,0); } }

    @media (max-width: 900px) {
      :root { --page: min(100% - 34px, 720px); }
      body::after { display: none; }
      .hero-title .line:last-child { justify-content: flex-start; }
      .hero-bottom, .statement { grid-template-columns: 1fr; }
      .statement-side { position: static; }
      .statement-side { max-width: 390px; }
      .principle { grid-template-columns: 44px minmax(0,1fr) 46px; min-height: 132px; }
      .principle p { display: none; }
      #about, .principle { padding-inline: 17px; }
      .contact { padding-inline: 17px; }
      .archive-frame-inner { width: calc(100% - 34px); gap: 12px; }
      .archive-title { font-size: clamp(3.7rem,8.5vw,6rem); }
      .archive-preview { min-height: 310px; }
    }

    @media (max-width: 600px) {
      :root { --page: calc(100% - 28px); }
      .site-header { top: 10px; width: calc(100% - 20px); height: 54px; padding-left: 15px; }
      .brand span:last-child { display: none; }
      .brand-logo { height: 29px; }
      .site-nav a { min-height: 36px; padding: 0 10px; font-size: .76rem; }
      .frame-flash { padding: 24px 18px; }
      .intro-logo { height: min(36svh,300px); max-width: min(72vw,320px); }
      .intro-code { top: calc(50% + 176px); width: calc(100% - 36px); }
      .intro-grid { transform: perspective(540px) rotateX(64deg) scale(1.55); }
      .hero { padding-top: 126px; }
      .hero-meta > span:last-child { display: none; }
      .hero-title { font-size: clamp(3.2rem,13.2vw,5.2rem); letter-spacing: -.075em; }
      .hero-title .quote, .hero-title .semi { font-size: .42em; }
      .hero-title .line { white-space: nowrap; }
      .hero-bottom { gap: 40px; }
      .scroll-cue { order: 2; }
      .section { padding-top: 86px; padding-bottom: 18px; }
      .section-label { margin-bottom: 18px; }
      .statement { gap: 18px; }
      .statement-copy { font-size: clamp(2.2rem,9.4vw,3.6rem); }
      .principles { margin-top: 28px; }
      .principle { grid-template-columns: 34px minmax(0,1fr) 40px; gap: 10px; min-height: 112px; }
      #about, .principle { padding-inline: 14px; }
      .principle h3 { font-size: clamp(1.6rem,8vw,2.4rem); }
      .principle-arrow { width: 38px; height: 38px; font-size: .96rem; }
      .now-grid { grid-template-columns: 1fr; gap: 14px; }
      .now-title { font-size: 2.8rem; }
      .now-title br { display: none; }
      .interest-list { gap: 8px; }
      .interest { min-height: 132px; padding: 16px 18px; border-radius: 18px; }
      .interest-meta { margin-bottom: 10px; }
      .interest h3 { margin-bottom: 7px; font-size: 1.38rem; }
      .interest p { font-size: .79rem; line-height: 1.45; }
      .stack-pill { min-height: 72px; padding-inline: 26px; border-radius: 0; font-size: 1.75rem; }
      .stack-pill:nth-child(3n+2) { border-radius: 0; }
      .flow-field { gap: 10px; }
      .flow-track { --track-gap:10px; --half-gap:5px; }
      .archive-frame-inner { width: calc(100% - 32px); padding: 96px 0 42px; grid-template-columns: 1fr; gap: 0; align-content: start; }
      .archive-index { margin-bottom: 18px; font-size: .58rem; }
      .archive-title { font-size: clamp(3.3rem,13.7vw,5.4rem); }
      .archive-copy { margin-top: 15px; font-size: .78rem; line-height: 1.5; }
      .archive-link { min-height: 44px; margin-top: 16px; font-size: .78rem; }
      .archive-link-arrow { width: 28px; height: 28px; }
      .archive-preview { width: 100%; height: 32svh; min-height: 220px; margin-top: 10px; }
      .archive-preview-caption,.archive-preview-card figcaption { gap: 5px; padding-top: 5px; font-size: .64rem; }
      .archive-preview-caption > span:first-child,.archive-preview-card figcaption span { font-size: .54rem; }
      .preview-lightframe { top: 2%; left: 33%; width: 37%; }
      .preview-tile { top: 36%; left: 2%; width: 32%; }
      .preview-aura { top: 48%; right: 2%; width: 26%; }
      .archive-frame-bottom { bottom: 18px; font-size: .55rem; }
      .contact { height: 100svh; min-height: 100svh; padding-top: 84px; padding-bottom: 18px; }
      .contact { padding-inline: 14px; }
      .contact-bottom { align-items: flex-start; flex-direction: column; }
      .contact-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 360px); }
      .contact-secondary { justify-content: space-between; }
      .magnetic { align-self: flex-end; }
      .footer-line span:last-child { display: none; }
    }

    @media (max-height: 700px) {
      .hero { padding-top: 112px; padding-bottom: 28px; }
      .hero-meta { margin-bottom: 24px; }
      .hero-bottom { margin-top: 32px; }
      .section { padding-top: 82px; padding-bottom: 14px; }
      .section-label { margin-bottom: 14px; }
      .statement-copy { font-size: clamp(2rem,4.5vw,4.3rem); }
      .principles { margin-top: 20px; }
      .principle { min-height: 72px; }
      .interest { min-height: 112px; padding-block: 16px; }
      .interest-meta { margin-bottom: 10px; }
      .interest h3 { margin-bottom: 7px; }
      .stack-sticky { padding-top: 76px; padding-bottom: 12px; }
      .stack-heading { margin-bottom: 16px; }
      .stack-heading h2 { font-size: clamp(2.5rem,5vw,5.4rem); }
      .stack-pill { min-height: 62px; }
      .contact { padding-top: 84px; padding-bottom: 18px; }
      .contact-title { font-size: clamp(3.2rem,8vw,8rem); }
      .contact-bottom { padding-top: 20px; }
      .magnetic { width: 126px; height: 126px; }
      .footer-line { margin-top: 18px; }
    }

    @media (max-height: 560px) and (orientation: landscape) {
      .site-header { top: 8px; height: 48px; }
      .hero { padding-top: 78px; }
      .hero-title { font-size: clamp(3rem,7.5vw,6rem); }
      .hero-description { font-size: .9rem; line-height: 1.5; }
      .section { padding-top: 68px; }
      .statement { gap: 16px; }
      .statement-side { display: none; }
      .statement-copy { font-size: clamp(1.9rem,4vw,3.4rem); }
      .principles { margin-top: 12px; }
      .principle { min-height: 58px; }
      .principle p { display: none; }
      .now-grid { grid-template-columns: minmax(180px,.5fr) 1fr; gap: 20px; }
      .now-title { font-size: 2.6rem; }
      .interest-list { gap: 6px; }
      .interest { min-height: 0; padding: 11px 16px; border-radius: 14px; }
      .interest-meta { margin-bottom: 5px; }
      .interest h3 { margin-bottom: 4px; font-size: 1.2rem; }
      .interest p { font-size: .72rem; line-height: 1.35; }
      .stack-sticky { padding-top: 66px; }
      .stack-heading { margin-bottom: 8px; }
      .stack-heading h2 { font-size: 2.35rem; line-height: .92; }
      .flow-field { gap: 6px; }
      .flow-track { --track-gap:8px; --half-gap:4px; }
      .stack-pill { min-height: 46px; padding-inline: 24px; border-radius: 0; font-size: 1.55rem; }
      .flow-note { margin-top: 5px; }
      .contact-title { font-size: clamp(2.8rem,7vw,5.5rem); }
      .contact-bottom { padding-top: 8px; }
      .contact-copy { max-width: 360px; font-size: .82rem; line-height: 1.45; }
      .magnetic { width: 96px; height: 96px; }
      .footer-line { margin-top: 8px; padding-top: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .scroll-highlight { background-size: 100% 68% !important; }
      .block-reveal-line { clip-path: none; }
      .block-reveal-line::after { display: none; }
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition-duration: 150ms !important; transition-property: opacity !important; }
      body::before { background: linear-gradient(180deg,#070707,#030303); }
      .intro-screen { display: none; }
      .frame-flash { display: none; }
      .hero-beat-stage { display: none; }
      .hero-title .char, .reveal, .flow-word, .text-drift { opacity: 1; filter: none; transform: none; }
      .flow-track { animation: none; }
      .flow-lane { overflow-x: auto; mask-image: none; }
      .interest.reveal.is-visible { transform: none; }
      .stack-montage { display: none; }
      .stack-heading .muted { animation: none; }
    }