:root{--bg-top:#e8f2f0;--bg-bottom:#f7f4ee;--ink:#1a2a28;--muted:#5a6e6a;--accent:#0d6e63;--accent-hover:#0a574e;--surface:#ffffffd1;--border:#c9d8d4;--target:#0b3d38;--shadow:0 10px 30px #1a2a2814;--radius:14px;--font-ui:"Segoe UI", "Helvetica Neue", sans-serif;--font-display:"Trebuchet MS", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--ink);font-family:var(--font-ui);background:radial-gradient(circle at top left, #0d6e631f, transparent 40%), linear-gradient(180deg, var(--bg-top), var(--bg-bottom));margin:0}.app{width:min(960px,100% - 1.5rem);margin:0 auto;padding:1.25rem 0 2.5rem}.app__header{margin-bottom:1.25rem}.app__title{font-family:var(--font-display);letter-spacing:-.03em;color:var(--accent);margin:0;font-size:clamp(2rem,6vw,2.75rem)}.app__tagline{color:var(--muted);margin:.35rem 0 0;font-size:.98rem}.filters{gap:.75rem;margin-bottom:1rem;display:grid}.selector{gap:.35rem;display:grid}.selector__label{color:var(--muted);font-size:.85rem;font-weight:650}.selector__control{border:1px solid var(--border);background:var(--surface);width:100%;min-height:2.75rem;color:var(--ink);font:inherit;border-radius:10px;padding:.55rem .8rem;font-size:1rem}.phrase-list{gap:.75rem;display:grid}.phrase-list__head{display:none}.phrase-row{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);gap:.55rem;padding:.95rem 1rem;display:grid}.phrase-row__num{display:none}.phrase-row__spanish,.phrase-row__target,.phrase-row__pronunciation{gap:.15rem;display:grid}.phrase-row__spanish:before,.phrase-row__target:before,.phrase-row__pronunciation:before{content:attr(data-label);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:.72rem;font-weight:700}.phrase-row__spanish{font-size:.98rem}.phrase-row__target{color:var(--target);font-size:1.28rem;font-weight:700;line-height:1.35}.phrase-row__pronunciation{color:var(--muted);font-size:.98rem;font-style:italic}.phrase-row__audio{margin-top:.15rem}.audio-button{background:var(--accent);color:#fff;width:100%;min-height:2.75rem;font:inherit;cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;gap:.45rem;padding:.55rem .9rem;font-weight:650;display:inline-flex}.audio-button:hover,.audio-button:focus-visible{background:var(--accent-hover);outline:none}.audio-button:active{transform:translateY(1px)}.empty-state{border-radius:var(--radius);background:var(--surface);border:1px dashed var(--border);color:var(--muted);margin:0;padding:1.25rem}@media (width>=760px){.filters{grid-template-columns:1fr 1fr;gap:1rem}.phrase-list{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);gap:0;overflow:hidden}.phrase-list__head,.phrase-row{box-shadow:none;background:0 0;border:none;border-radius:0;grid-template-columns:3rem minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1fr) 5.5rem;align-items:center;gap:.75rem;padding:.85rem 1rem;display:grid}.phrase-list__head{letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:#0d6e6314;font-size:.8rem;font-weight:700}.phrase-row+.phrase-row{border-top:1px solid var(--border)}.phrase-row__num{color:var(--muted);font-variant-numeric:tabular-nums;display:block}.phrase-row__spanish:before,.phrase-row__target:before,.phrase-row__pronunciation:before{content:none}.phrase-row__target{font-size:1.12rem}.phrase-row__audio{margin-top:0}.audio-button{border-radius:10px;width:100%;min-height:2.5rem}.audio-button__text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}}