:root{--pink-100:#fff1f6;--pink-200:#ffdcea;--pink-300:#ffbdd6;--pink-500:#ff7fae;--pink-700:#e05389;--lilac-200:#ece2ff;--lilac-300:#d9c6ff;--lilac-500:#a882f5;--mint-200:#d6f6ec;--mint-400:#7fd8bd;--mint-600:#34a98a;--lemon-200:#fff2c9;--lemon-400:#ffd772;--cream:#fffaf9;--ink:#4a3550;--ink-soft:#8a7794;--white:#fff;--danger:#ff8f9c;--danger-ink:#b4405a;--radius-lg:30px;--radius-md:22px;--radius-sm:14px;--shadow-soft:0 10px 30px #c482a829;--shadow-lift:0 18px 44px #a882f53d;--font-th:"Mali", ui-rounded, "Hiragino Maru Gothic ProN", system-ui, sans-serif;--font-display:"Bai Jamjuree", "Mali", system-ui, sans-serif;--font-cn:"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-th);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;margin:0}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}input,textarea{font:inherit;color:inherit}.cn,.cn *{font-family:var(--font-cn)}.app{max-width:480px;min-height:100%;padding:0 18px calc(28px + env(safe-area-inset-bottom));isolation:isolate;flex-direction:column;margin:0 auto;display:flex;position:relative}.sky{z-index:-2;background:radial-gradient(120% 70% at 12% -8%, var(--pink-200) 0%, transparent 62%), radial-gradient(110% 60% at 96% 4%, var(--lilac-200) 0%, transparent 58%), radial-gradient(140% 70% at 50% 108%, var(--mint-200) 0%, transparent 60%), var(--cream);position:fixed;inset:0}.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:22px}.pill{background:var(--white);box-shadow:var(--shadow-soft);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:600;display:inline-flex}.btn{width:100%;color:var(--white);background:linear-gradient(135deg, var(--pink-500), var(--lilac-500));box-shadow:var(--shadow-lift);border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:17px 22px;font-size:17px;font-weight:700;display:inline-flex;position:relative;overflow:hidden}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn--ghost{color:var(--ink-soft);box-shadow:none;background:0 0;padding:12px;font-size:15px}.btn--mint{background:linear-gradient(135deg, var(--mint-400), #6fc9f0)}.btn__sheen{pointer-events:none;background:linear-gradient(100deg,#0000 32%,#ffffff8c 50%,#0000 68%);animation:3.6s ease-in-out infinite sheen;position:absolute;inset:0;transform:translate(-120%)}@keyframes sheen{0%,55%{transform:translate(-120%)}to{transform:translate(120%)}}.h1{margin:0;font-size:24px;font-weight:700;line-height:1.45}.h2{margin:0;font-size:17px;font-weight:700}.muted{color:var(--ink-soft);margin:0;font-size:14px;line-height:1.6}.tiny{color:var(--ink-soft);font-size:12px}.stack{flex-direction:column;gap:14px;display:flex}.row{align-items:center;gap:10px;display:flex}.spread{justify-content:space-between;align-items:center;gap:10px;display:flex}.spread>*{min-width:0}.spread>.nowrap{white-space:nowrap;flex:none}.writer{resize:none;border-radius:var(--radius-md);border:2px solid var(--pink-200);background:var(--pink-100);width:100%;min-height:96px;font-family:var(--font-cn);outline:none;padding:16px 18px;font-size:21px;line-height:1.75;transition:border-color .2s,background .2s,box-shadow .2s}.writer:focus{border-color:var(--pink-300);background:var(--white);box-shadow:0 0 0 5px #ffbdd64d}.writer::placeholder{font-family:var(--font-th);color:#d3bfcd;font-size:15px}.writer--shake{border-color:var(--danger);background:#fff2f4}.feedback{border-radius:var(--radius-md);padding:16px 18px}.feedback--good{background:var(--mint-200);color:#1f6f5a}.feedback--bad{color:var(--danger-ink);background:#ffe9ee}.feedback--tell{background:var(--lemon-200);color:#8a6414}.highlight{background:linear-gradient(180deg, transparent 52%, var(--lemon-400) 52%);border-radius:8px;padding:1px 3px;animation:1.6s ease-in-out infinite pulseMark}@keyframes pulseMark{50%{background-position:0 2px}}.chip{background:var(--lilac-200);color:#5a3f86;font-family:var(--font-cn);border-radius:999px;padding:9px 15px;font-size:17px;font-weight:500;box-shadow:0 4px 10px #a882f52e}.bar{background:var(--pink-200);border-radius:999px;height:16px;overflow:hidden}.bar__fill{background:linear-gradient(90deg, var(--pink-500), var(--lilac-500), var(--mint-400));background-size:220% 100%;border-radius:999px;height:100%;animation:5s linear infinite drift}@keyframes drift{to{background-position:220% 0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}