:root{color-scheme:dark;--canvas:#070709;--surface:#141417;--ink:#f8f8fa;--muted:#929298;--line:#ffffff14;--cyan:#25f4ee;--pink:#fe2c55;--font:Arial,Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--canvas);color:var(--ink);font:14px var(--font);-webkit-font-smoothing:antialiased}button,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}a{color:inherit}#stage{position:relative;display:grid;place-items:center;width:100%;height:100dvh;padding:24px;overflow:hidden;touch-action:none;outline:none;perspective:1200px}#card{position:relative;width:min(560px,100%);height:min(920px,calc(100dvh - 48px));overflow:hidden;background:var(--surface);border:1px solid #ffffff0d;border-radius:24px;box-shadow:0 28px 90px #0008;transform-origin:50% 65%;will-change:transform;transition:background .2s,border-color .2s,box-shadow .2s}#stage.remembered #card{background:#102526;border-color:var(--cyan);box-shadow:0 0 60px #25f4ee16}#stage.forgot #card{background:#2b121a;border-color:var(--pink);box-shadow:0 0 60px #fe2c551c}#word-face{position:absolute;inset:0;display:grid;place-items:center;padding:32px;cursor:pointer;user-select:none}h1{margin:0;font:750 clamp(38px,6vw,76px)/1.04 var(--font);letter-spacing:-.055em;text-align:center;max-width:100%;overflow-wrap:anywhere}#stage.expanded #word-face{inset:0 0 auto;height:22%;min-height:112px;padding:25px 28px 13px;cursor:default}#stage.expanded h1{font-size:clamp(30px,4.5vw,51px);letter-spacing:-.045em}#details{position:absolute;top:max(22%,112px);bottom:0;left:0;width:100%;overflow-y:auto;overscroll-behavior:contain;padding:0 28px 28px;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#34343c transparent}.detail-header{margin-bottom:17px}#phonetics{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#b7b7bf;line-height:1.7}#phonetics b{display:inline-block;margin-right:7px;font-size:9px;font-weight:700;letter-spacing:.6px;color:var(--cyan)}.meaning{font-size:20px;line-height:1.5;font-weight:600;margin:0 0 22px;letter-spacing:.01em}.image-wrap{height:min(29dvh,270px);display:flex;align-items:center;justify-content:center;background:#fff;border-radius:13px;padding:18px;margin:0 0 23px}.image-wrap img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.example{font:500 19px/1.5 var(--font);letter-spacing:-.25px;margin:0 0 12px;color:#ededf0}.example-source{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 15px}#unit-info{margin-top:20px}footer{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:10px;color:var(--muted)}footer div{display:flex;gap:13px;flex-wrap:wrap}#status{color:#d1d1d7}footer button{font-size:10px;font-weight:600;padding:0;color:#ededf0;white-space:nowrap}.source-line{display:flex;justify-content:space-between;gap:12px;margin-top:23px;color:#7f7f87;font-size:9px;line-height:1.5}.source-line a{text-decoration:none}#empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:18px;color:var(--muted)}#empty button{font-size:12px;color:var(--cyan)}dialog{background:#18181c;border:1px solid #ffffff13;border-radius:22px;padding:28px;width:min(440px,calc(100vw - 32px));max-height:85dvh;overflow:auto;color:var(--ink);box-shadow:0 28px 100px #0009}dialog::backdrop{background:#0009;backdrop-filter:blur(12px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:29px}.dialog-head h2{font:750 30px var(--font);letter-spacing:-1px;margin:0}.dialog-head button{font-size:26px;color:#a2a2aa;padding:0 2px}.modes{display:flex;border-bottom:1px solid #ffffff18;gap:8px;margin-bottom:28px}.modes button{flex:1;padding:13px 4px 15px;color:#81818c;font-size:13px;font-weight:650;position:relative}.modes button.active{color:white}.modes button.active:after{content:'';position:absolute;bottom:-1px;left:25%;right:25%;height:3px;background:var(--cyan);border-radius:4px}label{display:grid;gap:9px;margin-bottom:23px;color:#a6a6af;font-size:11px;font-weight:600;letter-spacing:.2px}select{width:100%;padding:14px 12px;background:#222227;border:1px solid #ffffff0f;border-radius:9px;font-size:12px}#scope-apply{width:100%;padding:15px;background:var(--pink);border-radius:8px;margin-top:7px;font-size:14px;font-weight:700;color:white}.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}@media(max-width:600px){#stage{padding:12px}#card{height:calc(100dvh - 24px);border-radius:21px}#word-face{padding:26px}h1{font-size:clamp(33px,10.5vw,62px)}#stage.expanded #word-face{padding:22px 23px 10px}#stage.expanded h1{font-size:clamp(28px,8.8vw,42px)}#details{padding:0 23px 24px}#phonetics{font-size:11px;gap:10px}.meaning{font-size:18px;margin-bottom:19px}.image-wrap{height:min(28dvh,240px);padding:15px;margin-bottom:21px}.example{font-size:17px;line-height:1.55}footer{font-size:9px}footer button{font-size:10px}.source-line{font-size:8px;gap:8px}dialog{padding:25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Quiet at rest; color and depth emerge with the gesture. */
body{background:#08090c}
#stage{isolation:isolate;background:radial-gradient(ellipse at 13% 8%,#153b3c38,transparent 48%),radial-gradient(ellipse at 90% 95%,#46203030,transparent 48%)}
#deck{position:relative;width:min(520px,100%);height:min(860px,calc(100dvh - 64px));perspective:1400px}
#card,#next-card{position:absolute;inset:0;width:100%;height:100%;border-radius:30px}
#card{background:radial-gradient(ellipse at 0 0,#ffffff06,transparent 60%),linear-gradient(145deg,#1e2028,#121319 65%,#16171f);border:1px solid #ffffff13;box-shadow:inset 0 1px #ffffff0b,0 30px 90px #0009;transform-origin:50% 75%;transition:border-color .2s,box-shadow .2s;z-index:2}
#next-card{display:grid;place-items:center;background:linear-gradient(145deg,#242731,#15161d);border:1px solid #ffffff12;transform:translateY(12px) scale(.955);box-shadow:0 20px 60px #0005;z-index:1}
#next-term{font:750 clamp(38px,6vw,72px)/1.08 var(--font);letter-spacing:-.055em;text-align:center;padding:32px;opacity:0;overflow-wrap:anywhere}
h1{font-weight:750;font-size:clamp(38px,6vw,72px);text-wrap:balance;text-shadow:0 2px 24px #ffffff08}
#swipe-mark{position:absolute;top:30px;right:30px;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;font-size:28px;border:1px solid currentColor;color:var(--cyan);opacity:0;pointer-events:none;z-index:5;transform:scale(.7)}
#stage.forgot #swipe-mark{right:auto;left:30px;color:var(--pink)}
#stage.remembered #card{background:radial-gradient(ellipse at 0 50%,#25f4ee18,transparent 75%),linear-gradient(145deg,#1e2028,#121319);border-color:#25f4ee80;box-shadow:0 30px 90px #0009,0 0 55px #25f4ee10}
#stage.forgot #card{background:radial-gradient(ellipse at 100% 50%,#fe2c5520,transparent 75%),linear-gradient(145deg,#1e2028,#121319);border-color:#fe2c5580;box-shadow:0 30px 90px #0009,0 0 55px #fe2c5510}
#stage.expanded #word-face{height:21%;padding:28px 32px 12px;place-items:end start;min-height:106px}
#stage.expanded h1{text-align:left;font-size:clamp(32px,4.6vw,50px);line-height:1.03}
#details{top:max(21%,106px);padding:18px 32px 30px;scrollbar-width:none;mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}
#details::-webkit-scrollbar{display:none}
#phonetics{gap:20px;font-size:12px;color:#a6a9b9}
#phonetics b{font-size:9px;letter-spacing:1px;color:#6ddbd8}
.meaning{font-size:22px;font-weight:500;letter-spacing:.03em;margin-bottom:24px;color:#f0f0f5}
.image-wrap{height:min(28dvh,248px);border-radius:18px;background:#f6f6f7;padding:22px;box-shadow:0 8px 30px #0002;margin-bottom:26px}
.example{font-size:20px;line-height:1.55;font-weight:400;color:#d5d6e0;letter-spacing:-.3px}
#examples{border-left:2px solid #25f4ee6b;padding-left:17px}
.example-source{color:#777d90;font-size:10px}
footer{padding-top:22px;margin-top:24px;font-size:10px}
footer button{color:#b4efed;padding:8px 0}
.source-line{opacity:.7}
dialog{background:linear-gradient(150deg,#232530,#14151d);border-radius:26px;padding:30px;box-shadow:0 35px 120px #000b;animation:sheet-in .32s cubic-bezier(.2,.8,.2,1)}
.modes{border:1px solid #ffffff0b;border-radius:13px;padding:4px;background:#090a103d;gap:3px}.modes button{border-radius:9px;padding:12px 4px;transition:background .2s,color .2s}.modes button.active{background:#ffffff10;box-shadow:0 2px 8px #0002}.modes button.active:after{display:none}
select{background:#ffffff05;border-color:#ffffff12;border-radius:12px;padding:15px 12px}#scope-apply{border-radius:12px;background:linear-gradient(110deg,#ff3d68,#e72153);box-shadow:0 7px 25px #fe2c551c}
@keyframes sheet-in{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:600px){#stage{padding:20px 18px}#deck{height:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}#card,#next-card{border-radius:26px}h1,#next-term{font-size:clamp(32px,10.2vw,62px)}#stage.expanded #word-face{padding:22px 25px 10px}#stage.expanded h1{font-size:clamp(29px,8.8vw,43px)}#details{padding:16px 25px 28px}.meaning{font-size:20px;margin-bottom:22px}.image-wrap{padding:18px;height:min(27dvh,230px);margin-bottom:24px}.example{font-size:18px}#phonetics{gap:13px;font-size:11px}#swipe-mark{top:22px;right:22px;width:44px;height:44px;font-size:23px}#stage.forgot #swipe-mark{left:22px}dialog{padding:26px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}