.study-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}
.study-navigation-hint{color:var(--dim);font:11px "DM Mono",monospace;white-space:nowrap;margin-bottom:8px}
.study-session{display:grid;grid-template-columns:minmax(0,680px) minmax(280px,360px);gap:18px;align-items:stretch;max-width:1060px}
.study-scroll{height:min(680px,calc(100vh - 285px));min-height:520px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:thin;scrollbar-color:var(--coral) transparent;border-radius:16px;outline:none}
.study-scroll:focus-visible{box-shadow:0 0 0 2px var(--coral);outline-offset:4px}
.study-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:none}
.study-card{min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel),rgba(21,24,36,.76));border-radius:16px;padding:30px;display:flex;flex-direction:column;transition:border-color .25s,opacity .25s,transform .25s;position:relative;overflow:hidden}
.study-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--coral),transparent);opacity:.9}
.study-card.is-active{border-color:rgba(255,118,93,.58);box-shadow:0 22px 60px rgba(0,0,0,.16)}
.study-card.is-complete{opacity:.72}
.study-card .study-number{font:11px "DM Mono";color:var(--coral);letter-spacing:.08em}
.study-card h3{font:600 clamp(46px,7vw,78px)/.95 "Space Grotesk";letter-spacing:-.08em;margin:clamp(100px,15vh,150px) 0 10px}
.study-card p{color:var(--muted);font-size:17px;margin:0}
.study-card .study-pronunciation{font:12px "DM Mono";color:var(--coral-soft);margin-top:10px}
.study-card .study-example{max-width:560px;color:var(--muted);font-size:14px;line-height:1.7;margin-top:30px}
.study-card .study-example b{color:var(--coral-soft);font-weight:500}
.study-card-bottom{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:26px;border-top:1px solid var(--line)}
.study-card-bottom .complete-button{margin-left:auto}
.study-speak-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,118,93,.4);border-radius:50%;color:var(--coral);background:rgba(255,118,93,.08)}
.study-speak-button:hover{background:rgba(255,118,93,.16)}
.study-comments{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:23px 20px;display:flex;flex-direction:column;min-height:520px;max-height:min(680px,calc(100vh - 285px))}
.study-comments-heading{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px}
.study-comments-heading .eyebrow{margin-bottom:7px}
.study-comments-heading h3{margin:0;font:600 18px "Space Grotesk";letter-spacing:-.04em}
.study-comments-heading h3>span:last-child{font:11px "DM Mono";color:var(--coral-soft);margin-left:3px}
.study-login-note{max-width:105px;text-align:right;color:var(--dim);font-size:10px;line-height:1.45}
.study-comment-list{display:grid;gap:12px;overflow:auto;min-height:0;padding:16px 2px}
.study-comment{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid rgba(236,239,247,.07)}
.study-comment:last-child{border-bottom:0}
.study-comment strong{font-size:12px}
.study-comment small{color:var(--dim);font-size:10px}
.study-comment p{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.55;word-break:break-word}
.study-comments-loading,.study-comments-empty{color:var(--dim);font-size:12px;padding:25px 0;text-align:center}
.study-comment-form{display:flex;gap:7px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.study-comment-form input{min-width:0;flex:1;background:#202330;border:1px solid transparent;border-radius:22px;padding:11px 14px;color:var(--ink);font:12px inherit}
.study-comment-form input:focus{outline:none;border-color:var(--coral)}
.study-comment-form button{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--coral);color:#201216;font-size:15px;font-weight:700}
@media(max-width:1080px){.study-session{grid-template-columns:minmax(0,1fr) 300px}.study-card h3{font-size:62px}}
@media(max-width:900px){.study-session{grid-template-columns:1fr}.study-scroll{height:620px;min-height:0}.study-comments{max-height:none;min-height:360px}.study-card h3{margin-top:100px}}
@media(max-width:760px){.study-heading{display:block}.study-navigation-hint{display:block;margin:12px 0 0}.study-scroll{height:calc(100vh - 300px);min-height:430px}.study-card{padding:22px}.study-card h3{font-size:54px;margin-top:90px}.study-card p{font-size:15px}.study-card .study-example{font-size:13px;margin-top:24px}.study-comments{border-radius:14px;padding:20px 16px;min-height:340px}.study-comment-form input{font-size:11px}}
html[data-theme="light"] .study-card{background:linear-gradient(145deg,#fff,#f3f5f9)}
html[data-theme="light"] .study-comment-form input{background:#edf0f6}