/* Shared appearance. Explicit surface/text pairs; never invert learning images. */
/* Audit fixes: keep compact controls, with accessible touch surfaces. */
html[data-appearance=dark] body :is(.mission-body,.mission-ko) b { color:var(--tt-accent)!important; }
.tt-preview-notice { padding:14px 16px; margin:0 0 20px; border:1px solid var(--tt-border); border-radius:12px; background:var(--tt-raised); color:var(--tt-text); font:400 16px/1.6 system-ui,sans-serif; }
html[data-appearance] body :is(.kr-toggle,.type-switch a,.level-tabs a,.levels a,.lesson-nav a,.text-actions button,.player-tools button) { min-height:44px; min-width:44px; box-sizing:border-box; }
html[data-appearance] body :is(.type-switch a,.level-tabs a,.levels a,.lesson-nav a) { display:inline-flex; align-items:center; justify-content:center; }
html[data-appearance] body :is(.type-switch,.level-tabs,.levels,.lesson-nav,.text-actions,.player-tools) { gap:8px; flex-wrap:wrap; }
html[data-appearance] #speedSelect { min-height:44px; min-width:64px; font-size:16px; }
html[data-appearance] #progress { min-height:44px; }
html[data-appearance] #loopButton { min-width:44px; min-height:44px; }
html[data-appearance] #loopButton { background:transparent!important; padding:0; }
html[data-appearance] #loopButton::before { content:""; position:absolute; width:42px; height:24px; left:1px; top:10px; border-radius:99px; background:var(--tt-border); }
html[data-appearance] #loopButton.on::before { background:var(--tt-accent); }
html[data-appearance] #loopButton::after { top:13px; left:4px; }
html[data-appearance] #loopButton.on::after { left:22px; }
html[data-appearance] .filter-bar a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; box-sizing:border-box; }
html[data-appearance] .filter-bar { gap:8px; flex-wrap:wrap; }
/* Trim only the logo's outer white margin; preserve the original artwork. */
html[data-appearance] .tt-themed-header img[src$="talktag-logo.png"] {
  object-fit:cover;
  clip-path:inset(6% round 18%);
  scale:1.12;
  transform-origin:center;
}

/* Main navigation: identical geometry and material in Bright/Dark modes. */
.tt-theme-switch button{transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}.tt-theme-switch button:active{transform:translateY(1px)}
@media(max-width:820px){
  html[data-appearance] .nav-button{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .1s ease}
  html[data-appearance] .nav-button.active{transform:none}
  html[data-appearance] .nav-button:active{transform:translateY(1px);box-shadow:inset 0 1px #ffffff22,0 1px 0 #52657a!important}
}

/* iPhone-friendly route controls: true history back plus a stable category landing. */
.tt-route-tools{
  width:min(1180px,calc(100% - 32px));min-height:58px;margin:14px auto 0;padding:6px;
  display:flex;align-items:center;gap:8px;border:1px solid var(--tt-border);border-radius:17px;
  background:color-mix(in srgb,var(--tt-card) 94%,transparent);box-shadow:0 8px 22px rgba(24,52,85,.08);
}
.tt-route-tools :is(button,a){
  min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 14px;border:1px solid var(--tt-border);border-radius:12px;background:var(--tt-card);
  color:var(--tt-text);text-decoration:none;font:850 12px/1.2 Inter,"Noto Sans KR",system-ui,sans-serif;
  cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.55);transition:background .16s ease,border-color .16s ease,transform .1s ease;
}
.tt-route-tools :is(button,a):active{transform:translateY(1px)}
.tt-route-tools :is(button,a):focus-visible{outline:3px solid color-mix(in srgb,var(--tt-accent) 38%,transparent);outline-offset:2px}
.tt-route-previous{flex:0 0 auto}.tt-route-category{flex:1}.tt-route-tools span{font-size:17px;line-height:1}

