@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#432f35;--muted:#92767d;--pink:#eea4b8;--hot:#c64e71;--line:#f0dfe3;--paper:#fffdfc;--chat:#fff8f8;--hand:'Gaegu',cursive;--body:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;color-scheme:light;font-family:var(--body);color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;justify-content:center;align-items:center;background-color:#f6e8eb;background-image:linear-gradient(90deg,#ffffff3b 1px,transparent 1px),linear-gradient(#ffffff3b 1px,transparent 1px);background-size:32px 32px;padding:28px;overflow:hidden}button,textarea,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,textarea:focus-visible,section:focus-visible{outline:3px solid #b64c70;outline-offset:4px}button{ -webkit-tap-highlight-color:transparent}button,textarea{touch-action:manipulation}button svg{width:24px;height:24px}.chat-app{width:430px;height:min(870px,calc(100dvh - 56px));min-height:580px;background:var(--chat);border:1px solid #e8cdd4;border-radius:27px;box-shadow:0 12px 0 -5px #eacdd6,0 22px 55px #8c4b6316;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden}.chat-header{flex:none;display:flex;align-items:center;padding:20px 22px 17px;gap:12px;background:var(--paper);border-bottom:1px solid var(--line);z-index:2}.profile{width:51px;height:51px;border-radius:18px;border:1px solid #eed9dc;flex-shrink:0}.sprite.original{background-image:url('assets/hani-reference.png');background-repeat:no-repeat;background-color:#f4e8e3;--cell-x:1050;--cell-y:610;background-size:calc(100% * 1254 / 180) calc(100% * 1254 / 156);background-position:calc(var(--cell-x) / (1254 - 180) * 100%) calc(var(--cell-y) / (1254 - 156) * 100%)}.sprite.original[data-emotion=sad],.sprite.original[data-emotion=empathetic]{--cell-x:24}.sprite.original[data-emotion=furious],.sprite.original[data-emotion=angry]{--cell-x:230}.sprite.original[data-emotion=thinking]{--cell-x:435}.sprite.original[data-emotion=determined],.sprite.original[data-emotion=excited]{--cell-x:845}.sprite.original[data-emotion=writing]{--cell-x:640}.header-copy{flex:1}.name-row{display:flex;align-items:center;gap:9px}h1{font-size:22px;margin:0;font-weight:900;letter-spacing:-1px}.side-badge{font-size:11px;font-weight:700;color:#ab5270;background:#faeaf0;border-radius:5px;padding:3px 6px}.header-copy p{font-size:12px;color:var(--muted);margin:4px 0 0}.icon-button{width:36px;height:36px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;font-size:27px}.icon-button:hover{background:#f9edf1}.conversation{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#e9cdd5 transparent;padding:0 23px 24px;scroll-behavior:smooth}.intro{text-align:center;padding-top:25px}.intro-label{display:inline-block;font-size:11px;font-weight:600;background:#fff1bf;border:1px solid #f1e0a8;color:#886b38;padding:5px 11px;transform:rotate(-3deg);box-shadow:2px 2px 0 #efe2cb6b}.intro-art{height:133px;display:flex;justify-content:center;position:relative;margin:7px auto 1px;max-width:265px}.hero-character{width:139px;height:126px;mix-blend-mode:multiply;border-radius:38%;transform:rotate(-3deg);filter:contrast(1.03)}.scribble{position:absolute;font-family:var(--hand);font-size:23px;color:#b7858e;top:54px;transform:rotate(-13deg)}.scribble-left{left:19px}.scribble-right{right:2px;top:38px;transform:rotate(12deg);font-size:20px}.intro h2{font-size:27px;line-height:1.38;letter-spacing:-1.5px;font-weight:900;margin:6px 0 10px}.intro>p{font-size:12px;color:var(--muted);margin:0 0 26px}.date-divider{display:flex;align-items:center;gap:14px;color:#b2969e;font-size:10px;letter-spacing:.02em;margin:0 0 23px}.date-divider::before,.date-divider::after{content:'';height:1px;background:var(--line);flex:1}.message-row{display:flex;align-items:flex-start;gap:9px;margin-bottom:21px;animation:arrive .25s ease-out}.message-avatar{width:32px;height:32px;flex-shrink:0;border-radius:12px;margin-top:2px}.message-content{max-width:calc(100% - 42px);min-width:0}.message-label{font-size:11px;font-weight:700;margin:0 0 7px 2px}.message-label span{color:#ad8d97;font-weight:400;font-size:10px}.bubble{font-size:14px;line-height:1.8;background:white;padding:12px 15px;border:1px solid #f0e0e5;border-radius:0 17px 17px 17px;box-shadow:0 2px 0 #f4e7eb63;white-space:pre-wrap;overflow-wrap:anywhere;display:table;max-width:100%}.follow-bubble{border-radius:17px;margin-top:7px;font-size:13px}.user{justify-content:flex-end;gap:7px;align-items:flex-end}.user .bubble{background:#edbbca;border:1px solid #e6aabc;border-radius:17px 0 17px 17px;max-width:84%;box-shadow:none;color:#51323e}.message-time{font-size:10px;white-space:nowrap;color:#b0929b;margin-bottom:3px}.suggestions{display:flex;align-items:flex-start;flex-direction:column;gap:7px;margin-left:41px;margin-top:-4px}.suggestions button{background:transparent;border:1px solid #e5c4ce;border-radius:30px;padding:8px 13px;color:#9c5b70;font-size:11px;transition:.2s}.suggestions button span{font-size:13px;margin-left:12px}.suggestions button:hover{background:#fae6ed;transform:translateX(2px)}.composer-area{flex:none;background:var(--paper);padding:13px 19px 10px;border-top:1px solid var(--line);z-index:2}.mood-bar{display:flex;align-items:center;gap:10px;padding:0 2px 12px}.mood-caption{display:flex;gap:7px;align-items:center;font-size:10px;color:#9a6b7a}.mood-dot{width:6px;height:6px;background:#df9ba9;border-radius:50%;box-shadow:0 0 0 3px #f9edf0}.temper{display:flex;gap:3px}.temper i{width:12px;height:4px;border-radius:1px;background:#eedfe3}.temper i.active{background:#d98a9f}.rage-button{font-size:10px;display:flex;align-items:center;gap:3px;background:transparent;border:0;margin-left:auto;padding:0;color:#a37783}.rage-button svg{width:13px;height:16px}.rage-button:hover{color:#c34766}form{display:flex;align-items:flex-end;padding:7px 8px 7px 14px;border:1px solid #e8cbd4;border-radius:18px;background:#fffafb;gap:7px;transition:border-color .2s}form:focus-within{border-color:#cc7c96;box-shadow:0 0 0 3px #f9edf1}textarea{resize:none;border:0;outline:0!important;background:transparent;width:100%;font-size:13px;line-height:1.6;padding:7px 0;color:var(--ink);max-height:100px;scrollbar-width:thin}textarea::placeholder{color:#bea0ab}#send-button{flex:none;border:0;border-radius:12px;width:35px;height:35px;background:#d37c98;color:white;display:grid;place-items:center;transition:.2s}#send-button:disabled{background:#f0d4dd;color:white}#send-button svg{width:20px}.demo-note{text-align:center;font-size:9px;color:#bca3ac;margin:9px 0 0}.demo-note span{margin:0 5px}.desktop-brand{position:fixed;left:54px;top:39px;display:flex;flex-direction:column}.wordmark{font-weight:900;font-size:43px;letter-spacing:-4px;line-height:1.2}.wordmark>span{color:#cf6b8a}.brand-caption{font-size:10px;letter-spacing:1.5px;color:#a47786;margin-top:8px}.desktop-note{position:absolute;left:calc(50% - 445px);top:35%;transform:rotate(-8deg)}.note-star{font-size:41px;color:#b27489}.desktop-note p{font-family:var(--hand);font-weight:700;font-size:32px;line-height:1.15;margin:13px 0;color:#a46e81}.note-line{display:block;height:3px;width:107px;background:#d9a2b5;transform:rotate(-4deg);border-radius:100%;margin-top:15px}.desktop-note small{font-size:8px;color:#b38d9b;letter-spacing:1.3px;display:block;margin-top:24px}.desktop-sticker{position:absolute;left:calc(50% + 283px);bottom:75px;transform:rotate(9deg);text-align:center}.desktop-sticker>span{font-family:var(--hand);font-size:24px;font-weight:700;color:#a76c81}.sticker-character{width:126px;height:115px;margin:10px auto 0;mix-blend-mode:multiply;border-radius:40%}.typing-indicator{display:flex;gap:4px;padding:6px 0}.typing-indicator i{width:5px;height:5px;background:#c294a3;border-radius:50%;animation:typing 1s infinite}.typing-indicator i:nth-child(2){animation-delay:.16s}.typing-indicator i:nth-child(3){animation-delay:.32s}.segment{display:inline;white-space:pre-wrap}.size-small{font-size:.85em}.size-normal{font-size:1em}.size-big{font-size:1.25em;font-weight:800;line-height:1.65}.size-huge{font-size:1.65em;font-weight:900;line-height:1.5;letter-spacing:-.05em}.segment.effect-shake,.segment.effect-bounce{display:inline-block;white-space:pre-wrap;max-width:100%}.effect-shake{animation:shake .16s 5}.effect-bounce{animation:bounce .5s 2}.effect-fade{animation:fadeIn 1s both}.effect-mumble{color:#9e828b;letter-spacing:-.05em;animation:mumble .25s 3}.char{animation:ink .14s both}.copy-draft{display:block;margin-top:9px;border:1px solid #e1b7c5;border-radius:8px;background:#fff1f5;padding:7px 10px;font-size:11px;color:#a75a73}.outburst{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}.outburst[hidden]{display:none}.burst-backdrop{position:absolute;inset:0;background:#f7b7c5eb;backdrop-filter:blur(7px);z-index:-2}.burst-backdrop:before{content:'';position:absolute;inset:-100%;background:repeating-conic-gradient(from 4deg,transparent 0deg 12deg,#fff4e856 12deg 14deg);animation:burstTurn 35s linear infinite}.burst-impact{text-align:center;animation:burstIn .48s cubic-bezier(.16,.85,.32,1.24);position:relative;max-width:95vw}.burst-eyebrow{display:inline-block;font-size:14px;font-weight:700;letter-spacing:2px;background:#fff8e9;padding:7px 14px;transform:rotate(-5deg);border:1.5px solid #583239;box-shadow:3px 3px 0 #583239}.burst-shout{font-size:clamp(40px,7vw,84px);font-weight:900;letter-spacing:-.07em;line-height:1.2;color:#48222d;text-shadow:3px 3px 0 #fff6e3,-2px -2px 0 #fff6e3;margin:24px 18px 0;max-width:760px;overflow-wrap:anywhere;transform:rotate(-5deg);animation:shake .16s 8}.burst-character{width:min(390px,90vw);height:min(340px,78vw);margin:10px auto;mix-blend-mode:multiply;border-radius:35%;filter:drop-shadow(0 14px 0 #b74d6820);animation:characterIn .55s cubic-bezier(.17,.88,.31,1.2)}.burst-caption{display:block;font-family:var(--hand);font-size:29px;font-weight:700;transform:rotate(5deg);margin-top:-13px}.skip-outburst{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:1px solid #96506955;border-radius:30px;background:#fff5f39c;padding:11px 19px;font-size:12px;white-space:nowrap}.skip-outburst span{font-size:17px;margin-left:12px}.outburst.is-leaving{animation:burstOut .35s forwards}.chat-app.impact{animation:screenShake .32s}dialog{border:1px solid #e3c1ce;border-radius:23px;background:var(--paper);padding:23px;width:340px;max-width:calc(100vw - 32px);color:var(--ink);box-shadow:0 16px 70px #56334729}dialog::backdrop{background:#59404b66;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{font-size:18px;margin:0;letter-spacing:-.8px}.settings-description{font-size:12px;color:var(--muted);margin:10px 0 20px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px solid var(--line);font-size:14px}.setting-row small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.setting-row input{width:21px;height:21px;accent-color:#ba6584}.settings-action{display:flex;justify-content:space-between;width:100%;padding:15px 0;background:transparent;border:0;border-top:1px solid var(--line);font-size:14px}.settings-footnote{font-size:11px;color:var(--muted);line-height:1.8;margin:12px 0 0}.toast{position:fixed;bottom:35px;left:50%;transform:translateX(-50%);background:#523643;color:white;z-index:50;padding:12px 19px;border-radius:12px;font-size:13px;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes ink{from{opacity:.4}to{opacity:1}}@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-2px,1px) rotate(-1deg)}75%{transform:translate(2px,-1px) rotate(1deg)}}@keyframes bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes mumble{50%{transform:translateX(1px);opacity:.6}}@keyframes burstIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}@keyframes characterIn{from{transform:translateY(80vh) scale(.4)}to{transform:translateY(0) scale(1)}}@keyframes burstOut{to{transform:scale(.8);opacity:0}}@keyframes burstTurn{to{transform:rotate(360deg)}}@keyframes screenShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}.reduced-motion *,.reduced-motion *::before{animation:none!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;scroll-behavior:auto!important}}@media(min-height:850px){.intro{padding-top:32px}.intro-art{height:155px}.hero-character{width:158px;height:145px}.intro h2{font-size:29px}.intro>p{margin-bottom:30px}.bubble{font-size:15px}.follow-bubble{font-size:14px}.suggestions{gap:8px}.suggestions button{padding:9px 14px;font-size:12px}}@media(max-width:1000px){.desktop-note{left:calc(50% - 370px)}.desktop-sticker{left:calc(50% + 260px)}.desktop-brand{left:32px;top:30px}}@media(max-width:800px){.desktop-note,.desktop-sticker{display:none}.desktop-brand{left:24px;top:24px}.wordmark{font-size:29px}.brand-caption{display:none}}@media(max-width:540px){body{padding:0;background:var(--chat)}.desktop-brand{display:none}.chat-app{width:100%;height:100dvh;min-height:0;max-height:none;border:0;border-radius:0;box-shadow:none}.chat-header{padding:calc(15px + env(safe-area-inset-top)) 19px 14px}.conversation{padding:0 19px 20px}.intro{padding-top:22px}.composer-area{padding:12px 16px max(10px,env(safe-area-inset-bottom))}.intro-art{height:130px}.intro h2{font-size:27px}.bubble{font-size:14px}.follow-bubble{font-size:13px}textarea{font-size:16px;padding:5px 0}.demo-note{font-size:10px}.mood-caption,.rage-button{font-size:11px}.suggestions button{font-size:12px}.side-badge{font-size:11px}.burst-shout{max-width:350px}.burst-eyebrow{font-size:12px;letter-spacing:1px}.burst-character{width:310px;height:277px}}@media(max-height:720px){.intro{padding-top:17px}.intro-art{height:95px}.hero-character{height:94px;width:106px}.intro h2{font-size:23px}.intro>p{margin-bottom:20px}.intro-label{padding:4px 8px}.date-divider{margin-bottom:17px}.chat-header{padding-top:12px;padding-bottom:12px}}

