/* Water light and layered glass surfaces. */
:root{--glass:rgba(250,254,255,.85)}
.waterscape{background:linear-gradient(150deg,#eef9fb,#d2ecec 70%,#f2fcfc)}
.water{opacity:.98;filter:url(#waterflow) contrast(1.25) brightness(1.035) saturate(1.07)}
.texture-b{opacity:.25}
.veil{background:linear-gradient(#ffffffbe 0%,#ffffff30 25%,#ffffff08 65%,#ffffff66 100%)}
.caustic-shimmer{position:absolute;inset:-15%;pointer-events:none;background:radial-gradient(ellipse at 12% 65%,transparent 0 20%,#ffffffbd 20.3%,transparent 20.9% 22%,#ffffffb0 22.4%,transparent 23%),radial-gradient(ellipse at 80% 45%,transparent 0 27%,#ffffffc7 27.5%,transparent 28.1% 30%,#ffffff80 30.4%,transparent 31%),radial-gradient(ellipse at 53% 90%,transparent 0 18%,#ffffffa0 18.5%,transparent 19.1% 22%,#ffffffb8 22.3%,transparent 23%);filter:blur(1.5px);mix-blend-mode:screen;opacity:.48;transform:rotate(-7deg) scale(1.15,1.02);animation:caustics 21s ease-in-out infinite alternate}
@keyframes caustics{from{transform:rotate(-7deg) scale(1.15,1.02) translate(-2%,0)}to{transform:rotate(2deg) scale(1.22,1.08) translate(3%,2%);opacity:.62}}
body.still .caustic-shimmer{animation:none}
.practice.glass{background:linear-gradient(135deg,rgba(253,255,255,.94),rgba(246,253,254,.85));border:1px solid #ffffff;box-shadow:inset 0 1px 2px #fff,inset 0 0 0 3px #ffffff6b,0 18px 45px #254e5b1a,0 3px 6px #3e737812}
.glass{border:1px solid #ffffffde;box-shadow:inset 0 1px 3px #fff,inset 0 -1px 2px #acd3d83d,0 12px 38px #315e6e12}
.option,.primary,.secondary,.chip,.icon{position:relative;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.option,.secondary,.chip,.icon{background:linear-gradient(135deg,#ffffffdc 0%,#ffffff65 38%,#e0f1f280 70%,#ffffffc2 100%);border:1px solid #ffffffeb;box-shadow:inset 0 1px 2px #fff,inset 0 -1px 2px #8fbdc14a,0 5px 13px #426c7610;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.option::before,.primary::before,.secondary::before,.icon::before{content:'';position:absolute;z-index:-1;inset:1px;border-radius:inherit;background:linear-gradient(125deg,#ffffff64 0%,#ffffff12 22%,transparent 40% 56%,#ffffff21 70%,transparent 83%);pointer-events:none}
.option::after,.primary::after,.secondary::after{content:'';position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,#ffffffee,transparent);pointer-events:none}
.option{border-radius:20px;box-shadow:inset 0 1px 2px #fff,inset 0 -2px 4px #a2c2cb25,0 7px 17px #41657212}
.option.correct{background:linear-gradient(135deg,#eafffcd9,#c8edebc7 65%,#e5fff2d9);border-color:#79bec0;box-shadow:inset 0 1px 2px #fff,inset 0 0 0 2px #ffffff62,0 5px 20px #4ca9af20}
.option.wrong{background:linear-gradient(135deg,#fff5f5e6,#f1d8d9d9);border-color:#d7a8ad}
.primary{background:linear-gradient(145deg,#3e8590 0%,#245e6a 38%,#174d58 75%,#286e79 100%);border:1px solid #376d79;color:#fff;box-shadow:inset 0 1px 2px #cdf9fa96,inset 0 -2px 4px #103d4b66,0 6px 17px #1c596735;transition:transform .2s,box-shadow .2s;min-height:46px;font-weight:500}
.primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 2px #dcffffb3,inset 0 -2px 4px #103d4b66,0 9px 23px #1c596745}
.primary:active,.option:active,.secondary:active{transform:translateY(1px)}
.secondary{min-height:44px;color:#315e67}
.chip{min-height:36px;color:#4c737c}
.chip.active{background:linear-gradient(135deg,#f4ffffdd,#c8e5e8bb);border-color:#a6cdd0;color:#2b626d;box-shadow:inset 0 1px 2px #fff,0 3px 8px #52858b12}
.icon{width:44px;height:44px;color:#316672;border-color:#c6dfe2}
.icon.on{background:linear-gradient(130deg,#fff9,#cae9e8cc);box-shadow:inset 0 1px 2px #fff,0 0 14px #9bcdd728}
nav{align-items:center;gap:18px}
.nav{height:44px;padding:0 17px;border-radius:15px;transition:background .2s;letter-spacing:1px}
.nav.active{background:linear-gradient(135deg,#ffffffbb,#e7f6f775);border:1px solid #ffffffcb;box-shadow:inset 0 1px 2px white,0 4px 12px #3867750c}
.nav.active:after{left:25%;right:25%;bottom:3px;height:2px;border-radius:5px}
.practice .feedback{background:linear-gradient(135deg,#ffffffc7,#edf7f7b8);border:1px solid #ffffffec;box-shadow:inset 0 1px 2px #fff}
.bar{height:6px;background:#b5d5dd55;border:1px solid #ffffffb0;box-shadow:inset 0 1px 3px #456f7c19}
.bar i{background:linear-gradient(#bdf4ee,#60bdc7);box-shadow:0 0 10px #82c9d058;position:relative}
.entry,.stat{background:linear-gradient(140deg,#ffffffc9,#f0f9f991);border-color:#fffffff0;box-shadow:inset 0 1px 2px #fff,0 5px 15px #3867750a}
select{min-height:36px;background:linear-gradient(130deg,#ffffffe0,#e9f5f6bb);border-color:#c4dce0;color:#315e67}
header{background:#faffff65;box-shadow:inset 0 -1px 0 #ffffffbc}
@supports not (backdrop-filter:blur(12px)){.glass{background:#f5fbfbed}.option,.chip,.icon{background:#eef8f8e8}}
@media(max-width:850px){
 header{gap:18px}nav{gap:8px}.nav{padding:0 12px;font-size:13px}
 .layout{gap:18px}.practice{padding:26px;border-radius:28px}
 .aside{display:block;padding:20px 24px;border-radius:23px}.aside .eyebrow,.aside hr,.aside .note{display:none}.aside h2{font-size:15px;margin:0 0 18px!important}.aside .metric{display:inline-block;vertical-align:top;width:30%;margin:0 2% 12px 0}.aside .metric-head{font-size:11px}.aside .primary{width:auto;font-size:12px;margin-top:6px;padding:10px 15px;min-height:44px}
 .water{filter:contrast(1.23) brightness(1.04);animation-duration:25s}.texture-b{display:none}.water-light{opacity:.48;filter:blur(20px)}.caustic-shimmer{opacity:.5}
}
@media(max-width:500px){
 header{height:auto;min-height:118px;padding:13px 18px 12px;column-gap:14px;row-gap:10px}.brand{font-size:25px;gap:9px}.drop{display:block;width:19px;height:27px}.settings{gap:9px}.icon{width:44px;height:44px}
 nav{order:3;width:100%;height:44px;justify-content:space-between;gap:8px}.nav{flex:1;font-size:13px;padding:0 9px;letter-spacing:1px;border-radius:14px}
 main{margin-top:23px;padding:0 14px;min-height:0}.practice{padding:22px 18px;min-height:560px;border-radius:26px;background:linear-gradient(145deg,#fcfffff2,#f2fafae3)!important}
 h1{font-size:19px;letter-spacing:1px}.eyebrow{font-size:10px;letter-spacing:2px}.practice-top .tiny{font-size:12px;flex-shrink:0}
 .controls{gap:7px;margin-top:19px}.chip{padding:8px 12px;min-height:38px;font-size:12px}#category{font-size:12px;max-width:100%;padding:9px 12px;min-height:40px}
 .word-area{padding:27px 0 23px}.word{font-size:48px;margin:10px 0 18px}.question{font-size:14px;line-height:1.8}.question .tiny{display:inline-block;margin-top:5px;color:#5c7a83}
 .options{gap:12px}.option{min-height:76px;font-size:15px;line-height:1.65;padding:14px 10px;border-radius:18px}
 .feedback{padding:17px 16px;margin-top:20px;border-radius:19px;gap:10px;align-items:stretch}.feedback p{font-size:13px}.feedback .sub{font-size:12px;line-height:1.8}.feedback .primary{width:100%;min-height:48px;margin-top:10px;font-size:15px;border-radius:15px}.feedback .secondary{width:100%;margin-top:8px}
 .source{margin-top:19px;font-size:10px;line-height:1.8}.aside{padding:20px 18px}.aside .metric-head{font-size:10px;gap:4px}.aside .primary{width:100%}
 .panel{padding:24px 18px;border-radius:25px}.search{min-height:46px;font-size:14px}.entry{padding:18px;border-radius:19px}.entry-word{font-size:23px}.entry summary{align-items:start}.badge{white-space:nowrap}.entry .secondary{width:100%;margin-top:12px}
 .stats{gap:8px;margin:20px 0}.stat{padding:15px 11px;border-radius:18px}.stat strong{font-size:30px}.stat .tiny{font-size:10px;line-height:1.6;display:block}.progress-row{grid-template-columns:minmax(0,1fr) 75px 80px;padding:14px 12px;font-size:11px;gap:6px;line-height:1.8;overflow-wrap:anywhere}.sentence{font-size:20px;line-height:1.7}
 footer{padding:25px 20px 30px;gap:12px;font-size:11px;line-height:1.8}footer>span:last-child{width:100%}footer button{min-height:40px;padding:6px 9px;font-size:12px}
 #toast{max-width:calc(100vw - 32px);width:max-content;text-align:center;font-size:13px;line-height:1.6}
}
@media(max-width:360px){.brand{font-size:23px}.controls{gap:5px}.chip{font-size:11px;padding:8px 9px}.word{font-size:42px}.stat{padding:13px 8px}.progress-row{grid-template-columns:minmax(0,1fr) 62px 70px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.caustic-shimmer{animation:none!important}}
body.still .water{filter:contrast(1.25) brightness(1.035) saturate(1.07)}

/* Desktop panels share one responsive grid row and a quiet glass surface. */
:root{--study-surface:linear-gradient(135deg,rgba(253,255,255,.97),rgba(246,253,254,.93))}
.practice.glass,.aside.glass{background:var(--study-surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.aside-metrics .metric:last-child{margin-bottom:0}
@media(min-width:851px){
 header{padding-left:max(32px,calc((100vw - 1520px)/2));padding-right:max(32px,calc((100vw - 1520px)/2))}
 main{max-width:1520px;width:calc(100% - 64px);margin:clamp(24px,3.4vh,38px) auto 24px;padding:0;min-height:0}
 .layout{grid-template-columns:minmax(0,1fr) minmax(285px,25%);gap:clamp(22px,2vw,32px);align-items:stretch;min-height:clamp(620px,calc(100svh - 210px),840px)}
 .practice{min-width:0;min-height:0;display:flex;flex-direction:column;padding:clamp(28px,2.8vw,42px);border-radius:28px}
 .practice>.word-area{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:190px;padding:clamp(26px,3vh,44px) 0}
 .practice>.source{margin-top:22px}.practice>.feedback{flex-shrink:0}
 .aside{height:auto;min-width:0;min-height:0;display:flex;flex-direction:column;padding:clamp(26px,2.3vw,36px);border-radius:28px}
 .aside-head{flex-shrink:0}.aside-head h2{margin-top:14px!important;line-height:1.6}.aside-head hr{margin:18px 0 0}
 .aside-metrics{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,4vh,42px);padding:32px 0}
 .aside-metrics .metric{margin:0}.aside .metric-head{font-size:13px;gap:12px;margin-bottom:12px}
 .aside-footer{flex-shrink:0}.aside-footer .note{margin:0;font-size:12px;line-height:1.95}.aside-footer .primary{margin:20px 0 17px;width:100%;white-space:normal;min-height:48px;line-height:1.5;padding:13px 15px}
 .aside-footer>.note:last-child{margin:0}.aside .bar{height:7px}
 footer{max-width:1520px;width:calc(100% - 64px);margin:0 auto;padding:0 0 25px;font-size:12px}
}
@media(min-width:851px) and (max-width:1100px){
 .layout{grid-template-columns:minmax(0,1fr) 285px;gap:22px}
 .practice{padding:28px 26px}.aside{padding:28px 24px}
 header{gap:32px}.nav{padding:0 12px}
}
@media(max-width:850px){
 .aside-metrics{display:flex;gap:14px;align-items:start;margin-bottom:10px}
 .aside-metrics .metric{display:block;flex:1;width:auto;margin:0}
 .aside-footer .primary{margin-top:7px}.aside-head h2{margin-bottom:16px!important}
}
@media(max-width:500px){
 .practice.glass,.aside.glass{background:var(--study-surface)!important}
 .aside-metrics{gap:10px}.aside .metric-head{flex-wrap:wrap;row-gap:4px}
}