/* Level selectors use a light paper-note vocabulary instead of button chrome. */
html[data-appearance] .tt-level-postits{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;
  overflow:visible!important;padding:12px 5px 18px!important;
}
html[data-appearance] .tt-level-postits>a{
  position:relative!important;min-width:0!important;min-height:112px!important;margin:0!important;padding:24px 16px 16px!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
  border:1px solid color-mix(in srgb,#bd9a45 30%,var(--tt-border))!important;border-radius:4px 4px 14px 5px!important;
  background:#fff2a8!important;color:#2f3d50!important;text-align:left!important;text-decoration:none!important;
  box-shadow:0 10px 18px rgba(63,54,29,.12),inset 0 1px rgba(255,255,255,.65)!important;
  transform:rotate(-.45deg);transition:transform .16s ease,box-shadow .16s ease!important;
}
html[data-appearance] body .tt-level-postits.tt-level-postits.tt-level-postits>a[data-tt-level-group]:not(.is-level-complete){background:var(--level-paper)!important;color:var(--level-ink,#243a58)!important;filter:none!important}
html[data-appearance] body .tt-level-postits.tt-level-postits.tt-level-postits>a[data-tt-level-group]:not(.is-level-complete) :is(h2,h3,strong,span,p,small){color:inherit!important}
[data-tt-level-group=A]{--level-paper:#fff2a8}
[data-tt-level-group=B]{--level-paper:#dff3ff}
[data-tt-level-group=C]{--level-paper:#e5f4df}
html[data-appearance=dark] [data-tt-level-group=A]{--level-paper:#49432e;--level-ink:#f2ead0}
html[data-appearance=dark] [data-tt-level-group=B]{--level-paper:#293f53;--level-ink:#dfedf8}
html[data-appearance=dark] [data-tt-level-group=C]{--level-paper:#304737;--level-ink:#e0efdf}
html[data-appearance] .tt-level-postits>a:nth-child(3n+2){background:#dff3ff!important;transform:rotate(.35deg)}
html[data-appearance] .tt-level-postits>a:nth-child(3n){background:#e5f4df!important;transform:rotate(-.2deg)}
html[data-appearance] .tt-level-postits>a::before{
  content:"";position:absolute;left:50%;top:-7px;width:34px;height:14px;transform:translateX(-50%) rotate(-2deg);
  border:0;background:rgba(255,255,255,.66);box-shadow:0 1px 3px rgba(40,50,65,.10);
}
html[data-appearance] .tt-level-postits>a:hover{transform:translateY(-3px) rotate(0);box-shadow:0 15px 26px rgba(44,54,70,.16)!important}
html[data-appearance] .tt-level-postits>a:is(.active,[aria-current]){outline:3px solid color-mix(in srgb,var(--tt-accent) 55%,transparent);outline-offset:2px}
html[data-appearance] .tt-level-postits>a :is(h2,h3,strong,span){color:#243a58!important}
html[data-appearance] .tt-level-postits>a p{color:#52657b!important}
html[data-appearance=dark] .tt-level-postits>a{filter:brightness(.82) saturate(.78);color:#142a46!important}

@media(max-width:620px){
  .tt-route-tools{width:calc(100% - 32px);margin-top:10px}
  .tt-route-tools :is(button,a){padding:0 11px;font-size:11px}
  html[data-appearance] .tt-level-postits{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  html[data-appearance] .tt-level-postits>a{min-height:104px!important;padding:22px 13px 14px!important}
}

/* Korean mode: mirror the six-button English navigation without crossing language boundaries. */
.kr-mode-nav{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
  max-width:760px;margin:24px auto;padding:8px 16px;
}
.kr-mode-nav>a{
  display:flex;min-width:0;min-height:52px;align-items:center;justify-content:center;
  gap:7px;padding:7px 10px;border:1px solid var(--tt-border);border-radius:15px;
  background:var(--tt-card);color:var(--tt-text);text-decoration:none;
  box-shadow:inset 0 1px #fff,0 2px 0 var(--tt-border);
}
.kr-mode-nav>a>span{font-size:20px;line-height:1}.kr-mode-nav>a>b{font-size:12px;white-space:nowrap}
.kr-mode-nav>a[aria-current]{background:#1768d5;color:#fff;border-color:#1768d5}
@media(max-width:820px){
  html[data-appearance] body .app>.sidebar{
    left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;height:58px!important;padding:5px!important;border-radius:20px!important;
  }
  html[data-appearance] body .app>.sidebar>.nav{
    width:100%!important;height:100%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:3px!important;overflow:hidden;
  }
  html[data-appearance] body .app>.sidebar .nav-button{
    min-width:0!important;min-height:46px!important;padding:3px 1px!important;border:1px solid var(--tt-border)!important;
    border-radius:13px!important;gap:1px!important;font-size:8px!important;line-height:1!important;white-space:nowrap!important;
  }
  html[data-appearance] body .app>.sidebar .nav-button>span[data-mobile-label]{font-size:0!important}
  html[data-appearance] body .app>.sidebar .nav-button>span[data-mobile-label]::after{content:attr(data-mobile-label);font-size:8px!important}
  html[data-appearance] body .app>.sidebar .nav-icon{font-size:22px!important;line-height:.95!important}
  html[data-appearance] body .kr-mode-nav{
    position:fixed;z-index:40;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));
    width:auto;height:58px;margin:0;padding:5px;gap:3px;border:1px solid var(--tt-border);border-radius:20px;
    background:color-mix(in srgb,var(--tt-card) 92%,transparent);
    box-shadow:0 5px 0 color-mix(in srgb,var(--tt-border) 82%,transparent),0 12px 28px #0b1e3824;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  html[data-appearance] body .kr-mode-nav>a{
    min-height:46px;padding:3px 1px;gap:1px;flex-direction:column;border-radius:13px;
    font-size:8px;line-height:1;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .1s ease;
  }
  html[data-appearance] body .kr-mode-nav>a>span{font-size:22px}.kr-mode-nav>a>b{font-size:8px}
  html[data-appearance=bright] body .kr-mode-nav>a:not([aria-current]){background:linear-gradient(180deg,#fffdf8,#f0ece4);border-color:#d7dee7;color:#435873;box-shadow:inset 0 1px #fff,0 2px 0 #c7d0da}
  html[data-appearance=bright] body .kr-mode-nav>a[aria-current]{background:linear-gradient(145deg,#2d7fe9,#155dbd);border-color:#1768d5;color:#fff;box-shadow:inset 0 1px #ffffff55,0 3px 0 #0b438f}
  html[data-appearance=dark] body .kr-mode-nav>a:not([aria-current]){background:linear-gradient(180deg,#172a45,#102039);border-color:#344b68;color:#dce6f4;box-shadow:inset 0 1px #ffffff12,0 2px 0 #071222}
  html[data-appearance=dark] body .kr-mode-nav>a[aria-current]{background:linear-gradient(145deg,#285f9c,#1b4578);border-color:#78a9e8;color:#fff;box-shadow:inset 0 1px #ffffff24,0 3px 0 #081a31}
  html[data-appearance] body .kr-mode-nav>a:active{transform:translateY(1px);box-shadow:inset 0 1px #ffffff22,0 1px 0 #52657a}
  body:has(.kr-mode-nav) main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}
@media(max-width:620px){
  html[data-appearance] .ja-mode-nav a{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .1s ease}
  html[data-appearance=bright] .ja-mode-nav a:not([aria-current]){background:linear-gradient(180deg,#fffdf8,#f0ece4)!important;border-color:#d7dee7!important;color:#435873!important;box-shadow:inset 0 1px #fff,0 2px 0 #c7d0da!important}
  html[data-appearance=dark] .ja-mode-nav a:not([aria-current]){background:linear-gradient(180deg,#172a45,#102039)!important;border-color:#344b68!important;color:#dce6f4!important;box-shadow:inset 0 1px #ffffff12,0 2px 0 #071222!important}
  html[data-appearance=bright] .ja-mode-nav a[aria-current]{background:linear-gradient(145deg,#2d7fe9,#155dbd)!important;border-color:#1768d5!important;color:#fff!important;box-shadow:inset 0 1px #ffffff55,0 3px 0 #0b438f!important}
  html[data-appearance=dark] .ja-mode-nav a[aria-current]{background:linear-gradient(145deg,#285f9c,#1b4578)!important;border-color:#78a9e8!important;color:#fff!important;box-shadow:inset 0 1px #ffffff24,0 3px 0 #081a31!important}
  html[data-appearance] .ja-mode-nav a[aria-current]{transform:none}
  html[data-appearance] .ja-mode-nav a:active{transform:translateY(1px);box-shadow:inset 0 1px #ffffff22,0 1px 0 #52657a!important}
}
html[data-appearance] { --tt-bg:#f5f2eb; --tt-card:#fffcf5; --tt-raised:#eee9df; --tt-text:#23354d; --tt-muted:#5d6979; --tt-border:#d8d4ca; --tt-accent:#1768d5; color-scheme:light; }
html[data-appearance=dark] { --tt-bg:#030916; --tt-card:#0b172b; --tt-raised:#13243d; --tt-text:#e6ecf6; --tt-muted:#adbcd0; --tt-border:#2a3c56; --tt-accent:#87b9ff; color-scheme:dark; }
html[data-appearance] body { background:radial-gradient(ellipse at 50% 0%,#fffcf6 0%,var(--tt-bg) 75%); color:var(--tt-text); }
html[data-appearance=dark] body { background:radial-gradient(ellipse at 50% -20%,#152c51 0%,#081327 38%,#030916 80%); }
html[data-appearance] .canvas { background:transparent!important; }
html[data-appearance] .tt-themed-header { height:auto!important; min-height:82px; flex-wrap:wrap; gap:12px; padding-top:12px!important; padding-bottom:12px!important; flex-shrink:0; background:var(--tt-card)!important; border-color:var(--tt-border)!important; }
.tt-theme-switch { display:inline-flex; flex:none; gap:3px; padding:4px; border:1px solid var(--tt-border); border-radius:18px; background:var(--tt-raised); }
.tt-themed-header>.home,.tt-themed-header>.back,.tt-themed-header>#back { margin-left:auto; }
html[data-appearance=dark] .orbit::after { background:var(--tt-raised); border-color:var(--tt-border); }
html[data-appearance=dark] .orbit::before { border-color:var(--tt-border); }
html[data-appearance=dark] :is(.learning-card,.course-card,.shared-link,.bottom-nav,.secondary,.language-tabs a,.share) { background:var(--tt-card)!important; color:var(--tt-text)!important; border-color:var(--tt-border)!important; }
html[data-appearance=dark] .language-tabs a.active { background:#1c3961!important; }
html[data-appearance=dark] .hero-visual { background:radial-gradient(ellipse at center,#17365a,transparent 70%); }
html[data-appearance=dark] body :is(.floating-share,.head-links a) { background:var(--tt-raised)!important; color:#dceaff!important; border-color:var(--tt-border)!important; }
html[data-appearance=dark] body .floating-share svg { color:#dceaff!important; stroke:currentColor; }
html[data-appearance=dark] .home-copy strong { color:#91bfff!important; }
.tt-theme-switch button { min-height:44px; min-width:78px; padding:0 12px; border:0; border-radius:13px; background:transparent; color:var(--tt-muted); font:700 12px system-ui,sans-serif; cursor:pointer; }
.tt-theme-switch button[aria-pressed=true] { background:var(--tt-card); color:var(--tt-text); box-shadow:0 3px 9px #0002,inset 0 1px 0 #ffffff15; }
.tt-theme-switch button:focus-visible { outline:3px solid var(--tt-accent); outline-offset:2px; }
html[data-appearance] :is(.sidebar,.card,.panel-card,.studio-card,.home-news-card,.space,.method-section,.cefr,.scale,.band,.lesson,.player-card,.lesson-info,.toggle-panel,.sync-pilot,.section,.story,.step,.full,.prompt,.cue,.retell,.own-grid>div,.share-menu) { background:var(--tt-card)!important; border-color:var(--tt-border)!important; color:var(--tt-text); }
html[data-appearance=dark] { --navy:#e4edfc; --n:#e4edfc; --ink:#e6ecf6; --muted:#adbcd0; --blue:#87b9ff; --b:#87b9ff; --line:#2a3c56; --l:#2a3c56; --paper:#030916; --orange:#ffab72; --o:#ffab72; --shadow:0 24px 55px #0006; }
html[data-appearance=dark] :is(h1,h2,h3,h4,.brand b,.brand strong,.brand span,.catchphrase,.mission-ko,.band b,.prompt b,.retell b) { color:var(--tt-text)!important; }
html[data-appearance=dark] :is(p,.summary,.topic,.band span,.band em,.card small,.home-news-card small,.mission-kicker,.script-list,.cue span,.retell p,.own-grid>div,dd,dt,.time-row,.sync-ko,.sync-reading) { color:var(--tt-muted)!important; }
html[data-appearance=dark] :is(.control,.option,.text-actions button,.complete-button,.sync-line,.sync-toolbar button,.sync-toolbar label,.floating-share,.floating-home,.section-tag,.notice,.class-bridge,.starters,.language-switch.language-tabs a,.share-option,.lesson-meta span,select,textarea,input:not([type=range])) { background:var(--tt-raised)!important; color:var(--tt-text)!important; border-color:var(--tt-border)!important; box-shadow:none!important; }
html[data-appearance=dark] :is(.control.primary,.start,.toggle,.sync-enable,.orbit-core) { background:#245bad!important; color:#fff!important; }
html[data-appearance=dark] :is(.sync-line.active,.language-switch.language-tabs a.active,.nav-button.active) { background:#1c3961!important; color:#eef5ff!important; border-color:#87b9ff!important; }
html[data-appearance=dark] :is(.orbit,.orbit:after,.orbit:before) { background:transparent; border-color:var(--tt-border); }
html[data-appearance=dark] .test :is(h3,.ko,p,.exam) { color:var(--tt-text)!important; }
html[data-appearance=dark] .exam.live { background:var(--tt-raised); color:var(--tt-text); border-color:var(--tt-border); }
html[data-appearance=dark] .share-qr { background:white; }
html[data-appearance=dark] .logic-block { color:#183455; }
html[data-appearance] .top-actions,html[data-appearance] .head-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* Learning surfaces: a light card must never inherit dark-mode light lettering. */
html[data-appearance] :is(.item,.shared-layer,.method,.method li,.flow>div,.camp-card,.level-card,.stage-card,.series,.output,.recall,.refresh,.variable,.var-task,.rule,.readingDocument,.passagePanel,.feedback,.vaultDialog,.vaultPanel,.vaultItem,.importPanel,.hero-panel,.benefit,.library-card,.bridge,.essay-guide,.essay-step,.lesson-card,.empty,dialog) {
  background:var(--tt-card)!important; color:var(--tt-text); border-color:var(--tt-border)!important;
}
html[data-appearance=dark] :is(.lesson-nav a,.nav a,.stage-nav a,.player-tools button,.flow>div,.pill,.badge,.audio-status,.level-tabs a,.levels a,.tabs a,.chip,.kr-toggle,.kr,.refresh,.variable,.var-task,.rule,.tab b,.partButton,.utilityButton,.vaultAction,.vaultClose,.vaultFile,.selfGradeInput) {
  background:var(--tt-raised)!important; color:var(--tt-text)!important; border-color:var(--tt-border)!important;
}
html[data-appearance=dark] :is(.class-bridge strong,.cue b,.ey,.eyebrow,.level,.camp-kicker,.num,.stage-number,.stage-footer,.output,.card-link,.shared-layer a,.bottom-nav a,.subtitle,.meaning,.script,.quiet,.footnote,.complete-state,.avatar) { color:var(--tt-text)!important; }
html[data-appearance=dark] .planet { color:#183455!important; }
html[data-appearance=dark] :is(.step,.full,.script,.script-list,.passage,.readingDocument) p { color:var(--tt-text)!important; }
html[data-appearance=dark] :is(a,button,input,textarea,select,summary):focus-visible { outline:3px solid #a8caff; outline-offset:3px; }
/* TOEIC retains separate correct/wrong states, with readable dark surfaces. */
html[data-appearance=dark] { --green:#91dec0; --red:#ffaaa4; --light:#15392e; --pink:#3b202c; }
html[data-appearance=dark] :is(.toeicLanding,.toeicTrack,.youtubeBridge,.examShell,.examPaper,.resultPaper,.examPassage,.examChoice,.resultChoice,.resultItem,.resultExplanation,.vaultShell,.vaultSectionCopy,.importHint) { background:var(--tt-card)!important; color:var(--tt-text)!important; border-color:var(--tt-border)!important; }
html[data-appearance=dark] :is(.toeicTrack p,.toeicTrack span,.toeicTrack small,.vaultItem span,.vaultItem small,.vaultNote,.vaultStatus,.feedback p,.resultLabel,.examQuestionText,.examInstructions p,.examStatus time,.examBar strong) { color:var(--tt-text)!important; }
html[data-appearance=dark] :is(.primary,.partButton.active,.sharePrimary,.examSubmit) { background:#245bad!important; color:#fff!important; border-color:#87b9ff!important; }
html[data-appearance=dark] :is(.choice.correct,.choice.correct strong,.resultChoice.correct) { color:#9fc6ff!important; }
html[data-appearance=dark] :is(.choice.selectedWrong,.choice.selectedWrong strong,.resultChoice.userWrong) { color:#ffaaa4!important; }
html[data-appearance=dark] :is(.examChoice.selected,.resultChoice.correct,.resultChoice.userWrong) { background:var(--tt-raised)!important; }
html[data-appearance=dark] mark { background:#ffe3a0; color:#17243b; }
html[data-appearance=dark] :is(.type-switch a,.filter-bar a,.bridge-flow div,.benefit b,.kr-panel) { background:var(--tt-raised)!important; color:var(--tt-text)!important; border-color:var(--tt-border)!important; }
html[data-appearance=dark] :is(.type-switch a.active,.filter-bar a.active,.stage-nav a[aria-current=page],.player-tools button[aria-pressed=true]) { background:#245bad!important; color:#fff!important; border-color:#87b9ff!important; }
html[data-appearance] :is(.snow-step,.step-text,.own-task,.step-kr,.coming) { background:var(--tt-card)!important; color:var(--tt-text)!important; border-color:var(--tt-border)!important; }
html[data-appearance=dark] :is(.level,.status,.complete-state,.avatar,.bottom-nav a,.toeicTrack em) { background:var(--tt-raised)!important; color:var(--tt-text)!important; }
html[data-appearance=dark] :is(.nav-button,.refresh span,.variable span,.toeicBack,.toeicLandingHeader span,.start span) { color:var(--tt-text)!important; }
html[data-appearance=dark] .lesson-action { background:#245bad!important; color:#fff!important; }
html[data-appearance=dark] .own-task b { color:#ffbc8e!important; }
html[data-appearance=bright] { --muted:#5d6979; --m:#5d6979; --orange:#a5450c; --o:#a5450c; }
html[data-appearance=bright] :is(.intro,.summary,.topic,.guide,.time-row,dt,.brand small,.item p,.lesson-card p,.lesson-meta span,.section-tag,.band span,.band em,.complete-state,.toeicBack,.toeicTrack em,.empty) { color:#5d6979!important; }
html[data-appearance=bright] :is(.card,.space,.section,.cefr,.recall,.full,.story,.method,.camp-card,.series) p { color:#5d6979!important; }
html[data-appearance=bright] :is(.num,.step small,.step-label,.camp-open,.open,.own-task b) { color:#a5450c!important; }
html[data-appearance=bright] .cue b { color:#24543e; }
html[data-appearance=bright] .type-switch a:not(.active) { color:#5d6979; }
html[data-appearance=bright] :is(.benefit b,.planet.p1) { color:#1255b0; }
html[data-appearance=bright] .space.test { background:#0b2855!important; }
html[data-appearance=bright] .space.test :is(h3,p,.number,.open) { color:#e6ecf6!important; }
html[data-appearance=dark] :is(.deckLabel span,.deckLabel strong,.deckButton small,.essay-step-number) { color:var(--tt-text)!important; }
html[data-appearance=dark] :is(.deckButton:not(.primary),.deckButton i) { background:var(--tt-raised)!important; color:var(--tt-text)!important; border-color:var(--tt-border)!important; }
html[data-appearance=bright] :is(.nav-button,.nav-sub,#view-description,.language-tabs-label) { color:#5d6979!important; }
html[data-appearance=bright] .nav-button.active { color:#1255b0!important; }
html[data-appearance=bright] .avatar { background:#914623; color:#fff; }
@media(max-width:700px) {
  html[data-appearance] .tt-themed-header { padding-left:12px!important; padding-right:12px!important; }
  html[data-appearance] .tt-themed-header>.tt-theme-switch { margin-left:auto; }
  html[data-appearance] .top-actions,html[data-appearance] .head-links { width:100%; justify-content:flex-end; }
  html[data-appearance] .top-actions .tt-theme-switch { margin-left:auto; }
  html[data-appearance] .top-brand { max-width:none!important; }
}
/* Home header: two predictable rows instead of three wrapped action rows. */
/* Home news is injected as feature-card, not home-news-card. Override its gradients as a pair. */
html[data-appearance=dark] body .home-news .feature-card {
  background:#0b172b!important;
  border:1px solid #344b68!important;
  color:#e6ecf6!important;
}
html[data-appearance=dark] body .home-news .feature-card h3 { color:#e6ecf6!important; }
html[data-appearance=dark] body .home-news .feature-card p { color:#c3cede!important; }
html[data-appearance=dark] body .home-news .feature-card .news-label { color:#ffbc8e!important; }
html[data-appearance=dark] body .home-news .feature-card strong { color:#a8caff!important; }
@media(max-width:620px) {
  html[data-appearance] header.topbar:has(.top-brand) {
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    gap:8px 10px; padding:10px 12px!important; min-height:0;
  }
  html[data-appearance] .topbar .top-brand { grid-row:1; grid-column:1; max-width:none; min-width:0; gap:8px; }
  html[data-appearance] .topbar .top-brand>a { width:44px; height:44px; flex-basis:44px; border-radius:12px; }
  html[data-appearance] .topbar .mobile-logo { left:0; top:0; width:44px!important; height:44px!important; object-fit:contain; transform:none; scale:1.12; clip-path:inset(3% round 15%); }
  html[data-appearance] .topbar .catchphrase { font-size:11px; line-height:1.15; max-width:130px; }
  html[data-appearance] .topbar .top-actions { display:contents; }
  html[data-appearance] .topbar .top-actions .tt-theme-switch { grid-row:1; grid-column:2; margin:0; padding:2px; gap:0; border-radius:13px; }
  html[data-appearance] .topbar .tt-theme-switch button { min-width:54px; min-height:44px; padding:0 5px; font-size:10px; border-radius:10px; }
  html[data-appearance] .topbar .language-switch.language-tabs { grid-row:2; grid-column:1; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  html[data-appearance] .topbar .language-tabs-label { display:none; }
  html[data-appearance] .topbar .language-switch.language-tabs a { min-width:0; width:auto; height:44px; padding:0 5px; font-size:10px; border-radius:11px; box-shadow:0 2px 0 var(--tt-border); }
  html[data-appearance] .topbar .floating-share { grid-row:2; grid-column:2; justify-self:end; width:44px; height:44px; border-radius:11px; box-shadow:none; }
  html[data-appearance] .topbar .floating-share svg { width:19px; height:19px; }
  html[data-appearance] .topbar .share-menu { top:100%; right:12px; }
}

/* Final navigation state overrides: keep button and link items visually identical. */
@media(max-width:820px){
  html[data-appearance=bright] body .nav .nav-button:not(.active){background:linear-gradient(180deg,#fffdf8,#f0ece4)!important;border-color:#d7dee7!important;color:#435873!important;box-shadow:inset 0 1px #fff,0 2px 0 #c7d0da!important}
  html[data-appearance=bright] body .nav .nav-button.active{background:linear-gradient(145deg,#2d7fe9,#155dbd)!important;border-color:#1768d5!important;color:#fff!important;box-shadow:inset 0 1px #ffffff55,0 3px 0 #0b438f!important}
  html[data-appearance=dark] body .nav .nav-button:not(.active){background:linear-gradient(180deg,#172a45,#102039)!important;border-color:#344b68!important;color:#dce6f4!important;box-shadow:inset 0 1px #ffffff12,0 2px 0 #071222!important}
  html[data-appearance=dark] body .nav .nav-button.active{background:linear-gradient(145deg,#285f9c,#1b4578)!important;border-color:#78a9e8!important;color:#fff!important;box-shadow:inset 0 1px #ffffff24,0 3px 0 #081a31!important}
}

/* Keep the six-button dock identical on Home, Studio, Discussions and Tests. */
@media(max-width:820px){
  html[data-appearance] body :is(.bottom-nav,.tl-main-nav){display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:auto!important;height:58px!important;margin:0!important;padding:5px!important;gap:3px!important;transform:none!important;border:1px solid var(--tt-border)!important;border-radius:20px!important;background:color-mix(in srgb,var(--tt-card) 92%,transparent)!important;box-shadow:0 5px 0 color-mix(in srgb,var(--tt-border) 82%,transparent),0 12px 28px #0b1e3824!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  html[data-appearance] body :is(.bottom-nav,.tl-main-nav)>a{display:flex!important;min-width:0!important;min-height:46px!important;padding:3px 1px!important;gap:1px!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;border:1px solid var(--tt-border)!important;border-radius:13px!important;font-size:8px!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important;text-decoration:none!important;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .1s ease!important}
  html[data-appearance] body :is(.bottom-nav,.tl-main-nav)>a :is(.bn-icon,span:first-child){font-size:22px!important;line-height:.95!important}
  html[data-appearance=bright] body :is(.bottom-nav,.tl-main-nav)>a:not(.active):not([aria-current]){background:linear-gradient(180deg,#fffdf8,#f0ece4)!important;border-color:#d7dee7!important;color:#435873!important;box-shadow:inset 0 1px #fff,0 2px 0 #c7d0da!important}
  html[data-appearance=bright] body :is(.bottom-nav,.tl-main-nav)>a:is(.active,[aria-current]){background:linear-gradient(145deg,#2d7fe9,#155dbd)!important;border-color:#1768d5!important;color:#fff!important;box-shadow:inset 0 1px #ffffff55,0 3px 0 #0b438f!important}
  html[data-appearance=dark] body :is(.bottom-nav,.tl-main-nav)>a:not(.active):not([aria-current]){background:linear-gradient(180deg,#172a45,#102039)!important;border-color:#344b68!important;color:#dce6f4!important;box-shadow:inset 0 1px #ffffff12,0 2px 0 #071222!important}
  html[data-appearance=dark] body :is(.bottom-nav,.tl-main-nav)>a:is(.active,[aria-current]){background:linear-gradient(145deg,#285f9c,#1b4578)!important;border-color:#78a9e8!important;color:#fff!important;box-shadow:inset 0 1px #ffffff24,0 3px 0 #081a31!important}
  html[data-appearance] body :is(.bottom-nav,.tl-main-nav)>a:active{transform:translateY(1px)!important}
}

/* Calm active navigation: a soft location cue keeps labels readable. */
@media(max-width:820px){
  html[data-appearance=bright] body :is(.nav .nav-button.active,.kr-mode-nav>a[aria-current],.ja-mode-nav a[aria-current],.bottom-nav>a:is(.active,[aria-current]),.tl-main-nav>a:is(.active,[aria-current])){
    background:#e8f1fc!important;border-color:#aac7eb!important;color:#164f92!important;
    box-shadow:inset 0 1px #fff,0 2px 6px rgba(24,52,85,.10)!important;
  }
  html[data-appearance=dark] body :is(.nav .nav-button.active,.kr-mode-nav>a[aria-current],.ja-mode-nav a[aria-current],.bottom-nav>a:is(.active,[aria-current]),.tl-main-nav>a:is(.active,[aria-current])){
    background:#1b304d!important;border-color:#5479a8!important;color:#eaf3ff!important;
    box-shadow:inset 0 1px #ffffff14,0 2px 6px rgba(0,0,0,.18)!important;
  }
}
/* Compact appearance control: 44px touch surfaces, calm 32px visual rail. */
html.tt-theme-changing body *,html.tt-theme-changing body *::before,html.tt-theme-changing body *::after{transition:none!important}
html[data-appearance] body .tt-theme-switch{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:96px!important;height:44px!important;min-width:96px!important;padding:0!important;gap:4px!important;border:0!important;background:transparent!important;box-shadow:none!important;flex:none!important}
html[data-appearance] body .tt-theme-switch::before{content:"";position:absolute;inset:6px 0;border:1px solid var(--tt-border);border-radius:12px;background:var(--tt-raised)}
html[data-appearance] body .tt-theme-switch button{position:relative!important;display:grid!important;place-items:center!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border:0!important;border-radius:12px!important;background:transparent!important;color:var(--tt-muted)!important;box-shadow:none!important;transition:none!important;z-index:1}
html[data-appearance] body .tt-theme-switch button[aria-pressed=true]{color:var(--tt-text)!important}
html[data-appearance] body .tt-theme-switch button[aria-pressed=true]::before{content:"";position:absolute;inset:7px 2px;border-radius:9px;background:var(--tt-card);box-shadow:0 1px 4px #00000012;z-index:-1}
html[data-appearance] body .tt-theme-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-appearance] body .tt-theme-switch button:focus-visible{outline:2px solid var(--tt-accent)!important;outline-offset:2px}
html[data-appearance=dark] .tt-completion-button{background:var(--tt-raised)!important;color:var(--tt-text)!important;border-color:var(--tt-border)!important;box-shadow:none!important}
html[data-appearance=dark] .tt-completion-button[aria-pressed=true]{background:#204d40!important;color:#e7f6ef!important;border-color:#427560!important}
html[data-appearance=dark] .icon-btn{background:var(--tt-raised)!important;color:var(--tt-text)!important;border-color:var(--tt-border)!important}

/* Mobile spacing audit: remove obsolete reserved space, not reading or safe areas. */
@media(max-width:820px){
  html[data-appearance] body.tt-study-page>header:is(.top,.site-head).tt-themed-header{display:grid!important;grid-template-columns:minmax(0,1fr) 96px!important;align-items:center!important;min-height:72px!important;padding:10px 16px!important;gap:12px!important}
  html[data-appearance] body.tt-study-page>header:is(.top,.site-head) .brand{grid-column:1;grid-row:1;min-width:0;max-width:none!important;width:auto!important;gap:10px!important}
  html[data-appearance] body.tt-study-page>header:is(.top,.site-head) .brand :is(b,strong,span){min-width:0;overflow-wrap:anywhere}
  html[data-appearance] body.tt-study-page>header:is(.top,.site-head)>.tt-theme-switch{grid-column:2;grid-row:1;margin:0!important}
  html[data-appearance] body.tt-study-page>header:is(.top,.site-head)>.head-links{grid-column:2;grid-row:1;width:auto!important;margin:0!important;padding:0!important;justify-content:end}
  /* The same destinations remain available in the adjacent route controls. */
  html[data-appearance] body.tt-study-page>header:is(.top,.site-head)>:is(.back,.home),html[data-appearance] body.tt-study-page>header:is(.top,.site-head)>.head-links>a{display:none!important}
  html[data-appearance] body.tt-study-page>.tt-route-tools{margin-top:10px}
  html[data-appearance] body.tt-study-page>main.wrap{padding-top:20px!important}
  html[data-appearance] body.tt-study-page>main.wrap>.catalog-head{margin-top:0!important}
  html[data-appearance] body.tt-study-page>main.wrap>.choose{margin-top:24px!important;padding-top:0!important}
  html[data-appearance] body.tt-study-page .hero+#spaces .section-head{margin-top:24px!important;padding-top:0!important}
  html[data-appearance] body.tt-study-page .method-section{margin-top:28px!important}
  html[data-appearance] body.tt-study-page .camp-grid{margin-top:24px!important;margin-bottom:24px!important}
  html[data-appearance] body.tt-study-page .camp-card h2{margin-top:20px!important}
  html[data-appearance] body.tt-study-page .tl-hero{padding:24px 0!important}
  html[data-appearance] body.tt-study-page .ja-hero{padding:20px 0 16px!important}
  html[data-appearance] body.tt-study-page .ja-grid{padding-top:8px!important;padding-bottom:24px!important}
  html[data-appearance] body.tt-study-page .n4-filter{display:none!important}
  html[data-appearance] body.tt-study-page .n4-catalog-head{margin-top:16px!important;margin-bottom:20px!important}
  html[data-appearance] body.tt-study-page .n4-library-page .ja-related{margin-top:24px!important}
  html[data-appearance] body.tt-study-page:has(.bottom-nav)>main.wrap{padding-bottom:24px!important}
  html[data-appearance] body.tt-study-page .tl-grid{padding-bottom:24px!important}
  html[data-appearance] body.tt-study-page:has(.kr-mode-nav)>main{padding-bottom:24px!important}
  html[data-appearance] body.tt-study-page:has(:is(.bottom-nav,.tl-main-nav,.ja-mode-nav,.kr-mode-nav)){padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}
  html[data-appearance] body:not(.tt-study-page) main>.hero.wrap{padding-top:24px!important}
  html[data-appearance] body:not(.tt-study-page) main>.section.wrap{padding-top:32px!important;padding-bottom:32px!important}
}