:root{--paper:#f7f6f2;--ink:#202020;--basil:#287a4b;--tomato:#c8443a;--gold:#d9a441;--night:#131816;--ui:system-ui,-apple-system,"Segoe UI",sans-serif;--display:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{background:#eae8df;color:var(--ink);font-family:var(--ui)}body{margin:0;min-height:100vh}button,select{font:700 .82rem var(--ui);min-height:44px;border:1px solid #777;background:var(--paper);color:var(--ink);padding:.7rem .9rem;border-radius:2px;cursor:pointer}button:hover{border-color:var(--basil)}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 5px var(--ink)}
.skip{position:fixed;left:1rem;top:-5rem;background:var(--ink);color:white;padding:1rem;z-index:10}.skip:focus{top:1rem}header{display:flex;justify-content:space-between;align-items:flex-end;padding:1.5rem clamp(1rem,4vw,4rem);border-bottom:1px solid #aaa}h1{font:700 clamp(1.7rem,4vw,3.2rem)/.9 var(--display);margin:.2rem 0}h1 i{font-weight:400}.title-line{display:flex;align-items:center;gap:1rem}.flags{display:flex;align-items:center;gap:.35rem;font-size:clamp(1.4rem,3vw,2.2rem);filter:saturate(.9)}.flag-arrow{font:700 .85rem var(--ui);color:var(--gold)}.eyebrow,.kind{font-size:.69rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin:0;color:var(--basil)}.header-actions{display:flex;gap:.5rem}.header-actions form{display:flex}
main{max-width:1280px;margin:auto;display:grid;grid-template-columns:230px 1fr;gap:clamp(1.5rem,5vw,6rem);padding:clamp(1rem,4vw,4rem)}.rail{display:flex;flex-direction:column;gap:.65rem;padding-top:2rem}.rail label{font-size:.72rem;font-weight:800;margin-top:.5rem}.study{max-width:820px;width:100%;margin:auto}.section-instruction{margin:0 0 .45rem;color:var(--tomato);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.section-switch{display:grid;grid-template-columns:1fr 1fr;margin:0 0 1.5rem;border-bottom:1px solid #aaa}.section-switch button{border:0;border-bottom:4px solid transparent;background:transparent;text-align:left;padding:.8rem .25rem;font-size:1.05rem}.section-switch button:last-child{text-align:right}.section-switch button[aria-pressed="true"]{border-bottom-color:var(--tomato);color:var(--basil)}.progress-copy{display:flex;justify-content:space-between;font-size:.75rem;font-weight:800}progress{width:100%;height:4px;border:0;margin:.75rem 0 1.5rem;accent-color:var(--basil)}
#card{min-height:420px;position:relative;background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");border:1px solid #bcb8aa;box-shadow:8px 10px 0 rgba(32,32,32,.11),0 24px 55px rgba(32,32,32,.13);overflow:hidden}#card:after{content:"";position:absolute;left:9%;right:9%;bottom:7%;height:1px;background:#d4d0c4;box-shadow:0 3px 0 white;transform:rotate(-1deg)}.card-image-wrap{width:min(100%,630px);aspect-ratio:3/2;margin-inline:auto;overflow:hidden;border:solid #bcb8aa;border-width:0 1px 1px;background:#dedbd0}.card-image-wrap[hidden]{display:none}.card-image-wrap img{display:block;width:100%;height:100%;object-fit:cover}.card-copy{position:relative;min-height:310px;padding:clamp(2rem,5vw,4rem)}.card-image-wrap[hidden]+.card-copy{min-height:420px;display:flex;flex-direction:column;justify-content:center}.seal{position:absolute;right:1.3rem;top:1.3rem;width:68px;height:68px;border:2px solid var(--tomato);border-radius:50%;color:var(--tomato);display:grid;place-content:center;text-align:center;transform:rotate(2deg)}.seal small{font-size:.48rem;letter-spacing:.12em}.seal strong{font:700 1.6rem var(--display)}.phrase{font:700 clamp(2.25rem,6vw,5.2rem)/.98 var(--display);letter-spacing:-.035em;max-width:13ch;margin:1.2rem 0}.translation{font:italic 500 clamp(1.3rem,3vw,2rem)/1.35 var(--display);max-width:36rem}.pronunciation{color:var(--basil);font-weight:700}.note{border-left:3px solid var(--tomato);padding-left:1rem;max-width:40rem;font-size:.88rem}#card[data-section="quick"] .card-copy{justify-content:center;padding-block:clamp(3.5rem,8vw,6rem)}#card[data-section="quick"] .phrase{max-width:16ch;margin-bottom:1.6rem}#card[data-section="quick"] .translation{margin:0;padding-top:1.25rem;border-top:2px solid var(--gold);font-style:normal;color:#42423f}
.card-actions,.marks,nav,.speed-controls{display:flex;gap:.65rem;flex-wrap:wrap}.card-actions{margin-top:1.6rem}.speed-controls{gap:0}.speed-controls button{border-radius:0}.speed-controls button+button{border-left:0}.speed-controls button[aria-pressed="true"]{background:var(--basil);border-color:var(--basil);color:white}.marks{margin:1rem 0}.marks button[aria-pressed="true"]{background:var(--basil);color:white}.marks #practice[aria-pressed="true"]{background:var(--tomato)}nav{justify-content:space-between;align-items:stretch;border-top:1px solid #aaa;padding-top:1rem}#previous{min-width:130px}#next{min-width:230px;font-size:1.05rem;padding:1rem 1.5rem;background:var(--ink);color:white}.answer-label{position:absolute}.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}
dialog{border:1px solid var(--ink);max-width:680px;width:calc(100% - 2rem);max-height:90vh;overflow:auto;background:var(--paper);padding:2rem}dialog::backdrop{background:rgba(19,24,22,.8)}dialog form{display:grid;gap:.8rem}dialog label{display:grid;gap:.3rem;font-size:.78rem;font-weight:800}dialog input,dialog textarea{font:1rem var(--ui);padding:.7rem;border:1px solid #777;min-height:44px}dialog textarea{min-height:76px}.save-pair{background:var(--basil);color:white}.custom-row,.emergency-item{border-top:1px solid #bbb;padding:1rem 0}.custom-row{display:grid;grid-template-columns:1fr auto;gap:.5rem}.custom-row strong,.emergency-item strong{font:700 1.35rem var(--display);display:block}body.focus-mode header,body.focus-mode .rail{display:none}body.focus-mode main{display:block}kbd{font:inherit;font-size:.65rem;border:1px solid currentColor;padding:.1rem .25rem}
@media(max-width:720px){header{align-items:center}.header-actions #fullscreen{display:none}main{display:block;padding:1rem 1rem 7rem}.rail{display:grid;grid-template-columns:1fr 1fr;padding:0;margin-bottom:1rem}.rail .eyebrow,.rail label{display:none}.rail select{width:100%}.rail button{display:none}.rail #configure{display:block}.section-instruction{font-size:.72rem}.section-switch{margin-bottom:1rem}.section-switch button{font-size:.9rem;line-height:1.2}#card{min-height:0}.card-image-wrap{width:min(100%,39vh);max-height:26vh}.card-copy{min-height:260px;padding:1.6rem 1.4rem 2rem}.card-image-wrap[hidden]+.card-copy{min-height:56vh}.seal{width:54px;height:54px}.phrase{font-size:clamp(2.1rem,10.5vw,4rem);padding-top:1.7rem}#card[data-section="quick"] .card-copy{min-height:42vh;padding-block:3.25rem 2.5rem}#card[data-section="quick"] .phrase{padding-top:0;margin-bottom:1.2rem}#card[data-section="quick"] .translation{padding-top:1rem}.card-actions button span{display:none}.speed-controls{flex-wrap:nowrap}.card-actions button,.marks button{scroll-margin-bottom:6rem}.marks button{flex:1}nav{position:fixed;z-index:4;left:0;right:0;bottom:0;padding:.75rem max(1rem,env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom));background:#eae8df}#previous{min-width:28%}#next{min-width:62%;height:56px}.progress-copy{font-size:.68rem}}
@media(prefers-reduced-motion:no-preference){#card{transition:opacity .18s ease,transform .18s ease}button{transition:background-color .15s,border-color .15s}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}