:root{--bg: #0d0e12;--glow: rgba(255, 180, 84, .16);--surface: rgba(255, 255, 255, .045);--surface-strong: rgba(255, 255, 255, .07);--border: rgba(255, 255, 255, .09);--text: #f4f2ef;--muted: #979aa6;--accent: #ffb454;--accent-2: #ff7a59;--on-accent: #241503;--shadow: 0 18px 50px rgba(0, 0, 0, .5);--radius: 20px;--gap: clamp(1rem, 4vw, 1.75rem);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}@media(prefers-color-scheme:light){:root{--bg: #f7f5f2;--glow: rgba(224, 131, 0, .13);--surface: #ffffff;--surface-strong: #ffffff;--border: rgba(20, 18, 15, .1);--text: #1a1a1f;--muted: #6b6b76;--accent: #e08300;--accent-2: #e0553a;--on-accent: #ffffff;--shadow: 0 14px 40px rgba(60, 45, 20, .12)}}*,*:before,*:after{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100svh;background:var(--bg);background-image:radial-gradient(120% 80% at 50% -10%,var(--glow),transparent 60%);background-attachment:fixed;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;touch-action:manipulation}h1,h2,p{margin:0}.muted{color:var(--muted)}.app{display:flex;flex-direction:column;height:100svh;max-width:34rem;margin-inline:auto;padding:calc(var(--safe-top) + .75rem) calc(var(--safe-right) + var(--gap)) calc(var(--safe-bottom) + 1.25rem) calc(var(--safe-left) + var(--gap))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.wordmark{font-size:.9rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}.wordmark span{color:var(--accent)}.view{flex:1;display:flex;flex-direction:column;min-height:0}.stage{flex:1;display:flex;align-items:center;justify-content:center;padding-block:.5rem 1.5rem;min-height:0;overflow-y:auto}.action{display:flex;flex-direction:column;align-items:center;gap:.85rem}.done-button{width:100%;max-width:22rem;padding:1.15rem 2rem;border:0;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);font:inherit;font-size:1.2rem;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:0 10px 28px #ff7a5947;transition:transform .12s ease,box-shadow .12s ease;-webkit-tap-highlight-color:transparent}.done-button:active{transform:scale(.96);box-shadow:0 4px 14px #ff7a5938}.progress{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}.icon-button{display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:none;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}.icon-button svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button:active{background:var(--surface-strong)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}.card{width:100%;padding:1.6rem 1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);text-align:center;backdrop-filter:blur(12px)}.card .language{display:inline-block;margin-bottom:1rem;padding:.25rem .7rem;border-radius:999px;background:var(--surface-strong);border:1px solid var(--border);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.card .original{font-size:clamp(2rem,9vw,2.9rem);font-weight:700;line-height:1.2;padding-block:.1em;overflow-wrap:break-word}.card .romanization{margin-top:.5rem;font-size:1.05rem;color:var(--text);opacity:.85}.card .pronunciation{margin-top:.15rem;font-size:.9rem;color:var(--muted);font-style:italic}.card .meaning{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--border);font-size:.95rem;color:var(--muted);text-align:left;text-wrap:pretty}.card.is-new{animation:rise .42s cubic-bezier(.22,1,.36,1) both}@keyframes rise{0%{opacity:0;transform:translateY(14px) scale(.97)}}.welcome{max-width:22rem;text-align:center;color:var(--muted);font-size:1.05rem;text-wrap:balance}.archive-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.25rem}.archive-head h2{font-size:1.15rem;font-weight:700}.archive-head p{font-size:.82rem}.archive-list{display:flex;flex-direction:column;gap:.7rem;flex:1;min-height:0;overflow-y:auto;padding-bottom:1rem;-webkit-overflow-scrolling:touch}.entry{flex:none;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}.entry>summary{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.15rem .9rem;padding:.9rem 1rem;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}.entry>summary::-webkit-details-marker{display:none}.entry .head-original{flex:1 1 60%;font-size:1.15rem;font-weight:600;min-width:0;overflow-wrap:break-word}.entry .head-language{flex:0 1 auto;margin-left:auto;text-align:right;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}.entry .body{padding:.85rem 1rem 1rem;border-top:1px solid var(--border)}.entry .body .romanization{font-size:.95rem}.entry .body .pronunciation{font-size:.85rem;color:var(--muted);font-style:italic}.entry .body .meaning{margin-top:.6rem;font-size:.9rem;color:var(--muted);text-wrap:pretty}.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted);text-wrap:balance}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
