:root{--paper:#faf6ed;--ink:#594d41;--muted:#968572;--toto:#d78c75;--kiki:#a77a4e;--accent:#bd785e}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{height:100svh;min-height:650px;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{border:0}a{color:inherit;text-decoration:none}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.paper{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.16;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%238a714f' opacity='.22' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.site-header{height:96px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 4.1%;position:relative;z-index:6}.wordmark{font:italic 29px Georgia,serif;letter-spacing:-1.5px}.wordmark>span{font-size:22px;color:#b69c7f;margin:0 2px}.wordmark .brand-dot{color:var(--toto);margin:0}.header-note{position:absolute;left:50%;transform:translateX(-50%);font:italic 12px Georgia,serif;color:var(--muted)}.about-button{background:none;font-size:11px;letter-spacing:.2px;padding:14px 0}.about-button span{margin-left:12px;color:#a88f70}main{flex:1;display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:0}.intro{text-align:center}.eyebrow{font-size:9px;letter-spacing:2.4px;color:#9d8d7b;margin:0 0 20px}h1{font-family:'AppleMyungjo','Batang',Georgia,serif;font-size:clamp(29px,3.1vw,48px);font-weight:400;letter-spacing:-2px;line-height:1.25;margin:0}h1 em{font-style:normal;color:#ac705a}.tagline{font-size:12px;letter-spacing:.3px;color:#93836f;margin:17px 0 24px}.scene-picker{display:flex;align-items:center;gap:4px;border:1px solid #d8cdbb99;border-radius:50px;padding:4px;background:#fffcf669}.scene-picker button{display:flex;gap:7px;align-items:center;background:transparent;border-radius:30px;padding:9px 16px;font-size:11px;color:#a39280;transition:all .25s}.scene-picker button[aria-pressed=true]{background:#ece3d3;color:#6c5b47}.scene-picker button:hover{color:#5e4a33}.scene-picker svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.stage{position:relative;width:min(760px,90vw);height:clamp(255px,40svh,390px);margin-top:12px;flex:none}.scene-wash{position:absolute;inset:10% -7% 1%;border-radius:50%;background:radial-gradient(ellipse,#efddbc55,transparent 65%);transition:background 1s}.scene-note{position:absolute;top:27%;left:0;font-family:'AppleMyungjo',serif;font-size:10px;writing-mode:vertical-rl;letter-spacing:2px;line-height:1.7;color:#b1a088}.friends{display:flex;justify-content:center;align-items:flex-end;height:100%;gap:0;position:relative}.friend{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:transparent;padding:0;width:42%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s;z-index:2}.friend-art{display:block;width:auto;height:calc(100% - 52px);aspect-ratio:3/4;max-width:100%;position:relative;animation:breathe 5.5s ease-in-out infinite;transform-origin:center bottom}.kiki .friend-art{animation-delay:-2.5s}.sprite{position:absolute;inset:0;background:url('assets/friends.png') 0 50% /200% 100% no-repeat}.kiki .sprite{background-position:100% 50%}.name{margin-top:6px;font-size:14px;display:flex;align-items:center;gap:7px;letter-spacing:1px}.name small{font:italic 14px Georgia,serif;letter-spacing:0;color:#a89883;margin-left:3px}.name-dot{height:5px;width:5px;background:var(--toto);border-radius:50%}.kiki .name-dot{background:var(--kiki)}.friend-hint{font-size:9px;letter-spacing:.5px;color:#aa9a86;margin-top:7px}.hello{position:absolute;top:26%;right:7%;font:italic 15px 'AppleMyungjo',serif;background:#fffdf5;padding:12px 16px;border-radius:50% 50% 50% 0;transform:translateY(5px) rotate(7deg);opacity:0;transition:.3s;pointer-events:none;box-shadow:0 2px 20px #ad82570a}.friend:hover .hello,.friend:focus-visible .hello,.friend.active .hello{opacity:1;transform:translateY(0) rotate(7deg)}.friend:hover .friend-art{filter:brightness(1.025)}.friend.active .friend-art{animation:talk .8s ease-in-out 3}.secret-button{position:absolute;left:50%;bottom:8px;transform:translateX(-50%) rotate(-7deg);width:59px;height:44px;background:none;z-index:4;color:#8d7b61;transition:transform .3s,color .3s}.secret-button svg{width:49px;height:25px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.secret-button:hover{transform:translateX(-50%) rotate(0) scale(1.08);color:#b47e55}.secret-spark{position:absolute;right:0;top:0;font-size:11px;opacity:.5;animation:twinkle 4s infinite}.conversation{height:112px;flex:none;text-align:center;padding-top:25px;max-width:90vw}.speaker{font-size:10px;letter-spacing:1px;color:#a7866d}.conversation p{font-size:14px;font-weight:400;letter-spacing:.1px;line-height:1.7;margin:10px 0 0;transition:opacity .2s}.dots{display:block;color:#c4b69e;font-size:14px;margin-top:10px}.conversation.refresh p{animation:line-in .35s ease-out}footer{position:relative;z-index:6;padding:0 4.1%;height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;color:#aa9d8b;font-size:9px;letter-spacing:.25px}.footer-center{position:absolute;left:50%;transform:translateX(-50%);font-size:9px;color:#b5a792}.edition{font-size:8px;letter-spacing:1.2px}.edition i{font:10px Georgia,serif;margin-left:10px;letter-spacing:0}.secret-world{position:absolute;inset:15% 8% 4%;opacity:0;transform:scale(.85);transition:all .7s;pointer-events:none;color:#a68c69}.window-glasses{width:100%;height:100%;fill:#fffdf64d;stroke:#ae9270;stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round}.world-sketch{position:absolute;left:50%;top:24%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:16px;background:var(--paper);padding:10px 24px;min-width:140px}.world-sketch svg{width:50px;height:50px;fill:none;stroke:currentColor;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}.world-sketch span{font-size:10px;white-space:nowrap}.secret-caption{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);font:12px 'AppleMyungjo',serif;white-space:nowrap}.secret-on .secret-world{opacity:1;transform:scale(1)}.secret-on .toto{transform:translateX(-53%) translateY(-6%) scale(.52)}.secret-on .kiki{transform:translateX(53%) translateY(-6%) scale(.52)}.secret-on .friend-hint{opacity:0}.secret-on .name{font-size:18px}.secret-on .name small{font-size:17px}.secret-on .scene-note{opacity:0}.secret-on .secret-button{color:#b47a52;transform:translateX(-50%) rotate(0)}.secret-on .hello{font-size:24px}.secret-on .scene-wash{background:radial-gradient(ellipse,#f0ddb255,transparent 68%)}body[data-scene=walk] .scene-wash{background:radial-gradient(ellipse,#d9e3bd66,transparent 66%)}body[data-scene=cafe] .scene-wash{background:radial-gradient(ellipse,#e7c8b766,transparent 66%)}dialog{color:var(--ink);border:1px solid #e4d7c3;background:var(--paper);padding:38px;width:min(440px,calc(100vw - 36px));max-height:85svh;box-shadow:0 15px 100px #66523f22}dialog::backdrop{background:#5a4b3f44;backdrop-filter:blur(6px)}dialog .close{position:absolute;top:10px;right:14px;background:none;font-size:24px;color:#9c8569}dialog h2{font:30px/1.5 'AppleMyungjo',serif;font-weight:400;letter-spacing:-1px;margin:18px 0}dialog img{width:100%;height:auto;display:block}dialog p{font-size:12px;line-height:1.9}dialog .note{font-size:10px;color:#9a8872}.back{border-bottom:1px solid #cabb9f;background:none;padding:10px 0 6px;font-size:11px;margin-top:8px}@keyframes breathe{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-4px) rotate(.5deg)}}@keyframes talk{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-5px) rotate(-1.5deg)}70%{transform:translateY(-2px) rotate(1deg)}}@keyframes twinkle{0%,70%,100%{opacity:.25}85%{opacity:.8}}@keyframes line-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){.stage{width:820px}}@media(max-width:600px){body{min-height:620px}.site-header{height:78px;padding:0 24px}.wordmark{font-size:25px}.header-note{display:none}.about-button{font-size:10px}.intro .eyebrow{font-size:7px;letter-spacing:1.7px;margin-bottom:17px}h1{font-size:30px;letter-spacing:-1.4px}.tagline{font-size:11px;margin:14px 0 20px}.stage{width:100%;height:clamp(235px,35svh,310px);margin-top:18px}.friends{gap:0}.friend{width:48%}.friend-art{width:auto;height:auto;max-height:calc(100% - 56px);width:100%;aspect-ratio:3/4}.name{font-size:13px}.name small{font-size:12px}.friend-hint{font-size:8px}.scene-note{left:13px;top:10%;font-size:8px;letter-spacing:1px}.hello{top:25%;right:2%;font-size:12px;padding:10px 12px}.secret-button{bottom:4px;width:42px}.secret-button svg{width:36px}.secret-spark{font-size:9px;right:-2px;top:4px}.conversation{height:113px;padding-top:24px}.conversation p{font-size:12px;max-width:320px;margin:9px auto 0}.speaker{font-size:9px}.dots{margin-top:8px}footer{height:58px;padding:0 24px;font-size:8px}footer>span:first-child{max-width:145px;line-height:1.6}.footer-center{display:none}.edition{font-size:7px;letter-spacing:.7px}.edition i{display:block;margin:5px 0 0;text-align:right;font-size:9px}.secret-world{inset:13% 13% 3%}.world-sketch{top:25%;min-width:100px;padding:10px 15px;gap:12px}.world-sketch svg{width:35px;height:35px}.world-sketch span{font-size:9px}.secret-caption{bottom:21%;font-size:10px}.secret-on .toto{transform:translateX(-24%) translateY(-7%) scale(.48)}.secret-on .kiki{transform:translateX(24%) translateY(-7%) scale(.48)}.secret-on .name small{display:none}.secret-on .hello{font-size:17px}}@media(max-height:730px) and (min-width:601px){body{min-height:610px}.site-header{height:68px}.intro .eyebrow{margin-bottom:13px}h1{font-size:35px}.tagline{margin:12px 0 16px}.stage{height:270px;width:650px}.conversation{height:94px;padding-top:20px}footer{height:48px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep both friends fully visible and readable on narrow screens. */
@media(max-width:600px){.friend-art{height:min(calc(100% - 56px),64vw);width:auto;max-width:100%;max-height:none}.secret-on .hello{display:none}}

@media(max-width:600px){.scene-wash{inset:10% 0 1%}}