/* Silent first contact: the character, not a slogan, establishes her personality. */
[hidden]{display:none!important}.intro{height:calc(100% - 150px);min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 0}.intro-art{width:225px;max-width:none;height:212px;margin:0}.hero-character{width:225px;height:195px;border-radius:40%;transform:rotate(-3deg)}.intro>p{font-size:12px;color:#aa8c97;margin:18px 0 20px}.suggestions{margin:0;align-items:center}.suggestions button{font-size:12px;padding:9px 14px}.name-row h1{font-size:23px}.header-copy p{font-size:12px}.date-divider{margin-top:24px}.bubble{font-size:16px}.message-label{font-size:12px}.message-label span{font-size:11px}.mood-caption,.rage-button{font-size:12px}.demo-note{font-size:11px}.header-copy p{color:#ab8996}.desktop-brand{opacity:.6}.size-huge{font-size:1.65em}.conversation:has(#intro:not([hidden])){scrollbar-width:none}@media(max-width:540px){.intro-art{width:220px;height:196px}.hero-character{width:220px;height:190px}.intro{height:calc(100% - 145px);min-height:230px}.intro>p{font-size:12px}.suggestions button{font-size:12px}.bubble{font-size:16px}.composer-area{padding-top:13px}.chat-header{min-height:88px}}@media(max-height:720px){.intro{min-height:210px}.intro-art{width:175px;height:156px}.hero-character{width:175px;height:152px}.intro>p{margin:10px 0 15px}}

.chat-header{gap:13px;padding-top:17px;padding-bottom:17px}.intro{height:100%;min-height:200px;padding:0 0 7vh}.intro-art{height:195px}.composer-area{padding-top:13px}.header-copy{display:flex;align-items:center}.profile{width:47px;height:47px}.name-row h1{font-size:21px}.intro .hero-character{animation:idleBreath 5.5s ease-in-out infinite}.burst-eyebrow,.burst-caption{display:none}.burst-shout{margin-bottom:18px}.burst-character{margin-top:0}@keyframes idleBreath{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-3px)}}
.burst-character.sprite.original{background-image:url('assets/hani-furious.png');background-size:contain;background-position:center;background-color:transparent;mix-blend-mode:normal;width:min(490px,96vw);height:min(490px,96vw);border-radius:0;filter:drop-shadow(0 15px 0 #8d304522)}
@media(max-width:540px){.burst-character.sprite.original{width:94vw;height:94vw}.burst-shout{font-size:44px;line-height:1.24;margin:0 18px 8px}}