.learn-openings-callout{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding:21px 24px}
.learn-openings-callout strong{font:800 18px "Manrope",sans-serif;letter-spacing:-.035em}
.learn-openings-callout p{margin:5px 0 0;color:var(--muted);font-size:14px}
.opening-intro-strip{display:flex;align-items:center;gap:16px;margin:-4px 0 22px;padding:17px 20px}
.opening-intro-mark{width:48px;height:48px;display:grid;place-items:center;flex:none;border-radius:15px;background:var(--accent-soft);color:var(--accent-strong);font:28px/1 "Segoe UI Symbol",serif}
.opening-intro-strip strong{font-size:15px}.opening-intro-strip p{margin:3px 0 0;color:var(--muted);font-size:13px}.opening-count{margin-left:auto;white-space:nowrap;color:var(--quiet);font-size:12px;font-weight:800}
.opening-workspace{display:grid;grid-template-columns:minmax(225px,.29fr) minmax(0,1fr);align-items:start;gap:17px}
.opening-index{position:sticky;top:88px;padding:17px}.opening-index-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.opening-index-head .eyebrow{margin:0}.opening-index-head h2{margin:2px 0 0;font:800 18px "Manrope",sans-serif;letter-spacing:-.04em}.opening-index-head>span{display:grid;place-items:center;min-width:29px;height:29px;padding:0 7px;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:800}
.opening-list{display:grid;gap:7px;max-height:calc(100vh - 210px);overflow-y:auto;scrollbar-width:thin}.opening-choice{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--ink);text-align:left;transition:background .16s,border-color .16s,transform .16s}.opening-choice:hover{transform:translateX(2px);background:var(--surface-2)}.opening-choice.active{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));background:var(--accent-soft)}.opening-choice-mark{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:var(--surface-2);color:var(--accent-strong);font:800 13px "Manrope",sans-serif}.opening-choice.active .opening-choice-mark{background:var(--accent);color:#fff}.opening-choice-copy{min-width:0}.opening-choice-copy strong{display:block;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.opening-choice-copy small{display:block;margin-top:2px;color:var(--muted);font-size:11px}.opening-choice-rating{color:var(--quiet);font-size:10px;font-weight:800;white-space:nowrap}
.opening-content{display:grid;gap:15px;min-width:0}.opening-overview{padding:clamp(18px,2.5vw,27px)}.opening-overview-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.opening-overview-top .eyebrow{margin-bottom:5px}.opening-overview h2{margin:0;font:800 clamp(26px,3.4vw,38px)/1.1 "Manrope",sans-serif;letter-spacing:-.06em}.opening-overview>p{max-width:850px;margin:12px 0 14px;color:var(--muted);font-size:16px;line-height:1.7}.opening-level{padding:7px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent-strong);font-size:10px;font-weight:850;letter-spacing:.06em;white-space:nowrap}.opening-tags{display:flex;flex-wrap:wrap;gap:7px}.opening-tag{padding:5px 9px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:11px;font-weight:750}
.opening-overview-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.opening-explorer-link{color:var(--accent-strong);font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}.opening-explorer-link:hover{text-decoration:underline}
.opening-study-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);align-items:start;gap:15px}.opening-board-card{min-width:0;padding:clamp(14px,2vw,21px)}.opening-board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.opening-board-head .eyebrow{margin-bottom:2px}.opening-board-head h3,.opening-theory-card h3,.opening-plan-card h3,.opening-watch-card h3{margin:0;font:800 18px/1.25 "Manrope",sans-serif;letter-spacing:-.04em}.opening-variation-label{display:grid;gap:4px;color:var(--muted);font-size:11px;font-weight:750}.opening-variation-label select{min-width:130px;max-width:190px;padding:8px 28px 8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:750}
.opening-board-layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(200px,.94fr);align-items:start;gap:17px}.opening-board-label{display:flex;justify-content:space-between;gap:8px;width:min(100%,480px);margin:0 auto 9px;color:var(--muted);font-size:12px;font-weight:750}.opening-board-label span:first-child{color:var(--ink)}.opening-board-wrap{width:min(100%,480px)}.opening-board-tip{width:min(100%,480px);min-height:38px;margin:8px auto 0;color:var(--quiet);font-size:12px;line-height:1.5}.opening-line-side{min-width:0}.opening-note{min-height:98px;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:14px;background:var(--accent-soft);color:var(--ink);font-size:14px;line-height:1.65}.opening-moves-head{display:flex;justify-content:space-between;gap:9px;margin:15px 0 8px;font-size:12px}.opening-moves-head span{color:var(--muted)}.opening-move-list{display:flex;flex-wrap:wrap;gap:6px;max-height:128px;overflow:auto;padding:1px 1px 5px}.opening-move-chip{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:750}.opening-move-chip:hover,.opening-move-chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}.opening-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.opening-controls .btn{min-height:36px;padding:6px 9px;font-size:11px}.opening-feedback{min-height:54px;margin-top:10px;padding:10px 11px;border-radius:11px;background:var(--surface-2);color:var(--muted);font-size:12px;line-height:1.5}.opening-feedback.good{background:color-mix(in srgb,#2f9e65 10%,var(--surface-2));color:var(--ink)}.opening-feedback.bad{background:color-mix(in srgb,#c65c55 9%,var(--surface-2));color:var(--ink)}
.opening-theory{display:grid;gap:13px}.opening-theory-card,.opening-plan-card,.opening-watch-card{padding:18px}.opening-theory-card .eyebrow,.opening-plan-card .eyebrow,.opening-watch-card .eyebrow{margin-bottom:7px}.opening-theory-card>p{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.opening-structure{margin-top:15px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.opening-structure strong{font-size:12px}.opening-structure p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.6}.opening-plan-card h3{margin:5px 0 8px}.opening-plan-card h3:not(:first-of-type){margin-top:18px}.opening-plan-card ul,.opening-watch-card ul{display:grid;gap:7px;margin:0;padding-left:19px;color:var(--muted);font-size:13px;line-height:1.6}.opening-plan-card li::marker,.opening-watch-card li::marker{color:var(--accent)}.opening-watch-card{border-color:color-mix(in srgb,var(--accent) 24%,var(--line))}
@media(max-width:1120px){.opening-study-grid{grid-template-columns:1fr}.opening-board-layout{grid-template-columns:minmax(0,1fr) minmax(235px,.8fr)}.opening-board-wrap{width:min(100%,540px)}}
@media(max-width:900px){.opening-workspace{grid-template-columns:1fr}.opening-index{position:static}.opening-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:300px}.opening-study-grid{grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr)}.opening-board-layout{grid-template-columns:1fr}.opening-line-side{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:0 13px}.opening-note,.opening-moves-head,.opening-move-list,.opening-controls,.opening-feedback{grid-column:1/-1}.opening-board-wrap{width:min(100%,520px)}}
@media(max-width:650px){.learn-openings-callout{align-items:flex-start;flex-direction:column}.opening-intro-strip{align-items:flex-start}.opening-count{display:none}.opening-list{grid-template-columns:1fr 1fr}.opening-study-grid{grid-template-columns:1fr}.opening-board-layout{grid-template-columns:minmax(0,1fr) minmax(190px,.9fr)}.opening-board-wrap{width:100%}.opening-board-label,.opening-board-tip{font-size:11px}.opening-line-side{display:block}.opening-overview-top,.opening-overview-bottom{align-items:flex-start;flex-direction:column}.opening-level{white-space:normal}}
@media(max-width:460px){.opening-list{grid-template-columns:1fr}.opening-board-layout{grid-template-columns:1fr}.opening-board-card{padding:12px}.opening-note{min-height:0}.opening-move-list{max-height:115px}.opening-controls .btn{flex:1 1 auto}.opening-theory-card,.opening-plan-card,.opening-watch-card{padding:16px}}

/* Beginner-first opening study: fewer labels, clearer guidance, roomier type. */
.opening-intro-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.opening-advanced-toggle{white-space:nowrap;font-size:14px!important;min-height:42px!important;padding:8px 14px!important}
.opening-intro-strip strong{font-size:17px}.opening-intro-strip p{font-size:15px;line-height:1.55}
.opening-study-grid{grid-template-columns:minmax(0,1fr)}.opening-theory{display:none}.opening-study-grid.advanced-view{grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr)}.opening-study-grid.advanced-view .opening-theory{display:grid}
.opening-variation-label,.opening-moves-head,.opening-move-list{display:none}.advanced-view .opening-variation-label{display:grid}.advanced-view .opening-moves-head{display:flex}.advanced-view .opening-move-list{display:flex}
.opening-choice{padding:12px;gap:12px}.opening-choice-mark{width:40px;height:40px;font-size:23px}.opening-choice-copy strong{font-size:16px}.opening-choice-copy small{font-size:13px}.opening-choice-rating{font-size:12px}
.opening-overview>p{font-size:18px;line-height:1.7}.opening-level{font-size:12px}.opening-tag{font-size:13px;padding:6px 10px}.opening-explorer-link{font-size:14px}
.opening-board-head h3,.opening-theory-card h3,.opening-plan-card h3,.opening-watch-card h3{font-size:21px}.opening-board-label{font-size:15px}.opening-board-tip{font-size:15px;line-height:1.6}.opening-note{min-height:100px;padding:18px;font-size:17px;line-height:1.65}.opening-controls .btn{min-height:44px;padding:9px 13px;font-size:14px}.opening-feedback{min-height:56px;padding:13px 14px;font-size:14px;line-height:1.6}
.opening-theory-card>p{font-size:16px}.opening-structure strong{font-size:14px}.opening-structure p{font-size:15px}.opening-plan-card ul,.opening-watch-card ul{font-size:15px;line-height:1.7}
@media(max-width:1120px){.opening-study-grid.advanced-view{grid-template-columns:1fr}}
@media(max-width:900px){.opening-study-grid.advanced-view{grid-template-columns:1fr}}
@media(max-width:650px){.opening-intro-actions{width:100%;justify-content:space-between;margin:8px 0 0}.opening-intro-strip{flex-wrap:wrap}.opening-study-grid,.opening-study-grid.advanced-view{grid-template-columns:1fr}.opening-board-layout{grid-template-columns:1fr}.opening-board-wrap{width:min(100%,540px)}.opening-board-label,.opening-board-tip{font-size:14px}.opening-line-side{display:block}.opening-controls .btn{flex:1 1 auto}}