:root{--paper: #FBF6EA;--paper-2: #FCFAF4;--ink: #4A4D44;--ink-soft: #7E8175;--ink-faint: #A8A08C;--line: #DEDBD1;--line-2: #CFCBBF;--logo: #C79A4A;--v-good: #5E8F6C;--v-practice: #C79A4A;--v-other: #A8724A;--v-unmeasured: #9AA3AA;--v-unmeasured-ink: #3F4A50;--warn: #B03A3A;--p-color: #B5762E;--p-tint: #F7F0E6;--p-ink-on: #FFFFFF;--font-jp: "Noto Sans JP", system-ui, sans-serif;--font-kr: "Noto Sans KR", system-ui, sans-serif;--font-label: "Archivo", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}[data-partner=sai]{--p-color: #B5762E;--p-tint: #F7F0E6}[data-partner=koma]{--p-color: #2F6E5A;--p-tint: #EDF2EE}[data-partner=rita]{--p-color: #3E4A54;--p-tint: #F1F3F3}[data-partner=mio]{--p-color: #8E5A7A;--p-tint: #F6EEF2}[data-partner=ren]{--p-color: #4C5A8A;--p-tint: #EEF0F6}[data-partner=none]{--p-color: #1C1E19;--p-tint: #EFECE4}*{box-sizing:border-box}html,body{margin:0;background:var(--p-tint);color:var(--ink);font-family:var(--font-jp);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}#root{min-height:100dvh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;background:var(--p-tint)}.kr{font-family:var(--font-kr);font-weight:700;font-size:33px;line-height:1.35;letter-spacing:-.01em;color:#1c1e19}.ja-read{font-family:var(--font-jp);font-weight:700;font-size:28px;line-height:1.45;color:#1c1e19}.label{font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.screen{flex:1;display:flex;flex-direction:column;padding:20px 20px 28px;gap:18px}.header{background:var(--p-color);color:var(--p-ink-on);padding:14px 18px 16px;display:flex;gap:12px;align-items:flex-start}.header .avatar{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-label);font-size:13px}.header .who{font-family:var(--font-label);font-size:11px;letter-spacing:.12em;opacity:.9}.header .line1{font-weight:700;font-size:15px;margin-top:2px}.header .line2{font-size:13px;opacity:.92;margin-top:2px}.header .right{margin-left:auto;font-size:12px;opacity:.9;white-space:nowrap}.card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:16px}.card.dashed{border-style:dashed;border-color:var(--v-unmeasured);background:#f1f3f3;color:var(--v-unmeasured-ink)}.btn{appearance:none;border:0;border-radius:12px;padding:16px 18px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;width:100%}.btn.primary{background:var(--p-color);color:var(--p-ink-on)}.btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink)}.btn.dark{background:#1c1e19;color:#fff}.btn:disabled{opacity:.45;cursor:not-allowed}.row{display:flex;gap:10px;align-items:center}.muted{color:var(--ink-soft);font-size:13px}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:#fff}.chip .dot{width:8px;height:8px;border-radius:50%}.chip.good .dot{background:var(--v-good)}.chip.practice .dot{background:var(--v-practice)}.chip.other .dot{background:var(--v-other)}.chip.unmeasured{border-style:dashed;border-color:var(--v-unmeasured);color:var(--v-unmeasured-ink)}.meter{display:flex;gap:3px;align-items:flex-end;height:40px}.meter i{flex:1;background:var(--v-good);opacity:.35;border-radius:2px;min-height:3px;transition:height .08s}.meter i.on{opacity:1}.syl{display:inline-flex;flex-direction:column;align-items:center;margin-right:2px}.syl b{font-family:var(--font-kr);font-weight:700;font-size:34px;line-height:1.2;color:#1c1e19}.syl i{display:block;width:100%;height:4px;border-radius:2px;margin-top:4px}.syl.good i{background:var(--v-good)}.syl.practice i{background:var(--v-practice)}.syl.other i{background:var(--v-other)}.syl.unmeasured i{background:repeating-linear-gradient(90deg,var(--v-unmeasured) 0 4px,transparent 4px 7px)}.logo{display:flex;align-items:center;gap:10px}.logo .bars{display:flex;gap:2px;align-items:flex-end;height:22px}.logo .bars i{width:3px;background:var(--logo);border-radius:1px}.logo .name{font-family:var(--font-label);font-weight:600;letter-spacing:.12em;color:var(--logo)}.logo .kana{font-size:10px;letter-spacing:.3em;color:var(--ink-soft)}.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.partner-card{border-radius:14px;padding:14px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;position:relative;cursor:pointer;border:2px solid transparent}.partner-card.selected{border-color:#1c1e19}.partner-card .q{font-size:12px;opacity:.92}.toggle{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.toggle input{width:22px;height:22px;accent-color:var(--p-color)}.footer-note{font-size:12px;color:var(--ink-faint)}.warn{color:var(--warn)}:root{--tilt-x: 0;--tilt-y: 0;--tilt-px: 10px}.tilt{transform:translate3d(calc(var(--tilt-x) * var(--tilt-px)),calc(var(--tilt-y) * var(--tilt-px) * .6),0);will-change:transform}.tilt-soft{transform:translate3d(calc(var(--tilt-x) * var(--tilt-px) * .45),calc(var(--tilt-y) * var(--tilt-px) * .28),0);will-change:transform}.sheen{position:relative;overflow:hidden}.sheen:after{content:"";position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);transform:translate3d(calc(var(--tilt-x) * 34%),calc(var(--tilt-y) * 18%),0);transition:opacity .2s;opacity:.75}.xfade{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}.xfade>*{flex:1;display:flex;flex-direction:column;min-height:0}.xfade-leave{position:absolute;inset:0;z-index:2;pointer-events:none;animation:xfade-out .42s cubic-bezier(.22,.61,.36,1) forwards}.xfade-enter{animation:xfade-in .42s cubic-bezier(.22,.61,.36,1) both}@keyframes xfade-out{0%{opacity:1;filter:blur(0px);transform:scale(1) translateZ(0)}to{opacity:0;filter:blur(14px);transform:scale(1.04) translate3d(0,-1.5%,0)}}@keyframes xfade-in{0%{opacity:0;filter:blur(10px);transform:scale(.985) translate3d(0,1.2%,0)}to{opacity:1;filter:blur(0px);transform:scale(1) translateZ(0)}}@media(prefers-reduced-motion:reduce){.tilt,.tilt-soft{transform:none!important}.sheen:after{display:none}.xfade-leave{display:none}.xfade-enter{animation:none}}