:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#1b1622;--night:#15121b;--paper:#fffaf0ed;--paper-solid:#fffaf0;--white:#fff;--pink:#ff4f8b;--yellow:#ffe066;--cyan:#52d6f4;--muted:#564d61;--faint:#6a6175;--ui:var(--font-ui), "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html{background:var(--night)}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{min-height:100dvh;font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;background:radial-gradient(#ffffff0f 1px, transparent 1.5px) 0 0 / 14px 14px, var(--night);margin:0}button{font:inherit;color:inherit}button,label,input{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.on-art{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:#15121ba8;border-radius:.25em;padding:0 .34em;line-height:1.55}.on-art--light{background:#fffaf0d6}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.device{isolation:isolate;background:var(--ink);flex-direction:column;width:100%;height:100dvh;display:flex;position:relative;overflow:clip}@media (min-width:500px){body:has(>.device){place-items:center;padding-block:24px;display:grid}.device{border-radius:44px;width:390px;height:min(844px,100dvh - 48px);box-shadow:0 0 0 10px #0b0910,0 0 0 11px #3a3444,0 30px 80px #0009}}.scene{z-index:-1;position:absolute;inset:0}.backdrop{object-fit:cover}.sprite{z-index:-1;aspect-ratio:2/3;height:96%;animation:3.6s ease-in-out infinite idle;position:absolute;top:4%;left:50%;translate:-50%}.pose{opacity:0}.pose.is-active{opacity:1;animation:.38s cubic-bezier(.34,1.56,.64,1) pose-hop}@keyframes idle{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes pose-hop{0%{transform:translateY(12px)scale(.97)}to{transform:none}}.sprite img{object-fit:contain;object-position:top center}.topbar{padding:calc(env(safe-area-inset-top) + 18px) 16px 0;justify-content:space-between;align-items:center;gap:12px;display:flex}.situation{border:2.5px solid var(--ink);background:var(--paper-solid);min-width:0;color:var(--ink);box-shadow:2px 2px 0 var(--ink);text-wrap:balance;border-radius:9px;margin:0;padding:5px 12px 6px;font-size:.8125rem;font-weight:700;line-height:1.25;animation:.24s cubic-bezier(.2,.9,.3,1.15) both pop-in;rotate:-2deg}@media (prefers-reduced-motion:reduce){.situation{animation:none}}.dialogue{background:var(--paper);-webkit-backdrop-filter:blur(10px);border-top:3px solid var(--ink);border-radius:22px 22px 0 0;flex-direction:column;height:58%;margin-top:auto;display:flex;position:relative}.nameplate{z-index:1;background:var(--pink);color:var(--white);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);letter-spacing:.03em;border-radius:10px;margin:0;padding:3px 16px 5px;font-size:1.0625rem;font-weight:700;position:absolute;top:0;left:16px;translate:0 -62%;rotate:-3deg}.log-scroll{overscroll-behavior:contain;flex-direction:column-reverse;flex:1;min-height:0;padding:30px 14px 14px;display:flex;overflow-y:auto}.log-scroll,.preview-scroll,.sheet-body,.picker-scroll{-webkit-mask-image:linear-gradient(#0000,#000 26px);mask-image:linear-gradient(#0000,#000 26px)}.log{flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;display:flex}.line{border:2px solid var(--ink);max-width:86%;box-shadow:3px 3px 0 var(--ink);border-radius:16px;padding:9px 14px 10px}.line p,.suggestion p{margin:0}.line--character{background:var(--white);border-bottom-left-radius:4px;align-self:flex-start}.line--you{background:var(--yellow);border-bottom-right-radius:4px;align-self:flex-end}.line-text{line-break:strict;font-size:1.125rem;font-weight:500;line-height:1.5;transition:line-height .2s}:is(.line,.suggestion) .line-transliteration{color:var(--muted);margin-top:3px;font-size:.8125rem;line-height:1.4}:is(.line,.suggestion) .line-translation{color:var(--faint);border-top:1px dashed #1b162240;margin-top:6px;padding-top:5px;font-size:.8125rem;line-height:1.4}.line .line-dev{background:var(--ink);width:fit-content;color:var(--white);border-radius:6px;gap:6px;margin-top:8px;padding:2px 8px 3px;font:600 .75rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;animation:.2s ease-out both fade-down;display:flex}.line-dev span{color:var(--cyan)}@media (prefers-reduced-motion:reduce){.line .line-dev{animation:none}}.line--typing{gap:5px;padding:14px 16px;display:flex}.line--typing span{background:var(--muted);border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite typing}.line--typing span:nth-child(2){animation-delay:.15s}.line--typing span:nth-child(3){animation-delay:.3s}@keyframes typing{0%,60%,to{opacity:.3;translate:0}30%{opacity:1;translate:0 -3px}}@media (prefers-reduced-motion:reduce){.line--typing span{opacity:.6;animation:none}}.log-note{color:var(--muted);align-self:center;align-items:center;gap:8px;font-size:.875rem;display:flex}.log-note button{border:2px solid var(--ink);background:var(--yellow);box-shadow:2px 2px 0 var(--ink);cursor:pointer;border-radius:999px;padding:2px 12px 3px;font-weight:700}.composer{padding:12px 14px calc(env(safe-area-inset-bottom) + 16px);border-top:2px dashed #1b162226;align-items:center;gap:10px;display:flex}.composer-input{border:2px solid var(--ink);background:var(--white);min-width:0;height:48px;box-shadow:2px 2px 0 var(--ink);color:var(--ink);font:inherit;border-radius:999px;flex:1;padding:0 18px;font-size:1rem}.composer-input::placeholder{color:var(--faint)}.composer-input:focus-visible{box-shadow:3px 3px 0 var(--pink);outline:none}.send{border:3px solid var(--ink);background:var(--pink);width:48px;height:48px;color:var(--white);box-shadow:3px 3px 0 var(--ink);cursor:pointer;border-radius:50%;flex:none;place-items:center;display:grid}.send:disabled{box-shadow:2px 2px 0 var(--ink);cursor:default;background:#d8d0c4}.round-button{background:var(--ink);width:40px;height:40px;color:var(--white);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;display:grid}.aid-chips{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.aid-badge{border:2px solid var(--ink);background:var(--paper-solid);width:36px;height:36px;color:var(--ink);border-radius:50%;flex:none;place-items:center;font-size:.8125rem;font-weight:700;line-height:1;display:grid}.aid-chip{box-shadow:2px 2px 0 var(--ink);cursor:pointer}.aid-chip[aria-pressed=true]{background:var(--yellow);box-shadow:none;translate:2px 2px}.aid-icon ruby{font-size:.9375rem;line-height:1}.aid-icon rt{font-size:.5em}.line-text--ruby{line-height:2.1}.line-text rt{color:var(--muted);font-size:.55em;font-weight:500}.suggestion{border:2px dashed var(--ink);background:#ffe06659;border-radius:16px 16px 4px;align-self:flex-end;max-width:86%;padding:7px 14px 10px}.suggestion-label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem;font-weight:700;display:block}.sheet-backdrop{z-index:10;background:#15121b73;align-items:flex-end;display:flex;position:absolute;inset:0}.sheet{width:100%;padding:18px 18px calc(env(safe-area-inset-bottom) + 24px);border-top:3px solid var(--ink);background:var(--paper-solid);border-radius:22px 22px 0 0;animation:.22s ease-out sheet-up}@keyframes sheet-up{0%{translate:0 100%}to{translate:0}}.sheet-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.sheet-head h2{margin:0;font-size:1.25rem}.sheet-done{border:2px solid var(--ink);background:var(--yellow);box-shadow:2px 2px 0 var(--ink);cursor:pointer;border-radius:999px;padding:6px 16px 7px;font-weight:700}.sheet-note{color:var(--muted);margin:10px 0 6px;font-size:.875rem;line-height:1.5}.switches{margin:0;padding:0;list-style:none}.sheet-dev-link{margin:2px 0 0}.sheet-section{border-top:2px solid var(--ink);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:10px 0 0;padding-top:14px;font-size:.6875rem;font-weight:700}.switches li+li{border-top:2px dashed #1b162226}.switch{cursor:pointer;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;display:flex}.switch-text{flex-direction:column;flex:1;display:flex}.switch-text span{color:var(--muted);font-size:.8125rem}.switch input{border:2px solid var(--ink);appearance:none;cursor:pointer;background:#e2dacd;border-radius:999px;flex:none;width:52px;height:30px;margin:0;transition:background .15s;position:relative}.switch input:before{content:"";border:2px solid var(--ink);background:var(--white);border-radius:50%;width:22px;height:22px;transition:translate .15s,width .15s;position:absolute;top:2px;left:2px}.switch input:checked{background:var(--pink)}.switch input:checked:before{translate:22px}@keyframes pop-in{0%{opacity:0;transform:translateY(8px)scale(.96)}to{opacity:1;transform:none}}@keyframes fade-down{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes dim-in{0%{background-color:#15121b00}}@keyframes dim-out{to{background-color:#15121b00}}@keyframes sheet-down{0%{translate:0}to{translate:0 100%}}.line,.suggestion,.log-note{animation:.24s cubic-bezier(.2,.9,.3,1.15) both pop-in}.line--character{transform-origin:0 100%}.line--you,.suggestion{transform-origin:100% 100%}.log-note{transform-origin:50% 100%}:is(.line,.suggestion) :is(.line-transliteration,.line-translation),.aid-chips{animation:.2s ease-out both fade-down}.line-text rt{animation:.2s ease-out both fade-in}.sheet-backdrop{animation:.2s ease-out both dim-in}.sheet-backdrop.is-closing{animation:.2s ease-in both dim-out}.sheet-backdrop.is-closing .sheet{animation:.2s ease-in both sheet-down}.switch:active input:before{width:28px}.switch:active input:checked:before{translate:16px}:is(.aid-chip,.send,.round-button,.sheet-done,.log-note button,.replay) *{pointer-events:none}.line--voiced{padding-right:26px;position:relative}.replay{border:2px solid var(--ink);background:var(--paper-solid);width:34px;height:34px;color:var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;border-radius:50%;place-items:center;display:grid;position:absolute;top:-12px;right:-14px}.replay[data-speaking]{background:var(--pink);color:var(--white)}.replay[data-speaking] .replay-wave{animation:.9s ease-in-out infinite sound-wave}.replay[data-speaking] .replay-wave--far{animation-delay:.15s}@keyframes sound-wave{0%,to{opacity:.35}50%{opacity:1}}.aid-chip,.send,.sheet-done,.log-note button,.replay,.round-button,.composer-input,.switch input{transition:translate .12s,scale .12s,box-shadow .12s,background-color .12s}@media (hover:hover) and (pointer:fine){:is(.aid-chip,.sheet-done,.log-note button,.replay):not(:disabled,[aria-pressed=true]):hover{box-shadow:3px 3px 0 var(--ink);translate:-1px -1px}.send:not(:disabled):hover{box-shadow:4px 4px 0 var(--ink);translate:-1px -1px}.round-button:hover{background:var(--pink)}.switch:hover input{box-shadow:2px 2px 0 var(--ink);translate:-1px -1px}.composer-input:hover:not(:focus-visible){box-shadow:3px 3px 0 var(--ink)}}:is(.aid-chip,.send,.sheet-done,.log-note button,.replay):not(:disabled):active{box-shadow:none;translate:2px 2px}.round-button:active{scale:.92}@media (prefers-reduced-motion:reduce){.replay,.replay[data-speaking] .replay-wave,.line,.suggestion,.log-note,:is(.line,.suggestion) :is(.line-transliteration,.line-translation),.aid-chips,.line-text,.line-text rt,.sheet-backdrop,.sheet-backdrop.is-closing,.sheet-backdrop.is-closing .sheet,.aid-chip,.send,.sheet-done,.log-note button,.round-button,.composer-input,.sprite,.pose.is-active,.sheet,.switch input,.switch input:before{transition:none;animation:none}}.topbar-start{align-items:center;gap:10px;min-width:0;display:flex}.name-reading{font-size:.75em;font-weight:500}.picker{background:radial-gradient(#1b162212 1px, transparent 1.5px) 0 0 / 12px 12px, var(--paper-solid)}.picker-head{padding:calc(env(safe-area-inset-top) + 34px) 22px 0}.picker-head h1{margin:0;font-size:1.875rem;line-height:1.15}.picker-head p{color:var(--muted);margin:6px 0 0;font-size:.9375rem}.picker-brand{width:auto;max-width:100%;height:40px;margin:0 0 18px -2px;display:block;overflow:visible}.picker-brand .wordmark-un{transform-box:fill-box;transform-origin:50%;animation:.52s cubic-bezier(.2,.9,.3,1.35) .15s both slap}@keyframes slap{0%{transform:translate(-10%,-45%)rotate(-16deg)scale(1.6)}}@media (prefers-reduced-motion:reduce){.picker-brand .wordmark-un{animation:none}}.picker-scroll{overscroll-behavior:contain;flex:1;min-height:0;overflow-y:auto}.tiles{padding:26px 20px calc(env(safe-area-inset-bottom) + 28px) 18px;gap:18px;margin:0;list-style:none;display:grid}.tiles li{animation:.28s cubic-bezier(.2,.9,.3,1.15) both pop-in;animation-delay:calc(var(--i,0) * 70ms)}.tile{isolation:isolate;border:3px solid var(--ink);background:var(--ink);height:176px;box-shadow:3px 3px 0 var(--ink);color:var(--white);-webkit-tap-highlight-color:transparent;border-radius:20px;align-items:flex-end;gap:12px;padding:12px 14px;text-decoration:none;display:flex;position:relative;overflow:hidden}.tile-art{z-index:-1;position:absolute;inset:0}.tile-backdrop{object-fit:cover;object-position:50% 30%}.tile-art:after{content:"";background:linear-gradient(#0000,#15121b1a 45%,#15121b8c);position:absolute;inset:0}.tile-face{border:3px solid var(--ink);background:var(--yellow);width:60px;height:60px;box-shadow:2px 2px 0 var(--ink);border-radius:50%;flex:none;position:relative;overflow:hidden}.tile-face img{object-fit:cover;object-position:50% 0;transform-origin:50% 14%;transform:translateY(36%)scale(3)}.tile-text{flex-direction:column;gap:6px;min-width:0;display:flex}.tile-title{text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.25}.tile-who{flex-wrap:wrap;align-items:center;gap:8px;font-size:.8125rem;display:flex}.tile-name{border:2px solid var(--ink);background:var(--pink);border-radius:8px;padding:1px 9px 2px;font-weight:700;rotate:-3deg}.tile-place{color:#ffffffd9;font-weight:500}.scene-end{padding:14px 14px calc(env(safe-area-inset-bottom) + 18px);transform-origin:50% 100%;border-top:2px dashed #1b162226;flex-direction:column;align-items:center;gap:12px;animation:.24s cubic-bezier(.2,.9,.3,1.15) both pop-in;display:flex}.scene-end-text{color:var(--muted);align-items:center;gap:10px;margin:0;font-size:.875rem;display:flex}.scene-end-mark{background:var(--ink);color:var(--white);border-radius:8px;padding:2px 10px 3px;font-weight:700;rotate:-3deg}.scene-end-actions{gap:10px;display:flex}.pill-button{border:2px solid var(--ink);background:var(--paper-solid);height:44px;box-shadow:2px 2px 0 var(--ink);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;align-items:center;padding:0 18px;font-weight:700;text-decoration:none;display:inline-flex}.pill-button--primary{background:var(--pink);color:var(--white)}.tile,.pill-button{transition:translate .12s,box-shadow .12s}.tile-backdrop{transition:scale .3s}.tile *{pointer-events:none}@media (hover:hover) and (pointer:fine){.tile:hover,.pill-button:hover{box-shadow:4px 4px 0 var(--ink);translate:-1px -1px}.pill-button:hover{box-shadow:3px 3px 0 var(--ink)}.tile:hover .tile-backdrop{scale:1.04}}.tile:active,.pill-button:active{box-shadow:none;translate:2px 2px}@media (prefers-reduced-motion:reduce){.tiles li,.tile,.tile-backdrop,.scene-end,.pill-button{transition:none;animation:none}}.topbar-end{flex:none;gap:8px;display:flex}.sheet{flex-direction:column;max-height:88%;display:flex}.sheet-body{overscroll-behavior:contain;min-height:0;padding-top:26px;overflow-y:auto}.sheet-body>:first-child{margin-top:0}.preview-panel{height:64%}.preview-scroll{overscroll-behavior:contain;flex:1;min-height:0;padding:30px 16px 16px;overflow-y:auto}.preview-title{text-wrap:balance;margin:0;font-size:1.375rem;line-height:1.25}.preview-situation{color:var(--muted);margin:6px 0 4px;font-size:.9375rem;line-height:1.5}.preview-start{padding:12px 14px calc(env(safe-area-inset-bottom) + 16px);border-top:2px dashed #1b162226;justify-content:center;display:flex}.preview-start .pill-button{flex:1;justify-content:center;max-width:320px}.vocab-tabs{gap:8px;margin-top:14px;display:flex}.vocab-tab{border:2px solid var(--ink);background:var(--white);min-height:38px;box-shadow:2px 2px 0 var(--ink);color:var(--ink);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:0 14px;font-size:.9375rem;font-weight:700;transition:translate .12s,box-shadow .12s,background-color .12s;display:inline-flex}.vocab-tab[aria-selected=true]{background:var(--yellow);box-shadow:none;translate:2px 2px}.vocab-count{background:var(--ink);min-width:20px;color:var(--white);text-align:center;border-radius:999px;padding:0 6px;font-size:.75rem;line-height:1.5}@media (hover:hover) and (pointer:fine){.vocab-tab[aria-selected=false]:hover{box-shadow:3px 3px 0 var(--ink);translate:-1px -1px}}.vocab-tab:active{box-shadow:none;translate:2px 2px}@media (prefers-reduced-motion:reduce){.vocab-tab{transition:none}}.vocab-list:focus-visible{outline:none}.vocab-list{gap:10px;margin:8px 0 2px;padding:0;list-style:none;display:grid}.vocab-entry{border:2px solid var(--ink);background:var(--white);box-shadow:2px 2px 0 var(--ink);animation:.24s cubic-bezier(.2,.9,.3,1.15) both pop-in;animation-delay:calc(var(--i,0) * 30ms);border-radius:14px;padding:8px 12px 9px}.vocab-entry p{margin:0}.vocab-entry--voiced{padding-right:48px;position:relative}.vocab-entry .replay{top:8px;right:8px}.vocab-entry .line-text{font-size:1.0625rem}.vocab-romaji{color:var(--muted);font-size:.8125rem}.vocab-meaning{margin-top:2px;font-size:.875rem;font-weight:700}.vocab-note{color:var(--faint);margin-top:2px;font-size:.8125rem;line-height:1.4}@media (prefers-reduced-motion:reduce){.vocab-entry{animation:none}}:is(.round-button,.aid-chip,.replay,.send,.sheet-done,.log-note button,.pill-button,.tile,.switch input,.vocab-tab,.google-button):focus-visible{box-shadow:3px 3px 0 var(--pink);outline:none}.splash-sprite{aspect-ratio:2/3;height:96%;position:absolute;top:4%;left:50%;translate:-50%}.splash-sprite img{object-fit:contain;object-position:top center}.splash-panel{height:auto;padding:28px 22px calc(env(safe-area-inset-bottom) + 28px);gap:12px;animation:.32s cubic-bezier(.2,.9,.3,1) both sheet-up}.splash-panel .picker-brand{margin-bottom:4px}.splash-title{text-wrap:balance;margin:0;font-size:1.625rem;line-height:1.15}.splash-lede{color:var(--muted);margin:0;font-size:.9375rem;line-height:1.5}.splash-error{color:#c2185b;margin:0;font-size:.875rem;font-weight:700;line-height:1.45}.google-button{border:2px solid var(--ink);background:var(--white);color:#1f1f1f;height:50px;box-shadow:3px 3px 0 var(--ink);-webkit-tap-highlight-color:transparent;border-radius:999px;justify-content:center;align-items:center;gap:12px;margin-top:6px;font-size:1rem;text-decoration:none;transition:translate .12s,box-shadow .12s;display:flex}.google-button>*{pointer-events:none;flex:none}@media (hover:hover) and (pointer:fine){.google-button:hover{box-shadow:4px 4px 0 var(--ink);translate:-1px -1px}}.google-button:active{box-shadow:none;translate:2px 2px}.splash-fine{color:var(--faint);margin:0;font-size:.75rem;line-height:1.5}.splash-fine a{color:inherit;font-weight:700}.sheet-account{justify-content:space-between;align-items:center;gap:12px;padding:12px 0 4px;display:flex}.sheet-account .switch-text{overflow-wrap:anywhere;min-width:0}@media (prefers-reduced-motion:reduce){.splash-panel,.google-button{transition:none;animation:none}}
