:root{
  /* Keep the selected site theme; opt out of browser auto-darkening. */
  color-scheme:only light;
  /* Forced-colors/high-contrast adjustment is separate from auto-darkening. */
  forced-color-adjust:none;
  --hanja-font:"Noto Sans KR",Study Hanja Sans,Study Hanja Extended,"Tonghanja Selected Components","Tonghanja Selected Components Rare",sans-serif;
  font-synthesis:none;
  /* 본문 설명 이미지 높이: 이 값 하나로 전체 크기를 조절합니다. */
  --hanja-img-height: 160px;
  --notebook-footer-height:78px;
  /* Shared paper, ink and traffic-light palette for every learning surface. */
  --brand:#315F49;--brand-hover:#284E3C;--accent-ink:var(--brand);--stage-green:#3E7353;--stage-amber:#9A7600;--stage-red:#B54848;
  --ivory:#F8F7F2;
  /* Ivory canvas with white cards and controls inside the side panels. */
  --canvas:#FFFFFF;--surface:var(--ivory);--header-bg:#FFFFFF;--header-line:#E5E7EB;--panel:var(--ivory);
  --panel-surface:#FFFFFF;--panel-rule:#E5E7EB;
  --component-paper:var(--ivory);--component-selected-paper:#FFFFFF;--component-selected-ink:#315F49;--component-rule:#E5E7EB;
  --ink:#333831;--hanja-ink:#1C1917;--muted:#57534E;--vocabulary-muted:#787878;--inactive:#8A8F83;
  --line:#D7DDD3;--toc-line:#A6B7A2;--scrollbar:#B9C4B4;--soft:#E7EFE5;--reading-hover:var(--panel);
  --on-accent:var(--ivory);--error-bg:#FAF0EE;--error-text:#93434B;--notice-bg:var(--ivory);
  /* Keep persisted blue/green/red stage keys compatible with existing study data. */
  --bookmark-color:var(--stage-green);--review-blue:var(--stage-green);--review-green:var(--stage-amber);--review-red:var(--stage-red);
  --hun-native:var(--stage-green);--hun-usage:var(--stage-amber);--hun-other:var(--stage-red);
  --green:var(--stage-green);--saved-green:var(--stage-green);--blue:var(--stage-green);--button-green:var(--brand);--card-flash:var(--soft);--header-height:65px;--notebook-width:320px
}
*{box-sizing:border-box}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:calc(var(--header-height) + 28px)}
/* Preserve source media colors; the site's explicit glyph filters still apply. */
img,video,.stroke-img,.original-stroke-svg{color-scheme:only light;forced-color-adjust:none}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--hanja-font);font-size:1rem;line-height:1.8;-webkit-text-size-adjust:100%}
button,input{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}
/* Native focus-visible works even if the optional input-modality helper fails. */
:focus:not(:focus-visible){outline:none!important}
:is(button,a,input,textarea,select,summary,[role="button"],[tabindex],[contenteditable]):is(:focus,:focus-visible){box-shadow:none!important}
:where(button,a[href],input,textarea,select,summary,[role="button"],[tabindex],[contenteditable="true"]):focus-visible{outline:2px solid var(--green)!important;outline-offset:2px}
.tracing-canvas:focus-visible{outline-offset:-3px}
button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}
.icon{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* Self-hosted Noto Sans KR Regular, shared by lesson titles and all Hanja surfaces. */
.hanja{font-family:var(--hanja-font);font-weight:400}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.unicode-glyph{font-family:var(--hanja-font);font-size:1em;line-height:inherit;color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.toc-copyright{margin:7px 0 0;padding:16px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.8125rem;line-height:1.6;text-align:left}
@media(max-width:340px){.toc-copyright{font-size:.75rem}}
/* Cloud actions now live only in the header menu. */
.cloud-controls{min-width:0;font-size:.875rem;line-height:1.6}
.cloud-google-mark{display:block;width:18px;height:18px;flex:none;object-fit:contain}
.cloud-login-hint{display:inline-block;width:auto;max-width:100%;min-height:32px;margin:0 12px 4px;padding:3px 0;font-size:11px;line-height:18px;text-align:left;color:var(--green);word-break:keep-all;cursor:pointer;-webkit-text-stroke:0 currentColor;transition:-webkit-text-stroke-width .15s ease}
.cloud-login-hint span{text-decoration:underline dotted;text-decoration-thickness:1px;text-decoration-color:var(--inactive);text-underline-offset:2px}

.cloud-cooldown{margin:2px 0 6px;font-size:11px;line-height:18px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
#cloud-cooldown-seconds{display:inline-block;width:2ch;text-align:right}
.cloud-message,.cloud-error{padding:10px 12px;margin:0 0 8px;border-radius:7px;background:var(--surface);border:1px solid var(--line);text-align:left;overflow-wrap:anywhere;box-shadow:0 3px 16px #1C19170C}.cloud-error{background:var(--error-bg);color:var(--error-text)}
.cloud-dialog{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--canvas);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;font-size:1rem;line-height:1.65;box-shadow:0 20px 80px #1C191726}.cloud-dialog::backdrop{background:#1C191759}
.cloud-dialog h2{margin:0;font-size:1.25rem;color:var(--green)}.cloud-dialog p{margin:14px 0}.cloud-dialog .cloud-confirm-email{font-size:.875rem;color:var(--muted);overflow-wrap:anywhere}.cloud-dialog .cloud-message,.cloud-dialog .cloud-error{font-size:.875rem;box-shadow:none}
#cloud-confirm-text{word-break:keep-all;overflow-wrap:break-word}
.cloud-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.cloud-dialog-actions button{min-height:44px;padding:8px 15px;border-radius:6px;font-size:.9375rem}.cloud-cancel{border:1px solid var(--line)}.cloud-primary{background:var(--button-green);color:var(--on-accent)}
.cloud-help-dialog{width:min(390px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--canvas);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 10px 25px #1C19171F;font-size:13px;line-height:1.6}
.cloud-help-dialog::backdrop{background:#1C191766;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cloud-help-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.cloud-help-heading h2{margin:0;font-size:16px;font-weight:700;line-height:1.6;color:var(--green);word-break:keep-all}
.cloud-help-close{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin:-2px -4px 0 0;padding:0;border-radius:4px;color:var(--muted);font-size:16px;line-height:1}.cloud-help-close:hover{color:var(--ink);background:var(--soft)}
.cloud-help-dialog ul{margin:16px 0 20px;padding-left:17px}.cloud-help-dialog li{margin-bottom:12px;padding-left:1px;word-break:keep-all;overflow-wrap:anywhere}.cloud-help-dialog li::marker{content:"• ";font-weight:700}.cloud-help-dialog li:last-child{margin-bottom:0}.cloud-help-dialog strong{font-weight:700}.cloud-help-subtitle{display:block}.cloud-help-dialog li p{margin:4px 0 0;line-height:1.6}
.cloud-help-confirm{display:block;width:100%;min-height:40px;padding:8px 12px;border-radius:8px;background:var(--button-green);color:var(--on-accent);font-size:14px;font-weight:600;line-height:1.6}
@media(max-width:380px){.cloud-dialog{padding:18px}}
.skip-link{position:fixed;top:-100px;left:16px;z-index:50;padding:8px 16px;background:var(--surface);color:var(--green)}.skip-link:focus{top:8px}
.site-header{position:sticky;top:0;z-index:20;background:var(--header-bg);border-bottom:1px solid var(--header-line);backdrop-filter:none;-webkit-backdrop-filter:none}
.header-inner{max-width:1100px;min-height:65px;margin:auto;padding:10px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap;color:var(--ink);font-size:1.125rem;font-weight:700;line-height:1;letter-spacing:-.04em}
/* Center the pinned font's Hangul ink, whose midpoint sits .0615em below its line box. */
.brand>span{display:block;transform:translateY(-.0615em)}
/* Keep the supplied jade artwork and transparent rounded corners intact. */
.brand-mark{display:block;width:32px;height:32px;flex-shrink:0;object-fit:contain}
/* Paint outside the existing logo box without moving the header or its title. */
.site-header .brand{position:relative;isolation:isolate;border-radius:8px}
.site-header .brand::before{content:"";position:absolute;inset:-6px -8px;border-radius:8px;background:transparent;pointer-events:none;z-index:-1}
.site-header .brand:not([aria-disabled="true"]):not([data-touch-input]):active::before,.site-header .brand:not([aria-disabled="true"]).is-touch-pressed::before{background:var(--control-feedback)}
@media(max-width:900px){.site-header .brand{transform:translateY(1px)}}
@media(max-width:620px){.brand{gap:6px}.brand-mark{width:28px;height:28px}}
.header-actions{display:flex;flex-shrink:0;align-items:center;align-self:stretch;gap:8px;max-width:100%;margin-left:auto;margin-block:calc(-1 * var(--header-block-padding))}.grade-picker{position:relative;display:flex;align-items:center;align-self:stretch}
.header-actions>button,.header-actions>.grade-picker>button,.header-actions>.more-picker>button{height:44px;min-height:44px}
/* Neutral by default; selected mobile panels receive the open-state style below. */
.header-actions :is(.icon-button,.grade-trigger,.saved-toggle){border:0;background:transparent;box-shadow:none;outline:none}
.header-actions :is(.icon-button,.grade-trigger,.saved-toggle):not(:disabled),.site-header .brand{cursor:pointer}
#search-toggle>.icon{transform:translateX(-1px)}
@media(min-width:901px){.header-actions>#search-toggle,.header-actions>#grade-picker{position:relative;left:-2px}}
@media(max-width:900px){.header-actions>#toc-toggle,.header-actions>#search-toggle,.header-actions>#grade-picker{position:relative;left:-4px}}
.grade-trigger{display:flex;align-items:center;justify-content:center;padding:9px 10px;min-height:44px;white-space:nowrap;font-size:.9375rem;line-height:1.4;border-radius:6px}
@media(hover:hover) and (pointer:fine){
  .icon-button:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{background:var(--soft)}
  .header-actions .icon-button:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{background:transparent}
}
.header-actions :is(.grade-menu,.more-menu) button:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active,
.header-actions :is(.grade-menu,.more-menu) button:not(:disabled):not([aria-disabled="true"]).is-touch-pressed,
.search-panel button:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active,
.search-panel button:not(:disabled):not([aria-disabled="true"]).is-touch-pressed{background:var(--soft)}
.header-actions button[data-touch-input],.search-panel button[data-touch-input]{transition:none}
.grade-menu{position:absolute;right:0;top:100%;width:156px;max-height:calc(100dvh - var(--header-height) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--header-bg);box-shadow:0 9px 30px #1C191713}
.grade-menu button{width:100%;min-height:44px;padding:8px 13px;display:flex;align-items:center;justify-content:space-between;text-align:left;border-radius:5px;font-size:.9375rem}
.grade-menu button:hover,.grade-menu button:focus-visible{background:var(--soft)}.grade-menu button[aria-checked="true"]{color:var(--green);font-weight:700}
.grade-menu button .icon{width:16px;height:16px;visibility:hidden}.grade-menu button[aria-checked="true"] .icon{visibility:visible}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;flex-shrink:0;border-radius:6px}
.saved-toggle{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:7px 10px;border-radius:6px;font-size:.9375rem;font-variant-numeric:tabular-nums}

.search-form{max-width:740px;margin:auto;display:flex;align-items:center;gap:12px}.search-form>.icon{color:var(--muted);width:18px;height:18px}
.search-form input{width:100%;min-width:0;min-height:44px;border:0;background:transparent;color:var(--ink);font-size:1rem;border-radius:2px}.search-form input::placeholder{color:var(--muted)}
.search-form:focus-within>.icon{color:var(--green)}.search-panel button:focus-visible,.search-panel input:focus-visible{outline-color:var(--green)}
.reader{max-width:788px;margin:0 auto;padding:47px 24px 32px;min-height:65vh}
.reader-description{font-size:.875rem;color:var(--muted);margin:5px 0 0}.storage-notice{font-size:.875rem;color:var(--stage-amber)}
.entry{margin-top:58px;content-visibility:auto;contain-intrinsic-size:auto 340px;scroll-margin-top:16px}
:root:not([data-theme="dark"]) .hanja-entry{--ink:#000000;--hanja-ink:#000000;color:var(--ink)}
.entry-heading{display:flex;align-items:baseline;gap:7px;position:relative;padding-right:48px;margin-bottom:15px}.entry-heading h2{margin:0;color:var(--ink);font-size:2.375rem;line-height:1.5;letter-spacing:0}.entry-grade{font-size:.8125rem;color:var(--muted);white-space:nowrap}
.entry-body{font-size:1.0625rem;line-height:1.95;overflow-wrap:anywhere}.entry-body p{margin:0 0 12px;white-space:pre-line}.entry-body .entry-question{color:var(--ink);margin-bottom:14px}
.entry-body .entry-reading{font-size:1.1875rem;margin-top:20px;margin-bottom:9px;line-height:1.8}.reading-sound{color:var(--blue)}.entry-body .entry-note{font-size:.9375rem;color:var(--muted);margin-top:16px}
.entry-original,.entry-original p{white-space:normal}.entry-original{color:var(--ink);line-height:1.9}.entry-original p:empty{display:none}
/* Keep a small vertical gutter when large lesson images wrap onto another row. */
.entry-original .lesson-image{display:inline-block;max-width:100%;height:auto;margin-block:2px;vertical-align:middle;object-fit:contain}.entry-original .lesson-glyph{display:inline-block;max-width:none;vertical-align:-.12em;object-fit:contain}
.entry-original .lesson-illustration{height:var(--hanja-img-height);width:auto}
/* _b photos keep a one-CSS-pixel border at desktop and mobile display sizes. */
.entry-original .lesson-illustration[data-image-border="true"]{border:1px solid #DDDDDD}
.lesson-image-gallery,.lesson-image-item,.lesson-image-space{display:contents}
/* Center the hint in the reader's right padding, alongside the photo row. */
.lesson-image-more{display:none;position:absolute;left:100%;top:50%;transform:translateY(-50%);width:var(--lesson-image-gutter,22px);height:28px;padding:6px 0;color:var(--muted);line-height:1;border-radius:3px}
.lesson-image-more svg{display:block;width:16px;height:16px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lesson-image-more:hover{color:var(--saved-green)}
.lesson-image-more:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.lesson-image-strip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:900px){
  .entry-original .lesson-image-gallery{display:block;position:relative;max-width:100%;min-width:0;margin-block:2px}
  .lesson-image-gallery.has-overflow>.lesson-image-more{display:block}
  .entry-original .lesson-image-strip{display:flex;flex-wrap:nowrap;gap:8px;height:var(--lesson-image-height,var(--hanja-img-height));max-width:100%;min-width:0;margin:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
  .lesson-image-strip::-webkit-scrollbar{display:none}
  .lesson-image-strip>.lesson-image-space{display:none}
  .lesson-image-strip>.lesson-image-item{display:block;flex:0 0 auto;scroll-snap-align:start}
  .lesson-image-item>a{display:block}
  .entry-original .lesson-image-strip .lesson-illustration{display:block;height:var(--lesson-image-height,var(--hanja-img-height));max-width:none;margin:0}
  .lesson-image-strip a:focus-visible{outline-offset:-3px}
}
.entry-original .lesson-question-glyph{vertical-align:-.30em}
.entry-original .lesson-illustration,.entry-original .lesson-video{cursor:zoom-in}
.entry-original [data-lightbox-ready]:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* A native top-layer dialog keeps the textbook and its scroll state intact. */
.media-lightbox{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#1C1917F5;color:var(--on-accent);overflow:hidden;overscroll-behavior:contain}
.media-lightbox:not([open]){display:none}.media-lightbox[open]{display:flex;flex-direction:column}
.media-lightbox::backdrop{background:#1C1917}
.lightbox-toolbar{display:flex;align-items:center;gap:4px;flex:none;padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));flex-wrap:wrap}
.lightbox-toolbar button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border-radius:7px;color:var(--on-accent);line-height:1.3;font-size:14px}
.lightbox-toolbar button:hover{background:#ffffff1c}.lightbox-toolbar button:focus-visible{outline:2px solid var(--on-accent);outline-offset:-2px}.lightbox-toolbar button:disabled{opacity:.35}
.lightbox-toolbar .lightbox-fit{min-width:52px}.lightbox-toolbar .lightbox-close{margin-left:auto}
.lightbox-stage{position:relative;flex:1;min-height:0;min-width:0;margin:0 max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.lightbox-media{position:absolute;left:50%;top:50%;max-width:none;max-height:none;object-fit:contain;transform-origin:center;transform:translate(-50%,-50%);will-change:transform;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;cursor:zoom-in}
.lightbox-stage.is-zoomed .lightbox-media{cursor:grab}.lightbox-stage.is-zoomed .lightbox-media:active{cursor:grabbing}
.lightbox-status{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#E8E6DC;font-size:1rem;pointer-events:none;z-index:1}
.lesson-video-frame{position:relative;display:inline-block;max-width:100%;margin-block:2px;vertical-align:middle;line-height:0;background:var(--surface)}
.entry-original .lesson-video{display:block;max-width:100%;width:100%;height:auto;object-fit:contain}
.lesson-video-sound,.lesson-video-start{position:absolute;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border-radius:50%;background:#1C1917C7;color:var(--on-accent);line-height:1}
.lesson-video-sound{right:5px;bottom:5px}.lesson-video-sound .icon{width:19px;height:19px}
.lesson-video-start{left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 12px);height:auto;min-height:40px;padding:8px 12px;gap:5px;border-radius:20px;font-size:12px;line-height:1.4}.lesson-video-start .icon{width:18px;height:18px;fill:currentColor}
.lesson-video-sound:hover,.lesson-video-start:hover{background:#1C1917E8}.lesson-video-sound:focus-visible,.lesson-video-start:focus-visible{outline:2px solid var(--on-accent);outline-offset:2px}
.entry-original a:hover{text-decoration:underline;text-underline-offset:3px}.entry-original a:has(img):hover{text-decoration:none}
.content-edited-copy,.content-additional,.content-supplement{white-space:pre-wrap}.content-additional,.content-supplement{display:block;font-size:1rem;line-height:inherit;margin:0}.content-vocabulary-source{font-size:1rem;white-space:pre-wrap}.content-vocabulary-source:empty{display:none}.content-additional:empty,.content-supplement:empty{display:none}.content-edited-copy a,.content-additional a,.content-supplement a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Source paragraphs and line breaks already separate readings, vocabulary,
   and supplementary notes. Keep the vocabulary inline to avoid a blank line. */
.lesson-vocabulary{--muted:var(--vocabulary-muted);--vocabulary-chip:var(--panel);--vocabulary-chip-hover:var(--soft);--vocabulary-link-rule:#C4C4C4;--vocabulary-link-rule-hover:#999999;display:inline;margin:0;color:var(--muted);font-size:1rem;font-weight:400;line-height:inherit;white-space:normal;-webkit-tap-highlight-color:transparent}
.lesson-vocabulary.vocabulary-raw{white-space:pre-wrap}
.lesson-vocabulary .vocabulary-item{display:inline-block;max-width:100%;margin-inline-end:8px;vertical-align:baseline}
.lesson-vocabulary .vocabulary-item.is-open{display:block;margin-block:6px;margin-inline-end:0;overflow-wrap:anywhere}
.lesson-vocabulary .vocabulary-expansion,.lesson-vocabulary .vocabulary-definition{display:inline}
.lesson-vocabulary .vocabulary-separator{white-space:pre-wrap}
.lesson-vocabulary .vocabulary-word{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font:inherit;line-height:inherit;text-align:inherit;vertical-align:baseline;cursor:default}
.lesson-vocabulary .vocabulary-definition{color:var(--muted);margin-inline-start:0}
.lesson-vocabulary .vocabulary-head{color:var(--ink);font-weight:400}
.lesson-vocabulary [data-definition-color="black"]{color:var(--ink)}
.lesson-vocabulary [data-definition-color="gray"]{color:var(--vocabulary-muted)}
.lesson-vocabulary .vocabulary-item:not(.is-open),.lesson-vocabulary .vocabulary-item:not(.is-open) .vocabulary-word .vocabulary-head{color:var(--muted)}
/* Hanja readings and links share the text flow. */
.lesson-vocabulary .vocabulary-badge{display:inline;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font-size:.875rem;line-height:1.45;vertical-align:baseline;white-space:nowrap;cursor:default}
.lesson-vocabulary .vocabulary-badge.vocabulary-out-of-grade{color:var(--muted)}
.lesson-vocabulary .vocabulary-badge.vocabulary-head[data-hun-kind="native"] .vocabulary-badge-hun{color:var(--hun-native)}
.lesson-vocabulary .vocabulary-badge.vocabulary-head[data-hun-kind="usage"] .vocabulary-badge-hun{color:var(--hun-usage)}
.lesson-vocabulary .vocabulary-badge.vocabulary-head[data-hun-kind="other"] .vocabulary-badge-hun{color:var(--hun-other)}
.lesson-vocabulary .vocabulary-toggle{cursor:pointer;display:inline-block;max-width:100%;min-height:0;padding:0 4px 1px;border:1px solid var(--line);border-radius:3px;background:var(--vocabulary-chip);font:inherit;line-height:1.5;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
.lesson-vocabulary .vocabulary-toggle:focus-visible,.lesson-vocabulary .vocabulary-link:focus-visible{outline:1px solid var(--green);outline-offset:2px}
.lesson-vocabulary .vocabulary-link{cursor:pointer;background:transparent;text-decoration:none}
.lesson-vocabulary .vocabulary-link:hover{text-decoration:none}
.lesson-vocabulary .vocabulary-toggle:active{background:transparent}
.lesson-vocabulary .vocabulary-link:focus-visible,.lesson-vocabulary .vocabulary-link:active{--vocabulary-dot-color:var(--vocabulary-link-rule-hover)}
@media(hover:hover) and (pointer:fine){
  .lesson-vocabulary .vocabulary-toggle:hover{background:transparent}
  .lesson-vocabulary .vocabulary-link:hover{--vocabulary-dot-color:var(--vocabulary-link-rule-hover)}
}
/* Shared vocabulary format: inline text, with a break only before an opened
   extra example. The remaining closed words follow it in normal text flow. */
.lesson-vocabulary.vocabulary-flow{--vocabulary-link-rule:#787878;--vocabulary-link-rule-hover:#787878}
.lesson-vocabulary.vocabulary-flow .vocabulary-item{display:inline;margin:0;overflow-wrap:anywhere}
.lesson-vocabulary.vocabulary-flow .vocabulary-item:has(+ .vocabulary-separator){margin-inline-end:.25em}
.lesson-vocabulary.vocabulary-flow .vocabulary-separator{white-space:normal}
.lesson-vocabulary.vocabulary-flow .vocabulary-badge{font-size:inherit;line-height:inherit}
.lesson-vocabulary.vocabulary-flow .vocabulary-link{--vocabulary-link-rule:#B8B8B8;--vocabulary-link-rule-hover:#B8B8B8;padding-bottom:2px}
/* Keep the whole Hanja/reading link clickable without a decorative rule. */
.lesson-vocabulary.vocabulary-flow .vocabulary-badge.vocabulary-link{padding-bottom:0;background-image:none}
.lesson-vocabulary.vocabulary-flow .vocabulary-link .vocabulary-badge-hanja{background-image:none}
.lesson-vocabulary.vocabulary-flow .vocabulary-toggle{padding:0 3px 1px;border:1px solid var(--line);border-radius:3px;text-decoration:none}
.entry-original table{max-width:100%;border-collapse:collapse}.entry-original td,.entry-original th{padding:3px}
.source-figure{font-size:.8125rem;color:var(--muted);text-decoration:underline;text-decoration-color:var(--toc-line);text-underline-offset:3px;white-space:nowrap}
.entry-links{display:flex;gap:15px;flex-wrap:wrap;margin-top:14px;font-size:.8125rem;color:var(--muted)}.entry-links a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.entry-links .learned{color:var(--green)}

.empty-state{padding:66px 0 80px}.empty-state h2{font-size:1.125rem;font-weight:500;margin:0 0 8px}.empty-state p{font-size:.9375rem;color:var(--muted);margin:0 0 20px}.empty-state button{font-size:.9375rem;color:var(--green);padding:8px 0;min-height:44px;text-decoration:underline;text-underline-offset:5px}
.loading-message{padding:50px 0;color:var(--muted)}.site-footer{max-width:788px;padding:22px 24px 38px;margin:auto;display:flex;gap:18px;flex-wrap:wrap;font-size:.8125rem;color:var(--muted)}.site-footer a:hover{color:var(--green)}.site-footer span{margin-left:auto}
.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,12px);padding:9px 17px;max-width:calc(100% - 32px);border-radius:7px;background:var(--button-green);color:var(--on-accent);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;font-size:.875rem;z-index:40;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.noscript{padding:24px;text-align:center}
@media(max-width:620px){.header-inner{padding:8px 18px;gap:10px}.header-actions{gap:3px}.reader{padding:32px 24px 24px}.entry{margin-top:45px}.entry-heading{margin-bottom:12px}.entry-heading h2{font-size:2.125rem}.entry-body{font-size:1rem;line-height:1.9}.entry-body .entry-reading{font-size:1.125rem}.site-footer span{margin-left:0;width:100%}.site-footer{gap:12px 18px}}
@media(max-width:380px){.header-inner{padding-left:14px;padding-right:14px;gap:6px}.brand{font-size:1rem}.header-actions{gap:1px}.grade-trigger{padding-left:7px;padding-right:7px}.saved-toggle{padding-left:7px;padding-right:7px}.reader{padding-left:20px;padding-right:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* A reading desk: quiet index, continuous text, small review cards. */
html,body{height:100%;overflow:hidden}
.header-inner{--header-block-padding:9px;max-width:none;min-height:64px;padding:var(--header-block-padding) 24px;flex-wrap:nowrap}
.brand{letter-spacing:-.03em}.site-header{position:relative;z-index:40}

.search-form,.search-results{max-width:760px}
#search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.search-results{margin:10px auto 0;max-height:min(46dvh,340px);overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.search-result{min-width:0;display:flex;align-items:center;gap:14px;padding:9px 12px;text-align:left;border-radius:6px;min-height:54px}.search-result:hover,.search-result[aria-selected="true"]{background:var(--soft)}
.search-result .hanja{font-size:1.65rem;color:var(--green)}.search-result-reading{flex:1;font-size:.9375rem;overflow-wrap:anywhere}.search-result-grade{font-size:.8125rem;color:var(--muted);white-space:nowrap}.search-empty{grid-column:1/-1;margin:8px 0;font-size:.9375rem}
.study-layout{display:grid;grid-template-columns:20.5rem minmax(0,1fr) var(--notebook-width);height:calc(100dvh - var(--header-height));min-height:0}
.toc-panel,.notebook-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--panel)}
.panel-content{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden}
.toc-panel{border-right:1px solid var(--line)}.notebook-panel{--notebook-gap:10px;border-left:1px solid var(--line)}
.pane-heading{display:flex;align-items:center;gap:9px;padding:20px 18px 13px;flex:none;min-height:60px}
.toc-panel .pane-heading{border-bottom:1px solid var(--line)}
.pane-heading h2{font-size:.9375rem;font-weight:700;margin:0;letter-spacing:-.03em}.pane-count{font-size:.8125rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.pane-close{display:none;margin-left:auto}
.toc-scroll,.notebook-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;flex:1}
.toc-scroll-frame{--toc-card-gutter:16px;--toc-thumb-overhang:11px;position:relative;display:flex;flex:1;min-width:0;min-height:0}
.toc-scroll-frame .toc-scroll{min-width:0}
.toc-scroll-thumb{display:none;position:absolute;z-index:2;top:0;right:calc(0px - var(--toc-thumb-overhang));width:35px;height:45px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;border-radius:8px}
.toc-scroll-thumb::before{content:'';position:absolute;top:0;right:calc(var(--toc-thumb-overhang) + (var(--toc-card-gutter) - 7px)/2);width:7px;height:100%;border-radius:9999px;background:var(--toc-thumb-color,#B8B4AB);pointer-events:none}
[data-theme="dark"] .toc-scroll-thumb{--toc-thumb-color:#817C72}
.toc-scroll-thumb.is-dragging{cursor:grabbing}
.toc-scroll-thumb.is-dragging::before{background:var(--green)}
.toc-scroll-thumb:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.toc-scroll{padding:2px 10px 24px}.toc-group{--toc-control-width:2rem;display:grid;grid-template-columns:var(--toc-control-width) minmax(0,1fr) var(--toc-control-width);gap:5px;padding:7px 5px;margin:3px 0;border:1px solid transparent;border-radius:7px}
.toc-group.is-current{background:var(--soft);border-color:var(--line)}
.toc-number{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:400;font-variant-numeric:tabular-nums;color:var(--muted);align-self:center;min-height:32px;padding:0;line-height:1.4}

.toc-chars{display:grid;grid-template-columns:repeat(var(--toc-columns,10),minmax(0,1fr));align-content:start;gap:0}
@media(max-width:900px){.has-toc-scrollbar>.toc-scroll-thumb{display:block}.has-toc-scrollbar>.toc-scroll{scrollbar-width:none;scroll-behavior:auto}.has-toc-scrollbar>.toc-scroll::-webkit-scrollbar{display:none;width:0}}
.toc-char{display:flex;align-items:center;justify-content:center;font-size:1.1875rem;line-height:1.5;min-height:32px;min-width:0;border-radius:3px;color:var(--hanja-ink);text-decoration:none!important}
.toc-footer{--toc-footer-cell-min-height:calc(33px + 1.3rem);padding:0 18px;border-top:1px solid var(--line);flex:none;font-size:.875rem;color:var(--muted)}.toc-footer a{min-height:28px;display:flex;align-items:center}
.learning-links{display:inline-flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:6px;min-width:0;max-width:100%;font-size:.875rem;line-height:1.6}
.learning-links :is(a,.webtoon-list-trigger){display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:28px;color:var(--muted);white-space:nowrap}

/* One guide/webtoon line keeps the learning area independent of episode count. */
.toc-footer .learning-links,.toc-footer .toc-copyright{display:flex;flex-direction:column;justify-content:center;min-height:var(--toc-footer-cell-min-height);margin-block:0;padding-block:calc(26px / 3 + 2px)}
.toc-footer .learning-links{display:inline-flex;vertical-align:top;width:100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:6px}
.learning-links-separator{flex:none}
.learning-links-separator,.toc-copyright-separator{color:var(--muted);opacity:.45}
.learning-links .webtoon-list-trigger{flex:none;padding:0;border:0;background:transparent;font:inherit;line-height:inherit;touch-action:manipulation}
/* The whole copyright cell is a link; retain its original left-aligned text box. */
.toc-footer .toc-copyright{align-items:stretch;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-decoration:none;touch-action:manipulation}
.toc-footer .toc-copyright:focus-visible{outline-offset:-2px}
@media(max-width:340px){.toc-footer{--toc-footer-cell-min-height:calc(33px + 1.2rem)}}
.learning-links a[aria-current="page"]{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.support-page{display:flex;flex-direction:column;height:100dvh;min-height:0}
.support-page .site-header{flex:none}.return-study{color:var(--green);font-size:.875rem;min-height:44px;display:flex;align-items:center;padding:6px 0}.return-study:hover{text-decoration:underline;text-underline-offset:4px}
.support-pane{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}
.support-content{max-width:804px;margin:0 auto;padding:34px 34px 64px}.support-content>.learning-links{margin-bottom:38px}
.support-content h1{font-size:2rem;line-height:1.4;font-weight:700;margin:0 0 30px;letter-spacing:-.03em}
.support-body{font-size:1.0625rem;line-height:1.85;overflow-wrap:anywhere}.support-body p{margin:0 0 18px}.page-preparing{color:var(--muted);padding:24px 0 54px}
.support-body img{max-width:100%;height:auto}.webtoon-panels img{display:block;width:100%;height:auto;margin:0}.webtoon-panels a:has(img){display:block}
.episode-navigation{display:flex;justify-content:space-between;gap:16px;margin-top:32px;padding-top:16px;border-top:1px solid var(--line);color:var(--green);font-size:.9375rem}.episode-navigation a{min-height:44px;display:flex;align-items:center;padding:6px 0}.episode-navigation a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:620px){.support-content{padding:24px 22px 48px}.support-content h1{font-size:1.75rem}.support-content>.learning-links{margin-bottom:28px}}
.learning-guide .guide-intro{color:var(--muted);margin-top:-14px;margin-bottom:38px}
.learning-guide .guide-section+.guide-section{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.learning-guide h2{margin:0 0 18px;font-size:1.375rem;line-height:1.5;font-weight:600;letter-spacing:-.025em;word-break:keep-all}
.learning-guide h3,.learning-guide .stroke-change-group h4{margin:28px 0 10px;font-size:1.0625rem;line-height:1.6;font-weight:600;word-break:keep-all}
.learning-guide strong{font-weight:600}.learning-guide .guide-section>p:last-child{margin-bottom:0}
.learning-guide .guide-example,.learning-guide .guide-reading-sample{margin:22px 0;padding:4px 0 4px 18px;border-left:2px solid var(--line)}
.learning-guide .guide-example p,.learning-guide .guide-reading-sample p{margin:0}.learning-guide .guide-example p+p,.learning-guide .guide-reading-sample p+p{margin-top:5px}
.learning-guide .guide-kinds{margin:24px 0}.learning-guide .guide-kinds>div+div{margin-top:24px}
.learning-guide .guide-kinds dt{margin-bottom:5px;font-weight:600}.learning-guide .guide-kinds dd{margin:0}
.learning-guide .guide-hun-native{color:var(--hun-native)}.learning-guide .guide-hun-usage{color:var(--hun-usage)}.learning-guide .guide-hun-other{color:var(--hun-other)}
.learning-guide .guide-note{margin:28px 0;padding:18px 22px;background:var(--panel);border-radius:6px;font-size:1rem}
.learning-guide .guide-note h3{margin:0 0 10px}.learning-guide .guide-note p:last-child{margin-bottom:0}
.learning-guide .guide-reading-sample{font-size:1.0625rem;font-weight:400}.learning-guide .guide-vocabulary{color:var(--muted)}.learning-guide .guide-focus{color:var(--ink);font-weight:400}
.learning-guide .guide-steps{padding-left:1.5em;margin:22px 0}.learning-guide .guide-steps li{padding-left:5px}.learning-guide .guide-steps li+li{margin-top:14px}.learning-guide .guide-steps p{margin:3px 0 0}
.learning-guide .guide-decisions{margin:28px 0}.learning-guide .guide-decisions>div+div{margin-top:18px}.learning-guide .guide-decisions dt{font-weight:600}.learning-guide .guide-decisions dd{margin:3px 0 0}
.learning-guide .guide-small{font-size:.9375rem;color:var(--muted)}.learning-guide h3.guide-examples-title{margin-top:38px;font-size:1.1875rem}
.learning-guide .guide-filter-example{margin-top:24px}.learning-guide .guide-filter-example+.guide-filter-example{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.learning-guide .guide-filter-example h4{margin:0 0 12px;font-size:1.0625rem;font-weight:600;line-height:1.6;word-break:keep-all}.learning-guide .guide-filter-example p{margin:0 0 8px}
.learning-guide .guide-step-label{color:var(--muted);font-size:.9375rem;margin-right:.65em;white-space:nowrap}.learning-guide .guide-filter-example .guide-result{margin:12px 0 0}
@media(max-width:620px){.learning-guide .guide-section+.guide-section{margin-top:34px;padding-top:28px}.learning-guide h2{font-size:1.25rem}.learning-guide .guide-note{padding:16px 18px}}
.stroke-credits{font-size:1rem}.stroke-credits a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.stroke-credit-list{list-style:none;padding:0;margin:20px 0 24px;font-size:.9375rem;line-height:1.7}.stroke-credit-list li+li{margin-top:10px}
.stroke-resource-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:22px 0;font-size:.875rem}.stroke-resource-links a{display:inline-flex;align-items:center;min-height:44px}
.stroke-resource-links .stroke-bundle-link{flex-basis:100%;gap:8px;font-size:1rem;font-weight:600}.stroke-bundle-link span{font-size:.875rem;font-weight:400}
.stroke-changes{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.learning-guide .stroke-changes>h3{margin:0;padding:18px 0 10px}
.stroke-changes-body{padding:8px 0 18px}.stroke-changes-overview{font-size:.9375rem}.stroke-changes-overview>span{font-size:.8125rem;color:var(--muted)}
.stroke-change-jumps{display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0 26px;font-size:.875rem}.stroke-change-jumps a{display:inline-flex;align-items:center;min-height:40px}
.learning-guide .stroke-change-group h4{margin-top:30px;scroll-margin-top:20px}.stroke-change-list{margin:12px 0 28px}
.stroke-change-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.stroke-change-row dt a{display:flex;flex-direction:column;align-items:flex-start;min-height:44px;text-decoration:none}.stroke-change-row .hanja{font-size:1.75rem;line-height:1.35;color:var(--ink)}.stroke-change-row dt a:hover .hanja{text-decoration:underline;text-underline-offset:5px}
.stroke-change-row .stroke-count{margin-top:5px;color:var(--muted);font-size:.75rem;font-weight:400;line-height:1.5}.stroke-change-row dd{margin:0;min-width:0;font-size:.9375rem;line-height:1.8}.stroke-change-row dd p{margin:0}
.stroke-data-links{display:flex;gap:18px;margin-top:4px;font-size:.75rem}.stroke-data-links a{display:inline-flex;align-items:center;min-height:36px}
.stroke-change-footnote{padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:620px){.stroke-change-row{grid-template-columns:60px minmax(0,1fr);gap:12px}.stroke-change-row dd{font-size:.875rem}.stroke-resource-links .stroke-bundle-link{flex-wrap:wrap;gap:0 7px}}
.reader-pane{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;scroll-padding-top:18px;scroll-padding-bottom:max(12px,env(safe-area-inset-bottom,0px));background:var(--canvas)}
.reader{--reader-bottom-space:34px;max-width:804px;min-height:0;padding:24px 34px 34px;margin:auto}
.reader-description{display:none;margin:3px 0 0;font-size:.875rem;color:var(--muted)}
.toc-toggle{display:none}
/* Apply the approved 1.4x spacing to entries on every reader page. */
.entry{margin-top:112px;content-visibility:visible;contain-intrinsic-size:none;scroll-margin-top:18px}.entry:first-child{margin-top:28px}
.entry-heading{display:flex;align-items:flex-end;gap:10px;margin-bottom:8px;padding-right:36px;position:relative}
.entry-heading h2{flex:none;margin:0;font-family:var(--hanja-font);font-size:3.125rem;line-height:1.15;color:var(--hanja-ink)}
.heading-stroke-trigger{position:relative;display:block;width:1em;margin:0;padding:0;border:0;border-radius:0;background:none;font:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;touch-action:manipulation;user-select:text;-webkit-user-select:text}
.heading-stroke-reference{position:relative;display:block;line-height:inherit}
.heading-stroke-static{display:block;width:1em}
.heading-stroke-trigger[aria-busy="true"] .heading-stroke-reference{opacity:.35}
.heading-stroke-trigger .original-stroke-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none;transform:translateY(3px)}
.heading-stroke-trigger.stroke-playing .heading-stroke-reference{visibility:hidden}
.heading-stroke-trigger:focus-visible{outline:1px solid var(--toc-line);outline-offset:4px}
.entry-meta{flex:1;min-width:0;padding-bottom:5px;font-size:.875rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.entry-grade{font-size:inherit;white-space:nowrap;margin-inline-end:.25em;color:inherit}.entry-components{--component-chip-hover:var(--component-paper);--component-chip-selected:var(--component-selected-paper);--component-chip-line:var(--component-rule);--component-close-hover:var(--component-rule);--component-chip-radius:6px;font-size:inherit;color:inherit}.entry-components *{font-size:inherit!important;color:inherit!important;line-height:inherit}
:root:not([data-theme="dark"]) .entry-components{--component-chip-line:#EAEBED}
/* Converted component glyphs use the same gray and size as their definitions. */
.entry-components .unicode-glyph{color:inherit!important;font-size:inherit!important;vertical-align:baseline}
.entry-components p,.entry-components div{display:inline;margin:0;padding:0}
/* Keep inline spacing; scale metadata glyphs around their center, then lower them 1px. */
.entry-components .lesson-glyph{display:inline-block;font-size:1.5em!important;vertical-align:-.12em;max-width:none;object-fit:contain;transform:translateY(1px) scale(.945);transform-origin:center}
/* Let white glyph backgrounds blend into the component link background. */
.entry-components img{mix-blend-mode:multiply}
.entry-components .component-link{border:1px solid var(--component-chip-line);border-radius:var(--component-chip-radius);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:2px 3px;background:var(--component-paper);text-decoration:none}
.entry-components .component-link:focus-visible,.entry-components .component-link.is-loading{background:var(--component-chip-hover)}
.entry-components .component-link:where(:not(#reader-content .component-link)):active{background:var(--component-chip-hover)}
@media(hover:hover) and (pointer:fine){.entry-components .component-link:where(:not(#reader-content .component-link)):hover{background:var(--component-chip-hover)}}
.entry-components .component-link.is-loading{cursor:progress}
/* Keep the glyph and grade fixed; only the component list can move sideways. */
/* Keep the compact metadata row at the original lower inset, without a tall swipe track. */
/* Grade and component text share a natural inline baseline, including image pairs. */
.entry-heading .entry-meta{display:flex;align-self:flex-end;align-items:baseline;gap:3px;position:relative;left:0}
.entry-heading .entry-grade{flex:none}
.entry-heading .entry-components{display:block;flex:1 1 0%;min-width:0;max-width:100%;min-height:0;padding:0 2px;white-space:nowrap;overflow-wrap:normal;word-break:normal;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:auto}
.entry-heading .entry-components::-webkit-scrollbar{display:none}
.entry-heading .entry-components>*{flex-shrink:0}
.entry-heading .entry-components .component-link{display:inline-block;vertical-align:baseline;white-space:nowrap;overflow-wrap:normal;word-break:normal}
.entry-heading .entry-components .component-description{display:inline-block;vertical-align:baseline;white-space:nowrap}
.entry-heading .entry-components .component-link:focus-visible{outline-offset:-2px}
.entry-component-navigation{position:relative;display:flex;flex:1 1 0%;align-items:baseline;min-width:0;max-width:100%}
.entry-components>.entry-component-items{display:block;flex:none;white-space:nowrap}
.entry-component-nav{position:relative;display:inline-flex;flex:0 0 28px;align-items:center;justify-content:center;width:28px;height:24px;min-height:0;padding:0;border-radius:6px;font-size:1.375rem;line-height:1;touch-action:manipulation}
.entry-component-nav::after{content:"";position:absolute;inset-inline:0;top:50%;height:44px;transform:translateY(-50%)}
.entry-component-nav:disabled{visibility:hidden}
@media(hover:hover) and (pointer:fine){.entry-component-nav:not(:disabled):hover{background:var(--component-rule)}}
@media(max-width:900px){
  .entry-component-nav{display:none}
  .entry-component-navigation.can-scroll-right::after{content:"";position:absolute;inset-block:0;right:0;width:14px;pointer-events:none;background:linear-gradient(to right,transparent,var(--component-card-paper,var(--canvas)))}
}
.reader-pane{scrollbar-gutter:stable}
.entry-components .component-link.is-selected{background:var(--component-chip-selected);border-color:var(--component-chip-line);font-weight:400;color:inherit!important}
.reader-pane.components-open,.reader-pane.components-animating{overflow-anchor:none}
.component-slot{--component-content-inset:20px;--component-card-paper:var(--component-paper);--component-card-line:var(--component-rule);width:100%;min-width:0;margin-inline:0;overflow:hidden;overflow-anchor:none}
/* The border box shares the parent lesson's exact content-column width. */
.component-slot-inner{padding:0 0 36px}
.component-card{width:100%;min-width:0;border:1px solid var(--component-card-line);border-radius:10px;background:var(--component-card-paper);overflow:hidden}
/* 44px controls + 4px row padding + 4px header padding + 1px divider = footer height. */
/* 2px row padding + 1px chip border + 8px chip padding align its text to the body. */
.component-toolbar{--component-tab-inset:var(--component-content-inset);display:flex;align-items:center;min-width:0;padding:2px calc(var(--component-tab-inset) - 2px);padding-inline-start:calc(var(--component-tab-inset) - 11px);border-bottom:1px solid var(--component-card-line);background:var(--component-card-paper)}
.component-tab-navigation{display:flex;align-items:center;flex:1;min-width:0;max-width:100%}
.component-tabs{display:flex;flex:1;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px;font-size:.875rem;line-height:1.45;color:var(--muted)}
.component-tabs::-webkit-scrollbar{display:none}
.component-tabs .component-tab{display:inline-flex;flex:0 1 var(--component-tab-natural-width,auto);min-width:34px;align-items:center;box-sizing:border-box;min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:inherit;line-height:inherit;white-space:nowrap;touch-action:manipulation}
.component-tabs .component-tab-box{display:inline-flex;align-items:center;box-sizing:border-box;width:100%;min-width:0;gap:4px;padding:2px 4px 2px 8px}
.component-tab-label{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:flex-start;min-width:0;max-width:7em;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.component-tab-label>*{flex-shrink:0}
.component-tabs .component-tab.is-selected{flex:0 0 auto;width:var(--component-tab-natural-width,max-content);max-width:var(--component-tab-available-width,100%)}
.component-tabs .component-tab.is-selected .component-tab-label{min-width:var(--component-tab-leading-width,24px)}
/* Fade only overflowing reading ink; the close control remains a separate hit target. */
.component-tab-label.is-overflowing{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--component-tab-fade-width)),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - var(--component-tab-fade-width)),transparent 100%)}
/* Detached from flex allocation, but inherits the exact rail typography. */
.component-tabs .component-tab.is-tab-measuring{position:fixed;left:0;top:0;visibility:hidden;pointer-events:none;flex:none;width:max-content;min-width:0;max-width:none}
.component-tabs .is-tab-measuring .component-tab-box{width:max-content}
.component-tabs .is-tab-measuring .component-tab-label{flex:none;overflow:visible;mask-image:none;-webkit-mask-image:none}
.component-tab-label br{display:none}
.component-tabs .component-tab.is-selected .component-tab-box{background:var(--component-chip-selected);font-weight:400;color:inherit!important}
.component-tabs .component-tab:focus-visible{outline:0}
.component-tabs .component-tab:focus-visible .component-tab-box{outline:2px solid var(--green);outline-offset:2px}
.component-tab-close{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:32px;min-height:26px;text-align:center}
.component-tabs .component-tab:not(.is-selected) .component-tab-close{display:none}
/* Keep the close target tall without enlarging the visible chip or covering its label. */
.component-tab-close::after{content:"";position:absolute;inset-inline:0;top:50%;height:44px;transform:translateY(-50%)}
.component-footer{display:flex;justify-content:center;padding:4px var(--component-content-inset);border-top:1px solid var(--component-card-line)}
.component-dismiss{min-height:44px;padding:8px 12px;border-radius:6px;font-size:.875rem;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.component-tabs .component-tab:not(.is-selected):hover .component-tab-box{background:var(--component-chip-hover)}.component-dismiss:hover{background:var(--component-rule)}}
/* A 24px mouse-hover circle sits behind the glyph, inside its larger hit area. */

/* The main page is the only vertical scroller. Image rows retain a reserved height. */
.component-scroll{--lesson-image-gutter:var(--component-content-inset);min-width:0;padding:24px var(--lesson-image-gutter) 28px;overflow:visible}
/* Inline component scans carry white paper; blend only these small glyphs into
   the card, preserving the original colors of the large illustrations. */
.component-scroll img.lesson-glyph:not(.lesson-illustration){mix-blend-mode:multiply}
.component-scroll .lesson-image-gallery{display:block;position:relative;max-width:100%;min-width:0;margin-block:2px}
.component-scroll .lesson-image-gallery.has-overflow>.lesson-image-more{display:block}
.component-scroll .lesson-image-strip{display:flex;flex-wrap:nowrap;gap:0;height:var(--lesson-image-height,var(--hanja-img-height));max-width:100%;min-width:0;margin:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.component-scroll .lesson-image-strip::-webkit-scrollbar{display:none}
/* Desktop popups use the same authored space as the body, not an extra flex gap.
   Keep it nonshrinking; compact rows below retain their shared 8px gutter. */
.component-scroll .lesson-image-strip>.lesson-image-space{display:block;flex:0 0 auto;white-space:pre}
.component-scroll .lesson-image-strip>.lesson-image-item{display:block;flex:0 0 auto;scroll-snap-align:start}
.component-scroll .lesson-image-item>a{display:block}
.component-scroll .entry-original .lesson-image-strip .lesson-illustration{display:block;height:var(--lesson-image-height,var(--hanja-img-height));max-width:none;margin:0}
.component-scroll .lesson-image-strip [data-lightbox-ready]:focus-visible{outline-offset:-3px}
.component-scroll .lesson-image-more svg{max-width:100%}
.component-scroll .entry{margin:0;scroll-margin:0}.component-scroll .entry:first-child{margin:0}
/* 4px toolbar inset + 2px tab-list padding match the 6px gap between tabs. */
@media(max-width:900px){.component-slot{--component-content-inset:12px}.component-toolbar{padding-inline-start:4px}.component-scroll .lesson-image-strip{gap:8px}.component-scroll .lesson-image-strip>.lesson-image-space{display:none}.component-scroll{padding-block:20px 24px}}
:root[data-theme="dark"]{--component-paper:#273029;--component-rule:#475347}

.entry-body,.entry-original{font-size:1.0625rem;line-height:1.75}.entry-body p{margin:0 0 10px}.entry-body p:last-child{margin-bottom:0}.entry-original,.entry-original p{white-space:normal}
/* Newly added notes follow the source paragraph without a paragraph gap. */
.entry-body p:has(+ .content-supplement){margin-bottom:0}
.entry-body .entry-reading{margin-top:12px;margin-bottom:7px}.entry-body .entry-question{margin-bottom:9px}
/* One measured header-height band, with no trailing reader padding below it. */
.reader:has(>.reader-navigation:not([hidden])){padding-bottom:0}
.reader-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:112px;min-height:calc(var(--header-height) + 20px);padding:max(0px,calc((var(--header-height) - 27px)/2)) 0;padding-bottom:max(0px,calc((var(--header-height) - 29px)/2));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reader-navigation button{display:flex;align-items:center;gap:7px;min-height:46px;padding:8px 10px;border-radius:6px;font-size:.9375rem;color:var(--green)}.reader-navigation button:not(:disabled):hover{background:var(--soft)}.reader-navigation .icon{width:17px;height:17px;transform:translateY(-1px)}.reader-navigation button span{line-height:1;transform:translateY(-.5px)}

.reader-loading{opacity:.45;pointer-events:none}.reader-error{margin:20px 0;padding:14px 16px;background:var(--notice-bg);border-radius:6px;font-size:.9375rem}.reader-error button{display:block;min-height:44px;text-decoration:underline;color:var(--green)}
.notebook-heading{align-items:flex-end;padding:12px 14px var(--notebook-gap)}.notebook-tabs{display:flex;align-items:center;gap:18px}.notebook-tab{padding:7px 0 6px;border-bottom:2px solid transparent;font-size:.9375rem;font-weight:700;color:var(--muted)}.notebook-tab[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green)}.notebook-tab:hover{color:var(--green)}
.notebook-view{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.history-scroll{padding:0 14px 14px}
/* Match each 60px notebook card plus its 10px gap. Offset half the gap so
   both tabs start at the same content center, with dividers between rows. */
.history-list{--review-row-height:70px;list-style:none;margin:calc(var(--notebook-gap) / -2) 0 0;padding:0}
.history-row{display:block;min-height:var(--review-row-height);padding:0 1px;transition:opacity .14s ease}
.review-card-line{position:relative;display:grid;grid-template-columns:var(--study-row-columns);column-gap:var(--study-row-gap);align-items:center;justify-items:center;height:var(--review-row-height);padding:7px 8px;border-top:1px solid transparent;border-bottom:1px solid var(--line)}
.history-row.is-leaving{opacity:0;pointer-events:none}
/* Use the left gutter for selection, without shifting the five shared columns.
   The 24px target ends where the Hanja link begins; neither target overlaps. */
.history-choice{position:absolute;left:-1px;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:24px;min-height:44px;cursor:pointer}.history-choice:has(input:disabled){cursor:default}
.history-choice input{appearance:none;-webkit-appearance:none;width:19.2px;height:19.2px;margin:0;padding:0;border:1.2px solid var(--line);border-radius:2.4px;background-color:var(--surface);background-position:center;background-size:16.8px 16.8px;background-repeat:no-repeat;accent-color:var(--bookmark-color);cursor:inherit}
.history-choice input:checked{border-color:var(--bookmark-color);background-color:var(--bookmark-color);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8 6.5 11.5 13 4.5' fill='none' stroke='%23F8F7F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-theme="dark"] .history-choice input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8 6.5 11.5 13 4.5' fill='none' stroke='%231D211E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.history-choice input:disabled{visibility:hidden}
/* Keep the character and reading together; reserve aligned slots for all actions. */
.review-question{display:contents}
.history-entry{grid-column:1;display:flex;align-items:center;justify-content:center;width:32px;height:44px;min-height:44px;padding:0}.history-char{font-size:1.625rem;line-height:1;transform:translateY(-1px)}
.review-answer{grid-column:2;width:100%;min-width:0;min-height:44px;padding:3px 0;font-size:.9375rem;line-height:1.25;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;border-radius:5px;text-align:center}
.review-answer[data-revealed="true"][data-long-reading="true"]{font-size:.875rem}
.review-actions{display:contents}
.review-actions>.review-star{grid-column:4}
.review-answer[data-revealed="false"]{color:var(--blue)}
/* The 70px header stays fixed; only saved memo text expands below it. */
.review-memo{grid-column:3;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:44px;padding:4px 0;border-radius:5px;color:var(--inactive);touch-action:manipulation}
.review-memo .icon{width:20px;height:20px;stroke-width:1.6}
.review-memo[data-has-memo="true"]{color:var(--stage-green)}
.review-memo .review-memo-lines{display:none}
.review-memo[data-has-memo="true"] .review-memo-lines{display:inline}
.history-row[data-memo-expanded="true"] .review-card-line{border-bottom-color:transparent}
.review-memo-details{padding:0 8px 10px calc(8px + max(0px,(38px - 1.625rem)/2));border-bottom:1px solid var(--line)}
.review-memo-text{display:block;width:100%;min-width:0;min-height:24px;margin:0;padding:0;border:0;border-radius:4px;background:transparent;color:var(--vocabulary-muted);font-size:.875rem;font-weight:400;line-height:1.5;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere;text-align:left;touch-action:manipulation}
html.review-memo-open,html.review-memo-open body{overflow:hidden;overscroll-behavior:none}
.review-memo-dialog{position:fixed;inset:auto;margin:0;padding:0;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);overflow:hidden;box-shadow:0 20px 80px #1C191733;line-height:1.6}
.review-memo-dialog:not([open]){display:none}
.review-memo-dialog[open]{display:flex;flex-direction:column}
.review-memo-dialog::backdrop{background:#1C191770}
.review-memo-content{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:12px;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}
.review-memo-footer{flex:none;padding:12px 20px 20px;background:var(--panel)}
.review-memo-header{display:flex;align-items:center;justify-content:space-between;flex:none;gap:12px;padding:18px 20px 14px}
.review-memo-heading{display:flex;align-items:center;flex:1;gap:14px;min-width:0;margin:0;font-weight:400;line-height:1.4}
.review-memo-character{flex:none;min-width:44px;min-height:44px;margin:0;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:2.5rem;line-height:1.3;color:var(--hanja-ink);cursor:pointer;touch-action:manipulation;transition:transform .1s ease}
.review-memo-character:active{background:var(--soft);transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.review-memo-character{transition:none}.review-memo-character:active{transform:none}}
.review-memo-reading{color:var(--accent-ink);font-size:1.125rem;word-break:keep-all;overflow-wrap:anywhere}
.review-memo-close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-8px;padding:0;border-radius:8px;color:var(--muted);touch-action:manipulation}
.review-memo-body{display:flex;flex-direction:column;gap:12px;min-height:0;padding:0 20px}
.review-memo-explanation{flex:none;max-height:150px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--header-bg);color:#000;font-size:1rem;word-break:keep-all;overflow-wrap:anywhere;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}
.review-memo-explanation[data-density="compact"]{font-size:.9375rem}
.review-memo-explanation[data-density="small"]{font-size:.875rem}
.review-memo-question{margin:0;color:inherit}
.review-memo-explanation[data-full-meaning="true"]{height:auto;font-size:1rem}
.review-memo-explanation[data-full-meaning="true"] .review-memo-question{white-space:pre-line}
.review-memo-source-question{margin-bottom:8px}
.review-memo-question img,.review-memo-forms img{display:inline-block;width:auto;height:1em;max-width:100%;vertical-align:-.12em;object-fit:contain;mix-blend-mode:multiply;transform:translateY(2px)}
/* Keep the text baseline/top padding; add one pixel below the glyph only. */
.review-memo-component{display:inline-block;min-width:1.875em;min-height:0;margin:0 1px;padding:0 4px 1px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:inherit;font-family:var(--hanja-font);font-size:1em;line-height:1.15;vertical-align:baseline;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.review-memo-forms{margin:8px 0 0;color:inherit}
[data-theme="dark"] .review-memo-explanation{color:#fff}
.review-memo-retry{margin-top:8px;padding:6px 0;color:var(--accent-ink);font-size:.875rem;text-decoration:underline;text-underline-offset:3px}
.review-memo-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;flex:none;gap:6px;margin:0;padding:0}
.review-memo-chip{display:flex;align-items:center;justify-content:center;min-width:0;min-height:42px;padding:8px 6px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--accent-ink);font-size:.875rem;font-weight:400;line-height:1.4;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;touch-action:manipulation}
.review-memo-chip .icon{width:18px;height:18px}
.review-memo-chip:is([data-memo-key=","],[data-memo-key="."]){font-size:1.125rem;line-height:1}
@media(min-width:1024px){
  .review-memo-chips{grid-template-columns:repeat(20,minmax(0,1fr))}
  .review-memo-chip{grid-column:span 4}
  .review-memo-chip:nth-child(-n+4){grid-column:span 5}
}
.review-memo-editor{min-width:0;padding:12px 20px 0}
.review-memo-field{display:flex;align-items:center;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--header-bg)}
.review-memo-input,.review-memo-measure{box-sizing:border-box;padding:8px 12px;font:inherit;font-size:1rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
.review-memo-input{display:block;flex:1;width:100%;min-width:0;height:calc(4.5em + 16px);margin:0;border:0;border-radius:8px;background:transparent;color:var(--ink);resize:none;overflow-y:auto;scrollbar-width:none}
.review-memo-input::-webkit-scrollbar{display:none}
.review-memo-measure{position:fixed;left:-10000px;top:0;height:auto;visibility:hidden;pointer-events:none}
.review-memo-tool{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent-ink);touch-action:manipulation}
.review-memo-tool:disabled{color:var(--inactive);cursor:default}
.review-memo-tool .icon{width:20px;height:20px}
.review-memo-input::placeholder{color:var(--vocabulary-muted);opacity:1}
.review-memo-error{margin:0 0 10px;padding:6px 8px;border-radius:5px;background:var(--error-bg);color:var(--error-text);font-size:.875rem;line-height:1.4}
.review-memo-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.review-memo-tools,.review-memo-submit{display:flex;align-items:center;flex:none;gap:8px}
.review-memo-submit button{min-width:76px;min-height:44px;padding:9px 18px;border:1px solid var(--line);border-radius:8px;font-size:.9375rem;font-weight:400;line-height:1.5;touch-action:manipulation}
.review-memo-cancel{background:var(--surface);color:var(--accent-ink)}
.review-memo-actions .review-memo-save{border-color:var(--button-green);background:var(--button-green);color:var(--on-accent)}
.review-memo-dialog[data-compact="true"] .review-memo-header{padding:10px 16px 8px}
.review-memo-dialog[data-compact="true"] .review-memo-character{font-size:2rem}
.review-memo-dialog[data-compact="true"] .review-memo-body{padding-inline:16px}
.review-memo-dialog[data-compact="true"] .review-memo-editor{padding:10px 16px 0}
.review-memo-dialog[data-compact="true"] .review-memo-footer{padding-inline:16px}
@media(max-width:1023px){
  .review-memo-footer{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .review-memo-actions button{position:relative}
  /* The 1px border plus 4px outer reach gives 44px tools a 52px touch target.
     Adjacent targets meet within the existing 8px gap without overlapping. */
  .review-memo-actions button:not(:disabled)::after{content:"";position:absolute;inset:-5px;border-radius:inherit}
}
@media(max-width:380px){.review-memo-header{padding-inline:16px}.review-memo-body{padding-inline:16px}.review-memo-editor,.review-memo-footer{padding-inline:16px}.review-memo-explanation{padding:12px}.review-memo-chip{padding-inline:8px}.review-memo-submit button{min-width:64px;padding-inline:12px}}
@media(hover:hover) and (pointer:fine){.review-memo-character:hover,.review-memo-close:hover,.review-memo-chip:not(:disabled):hover,.review-memo-component:hover,.review-memo-tool:not(:disabled):hover{background:var(--soft)}}
.review-remove{grid-column:5;display:flex;align-items:center;justify-content:center;width:28px;height:44px;min-height:44px;padding:0;border-radius:5px;color:var(--inactive);touch-action:manipulation}.review-remove .icon{width:20px;height:20px;stroke-width:1.6}

.history-empty-filter{margin:0}
@media(prefers-reduced-motion:reduce){.history-row{transition:none}}
/* Share one toolbar row, aligned with the cards below the fixed controls. */
/* Move only the middle list viewports; toolbar and fixed actions keep their geometry. */
#notebook-scroll,#review-scroll{position:relative;top:-1px;scrollbar-gutter:stable;scrollbar-width:thin;overflow-anchor:none;scroll-behavior:auto}
@supports not (scrollbar-gutter:stable){#notebook-scroll,#review-scroll{overflow-y:scroll}}
.notebook-toolbar{--notebook-control-size:37px;--notebook-control-gap:8px;display:flex;align-items:center;justify-content:flex-start;gap:var(--notebook-control-gap);flex:none;min-width:0;padding:4px 20px 10px 14px;overflow-x:auto;scrollbar-width:thin}
/* Both tabs distribute the extra panel width equally between all six controls. */
.notebook-toolbar:has(>:is(.practice-tools,.review-tools):not([hidden])){--notebook-control-gap:6px;justify-content:space-between;padding:8px 14px 15px;overflow-y:hidden;scrollbar-gutter:stable}
@media(min-width:1600px){.notebook-toolbar:has(>:is(.practice-tools,.review-tools):not([hidden])){padding-inline:20px}}
.notebook-toolbar,.notebook-controls{flex-wrap:nowrap}
.notebook-controls{display:flex;flex:none;align-items:center;gap:var(--notebook-control-gap);padding:0;font-size:.875rem;color:var(--muted)}
.notebook-toolbar .notebook-controls,.notebook-toolbar .review-tools:not([hidden]),.notebook-toolbar .review-filters{display:contents}
/* Match the first practice button's inline baseline, including the 32px mobile size. */
.review-filter-slot{flex:none;min-width:0}
.review-filter-slot .review-filter{display:inline-flex}
/* Playback state is shown by the play/pause icon; its touch highlight is momentary. */
.notebook-hints-button .hanja{font-size:1.125rem;line-height:1;transform:translateY(-1px)}
.notebook-icon-button{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--notebook-control-size);height:var(--notebook-control-size);min-height:var(--notebook-control-size);padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--green);touch-action:manipulation;transition:background-color .15s,color .15s}
.notebook-icon-button .icon{width:18px;height:18px;stroke-width:2}
.reading-eye[aria-pressed="false"]>.icon{transform:translateY(2px)}
.notebook-icon-button.notebook-speed{padding-inline:2px;font-size:.875rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Reduce the shuffle to 90% while retaining its 1.5px visible stroke. */
.notebook-icon-button.notebook-shuffle .icon{width:21.6px;height:21.6px;stroke-width:2.222222}
/* Ignore emulated hover/active after touch while retaining real toggle state. */


.notebook-icon-button[data-touch-input]{transition:none}
@media(hover:none){.notebook-icon-button{transition:none}}
.notebook-icon-button:focus-visible{outline-offset:-2px}
.notebook-scroll{padding:0 14px 18px}#notebook-scroll{padding-bottom:18px}.notebook-list{display:flex;flex-direction:column;gap:var(--notebook-gap)}.notebook-card{display:flex;align-items:center;gap:8px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);text-align:left}
.notebook-question{display:contents}
.notebook-char{display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;min-height:3rem;min-width:0;color:var(--hanja-ink)}
.notebook-card.is-new{animation:notebook-card-added .4s ease-out}
@keyframes notebook-card-added{from{opacity:.6}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.notebook-card.is-new{animation:none}}
.notebook-answer{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:3rem;min-height:3rem;margin:0;padding:3px 0;font-size:.9375rem;color:var(--ink);border-radius:5px;line-height:1.4;text-align:center;overflow-wrap:anywhere}.notebook-answer:disabled{opacity:1;cursor:default}.notebook-answer[data-revealed="false"]{font-size:.875rem;color:var(--muted)}.notebook-answer:not(:disabled):hover{background:var(--panel)}
/* Keep reading space consistent between hidden and revealed states. */
.notebook-answer[data-multiline="true"]{font-size:.875rem;line-height:1.2;white-space:pre-line;min-height:3rem;padding-block:4px}
.notebook-empty{font-size:.875rem;text-align:center;line-height:1.9;color:var(--muted);margin:30px 0}.notebook-note{flex:none;margin:0;padding:10px 14px 14px;text-align:center;font-size:.75rem;color:var(--muted)}
/* Both tabs share the same empty viewport and title origin. Reserve space
   above the title, not around the changing text height; wrapped lines grow down.
   Override practice-only relay padding only while its empty message is visible. */
:is(#notebook-scroll,#review-scroll).notebook-empty-surface:has(>.notebook-empty-message:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max(20px,calc(50% - 3.55rem)) max-content minmax(20px,1fr);gap:0;align-content:start;padding:0 24px}
.notebook-empty-surface:has(>.notebook-empty-message:not([hidden]))>:is(.notebook-list,.history-list){display:none}
.notebook-empty-message{grid-row:2;align-self:start;width:100%;max-width:100%;margin:0;padding:0;text-align:left;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.notebook-empty-title{margin:0;font-size:1rem;font-weight:500;line-height:1.6;color:var(--ink)}
.notebook-empty-list{max-width:100%;margin:8px 0 0;padding:0;list-style:disc inside;text-align:left;line-height:1.9;color:#767676}
/* Keep the longer grade guidance on one line at the standard sidebar width. */
#notebook-history-empty-guide .notebook-empty-list{letter-spacing:-.25px}
[data-theme="dark"] .notebook-empty-list{color:var(--muted)}
.pane-backdrop{position:fixed;inset:var(--header-height) 0 0;background:#1C191745;z-index:50;cursor:default}
.toast{display:flex;align-items:center;gap:12px;max-width:calc(100% - 28px);bottom:calc(25px + env(safe-area-inset-bottom,0px));z-index:1000;white-space:normal;pointer-events:none}
#toast-message{min-width:0;word-break:keep-all;overflow-wrap:break-word}.toast-action{flex:none;min-height:40px;padding:6px 8px;color:inherit;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px;border-radius:4px}.toast.show .toast-action:not(:disabled){pointer-events:auto}.toast-action:hover{background:#ffffff1a}.toast-action:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.toast.is-notebook-limit{width:max-content;text-align:center;line-height:1.65;background:var(--button-green);color:var(--on-accent);font-weight:600;border-radius:10px;box-shadow:0 6px 20px #1C191733;word-break:keep-all}.toast.is-notebook-limit #toast-message{white-space:pre-line}
.toast.is-success,.toast.is-error{padding:10px 16px;border-radius:10px;color:var(--on-accent);font-weight:500;box-shadow:0 6px 20px #1C191726}
.toast.is-success{background:var(--button-green)}.toast.is-error{background:#AA4E57}
.empty-state{padding:30px 0 40px}.empty-state h2{font-size:1rem}.loading-message{padding:26px 0}
@media(min-width:1600px){.study-layout{grid-template-columns:21.5rem minmax(0,1fr) var(--notebook-width)}.reader{padding-left:36px;padding-right:36px}.notebook-heading,.notebook-scroll{padding-left:20px;padding-right:20px}}
@media(max-width:1199px){.study-layout{grid-template-columns:20.5rem minmax(0,1fr)}.notebook-panel{position:fixed;top:var(--header-height);bottom:0;right:0;width:min(var(--notebook-width),90vw);height:calc(100dvh - var(--header-height));z-index:60;box-shadow:-8px 0 35px #1C19171A}.notebook-panel .pane-close{display:inline-flex}.notebook-panel .pane-heading{padding-top:17px}}
@media(max-width:900px){.study-layout{grid-template-columns:minmax(0,1fr)}.toc-panel{position:fixed;top:var(--header-height);bottom:0;left:0;width:min(348px,calc(100vw - 24px));height:calc(100dvh - var(--header-height));z-index:60;box-shadow:8px 0 35px #1C19171A}.toc-toggle{display:inline-flex}.reader{--reader-bottom-space:28px;--lesson-image-gutter:28px;padding:18px var(--lesson-image-gutter) 28px;max-width:792px}}
/* A fixed overlay keeps scroll geometry stable while the mobile header slides.
   Its initial space lives inside the scroller and disappears as the user reads. */
@media(max-width:900px){
  .has-scroll-header{--reader-header-inset:var(--header-height)}
  .has-scroll-header.reader-header-hidden{--reader-header-inset:0px}
  .has-scroll-header .site-header{position:fixed;inset:0 0 auto;transform:translateY(0);transition:transform .2s ease;will-change:transform}
  .has-scroll-header.reader-header-hidden .site-header{transform:translateY(-100%);pointer-events:none}
  .has-scroll-header .study-layout{height:100dvh}
  .has-scroll-header .reader-pane{scroll-padding-top:calc(var(--reader-header-inset) + 14px)}
  .has-scroll-header .reader{padding-top:calc(var(--header-height) + 18px)}
}
@media(max-width:620px){.header-inner{padding:8px 16px;min-height:60px;gap:8px}.reader{--reader-bottom-space:25px;--lesson-image-gutter:22px;padding:15px var(--lesson-image-gutter) 25px}.entry{margin-top:84px}.entry:first-child{margin-top:25px}.entry-heading h2{font-size:2.875rem}.entry-meta{font-size:.875rem;padding-bottom:4px}.entry-heading{gap:8px;margin-bottom:7px}.entry-body,.entry-original{font-size:1rem;line-height:1.75}.reader-navigation{margin-top:84px}.search-results{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.has-scroll-header .reader{padding-top:calc(var(--header-height) + 15px)}}
/* Keep every header control centered on the same 44px touch row. */
@media(max-width:620px){.header-actions>.icon-button{width:40px}.header-actions .grade-trigger{padding-inline:10px}.header-actions .grade-menu{left:0;right:auto;width:120px}}
@media(max-width:380px){.header-actions .grade-trigger{padding-inline:7px}}
/* Leave a narrow backdrop for dismissal while giving mobile cards room. */
@media(max-width:639px){.notebook-panel{width:90vw;max-width:var(--notebook-width)}}
/* Mobile numbers share the heading/footer text edge; ten glyphs keep room to breathe.
   The transparent thumb target extends into the drawer's dismissal gutter;
   its inner edge clears the add button by 1px, and nav still clips its content. */
@media(max-width:900px){
  .toc-panel{--toc-text-inset:18px;--toc-row-padding:8px}
  .toc-panel .pane-heading,.toc-panel .toc-footer{padding-left:var(--toc-text-inset)}
  .toc-panel .panel-content{overflow:visible}
  .toc-scroll{padding-left:calc(var(--toc-text-inset) - var(--toc-row-padding) - 1px);padding-right:var(--toc-card-gutter)}
  .toc-group{--toc-control-width:34px;--toc-hanja-size:clamp(1.0625rem,4.8vw,1.125rem);--toc-char-gap:clamp(3.5px,calc(5vw - 14.5px),4.5px);--toc-row-height:calc(var(--toc-hanja-size) * 1.65);gap:6px;padding:var(--toc-row-padding)}
  .toc-chars{width:100%;max-width:calc(var(--toc-hanja-size) * 10 + var(--toc-char-gap) * 9);justify-self:center;column-gap:var(--toc-char-gap);row-gap:0}
  .toc-char{font-size:var(--toc-hanja-size);line-height:1.65;min-height:0}
  .toc-number{min-height:var(--toc-row-height);align-self:center;justify-content:flex-start;transform:translateX(1px)}
  .toc-panel .toc-group.is-current .toc-number::before{left:1.5ch}
  .toc-group .toc-add{min-height:var(--toc-row-height);padding-block:0;align-self:center}
}
/* Keep ten readable glyphs and comfortable gaps even on 320px-wide phones. */
@media(max-width:355px){
  .toc-panel{width:calc(100vw - 8px)}
  .toc-scroll-frame{--toc-thumb-overhang:15px}
  .toc-group{--toc-control-width:32px;gap:2px;padding-right:4px}
}
@media(max-width:480px){.toc-footer{font-size:.875rem}}
@media(max-width:360px){.header-inner{padding-left:12px;padding-right:12px;gap:5px}.header-actions>.icon-button{width:34px}.header-actions .grade-trigger{padding-left:7px;gap:4px}.header-actions .saved-toggle{padding-inline:4px;gap:4px}.reader{--lesson-image-gutter:18px;padding-left:var(--lesson-image-gutter);padding-right:var(--lesson-image-gutter)}.brand{font-size:1rem}.entry-heading{padding-right:30px}}

/* One compact, keyboard-accessible menu; the notebook keeps the freed space. */
.site-header{z-index:70;padding-top:env(safe-area-inset-top,0px)}
.more-picker{position:static;flex:none}
.more-toggle .icon{fill:currentColor;stroke:none;width:20px;height:20px}
/* Anchor the menu's top border to the header's bottom border. */
.more-menu{position:absolute;right:24px;top:100%;width:min(286px,calc(100vw - 24px));max-height:calc(100dvh - var(--header-height) - 20px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;padding:7px;border:1px solid var(--line);border-radius:12px;background:var(--header-bg);color:var(--ink);box-shadow:0 10px 32px #1C191724;scrollbar-width:thin;animation:more-menu-in .15s ease-out}
@keyframes more-menu-in{from{opacity:0}to{opacity:1}}
.more-item{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;margin:0;padding:10px 12px;text-align:left;font-size:13px;line-height:1.55;border-radius:6px;word-break:keep-all}
.more-item>span{min-width:0}.more-item>.icon{width:18px;height:18px;color:var(--green)}

.more-item:focus-visible{outline-offset:-2px}.more-item:disabled{opacity:.45;cursor:default}
.more-item small{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:400;font-variant-numeric:tabular-nums}
.cloud-menu-action>.icon{transform:translateY(1px)}
.more-group{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.more-email{margin:4px 12px 3px;color:var(--muted);font-size:11px;line-height:1.6;overflow-wrap:anywhere}
.more-menu .cloud-message,.more-menu .cloud-error{margin:5px 6px;font-size:12px;box-shadow:none}
.theme-switch{position:relative;flex:none;margin-left:auto;width:29px;height:18px;border-radius:20px;background:var(--inactive)}
.theme-switch::after{content:"";position:absolute;inset:3px auto 3px 3px;width:12px;border-radius:50%;background:var(--on-accent);transition:transform .15s}
[aria-checked="true"]>.theme-switch{background:var(--button-green)}[aria-checked="true"]>.theme-switch::after{transform:translateX(11px)}
.notebook-panel{padding-bottom:env(safe-area-inset-bottom,0px)}
/* Shared 50px actions; sidebar footer spacing is set below. */
.notebook-relay-bar,.history-actions{display:flex;align-items:center;position:sticky;bottom:0;flex:none;height:70px;padding:10px 14px;border-top:0;background:var(--panel)}
.notebook-relay,.history-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;min-height:50px;margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent-ink);font-size:1rem;font-weight:400;line-height:1.5;word-break:keep-all;touch-action:manipulation}
.notebook-study-actions{gap:8px;width:100%}
.notebook-study-actions .notebook-relay{flex:1;min-width:0;width:auto}
.history-actions{gap:8px}
.history-actions .history-add{flex:1;min-width:0;width:auto}
.review-memos-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:50px;height:50px;min-height:50px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent-ink);touch-action:manipulation}
.review-memos-toggle .icon{width:22px;height:22px;stroke-width:1.8}
.review-memos-toggle:disabled{opacity:.4;cursor:default}


/* Both sidebar footers center a 50px action in equal 14px vertical insets. */
.notebook-study-actions,.history-actions{height:var(--notebook-footer-height);padding-block:14px;overflow:hidden;scrollbar-gutter:stable;scrollbar-width:thin}
@media(min-width:1600px){.notebook-study-actions,.history-actions{padding-inline:20px}}
.notebook-relay,.history-add{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(hover:hover) and (pointer:fine){.notebook-focus-dialog .notebook-relay:not(:disabled):not([data-touch-input]):hover{background:var(--soft)}}
.notebook-focus-dialog .notebook-relay:not(:disabled):not([data-touch-input]):active,
.notebook-focus-dialog .notebook-relay:not(:disabled).is-touch-pressed{background:var(--soft)}
.notebook-relay:disabled{opacity:.45;cursor:default}
.history-add:disabled{opacity:.45;background:var(--surface);box-shadow:none;color:var(--muted);cursor:default}
.notebook-relay-key{display:none;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:inherit;color:inherit;font-family:inherit;font-size:12px;font-weight:500;line-height:1}
.notebook-relay-autoplay-icon{width:22px;height:22px;stroke-width:2.5}
@media(min-width:901px) and (hover:hover) and (pointer:fine){.notebook-relay-key{display:inline-flex}}
#notebook-scroll{padding-bottom:50px;overflow-anchor:none;scroll-behavior:auto}
#notebook-list{padding-top:0;padding-bottom:var(--relay-trailing-space,0px)}
.notebook-answer{touch-action:manipulation}
.toc-panel{padding-bottom:env(safe-area-inset-bottom,0px)}
.tools-dialog p{white-space:pre-line;word-break:keep-all;overflow-wrap:break-word}
.tools-dialog h2{font-size:18px}
.notebook-guide-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:hidden;color:var(--ink);font-size:.9375rem;line-height:1.7}
.notebook-guide-dialog[open]{display:flex;flex-direction:column}
.notebook-guide-dialog .cloud-help-heading{align-items:center;flex:none;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.notebook-guide-dialog .cloud-help-heading h2{display:flex;align-items:center;gap:7px;font-size:1.125rem}
.notebook-guide-dialog .cloud-help-close{width:36px;height:36px;margin:0 -6px 0 0;color:var(--muted)}
.notebook-guide-content{min-height:0;padding:20px 22px;overflow-y:auto;overscroll-behavior:contain;word-break:keep-all;overflow-wrap:anywhere}
.notebook-guide-content section+section{margin-top:22px}
.notebook-guide-content h3{margin:0 0 8px;font-size:.9375rem;font-weight:700;color:var(--green)}
.notebook-guide-content h3>span{font-size:.625rem;vertical-align:2px;margin-right:3px}
.notebook-guide-dialog ul{margin:0;padding-left:17px}.notebook-guide-dialog li{margin-bottom:8px}
#notebook-guide-title>.icon{transform:translateY(1px)}
.notebook-guide-check{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:currentColor;stroke:none}
.notebook-guide-t{display:inline-block;width:.7em;height:.875em;vertical-align:-.06em;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.notebook-guide-mobile{margin:22px 0 0;color:var(--muted);font-size:.875rem}
.notebook-guide-footer{flex:none;padding:14px 22px 18px;border-top:1px solid var(--line)}
.notebook-guide-footer .cloud-help-confirm{min-height:44px;font-size:.9375rem}

@media(max-width:380px){.notebook-guide-dialog .cloud-help-heading,.notebook-guide-content,.notebook-guide-footer{padding-inline:16px}}
.support-dialog{width:min(400px,calc(100vw - 32px))}
.support-description{margin:16px 0 14px;word-break:keep-all;color:var(--muted);line-height:1.7}
.support-email-row{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}
.support-email{flex:1;min-width:0;width:100%;padding:6px 4px;border:0;background:transparent;color:var(--green);font-size:15px;border-radius:4px;user-select:all}
.support-copy{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:52px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--green);font-size:13px;font-weight:600;line-height:1.4}
.support-copy:not(:disabled):hover{background:var(--soft)}.support-copy-status{margin:10px 0 0;color:var(--muted);text-align:center;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
/* Keep the confirmation above the modal backdrop in the dialog's top layer. */
.support-copy-status[data-tone="success"]{position:fixed;left:50%;bottom:calc(25px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;padding:10px 16px;border-radius:10px;background:var(--button-green);color:var(--on-accent);font-size:14px;font-weight:500;box-shadow:0 6px 20px #1C191726;pointer-events:none}
@media(max-width:360px){.support-dialog{padding:20px 16px}}
@media(max-width:620px){.header-inner{--header-block-padding:8px;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));gap:4px}.header-actions{gap:0}.header-actions .grade-trigger{padding-inline:6px;gap:4px}.more-toggle{width:36px}.header-actions>.icon-button{width:36px}.saved-toggle{padding-inline:5px;gap:4px}.more-item{min-height:44px}.more-menu{right:max(12px,env(safe-area-inset-right,0px))}}
@media(max-width:360px){.header-inner{padding-inline:8px;gap:2px}.brand{gap:4px;font-size:15px}.brand-mark{width:26px;height:26px}.more-toggle{width:32px}.header-actions>.icon-button{width:32px}.header-actions .grade-trigger{padding-inline:4px;gap:2px;font-size:13px}.saved-toggle{font-size:13px}}
@media(prefers-reduced-motion:reduce){.more-menu{animation:none}}

/* Theme colors are set before the first paint; illustrations retain their original colors. */
:root[data-theme="dark"]{color-scheme:only dark;--stage-green:#97BF9F;--accent-ink:var(--stage-green);--stage-amber:#D0A45A;--stage-red:#D99499;--canvas:#1D211E;--surface:#273029;--panel:#222A24;--header-bg:#242A25;--header-line:var(--line);--ink:#E8E6DC;--hanja-ink:#E8E6DC;--muted:#B8B4A9;--vocabulary-muted:var(--muted);--inactive:#92998C;--line:#475347;--toc-line:#687E68;--scrollbar:#61705F;--soft:#303B32;--reading-hover:#2C372E;--brand-hover:#3B6C53;--error-bg:#38292C;--error-text:#E0A2A6;--notice-bg:#363226}
[data-theme="dark"] .entry-heading h2,[data-theme="dark"] .entry-original,[data-theme="dark"] .unicode-glyph,[data-theme="dark"] .entry-body .entry-question,[data-theme="dark"] .toc-char,[data-theme="dark"] .notebook-char,[data-theme="dark"] .lesson-vocabulary .vocabulary-head,[data-theme="dark"] .learning-guide .guide-focus,[data-theme="dark"] .stroke-change-row .hanja{color:var(--ink)}
[data-theme="dark"] .entry-meta,[data-theme="dark"] .toc-number,[data-theme="dark"] .toc-copyright,[data-theme="dark"] #notebook-empty,[data-theme="dark"] .notebook-answer[data-revealed="false"],[data-theme="dark"] .lesson-vocabulary,[data-theme="dark"] .lesson-vocabulary .vocabulary-word,[data-theme="dark"] .lesson-vocabulary .vocabulary-definition,[data-theme="dark"] .lesson-vocabulary .vocabulary-item:not(.is-open),[data-theme="dark"] .lesson-vocabulary .vocabulary-item:not(.is-open) .vocabulary-word .vocabulary-head{color:var(--muted)}
[data-theme="dark"] .toc-group.is-current,[data-theme="dark"] .history-row.is-selected,[data-theme="dark"] .learning-guide .guide-note,[data-theme="dark"] .history-saved{background:var(--soft);border-color:var(--line)}
[data-theme="dark"] .entry-components .component-link{color:var(--ink)}
[data-theme="dark"] .lesson-vocabulary{--vocabulary-chip:var(--soft);--vocabulary-chip-hover:var(--reading-hover);--vocabulary-link-rule:#788079;--vocabulary-link-rule-hover:#B8B4A9}
[data-theme="dark"] .notebook-card,[data-theme="dark"] .component-card,[data-theme="dark"] .cloud-cancel{border-color:var(--line)}
[data-theme="dark"] .cloud-help-dialog{color:var(--ink)}[data-theme="dark"] .cloud-help-close:hover{background:var(--soft);color:var(--ink)}
[data-theme="dark"] .cloud-error,[data-theme="dark"] .reader-error{background:var(--error-bg);color:var(--error-text)}
[data-theme="dark"] .entry-components img{mix-blend-mode:normal}
/* Only inline glyph images invert; screen blends their inverted paper into the dark surface. */
[data-theme="dark"] img.lesson-glyph:not(.lesson-illustration){filter:invert(1);mix-blend-mode:screen}
[data-theme="dark"] .original-stroke-svg path[fill="#111"]{fill:var(--ink)}[data-theme="dark"] .original-stroke-svg path[stroke="#111"]{stroke:var(--ink)}[data-theme="dark"] .original-stroke-svg path[fill="#c3c6c4"]{fill:#56675c}
[data-theme="dark"] .lesson-vocabulary .vocabulary-badge.vocabulary-head[data-hun-kind="native"] .vocabulary-badge-hun,[data-theme="dark"] .learning-guide .guide-hun-native{color:var(--hun-native)}
[data-theme="dark"] .lesson-vocabulary .vocabulary-badge.vocabulary-head[data-hun-kind="usage"] .vocabulary-badge-hun,[data-theme="dark"] .learning-guide .guide-hun-usage{color:var(--hun-usage)}
[data-theme="dark"] .lesson-vocabulary .vocabulary-badge.vocabulary-head[data-hun-kind="other"] .vocabulary-badge-hun,[data-theme="dark"] .learning-guide .guide-hun-other{color:var(--hun-other)}
[data-theme="dark"] .entry-original [style*="color:#0b0b0b" i],[data-theme="dark"] .entry-original [style*="color:#111" i],[data-theme="dark"] .entry-original [style*="color:#000" i]{color:var(--ink)!important}
[data-theme="dark"] .entry-original [style*="color:#787878" i],[data-theme="dark"] .entry-original [style*="color:#777" i],[data-theme="dark"] .entry-original [style*="color:#888" i]{color:var(--muted)!important}
[data-theme="dark"] .entry-original .lesson-hun[data-hun-kind="native"],[data-theme="dark"] .entry-original [style*="color:#2B5896" i],[data-theme="dark"] .entry-original [style*="color:#2565d0" i]{color:var(--hun-native)!important}
[data-theme="dark"] .entry-original .lesson-hun[data-hun-kind="usage"],[data-theme="dark"] .entry-original [style*="color:#287D3F" i]{color:var(--hun-usage)!important}
[data-theme="dark"] .entry-original .lesson-hun[data-hun-kind="other"],[data-theme="dark"] .entry-original [style*="color:#B84336" i],[data-theme="dark"] .entry-original [style*="color:#ea4335" i]{color:var(--hun-other)!important}

@media(max-width:639px){
  .header-inner{gap:4px;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px))}
  .header-actions{gap:0;min-width:0}
  .header-actions>.icon-button,.more-toggle{width:36px}
  .header-actions .grade-trigger{padding-inline:6px;gap:4px}
  .header-actions .saved-toggle{gap:4px;padding-inline:5px;font-size:.875rem}
}
@media(max-width:380px){
  .header-inner{padding-inline:max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px))}
  .header-actions>.icon-button,.more-toggle{width:32px}
  .header-actions .grade-trigger{padding-inline:4px;gap:2px}
  .header-actions .saved-toggle{gap:3px;padding-inline:4px}
}

/* Shared study surface and one durable mistake marker. */
.entry-heading{padding-right:0;flex-wrap:wrap;column-gap:8px;align-items:flex-end}
.entry-heading h2{color:var(--hanja-ink)}
.entry-heading .entry-meta{flex:1 1 110px;color:var(--muted)}
.entry-star{flex:none;align-self:center;margin-left:auto}
.entry-heading .original-stroke-svg path[fill="#111"]{fill:var(--hanja-ink)}
.entry-heading .original-stroke-svg path[stroke="#111"]{stroke:var(--hanja-ink)}
[data-theme="dark"] .entry-heading .original-stroke-svg path[fill="#111"]{fill:var(--ink)}
[data-theme="dark"] .entry-heading .original-stroke-svg path[stroke="#111"]{stroke:var(--ink)}
/* A compact badge behind the number preserves the full button and balanced columns. */
.toc-group.is-current .toc-number{background:transparent;color:#FFF;font-weight:600}
.toc-group.is-current .toc-number::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:2rem;max-width:100%;height:calc(1.25rem + 2px);transform:translate(-50%,-50%);border-radius:3px;background:var(--brand);pointer-events:none}
[data-theme="dark"] .toc-group.is-current .toc-number{color:#FFF}
.toc-add{display:flex;align-items:center;justify-content:center;width:var(--toc-control-width);min-height:32px;align-self:center;padding:4px;border-radius:5px;color:var(--inactive);touch-action:manipulation}
.toc-add .icon{width:18px;height:18px;stroke-width:2}

.toc-add:disabled{opacity:.25;cursor:default}
/* Keep the original reading line height; the hit target stays inside its row. */
.reading-notebook-row{display:flex;align-items:center;clear:both;gap:8px;width:100%}
.reading-notebook-text{display:block;flex:1;min-width:0;overflow-wrap:anywhere}
.entry-notebook-add{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;flex:0 0 44px;width:44px;height:auto;min-height:0;margin:0;padding:0 8px;border:0;border-radius:4px;background:transparent;color:var(--inactive);line-height:1;touch-action:manipulation;cursor:pointer}
.toc-add[aria-pressed="true"],.entry-notebook-add[aria-pressed="true"]{color:var(--green)}
.notebook-button-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:28px;height:21px;border:0;background:transparent;pointer-events:none}
.entry-notebook-add .icon{width:21px;height:21px;stroke-width:2}
.entry-notebook-add:focus-visible{outline:1px solid var(--green);outline-offset:-2px}
/* The 21px star paints 8.925px to either side of its center, including its
   rounded 2-unit stroke. Put that edge on the reader's content boundary and
   share its center with +/check, retaining both hit areas and row heights. */
#reader-content{--reader-action-axis:8.925px}
#reader-content .entry-star{margin-right:calc(var(--reader-action-axis) - 18px)}
#reader-content .entry-notebook-add{margin-right:calc(var(--reader-action-axis) - 22px)}
/* Component cards use the same action alignment within their own content column. */
.component-body .entry-notebook-add{margin-right:calc(var(--reader-action-axis) - 22px)}
.bookmark-star{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:38px;min-height:38px;padding:7px;border-radius:7px;background:transparent;color:var(--inactive);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.bookmark-star .icon{width:21px;height:21px;stroke-width:2;fill:none}
.bookmark-star[aria-pressed="true"]{color:var(--bookmark-color)}
.bookmark-star[aria-pressed="true"] .icon{fill:currentColor}
@media(hover:hover) and (pointer:fine){.bookmark-star[aria-pressed="false"]:not([data-touch-input]):hover{color:var(--bookmark-color)}}
.bookmark-star[aria-disabled="true"]{cursor:default}
.bookmark-star[data-color="blue"]{color:var(--review-blue)}
.bookmark-star[data-color="green"]{color:var(--review-green)}
.bookmark-star[data-color="red"]{color:var(--review-red)}
:root .toc-char[data-star-color="blue"]{color:var(--review-blue)}
:root .toc-char[data-star-color="green"]{color:var(--review-green)}
:root .toc-char[data-star-color="red"]{color:var(--review-red)}
.bookmark-star:focus-visible{outline-color:var(--bookmark-color);outline-offset:0}
.header-actions .saved-toggle{gap:6px;padding-inline:7px}
.saved-total-star{width:19px;height:19px;color:var(--ink);fill:currentColor}
[data-theme="dark"] .saved-total-star{color:var(--ink)}
.notebook-heading{align-items:center;justify-content:space-between;gap:8px;padding-top:8px;padding-bottom:4px}
.notebook-tabs{flex:1;min-width:0;align-items:baseline;flex-wrap:wrap;gap:0 10px}
.notebook-tab{flex:none;white-space:nowrap}
.notebook-practice-tab,.notebook-review-tab{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 4px;min-width:0;max-width:100%}
.notebook-count{flex:none;color:var(--muted);font-size:.9375rem;font-weight:400;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:default}
.notebook-tab[aria-selected="true"]+.notebook-count,.notebook-tab:hover+.notebook-count{color:var(--green)}
#notebook-count-value{color:#767676}
[data-theme="dark"] #notebook-count-value{color:var(--muted)}
.review-counts{display:inline-flex;align-items:baseline;gap:1px;flex:none;color:var(--muted);font-size:.9375rem;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:default}
.review-counts [data-color="blue"]{color:var(--review-blue)}.review-counts [data-color="green"]{color:var(--review-green)}.review-counts [data-color="red"]{color:var(--review-red)}
.notebook-focus-action{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;min-height:32px;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--muted);touch-action:manipulation}
.notebook-focus-action .icon{width:20px;height:20px;stroke-width:1.8}
.notebook-focus-action:not(:disabled):not([aria-disabled="true"]).is-touch-pressed{color:var(--accent-ink);background:var(--soft)}
@media(hover:hover) and (pointer:fine){.notebook-focus-action:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{color:var(--accent-ink);background:var(--soft)}}
.notebook-flash-entry{flex:none;width:50px;height:50px;min-height:50px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent-ink)}
.notebook-flash-entry:not(:disabled):not([data-touch-input]):active,.notebook-flash-entry:not(:disabled).is-touch-pressed{background:var(--soft);color:var(--accent-ink)}
@media(hover:hover) and (pointer:fine){.notebook-flash-entry:not(:disabled):not([data-touch-input]):hover{background:var(--soft);color:var(--accent-ink)}}
.notebook-flash-entry .icon{width:22px;height:22px}
.notebook-focus-open,.notebook-focus-open body{overflow:hidden}
.notebook-focus-open .site-header{z-index:30}
.notebook-focus-backdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45);touch-action:none}
.notebook-focus-dialog{position:fixed;inset:0;z-index:50;margin:auto;padding:0;width:400px;max-width:calc(100vw - 32px);height:min(420px,82dvh);max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:0 18px 65px #1C19172E;overflow:hidden}
.notebook-focus-dialog:not([open]){display:none}
.notebook-focus-dialog[open]{display:flex;flex-direction:column}
.notebook-focus-dialog::backdrop{background:transparent}
.notebook-focus-dialog,.notebook-focus-dialog *{animation:none!important;transition:none!important}
.notebook-focus-heading{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:8px;flex:none;padding:12px 20px 6px}
.notebook-focus-heading .notebook-focus-action{grid-column:3;width:32px;height:32px;min-height:32px}
.notebook-focus-navigation{grid-column:2;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.notebook-focus-step{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:10px;border-radius:5px;color:#888888;touch-action:manipulation}
.notebook-focus-step .icon{flex:none;width:16px;height:16px;stroke-width:1.7}
.notebook-focus-navigation .notebook-flash-count{flex:0 1 9ch;width:9ch}
.notebook-focus-dialog .notebook-relay-bar{padding-inline:20px;border-top:0}
.notebook-flash-action{position:relative;gap:0}
.notebook-flash-action .icon{width:22px;height:22px;stroke-width:2.5}
.notebook-flash-icon .notebook-flash-glyph{stroke-width:1.4}
.notebook-flash-count{grid-column:2;min-width:0;text-align:center;font-size:.875rem;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.notebook-flash-controls{display:none}
.notebook-flash-controls .notebook-flash-control,.notebook-flash-panel-visibility{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;min-height:50px;padding:10px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--green);font-size:.9375rem;font-weight:400;line-height:1.35;overflow-wrap:anywhere}
.notebook-flash-control .icon{flex:none;width:18px;height:18px}
.notebook-flash-controls .notebook-flash-control.is-touch-pressed{background:var(--soft);color:var(--accent-ink)}
.notebook-flash-controls .notebook-flash-star-visibility{color:#2D5A46}
.notebook-flash-star-visibility .icon{fill:none}
.notebook-flash-panel-visibility{display:none;flex:none;width:50px;height:50px;color:var(--accent-ink)}
.notebook-flash-star{display:flex;grid-column:1;align-items:center;justify-content:center;flex:none;width:32px;height:32px;min-height:32px;padding:4px;touch-action:manipulation}
.notebook-flash-star .icon{width:20px;height:20px}
/* Masked grades share one fixed appearance, including disabled mobile stars. */
#notebook-flash-star{background:transparent;color:var(--inactive)}
#notebook-flash-star:disabled{opacity:1}
#notebook-flash-star[data-color="blue"]{color:var(--review-blue)}
#notebook-flash-star[data-color="green"]{color:var(--review-green)}
#notebook-flash-star[data-color="red"]{color:var(--review-red)}
#notebook-flash-star .icon{fill:currentColor}
#notebook-flash-star[data-color="none"] .icon{fill:none}
#notebook-flash-star[data-colors-hidden="true"]{color:#A8A29E}
#notebook-flash-star[data-colors-hidden="true"] .icon{fill:currentColor}
.notebook-flash-stage{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;margin:6px 20px 14px;border:1px solid var(--line);border-radius:9px;background:#FFFFFF;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;scroll-behavior:auto}
/* Keep the one-line reading anchor; extra reading lines extend downward.
   The stage remains scrollable when enlarged text exceeds its visible area. */
.notebook-flash-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 33px;align-items:start;justify-items:center;flex:none;gap:12px;width:100%;margin-block:auto;padding:24px 20px;text-align:center}
.notebook-flash-char{display:block;font-size:72px;line-height:1.2;font-weight:400;color:var(--hanja-ink)}
.notebook-flash-reading{width:100%;min-height:33px;font-size:22px;line-height:1.5;font-weight:400;color:var(--accent-ink);white-space:pre-line;overflow-wrap:anywhere}
/* Each meaning occupies a flash-card line; extra lines grow below the fixed anchor. */
.notebook-flash-reading .reading-group{display:inline;white-space:pre-line}
/* Revealing or hiding a reading never changes the character's position. */
.notebook-flash-stage[data-answer-shown="false"] .notebook-flash-reading{visibility:hidden}
.notebook-flash-empty{padding:30px 18px;text-align:center}
[data-theme="dark"] .notebook-flash-char{color:var(--ink)}
[data-theme="dark"] .notebook-flash-controls .notebook-flash-star-visibility{color:var(--accent-ink)}
@media(min-width:1024px){
  .notebook-focus-open .notebook-panel{z-index:50}
  .notebook-focus-open.notebook-panel-frozen .notebook-panel{z-index:30}
  .notebook-panel-frozen .notebook-panel *{animation-play-state:paused!important;transition:none!important}
  /* Square learning area; reserve 142px for the frame and 32px outside it. */
  .notebook-focus-dialog{--flash-stage-size:min(340px,calc(100dvh - 174px));width:calc(var(--flash-stage-size) + 42px);height:fit-content}
  .notebook-flash-stage{flex:none;width:var(--flash-stage-size);height:var(--flash-stage-size);aspect-ratio:1 / 1}
  .notebook-focus-dialog .notebook-relay-bar{height:70px;padding:0 20px 20px;gap:8px}
  .notebook-flash-controls{display:block;flex:0 0 50px}
  .notebook-flash-controls .notebook-flash-control:not(.notebook-flash-star-visibility){display:none}
  .notebook-flash-panel-visibility{display:flex}
  .notebook-flash-action{flex:1;min-width:0;width:auto}
}
@media(min-width:1200px){.notebook-focus-open .notebook-panel{position:relative}}
@media(max-width:1023px){
  .notebook-focus-dialog{width:calc(100vw - 24px);max-width:480px;height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:none}
  .notebook-focus-heading{grid-template-columns:36px minmax(0,1fr) 36px;padding:12px 14px 6px}
  .notebook-focus-heading .notebook-focus-action,.notebook-flash-star{width:36px;height:36px;min-height:36px}
  .notebook-flash-stage{margin:6px 14px 12px}
  .notebook-flash-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .notebook-focus-dialog .notebook-relay-bar{height:auto;flex-direction:column;align-items:stretch;gap:12px;padding:0 14px max(14px,env(safe-area-inset-bottom,0px));border-top:0}
}
.practice-tools{flex:none;min-width:0}
.review-tools{display:flex;flex:none;align-items:center;gap:var(--notebook-control-gap);min-width:0}
.notebook-icon-button:is(.notebook-sort,.review-sort) .icon{width:20px;height:20px;stroke-width:2}
.review-filters{display:flex;align-items:center;gap:var(--notebook-control-gap)}
.review-filter,.review-star{display:flex;align-items:center;justify-content:center;flex:none;border-radius:5px;touch-action:manipulation}
.review-filter{width:var(--notebook-control-size);height:var(--notebook-control-size);padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.review-filter .icon{width:18px;height:18px;fill:currentColor;stroke-width:1.5}
.review-star{width:32px;min-height:44px;padding:5px}.review-star .icon{width:22px;height:22px;fill:currentColor;stroke-width:1.5}
.review-star[data-color="none"]{color:var(--inactive)}.review-star[data-color="none"] .icon{fill:none}
.review-filter[data-color="blue"],.review-star[data-color="blue"]{color:var(--review-blue)}
.review-filter[data-color="green"],.review-star[data-color="green"]{color:var(--review-green)}
.review-filter[data-color="red"],.review-star[data-color="red"]{color:var(--review-red)}
.review-filter[aria-pressed="false"]{color:var(--inactive)}.review-filter[aria-pressed="false"] .icon{opacity:.4}

/* Both tabs use the same Hanja, reading, detail, star and remove centers.
   A missing example or hidden checkbox cannot change the column geometry. */
.notebook-panel{--study-row-columns:38px 64px minmax(0,1fr) 32px 28px;--study-row-gap:10px}
.notebook-card{display:grid;grid-template-columns:var(--study-row-columns);gap:var(--study-row-gap);justify-items:center;padding:5px 8px;border-color:var(--line);user-select:none;-webkit-user-select:none}
.notebook-char,.notebook-answer{border:1px solid transparent;border-radius:8px;background:transparent}
.notebook-char{grid-column:1;position:relative;isolation:isolate;flex:none;width:38px;height:38px;justify-content:center;min-height:38px;color:var(--ink);font-size:1.625rem}
.notebook-glyph{display:block;line-height:1;transform:translateY(-1.5px)}
.notebook-char:hover,.history-char:hover{color:var(--blue)}
.notebook-star{grid-column:4;width:32px;margin:0;padding:5px}
.notebook-remove{grid-column:5;display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:44px;padding:0;border-radius:5px;color:var(--inactive);touch-action:manipulation}
.notebook-remove .icon{width:20px;height:20px;stroke-width:1.6}

.notebook-answer{grid-column:2;position:relative;flex-direction:column;align-self:stretch;width:100%;min-width:0;max-width:none;min-height:3rem;height:3rem;padding:4px 0;border:0;line-height:1.4;word-break:keep-all}
.notebook-reading{display:block;flex:none;width:100%;font-size:.9375rem;line-height:1.25;white-space:nowrap;overflow-wrap:normal;word-break:normal}
.notebook-hun,.notebook-sound{display:block}
.notebook-reading.len-3{font-size:.9375rem}
.notebook-reading.len-4{font-size:.875rem;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:keep-all}
.notebook-answer:has(.notebook-reading.len-4){padding-block:0}
.notebook-answer[data-multiline="true"] .notebook-reading{line-height:1.15}
.notebook-answer[data-multiline="true"] .notebook-reading.len-4{line-height:1.1}
/* Long readings wrap inside their own column without pushing the other items. */
.notebook-answer-prompt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.9375rem}
.notebook-answer[data-revealed="false"] .notebook-reading{visibility:hidden}
/* Same-sound meanings share one sound. Different sounds stay complete at a wrap. */
.reading-group{display:inline-block;max-width:100%;white-space:nowrap;vertical-align:baseline}
.reading-group-separator{white-space:pre}
.notebook-reading .reading-meaning,.review-answer .reading-meaning{display:inline-block;max-width:100%;white-space:normal;word-break:keep-all;overflow-wrap:break-word}
.review-answer .reading-group{display:inline;white-space:normal}
.notebook-hun .lesson-hun[data-hun-kind="native"]{color:var(--hun-native)}
.notebook-hun .lesson-hun[data-hun-kind="usage"]{color:var(--hun-usage)}
.notebook-hun .lesson-hun[data-hun-kind="other"]{color:var(--hun-other)}
.notebook-hun .lesson-reading-separator{color:var(--ink)}
.notebook-answer[data-revealed="false"]{font-size:.9375rem;color:var(--blue)}
.notebook-question>.notebook-answer{margin:0}
.notebook-hint{grid-column:3;width:100%;min-width:0;margin:0;overflow:hidden;color:var(--muted);font-size:.9375rem;font-weight:400;line-height:1.25;text-align:center}
.notebook-hint-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;max-height:2.5em;padding-inline:3px;overflow:hidden;overflow-wrap:anywhere;word-break:keep-all}
[data-notebook-hints="off"] .notebook-hint{visibility:hidden}
[data-theme="dark"] .notebook-hint{color:var(--muted)}
.notebook-answer:not(:disabled):hover{background:transparent;color:var(--blue)}
/* Fade only the Hanja's backing layer; glyphs and answers stay fully opaque. */
.notebook-char::before{content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;border:1.5px solid var(--green);border-radius:8px;background:var(--soft);opacity:0;transition:none}
[data-theme="dark"] .notebook-char::before{background:var(--soft)}
.notebook-card.is-relay-current .notebook-char::before{transition:opacity .35s ease-out}
.notebook-card.is-relay-current.is-char-focused .notebook-char::before{opacity:1;transition:none}
.notebook-relay{background:var(--surface)}
:root .entry-original .lesson-hun[data-hun-kind="native"]{color:var(--hun-native)!important}
:root .entry-original .lesson-hun[data-hun-kind="usage"]{color:var(--hun-usage)!important}
:root .entry-original .lesson-hun[data-hun-kind="other"]{color:var(--hun-other)!important}
.entry-original .lesson-reading-separator{color:var(--ink)!important}
.entry-original .lesson-dual-meanings p{margin:0}
.entry-original .lesson-meaning-block+.lesson-meaning-block{margin-top:16px}
.entry-original .lesson-combined-reading{display:block;margin-top:5px;font-size:1.0625rem}
.entry-original .lesson-meaning-examples{font-size:1rem;line-height:1.9}
[data-theme="dark"] .notebook-answer[data-revealed="false"]{color:var(--blue)}
@media(max-width:1199px){.notebook-panel .notebook-heading{padding-top:8px}}
@media(max-width:639px){
  .header-actions .saved-toggle{gap:5px;padding-inline:4px;font-size:.875rem}
}
@media(max-width:380px){
  .notebook-panel{--study-row-gap:8px}
  .notebook-toolbar{--notebook-control-size:33px;--notebook-control-gap:6px;padding-inline:10px 16px}
  .notebook-icon-button:is(.notebook-sort,.review-sort) .icon{width:18px;height:18px}
  .notebook-icon-button{padding:6px}
  .header-actions .saved-toggle{gap:5px;padding-inline:3px}
  .notebook-heading{gap:6px}
  .notebook-tabs{column-gap:8px}
  .entry-heading .entry-meta{flex-basis:90px}
}

/* Both mobile tabs keep six equal toolbar squares. */
@media(max-width:900px){
  #notebook-panel .notebook-toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:clamp(6px,3%,8px);row-gap:0;align-items:center;justify-content:normal;padding:8px 14px 15px;overflow:hidden;scrollbar-gutter:stable}
  #notebook-panel .notebook-toolbar .practice-tools:not([hidden]),#notebook-panel .notebook-toolbar .review-filter-slot{display:contents}
  #notebook-panel .notebook-toolbar :is(.notebook-icon-button,.review-filter){position:relative;width:100%;height:auto;min-height:0;aspect-ratio:1;padding:4px;border-radius:8px}
  /* Invisible vertical padding preserves a 44px touch height on narrow phones. */
  #notebook-panel .notebook-toolbar :is(.notebook-icon-button,.review-filter)::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
  #notebook-panel .notebook-toolbar .icon{width:20px;height:20px}
  #notebook-panel .notebook-toolbar :is(.notebook-sort,.review-sort) .icon{width:22px;height:22px}
  #notebook-panel .notebook-toolbar .notebook-shuffle .icon{width:24px;height:24px}
  #notebook-panel .notebook-toolbar .notebook-speed{padding-inline:2px;font-size:.9375rem}
  #notebook-panel .notebook-toolbar .notebook-hints-button .hanja{font-size:1.25rem}
}

/* Grow desktop controls toward their lower/right edges. The negative bottom
   margin preserves the toolbar/card height; space-between keeps both card edges aligned. */
@media(min-width:901px){
  .notebook-toolbar :is(.notebook-icon-button,.review-filter){width:calc(var(--notebook-control-size) + 1px);height:calc(var(--notebook-control-size) + 1px);min-height:calc(var(--notebook-control-size) + 1px);margin-bottom:-1px}
  .notebook-toolbar .notebook-icon-button{padding-right:9px;padding-bottom:9px}
  .notebook-toolbar .notebook-speed{padding-right:3px}
  .notebook-toolbar .review-filter{padding-right:7px;padding-bottom:7px}
}

@media(min-width:901px){#review-scroll .history-choice input{width:17.28px;height:17.28px;border-width:1.08px;border-radius:2.16px;background-size:15.12px 15.12px}}

/* Screenshot-led wrong-note rows: each of the six controls owns one cell.
   Keep the toolbar independent; no accumulated glyph offsets or gutter targets. */
#review-scroll{--review-content-inset:8px;padding-inline:10px 14px}
#review-scroll .history-row{padding-inline:0}
#review-scroll .review-card-line{grid-template-columns:34px 42px minmax(0,1fr) 48px 48px 40px;column-gap:0;padding-inline:0;height:auto;min-height:var(--review-row-height);border-bottom-color:transparent}
#review-scroll .history-choice{position:static;inset:auto;grid-column:1;transform:none;justify-self:end;width:32px;height:44px}
#review-scroll .history-entry{grid-column:2;justify-self:end;width:34px;margin:0;padding-right:6px}
#review-scroll .review-answer{grid-column:3;width:100%;margin:0;padding-left:4px;transform:none}
#review-scroll .review-memo{grid-column:4;width:100%}
#review-scroll .review-star{grid-column:5;width:100%}
#review-scroll .review-memo .icon{transform:translate(2px,1px);pointer-events:none}
/* Mobile optical alignment only; preserve the desktop offset and control geometry. */
@media(max-width:900px){#review-scroll .review-memo .icon{transform:translate(2px,0px)}}
#review-scroll .review-star .icon{transform:translateX(1px);pointer-events:none}
#review-scroll .review-remove{grid-column:6;width:100%}
/* Keep the divider at the checkbox; memo text starts at the centered Hanzi glyph. */
#review-scroll .review-card-line::after{content:"";position:absolute;left:var(--review-content-inset);right:0;bottom:-1px;height:1px;background:var(--line);pointer-events:none}
#review-scroll .history-row[data-memo-expanded="true"] .review-card-line::after{display:none}
#review-scroll .review-memo-details{margin-left:var(--review-content-inset);padding:0 0 10px;padding-inline-start:calc(56px - 1.625rem/2 - var(--review-content-inset))}

/* Desktop wrong-note rows receive only the requested1px extra left spacing. */
@media(min-width:901px){#review-scroll .history-row{margin-left:1px}}

/* White surfaces stay local to the notebook; component paper remains ivory. */
.notebook-panel{--surface:var(--panel-surface)}
.notebook-panel :is(.notebook-card,.notebook-icon-button,.review-filter,.notebook-relay,.notebook-flash-entry,.history-add,.review-memos-toggle){border-color:var(--panel-rule)}
/* Independent white buttons sit directly on the ivory panel. */
.notebook-toolbar .notebook-icon-button[aria-pressed="false"]{color:var(--muted)}
.notebook-toolbar .notebook-icon-button[aria-pressed="true"]{color:var(--green)}
.notebook-toolbar .notebook-icon-button .icon,.notebook-toolbar .notebook-hints-button[aria-pressed]{color:var(--green)}
/* The global memo sheet shows text only while at least one memo is expanded. */
.review-memos-toggle .review-memos-lines{display:none}
.review-memos-toggle:is([aria-pressed="true"],[aria-pressed="mixed"]) .review-memos-lines{display:inline}
:root[data-theme="dark"]{--panel-surface:var(--surface);--panel-rule:var(--line)}

/* Warm ink follows the same tokens in reader text, component cards and examples.
   Inline colors are preserved in source content and themed only at presentation. */
:root .entry-original [style*="color:#0b0b0b" i],
:root .entry-original [style*="color:#000" i],
:root .entry-original [style*="color:#111" i],
:root .entry-original [style*="color:#151515" i]{color:var(--ink)!important}
:root .entry-original [style*="color:#787878" i],
:root .entry-original [style*="color:#777" i],
:root .entry-original [style*="color:#888" i]{color:var(--muted)!important}
:root .entry-heading h2,:root .notebook-char,:root .history-char{color:var(--hanja-ink)}
:root .entry-heading .original-stroke-svg path[fill="#111"]{fill:var(--hanja-ink)}
:root .entry-heading .original-stroke-svg path[stroke="#111"]{stroke:var(--hanja-ink)}
/* Aggregate controls stay neutral; only individual review stages carry stage colors. */
.header-actions :is(.icon-button,.grade-trigger,.saved-toggle),
.header-actions .saved-total-star{color:var(--ink)}
.header-active-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
/* Follow actual panel/menu state, never transient touch focus or hover. */
@media(max-width:900px){
  .header-active-icon{position:relative;isolation:isolate}
  .header-actions #saved-toggle{position:relative;isolation:isolate;gap:3px;padding-inline:6px}
  .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle)[aria-expanded="true"]{color:var(--ink)}
  .header-actions :is(#toc-toggle,#more-toggle)[aria-expanded="true"] .header-active-icon::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:6px;background:#E8F3ED;z-index:-1;pointer-events:none}
  /* The star and its live count share one compact, naturally sized highlight. */
  .header-actions #saved-toggle[aria-expanded="true"]::before{content:"";position:absolute;inset-inline:0;top:50%;height:30px;transform:translateY(-50%);border-radius:6px;background:#E8F3ED;z-index:-1;pointer-events:none}
  .header-actions #saved-toggle[aria-expanded="true"] .saved-total-star{color:inherit}
}
/* Keep amber text and small stars on pale paper, including hovered/selected rows. */
:root .toc-group.is-current{background:var(--panel-surface);border-color:var(--panel-rule);border-radius:10px}

@media(hover:hover) and (pointer:fine){:root .bookmark-star:not([aria-disabled="true"]):not([data-touch-input]):hover{background:var(--reading-hover)}}


:root .history-row.is-selected{background:var(--surface);border-bottom-color:var(--line)}
:root .notebook-char:hover,:root .history-char:hover{color:var(--green)}

/* Owner-authored text preserves intentional line breaks without changing source typography. */
.content-edited-copy,.admin-authored-copy{white-space:pre-line}

.notebook-reading .notebook-inline-hun,.notebook-reading .notebook-inline-sound{display:inline}
.notebook-hun[data-hun-kind=native]{color:var(--hun-native)}
.notebook-hun[data-hun-kind=usage]{color:var(--hun-usage)}
.notebook-hun[data-hun-kind=other]{color:var(--hun-other)}
.content-edited-copy,.content-additional,.content-supplement{color:var(--ink)}
.lesson-vocabulary .vocabulary-link.vocabulary-in-grade{color:var(--ink)}

/* Retain the first page's opening spacing without a separate width or surface. */
.reader-component-cards .component-slot-inner{padding-top:8px}
.lesson-vocabulary .vocabulary-link.vocabulary-out-of-grade{color:var(--vocabulary-muted)}
[data-theme="dark"] [data-copy-color="black"]{color:var(--ink)!important}
[data-theme="dark"] [data-copy-color="gray"]{color:var(--vocabulary-muted)!important}

/* Per-occurrence glyph sizing follows the surrounding text. Relative top leaves line metrics intact. */
:root img.lesson-glyph[data-glyph-scale]{font-size:inherit!important;display:inline-block;width:auto!important;height:var(--content-glyph-height,1em)!important;max-width:none!important;max-height:none!important;object-fit:contain;vertical-align:-.12em;transform:none!important}
:root img.lesson-glyph[data-glyph-offset]{position:relative;top:var(--content-glyph-offset,0px)}

/* Map black strokes to #787878, leaving white and alpha unchanged (sRGB filters).
   The two inversions keep white backgrounds white; opacity would depend on the page color.
   Keep multiply after recoloring so white paper blends into ivory component chips. */
:root img[data-glyph-ink="black"]{filter:grayscale(1)!important;mix-blend-mode:multiply!important}
:root img[data-glyph-ink="gray"]{filter:grayscale(1) invert(1) brightness(.5294117647058824) invert(1)!important;mix-blend-mode:multiply!important}
/* Follow the existing glyph inversion on dark surfaces, including white-backed scans. */
:root[data-theme="dark"] img[data-glyph-ink="black"]{filter:grayscale(1) invert(1)!important;mix-blend-mode:screen!important}
:root[data-theme="dark"] img[data-glyph-ink="gray"]{filter:grayscale(1) invert(1) brightness(.5294117647058824)!important;mix-blend-mode:screen!important}
/* Selected component labels stay on white paper in either theme. */
:root[data-theme="dark"] :is(.component-link.is-selected,.component-tab.is-selected .component-tab-box) img.lesson-glyph{filter:grayscale(1)!important;mix-blend-mode:multiply!important}

/* Managed large pictures share one height and keep their natural aspect ratios. */
.entry-original .content-large-gallery{display:block;position:relative;max-width:100%;min-width:0;margin-block:2px}
.entry-original .content-large-gallery .lesson-image-strip{display:block;max-width:100%;overflow-x:auto;overflow-y:hidden}
.entry-original .content-large-gallery .lesson-image-item{display:contents}
.entry-original .content-large-gallery .lesson-illustration{display:inline-block;height:var(--lesson-image-height,var(--hanja-img-height));width:auto;max-width:none;margin:0}
.component-scroll .entry-original .content-large-gallery .lesson-image-strip{display:flex;flex-wrap:nowrap}
.component-scroll .entry-original .content-large-gallery .lesson-image-item{display:block;flex:0 0 auto}
.component-scroll .entry-original .content-large-gallery .lesson-illustration{display:block}
@media(max-width:900px){.entry-original .content-large-gallery .lesson-image-strip{display:flex;flex-wrap:nowrap;gap:8px}.entry-original .content-large-gallery .lesson-image-item{display:block;flex:0 0 auto}.entry-original .content-large-gallery .lesson-illustration{display:block}}

/* Invalid public character links remain inside the main reader viewport. */
.reader-route-unavailable>.reader{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:24px;padding-bottom:24px;box-sizing:border-box}
.reader-route-unavailable .reader-description{display:none}
.reader-route-unavailable #reader-content{width:100%}
.route-unavailable-card{width:100%;max-width:480px;margin:0 auto;padding:32px 24px;box-sizing:border-box;background:#fff;border:1px solid #e5e7eb;border-radius:16px;text-align:center;color:#374151}
.route-unavailable-icon{width:38px;height:38px;margin-bottom:14px;color:#a3aaa5}
.route-unavailable-card h2{margin:0;font-family:inherit;font-size:1.125rem;line-height:1.55;font-weight:600;word-break:keep-all}
.route-unavailable-card p{margin:12px 0 22px;font-size:.9375rem;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;color:#6b7280}
.route-first-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 20px;box-sizing:border-box;border:1px solid #d6ddd7;border-radius:8px;color:var(--green);background:#f8faf8;text-decoration:none;font-size:.9375rem}
.route-first-button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:900px){.has-scroll-header .reader-route-unavailable>.reader{padding-top:calc(var(--header-height) + 24px)}}
@media(max-width:380px){.route-unavailable-card{padding:26px 18px}}

.reader-load-failed>.reader{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:24px;padding-bottom:24px;box-sizing:border-box}
.reader-load-failed .reader-description,.reader-load-failed #reader-content{display:none}
.reader-load-failed .reader-error{width:100%;max-width:480px;margin:0 auto;padding:32px 24px;box-sizing:border-box;background:#fff;border:1px solid #e5e7eb;border-radius:16px;text-align:center;color:#374151}
.reader-load-failed .reader-error h2{margin:0;font-family:inherit;font-size:1.125rem;line-height:1.55;font-weight:600;word-break:keep-all}
.reader-load-failed .reader-error p{margin:12px 0 22px;font-size:.9375rem;line-height:1.7;word-break:keep-all;color:#6b7280}
.reader-load-failed .reader-error button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:0 auto;padding:10px 22px;border:1px solid #d6ddd7;border-radius:9px;background:#f8faf8;color:var(--green);text-decoration:none}
.reader-load-failed .reader-error button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:900px){.has-scroll-header .reader-load-failed>.reader{padding-top:calc(var(--header-height) + 24px)}}
@media(max-width:380px){.reader-load-failed .reader-error{padding:28px 18px}}

/* Desktop pane controls share a stable numeric badge. DOM order is shared across widths. */
#toc-group-count{display:none}
@media(min-width:901px){
  .header-actions>#search-toggle,.header-actions>#grade-picker{left:0}
  .header-actions :is(#toc-toggle,#saved-toggle){display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:72px;height:32px;min-height:32px;align-self:center;padding:1px 10px;border-radius:8px;font-size:.9375rem;color:#222;background:transparent}
  .header-actions :is(#toc-toggle,#saved-toggle)[aria-expanded="true"]{background:transparent;color:var(--ink)}
  .header-actions :is(#toc-toggle,#saved-toggle) .saved-total-star{color:inherit}
  .header-actions :is(#toc-toggle,#saved-toggle):focus-visible{outline:2px solid var(--green);outline-offset:2px}
  #toc-group-count{display:inline-block;width:3ch;text-align:center;font-variant-numeric:tabular-nums}
  .study-layout{--desktop-toc-width:20.5rem;grid-template-columns:var(--desktop-toc-width) minmax(0,1fr) var(--notebook-width)}
  .study-layout.desktop-toc-hidden{grid-template-columns:0px minmax(0,1fr) var(--notebook-width)}
  .study-layout.desktop-notebook-hidden{grid-template-columns:var(--desktop-toc-width) minmax(0,1fr) 0px}
  .study-layout.desktop-toc-hidden.desktop-notebook-hidden{grid-template-columns:0px minmax(0,1fr) 0px}
}
@media(min-width:901px) and (max-width:1199px){
  .study-layout,.study-layout.desktop-notebook-hidden{grid-template-columns:var(--desktop-toc-width) minmax(0,1fr) 0px}
  .study-layout.desktop-toc-hidden{grid-template-columns:0px minmax(0,1fr) 0px}
}
@media(min-width:1600px){.study-layout{--desktop-toc-width:21.5rem}}

/* Explicit desktop tracks preserve immediate panel placement. */
@media(min-width:901px){
  .study-layout>#toc-panel{grid-column:1;grid-row:1}
  .study-layout>#explorer{grid-column:2;grid-row:1;min-width:0}
  .study-layout>#notebook-panel{grid-column:3;grid-row:1}
  .study-layout>:is(#toc-panel,#notebook-panel){min-width:0;max-width:none;overflow:hidden;padding:0;border-left:0;border-right:0}
  #toc-board>.panel-content,#toc-board>.toc-footer{width:var(--desktop-toc-width);min-width:var(--desktop-toc-width);border-right:1px solid var(--line)}
  #notebook-board>.panel-content{width:var(--notebook-width);min-width:var(--notebook-width);border-left:1px solid var(--line)}
}

/* Desktop boards have a definite, constant box independent of their grid slot.
   Layout/paint containment isolates descendants without size containment or estimates.
   Mobile keeps the original flex children through a box-free wrapper. */
.desktop-panel-board{display:contents}
@media(min-width:901px){
  #toc-panel{position:relative}
  .desktop-panel-board{position:absolute;inset-block:0;left:0;display:flex;flex-direction:column;min-height:0;contain:layout paint;overflow:hidden}
  #toc-board{width:var(--desktop-toc-width)}
  #notebook-board{width:var(--notebook-width)}
}
@media(min-width:1200px){#notebook-panel{position:relative}}

.header-actions #saved-toggle{gap:4px}
#saved-count{width:auto;min-width:0;flex:none;text-align:center;font-variant-numeric:tabular-nums}
@media(min-width:901px){
  .header-actions{gap:8px}
  .header-actions>#search-toggle{margin-inline-start:8px}
  .header-actions #saved-toggle{width:auto;min-width:0;padding:0 10px}
}
.site-tooltip{position:fixed;inset:auto;margin:0;border:0;box-sizing:border-box;z-index:100;max-width:calc(100vw - 16px);overflow:auto;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.85);color:#fff;font-size:12px;font-weight:400;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms ease,visibility 0s linear 150ms}
.site-tooltip[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.site-tooltip{transition:none}}

.site-tooltip::backdrop{background:transparent;pointer-events:none}

/* Optical alignment of header digits without changing layout boxes. */
#toc-group-count,#saved-count{transform:translateY(-1px)}


/* Align the menu text to the measured trigger label, including its border. */
.header-actions .grade-menu{left:0;right:auto;padding-inline:0;max-width:calc(100vw - 24px)}
.header-actions .grade-menu button{padding-left:var(--grade-label-inset,9px);padding-right:12px;gap:8px;white-space:nowrap}
/* Inset stroke preserves every header control's existing geometry. */
:root[data-theme="dark"] .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle){background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#d1d5db}
:root[data-theme="dark"] .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle)[aria-expanded="true"],
:root[data-theme="dark"] .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle):active{background:rgba(255,255,255,.16);color:#d1d5db}
:root[data-theme="dark"] .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle)::before,
:root[data-theme="dark"] .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle) .header-active-icon::before{display:none}
:root[data-theme="dark"] .header-actions #saved-toggle .saved-total-star{color:inherit}

/* Upper-body search dialog retains content-sized three-row results. */
#search-panel{position:relative;flex:none;min-height:0;width:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:inherit}
#search-panel .search-form{width:100%;max-width:none;height:48px;min-height:48px;margin:0;padding:2px 10px;gap:6px;align-items:center;border-bottom:1px solid var(--line)}
#search-panel .search-form>.icon{width:18px;height:18px;flex:none}
#search-panel #search-close{width:44px;min-width:44px;height:44px;padding:9px;flex:none;border-radius:6px}
#search-panel #search-input{height:44px;color:inherit;font-size:14px;outline-offset:-2px}
#search-panel .search-results{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;width:100%;max-width:none;min-height:0;margin:0;padding:8px;max-height:min(var(--search-rows-height,240px),var(--search-available-height,40dvh));scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;border-bottom:1px solid var(--line)}
#search-panel .search-results::-webkit-scrollbar{width:6px;height:6px}
#search-panel .search-results::-webkit-scrollbar-track{background:transparent}
#search-panel .search-results::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:6px}
#search-panel .search-result{gap:10px;padding:8px 10px}
#search-panel .search-result[aria-selected="true"]{background:#E7EFE5}
:root[data-theme="dark"] #search-panel .search-result[aria-selected="true"]{background:#35433A}


/* Compact header keeps the brand accessible while making room for its group number. */
@media(max-width:900px){
  .header-actions #toc-toggle{width:auto;min-width:0;height:44px;min-height:44px;padding:0 8px;gap:5px;font-size:.9375rem}
  #toc-group-count{display:inline-block;width:3ch;min-width:3ch;flex:none;text-align:center;font-variant-numeric:tabular-nums}
}
@media(max-width:429px){.header-inner>.brand>span{display:none}}

/* Preserve the established PC header action axis. */
@media(min-width:901px){
  .header-inner{padding-right:6px}
  #notebook-panel .notebook-heading{gap:2px}
  #notebook-panel .notebook-tabs{flex-wrap:nowrap;column-gap:6px}
  #notebook-panel :is(.notebook-practice-tab,.notebook-review-tab){flex-wrap:nowrap;column-gap:2px}
  #notebook-panel :is(.notebook-tab,.notebook-count,.review-counts){font-size:14px;font-weight:500}
  #notebook-panel .notebook-tab[aria-selected="true"],#notebook-panel .notebook-tab[aria-selected="true"]+.notebook-count{font-weight:600}
  #notebook-panel .review-counts{gap:0;font-weight:400}
}
@media(min-width:1600px){.header-inner{padding-right:12px}}

/* Three ghost header controls retain44px targets and transient32px feedback. */
.header-actions{gap:12px}
.header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto;min-width:44px;height:44px;min-height:44px;padding:0 12px;gap:4px;align-self:center;border:0;border-radius:9999px;background:transparent;box-shadow:none;color:var(--ink);font-size:15px;line-height:1;white-space:nowrap}
.header-actions #more-toggle.header-chip{width:44px;padding:0}
.header-actions :is(#toc-toggle,#saved-toggle).header-chip{gap:5px}
.header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip .header-active-icon::before{display:none}
.header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip::before{content:"";display:block;position:absolute;inset:6px 4px;height:32px;transform:none;border-radius:6px;background:transparent;box-shadow:none;z-index:-1;pointer-events:none}
:root[data-theme="dark"] .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip::before{display:block;background:transparent;box-shadow:none}
.header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip:focus-visible{outline:2px solid var(--green);outline-offset:1px}

#toc-group-count{display:inline-block;flex:none;width:3ch;min-width:3ch;text-align:center}
.header-actions .header-number{font-size:14px;font-weight:500;line-height:1;color:#475569;font-variant-numeric:tabular-nums;transform:translateY(-1px)}
:root[data-theme="dark"] .header-actions .header-number{color:#94a3b8}
.header-inner>.brand>span{display:block}
.toc-panel .pane-heading{gap:6px;flex-wrap:nowrap}
.toc-panel .pane-heading h2{white-space:nowrap;flex:none}
.toc-panel #grade-picker{align-self:center;flex:none}
.toc-panel .grade-trigger{padding:0 5px;min-height:44px;gap:3px;font-size:13px;color:var(--ink)}
.toc-panel #toc-count{margin-left:auto;font-size:12px}
#grade-menu{position:fixed;z-index:1000;left:0;right:auto;top:0;width:140px;padding-inline:0;max-width:calc(100vw - 24px)}
#grade-menu button{padding-left:var(--grade-label-inset,9px);padding-right:12px;gap:8px;white-space:nowrap}
@media(max-width:900px){
 .header-actions{gap:4px}
 .header-actions :is(#toc-toggle,#saved-toggle).header-chip{padding-inline:8px;translate:2px 0}
}
@media(max-width:380px){
 .header-actions{gap:2px}
 .header-actions :is(#toc-toggle,#saved-toggle).header-chip{padding-inline:6px;font-size:14px}
}

:root[data-theme="dark"] .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip{background:transparent;box-shadow:none;color:#d1d5db}

/* One 48px TOC row keeps full labels and distinct 44px action targets. */
.toc-panel .toc-heading{display:flex;flex-direction:row;align-items:baseline;flex-wrap:nowrap;gap:8px;height:48px;min-height:48px;padding:1px 18px 2px}
.toc-panel .toc-heading h2{font-size:15px;flex:none;white-space:nowrap}
.toc-panel .toc-heading #toc-count{margin-left:0;font-size:14px;flex:none;color:#64748b;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .toc-panel .toc-heading #toc-count{color:#94a3b8}
.toc-panel .toc-heading #grade-picker{display:inline-flex;align-items:baseline;align-self:baseline;flex:none}
.toc-panel .toc-heading .grade-trigger{position:relative;isolation:isolate;min-height:44px;height:44px;padding:4px 8px;gap:3px;font-size:14px;font-weight:600;line-height:20px;background:transparent;border:0;box-shadow:none;color:#1e293b}
.toc-panel .toc-heading .grade-trigger::before{content:"";position:absolute;inset:8px 0;border-radius:6px;background:transparent;pointer-events:none;z-index:-1}
:root[data-theme="dark"] .toc-panel .toc-heading .grade-trigger{color:#f8fafc}

.toc-panel .grade-chevron{width:14px;height:14px;flex:none}
.toc-heading-actions{display:flex;align-items:center;align-self:center;gap:0;margin-left:auto;flex:none}
.toc-heading-actions .icon-button{width:44px;min-width:44px;height:44px;min-height:44px;margin:0;flex:none}
@media(max-width:320px){.toc-panel .toc-heading{padding-left:14px;padding-right:14px}}
.keyboard-navigation .toc-heading button:focus-visible,.keyboard-navigation #search-panel button:focus-visible,.toc-heading button:focus-visible,#search-panel button:focus-visible{outline-offset:-2px}


/* Numeric UI fragments retain the site font and tabular spacing. */
.panel-number{font-variant-numeric:tabular-nums}

/* Consistent, bounded learner-control feedback. Never animate pane geometry. */
:root{--control-feedback:rgba(0,0,0,.05);--control-selected-feedback:color-mix(in srgb,var(--soft),black 8%)}
:root[data-theme="dark"]{--control-feedback:rgba(255,255,255,.08);--control-selected-feedback:color-mix(in srgb,var(--soft),white 8%)}
:root :is(#search-close,.notebook-toolbar .notebook-icon-button,.notebook-toolbar .review-filter,.more-menu .more-item,.more-menu .cloud-login-hint,#notebook-panel .notebook-relay,#notebook-panel .history-add,#notebook-panel .review-memos-toggle,#notebook-panel .notebook-focus-action,#tools-cancel:not([aria-busy="true"]):not([aria-busy="true"] *)){border-radius:6px;transition:background-color .15s ease}
:root .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip::before,:root .toc-panel .toc-heading #grade-trigger::before{transition:background-color .15s ease}
:root #tools-confirm{transition:background-color .15s ease}
@media(hover:hover) and (pointer:fine){
 :root :is(#search-close,.notebook-toolbar .notebook-icon-button,.notebook-toolbar .review-filter,.more-menu .more-item,.more-menu .cloud-login-hint,#notebook-panel .notebook-relay,#notebook-panel .history-add,#notebook-panel .review-memos-toggle,#notebook-panel .notebook-focus-action,#tools-cancel:not([aria-busy="true"]):not([aria-busy="true"] *)):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{background-color:var(--control-feedback)}
 :root .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before,:root .toc-panel .toc-heading #grade-trigger:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--control-feedback)}
 :root #tools-confirm:not([aria-busy="true"]):not([aria-busy="true"] *):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{background-color:color-mix(in srgb,var(--button-green),black 6%)}
}
:root :is(#search-close,.notebook-toolbar .notebook-icon-button,.notebook-toolbar .review-filter,.more-menu .more-item,.more-menu .cloud-login-hint,#notebook-panel .notebook-relay,#notebook-panel .history-add,#notebook-panel .review-memos-toggle,#notebook-panel .notebook-focus-action,#tools-cancel:not([aria-busy="true"]):not([aria-busy="true"] *)):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active,:root :is(#search-close,.notebook-toolbar .notebook-icon-button,.notebook-toolbar .review-filter,.more-menu .more-item,.more-menu .cloud-login-hint,#notebook-panel .notebook-relay,#notebook-panel .history-add,#notebook-panel .review-memos-toggle,#notebook-panel .notebook-focus-action,#tools-cancel:not([aria-busy="true"]):not([aria-busy="true"] *)):not(:disabled):not([aria-disabled="true"]).is-touch-pressed{background-color:var(--control-feedback)}
:root .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,:root .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before,:root .toc-panel .toc-heading #grade-trigger:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,:root .toc-panel .toc-heading #grade-trigger:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--control-feedback)}
:root #tools-confirm:not([aria-busy="true"]):not([aria-busy="true"] *):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active,:root #tools-confirm:not([aria-busy="true"]):not([aria-busy="true"] *):not(:disabled):not([aria-disabled="true"]).is-touch-pressed{background-color:color-mix(in srgb,var(--button-green),black 6%)}
@media(hover:hover) and (pointer:fine){:root :is(#notebook-relay,#notebook-history-add):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){:root :is(#notebook-relay,#notebook-history-add){transform:none!important}}

/* A component X keeps its existing24px circle inside the existing hit area. */
:root .component-tab-close{isolation:isolate;background:transparent}
:root .component-tab-close::before{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;background-color:transparent;transition:background-color .15s ease}
@media(hover:hover) and (pointer:fine){:root .component-tab-close:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--control-feedback)}}
:root .component-tab-close:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,:root .component-tab-close:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--control-feedback)}
/* Actual touch input switches feedback immediately, including on hybrid devices. */
:root :is(#toc-toggle,#saved-toggle,#more-toggle,#grade-trigger,#search-toggle,#search-close,.notebook-toolbar button,.toc-char,.toc-add,.toc-footer a,.component-tab-close,.more-menu button,.more-menu a,#notebook-panel .notebook-relay,#notebook-panel .history-add,#notebook-panel .review-memos-toggle,#notebook-panel .notebook-focus-action,#tools-cancel,#tools-confirm)[data-touch-input],
:root :is(#toc-toggle,#saved-toggle,#more-toggle,#grade-trigger,.component-tab-close)[data-touch-input]::before{transition:none}

/* Reader actions share existing star/example tones without changing their boxes. */
#reader-content{--reader-heading-hover:#2d5a43;--reader-component-hover:var(--soft)}
:root[data-theme="dark"] #reader-content{--reader-heading-hover:var(--stage-green);--reader-component-hover:var(--reading-hover)}
#reader-content .entry-notebook-add{transition:background-color .15s ease}
#reader-content .heading-stroke-trigger{transition:color .15s ease}
#reader-content .entry-components :is(a[href],button).component-link[data-component]{transition:background-color .15s ease,border-color .15s ease}
@media(hover:hover) and (pointer:fine){
 #reader-content .entry-notebook-add:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--reading-hover)}
 #reader-content .heading-stroke-trigger:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{color:var(--reader-heading-hover)}
 #reader-content .entry-components :is(a[href],button).component-link[data-component]:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{border-color:var(--line)}
 #reader-content .entry-components :is(a[href],button).component-link[data-component]:not(.is-selected):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{background-color:var(--reader-component-hover)}
}
#reader-content .entry-notebook-add:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,#reader-content .entry-notebook-add:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--reading-hover)}
#reader-content .heading-stroke-trigger:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active,#reader-content .heading-stroke-trigger:not(:disabled):not([aria-disabled="true"]).is-touch-pressed{color:var(--reader-heading-hover)}
#reader-content .entry-components :is(a[href],button).component-link[data-component]:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active,#reader-content .entry-components :is(a[href],button).component-link[data-component]:not(:disabled):not([aria-disabled="true"]).is-touch-pressed{border-color:var(--line)}
#reader-content .entry-components :is(a[href],button).component-link[data-component]:not(.is-selected):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active,#reader-content .entry-components :is(a[href],button).component-link[data-component]:not(.is-selected):not(:disabled):not([aria-disabled="true"]).is-touch-pressed{background-color:var(--reader-component-hover)}
#reader-content :is(.entry-notebook-add,.heading-stroke-trigger,.component-link)[data-touch-input]{transition:none}

/* Learner modal action feedback: pointer-only movement, unchanged touch actions. */
:root{--modal-cancel-hover:#f1f5f9;--modal-cancel-border:#cbd5e1}
:root[data-theme="dark"]{--modal-cancel-hover:rgba(255,255,255,.08);--modal-cancel-border:#64748b}
@media(hover:hover) and (pointer:fine){
 :root :is(#cloud-dialog,#tools-dialog,#cloud-help-dialog,#notebook-guide-dialog,#study-hub-confirm,.review-memo-dialog) :is(.cloud-cancel,.cloud-primary,.review-memo-cancel,.review-memo-save,.cloud-help-confirm,[data-study-leave]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([aria-busy="true"] *):not([data-touch-input]){transition:background-color .15s ease,border-color .15s ease,transform .1s ease}
 :root :is(#cloud-dialog,#tools-dialog,#cloud-help-dialog,#notebook-guide-dialog,#study-hub-confirm,.review-memo-dialog) :is(.cloud-cancel,.review-memo-cancel,[data-study-leave="cancel"],[data-study-leave="discard"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([aria-busy="true"] *):not([data-touch-input]):is(:hover,:active){background-color:var(--modal-cancel-hover);border-color:var(--modal-cancel-border)}
 :root :is(#cloud-dialog,#tools-dialog,#cloud-help-dialog,#notebook-guide-dialog,#study-hub-confirm,.review-memo-dialog) :is(.cloud-primary,.review-memo-save,.cloud-help-confirm,[data-study-leave="save"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([aria-busy="true"] *):not([data-touch-input]):is(:hover,:active){background-color:color-mix(in srgb,var(--button-green),black 6%);border-color:color-mix(in srgb,var(--button-green),black 6%)}
 :root :is(#cloud-dialog,#tools-dialog,#cloud-help-dialog,#notebook-guide-dialog,#study-hub-confirm,.review-memo-dialog) :is(.cloud-cancel,.cloud-primary,.review-memo-cancel,.review-memo-save,.cloud-help-confirm,[data-study-leave]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([aria-busy="true"] *):not([data-touch-input]):active{transform:translateY(1px)}
}
@media(prefers-reduced-motion:reduce){:root :is(#cloud-dialog,#tools-dialog,#cloud-help-dialog,#notebook-guide-dialog,#study-hub-confirm,.review-memo-dialog) :is(.cloud-cancel,.cloud-primary,.review-memo-cancel,.review-memo-save,.cloud-help-confirm,[data-study-leave]){transform:none!important}}

/* Review selection feedback changes only an unchecked input's interior. */
#review-scroll .history-choice input{transition:none}
@media(hover:hover) and (pointer:fine){
 #review-scroll .history-choice:not([aria-disabled="true"]):not([data-touch-input]):hover input:not(:checked):not(:disabled):not([aria-disabled="true"]){background-color:var(--reading-hover)}
}
/* TOC magnifier feedback follows its icon, without shrinking the 44px target. */
:root .toc-heading #search-toggle{position:relative;background:transparent}
:root .toc-heading #search-toggle::before{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:6px;background-color:transparent;pointer-events:none;transition:background-color .15s ease}
:root .toc-heading #search-toggle>.icon{position:relative}
@media(hover:hover) and (pointer:fine){
 :root .toc-heading #search-toggle:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--control-feedback)}
}
:root .toc-heading #search-toggle:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,:root .toc-heading #search-toggle:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--control-feedback)}
:root .toc-heading #search-toggle[data-touch-input]::before{transition:none}

/* Both body action surfaces are32px squares; targets and glyphs retain their geometry. */
#reader-content .entry-notebook-add{position:relative;background:transparent}
#reader-content .entry-notebook-add::before{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:6px;background-color:transparent;pointer-events:none;transition:background-color .15s ease}
#reader-content .entry-notebook-add>.notebook-button-chip{position:relative}
#reader-content .entry-notebook-add[data-touch-input]::before{transition:none}

/* Panel card surfaces follow glyphs/text; all existing targets retain their layout. */
:root .header-actions #more-toggle.header-chip::before{inset:6px auto auto 50%;width:32px;height:32px;transform:translateX(-50%);border-radius:6px}
#notebook-panel :is(.notebook-star,.notebook-remove,.review-star,.review-remove,.review-memo,.notebook-answer,.review-answer){position:relative;isolation:isolate;background:transparent}
#notebook-panel :is(.notebook-star,.notebook-remove,.review-star,.review-remove,.review-memo)::before{content:"";position:absolute;left:calc(50% + var(--card-feedback-offset,0px));top:50%;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:6px;background-color:transparent;pointer-events:none;z-index:-1;transition:background-color .15s ease}
#review-scroll .review-star{--card-feedback-offset:1px}
#review-scroll .review-memo{--card-feedback-offset:2px}
#notebook-panel :is(.notebook-answer,.review-answer)::before{content:"";position:absolute;left:var(--reading-feedback-x,0px);top:var(--reading-feedback-y,0px);width:var(--reading-feedback-width,0px);height:var(--reading-feedback-height,0px);border-radius:6px;background-color:transparent;pointer-events:none;z-index:-1;transition:background-color .15s ease}
@media(hover:hover) and (pointer:fine){
 #notebook-panel :is(.notebook-star,.notebook-remove,.review-star,.review-remove,.review-memo,.notebook-answer,.review-answer):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--control-feedback)}
}
#notebook-panel :is(.notebook-star,.notebook-remove,.review-star,.review-remove,.review-memo):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,#notebook-panel :is(.notebook-star,.notebook-remove,.review-star,.review-remove,.review-memo,.notebook-answer,.review-answer):not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--control-feedback)}
#notebook-panel :is(.notebook-star,.notebook-remove,.review-star,.review-remove,.review-memo,.notebook-answer,.review-answer)[data-touch-input]::before,#review-scroll .history-choice[data-touch-input] input{transition:none}

/* Final feedback sizes are independent of the established control hitboxes. */
@media(max-width:900px){.header-actions :is(#toc-toggle,#saved-toggle).header-chip::before{inset-inline:0}}
#reader-content .entry-star{position:relative;isolation:isolate;background:transparent}
#reader-content .entry-star::before{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:6px;background-color:transparent;pointer-events:none;z-index:-1;transition:background-color .15s ease}
:root .toc-panel .toc-add{position:relative;isolation:isolate;background:transparent}
:root .toc-panel .toc-add::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:6px;background-color:transparent;pointer-events:none;z-index:-1;transition:background-color .15s ease}
.toc-footer :is(.learning-links :is(a,.webtoon-list-trigger),.toc-copyright){background:transparent;transition:color .15s ease;--footer-link-hover:#2d5a43}
:root[data-theme="dark"] .toc-footer :is(.learning-links :is(a,.webtoon-list-trigger),.toc-copyright){--footer-link-hover:var(--stage-green)}
@media(hover:hover) and (pointer:fine){
 #reader-content .entry-star:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--reading-hover)}
 :root .toc-panel .toc-add:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--control-feedback)}
 .toc-footer :is(.learning-links :is(a,.webtoon-list-trigger),.toc-copyright):not([aria-disabled="true"]):not([data-touch-input]):hover{color:var(--footer-link-hover)}
}
#reader-content .entry-star:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,#reader-content .entry-star:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--reading-hover)}
:root .toc-panel .toc-add:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,:root .toc-panel .toc-add:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--control-feedback)}
.toc-footer :is(.learning-links :is(a,.webtoon-list-trigger),.toc-copyright):not([aria-disabled="true"]):not([data-touch-input]):active,.toc-footer :is(.learning-links :is(a,.webtoon-list-trigger),.toc-copyright):not([aria-disabled="true"]).is-touch-pressed{color:var(--footer-link-hover)}

#reader-content .entry-star[data-touch-input]::before,:root .toc-panel .toc-add[data-touch-input]::before{transition:none}

/* Number navigation retains the current badge's exact visual geometry. */
.toc-number{border:0;background:transparent;cursor:pointer;touch-action:manipulation}
.toc-number::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:2rem;max-width:100%;height:calc(1.25rem + 2px);transform:translate(-50%,-50%);border-radius:3px;background:transparent;pointer-events:none;transition:background-color .15s ease}
/* Transparent vertical extension keeps a44px touch area inside the existing row. */
.toc-number::after{content:"";position:absolute;left:0;top:50%;width:100%;height:max(44px,100%);transform:translateY(-50%);background:transparent}
@media(max-width:900px){.toc-panel .toc-number::before{left:1.5ch}}
@media(hover:hover) and (pointer:fine){
 .toc-group:not(.is-current) .toc-number:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--control-feedback)}
}
.toc-group:not(.is-current) .toc-number:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,.toc-group:not(.is-current) .toc-number:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--control-feedback)}
.toc-number[data-touch-input]::before{transition:none}

/* Transient feedback stays independent of the persistent reading underline. */
:root .toc-panel .toc-char{position:relative;isolation:isolate;background:transparent;border-radius:6px}
:root .toc-panel .toc-char::before{content:"";position:absolute;left:50%;top:50%;width:calc(1em + 4px);height:calc(1em + 4px);transform:translate(-50%,-50%);border-radius:4px;background-color:transparent;pointer-events:none;z-index:-1;transition:background-color .15s ease}
@media(hover:hover) and (pointer:fine){:root .toc-panel .toc-char:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--control-feedback)}}
:root .toc-panel .toc-char:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,:root .toc-panel .toc-char:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--toc-pressed-background)}
:root .toc-panel .toc-char[data-touch-input]::before{transition:none}

/* Paint the reading position without changing glyph, grid or hit-target geometry.
   Keep hover/press on ::before, including on the current character. The fixed
   navy is intentionally independent of stage colors and the selected theme. */
:root{--toc-pressed-background:rgba(0,0,0,.08)}
:root[data-theme="dark"]{--toc-pressed-background:rgba(255,255,255,.12)}
/* Match one full-width Hanja advance at every cell width. Center only this
   paint layer; keep the existing DPR-snapped vertical origin and 2px height.
   The font-relative width is stable even when mobile grid cells narrow. */
:root .toc-panel .toc-char.is-reading::after{content:"";position:absolute;left:50%;top:auto;bottom:calc(1px - var(--toc-reading-shift,0px));width:1em;height:2px;transform:translateX(-50%) translateZ(0);border-radius:0;background:#3B5998;pointer-events:none;z-index:0}
/* Use the OS contrast color only when the user enables forced colors. */
@media(forced-colors:active){:root .toc-panel .toc-char.is-reading::after{forced-color-adjust:none;background:Highlight}}

/* Compact header surfaces indicate actual open drawers/menus, not retained touch hover. */
@media(max-width:900px){
 :root .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip::before{transition:none}
 :root .header-actions :is(#toc-toggle,#saved-toggle).header-chip[aria-expanded="true"]:not(:disabled):not([aria-disabled="true"])::before{background-color:var(--control-feedback)}
}

/* Collection-clear dialogs stay compact; import previews share safe wrapping lists. */
#tools-dialog.collection-clear-dialog{width:min(360px,calc(100vw - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-width:360px}
#tools-dialog.collection-clear-dialog h2{overflow-wrap:anywhere}
#tools-dialog:is(.collection-clear-dialog,.record-import-dialog) .tools-clear-list{margin:14px 0;padding-left:1.1em;list-style:disc;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
#tools-dialog:is(.collection-clear-dialog,.record-import-dialog) .tools-clear-list li{padding-left:.15em}
#tools-dialog:is(.collection-clear-dialog,.record-import-dialog) .tools-clear-list li+li{margin-top:4px}
#tools-dialog:is(.collection-clear-dialog,.record-import-dialog) .tools-clear-list li::marker{font-size:.7em}

/* A fixed clear action leaves the original labels and gaps intact; only counts fit. */
#notebook-panel .notebook-heading{gap:8px}
#notebook-panel .notebook-tabs{flex:1 1 0;flex-wrap:nowrap;column-gap:8px}
#notebook-panel :is(.notebook-practice-tab,.notebook-review-tab){flex:none;flex-wrap:nowrap;column-gap:4px;max-width:none}
#notebook-panel .notebook-review-tab{column-gap:5px}
#notebook-clear{position:relative;isolation:isolate;display:inline-flex;flex:0 0 32px;align-items:center;justify-content:center;width:32px;height:44px;min-height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);touch-action:manipulation}
#notebook-clear .icon{width:20px;height:20px}
#notebook-clear::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:6px;background-color:transparent;transition:background-color .15s ease}
#notebook-clear:disabled{opacity:.4}
@media(hover:hover) and (pointer:fine){#notebook-clear:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover::before{background-color:var(--control-feedback)}}
#notebook-clear:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active::before,#notebook-clear:not(:disabled):not([aria-disabled="true"]).is-touch-pressed::before{background-color:var(--control-feedback)}
#notebook-clear[data-touch-input]::before{transition:none}
@media(max-width:900px){#notebook-clear{flex-basis:44px;width:44px}}
@media(max-width:380px){#notebook-panel .notebook-heading{gap:6px}}
@media(prefers-reduced-motion:reduce){#notebook-clear::before{transition:none}}

/* A clearer mobile entry boundary without summoning the software keyboard. */
@media(hover:none),(pointer:coarse){
  #review-memo-dialog .review-memo-field{border-color:color-mix(in srgb,var(--ink) 28%,var(--surface))}
}

:is(#review-memo-dialog,#study-memo-dialog) .review-memo-field{position:relative}
.review-memo-insertion-marker{position:absolute;width:1px;background:var(--green);opacity:.8;pointer-events:none;animation:none;transition:none}
.review-memo-caret-mirror{position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none;box-sizing:border-box;height:auto;margin:0;border:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}

/* Let the operating system supply contrast without recoloring source media. */
@media(forced-colors:active){
  :root{forced-color-adjust:auto!important}
  :where(button,a[href],input,textarea,select,summary,[role="button"],[tabindex],[contenteditable="true"]):focus-visible{outline-color:Highlight!important}
  :is(button,[role="button"]):disabled,[aria-disabled="true"]{color:GrayText!important;opacity:1}
  .toc-group.is-current{border-color:Highlight}
  .toc-group.is-current .toc-number::before{forced-color-adjust:none;background:Highlight}
  .toc-group.is-current .toc-number{forced-color-adjust:none;color:HighlightText}
  :is(.notebook-tab,.review-tab)[aria-selected="true"],.notebook-tab[aria-pressed="true"]{text-decoration:underline;text-underline-offset:3px}
}

@media(forced-colors:active){
  #search-panel .search-result[aria-selected="true"]{outline:2px solid Highlight;outline-offset:-2px}
  /* Stage colors convey study status; retain these small, labeled marks only. */
  :is(.bookmark-star,.review-star,.notebook-star,[data-review-filter]) .icon{forced-color-adjust:none}
}
@media(forced-colors:active){
  :is(.bookmark-star,.review-star,.notebook-star,.review-filter)[data-color="blue"] .icon{color:var(--review-blue)}
  :is(.bookmark-star,.review-star,.notebook-star,.review-filter)[data-color="green"] .icon{color:var(--review-green)}
  :is(.bookmark-star,.review-star,.notebook-star,.review-filter)[data-color="red"] .icon{color:var(--review-red)}
  :is(.bookmark-star,.review-star,.notebook-star)[data-color="none"] .icon{forced-color-adjust:auto}
  .review-filter[aria-pressed="false"] .icon{forced-color-adjust:auto;color:GrayText}
}

/* Shared vocabulary chips; controls remain independent on reader and previews. */
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis-chip{cursor:pointer;transition:background-color .15s ease;display:inline;padding:0 3px 1px;border:1px solid var(--line);border-radius:6px;background:var(--vocabulary-chip);white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
:root:not([data-theme="dark"]) :is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis-chip{border-color:#EAEBED}
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis-chip>.vocabulary-toggle{padding:0;border:0;border-radius:2px;background:transparent}
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis{white-space:normal}
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis .vocabulary-badge{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere}
:is(#reader-content,.admin-lesson-preview) .lesson-vocabulary .vocabulary-link,:is(#reader-content,.admin-lesson-preview) .lesson-vocabulary .vocabulary-link .vocabulary-badge-hanja{background-image:none}
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout:not(.vocabulary-list) .vocabulary-definition-gap{font-size:0;word-spacing:6px;letter-spacing:0;white-space:normal}
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis-chip .vocabulary-toggle:is(:hover,:active){background:transparent}
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis-chip[data-touch-input]{transition:none}
@media(hover:hover) and (pointer:fine){:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis-chip:not([data-touch-input]):hover{background:var(--control-feedback)}}
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis-chip .vocabulary-badge{cursor:inherit}
:root:not([data-theme="dark"]) :is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-label{color:#707070}
:root:not([data-theme="dark"]) :is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-item:not(.is-open) .vocabulary-label .vocabulary-head{color:inherit}
:is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-badge-reading{color:#707070}
:root[data-theme="dark"] :is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-badge-reading{color:var(--vocabulary-muted)}

/* PC reading-action clearance and restrained vocabulary leading. */
@media(min-width:901px){
 #reader-content .reading-notebook-row{min-height:32px;margin-top:4px;margin-bottom:2px}
 :is(#reader-content,.admin-lesson-preview) .lesson-vocabulary.vocabulary-chip-layout{line-height:calc(1lh + 2px)}
 :is(#reader-content,.admin-lesson-preview) .vocabulary-chip-layout .vocabulary-analysis-chip{line-height:1.75}
}

/* Lower starred notes: marker and wrapped lines share the body left edge. */
.lesson-footnote.content-supplement{display:block;font-size:15px!important;line-height:24.375px!important;color:var(--ink)!important;margin:0;white-space:normal}
.lesson-footnote.content-supplement::before{content:none}
.lesson-footnote .footnote-marker{display:inline-block;white-space:pre;transform:translateY(3px)}
.lesson-footnote .footnote-copy{display:inline;white-space:pre-wrap}
.lesson-footnote :is(span,a,b,strong,em,i,u,font){font-size:inherit!important;line-height:inherit!important;color:inherit!important}
.content-supplement.footnote-group{font-size:15px;line-height:24.375px;color:var(--ink);white-space:normal}
:root .lesson-footnote .footnote-copy img.lesson-glyph.footnote-glyph-muted{filter:grayscale(1)!important;mix-blend-mode:multiply!important}
:root[data-theme="dark"] .lesson-footnote .footnote-copy img.lesson-glyph.footnote-glyph-muted{filter:grayscale(1) invert(1)!important;mix-blend-mode:screen!important}

/* Match note glyph em dimensions to the 15px copy; retain authored factors and offsets. */
:root .lesson-footnote img.lesson-glyph{font-size:15px!important}

/* Vocabulary exploration uses one white modal with a fixed tab rail. */
:root dialog.vocabulary-dialog{position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 32px));height:auto;max-width:none;max-height:min(80vh,calc(100dvh - 24px));padding:0;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#000;box-shadow:0 24px 90px #0005;overflow:hidden;overscroll-behavior:contain;color-scheme:only light;font:1rem/1.75 var(--hanja-font);--component-content-inset:20px;--component-card-paper:#fff;--component-card-line:#e5e7eb;--component-paper:#F8F7F2;--component-selected-paper:#E7EFE5;--component-selected-ink:#315F49;--component-rule:#e5e7eb;--canvas:#fff;--surface:#F8F7F2;--panel:#F8F7F2;--ink:#000;--hanja-ink:#000;--muted:#57534e;--vocabulary-muted:#787878;--line:#e5e7eb;--soft:#E7EFE5;--reading-hover:#F8F7F2;--control-feedback:#E7EFE5;--green:#3E7353;--blue:#3E7353;--stage-green:#3E7353;--stage-amber:#9A7600;--stage-red:#B54848;--hun-native:#3E7353;--hun-usage:#9A7600;--hun-other:#B54848;--bookmark-color:#3E7353;--review-blue:#3E7353;--review-green:#9A7600;--review-red:#B54848}
:root dialog.vocabulary-dialog[open]{display:flex;flex-direction:column}
:root dialog.vocabulary-dialog.is-top-anchored{top:var(--vocabulary-top);bottom:auto;margin-block:0;max-height:min(80vh,calc(100dvh - 24px),var(--vocabulary-available-height))}
:root .vocabulary-dialog.is-top-anchored .vocabulary-dialog-body{flex:0 1 auto}
:root dialog.vocabulary-dialog::backdrop{background:rgba(0,0,0,.48)}
.vocabulary-dialog-toolbar{display:flex;flex:none;align-items:center;gap:8px;min-width:0;padding:4px 8px 4px 16px;border-bottom:1px solid var(--line);background:#fff}
/* Roomy shared bottom inset matching the reviewed card reference; preserve the 24px top inset on both devices. */
:root .vocabulary-dialog .vocabulary-dialog-body{flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-anchor:none;padding:24px var(--component-content-inset) 48px}
:root .vocabulary-dialog .vocabulary-dialog-dismiss{min-height:44px;padding:8px 16px;border:0;border-radius:6px;background:transparent;color:var(--green);font:inherit}
:root .vocabulary-dialog .hanja-entry{--ink:#000;--hanja-ink:#000;color:var(--ink);margin:0}
:root .vocabulary-dialog img.lesson-glyph:not(.lesson-illustration){filter:none;mix-blend-mode:multiply}
:root .vocabulary-dialog img[data-glyph-ink="black"]{filter:grayscale(1)!important;mix-blend-mode:multiply!important}
:root .vocabulary-dialog img[data-glyph-ink="gray"],:root .vocabulary-dialog .lesson-footnote .footnote-copy img.lesson-glyph.footnote-glyph-muted{filter:grayscale(1) invert(1) brightness(.5294117647058824) invert(1)!important;mix-blend-mode:multiply!important}
@media(max-width:900px){:root dialog.vocabulary-dialog{--component-content-inset:12px;width:min(520px,calc(100vw - 16px));height:auto}.vocabulary-dialog-toolbar{padding-left:8px}:root .vocabulary-dialog .vocabulary-dialog-body{padding-block:24px 48px}}
.vocabulary-card-close{flex:0 0 44px;min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;font:inherit;font-size:24px}

/* Open examples start a new reading line; closed words follow the preceding text. */
:root :is(#reader-content,.admin-lesson-preview,.vocabulary-dialog) .lesson-vocabulary.vocabulary-list{display:block;max-width:100%;min-width:0;margin-top:var(--vocabulary-list-reading-gap,0px);margin-bottom:var(--vocabulary-list-note-gap,0px);font-size:1rem;line-height:var(--vocabulary-list-leading,1.75);overflow-anchor:none;text-align:left;text-align-last:left;word-break:break-all}
:root .lesson-vocabulary.vocabulary-list>.vocabulary-item{display:inline;margin:0;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* Forced and soft wraps stay in one inline formatting context, with no block spacer. */
:root .lesson-vocabulary.vocabulary-list>br[data-vocabulary-break]{display:inline}
:root .lesson-vocabulary.vocabulary-list .vocabulary-word{display:inline-block;min-height:0;background:transparent;border:0;border-radius:0;padding:0;font:inherit;color:inherit;line-height:inherit;cursor:pointer;touch-action:manipulation}
.vocabulary-list .vocabulary-analysis{display:inline;font-size:inherit;line-height:inherit;white-space:normal}
:root .vocabulary-list .vocabulary-detail-trigger,:root .vocabulary-list .vocabulary-detail-label{display:inline-block;max-width:100%;min-height:0;padding:0 1px;margin:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;line-height:inherit;vertical-align:baseline;white-space:normal;overflow-wrap:anywhere}
.vocabulary-list .vocabulary-detail-trigger{cursor:pointer;touch-action:manipulation}
:root .vocabulary-list .vocabulary-detail-label>.vocabulary-detail-trigger{padding:0}
.vocabulary-list .vocabulary-detail-label{cursor:text}
.vocabulary-list .vocabulary-detail-hanja,.vocabulary-list .vocabulary-head .vocabulary-detail-reading{color:var(--ink)}
.vocabulary-list .vocabulary-out-of-grade .vocabulary-detail-hanja,.vocabulary-list .vocabulary-detail-reading{color:var(--vocabulary-muted)}
:root .lesson-vocabulary.vocabulary-list .vocabulary-definition{display:inline;font:inherit;line-height:inherit;white-space:normal;overflow-wrap:anywhere}
:root .vocabulary-list .vocabulary-definition-gap{font-size:inherit;word-spacing:normal;letter-spacing:normal;white-space:pre}
/* A fixed decorative arrow; hidden text keeps copy and speech separation intact. */
:root .vocabulary-list .vocabulary-meaning-separator{display:inline-block;position:relative;width:13px;height:12px;margin:0 3.5px 0 3px;padding:0;border:0;font-weight:400;line-height:0;vertical-align:middle;color:var(--vocabulary-muted)}
:root .vocabulary-list .vocabulary-meaning-separator>svg{display:block;position:relative;top:-2px;width:13px;height:12px;overflow:visible;pointer-events:none}
:root .vocabulary-list .vocabulary-meaning-separator-text{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:pre;border:0}

/* Vocabulary stays plain at rest, on hover and during a press. */
:root .lesson-vocabulary,:root .lesson-vocabulary *{text-decoration:none}
:root .lesson-vocabulary :is(.vocabulary-toggle,.vocabulary-detail-trigger,.vocabulary-link,.vocabulary-badge-hanja){background:transparent;background-image:none;box-shadow:none;transform:none;transition:none;text-decoration:none}
:root .lesson-vocabulary.vocabulary-list :is(.vocabulary-toggle,.vocabulary-detail-trigger):is(:hover,:active){background:transparent;color:inherit;box-shadow:none;transform:none;text-decoration:none}
:root .lesson-vocabulary .vocabulary-link:is(:hover,:active){background:transparent;background-image:none;box-shadow:none;transform:none;text-decoration:none}
:root .lesson-vocabulary .vocabulary-detail-trigger:focus-visible{outline:1px solid var(--green);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
 .vocabulary-card-close:hover{background:var(--soft);border-radius:5px}
}
@media(forced-colors:active){.vocabulary-list .vocabulary-detail-trigger{forced-color-adjust:auto}}
/* Heading components reuse their original paper, border and selected-state palette. */
:root :is(#reader-content,.admin-lesson-preview,.vocabulary-dialog) .entry-heading .entry-components .component-link:focus-visible{outline:1px solid var(--green);outline-offset:-2px}

@media(min-width:901px) and (hover:hover) and (pointer:fine){:root :is(#reader-content,.admin-lesson-preview,.vocabulary-dialog) .entry-heading .entry-components :is(a[href],button).component-link[data-component]:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover{color:inherit!important;text-decoration:none!important}}

/* Desktop-only feedback distinguishes entry collapse from related-Hanja details. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 :root .vocabulary-list>.vocabulary-item.is-open.is-toggleable:not([data-touch-input]){transition:opacity .2s}
 :root .vocabulary-list>.vocabulary-item.is-open.is-toggleable:not([data-touch-input]):hover{opacity:.8}
 :root .vocabulary-list>.vocabulary-item.is-open:not([data-touch-input]):has([data-vocabulary-detail]:hover){opacity:1}
 :root .vocabulary-list>.vocabulary-item.is-open:not([data-touch-input]) .vocabulary-detail-trigger:not(:disabled):not([aria-disabled="true"]):hover .vocabulary-detail-hanja,:root .vocabulary-list>.vocabulary-item.is-open:not([data-touch-input]) .vocabulary-definition [data-vocabulary-detail]:not([aria-disabled="true"]):hover{text-decoration:underline dotted;text-underline-offset:3px}
}

:root .vocabulary-list>.vocabulary-item.is-fixed-open>.vocabulary-word{cursor:text}

/* Plain exploration controls. Inserted panel shell and centered modal tabs retain their styles. */
:root :is(#reader-content,.admin-lesson-preview) .entry-heading .entry-components .component-link:not(.vocabulary-dialog *){padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;text-decoration:none}
:root :is(#reader-content,.admin-lesson-preview) .entry-heading .entry-components .component-link.is-selected:not(.vocabulary-dialog *){color:inherit!important;font-weight:400}
:root[data-theme="dark"] :is(#reader-content,.admin-lesson-preview) .entry-heading .entry-components .component-link.is-selected:not(.vocabulary-dialog *) img.lesson-glyph{filter:grayscale(1) invert(1)!important;mix-blend-mode:screen!important}
:root[data-theme="dark"] :is(#reader-content,.admin-lesson-preview) .entry-heading .entry-components .component-link.is-selected:not(.vocabulary-dialog *) img.lesson-glyph[data-glyph-ink="gray"]{filter:grayscale(1) invert(1) brightness(.5294117647058824)!important}
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 :root .vocabulary-list>.vocabulary-item.is-toggleable:not(.is-open):not([data-touch-input])>.vocabulary-word:not(:disabled):not([aria-disabled="true"]):hover,:root .vocabulary-list>.vocabulary-item.is-toggleable:not(.is-open):not([data-touch-input])>.vocabulary-word:not(:disabled):not([aria-disabled="true"]):hover :is(.vocabulary-head,.vocabulary-label){color:var(--green)!important;text-decoration:none}
}

/* Match the centered popup's component chips; inert component descriptions stay plain.
   The headword remains the row-height driver; existing baseline alignment lifts metadata. */
:root :is(#reader-content,.admin-lesson-preview) .entry-heading .entry-components :is(a[href],button).component-link[data-component]:not(:disabled):not([aria-disabled="true"]):not(.vocabulary-dialog *){padding:2px 3px;border:1px solid var(--component-chip-line);border-radius:var(--component-chip-radius);background:var(--component-paper)!important}
:root :is(#reader-content,.admin-lesson-preview) .entry-heading .entry-components :is(a[href],button).component-link[data-component].is-selected:not(:disabled):not([aria-disabled="true"]):not(.vocabulary-dialog *){background:var(--component-chip-selected)!important;font-weight:400}

/* Trim chip paint by 1px per edge while preserving its baseline and outer footprint. */
:root :is(#reader-content,.admin-lesson-preview,dialog.vocabulary-dialog) .entry-heading .entry-components :is(a[href],button).component-link.component-link[data-component]:not(:disabled):not([aria-disabled="true"]){padding-block:1px;margin-block:1px;position:relative;left:1px}

/* Ten-percent smaller lesson headings; centered vocabulary dialogs keep their scale. */
:root :is(#reader-content,.admin-lesson-preview) .entry-heading h2:not(.vocabulary-dialog *){font-size:2.8125rem}
:root :is(#reader-content,.admin-lesson-preview) .heading-stroke-trigger:not(.vocabulary-dialog *)::after{content:"";position:absolute;left:50%;top:50%;width:max(44px,3.125rem);max-width:calc(100% + 6px);height:3.59375rem;min-height:44px;transform:translate(-50%,-50%)}
@media(max-width:620px){
 :root :is(#reader-content,.admin-lesson-preview) .entry-heading h2:not(.vocabulary-dialog *){font-size:2.5875rem}
 :root :is(#reader-content,.admin-lesson-preview) .heading-stroke-trigger:not(.vocabulary-dialog *)::after{width:max(44px,2.875rem);height:3.30625rem}
}

/* Dedicated heading-pair and outer-example gaps; internal punctuation is unchanged. */
/* Match the grade boundary: 4px flex gap + 2px rail inset + .25 of .875rem metadata.
   Use rem because this whitespace-only spacer intentionally has font-size:0. */
:root .entry-heading .entry-components .component-pair-gap{display:inline-block;width:calc(6px + .21875rem);min-width:calc(6px + .21875rem);height:0;padding:0;margin:0;border:0;font-size:0!important;line-height:0;vertical-align:baseline;pointer-events:none}
/* Tighten only the separator between two clickable header chips. */
:root .entry-heading .entry-components :is(a[href],button).component-link[data-component]:not(:disabled):not([aria-disabled="true"]) + .component-description:has(+ :is(a[href],button).component-link[data-component]:not(:disabled):not([aria-disabled="true"])) > .component-pair-gap{width:9px;min-width:9px}
:root .vocabulary-list>.vocabulary-separator[data-vocabulary-separator]{white-space:nowrap}
:root .vocabulary-list>.vocabulary-separator[data-vocabulary-separator]>.vocabulary-example-gap{display:inline-block;width:10px;height:0;padding:0;margin:0;border:0;font-size:0!important;line-height:0;vertical-align:baseline;pointer-events:none}

:root .entry-heading .entry-components .component-pair-colon{white-space:pre}

/* Keep only the final character attached to the meaning arrow. */
:root .vocabulary-list .vocabulary-meaning-attachment{white-space:nowrap}


/* Text-only desktop feedback; touch and expanded-example semantics stay separate. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 :root :is(#reader-content,.admin-lesson-preview,.vocabulary-dialog) .entry-heading .entry-components :is(a[href],button).component-link[data-component]:not(:disabled):not([aria-disabled="true"]):not([data-touch-input]),
 :root .vocabulary-list>.vocabulary-item.is-toggleable:not(.is-open):not([data-touch-input])>.vocabulary-word,
 :root .vocabulary-list>.vocabulary-item.is-toggleable:not(.is-open):not([data-touch-input])>.vocabulary-word :is(.vocabulary-head,.vocabulary-label){transition:color .15s}
}

/* Joined readings in one explanation retain the authored inline/BR boundary. */
.entry-original .lesson-combined-reading.lesson-inline-combined-reading{display:inline;margin-top:0}

/* Representative lesson readings; keep vocabulary, component and notebook typography separate. */
:root :is(#reader-content,.admin-lesson-preview,.vocabulary-dialog) .entry-original :is(.reading-notebook-text,.reading-notebook-text span,.lesson-combined-reading,.lesson-hun,.lesson-sound,.lesson-reading-separator){font-size:1.125rem!important}

/* Learning-copy palette only; navigation, semantic colors and source media retain their own ink. */
:root:not([data-theme="dark"]) :is(#reader-content .hanja-entry,.admin-lesson-preview),
:root .vocabulary-dialog .hanja-entry{--ink:#111111;--hanja-ink:#111111;--muted:#707070;--vocabulary-muted:#707070}
:root:not([data-theme="dark"]) :is(#reader-content .hanja-entry,.admin-lesson-preview) [data-copy-color="black"]:not(.lesson-footnote *),
:root .vocabulary-dialog .hanja-entry [data-copy-color="black"]:not(.lesson-footnote *){color:var(--ink)!important}
:root:not([data-theme="dark"]) :is(#reader-content .hanja-entry,.admin-lesson-preview) [data-copy-color="gray"]:not(.lesson-footnote *),
:root .vocabulary-dialog .hanja-entry [data-copy-color="gray"]:not(.lesson-footnote *){color:var(--vocabulary-muted)!important}
/* Playing stroke outlines are source illustrations, not the heading text. */
:root:not([data-theme="dark"]) :is(#reader-content .hanja-entry,.admin-lesson-preview) .entry-heading .original-stroke-svg path[fill="#111"],
:root .vocabulary-dialog .hanja-entry .entry-heading .original-stroke-svg path[fill="#111"]{fill:#000000}
:root:not([data-theme="dark"]) :is(#reader-content .hanja-entry,.admin-lesson-preview) .entry-heading .original-stroke-svg path[stroke="#111"],
:root .vocabulary-dialog .hanja-entry .entry-heading .original-stroke-svg path[stroke="#111"]{stroke:#000000}

/* 阝 keeps both sounds in one naturally wrapping representative reading. */
.notebook-reading.radical-unified-reading{white-space:normal;word-break:keep-all;overflow-wrap:normal}

/* Image source credits end the illustration group; keep its existing reading spacer. */
.entry-original .lesson-image-source-caption{display:block;font-size:14px!important;line-height:1.4;margin:0 0 2px;padding:0;color:#787878;white-space:pre-line}
.entry-original .lesson-image-source-caption :is(span,a,b,strong,em,i,u,font){font-size:inherit!important;line-height:inherit!important}

/* One bottom inset for the central popup, independent of the final content type. */
:root .vocabulary-dialog [data-vocabulary-terminal]{margin-bottom:0!important;padding-bottom:0!important}

/* Semantic paragraph boundaries replace only their single source separator. */
br[data-paragraph-separator=true]{display:none!important}


/* Shared header component size; grade and tab labels retain their own typography. */
:root .entry-heading .entry-components{font-size:var(--component-label-font-size,14px);line-height:1.45}

/* All heading items share the established chip paint. Only component-link
   controls receive interaction feedback; passive labels remain ordinary spans. */
:root :is(#reader-content,.admin-lesson-preview,dialog.vocabulary-dialog) .entry-heading .entry-components .component-description.component-box{display:inline-block;vertical-align:baseline;white-space:nowrap;overflow-wrap:normal;word-break:normal;padding:1px 3px;margin-block:1px;border:1px solid var(--component-chip-line);border-radius:var(--component-chip-radius);background:var(--component-paper);box-decoration-break:clone;-webkit-box-decoration-break:clone;position:relative;left:1px;cursor:default}
/* A previously plain first item started 1px left of the positioned links.
   Preserve that outer edge without changing padding, the rail, or row metrics. */
:root .entry-heading .entry-components .component-box-leading{margin-inline-start:-1px}
:root .entry-heading .entry-components .component-pair-gap{width:9px;min-width:9px}

/* Preserve the old first chip's left edge as the grade moves to the light. */
:root :is(#reader-content,.admin-lesson-preview,dialog.vocabulary-dialog) .entry-heading .entry-components .component-first-signal{margin-inline-start:-2px}
:root :is(#reader-content,.admin-lesson-preview,dialog.vocabulary-dialog) .entry-heading .entry-components .component-first-signal.component-box-leading{margin-inline-start:-3px}
:root :is(#reader-content,.admin-lesson-preview,dialog.vocabulary-dialog) .entry-heading .entry-meta{left:2px}
:root .entry-heading h2[data-heading-grade]{color:#000000!important}
:root[data-theme="dark"] .entry-heading h2[data-heading-grade]:not(.vocabulary-dialog *){color:var(--ink)!important}
:root .entry-heading h2[data-heading-grade] .original-stroke-svg path[fill="#111"]{fill:currentColor!important}
:root .entry-heading h2[data-heading-grade] .original-stroke-svg path[stroke="#111"]{stroke:currentColor!important}
/* Keep grade colors through pointer hover, press and touch feedback on the title button. */
:root .entry-heading h2[data-heading-grade] .heading-stroke-trigger{color:inherit!important}

/* Plain grade labels keep the existing action slots and hit areas unchanged. */
.grade-signal{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:28px;height:20px;border:0;border-radius:0;background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:400;line-height:20px;letter-spacing:0;white-space:nowrap;pointer-events:none}
[data-color="blue"]>.grade-signal{color:var(--review-blue);font-weight:400}
[data-color="green"]>.grade-signal{color:var(--review-green);font-weight:400}
[data-color="red"]>.grade-signal{color:var(--review-red);font-weight:400}
.review-filter[data-color]>.grade-signal{width:20px;font-size:17px;font-weight:400}
.review-filter[aria-pressed="false"]>.grade-signal{opacity:.4}
/* Filter state is text-only: neutral surface and border stay identical. */
:root #notebook-panel #review-filters .review-filter{background:var(--surface);border-color:var(--panel-rule)}
#review-scroll .review-star>.grade-signal{transform:translateX(1px)}
#saved-count{white-space:nowrap}

/* Align only main-card grade text with its first component; keep hit areas and layout intact. */
#reader-content .hanja-entry:not([id^="component-entry-"]) > .entry-heading > .entry-star > .grade-signal{transform:translateY(var(--grade-component-offset,0px))}

/* Give the two sidebar tabs more separation, without enlarging their row. */
#notebook-panel .notebook-tabs{column-gap:16px}
#notebook-panel .notebook-tab{font-size:15px;line-height:25.1875px}
@media(max-width:900px){#notebook-panel .notebook-tab{font-size:16px;line-height:27px}}
/* Mobile tab titles use weight to identify the selected list, just like PC. */
@media(max-width:900px){
  #notebook-panel .notebook-tab{font-weight:400}
  #notebook-panel .notebook-tab[aria-selected="true"]{font-weight:600}
}

/* Grade feedback follows the painted label, not its unchanged touch target.
   Match the reading-row +/check surface height (32px) on every card surface. */
:root .bookmark-star:has(>.grade-signal),:root #notebook-panel .review-star:has(>.grade-signal){background:transparent}
:root #reader-content .entry-star:has(>.grade-signal)::before,:root #notebook-panel :is(.notebook-star,.review-star):has(>.grade-signal)::before{content:none}
:is(.bookmark-star,.review-star)>.grade-signal{position:relative;isolation:isolate}
:is(.bookmark-star,.review-star)>.grade-signal::before{content:"";position:absolute;left:50%;top:50%;width:36px;height:32px;transform:translate(-50%,-50%);border-radius:6px;background:transparent;pointer-events:none;z-index:-1;transition:background-color .15s ease}
@media(hover:hover) and (pointer:fine){
 :is(.bookmark-star,.review-star):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):hover>.grade-signal::before{background:var(--reading-hover)}
}
:is(.bookmark-star,.review-star):not(:disabled):not([aria-disabled="true"]):not([data-touch-input]):active>.grade-signal::before,:is(.bookmark-star,.review-star).is-touch-pressed:not([aria-disabled="true"])>.grade-signal::before{background:var(--reading-hover)}
:is(.bookmark-star,.review-star)[data-touch-input]>.grade-signal::before{transition:none}
/* Body grades share component-label size while retaining their fixed line box. */
#reader-content .hanja-entry:not([id^="component-entry-"]) > .entry-heading > .entry-star > .grade-signal{font-size:var(--component-label-font-size,14px)}

/* Sidebar grades match the stable example size without changing label or button geometry. */
#notebook-scroll .notebook-star>.grade-signal,#review-scroll .review-star>.grade-signal{font-size:.9375rem}

/* Move only the main reader's component group; retain its layout allocation and every vertical metric. */
:root #reader-content > .hanja-entry > .entry-heading > .entry-meta{left:1px}
/* Shift only the component rail paint; keep its grade and all layout metrics fixed. */
:root #reader-content > .hanja-entry > .entry-heading > .entry-meta > .entry-component-navigation{left:1px}

/* Baseline probes have no dimensions and do not affect wrapping or row metrics. */
.sidebar-baseline-probe{display:inline-block;width:0;height:0;margin:0;padding:0;border:0;vertical-align:baseline;font-size:0;line-height:0}
/* Move only glyph paint; keep the established 32px feedback surface in place. */
#notebook-scroll .notebook-star>.grade-signal,#review-scroll .review-star>.grade-signal{top:var(--sidebar-grade-offset,0px)}
#notebook-scroll .notebook-star>.grade-signal::before,#review-scroll .review-star>.grade-signal::before{top:calc(50% - var(--sidebar-grade-offset,0px))}

/* Passive grade metadata restores the original title/meta spacing, independently
   of the interactive star and the component-chip presentation. */
:root :is(#reader-content,.admin-lesson-preview,dialog.vocabulary-dialog) .entry-heading .entry-meta{left:0;gap:3px}
:root .entry-heading .entry-grade{display:inline;flex:none;font-size:14px;font-weight:400;line-height:1.45;margin-inline-end:.25em;padding:0;border:0;border-radius:0;background:transparent;color:var(--muted);white-space:nowrap;cursor:default}
:root .entry-heading .entry-components{min-width:0}
.review-filter[aria-pressed="false"]>.icon{opacity:.4;fill:none}
.review-filter[aria-pressed="true"]>.icon{opacity:1}

/* Empty component rails lack the chip's 1px margin, 1px border and 1px
   padding below the text baseline. Raise only the passive grade's paint. */
#reader-content > .hanja-entry > .entry-heading > .entry-meta:not(:has(.component-box)) > .entry-grade{transform:translateY(-3px)}
/* Match the main/notebook star's 18.9px paint without changing focus controls. */
#notebook-flash-star > .icon{transform:scale(.945);transform-origin:center}

/* Enlarge only main-reader and sidebar-list star PAINT by 1px per axis.
   The path bounds are 18.4 x 17.5 viewBox units; rounded strokes add 2
   (main/notebook) or 1.5 (review) units. Keep SVG boxes/hit areas unchanged.
   Sidebar translation fixes the painted bottom, expanding left/right .5px. */
#reader-content > .hanja-entry > .entry-heading > .entry-star > .icon,
#notebook-scroll .notebook-star > .icon{transform:scale(0.9560224089635855,0.9586080586080586);transform-origin:center}
/* Practice only: 15px painted width; retain the 21px SVG slot and optical Y. */
#notebook-scroll .notebook-star > .icon{transform:translateY(-0.4871794871794872px) scale(0.8403361344537816,0.8426089000363834)}
#review-scroll .review-star > .icon{transform:translate(1px,-0.4868421052631579px) scale(0.9548195523069896,0.9574162679425837);transform-origin:center}

/* Keep main-body star paint .5px above its former title center, including chipless cards. The existing
   hit slot and 32px hover surface keep their dimensions; no row reflows. */
#reader-content > .hanja-entry > .entry-heading > .entry-star > .icon{transform:translateY(var(--star-component-offset,0px)) scale(0.9560224089635855,0.9586080586080586)}
#reader-content > .hanja-entry > .entry-heading > .entry-star:has(>.icon)::before{top:calc(50% + var(--grade-component-offset,0px))}

/* Mobile reader: horizontal gestures open drawers; vertical pan and pinch zoom stay native.
   Set each horizontal scroll container too, since touch-action stops at that ancestor. */
@media(max-width:900px){
  #explorer,#explorer .entry-components,#explorer .entry-component-rail,#explorer .lesson-image-strip{touch-action:pan-y pinch-zoom}
  #explorer :is(.component-slot,.vocabulary-dialog,dialog) :is(.entry-components,.entry-component-rail,.lesson-image-strip){touch-action:auto}
}

/* Tab-only decoration: suppress rings, never the focus or permanent borders.
   Component tabs paint their ring on a child rather than the focused button. */
html.tab-focus-managed:not(.keyboard-navigation) :focus,
html.tab-focus-managed:not(.keyboard-navigation) :focus-visible,
html.tab-focus-managed:not(.keyboard-navigation) .component-tab:focus .component-tab-box{
  outline:none!important;
}

/* Unicode replacement spans inherit geometry, but preserve each source glyph’s black/gray ink. */
.selected-unicode-glyph{font-family:"Tonghanja Selected Components","Tonghanja Selected Components Rare",var(--hanja-font);font-size:inherit;line-height:inherit}

/* Saved card gaps are independent of internal typography and retain the 620px reader breakpoint. */
.reader .entry:not(:first-child),.reader-navigation{margin-top:var(--card-gap-pc,112px)}
@media(max-width:620px){.reader .entry:not(:first-child){margin-top:var(--card-gap-mobile,84px)}.reader-navigation{margin-top:calc(var(--card-gap-mobile,84px)/2)}}

/* A review keyboard target is independent of transfer checkboxes; no layout change. */
#review-scroll .history-row.is-review-current{background:var(--soft)}

/* Existing notebook membership remains visible without changing checkbox geometry. */
#review-scroll .history-choice input[data-in-practice="true"]:disabled{visibility:visible;border-color:var(--muted);background-color:var(--muted);opacity:.55;pointer-events:none}

/* Mobile body navigation: 40px bottom-anchored paint inside unchanged 58px hit areas. */
.reader-mobile-navigation{display:none;--reader-nav-rgb:220,215,190}
:root[data-theme="dark"] .reader-mobile-navigation{--reader-nav-rgb:79,108,85}
@media(pointer:coarse){
  .reader-mobile-navigation:not([hidden]){display:block;position:fixed;z-index:35;left:var(--reader-nav-left,0px);width:var(--reader-nav-width,100vw);bottom:12px;height:calc(58px + env(safe-area-inset-bottom,0px));padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overflow:hidden;background:none;border:0;box-shadow:none;pointer-events:none;user-select:none;-webkit-user-select:none}
  .reader-mobile-container{position:relative;width:100%;height:58px;margin:auto;overflow:hidden;pointer-events:auto;touch-action:pan-y pinch-zoom}
  .reader-mobile-track{position:absolute;top:0;left:0;display:flex;gap:12px;width:100%;height:58px;transform:translateX(-108.666667px);transition:transform 220ms ease;pointer-events:none}
  .reader-mobile-navigation.is-expanded .reader-mobile-track{transform:translateX(16px)}
  .reader-mobile-navigation.is-dragging .reader-mobile-track{transition:none}
  .reader-mobile-navigation .reader-floating-button{position:relative;flex:0 0 58px;width:58px;height:58px;min-width:0;padding:0;border:0;border-radius:999px;background:none;color:rgba(var(--reader-nav-rgb),.2);box-shadow:none;overflow:visible;pointer-events:auto;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:color 120ms ease-out}
  .reader-mobile-navigation [data-reader-step="1"]{flex-basis:calc(100% - 117.333333px);width:calc(100% - 117.333333px)}
  .reader-mobile-navigation .reader-floating-button[aria-disabled="true"]{color:rgba(var(--reader-nav-rgb),.07)}
  .reader-mobile-navigation .reader-floating-button.is-pressed:not([aria-disabled="true"]){color:rgba(var(--reader-nav-rgb),.32);transition:none}
  .reader-mobile-navigation .is-concealed{visibility:hidden;pointer-events:none}
  .reader-arrow-overlay{color:rgba(255,255,255,.8);transition:color 120ms ease-out}
  .reader-floating-button[aria-disabled="true"] .reader-arrow-overlay{color:rgba(255,255,255,.35)}
  .reader-mobile-navigation .reader-floating-button[data-reader-step][aria-disabled="true"]{color:rgba(var(--reader-nav-rgb),.2)}
  .reader-floating-button[data-reader-step] .reader-arrow-overlay{color:rgba(255,255,255,.85)}
  .reader-floating-button[data-reader-step][aria-disabled="true"] .reader-arrow-overlay{color:rgba(190,185,170,.15)}
  .reader-cutout-shape{display:block;position:absolute;left:0;bottom:0;width:100%;height:40px;pointer-events:none;overflow:visible}
  body.mobile-reader-navigation-space .reader-navigation{display:none}
  body.mobile-reader-navigation-space .reader,body.mobile-reader-navigation-space .reader:has(>.reader-navigation:not([hidden])){padding-bottom:calc(70px + env(safe-area-inset-bottom,0px) + var(--card-gap-pc,112px)/2)}
  body.mobile-reader-navigation-visible .toast{bottom:calc(82px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:620px) and (pointer:coarse){
  body.mobile-reader-navigation-space .reader,body.mobile-reader-navigation-space .reader:has(>.reader-navigation:not([hidden])){padding-bottom:calc(70px + env(safe-area-inset-bottom,0px) + var(--card-gap-mobile,84px)/2)}
}
@media(min-width:768px) and (pointer:coarse){
  .reader-mobile-container{width:min(560px,100%)}
  .reader-mobile-navigation [data-reader-step="1"]{flex-basis:60%;width:60%}
  .reader-mobile-track,.reader-mobile-navigation.is-expanded .reader-mobile-track{justify-content:center;transform:none}
}
/* Wider touch tablets retain their sidebars' geometry; only the reader extends
   behind the translated header, so its visible-top anchor is the same as phone. */
@media(min-width:901px) and (pointer:coarse){
  .has-scroll-header{--reader-header-inset:var(--header-height)}
  .has-scroll-header.reader-header-hidden{--reader-header-inset:0px}
  .has-scroll-header .site-header{transform:translateY(0);transition:transform .2s ease;will-change:transform}
  .has-scroll-header.reader-header-hidden .site-header{transform:translateY(-100%);pointer-events:none}
  .has-scroll-header .reader-pane{margin-top:calc(-1 * var(--header-height));height:100dvh;scroll-padding-top:calc(var(--reader-header-inset) + 14px)}
  .has-scroll-header .reader{padding-top:calc(var(--header-height) + 18px)}
}
@media(prefers-reduced-motion:reduce){.reader-mobile-track,.reader-mobile-navigation .reader-floating-button,.reader-arrow-overlay{transition:none}}

/* Hide only the automatic touch arrival; manual header rules remain unchanged. */
@media(pointer:coarse){html.reader-arrival-pending .site-header{transform:translateY(-100%)!important;transition:none!important;pointer-events:none}}

/* Dark learning surfaces share the site palette; source illustrations stay unchanged. */
:root[data-theme="dark"]{--component-selected-paper:var(--soft);--component-selected-ink:var(--accent-ink)}
:root[data-theme="dark"] :is(.entry-original,.admin-lesson-preview) [data-copy-tone="black"]:not([data-copy-color]):not(.lesson-footnote):not(.lesson-footnote *){color:var(--ink)!important}
:root[data-theme="dark"] :is(.entry-original,.admin-lesson-preview) [data-copy-tone="gray"]:not([data-copy-color]):not(.lesson-footnote):not(.lesson-footnote *){color:var(--vocabulary-muted)!important}
:root[data-theme="dark"] .notebook-flash-stage{background:var(--canvas)}
:root[data-theme="dark"] :is(.route-unavailable-card,.reader-load-failed .reader-error){background:var(--panel);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] :is(.route-unavailable-card,.reader-load-failed .reader-error) p{color:var(--muted)}
:root[data-theme="dark"] .route-unavailable-icon{color:var(--muted)}
:root[data-theme="dark"] :is(.route-first-button,.reader-load-failed .reader-error button){background:var(--surface);border-color:var(--line);color:var(--accent-ink)}
/* Reset the detail dialog's explicit light-only tokens to the inherited theme.
   Its geometry and light-mode palette remain exactly as before. */
:root[data-theme="dark"] dialog.vocabulary-dialog{color-scheme:only dark;background:var(--canvas);border-color:var(--line);color:var(--ink);--component-card-paper:var(--surface);--component-card-line:var(--line);--component-paper:inherit;--component-selected-paper:inherit;--component-selected-ink:inherit;--component-rule:inherit;--canvas:inherit;--surface:inherit;--panel:inherit;--ink:inherit;--hanja-ink:inherit;--muted:inherit;--vocabulary-muted:inherit;--line:inherit;--soft:inherit;--reading-hover:inherit;--control-feedback:inherit;--green:inherit;--blue:inherit;--stage-green:inherit;--stage-amber:inherit;--stage-red:inherit;--hun-native:inherit;--hun-usage:inherit;--hun-other:inherit;--bookmark-color:inherit;--review-blue:inherit;--review-green:inherit;--review-red:inherit}
:root[data-theme="dark"] .vocabulary-dialog-toolbar{background:var(--panel)}
:root[data-theme="dark"] .vocabulary-dialog .hanja-entry{--ink:inherit;--hanja-ink:inherit;--muted:inherit;--vocabulary-muted:inherit}
:root[data-theme="dark"] .vocabulary-dialog .entry-heading h2[data-heading-grade]{color:var(--ink)!important}
:root[data-theme="dark"] .vocabulary-dialog .hanja-entry .entry-heading .original-stroke-svg path[fill="#111"]{fill:var(--hanja-ink)}
:root[data-theme="dark"] .vocabulary-dialog .hanja-entry .entry-heading .original-stroke-svg path[stroke="#111"]{stroke:var(--hanja-ink)}
:root[data-theme="dark"] .vocabulary-dialog img.lesson-glyph:not(.lesson-illustration){filter:invert(1);mix-blend-mode:screen}
:root[data-theme="dark"] .vocabulary-dialog img.lesson-glyph[data-glyph-ink="black"]:not(.lesson-illustration){filter:grayscale(1) invert(1)!important;mix-blend-mode:screen!important}
:root[data-theme="dark"] .vocabulary-dialog img.lesson-glyph[data-glyph-ink="gray"]:not(.lesson-illustration){filter:grayscale(1) invert(1) brightness(.5294117647058824)!important;mix-blend-mode:screen!important}
:root[data-theme="dark"] .vocabulary-dialog .lesson-footnote .footnote-copy img.lesson-glyph.footnote-glyph-muted:not(.lesson-illustration){filter:grayscale(1) invert(1)!important;mix-blend-mode:screen!important}

.review-scroll-frame{position:relative;display:flex;flex:1;min-height:0;min-width:0}
.review-scroll-frame>#review-scroll{min-width:0;width:100%}
.review-scroll-thumb{display:none;position:absolute;right:0;top:0;width:28px;height:45px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.review-scroll-thumb::before{content:'';position:absolute;right:8px;top:0;width:5px;height:100%;border-radius:999px;background:var(--scrollbar);pointer-events:none}
.review-scroll-thumb.is-dragging{cursor:grabbing}
.review-scroll-thumb.is-dragging::before{background:var(--accent-ink)}
.review-scroll-thumb:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
@media(max-width:900px){
 .review-scroll-frame.has-review-scrollbar{padding-right:28px}
 .has-review-scrollbar>.review-scroll-thumb:not([hidden]){display:block}
 .review-scroll-frame.has-review-scrollbar>#review-scroll{scrollbar-width:none;scrollbar-gutter:auto}
 .review-scroll-frame.has-review-scrollbar>#review-scroll::-webkit-scrollbar{display:none;width:0}
}

/* Dense review-only rows; practice cards keep their original geometry. */
#review-scroll{--review-glyph-size:18px;padding-top:9px}
#review-scroll .history-list{--review-row-height:53px;margin-top:0}
#review-scroll .review-card-line{grid-template-columns:34px 36px minmax(0,1fr) 36px 36px 36px;align-items:center;min-height:0;padding:0 0 17px;border:0}
#review-scroll .review-card-line::after{display:none}
#review-scroll .history-entry{width:27px;height:36px;min-height:36px;padding:0;justify-self:stretch;font-size:var(--review-glyph-size);line-height:1;transform:none}
#review-scroll .history-choice{width:34px;height:36px;min-height:36px}
#review-scroll .review-answer,#review-scroll .review-answer[data-revealed="true"][data-long-reading="true"]{min-height:36px;text-align:left;padding:0 4px;font-size:.875rem;line-height:1.2;white-space:pre-line;overflow-wrap:anywhere}
#review-scroll :is(.review-memo,.review-star,.review-remove){width:26px;min-width:26px;height:26px;min-height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;--card-feedback-offset:0px}
#review-scroll .review-memo[data-has-memo="false"],#review-scroll .review-remove{color:var(--vocabulary-muted)}
#review-scroll .review-memo[data-has-memo="true"]{color:var(--stage-green)}
#review-scroll .history-row[data-memo-expanded="true"] .review-card-line{padding-bottom:0}
#review-scroll .review-memo-details{margin:0;padding:2px 12px 8px calc(52px - var(--review-glyph-size)/2);border-bottom:0}
#review-scroll .review-memo-text{min-height:0;line-height:1.45}
#review-scroll .review-star>.icon{width:21px;height:21px;stroke-width:2;transform:translateY(0px) scale(0.9560224089635855,0.9586080586080586);transform-origin:center}
#review-scroll .history-row,#review-scroll .history-row:is(.is-selected,.is-review-current){background:transparent}
#review-scroll .review-answer{align-self:stretch;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y}
#review-scroll .review-answer:disabled{cursor:default;opacity:1;color:inherit}
.notebook-toolbar .review-reverse>.icon{stroke-width:2;display:block;flex:none}

/* Desktop reverse glyph: 18px rendered / 24-unit viewBox; 4/3 units = 1 CSS px. */
@media(min-width:901px){
  .review-reverse[aria-pressed="false"] .review-order-arrow{d:path("M5.333333 3.666667V20.333333m-3-3 3 3 3-3")}
  .review-reverse[aria-pressed="true"] .review-order-arrow{d:path("M5.333333 20.333333V3.666667m-3 3 3-3 3 3")}
  .review-reverse[aria-pressed="false"] .review-order-lines{d:path("M12.666667 4.666667h5.5M12.666667 12h7M12.666667 19.333333h8.5")}
  .review-reverse[aria-pressed="true"] .review-order-lines{d:path("M12.666667 4.666667h8.5M12.666667 12h7M12.666667 19.333333h5.5")}
}

/* Mobile reverse glyph: 20px rendered / 24-unit viewBox; 1.2 units = 1 CSS px. */
@media(max-width:900px){
  .review-reverse[aria-pressed="false"] .review-order-arrow{d:path("M5.4 3.8V20.2m-3-3 3 3 3-3")}
  .review-reverse[aria-pressed="true"] .review-order-arrow{d:path("M5.4 20.2V3.8m-3 3 3-3 3 3")}
  .review-reverse[aria-pressed="false"] .review-order-lines{d:path("M12.6 4.8h5.5M12.6 12h7M12.6 19.2h8.5")}
  .review-reverse[aria-pressed="true"] .review-order-lines{d:path("M12.6 4.8h8.5M12.6 12h7M12.6 19.2h5.5")}
}

/* Optical placement only; reverse button hit area and path geometry stay fixed. */
.review-reverse>svg.icon{transform:translateX(.5px)}

/* Review-only footer: two equal long actions and the existing 50px memo square.
   No selection header or divider consumes the list viewport. */
#notebook-history-panel .history-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 50px;gap:8px}
#notebook-history-panel .history-actions>.history-add,#notebook-history-panel .history-actions>.review-select-ten{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;height:50px;min-height:50px;margin:0;padding:10px 8px;border:1px solid var(--panel-rule);border-radius:8px;background:var(--surface);color:var(--accent-ink);font-size:1rem;font-weight:400;line-height:1.5;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
#notebook-history-panel .history-actions>:is(.history-add,.review-select-ten):disabled{opacity:.45;color:var(--muted);cursor:default}
#notebook-history-panel .review-select-ten:not(:disabled):active,#notebook-history-panel .review-select-ten.is-touch-pressed:not(:disabled){background:var(--control-feedback)}
@media(hover:hover) and (pointer:fine){#notebook-history-panel .review-select-ten:not(:disabled):not([data-touch-input]):hover{background:var(--control-feedback)}}

#notebook-history-panel .history-actions>.history-add{gap:6px}
#notebook-history-panel .review-add-arrow{display:block;flex:none;width:1ch;height:1.2ch;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Small monochrome superscripts do not change the numeric line box. */
.header-actions #saved-count{display:inline-flex;align-items:center;gap:0;font-weight:400}
#saved-count .saved-count-slot{display:inline-block;font-weight:400}
#saved-count .saved-count-group{display:inline-flex;align-items:center;gap:1px;font-weight:400}
#saved-count .saved-count-plus,#saved-count .saved-count-star{display:block;flex:none;height:9px;transform:translateY(-3px);color:inherit;opacity:1}
#saved-count .saved-count-plus{width:9px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transform:translateY(-3px) scale(calc(8 / 9));transform-origin:center}
#saved-count .saved-count-star{width:9.424px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#saved-count .saved-count-dot{font-weight:400;margin-left:1px;margin-right:2px}
@media(max-width:380px){.header-actions #saved-count{gap:0}}

/* Reviewed, unchecked entries retain native checkbox geometry and false selection semantics. */
#review-scroll .history-choice input[data-review-excluded="true"]:not(:checked):not(:disabled){background-image:linear-gradient(var(--vocabulary-muted),var(--vocabulary-muted));background-size:8px 1.5px}

/* Desktop-only optical balance; mobile header positions stay unchanged. */
@media(min-width:901px){
 .header-actions{gap:16px}
 .header-actions #more-toggle.header-chip{margin-left:-8px}
 .header-actions #toc-toggle.header-chip{gap:5px;align-items:center}
 .header-actions #more-toggle.header-chip{align-items:center}
 .header-actions #toc-toggle>.icon,.header-actions #more-toggle .icon{translate:0 -.75px}
 .header-actions #saved-count{gap:0}
 #saved-count .saved-count-dot{margin-left:1px;margin-right:2px}
 #saved-count .saved-count-group:last-child{gap:1.5px}
 #saved-count .saved-count-star{transform:translateY(-3px) scale(.9);transform-origin:top left}
}

/* Phone/tablet optical balance; the 769–900px and desktop layouts stay intact. */
@media(max-width:768px){
 .header-actions{gap:2px}
 .header-actions #toc-toggle.header-chip{padding-left:4px;padding-right:8px;gap:4px}
 :root .header-actions #toc-toggle.header-chip::before{left:-3px;right:0}
 .header-actions #saved-toggle.header-chip{padding-left:7px;padding-right:6px}
 :root .header-actions #saved-toggle.header-chip::before{left:-1px;right:1px}
 .header-actions #toc-toggle>.icon{translate:0 -.75px}
 .header-actions #more-toggle .icon{translate:-7.5px -.75px}
 :root .header-actions #more-toggle.header-chip::before{inset:5.25px auto auto calc(50% - 7.5px);width:29px;height:32px}
 .header-actions #saved-count{gap:0}
 #saved-count .saved-count-dot{margin-left:1px;margin-right:2px}
 #saved-count .saved-count-group:last-child{gap:1.5px}
 #saved-count .saved-count-star{transform:translateY(-3px) scale(.9);transform-origin:top left}
}

/* Shift only the three phone controls, without moving the anchored menu panel. */
@media(max-width:768px){
 .header-actions :is(#toc-toggle,#saved-toggle,#more-toggle).header-chip{transform:translateX(6px)}
 .header-actions #toc-toggle.header-chip{transform:translateX(8px)}
 .header-actions #saved-toggle.header-chip{transform:translateX(5px)}
 :root .header-actions #more-toggle.header-chip[aria-expanded="true"]:not(:disabled):not([aria-disabled="true"])::before{background-color:var(--control-feedback)}
}

/* Optical adjustment of the More menu example glyph only. */
#body-examples-toggle>.icon{translate:0 -1px}

/* Keep the support envelope aligned optically without changing its menu row. */
#support-open>.icon{translate:0 1px}

/* Review-only reading-first order with a dedicated, aligned selection column. */
#review-scroll .review-card-line{grid-template-columns:36px minmax(0,1fr) 34px 12px 36px 36px 36px}
#review-scroll .history-entry{grid-column:1}
#review-scroll .review-answer{grid-column:2}
#review-scroll .history-choice{grid-column:3}
#review-scroll .review-memo{grid-column:5}
#review-scroll .review-star{grid-column:6}
#review-scroll .review-remove{grid-column:7}
#review-scroll .review-memo-details{padding-left:calc((36px - var(--review-glyph-size))/2)}
#notebook-history-panel .history-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
#notebook-history-panel .history-actions>.review-memos-toggle{width:100%;min-width:0}

/* Review selection remains a native checkbox, with a rounded-square visual surface. */
#review-scroll .history-choice input{position:relative;width:15px;height:15px;border-width:1.5px;border-radius:3.5px;background-size:10.666667px 10.666667px}
#review-scroll .history-choice input:not(:checked):not(:disabled){border-color:#cbd5e1;background-color:transparent}
[data-theme="dark"] #review-scroll .history-choice input:not(:checked):not(:disabled){border-color:#727d78}
#review-scroll .history-choice input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8 6.5 11.5 13 4.5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Review optical boxes do not alter native hit targets or stored note text. */
#review-scroll .review-card-line{grid-template-columns:36px minmax(0,1fr) 34px 0px 36px 36px 36px}
#review-scroll .history-entry{justify-content:flex-start}
#review-scroll .review-glyph{display:inline-flex;flex:0 0 23px;width:23px;align-items:center;justify-content:flex-start;text-align:left;line-height:1;transform:translateY(-.5px)}
#review-scroll .review-answer,#review-scroll .review-answer[data-revealed="true"][data-long-reading="true"]{padding-left:0}
#review-scroll :is(.review-choice-visual,.review-action-visual){display:flex;flex:0 0 24px;width:24px;height:24px;align-items:center;justify-content:center}
#review-scroll .review-action-visual{pointer-events:none}
#review-scroll .review-choice-visual{transform:translateX(8px)}
#review-scroll .review-memo .icon{transform:none}
#review-scroll .review-star .icon{stroke-width:2}
#review-scroll .review-remove .icon{stroke-width:1.6}
#review-scroll .review-memo-details{padding-top:1px;padding-left:calc((28px - var(--review-glyph-size))/2 + 3px)}
#review-scroll .review-memo-text{line-height:1.4;white-space:normal}
#review-scroll .review-memo-line{position:relative;display:block;min-height:1.4em;padding-left:0;white-space:pre-wrap;overflow-wrap:anywhere}

/* One continuous reading/checkbox region, with native controls kept separate. */
#review-scroll .review-selection-area{grid-column:2/4;grid-row:1;justify-self:stretch;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;min-width:0;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y}
#review-scroll .review-selection-area .review-answer{grid-column:1;grid-row:1}
#review-scroll .review-selection-area .history-choice{grid-column:2;grid-row:1}
#review-scroll .review-selection-area:has(input:disabled){cursor:default}
/* Match the existing tab/toolbar/footer keyline without moving those controls. */
#review-scroll{padding-left:14px}
#review-scroll .history-row{margin-left:0}
#review-scroll .review-memo-details{padding-left:3px}

/* Review checkbox leads the row; only the reading cell consumes spare width. */
#review-scroll .review-card-line{grid-template-columns:24px 27px minmax(0,1fr) 36px 36px 36px}
#review-scroll .history-choice{grid-column:1;grid-row:1;justify-self:start;justify-content:flex-start;width:24px}
#review-scroll .review-choice-visual{transform:translateX(-4.5px)}
#review-scroll .history-entry{grid-column:2}
#review-scroll .review-selection-area{grid-column:3;display:flex;align-items:center}
#review-scroll .review-selection-area .review-answer{flex:1;width:100%;min-width:0}
#review-scroll .review-selection-area:has(.review-answer:disabled){cursor:default}
#review-scroll .review-memo{grid-column:4}
#review-scroll .review-star{grid-column:5}
#review-scroll .review-remove{grid-column:6}
#review-scroll .review-memo-details{padding-left:24px}
#notebook-history-panel .history-actions{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
#notebook-history-panel .history-actions>:is(.review-select-ten,.review-memos-toggle){width:44px;min-width:44px;height:44px;min-height:44px;padding:0}
#notebook-history-panel .history-actions>.history-add{height:44px;min-height:44px}

@media(min-width:1600px){#review-scroll{padding-left:20px}}

/* Desktop review actions: equal ink gaps, with the native/custom scrollbar kept outside hit targets. */
@media(min-width:769px){
 #review-scroll{padding-right:8px}
   }
@media(min-width:1600px){#review-scroll{padding-right:14px}}

/* The review left region selects; glyphs no longer navigate away. */
#review-scroll .review-selection-area{grid-column:1/4;display:grid;grid-template-columns:24px 27px minmax(0,1fr)}
#review-scroll .review-selection-area .history-choice{grid-column:1;grid-row:1}
#review-scroll .review-selection-area .history-entry{grid-column:2;grid-row:1;border:0;background:transparent;color:inherit;cursor:pointer}
#review-scroll .review-selection-area .review-answer{grid-column:3;grid-row:1}
#review-scroll .history-entry:disabled{opacity:1;cursor:default}
#review-scroll .review-memo-text{cursor:text;user-select:text;-webkit-user-select:text;touch-action:pan-y}


#notebook-history-panel .history-actions>.history-add{font-size:13px;font-weight:400;white-space:nowrap;gap:4px}
#notebook-history-add .review-add-count{font-weight:inherit}

/* Review card action paint and hit boxes share one center; no optical translations. */
#review-scroll :is(.review-memo,.review-star,.review-remove){margin:0;left:auto;top:auto;transform:none;translate:none}
#review-scroll :is(.review-memo,.review-star,.review-remove)::before{left:50%;top:50%;width:26px;height:26px}
#review-scroll :is(.review-memo,.review-star,.review-remove) .review-action-visual{width:15px;height:15px;flex:0 0 15px;margin:0;padding:0;transform:none;translate:none;position:static}
#review-scroll :is(.review-memo,.review-star,.review-remove) .icon{display:block;width:15px;height:15px;margin:auto;padding:0;transform:none;translate:none;position:static}
/* Only checkbox and reading hit regions preview selection; glyphs open detail. */
@media(hover:hover) and (pointer:fine){
 #review-scroll .review-selection-area:has(.history-choice:not([data-touch-input]):hover,.review-answer:not([data-touch-input]):hover) .history-choice input:not(:disabled):not(:checked){border-color:var(--bookmark-color)}
 #review-scroll .review-selection-area:has(.history-choice:not([data-touch-input]):hover,.review-answer:not([data-touch-input]):hover) .history-choice input:not(:disabled):not(:checked)[data-review-excluded="true"]{background-color:transparent}
 #review-scroll .review-selection-area:has(.history-choice:not([data-touch-input]):hover,.review-answer:not([data-touch-input]):hover) .history-choice input:not(:disabled):not(:checked):not([data-review-excluded="true"]){background-color:color-mix(in srgb,var(--bookmark-color) 8%,transparent)}
 #review-scroll .review-selection-area:has(.history-choice:not([data-touch-input]):hover,.review-answer:not([data-touch-input]):hover) .history-choice input:not(:disabled):not(:checked):not([data-review-excluded="true"])::after{content:"";position:absolute;left:50%;top:50%;width:10.666667px;height:10.666667px;transform:translate(-50%,-50%);background:var(--bookmark-color);opacity:.35;pointer-events:none;mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8 6.5 11.5 13 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
 #review-scroll .review-selection-area:has(.history-choice:not([data-touch-input]):hover,.review-answer:not([data-touch-input]):hover) .history-choice input:not(:disabled):checked{box-shadow:none;background-color:#4f9f72;border-color:#4f9f72}

}

/* Review star-only optical lift; its button and feedback stay centered. */
#review-scroll .review-star .icon{transform:translateY(-.5px) scale(1.0666666666666667);transform-origin:center}

/* Text-only hover paint: measured extents preserve every existing control box. */
#notebook-panel :is(.notebook-answer,.review-answer)::before{border-radius:5px}
#notebook-panel :is(.notebook-char,.history-entry){position:relative;isolation:isolate}
#notebook-panel :is(.notebook-char,.history-entry)::after{content:"";position:absolute;left:var(--reading-feedback-x,0px);top:var(--reading-feedback-y,0px);width:var(--reading-feedback-width,0px);height:var(--reading-feedback-height,0px);border-radius:5px;background:transparent;pointer-events:none;z-index:-1}
@media(hover:hover) and (pointer:fine){
 #notebook-panel :is(.notebook-char,.history-entry):not(:disabled):not([data-touch-input]):hover::after{background-color:var(--control-feedback)}
}

/* Footer content hierarchy, without changing button tracks or hit areas. */
#notebook-history-panel .history-actions>.review-select-ten{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
#notebook-history-panel .history-actions>.history-add{font-size:13.5px;letter-spacing:-.02em;white-space:nowrap;font-weight:600}
#notebook-history-panel .history-actions>.history-add:disabled{font-weight:400}
#notebook-history-panel .review-memos-toggle .icon{width:17px;height:17px}
#notebook-panel .notebook-study-actions>#notebook-relay{font-weight:400}
#notebook-panel .notebook-study-actions>#notebook-relay:disabled{font-weight:400}

/* Review alone joins alternate readings and fits only genuinely overflowing text. */
#review-scroll .review-answer,#review-scroll .review-answer[data-revealed="true"][data-long-reading="true"]{font-size:var(--review-reading-size,14px);letter-spacing:var(--review-reading-tracking,normal)}
#review-scroll .review-answer[data-single-line="true"] .review-reading-text{display:inline-block;flex:none;white-space:nowrap}
#review-scroll .review-answer[data-single-line="false"] .review-reading-text{white-space:normal;overflow-wrap:anywhere}

#review-scroll .review-answer[data-reading-overflow="true"] .review-reading-text{white-space:normal;overflow-wrap:anywhere;flex:0 1 auto}

#review-scroll .history-row:has(.review-answer[data-reading-wrapped="true"]) .review-memo-details{padding-top:5px}

/* Mobile review action paint only: hit boxes and scrollbar rail do not move. */
@media(max-width:768px){
 #review-scroll :is(.review-memo,.review-star,.review-remove) .review-action-visual{transform:translateX(2px)}
 #review-scroll :is(.review-memo,.review-star,.review-remove)::before{left:calc(50% + 2px)}
}

/* Match the actual sixth toolbar button; keep the original size and vertical placement. */
#notebook-clear{translate:var(--notebook-clear-align-x,0px) 0}

/* A prose stroke keeps its original horizontal advance, but contributes zero
   ascent/descent. The block image creates no inline baseline inside its slot.
   Its transparent canvas may paint over neighboring lines without moving them.
   No pixel measurement, font-load callback or width/height rewrite is needed. */
:root .entry-original .lesson-inline-stroke{display:inline-block;height:0;min-height:0;line-height:0!important;vertical-align:baseline;overflow:visible;margin:0;padding:0;border:0}
:root .entry-original .lesson-inline-stroke>img.lesson-glyph{display:block!important;position:relative;top:calc(.12em + var(--content-glyph-offset,0px));translate:0 -100%}
:root .entry-original .lesson-inline-stroke>img.lesson-question-glyph:not([data-glyph-scale]){top:calc(.30em + var(--content-glyph-offset,0px))}
:root .entry-original .lesson-inline-stroke-relative-width>img.lesson-glyph{width:100%!important}
:root .entry-original .lesson-inline-stroke-auto-height>img.lesson-glyph{height:auto!important}