:root{
  color-scheme:light;
  --ink:#183448;
  --navy:#153856;
  --teal:#0b6173;
  --blue:#28a8dc;
  --sky:#e9f8fd;
  --yellow:#ffd866;
  --orange:#f36d3d;
  --paper:#fff;
  --line:#d6e8ed;
  --muted:#5a7380;
  --shadow:0 22px 70px rgba(22,74,95,.13);
  font-family:ui-rounded,"Avenir Next","Nunito",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  font-size:17px;
  line-height:1.5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#effbfe 0,#fff 42%,#fffaf0 100%)}
body::before{content:"";position:absolute;inset:0 0 auto;height:620px;pointer-events:none;background:radial-gradient(circle at 91% 8%,rgba(255,216,102,.62) 0 70px,transparent 72px),radial-gradient(circle at 8% 20%,rgba(255,255,255,.9) 0 60px,transparent 62px);z-index:-1}
button,select,input,audio{font:inherit;color:inherit}
button,select,input{min-height:50px}
button{cursor:pointer}
button,select,input{touch-action:manipulation}
button:focus-visible,select:focus-visible,input:focus-visible,audio:focus-visible,a:focus-visible{outline:4px solid #ff9d32;outline-offset:3px}
.skip{position:absolute;top:-120px;left:1rem;background:#fff;padding:.85rem 1rem;border-radius:10px;z-index:30}.skip:focus{top:1rem}
.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}
.site-header{max-width:1120px;margin:0 auto;padding:1.15rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--navy);font-size:1.35rem;font-weight:950;letter-spacing:-.04em;text-decoration:none}
.brand small{font-size:.78rem;font-weight:650;letter-spacing:0}
.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:var(--teal);color:#fff;font-weight:950;box-shadow:inset 0 -4px rgba(0,0,0,.08)}
.audio-badge{display:inline-flex;align-items:center;gap:.42rem;padding:.42rem .74rem;background:var(--yellow);border:1px solid rgba(117,83,0,.09);border-radius:100px;color:#24404f;font-size:.72rem;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.audio-badge>span:first-child{color:var(--orange);font-size:.72rem}.badge-compact{display:none}
main{max-width:1120px;margin:0 auto;padding:0 2rem 2.5rem}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:3rem;align-items:center;padding:2.4rem 0 2.9rem}
.eyebrow,.section-kicker{margin:0 0 .45rem;color:var(--teal);font-size:.74rem;font-weight:950;letter-spacing:.11em}
h1{margin:0;font-size:clamp(2.55rem,6vw,5.25rem);line-height:.96;letter-spacing:-.058em;color:var(--navy)}
h1 span{color:var(--orange)}
.hero-lead{max-width:660px;margin:1.15rem 0 1.2rem;color:#466674;font-size:1.08rem}
.quick-steps{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.quick-steps li{display:flex;align-items:center;gap:.4rem;padding:.4rem .68rem .4rem .42rem;border:1px solid #cce3e9;border-radius:100px;background:rgba(255,255,255,.84);font-size:.84rem;font-weight:780;box-shadow:0 5px 18px rgba(23,74,93,.05)}
.quick-steps b{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--yellow);font-size:.78rem}
.hero-book{position:relative;justify-self:end;width:205px;transform:rotate(1.4deg)}
.hero-book::before{content:"";position:absolute;inset:8px -10px -12px 9px;background:var(--navy);border-radius:4px 14px 14px 4px;opacity:.14;z-index:-1}
.hero-book img{display:block;width:100%;height:auto;border-radius:3px 12px 12px 3px;box-shadow:0 24px 45px rgba(24,52,72,.2)}
.hero-book>span{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:max-content;max-width:230px;background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:0 9px 23px rgba(20,65,83,.12);border-radius:100px;padding:.38rem .68rem;font-size:.72rem;font-weight:850}
.player-card,.library{background:var(--paper);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.player-card{max-width:820px;margin:0 auto;padding:1.6rem}
.player-topline{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.player-topline h2,.library h2,.parent-strip h2{margin:0;color:var(--navy);font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.15;letter-spacing:-.025em}
.player-topline>span{padding:.38rem .65rem;background:var(--sky);border-radius:100px;color:var(--teal);font-size:.8rem;font-weight:900;letter-spacing:.05em}
.player-card>label{display:block;margin:0 0 .38rem;font-size:.82rem;font-weight:850}
select{width:100%;padding:.72rem 2.5rem .72rem .85rem;border:1.5px solid #8eb5c3;border-radius:13px;background:#fff;font-weight:720}
.select-help{font-size:.78rem;color:var(--muted);margin:.42rem .15rem 0}
.now-playing{position:relative;overflow:hidden;margin-top:1rem;padding:1.3rem;background:linear-gradient(145deg,#0d5f73,#123a5c);color:#fff;border-radius:22px;text-align:center;box-shadow:inset 0 1px rgba(255,255,255,.2)}
.now-playing::after{content:"";position:absolute;right:-42px;top:-42px;width:130px;height:130px;border:24px solid rgba(255,216,102,.12);border-radius:50%;pointer-events:none}
.word-meta{display:flex;justify-content:space-between;gap:1rem;color:#d4edf3;font-size:.74rem;font-weight:900;letter-spacing:.07em}
.word-meta span:last-child{white-space:nowrap}
#english{position:relative;margin:.65rem 0 0;font-size:clamp(2.75rem,9vw,5.4rem);font-weight:950;line-height:1.02;letter-spacing:.02em;overflow-wrap:anywhere}
#english.long-word{font-size:clamp(2.25rem,7.2vw,4.35rem);letter-spacing:-.015em;overflow-wrap:normal;word-break:keep-all}
.translation{margin:.15rem 0 1rem;color:#f0f8fa;font-size:1.25rem}
.audio-shell{position:relative;background:#fff;border-radius:16px;padding:.38rem}
.audio-shell audio{display:block;width:100%;min-height:48px}
.status{min-height:1.35rem;margin:.65rem 0 .12rem;color:#d8ebf1;font-size:.82rem}
.repeat-note{margin:.14rem 0 0;color:#ffe98e;font-size:.82rem;font-weight:720}
.navigation{display:flex;gap:.7rem;margin-top:1rem}
.navigation button{flex:1;min-height:52px;padding:.65rem .9rem;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-weight:850}
.navigation button:last-child{background:var(--yellow);border-color:var(--yellow);color:#243f4c}
.navigation button:hover:not(:disabled){border-color:var(--teal);background:#ecf8fb}
.navigation button:last-child:hover:not(:disabled){background:#ffe58c;border-color:#ffe58c}
.navigation button:disabled{opacity:.4;cursor:default}
.library{margin-top:2rem;padding:1.6rem}
.library-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1rem}
.library-heading>p{max-width:370px;margin:0;color:var(--muted);font-size:.9rem;text-align:right}
.search-box{display:flex;align-items:center;gap:.55rem;border:1.5px solid #8eb5c3;border-radius:14px;padding:0 .8rem;background:#fff}
.search-box>span:first-child{font-size:1.35rem;color:var(--teal);transform:rotate(-15deg)}
.search-box input{width:100%;border:0;outline:0;background:transparent;padding:.55rem 0}
.search-box:focus-within{outline:4px solid #ff9d32;outline-offset:3px}
.search-box input:focus-visible{outline:0}
.filters{display:flex;gap:.45rem;margin:1rem 0;overflow-x:auto;padding:.1rem .05rem .45rem;scrollbar-width:thin}
.filter{flex:0 0 auto;min-height:42px;padding:.46rem .75rem;border:1px solid var(--line);border-radius:100px;background:#fff;color:#466674;font-size:.8rem;font-weight:820}
.filter.active{background:var(--teal);border-color:var(--teal);color:#fff}
.word-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem}
.word-button{position:relative;min-width:0;min-height:68px;padding:.58rem .55rem;border:1px solid var(--line);border-radius:13px;background:#f8fcfd;text-align:left}
.word-button:hover{border-color:#75aebc;background:#edf9fb}
.word-button[aria-current="true"]{border:2px solid var(--orange);background:#fff5e9}
.word-button .en{display:block;overflow:hidden;color:var(--navy);font-size:.83rem;font-weight:950;letter-spacing:.015em;text-overflow:ellipsis;white-space:nowrap}
.word-button .it{display:block;overflow:hidden;margin-top:.08rem;color:var(--muted);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}
.word-button .num{position:absolute;right:.42rem;bottom:.3rem;color:#91a6ae;font-size:.62rem;font-weight:850}
.no-results{padding:1.2rem;margin:.5rem 0 0;border-radius:13px;background:var(--sky);text-align:center;color:var(--muted)}
.parent-strip{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;margin-top:2rem;padding:1.35rem 1.5rem;border-radius:22px;background:#fff6ca;border:1px solid #f0d879}
.parent-strip p:last-child{max-width:800px;margin:.55rem 0 0;color:#536b76;font-size:.9rem}
.parent-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;font-size:1.35rem;font-weight:950}
footer{display:flex;justify-content:space-between;gap:2rem;margin-top:1.5rem;padding:1.2rem .15rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:.76rem}
footer p{margin:0}footer p:first-child{max-width:650px}
.noscript{max-width:1060px;margin:1rem auto;padding:1rem;background:#fff3c9;border:1px solid #d7af1e;border-radius:12px}
@media(max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr) 150px;gap:1.5rem}.hero-book{width:145px}.word-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:620px){
  :root{font-size:16px}.site-header{padding:.85rem 1rem}.brand{font-size:1.12rem}.brand-mark{width:31px;height:31px}.brand small{font-size:.68rem}.audio-badge{font-size:.61rem;padding:.38rem .56rem}.badge-wide{display:none}.badge-compact{display:inline}
  main{padding:0 1rem 1.5rem}.hero{grid-template-columns:minmax(0,1fr) 92px;gap:.85rem;padding:1.15rem 0 1.55rem}.hero-book{width:87px;align-self:start}.hero-book>span{display:none}.eyebrow{font-size:.64rem;margin-bottom:.35rem}h1{font-size:clamp(2.15rem,11.5vw,3.25rem)}.hero-lead{grid-column:1/-1;margin:.85rem 0 .75rem;font-size:.94rem}.quick-steps{grid-column:1/-1;gap:.36rem}.quick-steps li{padding:.32rem .48rem .32rem .34rem;font-size:.75rem}.quick-steps b{width:1.35rem;height:1.35rem;font-size:.69rem}
  .player-card,.library{border-radius:20px;padding:1rem}.player-card{scroll-margin-top:.5rem}.now-playing{padding:1rem .72rem}.navigation{gap:.45rem}.navigation button{padding:.6rem .45rem;font-size:.86rem}.word-meta{font-size:.68rem}.library-heading{display:block}.library-heading>p{margin-top:.4rem;text-align:left;font-size:.82rem}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.46rem}.word-button{min-height:62px}.parent-strip{grid-template-columns:36px 1fr;gap:.8rem;padding:1rem}.parent-icon{width:36px;height:36px;font-size:1rem}footer{display:block}footer p+ p{margin-top:.65rem}
}
@media(prefers-reduced-motion:no-preference){button,.hero-book{transition:transform .15s,background .15s,border-color .15s}.word-button:active,.navigation button:active:not(:disabled){transform:translateY(1px)}}