/* One quiet chapter illustration; functional icons share the same stroke style. */
.l1-reading:has(.early-study),.l1-reading:has(.l4-study){position:relative;background:linear-gradient(180deg,#f9fcff 0,#fff 150px)}
.l1-reading:has(.early-study)::before,.l1-reading:has(.l4-study)::before{display:none}
.l1-reading:has(.early-study)>h1,.l1-reading:has(.l4-study)>h1{padding-right:290px}
.l1-code>.l1-label::before,.l1-output>.l1-label::before,.early-explanation h2::before,.l4-explanation h2::before,.l1-quiz>.l1-label::before{content:'';display:inline-block;width:18px;height:18px;margin-right:7px;vertical-align:-3px;background:currentColor;mask:var(--panel-icon) center/contain no-repeat}
.l1-code>.l1-label{--panel-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18'/%3E%3C/svg%3E")}
.l1-output>.l1-label{--panel-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8m-4-4v4M6 7l3 3-3 3m6 0h5'/%3E%3C/svg%3E")}
.early-explanation h2,.l4-explanation h2{--panel-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 5C8 2 4 3 2 4v16c3-2 7-2 10 0 3-2 7-2 10 0V4c-3-1-7-2-10 1v15'/%3E%3C/svg%3E")}
.l1-quiz>.l1-label{--panel-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3 3 14l-1 7 7-1L20 9 14 3m-9 9 7 7M16 1l7 7'/%3E%3C/svg%3E")}
.early-observation{margin-top:10px;border:1px solid #dbe8f5;border-radius:12px;padding:10px 14px;background:#f6faff}
.early-observation .l1-explain{padding:0;margin:0;background:none}
.sidebar .product-name{margin-bottom:20px}
.sidebar nav{gap:3px}
.sidebar nav .course-nav{min-height:40px;padding:7px 10px;gap:10px}
.sidebar nav .course-nav>span{width:25px;height:25px;border:0;border-radius:7px;font-size:12px;font-weight:500;background:#eef3f9;color:#7b91aa}
.sidebar nav .course-nav>div{min-width:0}
.sidebar .course-nav b{font-size:15px;font-weight:500;line-height:1.5;color:#405b76}
.sidebar .course-nav.active b{font-weight:650;color:#236bb5}
.sidebar nav .course-nav.active{background:#eaf3ff;border-color:#d3e5fb}
.sidebar nav .nav-caption{margin-top:16px;margin-bottom:6px}
.l1-unit-grid a>img{width:112px;height:124px;right:7px;bottom:12px}
@media(max-width:999px){.l1-reading:has(.early-study)::before,.l1-reading:has(.l4-study)::before{display:none}.l1-reading:has(.early-study)>h1,.l1-reading:has(.l4-study)>h1{padding-right:70px}}
@media(max-width:700px){.sidebar nav .course-nav>span{display:flex;width:auto;height:auto;background:none;margin-right:2px}.sidebar .course-nav b{font-size:14px}.l1-unit-grid a>img{width:90px;height:100px}}

/* Let the chapter illustration read as a character, rather than a tiny icon. */
.l4-study,.early-study{position:relative}
.lesson-heading-art{position:absolute;object-fit:contain;pointer-events:none;user-select:none}
.lesson-heading-art[hidden]{display:none}
@media(min-width:1000px){
 .l1-hero{grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr)}
 .l1-hero>img{height:340px;max-height:340px}
 .l1-unit-grid a{padding-right:174px;min-height:185px}
 .l1-unit-grid a>img{width:164px;height:174px;right:4px;bottom:8px}
}
@media(min-width:1600px){
 .l1-hero>img{height:380px;max-height:380px}
 .l1-unit-grid a{padding-right:200px;min-height:205px}
 .l1-unit-grid a>img{width:190px;height:194px}
}


/* The action belongs to the example; the first view already contains its result. */
.study-playback{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 10px;min-height:48px}
.study-play-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.study-playback button{min-height:40px;padding:8px 14px;border-radius:10px;font-size:17px;line-height:1.3;font-weight:600;cursor:pointer}
.study-playback .study-play-primary{background:#286fc8;color:#fff;border:1px solid #286fc8;box-shadow:0 3px 0 #19559c}
.study-playback .study-play-primary:hover{background:#195eaf}
.study-playback .study-play-primary{min-width:140px}
.study-playback .study-play-primary:disabled{background:#edf3f9;border-color:#d5e1ed;color:#637c95;box-shadow:none;cursor:default}
.study-playback .study-play-secondary{background:#fff;color:#376486;border:1px solid #c7d9e8;box-shadow:none}
.study-playback button:focus-visible{outline:3px solid #e6aa27;outline-offset:3px}
.study-play-status{font-size:15px;color:#607c92;white-space:nowrap}
.study-control-row{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:10px 20px;align-items:center}
.study-control-row .study-playback{padding:0;margin:0;min-width:0}
.study-control-row .study-playback{justify-content:flex-start;gap:12px}
.study-control-row .study-play-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.study-control-row>.l1-switch{justify-content:flex-start;min-width:0}
.study-control-row>.l1-switch::before{content:'示例';font-size:15px;font-weight:600;color:#637c95;margin-right:2px}
.study-control-row>.reference-caption{grid-column:1/-1}
.early-toolbar:empty,.early-actions:empty{display:none}
.l4-toolbar:has(+.l4-study .study-playback){justify-content:flex-start;padding-bottom:8px;margin-bottom:10px}
.early-toolbar:has(+.early-study .study-playback){padding-bottom:8px;margin-bottom:10px}
.study-control-row+.l4-study .l4-current{font-size:15px;line-height:1.45;padding:5px 0;min-height:28px}
.l4-study.is-overview .l4-current{display:none}
.early-study .l1-gap,.early-study .l1-gap small{font-size:18px;line-height:1.4}
@media(max-width:999px){
 .study-control-row{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 .study-control-row>.l1-switch{order:-1}
 .study-playback{flex-wrap:wrap}
 .study-playback button{min-height:44px}
 .l4-toolbar{position:static}
}

/* The title stays left aligned; chapter artwork occupies its own right-hand space. */
.l1-reading.has-title-portrait>h1,.l1-reading.has-title-portrait>.l1-label,.l1-reading.has-title-portrait>.l1-lead{padding-left:0;padding-right:188px}
@media(min-width:700px){.l1-reading.has-title-portrait>.level-note{margin-right:188px}}
@media(min-width:1600px){
 .l1-reading.has-title-portrait>.level-note{margin-right:220px}
 .l1-reading.has-title-portrait>h1,.l1-reading.has-title-portrait>.l1-label,.l1-reading.has-title-portrait>.l1-lead{padding-right:220px}
}
@media(max-width:699px){
 .workspace main .l1-reading.has-title-portrait>h1{font-size:24px;line-height:1.4;text-wrap:balance}
 .l1-reading.has-title-portrait>h1,.l1-reading.has-title-portrait>.l1-label{padding-right:112px}
 .l1-reading.has-title-portrait>.l1-lead{padding-right:0}
 .study-control-row{align-items:flex-start}
 .study-control-row>.l1-switch{order:0}
}