:root {
  color-scheme:dark;
  --bg:#06070b;
  --surface:rgba(14,16,22,.62);
  --fg:#eee9df;
  --muted:#a69e91;
  --quiet:#7c7973;
  --gold:#ebc48c;
  --lavender:#afbdff;
  --border:rgba(235,205,158,.17);
  --safe-bottom:env(safe-area-inset-bottom,0px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2.5rem
}
body {
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--fg);
  font-family:Georgia,'Apple SD Gothic Neo','Malgun Gothic','Noto Serif KR',serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
a {
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid #ffe2ad;
  outline-offset:5px
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
::selection {
  background:#6d553b;
  color:white
}
[hidden] {
  display:none!important
}
.visually-hidden {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  top:-6rem;
  left:1rem;
  z-index:110;
  background:#fff2d9;
  color:#15100b;
  padding:.7rem 1.2rem;
  border-radius:8px
}
.skip-link:focus {
  top:1rem
}
#starfield {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none
}
.film-grain {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.06;
  background-image:radial-gradient(rgba(255,255,255,.18) .65px,transparent .65px);
  background-size:5px 5px;
  mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)
}
#cursor-glow {
  position:fixed;
  z-index:40;
  pointer-events:none;
  width:90px;
  height:90px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,216,160,.23),rgba(228,176,100,.08) 35%,transparent 72%);
  transform:translate(-1000px,-1000px);
  will-change:transform;
  opacity:0;
  transition:opacity .4s;
  mix-blend-mode:screen
}
body.cursor-active #cursor-glow {
  opacity:1
}
body.at-ending #cursor-glow {
  width:130px;
  height:130px
}
#scroll-progress {
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:0;
  z-index:100;
  background:linear-gradient(90deg,#b297f4,#f5cca0,#bfe9e4);
  box-shadow:0 0 15px #c0a1e6;
  pointer-events:none
}
.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:35;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(14px,2.6vw,28px) clamp(18px,3vw,46px);
  pointer-events:none
}
.site-header>* {
  pointer-events:auto
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#ece2d1;
  text-shadow:0 1px 8px #000
}
.brand-symbol {
  font-size:1.8rem;
  font-weight:300;
  color:var(--gold);
  line-height:1
}
.brand strong {
  display:block;
  letter-spacing:.27em;
  font-size:clamp(.8rem,1.2vw,1rem);
  font-weight:400
}
.brand small {
  display:block;
  font:10px/1.6 ui-monospace,Consolas,monospace;
  letter-spacing:.15em;
  color:#a0988c
}
.header-actions {
  display:flex;
  gap:9px
}
.utility-button,.ghost-button,.primary-button,.text-button {
  border-radius:3px;
  transition:background .25s,border-color .25s,color .25s,transform .25s
}
.utility-button {
  padding:8px 12px;
  background:rgba(8,9,14,.6);
  color:#c5b9aa;
  border:1px solid var(--border);
  font:11px/1.4 ui-monospace,Consolas,monospace;
  letter-spacing:.02em;
  backdrop-filter:blur(12px)
}
.utility-button:hover,.utility-button[aria-pressed="true"] {
  color:#ffdfaa;
  border-color:rgba(235,196,140,.55);
  background:rgba(46,38,33,.74)
}
.header-actions button span {
  margin-left:3px
}
.chapter-nav {
  position:fixed;
  z-index:30;
  left:clamp(16px,2.7vw,42px);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:14px
}
.chapter-nav a {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:#898277;
  font:10px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.08em;
  transition:color .2s
}
.chapter-nav a i {
  font-style:normal;
  display:grid;
  place-items:center;
  border:1px solid rgba(225,209,186,.2);
  width:27px;
  height:27px;
  border-radius:50%;
  font-size:9px
}
.chapter-nav a span {
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .2s,transform .2s
}
.chapter-nav a:hover span,.chapter-nav a:focus-visible span,.chapter-nav a[aria-current="location"] span {
  opacity:1;
  transform:none
}
.chapter-nav a:hover,.chapter-nav a[aria-current="location"] {
  color:var(--gold)
}
.chapter-nav a[aria-current="location"] i {
  box-shadow:0 0 16px rgba(237,189,119,.2);
  border-color:var(--gold)
}
.chapter {
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(115px,16vh,170px) clamp(24px,8vw,140px) 112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  isolation:isolate
}
.eyebrow {
  color:var(--gold);
  opacity:.75;
  font:11px/1.5 ui-monospace,Consolas,monospace;
  letter-spacing:.31em;
  text-transform:uppercase
}
h1,h2,p {
  margin:0
}
h1,h2 {
  font-weight:400;
  letter-spacing:.03em
}
h1 {
  font-size:clamp(2.1rem,5vw,5.25rem);
  line-height:1.33
}
h2 {
  font-size:clamp(1.5rem,3.1vw,3rem);
  line-height:1.5
}
h1 em,h2 em {
  font-style:normal;
  color:#f3d4a6
}
.section-heading {
  max-width:760px
}
.section-heading .eyebrow {
  margin-bottom:17px
}
.section-heading>p:last-child {
  margin-top:1.2rem;
  color:#b0aba2;
  font-size:clamp(.88rem,1.3vw,1rem)
}
.next-link {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:.83rem;
  letter-spacing:.09em;
  color:#d0a975;
  text-decoration:none;
  border-bottom:1px solid rgba(212,172,116,.25);
  padding:8px 2px;
  margin-top:clamp(30px,5vh,54px)
}
.next-link span {
  font-size:1.3rem;
  line-height:1
}
.next-link:hover {
  color:#ffe7c0;
  border-color:#ffe7c0
}
.fineprint {
  font:12px/1.8 'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:#928c83;
  max-width:690px
}
/* threshold */
.chapter-intro {
  background:radial-gradient(ellipse 44% 32% at 50% 42%,rgba(166,95,46,.12),transparent 90%)
}
.intro-sigil {
  width:clamp(175px,23vw,290px);
  height:clamp(175px,23vw,290px);
  position:relative;
  display:grid;
  place-items:center;
  margin-bottom:clamp(27px,5vh,55px)
}
.intro-orb {
  width:45%;
  aspect-ratio:1;
  border-radius:50%;
  position:relative;
  background:radial-gradient(circle at 33% 30%,#fff6e2 0%,#f6d19a 19%,#cc8650 42%,#40231c 70%,transparent 76%);
  box-shadow:0 0 60px 10px rgba(233,167,96,.25),0 0 125px 36px rgba(174,111,76,.1);
  animation:orb-breathe 9s ease-in-out infinite
}
.intro-orb:after {
  content:"";
  position:absolute;
  inset:3%;
  border-radius:50%;
  border:1px solid rgba(255,243,218,.3)
}
.orb-orbit {
  position:absolute;
  inset:9%;
  border-radius:50%;
  border:1px solid rgba(237,202,151,.15)
}
.orbit-one {
  transform:rotateX(68deg) rotate(-22deg);
  animation:orbit-roll 42s linear infinite
}
.orbit-two {
  inset:-3%;
  border-color:rgba(215,188,184,.11);
  transform:rotateY(68deg) rotate(24deg)
}
.chapter-intro .eyebrow {
  margin-bottom:10px
}
.intro-lead {
  margin-top:17px;
  font-size:clamp(1.02rem,1.65vw,1.27rem);
  letter-spacing:.08em
}
.intro-sub {
  margin-top:16px;
  font-size:clamp(.82rem,1.35vw,.98rem);
  color:#a9a296;
  line-height:2.2
}
/* breath */
.chapter-breath {
  background:radial-gradient(ellipse at center,rgba(103,126,203,.065),transparent 68%)
}
.breath-system {
  position:relative;
  width:clamp(220px,35vw,344px);
  height:clamp(220px,35vw,344px);
  display:grid;
  place-items:center;
  margin:3.1rem auto 1.7rem
}
.breath-circle {
  position:absolute;
  inset:9%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(151,177,255,.38),rgba(151,177,255,.14) 50%,rgba(109,133,211,.04) 72%,transparent 75%);
  border:1px solid rgba(165,191,255,.35);
  box-shadow:0 0 74px rgba(141,164,255,.1);
  transform:scale(.56);
  opacity:.76;
  will-change:transform,opacity
}
.breath-halo {
  position:absolute;
  inset:6%;
  border-radius:50%;
  border:1px solid rgba(174,196,255,.12)
}
.halo-two {
  inset:-5%;
  border-style:dashed;
  border-color:rgba(172,178,228,.09)
}
.breath-center {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:4px;
  pointer-events:none
}
.breath-center span {
  color:#d0dcff;
  font-size:1.02rem;
  letter-spacing:.19em
}
.breath-center small {
  font-size:11px;
  color:#abb3c8;
  letter-spacing:.05em
}
.breath-info {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:23px;
  flex-wrap:wrap;
  margin:10px auto 17px
}
.breath-info>p {
  color:#b4adac;
  font-size:.88rem
}
.breath-info strong {
  color:#ffdfaa;
  font:1.2rem/1 ui-monospace,Consolas,monospace;
  font-weight:500;
  margin-left:8px
}
.unit {
  font-size:.8rem;
  margin-left:4px
}
.ghost-button {
  color:#d6c7b4;
  background:rgba(20,18,18,.32);
  border:1px solid rgba(223,193,156,.28);
  padding:10px 16px;
  font-size:.78rem;
  letter-spacing:.06em
}
.ghost-button:hover {
  background:rgba(77,61,46,.22);
  border-color:rgba(243,201,147,.64)
}
/* time */
.chapter-time {
  background:radial-gradient(ellipse at 50% 40%,rgba(156,109,57,.08),transparent 67%)
}
.birth-form {
  margin:2.4rem auto 0;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:12px
}
.birth-form>label,.cosmos-input-wrap>label {
  color:#b5aa9a;
  letter-spacing:.12em;
  font-size:.85rem
}
.birth-controls,.name-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap
}
.birth-controls input,.name-controls input {
  background:rgba(17,19,25,.72);
  border:1px solid rgba(211,183,145,.3);
  color:var(--fg);
  border-radius:3px;
  padding:12px 16px;
  font-size:1rem;
  min-height:46px;
  outline-offset:4px
}
.birth-controls input {
  width:min(63vw,245px)
}
.birth-controls input::-webkit-calendar-picker-indicator {
  filter:invert(.9)
}
.primary-button {
  padding:12px 19px;
  min-height:46px;
  color:#16120f;
  background:#d9ba8f;
  border:1px solid #ecd1a7;
  font-size:.8rem;
  letter-spacing:.04em;
  font-weight:600
}
.primary-button:hover {
  background:#ffe1b7;
  transform:translateY(-1px)
}
.form-error {
  font:13px sans-serif;
  color:#f5b6a9
}
.facts {
  width:min(100%,810px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:2rem auto 0
}
.fact {
  background:linear-gradient(155deg,rgba(28,25,25,.7),rgba(15,16,21,.64));
  border:1px solid rgba(226,197,158,.14);
  padding:19px 8px 15px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px
}
.fact-label {
  color:#a99f91;
  font-size:.77rem
}
.fact-value {
  font:clamp(1.05rem,2vw,1.7rem)/1.2 ui-monospace,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  color:#f0cf9e;
  min-width:0;
  overflow-wrap:anywhere
}
.fact small {
  color:#999083;
  font-size:11px
}
.facts-note {
  max-width:800px;
  color:#a69a8b;
  font:11px/1.8 'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  margin:16px auto 0;
  text-align:center
}
/* life & cosmos */
.chapter-canvas {
  padding:0;
  min-height:max(100svh,660px);
  overflow:hidden;
  justify-content:space-between
}
.chapter-canvas canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:-1;
  touch-action:pan-y
}
.chapter-life {
  background:radial-gradient(ellipse at center,rgba(75,45,36,.14),transparent 70%)
}
.chapter-cosmos {
  background:radial-gradient(ellipse at center,rgba(101,90,103,.1),transparent 70%)
}
.canvas-top {
  padding:clamp(110px,14vh,155px) 24px 15px;
  pointer-events:none;
  z-index:2;
  max-width:740px
}
.canvas-top h2 {
  margin-top:13px
}
.canvas-top>p:last-child {
  margin-top:1rem;
  font-size:clamp(.85rem,1.2vw,.98rem);
  color:#b0aba2
}
.canvas-bottom {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:12px;
  padding:16px 20px calc(5.5vh + var(--safe-bottom));
  width:100%
}
.counter-label {
  font-size:.9rem;
  color:#aaa198
}
.counter-label strong {
  font:1.3rem ui-monospace,Consolas,monospace;
  color:#f8d4a4;
  margin-left:.5rem
}
.canvas-buttons {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center
}
.canvas-bottom .next-link {
  margin-top:0
}
.cosmos-input-wrap {
  position:relative;
  z-index:3;
  padding:18px 22px calc(9vh + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  max-width:100%;
  width:100%;
  background:linear-gradient(transparent,rgba(6,7,11,.54) 90%)
}
.name-controls input {
  text-align:center;
  width:min(61vw,290px);
  min-width:140px
}
.cosmos-input-wrap .fineprint {
  margin-top:4px
}
.text-button {
  background:transparent;
  border:none;
  color:#d2bc9a;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:.77rem;
  padding:7px 9px
}
.text-button:hover {
  color:#ffe4bd
}
/* ending */
.chapter-ending {
  background:radial-gradient(ellipse 34% 28% at 50% 43%,rgba(204,158,100,.12),transparent 100%)
}
.ending-symbol {
  font-size:clamp(3rem,7vw,6rem);
  line-height:1;
  color:#eac49a;
  text-shadow:0 0 35px rgba(246,197,121,.4);
  margin:2.4rem 0
}
.ending-lines {
  display:flex;
  flex-direction:column;
  gap:clamp(15px,3vh,34px);
  max-width:790px
}
.ending-lines p {
  font-size:clamp(.95rem,1.75vw,1.2rem);
  letter-spacing:.03em;
  opacity:.24;
  transform:translateY(12px);
  transition:opacity 1.5s,transform 1.5s
}
.ending-lines p:nth-child(3) {
  color:#ac9f8e
}
.ending-lines p.show {
  opacity:1;
  transform:none
}
.ending-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:clamp(35px,6vh,65px) auto 14px
}
.idle-notice {
  position:fixed;
  z-index:44;
  bottom:calc(28px + var(--safe-bottom));
  left:50%;
  transform:translate(-50%,14px);
  pointer-events:none;
  white-space:normal;
  max-width:min(90vw,490px);
  width:max-content;
  text-align:center;
  font-size:.8rem;
  letter-spacing:.08em;
  color:#edce9d;
  background:rgba(12,12,15,.81);
  border:1px solid rgba(224,191,155,.2);
  padding:12px 22px;
  border-radius:36px;
  opacity:0;
  transition:opacity .8s,transform .8s;
  backdrop-filter:blur(12px)
}
.idle-notice.show {
  opacity:1;
  transform:translate(-50%,0)
}
.noscript-note {
  position:fixed;
  z-index:50;
  bottom:20px;
  right:20px;
  background:#2b241f;
  padding:12px;
  max-width:400px
}
@keyframes orb-breathe {
  0%,100% {
    transform:scale(.91);
    opacity:.76
  }
  50% {
    transform:scale(1.1);
    opacity:1
  }
}
@keyframes orbit-roll {
  from {
    transform:rotateX(68deg) rotate(0)
  }
  to {
    transform:rotateX(68deg) rotate(360deg)
  }
}
@media(max-width:1050px) {
  .chapter-nav {
    left:13px
  }
  .chapter-nav a span {
    display:none
  }
  .chapter {
    padding-left:9vw;
    padding-right:9vw
  }
}
@media(max-width:650px) {
  html {
    scroll-padding-top:0
  }
  .site-header {
    padding:12px 14px;
    background:linear-gradient(rgba(6,7,11,.85),rgba(6,7,11,0))
  }
  .brand {
    gap:7px
  }
  .brand small {
    font-size:8px;
    letter-spacing:.08em
  }
  .brand-symbol {
    font-size:1.4rem
  }
  .header-actions {
    gap:5px
  }
  .utility-button {
    padding:8px 9px;
    font-size:10px
  }
  .chapter-nav {
    top:auto;
    transform:none;
    bottom:calc(8px + var(--safe-bottom));
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:row;
    gap:8px;
    border:1px solid var(--border);
    padding:7px 9px;
    border-radius:40px;
    background:rgba(8,9,13,.9);
    backdrop-filter:blur(14px)
  }
  .chapter-nav a {
    gap:0
  }
  .chapter-nav a i {
    width:28px;
    height:28px
  }
  .chapter {
    padding:108px 22px calc(120px + var(--safe-bottom))
  }
  .chapter-intro {
    padding-bottom:calc(120px + var(--safe-bottom))
  }
  .intro-sigil {
    margin-bottom:20px
  }
  .section-heading>p:last-child {
    max-width:310px;
    margin-left:auto;
    margin-right:auto
  }
  .breath-system {
    margin:1.2rem auto
  }
  .breath-info {
    gap:9px
  }
  .facts {
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:20px
  }
  .fact {
    padding:15px 5px 12px
  }
  .fact-value {
    font-size:clamp(.95rem,4vw,1.24rem)
  }
  .chapter-canvas {
    min-height:max(100svh,640px);
    padding:0
  }
  .canvas-top {
    padding:105px 22px 0
  }
  .canvas-bottom {
    padding-bottom:calc(78px + var(--safe-bottom))
  }
  .cosmos-input-wrap {
    padding-bottom:calc(85px + var(--safe-bottom))
  }
  .idle-notice {
    bottom:calc(68px + var(--safe-bottom))
  }
  .ending-symbol {
    margin:1.4rem 0
  }
  .ending-lines {
    gap:17px
  }
  .ending-actions {
    margin-top:24px
  }
}
@media(max-width:380px) {
  .brand small {
    display:none
  }
  .header-actions button {
    font-size:10px;
    padding:7px
  }
  .birth-controls input {
    width:196px
  }
  .primary-button {
    padding:10px 13px
  }
  .name-controls input {
    width:176px
  }
  .chapter {
    padding-top:95px
  }
  .chapter-canvas {
    padding:0
  }
  .canvas-top {
    padding-top:86px
  }
}
@media(max-height:620px) and (min-width:651px) {
  .chapter {
    padding-top:100px;
    padding-bottom:80px
  }
  .chapter-canvas {
    min-height:690px
  }
  .intro-sigil {
    width:160px;
    height:160px;
    margin-bottom:10px
  }
  .ending-symbol {
    margin:16px 0
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .intro-orb,.orbit-one {
    animation:none!important
  }
  .ending-lines p {
    transition:none!important
  }
  *,*:before,*:after {
    scroll-behavior:auto!important
  }
}