:root{color-scheme:dark;--bg:#040711;--ink:#edf5f7;--soft:#b5c8cf;--muted:#8499a4;--cyan:#98e7dd;--gold:#e5c49b;--line:rgba(201,238,235,.16);--panel:rgba(5,13,22,.70);--ease:cubic-bezier(.2,.75,.25,1)}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;height:100%;min-height:100dvh;background:var(--bg);color:var(--ink);font-family:'Noto Serif KR','Nanum Myeongjo','Batang','AppleMyungjo',Georgia,serif;font-weight:400;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{touch-action:manipulation}button:disabled{opacity:.27;cursor:not-allowed}
button:not(:disabled){cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
button:hover:not(:disabled){transition:background .25s,border-color .25s,color .25s,transform .25s}
::selection{background:rgba(152,231,221,.3);color:#fff}
#world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 52% 51%,#102029 0%,#08111d 40%,#040711 76%)}
#world canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#life{opacity:.77;filter:blur(2.1px) saturate(1.3);transition:opacity 1.5s ease;transform:scale(1.03);image-rendering:auto}
#trace{opacity:.72;transition:opacity 1.5s ease}
.aura{position:absolute;inset:-30%;background:radial-gradient(circle at 48% 42%,rgba(40,121,122,.13),transparent 47%),radial-gradient(circle at 69% 35%,rgba(139,94,119,.1),transparent 55%);mix-blend-mode:screen}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(4,7,17,.04) 16%,rgba(4,7,17,.42) 76%,rgba(4,7,17,.86) 100%),linear-gradient(90deg,rgba(4,7,17,.3),transparent 30%,transparent 70%,rgba(4,7,17,.3))}
.fine-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(220,248,244,.013) 1px,transparent 1px),linear-gradient(90deg,rgba(220,248,244,.013) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle,black,transparent 88%)}
body[data-act="1"] #life{opacity:.94}body[data-act="4"] #life{opacity:.28}body[data-act="4"] #trace{opacity:1}body[data-act="5"] #life{opacity:.34}body[data-act="6"] #life,body[data-act="6"] #trace{opacity:0}
.skip-link{position:fixed;top:-100px;left:15px;z-index:80;background:#102732;padding:12px;color:white}.skip-link:focus{top:16px}
.site-header{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:80px;padding:18px clamp(22px,5vw,76px);border-bottom:1px solid rgba(210,245,246,.07);background:linear-gradient(180deg,rgba(4,7,17,.62),transparent)}
.brand{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.09em;white-space:nowrap}.brand-symbol{font-size:26px;color:var(--cyan);filter:drop-shadow(0 0 10px rgba(107,231,222,.5))}.brand-en{font:11px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.18em;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:16px}.visit-chip{font:11px ui-monospace,Consolas,monospace;color:#9eb5bf;letter-spacing:.08em;white-space:nowrap}.icon-button{width:42px;height:42px;border:1px solid var(--line);background:rgba(8,20,28,.48);color:var(--soft);border-radius:50%;display:grid;place-items:center}.icon-button:hover{border-color:var(--cyan);color:#fff}.icon-button svg{width:19px;height:19px}
.settings-panel{position:fixed;z-index:48;top:78px;right:clamp(15px,5vw,76px);width:min(350px,calc(100vw - 32px));padding:22px;border:1px solid rgba(156,227,221,.22);border-radius:5px;background:rgba(7,17,27,.96);box-shadow:0 22px 60px rgba(0,0,0,.58);backdrop-filter:blur(20px)}
.settings-panel[hidden],.scene[hidden],.toast[hidden]{display:none!important}.settings-title{display:flex;align-items:center;justify-content:space-between;letter-spacing:.12em;font-size:16px;margin-bottom:22px}.close-button{background:none;color:var(--soft);border:0;font:24px Arial;padding:0 5px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);font-size:13px;cursor:pointer}.switch-row small{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.6}.switch-row input{appearance:none;flex:none;width:42px;height:23px;border:1px solid #5f777e;border-radius:15px;background:#1c2d36;position:relative;cursor:pointer}.switch-row input:after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#c4d9db;transition:transform .2s}.switch-row input:checked{background:#2d726e;border-color:var(--cyan)}.switch-row input:checked:after{transform:translateX(19px);background:white}
.settings-note{color:var(--muted);font-size:11px;line-height:2;margin:22px 0 14px}.settings-panel .quiet-button{width:100%;margin-top:6px}
#experience{position:fixed;z-index:10;top:80px;bottom:124px;left:0;right:0;display:flex;justify-content:center;align-items:stretch;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#32535a transparent}
.scene-shell{width:min(100%,1080px);min-height:100%;display:flex;align-items:center;justify-content:center;padding:28px clamp(20px,6vw,74px) 34px}
.scene{width:100%;text-align:center;animation:enter .85s var(--ease) both;padding:10px 0}.scene.is-active{display:block}.scene h1,.scene h2{font-weight:300;line-height:1.51;letter-spacing:-.027em;font-size:clamp(2rem,4.2vw,4.1rem);text-wrap:balance;margin:0 0 24px;text-shadow:0 8px 35px rgba(0,0,0,.55)}.scene h1{font-size:clamp(2.15rem,4.7vw,4.55rem)}.scene h1 em,.scene h2 em{font-weight:300;font-style:normal;color:var(--cyan);text-shadow:0 0 40px rgba(99,219,211,.2)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;color:var(--cyan);font:10px/1.5 ui-monospace,'SFMono-Regular',Consolas,monospace;letter-spacing:.28em;margin:0 0 32px}.eyebrow-line{height:1px;width:34px;background:currentColor;opacity:.7}.eyebrow-divider{color:#657a80}
.scene-desc{font-size:clamp(13px,1.24vw,16px);line-height:2.15;color:var(--soft);letter-spacing:.008em;margin:0 auto;max-width:700px;word-break:keep-all;text-wrap:pretty}.scene-en{font:italic clamp(15px,1.5vw,21px)/1.5 Georgia,'Times New Roman',serif;color:rgba(201,221,225,.5);letter-spacing:.018em;margin:24px auto 0;max-width:700px}
.scene-actions,.mirror-actions{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap;margin:33px auto 0}
.primary-button,.quiet-button{border-radius:3px;padding:13px 23px;min-height:46px;font-size:13px;letter-spacing:.07em;line-height:1.55;transition:transform .25s var(--ease),border-color .25s,background .25s,color .25s}.primary-button{background:rgba(145,229,217,.13);border:1px solid rgba(156,238,226,.6);color:#eafffb;box-shadow:inset 0 0 28px rgba(111,234,217,.055),0 0 34px rgba(95,225,210,.06)}.primary-button span{margin-left:16px;color:var(--cyan);font-size:19px;vertical-align:-1px}.primary-button:hover{background:rgba(145,229,217,.22);transform:translateY(-2px)}.quiet-button{background:rgba(2,11,19,.42);border:1px solid rgba(186,215,216,.22);color:#baccd2}.quiet-button:hover{border-color:rgba(169,233,226,.6);color:#fff;background:rgba(134,210,198,.08)}.quiet-button.danger{color:#d6acb3;border-color:rgba(219,134,145,.24)}.quiet-button.danger:hover{border-color:rgba(219,134,145,.65)}
.scene-whisper{display:block;font:11px/1.9 ui-monospace,Consolas,monospace;color:#8297a0;letter-spacing:.04em;margin-top:24px}.footnote{color:#8197a0;font-size:11px;line-height:1.9;margin:24px 0 0;word-break:keep-all}
.stat-line{display:flex;justify-content:center;gap:clamp(30px,7vw,105px);margin:32px auto 0}.stat-line div{display:flex;flex-direction:column;align-items:center;gap:9px}.stat-line strong{font:300 clamp(26px,3vw,38px)/1 ui-monospace,'SFMono-Regular',Consolas,monospace;color:var(--cyan);font-variant-numeric:tabular-nums}.stat-line span{font-size:11px;color:var(--muted)}
.counter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,700px);margin:25px auto 0}.counter{padding:22px 12px;background:rgba(6,17,27,.7);border:1px solid rgba(174,229,227,.16);border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;backdrop-filter:blur(3px)}.counter-tag{color:#a5bac0;font:10px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.08em}.counter output{color:var(--cyan);font:300 clamp(22px,3vw,31px)/1.3 ui-monospace,Consolas,monospace;letter-spacing:-.035em;font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere}.counter small{font-size:10px;color:#98aab1;line-height:1.65}
.still-ring{--progress:0;--ring:rgba(143,230,221,.8);margin:26px auto 10px;position:relative;width:clamp(154px,24vh,220px);height:clamp(154px,24vh,220px);display:grid;place-items:center;border-radius:50%;background:conic-gradient(from -90deg,var(--ring) calc(var(--progress)*1%),rgba(154,232,225,.1) 0%);box-shadow:0 0 55px rgba(92,209,203,.08)}.still-ring:before{content:'';position:absolute;inset:4px;background:#07121d;border-radius:50%;box-shadow:inset 0 0 24px rgba(35,97,105,.24)}.still-ring-core{position:relative;display:flex;align-items:center;flex-direction:column;gap:8px}.still-ring-core strong{color:#c8fff6;font:300 clamp(32px,5vw,50px) ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}.still-ring-core span{color:var(--muted);font-size:11px;letter-spacing:.1em}.still-ring.complete{--ring:var(--gold);box-shadow:0 0 70px rgba(231,192,144,.13)}.still-message{color:var(--soft);font-size:13px;line-height:1.8;margin:6px auto 0}
.mirror-actions{max-width:760px}.mirror-actions .quiet-button,.mirror-actions .primary-button{padding:12px 18px}
.memory-card{position:relative;overflow:hidden;width:min(100%,470px);margin:26px auto 0;border:1px solid rgba(176,224,222,.23);background:linear-gradient(145deg,rgba(7,27,34,.89),rgba(7,13,23,.84));box-shadow:0 18px 55px rgba(0,0,0,.24);border-radius:4px;padding:28px 22px 40px}.memory-card:after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:1px;width:65%;background:linear-gradient(90deg,transparent,#b4f3e6,transparent)}.memory-kicker{display:block;color:#91aab0;letter-spacing:.2em;font:9px ui-monospace,Consolas,monospace}.memory-card strong{display:block;font-size:clamp(22px,3vw,33px);font-weight:300;color:var(--cyan);margin:18px auto 12px}.memory-card p{font-size:12px;line-height:1.9;color:var(--soft);margin:0 auto}.memory-glyph{font-size:50px;color:rgba(155,229,219,.28);line-height:1;margin-top:20px}
.final-orb{height:8px;width:8px;border-radius:50%;margin:5px auto 38px;background:#bbfff4;box-shadow:0 0 10px 4px rgba(132,238,231,.52),0 0 55px 20px rgba(102,196,186,.24),0 0 110px 50px rgba(102,196,186,.11);animation:orb 4s ease-in-out infinite}
.control-deck{position:fixed;bottom:0;left:0;right:0;z-index:22;padding:14px clamp(20px,5vw,76px) max(12px,env(safe-area-inset-bottom));min-height:124px;background:linear-gradient(0deg,rgba(4,7,17,.97),rgba(4,7,17,.79));border-top:1px solid rgba(182,231,226,.12);backdrop-filter:blur(18px)}.deck-heading,.deck-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font:10px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.12em}.deck-heading{margin-bottom:10px}.deck-row{display:grid;grid-template-columns:minmax(95px,1fr) auto minmax(95px,1fr);align-items:center;gap:15px}.nav-button{padding:7px 5px;background:none;border:0;color:#cadadd;font-size:13px;letter-spacing:.07em;white-space:nowrap}.nav-button:first-child{text-align:left}.nav-button:last-child{text-align:right}.nav-button:hover:not(:disabled){color:var(--cyan)}#phase-nav{display:flex;align-items:center;gap:13px}.phase-dot{position:relative;display:block;width:9px;height:9px;padding:0;border:1px solid rgba(189,223,222,.55);border-radius:50%;background:transparent}.phase-dot:after{content:'';position:absolute;inset:-9px}.phase-dot:hover{background:rgba(174,238,224,.4)}.phase-dot.current{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 17px rgba(130,233,220,.85);transform:scale(1.18)}.deck-bottom{margin-top:12px;opacity:.58;letter-spacing:.06em;font-size:9px}
.toast{position:fixed;z-index:80;left:50%;bottom:145px;transform:translateX(-50%);width:max-content;max-width:min(90vw,530px);border:1px solid rgba(149,235,223,.37);background:rgba(8,30,36,.97);color:#e6fffa;box-shadow:0 20px 60px rgba(0,0,0,.48);border-radius:4px;padding:12px 22px;text-align:center;font-size:12px;line-height:1.8}.no-js{position:fixed;inset:70px 0 auto;z-index:100;background:#0c222a;padding:20px;color:#fff;text-align:center}
@keyframes enter{from{opacity:0;transform:translateY(15px);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes orb{0%,100%{transform:scale(1);opacity:.78}50%{transform:scale(1.7);opacity:1}}
@media (max-width:680px){.site-header{min-height:62px;padding:10px 18px}.brand{gap:8px;font-size:13px}.brand-symbol{font-size:22px}.brand-en{font-size:9px}.header-actions{gap:8px}.visit-chip{font-size:9px}.icon-button{width:37px;height:37px}.settings-panel{top:61px;right:12px}#experience{top:62px;bottom:112px}.scene-shell{padding:24px 21px 31px;min-height:100%}.scene h1,.scene h2{font-size:clamp(1.86rem,7.2vw,2.75rem);line-height:1.57;margin-bottom:16px}.eyebrow{margin-bottom:21px;font-size:9px}.scene-desc{font-size:12px;line-height:2;}.scene-desc br{display:none}.scene-en{font-size:14px;margin-top:15px}.scene-actions,.mirror-actions{margin-top:23px;gap:9px}.primary-button,.quiet-button{font-size:12px;padding:11px 15px;min-height:44px}.scene-whisper{font-size:10px;margin-top:17px}.stat-line{margin-top:22px}.counter-grid{margin-top:20px;gap:8px}.counter{padding:15px 8px;gap:7px}.counter output{font-size:clamp(18px,5vw,26px)}.counter small{font-size:9px;line-height:1.5}.counter-tag{font-size:9px}.footnote{font-size:10px;margin-top:14px}.still-ring{height:150px;width:150px;margin:17px auto 9px}.memory-card{padding:20px 14px 24px;margin-top:18px}.memory-glyph{margin-top:12px;font-size:35px}.final-orb{margin-bottom:26px}.control-deck{min-height:112px;padding:12px 18px max(9px,env(safe-area-inset-bottom))}.deck-row{grid-template-columns:minmax(54px,1fr) auto minmax(54px,1fr);gap:5px}.nav-button{font-size:12px}.nav-button span{font-size:11px}#phase-nav{gap:10px}.phase-dot{width:8px;height:8px}.deck-bottom{font-size:8px;margin-top:10px}.deck-heading{font-size:9px;margin-bottom:8px}.toast{bottom:125px}}
@media (max-height:660px){#experience{align-items:stretch}.scene-shell{align-items:flex-start}.scene{margin:auto}.scene h1,.scene h2{font-size:clamp(1.6rem,3.7vw,3.2rem)}.eyebrow{margin-bottom:17px}.scene-en{margin-top:14px}.scene-actions,.mirror-actions{margin-top:17px}}
@media (max-width:370px){.brand-en{display:none}.visit-chip{max-width:140px;overflow:hidden;text-overflow:ellipsis}.scene h1,.scene h2{font-size:1.7rem}.counter-grid{gap:5px}.counter{padding:12px 5px}.counter output{font-size:17px}#phase-nav{gap:7px}.nav-button span{display:none}.deck-bottom span:last-child{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body.reduce-motion #life{filter:blur(1px)}body.reduce-motion .final-orb{animation:none}body.reduce-motion .scene{animation:none}body.reduce-motion .aura{display:none}
/* A subtle dark reading island keeps text legible even when a bright seed grows behind it. */
.scene-shell{background:radial-gradient(ellipse at 50% 45%,rgba(4,7,17,.59) 0%,rgba(4,7,17,.4) 33%,rgba(4,7,17,.08) 69%,transparent 82%)}
body[data-act="2"] #life,body[data-act="3"] #life{opacity:.46}