html[data-screen="learning-prototype"],
html[data-screen="learning-prototype"] body,
html[data-screen="learning-prototype"] #app { min-height: 100%; }
html[data-screen="learning-prototype"] body { overflow: hidden; background: #02070d; }

.learning-prototype {
  --learn-cyan: #67e4d6;
  --learn-gold: #f2be72;
  --learn-violet: #9a7cff;
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  color: #ecf6f3;
  background:
    radial-gradient(circle at 52% 42%, rgba(31,78,101,.25), transparent 34%),
    radial-gradient(circle at 76% 34%, rgba(82,51,147,.14), transparent 25%),
    linear-gradient(145deg,#02070d,#07141d 56%,#02070d);
  font-family: "Noto Sans SC","Microsoft YaHei",sans-serif;
}
.learning-prototype *, .learning-prototype *::before, .learning-prototype *::after { box-sizing: border-box; }
.learning-prototype button, .learning-prototype a, .learning-prototype textarea { font: inherit; }
.learning-prototype button, .learning-prototype a { -webkit-tap-highlight-color: transparent; }
.learning-prototype a { color: inherit; text-decoration: none; }
.learning-prototype button:focus-visible, .learning-prototype a:focus-visible, .learning-prototype textarea:focus-visible { outline: 2px solid var(--learn-gold); outline-offset: 3px; }
.learning-space { position: fixed; inset: 0; pointer-events: none; opacity: .48; background-image: radial-gradient(circle,rgba(218,243,255,.76) 0 1px,transparent 1.35px); background-size: 83px 79px; mask-image: radial-gradient(ellipse at center,#000 12%,transparent 92%); }
.learning-space::after { content: ""; position: absolute; inset: -20%; background-image: radial-gradient(circle,rgba(103,228,214,.45) 0 1px,transparent 1.4px); background-size: 137px 119px; transform: rotate(8deg); }
.learning-skip { position: fixed; z-index: 100; top: -70px; left: 20px; padding: 11px 16px; border-radius: 8px; background: #e9f7f4; color: #031019 !important; }
.learning-skip:focus { top: 16px; }
.learning-topbar { position: relative; z-index: 20; height: 72px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; padding: 0 28px; border-bottom: 1px solid rgba(104,184,203,.16); background: rgba(2,9,15,.78); backdrop-filter: blur(18px); }
.learning-brand { justify-self: start; display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .06em; }
.learning-planet-return { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; padding: 4px 10px; color: var(--learn-cyan); font-size: 14px; text-decoration: none; }
.learning-planet-return:hover { text-decoration: underline; text-underline-offset: 4px; }
.reading-soft .learning-planet-return { color: #287f7f; }
.representative-learning-evidence{padding:10px 12px;margin:0 0 14px;font-size:13px;line-height:1.8;color:var(--learn-text);border-bottom:1px solid #7a989b30}
.representative-learning-evidence summary{cursor:pointer;color:var(--learn-cyan)}
.representative-learning-evidence label{display:block;margin:12px 0 6px}
.representative-learning-evidence textarea{box-sizing:border-box;width:100%;min-height:130px;padding:12px;border:1px solid #7a989b55;border-radius:8px;background:transparent;color:inherit;font:inherit;resize:vertical}
.representative-learning-evidence p{font-size:12px;opacity:.8}.representative-learning-evidence button{min-height:40px;padding:9px 15px;background:#327a7020;color:inherit;border:1px solid #43867d45;border-radius:8px;cursor:pointer;font:inherit}
.learning-brand span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(103,228,214,.35); border-radius: 50%; color: var(--learn-cyan); box-shadow: inset 0 0 18px rgba(103,228,214,.1); }
.learning-route { text-align: center; }
.learning-route small { display: block; margin-bottom: 3px; color: #8eaaa6; font: 11px/1.3 "IBM Plex Mono",Consolas,monospace; letter-spacing: .13em; text-transform: uppercase; }
.learning-route b { font-size: 15px; font-weight: 500; }
.learning-topbar-center { justify-self: center; min-width: 0; }
.learning-topbar-tools { justify-self: end; display: flex; align-items: center; gap: 16px; }
.learning-local { display: flex; align-items: center; gap: 8px; color: #b1c6c2; font-size: 14px; }
.learning-local i { width: 7px; height: 7px; border-radius: 50%; background: var(--learn-cyan); box-shadow: 0 0 10px var(--learn-cyan); }
.reading-controls { position: relative; z-index: 30; }
.reading-controls summary { display: flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(103,228,214,.24); border-radius: 9px; background: rgba(8,29,39,.64); color: #c8e5df; cursor: pointer; list-style: none; font-size: 12px; }
.reading-controls summary::-webkit-details-marker { display: none; }
.reading-controls summary span { color: var(--learn-cyan); font-size: 16px; }
.reading-controls summary b { font-weight: 500; }
.reading-controls[open] summary { border-color: rgba(242,190,114,.46); color: #ffe8bd; }
.reading-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 248px; padding: 15px; border: 1px solid rgba(170,226,235,.3); border-radius: 13px; background: linear-gradient(145deg,rgba(19,47,59,.96),rgba(3,14,23,.98)); box-shadow: 0 18px 50px rgba(0,0,0,.48), inset 0 1px rgba(241,255,255,.12); backdrop-filter: blur(18px) saturate(1.18); }
.reading-panel fieldset { margin: 0 0 12px; padding: 0; border: 0; }
.reading-panel legend { margin-bottom: 7px; color: #a8c0bc; font-size: 11px; }
.reading-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.reading-theme-options { grid-template-columns: repeat(2,1fr); }
.reading-options button { min-height: 34px; padding: 0 6px; border: 1px solid rgba(105,184,204,.22); border-radius: 7px; background: rgba(2,12,19,.52); color: #aac2be; font-size: 11px; cursor: pointer; }
.reading-options button[aria-pressed="true"] { border-color: rgba(103,228,214,.6); background: rgba(29,91,101,.35); color: #e5fbf6; box-shadow: inset 0 0 12px rgba(103,228,214,.08); }
.reading-panel p { margin: 4px 0 0; color: #8fa8a4; font-size: 10px; line-height: 1.5; }
.learning-back { display: inline-flex; align-items: center; color: #94adaa !important; font-size: 11px; }
.learning-announcer { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Knowledge atom detail */
.atom-detail { position: relative; z-index: 3; height: calc(100dvh - 72px); display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; padding: 16px 24px; }
.atom-observatory { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(107,188,207,.18); border-radius: 34px 34px 25% 25% / 32px 32px 12% 12%; background: radial-gradient(circle at 53% 49%,rgba(62,47,137,.2),rgba(3,12,19,.78) 55%); box-shadow: inset 0 0 100px #000,0 24px 80px rgba(0,0,0,.32); }
.atom-observatory::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(170,225,235,.12); border-radius: inherit; box-shadow: inset 0 1px rgba(255,255,255,.08),inset 18px 0 35px rgba(98,198,219,.025),inset -18px 0 35px rgba(154,124,255,.025); pointer-events: none; }
.atom-observatory .learning-back { position: absolute; z-index: 8; top: 24px; left: 28px; }
.atom-window-glass { position: absolute; z-index: 7; inset: 11px; overflow: hidden; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 45px rgba(128,223,238,.055),inset 0 0 2px rgba(255,255,255,.28); }
.atom-window-glass::before { content: ""; position: absolute; width: 78%; height: 32%; top: -14%; left: -22%; border-radius: 50%; background: linear-gradient(180deg,rgba(230,251,255,.13),rgba(124,210,226,.015) 68%,transparent); transform: rotate(-10deg); filter: blur(5px); }
.atom-window-glass::after { content: ""; position: absolute; inset: 0; opacity: .25; background: radial-gradient(circle at 22% 34%,rgba(255,255,255,.5) 0 .6px,transparent .9px),linear-gradient(105deg,transparent 42%,rgba(184,241,247,.07) 48%,transparent 54%); background-size: 97px 83px,100% 100%; }
.atom-visual { position: absolute; top: 47%; left: 48%; width: min(44vw,520px); aspect-ratio: 1; transform: translate(-50%,-50%); }
.atom-visual::before, .atom-visual::after, .atom-visual i { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(154,124,255,.32); border-radius: 50%; transform: rotate(28deg) scaleY(.42); box-shadow: 0 0 22px rgba(154,124,255,.08); }
.atom-visual::after { transform: rotate(94deg) scaleY(.5); border-color: rgba(103,228,214,.28); }
.atom-visual i:nth-child(1) { transform: rotate(151deg) scaleY(.37); border-color: rgba(242,190,114,.25); }
.atom-visual i:nth-child(2) { inset: 25%; transform: rotate(62deg) scaleY(.7); }
.atom-visual i:nth-child(3) { inset: 30%; transform: rotate(-16deg) scaleY(.5); border-style: dashed; }
.atom-visual > span { position: absolute; z-index: 3; inset: 36%; border-radius: 42% 58% 48% 52%; background: radial-gradient(circle at 32% 26%,#fff,#d6b6ff 14%,#6a43b5 48%,#140b28 74%); box-shadow: 0 0 35px rgba(154,124,255,.72),0 0 90px rgba(102,83,190,.36); }
.atom-visual > b { position: absolute; inset: 3%; border-radius: 50%; background-image: radial-gradient(circle,#dffcff 0 1.3px,transparent 1.7px); background-size: 29px 31px; opacity: .62; mask-image: radial-gradient(circle,transparent 18%,#000 32%,#000 62%,transparent 76%); }
.atom-copy { position: absolute; z-index: 8; left: 7%; bottom: 9%; }
.atom-copy > span { color: var(--learn-cyan); font: 9px/1.4 "IBM Plex Mono",Consolas,monospace; letter-spacing: .14em; }
.atom-copy p { margin: 8px 0 0; color: #9cb3b1; font-size: 11px; }
.atom-copy h1 { margin: 2px 0; font-size: clamp(34px,4vw,58px); font-weight: 500; letter-spacing: .04em; }
.atom-copy em { color: #7f9997; font-size: 10px; font-style: normal; }
.atom-cards { display: grid; align-content: center; gap: 12px; overflow: auto; }
.atom-cards article { padding: 18px; border: 1px solid rgba(101,181,201,.2); border-radius: 17px; background: linear-gradient(145deg,rgba(8,25,37,.92),rgba(3,13,21,.94)); box-shadow: inset 0 0 24px rgba(85,158,181,.035),0 16px 40px rgba(0,0,0,.2); }
.atom-cards article header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #71979a; font: 8px/1.4 "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; }
.atom-cards article header b { color: #a7b9b6; font-weight: 500; letter-spacing: 0; }
.atom-cards h2 { margin: 0 0 8px; font-size: 16px; line-height: 1.55; font-weight: 550; }
.atom-cards p { margin: 0; color: #93aaa7; font-size: 11px; line-height: 1.65; }
.atom-cards dl { margin: 0; }
.atom-cards dl div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(105,183,202,.1); font-size: 11px; }
.atom-cards dt { color: #799391; }.atom-cards dd { margin: 0; color: #c4d5d2; }
.atom-cards .atom-action-card { border-color: rgba(242,190,114,.28); }
.atom-action-card a { display: flex; min-height: 43px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 0 13px; border: 1px solid rgba(242,190,114,.42); border-radius: 10px; background: rgba(112,70,27,.25); color: #ffe7b9; font-size: 12px; }

/* 1:2:1 workspace */
.learning-workspace { position: relative; z-index: 3; height: calc(100dvh - 72px); display: grid; grid-template-columns: minmax(230px,1fr) minmax(430px,2fr) minmax(260px,1fr); gap: 1px; background: rgba(105,184,204,.13); }
.learning-sources, .learning-content, .learning-notes { min-width: 0; overflow: auto; background: rgba(3,12,19,.94); }
.learning-sources, .learning-notes { padding: 20px; }
.learning-content { padding: clamp(24px,4vw,58px); background: radial-gradient(circle at 50% 34%,rgba(36,85,108,.18),transparent 45%),rgba(3,12,19,.97); }
.workspace-mode .learning-content > * { max-width: 820px; }
.today-learning-context { width: min(820px,100%); margin: 0 auto 18px; padding: 14px 16px; border: 1px solid rgba(242,190,114,.34); border-radius: 13px; background: linear-gradient(135deg,rgba(106,68,31,.28),rgba(9,33,42,.64)); box-shadow: inset 1px 1px rgba(255,244,211,.08), 0 12px 28px rgba(0,0,0,.16); }
.today-learning-context header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.today-learning-context header > div { display: grid; gap: 4px; min-width: 0; }
.today-learning-context header span { color: #f2be72; font: 9px/1.4 "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; }
.today-learning-context h2 { margin: 0; color: #f4ead5; font-size: 16px; font-weight: 550; }
.today-learning-context header > b { max-width: 42%; color: #c9d8d4; font-size: 10px; font-weight: 500; text-align: right; }
.today-learning-context-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.today-learning-context-grid span { display: grid; gap: 4px; padding: 8px 9px; border-left: 2px solid rgba(242,190,114,.42); background: rgba(2,12,19,.3); color: #8fa8a4; font-size: 9px; }
.today-learning-context-grid b { color: #d8e7e3; font-size: 10px; font-weight: 500; line-height: 1.4; }
.today-learning-context > small { display: block; margin-top: 10px; color: #8fa8a4; font-size: 9px; line-height: 1.5; }
.workspace-mode .learning-content > header, .workspace-mode .learning-content > .source-kind, .workspace-mode .learning-content > h1 { margin-left: auto; margin-right: auto; }
.workspace-mode .content-lead, .workspace-mode .learning-content blockquote, .workspace-mode .local-explanation, .workspace-mode .learning-boundary, .workspace-mode .clip-to-note { margin-left: auto; margin-right: auto; }
.material-toolbar { position: sticky; z-index: 12; top: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; width: min(820px,100%); margin: 0 auto 22px; padding: 10px; border: 1px solid rgba(170,226,235,.22); border-radius: 16px; background: rgba(8,28,39,.82); backdrop-filter: blur(18px) saturate(1.16); box-shadow: 0 14px 40px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.08); }
.material-toolbar > button { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; min-height: 58px; padding: 8px 10px; border: 1px solid rgba(105,184,204,.2); border-radius: 11px; background: rgba(3,14,22,.58); color: #dbe9e6; text-align: left; cursor: pointer; }
.material-toolbar > button:hover, .material-toolbar > button:focus-visible { border-color: rgba(103,228,214,.5); background: rgba(25,72,79,.32); }.material-toolbar > button > span { grid-row: 1/3; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(103,228,214,.34); border-radius: 50%; color: var(--learn-cyan); font-size: 16px; }.material-toolbar > button b { font-size: 13px; font-weight: 500; }.material-toolbar > button small { color: #87a09d; font-size: 9px; }
.focus-timer { --timer-progress: 100%; position: relative; display: grid; grid-template-columns: 25px minmax(0,1fr); grid-template-rows: auto auto auto; column-gap: 7px; min-width: 0; min-height: 92px; align-items: center; padding: 7px; border: 1px solid rgba(242,190,114,.28); border-radius: 11px; background: linear-gradient(145deg,rgba(104,70,35,.24),rgba(5,18,27,.58)); box-shadow: inset 0 1px rgba(255,255,255,.07); }
.focus-timer::after { content: none; }
.focus-timer-icon { grid-row: 1/4; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(242,190,114,.4); border-radius: 50%; color: var(--learn-gold); font-size: 14px; }
.focus-timer-copy { grid-column: 2; grid-row: 1; min-width: 0; align-self: end; }.focus-timer-copy small { display: block; overflow: hidden; color: #aa9a80; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.focus-timer-copy b { display: block; color: #fff0d0; font: 600 15px/1.15 "IBM Plex Mono",Consolas,monospace; letter-spacing: .02em; }
.focus-timer-primary { grid-column: 2; grid-row: 2; justify-self: start; min-width: 42px; min-height: 25px; padding: 0 7px; border: 1px solid rgba(242,190,114,.43); border-radius: 7px; background: rgba(108,69,29,.3); color: #ffe6b5; font-size: 10px; cursor: pointer; }
.focus-timer-settings { grid-column: 2; grid-row: 3; align-self: center; position: relative; z-index: 4; }.focus-timer-settings summary { width: max-content; color: #8ca5a1; cursor: pointer; font-size: 8px; list-style: none; }.focus-timer-settings summary::-webkit-details-marker { display: none; }.focus-timer-settings[open] summary { color: var(--learn-gold); }
.focus-timer-panel { position: absolute; z-index: 20; top: calc(100% + 10px); right: -52px; width: 278px; padding: 14px; border: 1px solid rgba(210,231,231,.3); border-radius: 13px; background: linear-gradient(145deg,rgba(27,55,63,.97),rgba(4,15,22,.98)); box-shadow: inset 1px 1px rgba(255,255,255,.1),0 20px 54px rgba(0,0,0,.52); backdrop-filter: blur(22px) saturate(1.15); }
.focus-timer-panel fieldset { margin: 0 0 11px; padding: 0; border: 0; }.focus-timer-panel legend { margin-bottom: 6px; color: #a8bcb8; font-size: 10px; }.focus-timer-panel fieldset div { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.focus-timer-panel button { min-height: 34px; padding: 0 5px; border: 1px solid rgba(105,184,204,.22); border-radius: 7px; background: rgba(4,17,25,.64); color: #acc2be; font-size: 10px; cursor: pointer; }.focus-timer-panel button[aria-pressed="true"] { border-color: rgba(242,190,114,.58); background: rgba(108,69,29,.35); color: #ffe8bc; }.focus-timer-panel .focus-timer-reset { width: 100%; color: #c9d8d5; }.focus-timer-panel p { margin: 9px 0 0; color: #819895; font-size: 9px; line-height: 1.5; }
.focus-timer[data-pomodoro-status="running"] { border-color: rgba(103,228,214,.38); background: linear-gradient(145deg,rgba(33,94,91,.24),rgba(5,18,27,.58)); }.focus-timer[data-pomodoro-status="running"] .focus-timer-icon { border-color: rgba(103,228,214,.48); color: var(--learn-cyan); }.focus-timer[data-pomodoro-status="complete"] { border-color: rgba(242,190,114,.58); box-shadow: inset 0 0 20px rgba(242,190,114,.08); }
.learning-topbar-center .focus-timer { grid-template-columns: 30px auto auto auto; grid-template-rows: 1fr; column-gap: 10px; width: clamp(340px,36vw,540px); min-height: 48px; padding: 6px 12px; border-color: rgba(183,228,233,.28); border-radius: 14px; background: linear-gradient(145deg,rgba(76,137,148,.16),rgba(4,18,27,.62)); box-shadow: inset 1px 1px rgba(245,255,255,.12),0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(20px) saturate(1.16); -webkit-backdrop-filter: blur(20px) saturate(1.16); }
.learning-topbar-center .focus-timer-icon { grid-column: 1; grid-row: 1; width: 30px; height: 30px; font-size: 16px; }
.learning-topbar-center .focus-timer-copy { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: 10px; align-self: center; }
.learning-topbar-center .focus-timer-copy small { font-size: 10px; }.learning-topbar-center .focus-timer-copy b { font-size: 19px; }
.learning-topbar-center .focus-timer-primary { grid-column: 3; grid-row: 1; justify-self: auto; min-width: 62px; min-height: 32px; }
.learning-topbar-center .focus-timer-settings { grid-column: 4; grid-row: 1; align-self: center; }
.learning-topbar-center .focus-timer-settings summary { font-size: 10px; }
.learning-topbar-center .focus-timer-panel { top: calc(100% + 16px); right: 0; }
.learning-topbar-center .focus-timer { grid-template-columns: minmax(150px,1fr) 82px 82px; column-gap: 7px; width: clamp(620px,54vw,700px); min-height: 54px; padding: 6px 10px; }
.learning-topbar-center .focus-timer-mode { grid-column: 1; justify-self: start; display: grid; min-width: 118px; height: 42px; place-items: center; color: #fff0d0; font: 650 30px/1 "Noto Sans SC","Microsoft YaHei",sans-serif; letter-spacing: .08em; }
.learning-topbar-center .focus-timer-display { position: absolute; z-index: 2; left: 50%; color: #fff0d0; font: 650 30px/1 "IBM Plex Mono",Consolas,monospace; letter-spacing: .06em; transform: translateX(-50%); pointer-events: none; }
.learning-topbar-center .focus-timer-primary,.learning-topbar-center .focus-timer-settings > summary { display: grid; width: 100%; height: 34px; place-items: center; padding: 0 8px; border: 1px solid rgba(242,190,114,.26); border-radius: 8px; background: rgba(108,69,29,.08); color: #e5c991; font: 500 14px/1 "Noto Sans SC","Microsoft YaHei",sans-serif; cursor: pointer; }
.learning-topbar-center .focus-timer-primary { grid-column: 2; min-width: 0; min-height: 34px; }
.learning-topbar-center .focus-timer-settings { grid-column: 3; width: 100%; }
.learning-topbar-center .focus-timer-settings > summary { list-style: none; }
.learning-topbar-center .focus-timer-primary:hover,.learning-topbar-center .focus-timer-settings > summary:hover,.learning-topbar-center .focus-timer-primary:focus-visible,.learning-topbar-center .focus-timer-settings > summary:focus-visible { border-color: rgba(242,190,114,.48); background: rgba(108,69,29,.16); color: #fff0d0; }
.learning-topbar-center .focus-timer-settings[open] > summary { border-color: rgba(242,190,114,.48); background: rgba(108,69,29,.16); color: #fff0d0; }
.learning-topbar-center .focus-timer-panel { right: 0; }
.material-tabs { display: flex; gap: 8px; width: min(820px,100%); margin: 0 auto 12px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }.material-tabs button { min-width: 150px; max-width: 230px; padding: 8px 10px; border: 1px solid rgba(105,184,204,.18); border-radius: 9px; background: rgba(5,19,28,.72); color: #9fb5b2; text-align: left; cursor: pointer; }.material-tabs button span, .material-tabs button b { display: block; }.material-tabs button span { color: var(--learn-cyan); font-size: 9px; }.material-tabs button b { overflow: hidden; margin-top: 3px; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.material-tabs button[aria-pressed="true"] { border-color: rgba(242,190,114,.48); color: #f3e5cc; background: rgba(67,45,24,.4); }
.material-stage { width: min(820px,100%); margin: 0 auto 30px; }.material-empty { display: grid; min-height: 190px; place-content: center; padding: 25px; border: 1px dashed rgba(105,184,204,.28); border-radius: 15px; background: rgba(7,23,33,.42); text-align: center; }.material-empty span { color: var(--learn-cyan); font: 10px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }.material-empty h2 { margin: 9px 0; font-size: 20px; font-weight: 500; }.material-empty p { margin: 0; color: #8ca5a2; font-size: 12px; line-height: 1.7; }
.material-viewer { overflow: hidden; border: 1px solid rgba(105,184,204,.23); border-radius: 16px; background: rgba(6,22,31,.74); box-shadow: inset 0 1px rgba(255,255,255,.06); }.material-viewer > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid rgba(105,184,204,.12); }.material-viewer > header span { color: var(--learn-cyan); font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }.material-viewer > header h2 { margin: 4px 0 0; font-size: 18px; font-weight: 500; }.material-viewer > header button { border: 0; background: transparent; color: #8da5a2; font-size: 10px; cursor: pointer; }.material-body { max-height: 430px; overflow: auto; padding: 18px; }.material-document { color: #d4e1de; font-size: 16px; line-height: 1.95; }.material-image,.material-video { display: block; max-width: 100%; max-height: 390px; margin: auto; border-radius: 10px; }.material-file-preview,.material-link-preview { min-height: 145px; display: grid; align-content: center; gap: 8px; }.material-file-preview span,.material-link-preview > span { color: var(--learn-cyan); font: 10px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }.material-file-preview h2 { margin: 0; font-size: 21px; }.material-file-preview p,.material-link-preview p { margin: 0; color: #9cb2af; font-size: 12px; }.material-file-preview small { color: #7f9996; font-size: 11px; }.material-link-preview a { color: #c2eae4; overflow-wrap: anywhere; }
.material-ai-actions { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid rgba(105,184,204,.12); }.material-ai-actions button { min-height: 42px; padding: 0 17px; border: 1px solid rgba(242,190,114,.48); border-radius: 9px; background: rgba(112,70,27,.32); color: #ffe8bd; font-size: 13px; cursor: pointer; }.material-ai-actions small { color: #839d99; font-size: 10px; }.material-extraction { margin: 0 16px 16px; padding: 17px; border: 1px solid rgba(154,124,255,.28); border-radius: 12px; background: rgba(67,44,116,.13); }.material-extraction header { display: flex; justify-content: space-between; color: #ae9ae8; font: 9px "IBM Plex Mono",Consolas,monospace; }.material-extraction h2 { margin: 10px 0; font-size: 18px; }.material-extraction ul { margin: 0; padding-left: 20px; color: #c5d4d1; font-size: 13px; line-height: 1.75; }.material-extraction p { margin: 12px 0 0; color: #899f9c; font-size: 10px; line-height: 1.6; }.default-learning-content.is-secondary { padding-top: 24px; border-top: 1px solid rgba(105,184,204,.15); opacity: .92; }
.material-dialog { width: min(620px,calc(100vw - 28px)); padding: 0; border: 1px solid rgba(170,226,235,.3); border-radius: 18px; background: rgba(5,18,27,.98); color: #eef7f4; box-shadow: 0 30px 100px rgba(0,0,0,.72); }.material-dialog::backdrop { background: rgba(0,5,9,.76); backdrop-filter: blur(7px); }.material-dialog form { padding: 22px; }.material-dialog header { display: flex; justify-content: space-between; align-items: start; }.material-dialog header span { color: var(--learn-cyan); font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }.material-dialog h2 { margin: 5px 0 0; }.material-dialog header button { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(105,184,204,.34); border-radius: 50%; background: rgba(6,27,37,.74); color: #d5e4e1; font-size: 24px; line-height: 1; cursor: pointer; }.material-dialog header button:hover,.material-dialog header button:focus-visible { border-color: rgba(103,228,214,.72); background: rgba(20,72,77,.62); color: #fff; outline: 2px solid rgba(103,228,214,.24); outline-offset: 2px; }.material-dialog label { display: grid; gap: 7px; margin: 16px 0; color: #c6d7d4; font-size: 12px; }.material-dialog input,.material-dialog textarea { padding: 12px; border: 1px solid rgba(103,228,214,.2); border-radius: 9px; background: rgba(1,8,13,.76); color: #eef7f4; font: inherit; }.material-dialog textarea { min-height: 220px; resize: vertical; line-height: 1.7; }.material-dialog footer { display: flex; justify-content: flex-end; gap: 9px; }.material-dialog footer button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(105,184,204,.22); border-radius: 8px; background: rgba(7,25,35,.8); color: #b7cbc8; cursor: pointer; }.material-dialog footer button:hover,.material-dialog footer button:focus-visible { border-color: rgba(103,228,214,.58); color: #eefaf7; outline: 2px solid rgba(103,228,214,.18); outline-offset: 2px; }.material-dialog footer button:last-child { border-color: rgba(242,190,114,.46); background: rgba(112,70,27,.3); color: #ffe7ba; }.material-dialog [role="status"] { min-height: 20px; color: #efb98a; font-size: 11px; }

/* Readable glass system: translucent enough to feel spatial, opaque enough for long reading. */
.workspace-mode .learning-topbar { border-bottom-color: rgba(185,233,239,.22); background: linear-gradient(180deg,rgba(10,28,38,.86),rgba(3,14,22,.72)); box-shadow: inset 0 -1px rgba(220,249,251,.06),0 12px 36px rgba(0,0,0,.16); backdrop-filter: blur(22px) saturate(1.18); -webkit-backdrop-filter: blur(22px) saturate(1.18); }
.workspace-mode .learning-workspace { gap: 10px; padding: 10px; background: linear-gradient(135deg,rgba(24,65,80,.16),rgba(8,22,33,.08)); }
.workspace-mode .learning-sources,.workspace-mode .learning-content,.workspace-mode .learning-notes { border: 1px solid rgba(174,225,234,.2); border-radius: 18px; background: linear-gradient(145deg,rgba(29,68,81,.24),rgba(4,17,26,.74) 36%,rgba(3,13,21,.8)); box-shadow: inset 1px 1px rgba(240,255,255,.1),inset -1px -1px rgba(103,228,214,.045),inset 0 0 38px rgba(104,199,216,.035),0 18px 46px rgba(0,0,0,.18); backdrop-filter: blur(20px) saturate(1.12); -webkit-backdrop-filter: blur(20px) saturate(1.12); }
.workspace-mode .learning-content { background: radial-gradient(circle at 50% 26%,rgba(64,129,149,.16),transparent 40%),linear-gradient(145deg,rgba(22,57,70,.3),rgba(3,14,22,.78) 44%,rgba(2,11,18,.84)); }
.workspace-mode .learning-sources,.workspace-mode .learning-notes { background: linear-gradient(145deg,rgba(43,91,104,.22),rgba(4,17,26,.76) 34%,rgba(3,13,21,.84)); }
.workspace-mode .material-toolbar { border-color: rgba(194,238,243,.28); background: linear-gradient(135deg,rgba(99,181,194,.17),rgba(7,29,41,.62)); box-shadow: inset 1px 1px rgba(243,255,255,.14),inset -1px -1px rgba(103,228,214,.055),0 16px 42px rgba(0,0,0,.2); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); }
.workspace-mode .material-toolbar > button { border-color: rgba(181,229,236,.2); background: linear-gradient(145deg,rgba(142,214,223,.08),rgba(3,15,23,.55)); box-shadow: inset 0 1px rgba(242,255,255,.06); }
.workspace-mode .material-empty,.workspace-mode .material-viewer { border-color: rgba(178,229,236,.22); background: linear-gradient(145deg,rgba(54,108,122,.16),rgba(4,18,27,.68)); box-shadow: inset 1px 1px rgba(239,255,255,.09),inset 0 0 32px rgba(103,228,214,.025); backdrop-filter: blur(16px) saturate(1.12); -webkit-backdrop-filter: blur(16px) saturate(1.12); }
.workspace-mode .learning-source-card,.workspace-mode .clip-list li,.workspace-mode .local-explanation,.workspace-mode .learning-content blockquote { background: linear-gradient(145deg,rgba(74,135,148,.1),rgba(5,20,29,.62)); box-shadow: inset 1px 1px rgba(242,255,255,.055); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.workspace-mode .learning-notes textarea,.workspace-mode .material-dialog input,.workspace-mode .material-dialog textarea { background: linear-gradient(145deg,rgba(12,35,44,.74),rgba(1,8,13,.82)); box-shadow: inset 1px 1px rgba(240,255,255,.055),inset 0 0 18px rgba(103,228,214,.025); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.workspace-mode .material-dialog { border-color: rgba(193,237,242,.31); background: linear-gradient(145deg,rgba(27,63,75,.92),rgba(3,15,23,.97)); box-shadow: inset 1px 1px rgba(243,255,255,.12),0 30px 100px rgba(0,0,0,.72); backdrop-filter: blur(24px) saturate(1.18); -webkit-backdrop-filter: blur(24px) saturate(1.18); }
.learning-sources > header, .learning-content > header, .learning-notes > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.learning-sources header span, .learning-content header span, .learning-notes header span { color: var(--learn-cyan); font: 12px/1.4 "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }
.learning-sources h1, .learning-notes h1 { margin: 3px 0 0; font-size: 24px; font-weight: 500; }
.learning-sources header > b, .learning-content header > b, .learning-notes header > b { color: #a0b8b4; font-size: 13px; font-weight: 400; }
.demo-boundary { margin: 0 0 14px; padding: 10px 12px; border-left: 2px solid rgba(242,190,114,.55); background: rgba(104,65,25,.13); color: #c8b28d; font-size: 13px; }
.source-list { display: grid; gap: 10px; }
.learning-source-card { padding: 0; border: 1px solid rgba(105,184,204,.16); border-radius: 13px; overflow: hidden; background: rgba(7,22,32,.82); }
.learning-source-card.is-active { border-color: rgba(103,228,214,.46); box-shadow: inset 0 0 25px rgba(103,228,214,.05); }
.source-open { width: 100%; padding: 13px; border: 0; background: transparent; color: #dbe9e6; text-align: left; cursor: pointer; }
.source-open small, .source-open span { display: block; color: #9ab2ae; font-size: 12px; line-height: 1.5; }
.source-open b { display: block; margin: 7px 0; font-size: 16px; line-height: 1.5; font-weight: 550; }
.source-toggle { width: 100%; min-height: 39px; border: 0; border-top: 1px solid rgba(105,184,204,.1); background: rgba(2,10,16,.42); color: #a6c1bc; font-size: 13px; cursor: pointer; }
.source-toggle[aria-pressed="true"] { color: var(--learn-cyan); }
.source-kind { color: #a898e2; font: 12px "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; }
.learning-content h1 { max-width: 760px; margin: 12px 0 20px; font-size: clamp(25px,2.4vw,38px); line-height: 1.35; font-weight: 500; }
.content-lead { color: #c4d4d1; font-size: 16px; line-height: 2; letter-spacing: .015em; }
.learning-content blockquote { margin: 28px 0 18px; padding: 20px; border: 1px solid rgba(105,184,204,.15); border-left: 2px solid var(--learn-cyan); border-radius: 0 13px 13px 0; background: rgba(8,28,39,.72); }
.learning-content blockquote span, .local-explanation span, .learning-boundary b { color: var(--learn-cyan); font: 12px "IBM Plex Mono",Consolas,monospace; letter-spacing: .11em; }
.learning-content blockquote p { margin: 8px 0; color: #e4f1ee; font-size: 16px; line-height: 1.8; }
.learning-content blockquote cite { color: #9bb3af; font-size: 13px; font-style: normal; }
.local-explanation { padding: 18px 20px; border: 1px solid rgba(154,124,255,.18); border-radius: 12px; background: rgba(67,44,116,.11); }
.local-explanation span { color: #ae9ae8; }.local-explanation p { margin: 8px 0 0; color: #abbcba; font-size: 14px; line-height: 1.7; }
.clip-to-note { min-height: 44px; margin: 16px 0; padding: 0 15px; border: 1px solid rgba(103,228,214,.42); border-radius: 8px; background: rgba(29,91,101,.34); color: #e5fffb; font-size: 13px; font-weight: 600; cursor: pointer; }.clip-to-note:hover { border-color: rgba(103,228,214,.72); background: rgba(35,111,118,.5); }.clip-to-note:focus-visible { outline: 2px solid #67e4d6; outline-offset: 2px; }.clip-to-note.is-saved { border-color: rgba(117,223,180,.58); background: rgba(31,103,84,.46); color: #eafff4; }
.clip-note-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }.clip-note-actions:not(.is-saved) { grid-template-columns: minmax(0,1fr); }.clip-note-actions .clip-to-note { width: 100%; margin: 0; }.clip-remove-from-note { min-width: 96px; min-height: 44px; padding: 0 13px; border: 1px solid rgba(178,93,83,.38); border-radius: 8px; background: rgba(128,52,46,.12); color: #d7a09a; font-size: 11px; cursor: pointer; }.clip-remove-from-note:hover,.clip-remove-from-note:focus-visible { border-color: rgba(178,93,83,.68); background: rgba(128,52,46,.2); color: #ffe6e1; outline: 2px solid rgba(178,93,83,.2); outline-offset: 2px; }
.learning-boundary { display: flex; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(104,184,203,.12); color: #9bb3af; font-size: 14px; line-height: 1.7; }
.learning-notes label { display: grid; gap: 8px; margin-bottom: 15px; color: #cbdad7; font-size: 14px; }
.learning-notes textarea { width: 100%; min-height: 122px; resize: vertical; padding: 14px; border: 1px solid rgba(103,228,214,.17); border-radius: 11px; background: rgba(1,8,13,.72); color: #edf6f4; font-size: 14px; line-height: 1.8; }
.clip-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.clip-list li { padding: 10px; border: 1px solid rgba(105,184,204,.13); border-radius: 9px; background: rgba(7,23,33,.55); }
.clip-list li > span { color: var(--learn-cyan); font-size: 12px; }.clip-list li p { margin: 5px 0; color: #b9cbc7; font-size: 12px; line-height: 1.6; }.clip-list li small { color: #8ca6a2; font-size: 10px; }
.clip-list .is-empty { color: #8fa8a4; font-size: 12px; line-height: 1.6; }
.explanation-field { padding-top: 14px; border-top: 1px solid rgba(104,184,203,.12); }
.explanation-field textarea { min-height: 130px; border-color: rgba(242,190,114,.24); }
.explanation-field small { color: #8ea7a3; font-size: 11px; line-height: 1.6; }
.learn-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.learn-actions a { color: #9bb3af; font-size: 13px; }
.learn-actions button { min-height: 46px; padding: 0 15px; border: 1px solid rgba(242,190,114,.4); border-radius: 9px; background: rgba(116,72,27,.28); color: #ffe8bd; font-size: 13px; cursor: pointer; }
.form-message { min-height: 32px; margin: 8px 0 0; color: #f0b98b; font-size: 12px; line-height: 1.6; }

/* Probe and evidence review */
.probe-layout, .evidence-review { position: relative; z-index: 3; min-height: calc(100dvh - 72px); display: grid; grid-template-columns: minmax(0,.9fr) minmax(440px,1.1fr); gap: clamp(24px,6vw,100px); align-items: center; padding: clamp(28px,7vw,110px); }
.probe-context > span, .review-copy > span, .evidence-paused > span, .evidence-empty > span, .growth-copy > span { display: block; margin-top: 28px; color: var(--learn-cyan); font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .13em; }
.probe-context blockquote { margin: 18px 0; padding: 18px; border-left: 2px solid var(--learn-cyan); background: rgba(7,23,33,.6); color: #d6e5e2; font-size: 14px; line-height: 1.8; }
.probe-context p, .review-copy > p { color: #8da5a2; font-size: 12px; line-height: 1.75; }
.probe-card, .evidence-record { padding: clamp(24px,4vw,46px); border: 1px solid rgba(108,188,207,.24); border-radius: 22px; background: linear-gradient(145deg,rgba(8,25,37,.96),rgba(3,12,19,.96)); box-shadow: 0 30px 90px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.03); }
.probe-card > span { color: #ae9ae8; font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }
.probe-card h1, .review-copy h1 { margin: 13px 0 22px; font-size: clamp(25px,3vw,42px); line-height: 1.42; font-weight: 500; }
.probe-card label { display: grid; gap: 9px; color: #c2d2cf; font-size: 11px; }
.probe-card textarea { min-height: 150px; resize: vertical; padding: 14px; border: 1px solid rgba(154,124,255,.3); border-radius: 12px; background: rgba(1,8,13,.72); color: #f0f6f5; line-height: 1.7; }
.probe-disclosure { color: #778f8c; font-size: 9px; line-height: 1.55; }
.probe-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.probe-actions button, .evidence-paused button { min-height: 39px; padding: 0 13px; border: 1px solid rgba(109,180,194,.2); border-radius: 9px; background: rgba(6,22,31,.72); color: #9fb5b2; font-size: 9px; cursor: pointer; }
.probe-actions .is-primary { border-color: rgba(242,190,114,.42); background: rgba(116,72,27,.3); color: #ffe8bd; }
.probe-card [role="status"] { min-height: 20px; color: #efb98a; font-size: 9px; }
.review-copy article { padding: 17px; border: 1px solid rgba(154,124,255,.18); border-radius: 12px; background: rgba(65,43,110,.1); }
.review-copy article > span { color: #ae9ae8; font-size: 9px; }.review-copy article p { margin: 10px 0; font-size: 11px; line-height: 1.55; }.review-copy article small { display: block; margin-top: 12px; color: #79918e; font-size: 9px; line-height: 1.55; }
.is-positive { color: #a7d9c4; }.is-missing { color: #d0b68f; }
.evidence-record > header { display: flex; justify-content: space-between; margin-bottom: 8px; color: #809b98; font: 9px "IBM Plex Mono",Consolas,monospace; }.evidence-record > header b { color: var(--learn-gold); font-weight: 500; }
.evidence-record > div { padding: 15px 0; border-top: 1px solid rgba(104,184,203,.11); }.evidence-record > div > span { color: #76908e; font-size: 9px; }.evidence-record > div p { margin: 7px 0 0; color: #cfddda; font-size: 11px; line-height: 1.7; }
.evidence-record ul { margin: 8px 0 0; padding-left: 17px; color: #c3d4d1; font-size: 10px; }.evidence-record li { margin-bottom: 5px; }.evidence-record li small { display: block; color: #748c89; font-size: 8px; }
.evidence-record footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 16px; }.evidence-record footer a { margin-right: auto; color: #809996; font-size: 9px; }.evidence-record footer button { min-height: 42px; padding: 0 15px; border: 1px solid rgba(242,190,114,.43); border-radius: 9px; background: rgba(116,72,27,.3); color: #ffe7ba; font-size: 10px; cursor: pointer; }
.evidence-paused, .evidence-empty { position: relative; z-index: 3; width: min(680px,calc(100vw - 32px)); margin: clamp(80px,17vh,180px) auto; padding: 42px; border: 1px solid rgba(105,184,204,.2); border-radius: 22px; background: rgba(5,18,27,.92); text-align: center; }
.evidence-paused h1, .evidence-empty h1 { margin: 14px 0; font-size: 32px; font-weight: 500; }.evidence-paused p, .evidence-empty p { color: #91aaa7; line-height: 1.7; }.evidence-paused > div { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }.evidence-paused a, .evidence-empty a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; border: 1px solid rgba(103,228,214,.25); border-radius: 9px; color: #bce2dc; font-size: 10px; }

/* Growth confirmation */
.growth-confirmation { position: relative; z-index: 3; min-height: calc(100dvh - 72px); display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); align-items: center; gap: 40px; padding: 28px clamp(30px,7vw,110px); }
.growth-visual { position: relative; min-height: 520px; overflow: hidden; border: 1px solid rgba(104,184,203,.16); border-radius: 38px; background: radial-gradient(circle at 42% 52%,rgba(48,119,139,.2),transparent 28%),rgba(2,10,16,.62); box-shadow: inset 0 0 90px #000; }
.growth-core { position: absolute; top: 51%; left: 33%; width: 90px; height: 90px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 34% 28%,#fff,#ffe4a6 13%,#dc8048 38%,#5543a8 69%,transparent 72%); box-shadow: 0 0 36px #f2be72,0 0 105px rgba(105,101,216,.6); }
.growth-stream { position: absolute; top: 51%; left: 38%; width: 41%; height: 90px; transform: translateY(-50%) rotate(-10deg); }
.growth-stream::before, .growth-stream i { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#67e4d6,#f2be72,#9a7cff,transparent); box-shadow: 0 0 14px #67e4d6; }
.growth-stream i:nth-child(1) { transform: translateY(-18px) rotate(4deg); opacity: .45; }.growth-stream i:nth-child(2) { transform: translateY(17px) rotate(-5deg); opacity: .4; }.growth-stream i:nth-child(3) { width: 20px; height: 8px; border-radius: 50%; animation: evidence-travel 1.5s ease-in-out infinite; }
.growth-terminal { position: absolute; top: 42%; right: 14%; width: 100px; height: 100px; border: 1px solid rgba(154,124,255,.5); border-radius: 50%; transform: scaleY(.54) rotate(20deg); }.growth-terminal::before { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(103,228,214,.4); border-radius: 50%; transform: rotate(80deg); }.growth-terminal span { position: absolute; inset: 32%; border-radius: 44%; background: radial-gradient(circle at 30% 25%,#fff,#cdb7ff 20%,#6d48bc 58%,#140a2a); box-shadow: 0 0 25px #9a7cff; transform: scaleY(1.8); }
.growth-visual > b { position: absolute; top: 58%; right: 9%; font-size: 12px; font-weight: 500; }
@keyframes evidence-travel { from { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(460px); opacity: 0; } }
.growth-copy h1 { margin: 13px 0; font-size: clamp(32px,4vw,55px); line-height: 1.25; font-weight: 500; }.growth-copy > p { color: #9eb2af; font-size: 12px; line-height: 1.8; }
.growth-copy dl { margin: 20px 0; }.growth-copy dl div { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid rgba(104,184,203,.12); font-size: 10px; }.growth-copy dt { color: #75908d; }.growth-copy dd { margin: 0; color: #c6d7d4; text-align: right; }
.growth-copy article { padding: 15px; border-left: 2px solid var(--learn-cyan); background: rgba(7,23,33,.55); }.growth-copy article span { color: var(--learn-cyan); font-size: 8px; }.growth-copy article p { color: #c0d0cd; font-size: 10px; line-height: 1.7; }.growth-copy article small { color: #718a87; font-size: 8px; }
.growth-copy > a { display: flex; min-height: 45px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 0 14px; border: 1px solid rgba(242,190,114,.42); border-radius: 10px; background: rgba(116,72,27,.3); color: #ffe7ba; font-size: 11px; }

@media (max-width: 1100px) {
  .learning-workspace { grid-template-columns: minmax(200px,.85fr) minmax(370px,1.6fr) minmax(235px,1fr); }
  .learning-content { padding: 28px; }
  .learning-sources, .learning-notes { padding: 15px; }
  .atom-detail { grid-template-columns: minmax(0,1fr) 300px; }
}

@media (max-width: 800px) {
  html[data-screen="learning-prototype"] body { overflow: auto; }
  .learning-prototype { overflow: visible; }
  .learning-topbar { position: sticky; top: 0; grid-template-columns: auto minmax(0,1fr) auto; height: 68px; padding: 0 14px; }
  .learning-brand b { display: none; }.learning-topbar-center { justify-self: stretch; display: grid; place-items: center; }.learning-route { justify-self: end; text-align: right; }.learning-local { display: none; }
  .learning-topbar-center .focus-timer { grid-template-columns: minmax(90px,1fr) 64px 64px; width: min(440px,calc(100% - 12px)); min-height: 46px; column-gap: 5px; padding: 4px 6px; }.learning-topbar-center .focus-timer-mode { min-width: 64px; height: 34px; font-size: 20px; }.learning-topbar-center .focus-timer-display { font-size: 20px; }.learning-topbar-center .focus-timer-primary,.learning-topbar-center .focus-timer-settings > summary { height: 34px; min-height: 34px; padding: 0 5px; border-radius: 8px; font-size: 12px; }.learning-topbar-center .focus-timer-settings { display: block; }.learning-topbar-center .focus-timer-panel { position: fixed; top: 62px; right: 12px; }
  .reading-controls summary { min-height: 36px; padding: 0 9px; }.reading-controls summary b { display: none; }.reading-panel { position: fixed; top: 60px; right: 12px; width: 240px; }
  .atom-detail { height: auto; min-height: calc(100dvh - 68px); display: block; padding: 10px 12px 30px; }
  .atom-observatory { height: 560px; border-radius: 24px; }.atom-cards { margin-top: 10px; overflow: visible; }
  .atom-visual { width: 520px; }.atom-copy { left: 7%; bottom: 8%; }
  .learning-workspace { height: auto; min-height: calc(100dvh - 68px); display: flex; flex-direction: column; gap: 1px; }
  .learning-sources, .learning-content, .learning-notes { overflow: visible; }
  .learning-sources { order: 1; }.learning-content { order: 2; }.learning-notes { order: 3; }
  .source-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .material-toolbar { position: relative; grid-template-columns: repeat(2,minmax(0,1fr)); }.material-toolbar > button { min-height: 62px; }.material-stage { margin-bottom: 22px; }
  .probe-layout, .evidence-review, .growth-confirmation { min-height: calc(100dvh - 68px); grid-template-columns: 1fr; gap: 24px; padding: 28px 16px; }
  .growth-visual { min-height: 460px; }
}

@media (max-width: 520px) {
  .reading-panel { top: 62px; right: 10px; left: 10px; width: auto; }
}

.talent-learning-context { display: grid; gap: 12px; margin: 0 0 16px; padding: 16px; border: 1px solid rgba(103,228,214,.3); background: rgba(9,38,48,.56); box-shadow: inset 0 1px rgba(242,255,255,.06); }
.talent-learning-context > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(148,207,216,.16); }
.talent-learning-context > header > div { min-width: 0; }.talent-learning-context > header span { color: #67e4d6; font: 10px "IBM Plex Mono", Consolas, monospace; letter-spacing: .08em; }.talent-learning-context > header h2 { margin: 5px 0 0; color: #f0f7f4; font-size: 21px; font-weight: 550; }.talent-learning-context > header b { max-width: 45%; color: #f2be72; font-size: 12px; line-height: 1.4; text-align: right; }
.talent-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }.talent-context-grid article { display: grid; gap: 6px; min-width: 0; padding: 11px; border: 1px solid rgba(145,207,218,.16); background: rgba(3,15,24,.5); }.talent-context-grid article > span { color: #c9a866; font: 10px "IBM Plex Mono", Consolas, monospace; }.talent-context-grid p { margin: 0; color: #c6d8d3; font-size: 13px; line-height: 1.55; }.talent-context-grid ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }.talent-context-grid li { display: grid; grid-template-columns: 23px minmax(0,1fr); align-items: start; gap: 6px; color: #c6d8d3; font-size: 12px; line-height: 1.45; }.talent-context-grid li b { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(103,228,214,.34); color: #8fe5ea; font: 9px "IBM Plex Mono", Consolas, monospace; }.talent-context-boundary { color: #91aaa3; font-size: 11px; line-height: 1.45; }
@media (max-width: 700px) { .talent-learning-context { padding: 12px; }.talent-learning-context > header { display: grid; }.talent-learning-context > header b { max-width: none; text-align: left; }.talent-context-grid { grid-template-columns: 1fr; }.talent-learning-context > header h2 { font-size: 19px; }.talent-context-grid p { font-size: 12px; } }

/* Long-reading presets change presentation only; learning records remain untouched. */
.reading-size-large .learning-sources header span, .reading-size-large .learning-content header span, .reading-size-large .learning-notes header span { font-size: 14px; }
.reading-size-large .learning-sources h1, .reading-size-large .learning-notes h1 { font-size: 27px; }
.reading-size-large .learning-sources header > b, .reading-size-large .learning-content header > b, .reading-size-large .learning-notes header > b { font-size: 15px; }
.reading-size-large .demo-boundary { font-size: 15px; }.reading-size-large .source-open small, .reading-size-large .source-open span { font-size: 14px; }.reading-size-large .source-open b { font-size: 18px; }.reading-size-large .source-toggle { font-size: 15px; }
.reading-size-large .source-kind { font-size: 14px; }.reading-size-large .content-lead, .reading-size-large .learning-content blockquote p { font-size: 18px; }.reading-size-large .learning-content blockquote span, .reading-size-large .local-explanation span, .reading-size-large .learning-boundary b { font-size: 14px; }.reading-size-large .learning-content blockquote cite { font-size: 15px; }.reading-size-large .local-explanation p, .reading-size-large .learning-boundary { font-size: 16px; }.reading-size-large .learning-notes label { font-size: 16px; }.reading-size-large .learning-notes textarea { font-size: 16px; }.reading-size-large .clip-list li > span, .reading-size-large .clip-list li p { font-size: 14px; }.reading-size-large .clip-list li small { font-size: 12px; }.reading-size-large .explanation-field small { font-size: 13px; }
.reading-size-xlarge .learning-sources header span, .reading-size-xlarge .learning-content header span, .reading-size-xlarge .learning-notes header span { font-size: 16px; }
.reading-size-xlarge .learning-sources h1, .reading-size-xlarge .learning-notes h1 { font-size: 30px; }.reading-size-xlarge .learning-sources header > b, .reading-size-xlarge .learning-content header > b, .reading-size-xlarge .learning-notes header > b { font-size: 17px; }.reading-size-xlarge .demo-boundary { font-size: 17px; }.reading-size-xlarge .source-open small, .reading-size-xlarge .source-open span { font-size: 16px; }.reading-size-xlarge .source-open b { font-size: 21px; }.reading-size-xlarge .source-toggle { font-size: 17px; }.reading-size-xlarge .source-kind { font-size: 16px; }.reading-size-xlarge .content-lead, .reading-size-xlarge .learning-content blockquote p { font-size: 20px; }.reading-size-xlarge .learning-content blockquote span, .reading-size-xlarge .local-explanation span, .reading-size-xlarge .learning-boundary b { font-size: 16px; }.reading-size-xlarge .learning-content blockquote cite { font-size: 17px; }.reading-size-xlarge .local-explanation p, .reading-size-xlarge .learning-boundary { font-size: 18px; }.reading-size-xlarge .learning-notes label { font-size: 18px; }.reading-size-xlarge .learning-notes textarea { font-size: 18px; }.reading-size-xlarge .clip-list li > span, .reading-size-xlarge .clip-list li p { font-size: 16px; }.reading-size-xlarge .clip-list li small { font-size: 14px; }.reading-size-xlarge .explanation-field small { font-size: 15px; }

.reading-soft { --learn-cyan: #287f7f; --learn-gold: #9a641d; --learn-violet: #6954a5; color: #244348; background: linear-gradient(145deg,#edf5f1,#e4eef0 56%,#f4efe4); }
.reading-soft .learning-space { opacity: .12; }.reading-soft .learning-topbar { background: rgba(244,249,246,.9); border-color: rgba(54,111,116,.2); }.reading-soft .learning-brand, .reading-soft .learning-route b { color: #244348; }.reading-soft .learning-route small, .reading-soft .learning-local { color: #5b7370; }.reading-soft .learning-workspace { background: rgba(54,111,116,.18); }.reading-soft .learning-sources, .reading-soft .learning-content, .reading-soft .learning-notes { background: rgba(246,250,247,.92); }.reading-soft .learning-content { background: radial-gradient(circle at 50% 34%,rgba(102,175,178,.12),transparent 45%),rgba(246,250,247,.95); }.reading-soft .learning-source-card, .reading-soft .learning-notes textarea { background: rgba(229,240,237,.84); }.reading-soft .source-open, .reading-soft .learning-content h1, .reading-soft .learning-content blockquote p, .reading-soft .learning-notes textarea { color: #244348; }.reading-soft .source-open small, .reading-soft .source-open span, .reading-soft .learning-content blockquote cite, .reading-soft .learning-boundary, .reading-soft .learning-notes label, .reading-soft .clip-list li p { color: #55706d; }.reading-soft .learning-sources header > b, .reading-soft .learning-content header > b, .reading-soft .learning-notes header > b, .reading-soft .source-toggle, .reading-soft .explanation-field small, .reading-soft .clip-list li small { color: #5d7773; }.reading-soft .demo-boundary { color: #886b3d; }.reading-soft .source-kind { color: #6954a5; }.reading-soft .content-lead { color: #3e5c5a; }.reading-soft .learning-content blockquote { background: rgba(220,236,234,.78); border-color: rgba(54,111,116,.22); }.reading-soft .local-explanation { background: rgba(229,224,244,.62); border-color: rgba(105,84,165,.24); }.reading-soft .local-explanation p { color: #536078; }.reading-soft .clip-list li { background: rgba(226,239,237,.8); border-color: rgba(54,111,116,.18); }.reading-soft .reading-panel { background: rgba(247,251,248,.98); border-color: rgba(54,111,116,.26); }.reading-soft .reading-panel legend, .reading-soft .reading-panel p { color: #55706d; }.reading-soft .reading-options button { background: rgba(226,239,237,.9); color: #3f625f; }
.reading-soft .material-toolbar,.reading-soft .material-viewer,.reading-soft .material-empty { background: rgba(225,239,237,.82); border-color: rgba(54,111,116,.22); }.reading-soft .material-toolbar > button,.reading-soft .material-tabs button { background: rgba(238,246,243,.9); color: #2e514f; }.reading-soft .material-toolbar > button small,.reading-soft .material-empty p,.reading-soft .material-file-preview p,.reading-soft .material-file-preview small,.reading-soft .material-ai-actions small { color: #5b7471; }.reading-soft .material-empty h2,.reading-soft .material-viewer > header h2,.reading-soft .material-document,.reading-soft .material-file-preview h2 { color: #244348; }.reading-soft .material-body { background: rgba(247,250,247,.62); }.reading-soft .material-extraction { background: rgba(229,224,244,.62); }.reading-soft .material-extraction ul { color: #3f555a; }.reading-soft .material-extraction p { color: #637571; }
.reading-soft .focus-timer { border-color: rgba(154,100,29,.28); background: linear-gradient(145deg,rgba(255,249,233,.78),rgba(226,237,232,.72)); }.reading-soft .focus-timer-mode,.reading-soft .focus-timer-display { color: #604b2a; }.reading-soft .focus-timer-primary,.reading-soft .focus-timer-settings > summary { border-color: rgba(154,100,29,.2); background: rgba(154,100,29,.055); color: #775b31; }.reading-soft .focus-timer-panel { border-color: rgba(75,127,128,.22); background: linear-gradient(145deg,rgba(255,255,251,.97),rgba(226,238,234,.98)); }.reading-soft .focus-timer-panel legend,.reading-soft .focus-timer-panel p { color: #5b7471; }.reading-soft .focus-timer-panel button { background: rgba(239,246,241,.92); color: #355855; }
.reading-soft.workspace-mode .learning-topbar { background: linear-gradient(180deg,rgba(248,251,248,.88),rgba(231,240,237,.78)); border-color: rgba(54,111,116,.2); }.reading-soft.workspace-mode .learning-workspace { background: linear-gradient(135deg,rgba(116,168,166,.13),rgba(231,238,233,.24)); }.reading-soft.workspace-mode .learning-sources,.reading-soft.workspace-mode .learning-content,.reading-soft.workspace-mode .learning-notes { border-color: rgba(75,127,128,.2); background: linear-gradient(145deg,rgba(255,255,251,.76),rgba(229,239,235,.72)); box-shadow: inset 1px 1px rgba(255,255,255,.72),inset -1px -1px rgba(65,121,122,.045),0 16px 38px rgba(47,78,76,.1); }.reading-soft.workspace-mode .learning-content { background: radial-gradient(circle at 50% 28%,rgba(128,183,180,.13),transparent 40%),linear-gradient(145deg,rgba(254,254,249,.8),rgba(231,240,236,.72)); }.reading-soft.workspace-mode .material-toolbar { background: linear-gradient(145deg,rgba(255,255,252,.7),rgba(219,235,232,.72)); }.reading-soft.workspace-mode .learning-source-card,.reading-soft.workspace-mode .clip-list li,.reading-soft.workspace-mode .local-explanation,.reading-soft.workspace-mode .learning-content blockquote { background: linear-gradient(145deg,rgba(255,255,252,.64),rgba(220,236,233,.7)); }.reading-soft.workspace-mode .learning-notes textarea { background: linear-gradient(145deg,rgba(251,252,247,.86),rgba(222,236,233,.76)); }

@media (max-width: 520px) {
  .learning-route small { display: none; }.learning-route b { font-size: 10px; }
  .learning-topbar { grid-template-columns: 32px minmax(0,1fr) 36px; padding: 0 5px; }.learning-topbar-center .focus-timer { width: calc(100% - 2px); grid-template-columns: minmax(58px,1fr) 44px 44px; column-gap: 3px; padding: 4px; }.learning-topbar-center .focus-timer-mode { min-width: 50px; font-size: 17px; }.learning-topbar-center .focus-timer-display { font-size: 17px; letter-spacing: 0; }.learning-topbar-center .focus-timer-primary,.learning-topbar-center .focus-timer-settings > summary { padding: 0 3px; font-size: 10px; }.learning-brand span { width: 30px; height: 30px; }.learning-topbar-tools { gap: 2px; }.reading-controls summary { width: 34px; justify-content: center; padding: 0; }
  .atom-observatory { height: 500px; }.atom-visual { left: 50%; width: 450px; }.atom-copy h1 { font-size: 35px; }
  .source-list { grid-template-columns: 1fr; }
  .material-toolbar { grid-template-columns: 1fr; gap: 7px; margin-bottom: 15px; padding: 8px; }.material-toolbar > button small { font-size: 10px; }.material-body { max-height: 360px; padding: 15px; }.material-document { font-size: 16px; }.material-ai-actions { align-items: flex-start; flex-direction: column; }.material-ai-actions button { width: 100%; }.material-dialog form { padding: 17px; }.material-dialog textarea { min-height: 180px; }
  .learning-content { padding: 25px 17px; }.learning-content h1 { font-size: 26px; }.content-lead { font-size: 13px; }
  .learning-sources, .learning-notes { padding: 17px; }
  .probe-card, .evidence-record { padding: 21px 16px; }.probe-card h1, .review-copy h1 { font-size: 26px; }
  .probe-actions { display: grid; grid-template-columns: 1fr 1fr; }.probe-actions .is-primary { grid-column: 1/-1; }
  .evidence-record footer { flex-wrap: wrap; }.evidence-record footer button { width: 100%; }
  .evidence-paused, .evidence-empty { margin: 40px auto; padding: 28px 18px; }.evidence-paused h1, .evidence-empty h1 { font-size: 26px; }
  .growth-visual { min-height: 390px; }.growth-core { left: 27%; width: 65px; height: 65px; }.growth-stream { left: 32%; width: 42%; }.growth-terminal { right: 5%; width: 80px; height: 80px; }.growth-visual > b { right: 5%; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .learning-prototype *, .learning-prototype *::before, .learning-prototype *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .learning-local i { box-shadow: none; }
}

/* V1.3.0 learning modes: the workspace changes emphasis while keeping core actions available. */
.learning-mode-controls {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
  width: min(980px,100%);
  margin: 0 auto 12px;
  padding: 8px;
  border: 1px solid rgba(170,226,235,.18);
  border-radius: 12px;
  background: rgba(5,20,29,.6);
  box-shadow: inset 0 1px rgba(244,255,255,.06);
}
.learning-mode-controls-label {
  padding: 0 5px;
  color: #8ea7a3;
  font: 10px/1.4 "IBM Plex Mono",Consolas,monospace;
  white-space: nowrap;
}
.learning-mode-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; min-width: 0; }
.learning-mode-options button {
  display: grid;
  min-width: 0;
  min-height: 42px;
  align-content: center;
  gap: 2px;
  padding: 5px 8px;
  border: 1px solid rgba(105,184,204,.18);
  border-radius: 8px;
  background: rgba(3,14,22,.54);
  color: #a6beb9;
  text-align: left;
  cursor: pointer;
}
.learning-mode-options button b { overflow: hidden; color: inherit; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.learning-mode-options button small { overflow: hidden; color: #718b87; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.learning-mode-options button:hover,
.learning-mode-options button:focus-visible { border-color: rgba(103,228,214,.52); color: #e5faf5; }
.learning-mode-options button[aria-pressed="true"] { border-color: rgba(242,190,114,.62); background: rgba(116,72,27,.3); color: #ffe9c1; box-shadow: inset 0 0 0 1px rgba(242,190,114,.12); }
.learning-mode-options button[aria-pressed="true"] small { color: #d0b58a; }
.learning-topbar-tools .learning-mode-controls--topbar {
  display: flex;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 3px;
  gap: 4px;
  border-color: rgba(105,184,204,.16);
  border-radius: 10px;
  background: rgba(3,14,22,.48);
  box-shadow: none;
}
.learning-mode-controls--topbar .learning-mode-controls-label { padding: 0 4px 0 6px; color: #789793; font-size: 9px; }
.learning-mode-controls--topbar .learning-mode-options { display: flex; gap: 2px; }
.learning-mode-controls--topbar .learning-mode-options button { display: inline-grid; min-height: 32px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; text-align: center; }
.learning-mode-controls--topbar .learning-mode-options button b { font-size: 11px; font-weight: 500; }
.learning-mode-controls--topbar .learning-mode-options button[aria-pressed="true"] { border: 1px solid rgba(103,228,214,.36); background: rgba(29,91,101,.42); color: #e5faf5; box-shadow: inset 0 0 0 1px rgba(103,228,214,.08); }
.learning-mode-controls--topbar .learning-mode-options button:hover,
.learning-mode-controls--topbar .learning-mode-options button:focus-visible { background: rgba(103,228,214,.1); }
.reading-soft .learning-mode-controls { border-color: rgba(75,127,128,.22); background: rgba(247,251,248,.68); }
.reading-soft .learning-mode-controls-label { color: #587572; }
.reading-soft .learning-mode-options button { border-color: rgba(75,127,128,.2); background: rgba(245,250,247,.74); color: #426966; }
.reading-soft .learning-mode-options button small { color: #6b8681; }
.reading-soft .learning-mode-options button[aria-pressed="true"] { border-color: #9a641d; background: rgba(239,222,180,.72); color: #624516; }
.reading-soft .learning-mode-options button[aria-pressed="true"] small { color: #806332; }
.learning-workspace.learning-mode-focus { grid-template-columns: minmax(178px,.72fr) minmax(560px,2.7fr) minmax(204px,.72fr); }
.learning-workspace.learning-mode-notes { grid-template-columns: minmax(190px,.82fr) minmax(410px,1.45fr) minmax(330px,1.73fr); }
.learning-workspace.learning-mode-browse { grid-template-columns: minmax(310px,1.7fr) minmax(390px,1.3fr) minmax(210px,.8fr); }
.learning-mode-focus .source-card-summary { opacity: .72; }
.learning-mode-focus .source-material-dock {
  margin-top: 8px;
  padding-top: 8px;
  gap: 5px;
  opacity: 1;
}
.learning-mode-focus .source-material-dock button {
  min-height: 52px;
  padding: 5px 2px;
  gap: 3px;
}
.learning-mode-focus .source-material-dock button > span { width: 22px; height: 22px; font-size: 13px; }
.learning-mode-focus .source-material-dock button > b { font-size: 10px; }
.learning-mode-focus .learning-notes .note-toolbar-edit { opacity: .72; }
.learning-mode-focus .learning-notes .note-toolbar-assistant { opacity: .82; }
.learning-mode-notes .learning-notes { box-shadow: inset 0 0 0 1px rgba(154,124,255,.12),0 18px 46px rgba(0,0,0,.18); }
.learning-mode-notes .learning-content { padding-left: clamp(22px,3vw,42px); padding-right: clamp(22px,3vw,42px); }
.learning-mode-browse .learning-sources { box-shadow: inset 0 0 0 1px rgba(242,190,114,.13),0 18px 46px rgba(0,0,0,.18); }
.learning-mode-browse .learning-content > * { opacity: .9; }
@media (max-width: 1100px) and (min-width: 801px) {
  .learning-workspace.learning-mode-focus { grid-template-columns: minmax(170px,.78fr) minmax(440px,2fr) minmax(210px,.9fr); }
  .learning-workspace.learning-mode-notes { grid-template-columns: minmax(180px,.8fr) minmax(390px,1.35fr) minmax(280px,1.35fr); }
  .learning-workspace.learning-mode-browse { grid-template-columns: minmax(260px,1.45fr) minmax(370px,1.35fr) minmax(210px,.8fr); }
  .learning-mode-controls--topbar .learning-mode-options button { padding: 0 6px; }
  .learning-mode-controls--topbar .learning-mode-options button b { font-size: 10px; }
  .learning-mode-controls--topbar .learning-mode-controls-label { display: none; }
}
@media (max-width: 800px) {
  .learning-mode-controls { grid-template-columns: 1fr; gap: 6px; }
  .learning-mode-controls-label { padding: 0 2px; }
  .learning-mode-options button { min-height: 39px; padding: 4px 6px; }
  .learning-mode-options button b { font-size: 11px; }
  .learning-mode-options button small { font-size: 8px; }
  .learning-topbar-tools .learning-mode-controls--topbar { position: absolute; top: calc(100% + 6px); left: 5px; right: 5px; z-index: 35; justify-content: center; padding: 3px; border-color: rgba(105,184,204,.22); background: rgba(3,14,22,.88); box-shadow: 0 10px 24px rgba(0,0,0,.24); }
  .learning-mode-controls--topbar .learning-mode-controls-label { display: inline; font-size: 8px; }
  .learning-mode-controls--topbar .learning-mode-options { flex: 1; }
  .learning-mode-controls--topbar .learning-mode-options button { flex: 1; min-height: 30px; padding: 0 4px; }
  .learning-mode-controls--topbar .learning-mode-options button b { font-size: 10px; }
  .workspace-mode .learning-topbar { margin-bottom: 42px; }
  .learning-workspace.learning-mode-focus,
  .learning-workspace.learning-mode-notes,
  .learning-workspace.learning-mode-browse { grid-template-columns: 1fr; }
  .learning-mode-focus .source-material-dock { margin-bottom: 12px; }
}
/* Flat glass content cards: translucency and blur without decorative gradients. */
.workspace-mode .learning-source-card,
.workspace-mode .clip-list li,
.workspace-mode .learning-notes textarea,
.workspace-mode .local-explanation,
.workspace-mode .learning-content blockquote {
  background: rgba(7,26,35,.66);
  background-image: none;
  border-color: rgba(177,226,233,.2);
  box-shadow: inset 0 1px rgba(244,255,255,.08),0 9px 24px rgba(0,0,0,.1);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}
.workspace-mode .source-toggle {
  border-top-color: rgba(177,226,233,.14);
  background: rgba(3,16,23,.42);
  background-image: none;
}
.reading-soft.workspace-mode .learning-source-card,
.reading-soft.workspace-mode .clip-list li,
.reading-soft.workspace-mode .learning-notes textarea,
.reading-soft.workspace-mode .local-explanation,
.reading-soft.workspace-mode .learning-content blockquote {
  background: rgba(248,252,249,.58);
  background-image: none;
  border-color: rgba(73,137,137,.24);
  box-shadow: inset 0 1px rgba(255,255,255,.86),0 10px 26px rgba(52,86,82,.08);
  backdrop-filter: blur(18px) saturate(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
}
.reading-soft.workspace-mode .learning-source-card.is-active { border-color: rgba(36,151,145,.52); box-shadow: inset 0 1px rgba(255,255,255,.9),0 10px 26px rgba(52,86,82,.1); }
.reading-soft.workspace-mode .source-toggle { border-top-color: rgba(73,137,137,.2); background: rgba(96,116,115,.18); color: #456b68; }
.reading-soft.workspace-mode .source-toggle[aria-pressed="true"] { background: rgba(42,126,123,.12); color: #246f6b; }
.reading-soft.workspace-mode .learning-notes textarea { color: #244348; }
.reading-soft.workspace-mode .learning-notes textarea::placeholder { color: #6c7f7d; opacity: 1; }

/* Probe workspace: readable, balanced glass panels in both themes. */
.evidence-mode .probe-layout {
  width: min(1420px,calc(100vw - 48px));
  margin: 0 auto;
  grid-template-columns: minmax(340px,.78fr) minmax(520px,1.22fr);
  gap: clamp(22px,3vw,46px);
  align-items: stretch;
  padding: clamp(30px,6vh,70px) 0;
}
.evidence-mode .probe-context,
.evidence-mode .probe-card {
  align-self: center;
  padding: clamp(26px,3vw,42px);
  border: 1px solid rgba(176,226,234,.24);
  border-radius: 24px;
  background: rgba(5,22,31,.72);
  background-image: none;
  box-shadow: inset 0 1px rgba(247,255,255,.09),0 24px 65px rgba(0,0,0,.22);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
}
.evidence-mode .probe-context > span { margin-top: 30px; font-size: 12px; color: #7edbd0; }
.evidence-mode .probe-context blockquote {
  margin: 16px 0;
  padding: 20px 22px;
  border: 1px solid rgba(176,226,234,.18);
  border-left: 3px solid var(--learn-cyan);
  border-radius: 12px;
  background: rgba(9,34,43,.58);
  background-image: none;
  color: #e4efed;
  font-size: 17px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.evidence-mode .probe-context p { color: #adc1be; font-size: 14px; line-height: 1.8; }
.evidence-mode .probe-card > span { color: #b8a7ea; font-size: 12px; }
.evidence-mode .probe-card h1 { margin: 16px 0 28px; color: #edf6f4; font-size: clamp(30px,2.7vw,44px); line-height: 1.45; }
.evidence-mode .probe-card label { gap: 10px; color: #d6e3e0; font-size: 15px; }
.evidence-mode .probe-card textarea {
  min-height: 180px;
  padding: 18px;
  border-color: rgba(154,124,255,.38);
  background: rgba(1,11,17,.66);
  background-image: none;
  color: #f0f6f5;
  font-size: 17px;
  line-height: 1.8;
}
.evidence-mode .probe-card textarea::placeholder { color: #829693; opacity: 1; }
.evidence-mode .probe-disclosure { color: #91a6a2; font-size: 12px; line-height: 1.65; }
.evidence-mode .probe-actions { gap: 10px; margin-top: 4px; }
.evidence-mode .probe-actions button { min-height: 44px; padding: 0 16px; border-color: rgba(164,211,218,.26); background: rgba(9,32,41,.62); color: #c0d4d0; font-size: 13px; }
.evidence-mode .probe-actions .is-primary { border-color: rgba(242,190,114,.5); background: rgba(116,72,27,.3); color: #ffe8bd; }
.evidence-mode .probe-card [role="status"] { font-size: 12px; }

.reading-soft.evidence-mode .probe-context,
.reading-soft.evidence-mode .probe-card {
  border-color: rgba(65,128,130,.24);
  background: rgba(250,253,250,.66);
  background-image: none;
  box-shadow: inset 0 1px rgba(255,255,255,.94),0 24px 60px rgba(49,83,80,.12);
}
.reading-soft.evidence-mode .probe-context .learning-back { color: #54716e !important; font-size: 14px; }
.reading-soft.evidence-mode .probe-context > span { color: #287f7f; }
.reading-soft.evidence-mode .probe-context blockquote { border-color: rgba(65,128,130,.22); border-left-color: #287f7f; background: rgba(225,239,236,.66); color: #294c4f; }
.reading-soft.evidence-mode .probe-context p { color: #58716e; }
.reading-soft.evidence-mode .probe-card > span { color: #6954a5; }
.reading-soft.evidence-mode .probe-card h1 { color: #183d42; }
.reading-soft.evidence-mode .probe-card label { color: #365b5d; }
.reading-soft.evidence-mode .probe-card textarea { border-color: rgba(105,84,165,.3); background: rgba(252,253,249,.72); color: #244348; box-shadow: inset 0 1px 8px rgba(63,91,88,.06); }
.reading-soft.evidence-mode .probe-card textarea::placeholder { color: #71827f; }
.reading-soft.evidence-mode .probe-disclosure { color: #627976; }
.reading-soft.evidence-mode .probe-actions button { border-color: rgba(64,123,124,.24); background: rgba(233,242,238,.72); color: #3d625f; }
.reading-soft.evidence-mode .probe-actions .is-primary { border-color: rgba(154,100,29,.4); background: rgba(154,100,29,.12); color: #79521d; }

@media (max-width: 800px) {
  .evidence-mode .probe-layout { width: auto; grid-template-columns: 1fr; padding: 18px 14px 32px; }
  .evidence-mode .probe-context,.evidence-mode .probe-card { width: 100%; padding: 22px 18px; }
  .evidence-mode .probe-card h1 { font-size: 28px; }
}

/* Soft-theme high-contrast controls for long sessions. */
.reading-soft .demo-boundary {
  border-left-color: #b57925;
  background: rgba(235,221,188,.56);
  color: #684817;
  font-weight: 550;
}
.reading-soft .material-ai-actions button,
.reading-soft .learn-actions button {
  border-color: #b87a20;
  background: rgba(239,222,180,.9);
  color: #4d3512;
  box-shadow: inset 0 1px rgba(255,255,255,.72),0 5px 14px rgba(112,76,24,.1);
  font-weight: 650;
}
.reading-soft .material-ai-actions button:hover,
.reading-soft .learn-actions button:hover,
.reading-soft .material-ai-actions button:focus-visible,
.reading-soft .learn-actions button:focus-visible {
  border-color: #8e5b13;
  background: rgba(231,205,147,.96);
  color: #342307;
}
.reading-soft .material-ai-actions button:disabled,
.reading-soft .learn-actions button:disabled {
  border-color: #9b9e96;
  background: rgba(222,226,218,.88);
  color: #5c625d;
  box-shadow: none;
  cursor: not-allowed;
}
.reading-soft .reading-controls summary {
  border-color: #236e70;
  background: #315f64;
  color: #f5fbfa;
  box-shadow: inset 0 1px rgba(255,255,255,.16),0 5px 14px rgba(31,79,82,.16);
  font-weight: 650;
}
.reading-soft .reading-controls summary span { color: #75e2d9; }
.reading-soft .reading-controls summary:hover,
.reading-soft .reading-controls summary:focus-visible,
.reading-soft .reading-controls[open] summary {
  border-color: #18585b;
  background: #244f54;
  color: #fff;
}

/* Paused/empty evidence states keep theme contrast instead of inheriting dark-card colors. */
.evidence-mode .evidence-paused,
.evidence-mode .evidence-empty {
  border-color: rgba(176,226,234,.26);
  background: rgba(5,22,31,.78);
  background-image: none;
  box-shadow: inset 0 1px rgba(247,255,255,.09),0 24px 65px rgba(0,0,0,.22);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
}
.evidence-mode .evidence-paused > span,
.evidence-mode .evidence-empty > span { color: #78dcd1; font-size: 14px; line-height: 1.5; }
.evidence-mode .evidence-paused h1,
.evidence-mode .evidence-empty h1 { color: #edf6f4; font-weight: 600; }
.evidence-mode .evidence-paused p,
.evidence-mode .evidence-empty p { color: #b7cac6; font-size: 17px; line-height: 1.75; }
.evidence-mode .evidence-paused a,
.evidence-mode .evidence-empty a,
.evidence-mode .evidence-paused button {
  min-height: 44px;
  border-color: rgba(103,228,214,.38);
  background: rgba(9,35,43,.72);
  color: #d9efeb;
  font-size: 15px;
}
.reading-soft.evidence-mode .evidence-paused,
.reading-soft.evidence-mode .evidence-empty {
  border-color: rgba(65,128,130,.3);
  background: rgba(250,253,250,.82);
  background-image: none;
  box-shadow: inset 0 1px rgba(255,255,255,.96),0 24px 60px rgba(49,83,80,.13);
}
.reading-soft.evidence-mode .evidence-paused > span,
.reading-soft.evidence-mode .evidence-empty > span { color: #287f7f; font-weight: 650; }
.reading-soft.evidence-mode .evidence-paused h1,
.reading-soft.evidence-mode .evidence-empty h1 { color: #183d42; }
.reading-soft.evidence-mode .evidence-paused p,
.reading-soft.evidence-mode .evidence-empty p { color: #496866; }
.reading-soft.evidence-mode .evidence-paused a,
.reading-soft.evidence-mode .evidence-empty a,
.reading-soft.evidence-mode .evidence-paused button {
  border-color: #3f7f7e;
  background: rgba(230,242,238,.82);
  color: #244f50;
  font-weight: 650;
}
.reading-soft.evidence-mode .evidence-paused a:hover,
.reading-soft.evidence-mode .evidence-empty a:hover,
.reading-soft.evidence-mode .evidence-paused button:hover,
.reading-soft.evidence-mode .evidence-paused a:focus-visible,
.reading-soft.evidence-mode .evidence-empty a:focus-visible,
.reading-soft.evidence-mode .evidence-paused button:focus-visible {
  background: rgba(207,230,224,.94);
  color: #143e40;
}

/* Knowledge exploration surfaces: nodes stay inspectable, while the map exposes only recorded containment links. */
.explorer-page { min-height: calc(100dvh - 68px); overflow: auto; padding: 30px clamp(18px,4vw,64px) 44px; color: #edf6f4; background: radial-gradient(circle at 52% 18%,rgba(39,91,109,.22),transparent 38%),linear-gradient(145deg,#04101a,#071b27 54%,#041018); }
.explorer-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: 1400px; margin: 0 auto 22px; }
.explorer-heading > div:first-child { min-width: 0; }
.explorer-heading > div:first-child > span { color: #67e4d6; font: 10px/1.5 "IBM Plex Mono",Consolas,monospace; letter-spacing: .13em; }
.explorer-heading h1 { margin: 7px 0 8px; color: #f1f8f6; font-size: clamp(28px,3.8vw,48px); font-weight: 500; line-height: 1.15; }
.explorer-heading p { max-width: 680px; margin: 0; color: #9eb4b0; font-size: 13px; line-height: 1.7; }
.explorer-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.explorer-actions a { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(171,226,234,.24); border-radius: 9px; background: rgba(8,31,42,.72); color: #c5ddda; font-size: 12px; text-decoration: none; }
.explorer-actions a:hover, .explorer-actions a:focus-visible { border-color: rgba(103,228,214,.52); color: #f0fffc; background: rgba(25,83,91,.32); }
.explorer-actions .explorer-action-map { border-color: rgba(154,124,255,.34); color: #ded6ff; background: rgba(72,53,122,.22); }
.explorer-actions .explorer-action-node { border-color: rgba(106,183,255,.34); color: #cfe9ff; background: rgba(38,82,127,.22); }
.explorer-toolbar { display: grid; grid-template-columns: minmax(260px,1fr) auto auto; align-items: end; gap: 12px; max-width: 1400px; margin: 0 auto 17px; padding: 12px; border: 1px solid rgba(171,226,234,.18); border-radius: 13px; background: rgba(7,25,35,.64); box-shadow: inset 0 1px rgba(242,255,255,.06); }
.explorer-search { display: grid; gap: 6px; color: #8fa9a5; font-size: 10px; }
.explorer-search input { width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid rgba(103,228,214,.22); border-radius: 8px; outline: 0; background: rgba(1,9,15,.74); color: #eef8f5; font: inherit; }
.explorer-search input::placeholder { color: #5f7977; }.explorer-search input:focus { border-color: #67e4d6; box-shadow: 0 0 0 2px rgba(103,228,214,.12); }
.explorer-filter { display: flex; gap: 5px; }
.explorer-filter button { min-height: 38px; padding: 0 10px; border: 1px solid rgba(145,188,193,.17); border-radius: 8px; background: rgba(3,14,23,.68); color: #9fb5b1; font-size: 10px; cursor: pointer; }
.explorer-filter button:hover, .explorer-filter button:focus-visible, .explorer-filter button[aria-pressed="true"] { border-color: rgba(103,228,214,.42); color: #dcfaf4; background: rgba(28,95,99,.28); }
.explorer-metrics { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.explorer-metrics b { margin-left: 7px; color: #f2be72; font: 20px/1 "IBM Plex Mono",Consolas,monospace; }.explorer-metrics b:first-child { margin-left: 0; }.explorer-metrics span { color: #75918e; font-size: 9px; }
.node-list { display: grid; gap: 13px; max-width: 1400px; margin: 0 auto; }
.node-group { overflow: hidden; border: 1px solid rgba(171,226,234,.19); border-radius: 15px; background: rgba(7,27,38,.68); box-shadow: inset 0 1px rgba(242,255,255,.06),0 14px 34px rgba(0,0,0,.14); }
.node-group > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid rgba(148,207,216,.13); background: rgba(34,88,101,.12); }
.node-group > header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }.node-group > header > div > div { min-width: 0; }.node-group > header span:not(.node-domain-dot) { color: #6f9d9d; font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; }.node-group > header h2 { overflow: hidden; margin: 3px 0 0; color: #e8f5f2; font-size: 15px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }.node-group > header > b { color: #9db7b2; font-size: 10px; font-weight: 400; }
.node-domain-dot { display: block; width: 12px; height: 12px; flex: 0 0 auto; border: 1px solid color-mix(in srgb,var(--node-color),white 35%); border-radius: 50%; background: var(--node-color); box-shadow: 0 0 15px color-mix(in srgb,var(--node-color),transparent 32%); }
.node-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 10px; padding: 12px; }
.knowledge-node-card { display: grid; min-width: 0; min-height: 164px; grid-template-rows: auto 1fr auto; padding: 13px; border: 1px solid rgba(145,207,218,.16); border-radius: 11px; background: rgba(3,15,24,.6); color: #dcebe8; text-decoration: none; transition: border-color .2s ease,background .2s ease,transform .2s ease; }
.knowledge-node-card:hover, .knowledge-node-card:focus-visible { border-color: rgba(103,228,214,.48); background: rgba(27,83,92,.24); transform: translateY(-1px); }.knowledge-node-card header, .knowledge-node-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.knowledge-node-card header span { color: #79b8b4; font: 9px "IBM Plex Mono",Consolas,monospace; }.knowledge-node-card header b { color: #f2be72; font: 12px "IBM Plex Mono",Consolas,monospace; }.knowledge-node-card h3 { overflow: hidden; margin: 12px 0 6px; font-size: 16px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }.knowledge-node-card p { display: -webkit-box; overflow: hidden; margin: 0; color: #9fb6b2; font-size: 11px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.knowledge-node-card footer { padding-top: 10px; color: #78938f; font-size: 9px; }.knowledge-node-card footer i { color: #67e4d6; font: 16px/1 "IBM Plex Mono",Consolas,monospace; font-style: normal; }
.knowledge-node-card.is-current-record { border-color: #f2be72; box-shadow: 0 0 0 1px rgba(242,190,114,.2), 0 16px 34px rgba(0,0,0,.22); }
.explorer-empty { display: grid; min-height: 290px; place-items: center; align-content: center; gap: 8px; padding: 25px; border: 1px dashed rgba(103,228,214,.3); border-radius: 15px; background: rgba(7,27,38,.58); text-align: center; }.explorer-empty > span, .map-inspector-kicker, .map-inspector-empty > span { color: #67e4d6; font: 10px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }.explorer-empty h2, .map-inspector-empty h2 { margin: 2px 0; font-size: 20px; font-weight: 500; }.explorer-empty p, .map-inspector-empty p { margin: 0; color: #8fa9a5; font-size: 12px; line-height: 1.6; }.explorer-empty a { min-height: 38px; margin-top: 7px; padding: 0 13px; border: 1px solid rgba(103,228,214,.34); border-radius: 8px; color: #c6efea; font-size: 11px; line-height: 38px; text-decoration: none; }
.map-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(270px,.7fr); gap: 13px; max-width: 1400px; min-height: 560px; margin: 0 auto 13px; }
.map-visual-panel, .map-inspector-panel, .map-accessible-list { min-width: 0; border: 1px solid rgba(171,226,234,.19); border-radius: 15px; background: rgba(7,27,38,.68); box-shadow: inset 0 1px rgba(242,255,255,.06),0 14px 34px rgba(0,0,0,.14); }
.map-visual-panel > header, .map-accessible-list > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid rgba(148,207,216,.13); }.map-visual-panel > header div { min-width: 0; }.map-visual-panel > header span, .map-accessible-list > header > span { display: block; color: #67e4d6; font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; }.map-visual-panel > header b { display: block; margin-top: 3px; color: #e5f3f0; font-size: 14px; font-weight: 500; }.map-visual-panel > header small, .map-accessible-list > header small { color: #77918e; font-size: 10px; }.map-canvas { position: relative; min-height: 505px; overflow: hidden; background: radial-gradient(circle at 50% 50%,rgba(57,112,129,.18),transparent 42%),radial-gradient(circle at 50% 50%,rgba(3,12,21,.65),rgba(2,10,17,.88)); }.map-canvas::before, .map-canvas::after { content: ""; position: absolute; top: 50%; left: 50%; border: 1px solid rgba(103,228,214,.12); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }.map-canvas::before { width: 42%; height: 56%; }.map-canvas::after { width: 72%; height: 82%; border-color: rgba(154,124,255,.1); }.map-canvas svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }.map-edge { stroke: rgba(103,228,214,.3); stroke-width: .32; stroke-dasharray: 1.2 1; vector-effect: non-scaling-stroke; }.map-node { position: absolute; z-index: 2; display: grid; place-items: center; min-width: 0; transform: translate(-50%,-50%); cursor: pointer; }.map-node b, .map-node small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.map-domain-node { width: 148px; min-height: 74px; gap: 4px; padding: 10px 12px; border: 1px solid color-mix(in srgb,var(--node-color),white 20%); border-radius: 15px; background: color-mix(in srgb,var(--node-color),#04131e 84%); color: #f2fbf8; box-shadow: 0 0 30px color-mix(in srgb,var(--node-color),transparent 72%),inset 0 1px rgba(255,255,255,.18); }.map-domain-node > span { color: var(--node-color); font-size: 19px; }.map-domain-node b { font-size: 12px; font-weight: 550; }.map-domain-node small { color: #a8c6c1; font-size: 9px; }.map-atom-node { width: 108px; min-height: 58px; gap: 3px; padding: 8px; border: 1px solid color-mix(in srgb,var(--node-color),white 15%); border-radius: 11px; background: rgba(4,17,27,.9); color: #deeeeb; box-shadow: 0 0 20px color-mix(in srgb,var(--node-color),transparent 78%); }.map-atom-node > i { display: block; width: 12px; height: 12px; border: 1px solid color-mix(in srgb,var(--node-color),white 40%); border-radius: 50%; background: var(--node-color); box-shadow: 0 0 12px var(--node-color); }.map-atom-node b { font-size: 10px; font-weight: 500; }.map-atom-node small { color: #8ca7a3; font: 8px "IBM Plex Mono",Consolas,monospace; }.map-node:hover, .map-node:focus-visible, .map-node.is-selected { z-index: 5; border-color: #f2be72; box-shadow: 0 0 0 2px rgba(242,190,114,.23),0 0 30px rgba(242,190,114,.22); outline: 0; }.map-node:focus-visible { outline: 2px solid #f2be72; outline-offset: 3px; }
.map-inspector-panel { align-self: start; min-height: 100%; padding: 20px; }.map-inspector-panel h2 { margin: 8px 0 10px; color: #f0f7f4; font-size: 24px; font-weight: 500; line-height: 1.25; }.map-inspector-panel > p { margin: 0; color: #a5bbb7; font-size: 12px; line-height: 1.7; }.map-inspector-panel dl { margin: 20px 0 0; }.map-inspector-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(148,207,216,.13); font-size: 11px; }.map-inspector-panel dt { color: #718c88; }.map-inspector-panel dd { margin: 0; color: #d5e7e3; text-align: right; }.map-inspector-actions { display: grid; gap: 7px; margin-top: 20px; }.map-inspector-actions a { display: flex; min-height: 40px; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px solid rgba(103,228,214,.34); border-radius: 8px; background: rgba(23,82,88,.2); color: #cceee9; font-size: 11px; text-decoration: none; }.map-inspector-actions a:hover, .map-inspector-actions a:focus-visible { border-color: #67e4d6; background: rgba(32,112,112,.34); }.map-inspector-actions a.is-secondary { border-color: rgba(145,188,193,.18); background: rgba(3,14,23,.42); color: #9bb4b0; }.map-inspector-empty { display: grid; align-content: center; min-height: 300px; gap: 8px; }
.map-accessible-list { max-width: 1400px; margin: 0 auto; }.map-accessible-list > header { align-items: end; justify-content: start; }.map-accessible-list > header h2 { margin: 3px 0 0 10px; color: #e4f1ee; font-size: 16px; font-weight: 500; }.map-accessible-list > header small { margin-left: auto; }.map-accessible-list ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 8px; margin: 0; padding: 12px; list-style: none; }.map-accessible-list li a { display: flex; min-height: 47px; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid rgba(145,207,218,.14); border-radius: 8px; color: #cce0dc; text-decoration: none; }.map-accessible-list li a:hover, .map-accessible-list li a:focus-visible { border-color: rgba(103,228,214,.44); background: rgba(28,95,99,.22); }.map-list-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--node-color); box-shadow: 0 0 9px var(--node-color); }.map-accessible-list li a > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }.map-accessible-list li a b, .map-accessible-list li a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.map-accessible-list li a b { font-size: 11px; font-weight: 500; }.map-accessible-list li a small { color: #78938f; font-size: 9px; }.map-accessible-list li a > i { margin-left: auto; color: #67e4d6; font: 14px "IBM Plex Mono",Consolas,monospace; font-style: normal; }.map-list-empty { padding: 14px; color: #839b97; font-size: 11px; }

@media (max-width: 900px) {
  .explorer-heading { display: block; }.explorer-actions { margin-top: 16px; }.explorer-toolbar { grid-template-columns: minmax(0,1fr); align-items: stretch; }.explorer-filter { flex-wrap: wrap; }.explorer-metrics { justify-content: flex-start; }.map-layout { grid-template-columns: 1fr; min-height: 0; }.map-canvas { min-height: 470px; }.map-inspector-panel { min-height: 0; }.map-inspector-empty { min-height: 180px; }
}

@media (max-width: 520px) {
  .explorer-page { padding: 22px 12px 30px; }.explorer-heading h1 { font-size: 32px; }.explorer-heading p { font-size: 12px; }.explorer-actions { display: grid; grid-template-columns: 1fr 1fr; }.explorer-actions a { justify-content: center; padding: 0 8px; font-size: 10px; }.node-grid { grid-template-columns: 1fr; padding: 8px; }.node-group > header { padding: 12px; }.map-canvas { min-height: 430px; }.map-domain-node { width: 118px; min-height: 64px; padding: 8px; }.map-atom-node { width: 92px; min-height: 52px; padding: 6px; }.map-node b { font-size: 9px; }.map-node small { font-size: 8px; }.map-accessible-list ul { grid-template-columns: 1fr; padding: 8px; }
}

@media (max-width: 900px) {
  .today-learning-context-grid { grid-template-columns: 1fr; }
}

/* Learning workspace revision: clear mission brief, source dock, and Freeform-style notes. */
.workspace-mode .learning-sources { display: flex; flex-direction: column; }
.workspace-mode .learning-sources { container: source-panel / inline-size; }
.source-material-dock { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(159,211,220,.18); }
.source-material-dock button { display: grid; min-width: 0; min-height: 62px; place-items: center; align-content: center; gap: 5px; padding: 7px 4px; border: 1px solid rgba(103,228,214,.2); border-radius: 8px; background: rgba(6,28,37,.62); color: #cde3df; cursor: pointer; }
.source-material-dock button:hover, .source-material-dock button:focus-visible { border-color: rgba(103,228,214,.58); background: rgba(25,79,84,.4); outline: 0; }
.source-material-dock button > span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(103,228,214,.34); border-radius: 50%; color: #67e4d6; font-size: 15px; }
.source-material-dock button > b { overflow: hidden; max-width: 100%; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

@container source-panel (max-width: 360px) {
  .workspace-mode .source-library-header {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-items: stretch !important;
    min-height: 0;
    flex-basis: auto;
  }
  .workspace-mode .source-library-header h1 { white-space: nowrap; }
  .workspace-mode .source-library-lookup { width: 100%; }
}

.today-learning-context { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px 14px; width: min(820px,100%); margin: 0 auto 18px; padding: 16px; border: 1px solid rgba(242,190,114,.52); border-radius: 8px; background: rgba(27,32,32,.88); box-shadow: inset 0 1px rgba(255,244,211,.12),0 14px 30px rgba(0,0,0,.2); }
.today-learning-signal { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(242,190,114,.58); border-radius: 50%; background: rgba(242,190,114,.12); color: #f2be72; font: 20px/1 "IBM Plex Mono",Consolas,monospace; }
.today-learning-copy { min-width: 0; }
.today-learning-copy > span { color: #f2be72; font: 10px/1.2 "IBM Plex Mono",Consolas,monospace; letter-spacing: 0; }
.today-learning-copy h2 { margin: 5px 0 4px; color: #fff9ea; font-size: 20px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.today-learning-copy p { margin: 0; color: #c6d4d0; font-size: 12px; line-height: 1.55; }
.today-learning-domain { align-self: start; max-width: 170px; padding: 7px 9px; border: 1px solid rgba(103,228,214,.34); border-radius: 6px; color: #9fe8df; font-size: 11px; line-height: 1.35; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.today-learning-context-grid { grid-column: 2/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 0; border-top: 1px solid rgba(242,190,114,.22); }
.today-learning-context-grid > div { min-width: 0; padding: 10px 11px 0; border-left: 1px solid rgba(242,190,114,.18); }
.today-learning-context-grid > div:first-child { padding-left: 0; border-left: 0; }
.today-learning-context-grid dt { margin-bottom: 4px; color: #8fa39f; font-size: 9px; }
.today-learning-context-grid dd { margin: 0; color: #e9f1ee; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.today-learning-boundary { grid-column: 2/-1; margin: 0; padding: 9px 10px; border-left: 2px solid #e3a24f; background: rgba(117,72,24,.2); color: #d9c29b; font-size: 10px; line-height: 1.55; }
.today-learning-boundary b { margin-right: 8px; color: #ffc978; }

.workspace-mode .learning-notes { position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 16px; }
.note-panel-header { position: relative; z-index: 40; display: flex; flex-wrap: nowrap; flex: 0 0 auto; align-items: center !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.note-panel-header h1 { flex: 0 0 auto; margin: 0; color: #edf7f4; font-size: 25px; line-height: 1.2; font-weight: 550; }
.note-panel-header .note-toolbar-edit { justify-content: flex-end; margin-left: auto; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.note-panel-header > .note-save-state { flex: 0 0 auto; margin-left: 8px; }
.note-board { position: relative; flex: 1 1 auto; min-height: 260px; overflow: hidden; border: 1px solid rgba(103,228,214,.24); border-radius: 8px; background: rgba(1,10,15,.72); box-shadow: inset 0 1px rgba(240,255,255,.06); }
.note-editor { position: absolute; z-index: 1; inset: 0; overflow-x: hidden; overflow-y: auto; padding: 17px; outline: 0; color: #e7f2ef; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.note-editor:empty::before { content: attr(data-placeholder); color: #66807d; pointer-events: none; }
.note-editor:focus { box-shadow: inset 0 0 0 1px rgba(103,228,214,.44); }
.note-editor p { margin: 0 0 10px; }
.note-source-block { margin: 12px 0; padding: 11px 12px; border-left: 2px solid #67e4d6; background: rgba(24,71,76,.24); }
.note-source-block p { margin: 0 0 7px; }.note-source-block cite { color: #82a39e; font-size: 10px; font-style: normal; }
.note-source-block.is-located { animation: note-source-located 1.8s ease-out; }
@keyframes note-source-located { 0%,28% { border-left-color: #fff0ad; background: rgba(136,104,34,.48); box-shadow: 0 0 0 3px rgba(255,224,122,.2); } 100% { border-left-color: #67e4d6; box-shadow: 0 0 0 0 transparent; } }
.note-underline { text-decoration-line: underline; text-decoration-color: var(--note-underline-color,#287f7f); text-decoration-thickness: var(--note-underline-thickness,2px); text-underline-offset: .16em; text-decoration-skip-ink: none; }.note-underline.is-wave { padding-bottom: calc(var(--note-underline-wave-height,9px) * .48); background-image: var(--note-underline-wave); background-position: left bottom; background-repeat: repeat-x; background-size: 16px var(--note-underline-wave-height,9px); -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: none; }.note-underline.is-solid { text-decoration-style: solid; }.note-underline.is-double { text-decoration-style: double; }
.note-ai-entry { margin: 12px 0; padding: 11px 12px; border-left: 2px solid #9a7cff; background: rgba(78,55,126,.2); }.note-ai-entry strong { color: #c7b8ff; }.note-ai-entry p { margin: 6px 0 0; }
.note-editor .note-image { display: block; width: auto; height: auto; max-width: min(100%,520px); max-height: 320px; object-fit: contain; margin: 12px auto; border: 1px solid rgba(103,228,214,.2); border-radius: 6px; background: rgba(0,0,0,.08); }
.note-drawing-layer { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.note-drawing-layer:focus { outline: 0; }
.note-drawing-hit { pointer-events: stroke; cursor: pointer; }
.note-drawing-shape { pointer-events: none; transition: filter .16s ease,opacity .16s ease; }
.note-drawing-group.is-selected .note-drawing-shape { filter: drop-shadow(0 0 5px rgba(154,100,29,.9)); }
.note-drawing-floating-delete { position: absolute; z-index: 5; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(166,75,65,.48); border-radius: 50%; background: rgba(255,248,245,.96); color: #9b4036; box-shadow: 0 5px 14px rgba(72,38,32,.2); cursor: pointer; transform: translate(-18%,-82%); }
.note-drawing-floating-delete::before { content:"×"; font-size: 18px; line-height: 1; }
.note-drawing-floating-delete:hover,.note-drawing-floating-delete:focus-visible { border-color: #a64b41; background: #fff; color: #7f2e26; outline: 2px solid rgba(166,75,65,.2); outline-offset: 2px; }
.note-board.is-drawing .note-drawing-layer { pointer-events: auto; cursor: crosshair; touch-action: none; }
.note-board.is-drawing .note-drawing-hit { pointer-events: none; }
.note-board.is-drawing .note-editor { user-select: none; }

.note-mind-map { position: relative; display: grid; gap: 15px; margin: 14px 0; padding: 18px 12px 13px; border: 1px solid rgba(103,228,214,.28); border-radius: 8px; background: rgba(6,26,34,.68); }
.note-mind-map-remove { position: absolute; top: 4px; right: 5px; width: 25px; height: 25px; border: 0; background: transparent; color: #78918e; cursor: pointer; }
.note-mind-map-center, .note-mind-map-node { position: relative; z-index: 1; min-width: 0; padding: 8px 9px; border: 1px solid rgba(103,228,214,.34); border-radius: 6px; background: rgba(17,61,68,.78); color: #e7f5f1; text-align: center; outline: 0; overflow-wrap: anywhere; }
.note-mind-map-center { justify-self: center; width: min(170px,70%); color: #fff0c8; border-color: rgba(242,190,114,.52); background: rgba(91,58,27,.56); }
.note-mind-map-branches { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding-top: 14px; }
.note-mind-map-branches::before { content: ""; position: absolute; top: 1px; left: 16.5%; right: 16.5%; height: 1px; background: rgba(103,228,214,.36); }
.note-mind-map-node::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 15px; background: rgba(103,228,214,.36); }

.note-mindmap-workspace { position: absolute; z-index: 8; inset: 0; display: grid; grid-template-rows: 44px minmax(0,1fr); overflow: hidden; background: rgba(3,15,22,.98); }
.note-mindmap-workspace[hidden] { display: none; }
.note-mindmap-workspace > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 8px 0 12px; border-bottom: 1px solid rgba(103,228,214,.16); background: rgba(8,29,38,.94); }
.note-mindmap-workspace > header strong { color: #d8e9e5; font-size: 12px; font-weight: 550; white-space: nowrap; }
.note-mindmap-tools { display: flex; align-items: center; gap: 4px; min-width: 0; }
.note-mindmap-tools button { display: inline-flex; height: 30px; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid rgba(145,207,218,.2); border-radius: 6px; background: rgba(4,19,28,.78); color: #a9c1bd; font-size: 9px; line-height: 1; cursor: pointer; }
.note-mindmap-tools button:hover,.note-mindmap-tools button:focus-visible,.note-mindmap-tools button[aria-pressed="true"] { border-color: rgba(103,228,214,.58); color: #effffc; outline: 0; }
.note-mindmap-tools button[aria-pressed="true"] { background: rgba(24,91,94,.52); }
.note-mindmap-tools button:disabled { opacity: .35; cursor: default; }
.note-mindmap-tools .note-mindmap-close { width: 30px; padding: 0; border-color: transparent; background: transparent; font-size: 17px; }
.note-mindmap-canvas { position: relative; min-height: 0; overflow: hidden; touch-action: none; background-color: rgba(2,12,18,.88); background-image: linear-gradient(rgba(103,228,214,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(103,228,214,.055) 1px,transparent 1px); background-size: 24px 24px; }
.note-mindmap-links,.note-mindmap-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
.note-mindmap-links { z-index: 1; overflow: visible; }
.note-mindmap-nodes { z-index: 2; pointer-events: none; }
.note-mindmap-link { fill: none; stroke: rgba(103,228,214,.52); stroke-width: 2; pointer-events: none; }
.note-mindmap-link-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.note-mindmap-link.is-selected { stroke: #c8b8ff; stroke-width: 3; }
.note-mindmap-node { position: absolute; display: grid; grid-template-columns: 24px minmax(0,1fr); width: clamp(106px,34%,150px); min-height: 40px; align-items: stretch; overflow: hidden; transform: translate(-50%,-50%); border: 1px solid rgba(103,228,214,.34); border-radius: 7px; background: rgba(14,52,61,.94); box-shadow: 0 8px 22px rgba(0,0,0,.24); pointer-events: auto; }
.note-mindmap-node.is-selected { border-color: #c8b8ff; box-shadow: 0 0 0 2px rgba(154,124,255,.16),0 10px 24px rgba(0,0,0,.28); }
.note-mindmap-node.is-link-source { border-color: #67e4d6; box-shadow: 0 0 0 2px rgba(103,228,214,.16),0 10px 24px rgba(0,0,0,.28); }
.note-mindmap-node-grip { width: 24px; min-width: 0; padding: 0; border: 0; border-right: 1px solid rgba(103,228,214,.16); background: rgba(3,19,27,.7); color: #6e9490; font-size: 16px; cursor: grab; touch-action: none; }
.note-mindmap-node-grip:active { cursor: grabbing; }
.note-mindmap-node input { width: 100%; min-width: 0; height: 38px; padding: 0 8px; border: 0; outline: 0; background: transparent; color: #e7f5f1; font: 10px/1.25 inherit; }
.note-mindmap-node input:focus { background: rgba(103,228,214,.06); }
.note-mindmap-empty { position: absolute; z-index: 3; top: 50%; left: 50%; min-height: 38px; transform: translate(-50%,-50%); padding: 0 14px; border: 1px dashed rgba(103,228,214,.38); border-radius: 7px; background: rgba(11,42,50,.7); color: #b8d0cc; font-size: 10px; cursor: pointer; }
.note-mindmap-empty[hidden] { display: none; }

.note-ai-panel { opacity: 1; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: absolute; z-index: 30; right: 14px; bottom: 58px; left: 14px; display: grid; grid-template-rows: 42px minmax(0,1fr); height: 360px; min-height: 150px; max-height: calc(100% - 88px); overflow: hidden; padding: 0; border: 1px solid rgba(154,124,255,.42); border-radius: 8px; background: #09101a !important; box-shadow: 0 18px 48px rgba(0,0,0,.44); }
.note-ai-panel[hidden] { display: none; }
.note-ai-panel.is-resizing { user-select: none; }
.note-ai-resize-handle { position: absolute; z-index: 4; top: -5px; right: 36px; left: 36px; height: 12px; cursor: ns-resize; touch-action: none; outline: 0; }
.note-ai-resize-handle::after { content:""; position: absolute; top: 5px; left: 50%; width: 58px; height: 3px; transform: translateX(-50%); border-radius: 3px; background: rgba(154,124,255,.42); transition: width .16s ease,background .16s ease; }
.note-ai-resize-handle:hover::after,.note-ai-resize-handle:focus-visible::after,.note-ai-panel.is-resizing .note-ai-resize-handle::after { width: 82px; background: #9a7cff; }
.note-ai-panel > header { display: flex; height: 42px; align-items: center; justify-content: space-between; margin: 0; padding: 0 8px 0 12px; border-bottom: 1px solid rgba(154,124,255,.16); }
.note-ai-brand { display: inline-flex; align-items: center; gap: 6px; }.note-ai-brand > i { color: #a891ff; font-size: 12px; font-style: normal; }.note-ai-brand > strong { color: #ddd6ff; font-size: 11px; font-weight: 600; }
.note-ai-panel > header > button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #829895; font-size: 17px; cursor: pointer; }
.note-ai-panel > [data-note-ai-body] { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 9px; min-height: 0; overflow: hidden; padding: 11px; }
.note-ai-conversation { display: grid; align-content: start; gap: 8px; min-height: 0; max-height: none; overflow: auto; padding-right: 2px; }
.note-ai-turn { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 7px; align-items: start; }.note-ai-turn > span { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border: 1px solid rgba(154,124,255,.32); border-radius: 50%; background: rgba(84,61,135,.3); color: #c9bdff; font-size: 9px; }
.note-ai-turn.is-user { grid-template-columns: minmax(0,1fr); justify-items: end; padding-left: 30px; }
.note-ai-message { max-width: 100%; padding: 9px 10px; border: 1px solid rgba(145,207,218,.12); border-radius: 7px; background: #102731; }
.note-ai-turn.is-user .note-ai-message { border-color: rgba(154,124,255,.2); background: #4f3980; }
.note-ai-message small,.note-quiz > span { display: block; margin-bottom: 4px; color: #a891ff; font: 8px "IBM Plex Mono",Consolas,monospace; letter-spacing: 0; }.note-ai-message p { margin: 0; color: #d6e3e0; font-size: 11px; line-height: 1.55; }
.note-ai-message button,.note-quiz button { display: inline-flex; min-height: 32px; align-items: center; gap: 4px; margin-top: 8px; padding: 0 10px; border: 1px solid rgba(154,124,255,.54); border-radius: 6px; background: #6d57b8; color: #fff; font-size: 9px; cursor: pointer; }
.note-ai-compose { display: grid; grid-template-columns: minmax(0,1fr) 34px; gap: 6px; padding-top: 9px; border-top: 1px solid rgba(154,124,255,.13); }.note-ai-compose input { width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid rgba(145,207,218,.18); border-radius: 6px; outline: 0; background: rgba(1,9,14,.82); color: #e8f3f0; font-size: 10px; }.note-ai-compose input:focus { border-color: rgba(154,124,255,.62); }.note-ai-compose button { width: 34px; height: 34px; border: 1px solid rgba(154,124,255,.58); border-radius: 6px; background: #6d57b8; color: #fff; font-size: 15px; cursor: pointer; }
.note-quiz { min-height: 0; overflow: auto; padding-right: 2px; }
.note-quiz-profile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid rgba(154,124,255,.14); }.note-quiz-profile span { color: #b7a8f4; font-size: 10px; font-weight: 650; }.note-quiz-profile small { color: #7e9692; font-size: 8px; text-align: right; }
.note-quiz-mastery { margin: 0 0 10px !important; padding: 9px 10px; border-left: 3px solid #67c98f; border-radius: 0 6px 6px 0; background: rgba(73,151,105,.12); color: #a8c8b5 !important; font-size: 10px !important; line-height: 1.55 !important; }.note-quiz-mastery b { display: block; margin-bottom: 3px; color: #79d99d; font-size: 11px; }
.note-quiz h2 { margin: 6px 0 9px; color: #ecf5f2; font-size: 15px; line-height: 1.45; font-weight: 550; }.note-quiz textarea { box-sizing: border-box; width: 100%; min-height: 72px; resize: vertical; padding: 10px; border: 1px solid rgba(103,228,214,.22); border-radius: 7px; outline: 0; background: rgba(1,9,14,.72); color: #e8f3f0; font: 12px/1.6 inherit; }.note-quiz textarea:focus { border-color: rgba(103,228,214,.62); }.note-quiz > div:not(.note-quiz-profile) { display: flex; gap: 7px; justify-content: flex-end; margin-top: 8px; }.note-quiz > p { min-height: 18px; margin: 7px 0 0; color: #d4a96e; font-size: 10px; line-height: 1.5; }.note-quiz > p.is-success { color: #7fe0a3; }.note-quiz button:disabled { opacity: .46; cursor: default; }

.note-toolbar { flex: 0 0 auto; display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; padding-top: 2px; }
.note-toolbar-assistant { display: grid; flex: 1 1 auto; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; width: 100%; min-width: 0; }
.note-toolbar-edit { display: flex; align-items: center; gap: 5px; min-width: 0; }
.note-toolbar-assistant button, .note-toolbar-edit > button, .note-toolbar-edit summary, .note-color-tool { display: inline-flex; box-sizing: border-box; height: 36px; min-height: 36px; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0 9px; border: 1px solid rgba(145,207,218,.2); border-radius: 7px; background: rgba(5,22,31,.76); color: #bcd1cd; font-size: 10px; line-height: 1; cursor: pointer; list-style: none; }
.note-toolbar-assistant button { width: 100%; min-width: 0; }
.note-toolbar-assistant button:hover, .note-toolbar-assistant button:focus-visible, .note-toolbar-edit > button:hover, .note-toolbar-edit > button:focus-visible, .note-toolbar-edit summary:hover, .note-toolbar-edit summary:focus-visible { border-color: rgba(103,228,214,.55); color: #effaf7; outline: 0; }
.note-toolbar-assistant button[aria-expanded="true"] { border-color: rgba(154,124,255,.62); color: #e0d9ff; background: rgba(79,57,128,.34); }
.note-toolbar-edit details[open] > summary,.note-toolbar-edit > button[aria-expanded="true"] { border-color: rgba(103,228,214,.62); color: #effffc; background: rgba(27,94,97,.4); }
.note-toolbar-assistant button > span { color: #9a7cff; font-size: 13px; }.note-toolbar-assistant button > b { font-weight: 500; white-space: nowrap; }
.note-toolbar-edit > details { position: relative; flex: 0 0 36px; width: 36px; height: 36px; margin: 0; }
.note-toolbar-edit summary { width: 36px; padding: 0; }
.note-font-menu > div, .note-underline-menu > div, .note-shape-menu > div { position: absolute; z-index: 20; right: 0; bottom: calc(100% + 8px); display: grid; gap: 7px; min-width: 154px; padding: 10px; border: 1px solid rgba(171,226,234,.28); border-radius: 8px; background: rgba(4,17,25,.98); box-shadow: 0 18px 48px rgba(0,0,0,.48); }
.note-panel-header .note-font-menu > div,.note-panel-header .note-underline-menu > div,.note-panel-header .note-shape-menu > div { top: calc(100% + 8px); right: 0; bottom: auto; }
.note-font-menu label, .note-underline-menu label, .note-shape-menu label { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 6px; color: #8fa7a3; font-size: 9px; }.note-font-menu select, .note-shape-menu select { min-width: 0; height: 31px; border: 1px solid rgba(103,228,214,.2); border-radius: 6px; background: rgba(1,9,14,.9); color: #dcebe8; font-size: 10px; }
.note-font-menu > div > button, .note-shape-menu > div > button { display: flex; min-height: 33px; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid rgba(145,207,218,.18); border-radius: 6px; background: rgba(8,29,38,.72); color: #c6d9d5; font-size: 10px; cursor: pointer; }.note-shape-menu > div > button.is-active { border-color: #67e4d6; color: #effffc; background: rgba(27,94,97,.42); }
.note-underline-menu > summary > span { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }.note-underline-menu > div { width: 224px; }.note-underline-menu fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }.note-underline-menu legend { margin-bottom: 6px; color: #8fa7a3; font-size: 9px; }.note-underline-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }.note-underline-options button { min-width: 0; height: 32px; padding: 0 4px; border: 1px solid rgba(145,207,218,.18); border-radius: 6px; background: rgba(8,29,38,.72); color: #c6d9d5; font-size: 9px; cursor: pointer; }.note-underline-options button[aria-pressed="true"] { border-color: rgba(103,228,214,.62); background: rgba(27,94,97,.42); color: #effffc; }.note-underline-options span { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 3px; }.note-underline-options .is-wave { text-decoration-style: wavy; }.note-underline-options .is-solid { text-decoration-style: solid; }.note-underline-options .is-double { text-decoration-style: double; }.note-underline-menu input[type="color"] { width: 100%; height: 31px; padding: 2px; border: 1px solid rgba(103,228,214,.2); border-radius: 6px; background: rgba(1,9,14,.9); cursor: pointer; }.note-underline-width { grid-template-columns: 38px minmax(0,1fr) 34px !important; }.note-underline-width input { width: 100%; accent-color: #67e4d6; }.note-underline-width output { color: #b9cfca; font-size: 8px; text-align: right; }.note-underline-menu .note-underline-apply { min-height: 34px; border: 1px solid rgba(103,228,214,.46); border-radius: 6px; background: rgba(27,94,97,.46); color: #effffc; font-size: 10px; cursor: pointer; }
.note-toolbar-edit .note-color-tool { position: relative; display: inline-flex; width: 36px; margin: 0; padding: 0; overflow: hidden; }.note-color-tool input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }.note-color-tool > span { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--note-tool-color,#287f7f); box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.note-toolbar-edit .note-icon-button { min-width: 36px; padding: 0 7px; }
.note-save-state { display: inline-flex; box-sizing: border-box; height: 36px; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0 2px; color: #6f8985; font-size: 8px; line-height: 1; white-space: nowrap; }.note-save-state i { width: 6px; height: 6px; border-radius: 50%; background: #67e4d6; box-shadow: 0 0 7px rgba(103,228,214,.7); }.note-save-state b { font-weight: 400; }

.note-summary-document { position: relative; margin: 18px 0; padding: 18px 18px 16px; border: 1px solid rgba(83,181,174,.32); border-left: 3px solid #287f7f; border-radius: 8px; background: linear-gradient(145deg,rgba(20,74,75,.17),rgba(7,28,36,.64)); box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.note-summary-remove { position: absolute; top: 10px; right: 10px; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(145,207,218,.25); border-radius: 50%; background: rgba(4,17,25,.7); color: #9bb1ad; font-size: 18px; cursor: pointer; }
.note-summary-remove:hover,.note-summary-remove:focus-visible { border-color: rgba(201,110,110,.68); color: #e6a0a0; outline: 0; }
.note-summary-kicker { display: block; padding-right: 32px; color: #69cfc4; font-size: 10px; font-weight: 650; }
.note-summary-document > strong { display: block; margin-top: 6px; padding-right: 32px; color: #edf7f4; font-size: 20px; line-height: 1.35; }
.note-summary-meta { display: block; margin-top: 7px; color: #7f9995; font-size: 9px; }
.note-summary-section { margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(145,207,218,.13); }
.note-summary-section > strong { display: block; margin-bottom: 6px; color: #a9d4ce; font-size: 11px; }
.note-summary-section p,.note-summary-section ul { margin: 0; color: #cbdad7; font-size: 12px; line-height: 1.75; }
.note-summary-section ul { padding-left: 18px; }.note-summary-section li + li { margin-top: 4px; }
.note-summary-next { margin-right: -2px; margin-left: -2px; padding: 12px; border: 1px solid rgba(154,124,255,.2); border-radius: 7px; background: rgba(78,55,126,.16); }.note-summary-next > strong { color: #c5b7f4; }

.reading-soft .source-material-dock { border-top-color: rgba(65,121,122,.2); }.reading-soft .source-material-dock button { border-color: rgba(54,111,116,.22); background: rgba(249,252,249,.74); color: #345b58; }.reading-soft .source-material-dock button > span { border-color: rgba(40,127,127,.35); color: #287f7f; }
.reading-soft .clip-to-note { border-color: #287f7f; background: #287f7f; color: #fff; box-shadow: 0 6px 16px rgba(40,127,127,.2); }.reading-soft .clip-to-note:hover { border-color: #205f5f; background: #205f5f; }.reading-soft .clip-to-note:focus-visible { outline-color: #205f5f; }.reading-soft .clip-to-note.is-saved { border-color: #245f53; background: #245f53; color: #fff; }
.reading-soft .note-source-block.is-located { border-left-color: #9a641d; background: #fff1c8; box-shadow: 0 0 0 3px rgba(154,100,29,.18); }

@media (prefers-reduced-motion: reduce) { .note-source-block.is-located { animation: none; } }
.reading-soft .today-learning-context { border-color: rgba(154,100,29,.44); background: rgba(255,252,242,.88); box-shadow: inset 0 1px rgba(255,255,255,.9),0 12px 28px rgba(57,73,66,.1); }.reading-soft .today-learning-signal { border-color: rgba(154,100,29,.42); background: rgba(154,100,29,.08); color: #9a641d; }.reading-soft .today-learning-copy > span { color: #9a641d; }.reading-soft .today-learning-copy h2 { color: #263f3c; }.reading-soft .today-learning-copy p { color: #5c716e; }.reading-soft .today-learning-domain { border-color: rgba(40,127,127,.3); color: #287f7f; }.reading-soft .today-learning-context-grid { border-top-color: rgba(154,100,29,.22); }.reading-soft .today-learning-context-grid > div { border-left-color: rgba(154,100,29,.18); }.reading-soft .today-learning-context-grid dt { color: #70817e; }.reading-soft .today-learning-context-grid dd { color: #344e4b; }.reading-soft .today-learning-boundary { background: rgba(207,142,50,.09); color: #785f3c; }
.reading-soft .note-panel-header h1 { color: #244348; }.reading-soft .note-board { border-color: rgba(54,111,116,.25); background: rgba(252,253,249,.84); box-shadow: inset 0 1px rgba(255,255,255,.94); }.reading-soft .note-editor { color: #244348; }.reading-soft .note-editor:empty::before { color: #82928f; }.reading-soft .note-source-block { background: rgba(211,235,230,.62); }.reading-soft .note-source-block cite { color: #617a76; }.reading-soft .note-ai-entry { background: rgba(230,224,245,.66); }.reading-soft .note-summary-document { border-color: rgba(40,127,127,.28); border-left-color: #287f7f; background: linear-gradient(145deg,rgba(225,241,236,.78),rgba(244,248,244,.94)); box-shadow: 0 12px 26px rgba(53,76,70,.1); }.reading-soft .note-summary-remove { border-color: rgba(54,111,116,.22); background: rgba(250,252,249,.85); color: #6b817d; }.reading-soft .note-summary-kicker { color: #287f7f; }.reading-soft .note-summary-document > strong { color: #294b48; }.reading-soft .note-summary-meta { color: #71847f; }.reading-soft .note-summary-section { border-top-color: rgba(54,111,116,.14); }.reading-soft .note-summary-section > strong { color: #456966; }.reading-soft .note-summary-section p,.reading-soft .note-summary-section ul { color: #405c58; }.reading-soft .note-summary-next { border-color: rgba(105,84,165,.18); background: rgba(230,224,245,.58); }.reading-soft .note-summary-next > strong { color: #6753a5; }.reading-soft .note-mind-map { border-color: rgba(54,111,116,.24); background: rgba(241,248,245,.82); }.reading-soft .note-mind-map-center { color: #76551f; background: rgba(249,231,191,.78); }.reading-soft .note-mind-map-node { color: #315451; background: rgba(225,240,236,.88); }.reading-soft .note-ai-panel { border-color: rgba(105,84,165,.3); background: rgba(250,250,246,.98); }.reading-soft .note-ai-message p, .reading-soft .note-quiz h2 { color: #344f4b; }.reading-soft .note-quiz textarea { border-color: rgba(54,111,116,.24); background: rgba(246,250,247,.92); color: #244348; }
.reading-soft .note-toolbar-assistant button, .reading-soft .note-toolbar-edit > button, .reading-soft .note-toolbar-edit summary, .reading-soft .note-color-tool { border-color: rgba(54,111,116,.22); background: rgba(248,251,247,.78); color: #456764; }.reading-soft .note-font-menu > div, .reading-soft .note-underline-menu > div, .reading-soft .note-shape-menu > div { border-color: rgba(54,111,116,.24); background: rgba(250,252,249,.98); }.reading-soft .note-font-menu select, .reading-soft .note-shape-menu select { border-color: rgba(54,111,116,.2); background: #f2f7f3; color: #355653; }.reading-soft .note-font-menu > div > button, .reading-soft .note-shape-menu > div > button { border-color: rgba(54,111,116,.18); background: rgba(229,240,236,.76); color: #3e615e; }.reading-soft .note-underline-options button { border-color: rgba(54,111,116,.18); background: rgba(229,240,236,.76); color: #3e615e; }.reading-soft .note-underline-options button[aria-pressed="true"] { border-color: rgba(40,127,127,.5); background: rgba(40,127,127,.12); color: #245f5c; }.reading-soft .note-underline-menu input[type="color"] { border-color: rgba(54,111,116,.2); background: #f2f7f3; }.reading-soft .note-underline-width output { color: #5c7773; }.reading-soft .note-underline-menu .note-underline-apply { border-color: #287f7f; background: #287f7f; color: #fff; }
.reading-soft .note-toolbar-edit details[open] > summary,.reading-soft .note-toolbar-edit > button[aria-expanded="true"] { border-color: rgba(40,127,127,.5); color: #245f5c; background: rgba(40,127,127,.12); }
.reading-soft .note-mindmap-workspace { background: rgba(250,252,249,.99); }.reading-soft .note-mindmap-workspace > header { border-bottom-color: rgba(54,111,116,.18); background: rgba(239,246,242,.98); }.reading-soft .note-mindmap-workspace > header strong { color: #274946; }.reading-soft .note-mindmap-tools button { border-color: rgba(54,111,116,.22); background: rgba(250,252,249,.92); color: #466966; }.reading-soft .note-mindmap-tools button[aria-pressed="true"] { border-color: rgba(40,127,127,.55); background: rgba(40,127,127,.12); color: #245f5c; }.reading-soft .note-mindmap-canvas { background-color: #f7faf7; background-image: linear-gradient(rgba(40,127,127,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(40,127,127,.07) 1px,transparent 1px); }.reading-soft .note-mindmap-node { border-color: rgba(40,127,127,.3); background: rgba(228,241,236,.98); box-shadow: 0 8px 22px rgba(48,75,69,.13); }.reading-soft .note-mindmap-node input { color: #294c49; }.reading-soft .note-mindmap-node-grip { border-right-color: rgba(40,127,127,.18); background: rgba(213,233,227,.82); color: #64807c; }.reading-soft .note-mindmap-link { stroke: rgba(40,127,127,.55); }.reading-soft .note-mindmap-empty { border-color: rgba(40,127,127,.36); background: rgba(236,246,241,.92); color: #3e625e; }
.reading-soft .note-ai-panel { border-color: rgba(105,84,165,.34); background: rgba(252,252,249,.995); box-shadow: 0 18px 42px rgba(58,69,66,.2); }.reading-soft .note-ai-panel > header { border-bottom-color: rgba(105,84,165,.14); }.reading-soft .note-ai-resize-handle::after { background: rgba(105,84,165,.34); }.reading-soft .note-ai-brand > strong { color: #5e4b9a; }.reading-soft .note-ai-brand > small { color: #756b96; }.reading-soft .note-ai-message { border-color: rgba(54,111,116,.16); background: rgba(235,244,240,.9); }.reading-soft .note-ai-turn.is-user .note-ai-message { border-color: rgba(105,84,165,.18); background: rgba(235,229,248,.9); }.reading-soft .note-ai-message p,.reading-soft .note-quiz h2 { color: #294b48; }.reading-soft .note-ai-compose { border-top-color: rgba(105,84,165,.14); }.reading-soft .note-ai-compose input { border-color: rgba(54,111,116,.22); background: #f7faf7; color: #294b48; }.reading-soft .note-quiz-profile { border-bottom-color: rgba(105,84,165,.14); }.reading-soft .note-quiz-profile span { color: #6753a5; }.reading-soft .note-quiz-mastery { background: rgba(73,151,105,.09); color: #587263 !important; }

@media (max-width: 1180px) {
  .note-toolbar { align-items: stretch; flex-direction: column; }.note-toolbar-assistant, .note-toolbar-edit { justify-content: space-between; }.note-toolbar-assistant button { flex: 1 1 0; }.note-save-state { margin-left: auto; }
}

@media (max-width: 900px) {
  .today-learning-context-grid { grid-template-columns: 1fr; }.today-learning-context-grid > div { padding: 8px 0; border-left: 0; border-top: 1px solid rgba(242,190,114,.14); }.today-learning-context-grid > div:first-child { border-top: 0; }
  .workspace-mode .learning-notes { min-height: 720px; overflow: visible; }.note-board { min-height: 520px; }.note-ai-panel { max-height: calc(100% - 88px); }
}

@media (max-width: 520px) {
  .today-learning-context { grid-template-columns: 36px minmax(0,1fr); padding: 13px; }.today-learning-signal { width: 36px; height: 36px; }.today-learning-copy h2 { font-size: 18px; }.today-learning-domain { grid-column: 2; justify-self: start; max-width: none; text-align: left; }.today-learning-context-grid, .today-learning-boundary { grid-column: 1/-1; }
  .source-material-dock button { min-height: 56px; }.workspace-mode .learning-notes { min-height: 680px; padding: 13px; }.note-board { min-height: 470px; }.note-editor { padding: 14px; }.note-panel-header { flex-wrap: wrap; }.note-panel-header .note-toolbar-edit { flex: 1 1 100%; justify-content: flex-end; margin-top: 6px; }.note-panel-header .note-font-menu > div,.note-panel-header .note-underline-menu > div { right: auto; left: 0; }.note-save-state { margin-left: 0; }.note-mind-map-branches { grid-template-columns: 1fr; }.note-mind-map-branches::before, .note-mind-map-node::before { display: none; }
}

/* Source library and unified learning reader. */
.source-library-header { margin-bottom: 10px !important; }
.source-library-header h1 { margin: 0; }
.source-library-tools { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; width: 100%; min-width: 0; margin-bottom: 12px; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.source-library-tools label { display: flex; min-width: 0; height: 36px; align-items: center; gap: 6px; overflow: hidden; padding: 0 9px; border: 1px solid rgba(105,184,204,.2); border-radius: 7px; background: rgba(3,17,24,.58); color: #75918d; }
.source-library-tools input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #dce9e6; font-size: 10px; }
.source-library-tools input::placeholder { color: #718985; }
.source-library-tools > button { display: inline-flex; max-width: 100%; height: 36px; flex: 0 0 auto; align-items: center; gap: 4px; padding: 0 9px; border: 1px solid rgba(105,184,204,.2); border-radius: 7px; background: rgba(3,17,24,.58); color: #9ab2ae; font-size: 10px; cursor: pointer; }
.source-library-tools > button[aria-pressed="true"] { border-color: rgba(242,190,114,.58); background: rgba(118,76,27,.22); color: #f2be72; }
.source-list-empty { margin: 18px 0; color: #829b97; font-size: 11px; text-align: center; }
.source-list { position: relative; align-content: start; padding-left: 54px; }
.source-list::before { content:""; position: absolute; top: 8px; bottom: 8px; left: 44px; width: 1px; background: linear-gradient(180deg,transparent,rgba(103,228,214,.38) 4%,rgba(103,228,214,.2) 96%,transparent); }
.learning-source-card { --source-color:#6f9aa3; --source-soft:rgba(111,154,163,.13); position: relative; overflow: visible; border-left: 3px solid var(--source-color); border-radius: 8px; background: rgba(5,21,29,.66); cursor: pointer; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.learning-source-card:hover { border-color: color-mix(in srgb,var(--source-color) 72%,transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--source-color) 22%,transparent),0 8px 20px rgba(24,67,65,.08); transform: translateY(-1px); }
.learning-source-card:has(textarea:focus) { transform: none; }
.learning-source-card::before { content:""; position: absolute; top: 17px; left: -14px; width: 8px; height: 8px; border: 2px solid color-mix(in srgb,var(--source-color) 70%,white); border-radius: 50%; background: #071820; box-shadow: 0 0 0 3px color-mix(in srgb,var(--source-color) 12%,transparent),0 0 12px color-mix(in srgb,var(--source-color) 46%,transparent); }
.source-timeline-stamp { position: absolute; top: 8px; left: -58px; display: grid; width: 40px; gap: 2px; color: #b4c8c4; font: 11px/1.1 "IBM Plex Mono",Consolas,monospace; font-weight: 700; text-align: right; }
.source-timeline-stamp span,.source-timeline-stamp b { display: block; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.source-timeline-stamp b { color: #829995; font-size: 8px; font-weight: 500; }
.source-type-all { --source-color:#67b8c7; --source-soft:rgba(103,184,199,.14); }
.source-type-web { --source-color:#2aa6b8; --source-soft:rgba(42,166,184,.14); }
.source-type-video { --source-color:#d45b6b; --source-soft:rgba(212,91,107,.14); }
.source-type-pdf { --source-color:#e47454; --source-soft:rgba(228,116,84,.14); }
.source-type-document { --source-color:#5b83d8; --source-soft:rgba(91,131,216,.14); }
.source-type-image { --source-color:#d2a443; --source-soft:rgba(210,164,67,.14); }
.source-type-text { --source-color:#42a679; --source-soft:rgba(66,166,121,.14); }
.source-type-audio { --source-color:#9874d8; --source-soft:rgba(152,116,216,.14); }
.learning-source-card.is-active { border-color: var(--source-color); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--source-color) 28%,transparent); }
.source-card-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 9px 5px; }
.source-type-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--source-color); font-size: 9px; font-weight: 650; }
.source-type-badge i,.material-tabs button span i,.material-viewer-type i { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border: 1px solid color-mix(in srgb,var(--source-color) 55%,transparent); border-radius: 5px; background: var(--source-soft); font-size: 8px; font-style: normal; }
.source-favorite { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #819995; font-size: 17px; cursor: pointer; }
.source-favorite[aria-pressed="true"] { color: #d8aa48; }
.source-card-thumbnail { display: block; width: calc(100% - 18px); height: 72px; margin: 0 9px 7px; border: 1px solid color-mix(in srgb,var(--source-color) 25%,transparent); border-radius: 6px; object-fit: cover; object-position: center; }
.source-card-title { display: grid; gap: 3px; padding: 4px 10px 7px; }
.source-card-title b { overflow-wrap: anywhere; color: #e2ece9; font-size: 12px; line-height: 1.35; }
.source-card-title span { overflow: hidden; color: #839c98; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.source-card-summary { display: grid; gap: 4px; padding: 0 10px 8px; color: #78918d; font-size: 8px; }
.source-card-summary textarea { box-sizing: border-box; width: 100%; min-height: 48px; resize: vertical; padding: 7px 8px; border: 1px solid color-mix(in srgb,var(--source-color) 20%,transparent); border-radius: 6px; outline: 0; background: var(--source-soft); color: #bfd0cc; font: 10px/1.45 "Microsoft YaHei",sans-serif; }
.source-card-summary textarea:focus { border-color: var(--source-color); color: #edf5f2; }
.learning-source-card > footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 7px; padding: 8px 9px; border-top: 1px solid rgba(151,202,210,.12); }
.learning-source-card > footer div { display: grid; gap: 3px; min-width: 0; }
.learning-source-card > footer span,.learning-source-card > footer small { overflow: hidden; color: #79918e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.source-card-actions { display: flex !important; align-items: center; gap: 5px; }
.learning-source-card > footer button { min-width: 54px; height: 30px; border: 1px solid var(--source-color); border-radius: 6px; background: var(--source-soft); color: var(--source-color); font-size: 9px; cursor: pointer; }
.learning-source-card > footer button[aria-pressed="true"] { border-color: transparent; background: rgba(117,137,136,.16); color: #8ca29f; }
.learning-source-card > footer .source-remove { min-width: 42px; border-color: rgba(210,112,124,.5); background: rgba(112,36,51,.2); color: #e7a1a9; }
.learning-source-card > footer .source-remove:hover,.learning-source-card > footer .source-remove:focus-visible { border-color: rgba(244,151,160,.9); background: rgba(132,45,61,.36); color: #ffe8eb; outline: 2px solid rgba(244,151,160,.2); outline-offset: 2px; }

.learning-timeline-layout { width: min(980px,100%); margin: 0 auto; }
.learning-material-flow { min-width: 0; }
.material-filter-bar { position: sticky; z-index: 10; top: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; width: 100%; margin-bottom: 18px; padding: 8px; border: 1px solid rgba(105,184,204,.24); border-radius: 8px; background: rgba(6,24,33,.9); box-shadow: 0 12px 30px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(18px); }
.material-filter-bar button { --source-color:#6f9aa3; --source-soft:rgba(111,154,163,.13); display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 1px solid rgba(105,184,204,.16); border-radius: 6px; background: rgba(3,14,22,.54); color: #91aaa6; cursor: pointer; white-space: nowrap; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.material-filter-bar button span { color: currentColor; font-size: 10px; }
.material-filter-bar button b { color: #c6d6d2; font-size: 11px; font-weight: 650; }
.material-filter-bar button:hover,.material-filter-bar button:focus-visible { border-color: color-mix(in srgb,var(--source-color) 58%,transparent); color: #e8f3f0; }
.material-filter-bar button[aria-pressed="true"] { border-color: color-mix(in srgb,var(--source-color) 72%,transparent); background: var(--source-soft); color: var(--source-color); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--source-color) 20%,transparent); }
.material-filter-bar button[aria-pressed="true"] b { color: #edf6f3; }
.material-timeline-feed { position: relative; display: grid; gap: 24px; min-width: 0; }
.material-timeline-feed::before { content:""; position: absolute; top: 13px; bottom: 13px; left: 52px; width: 1px; background: linear-gradient(180deg,transparent,rgba(103,228,214,.48) 3%,rgba(103,228,214,.2) 97%,transparent); }
.material-timeline-entry { --source-color:#6f9aa3; position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; min-width: 0; }
.material-timeline-entry[hidden] { display: none; }
.material-timeline-entry::before { content:""; position: absolute; z-index: 2; top: 14px; left: 47px; width: 10px; height: 10px; border: 2px solid color-mix(in srgb,var(--source-color) 72%,white); border-radius: 50%; background: #071820; box-shadow: 0 0 0 4px color-mix(in srgb,var(--source-color) 13%,transparent),0 0 14px color-mix(in srgb,var(--source-color) 45%,transparent); }
.material-entry-timestamp { display: grid; align-content: start; gap: 2px; padding-top: 8px; color: #b4c8c4; font: 700 12px/1.1 "IBM Plex Mono",Consolas,monospace; text-align: right; }
.material-entry-timestamp span,.material-entry-timestamp b { display: block; white-space: nowrap; }
.material-entry-timestamp b { color: #829995; font-size: 8px; font-weight: 500; }
.material-timeline-content { min-width: 0; }
.material-filter-empty { margin: 42px 0; color: #829b97; font-size: 12px; text-align: center; }
.material-stage { width: min(900px,100%); }
.material-viewer { --source-color:#6f9aa3; --source-soft:rgba(111,154,163,.13); border-radius: 8px; border-top: 3px solid var(--source-color); }
.material-viewer.is-web { --source-color:#2aa6b8; --source-soft:rgba(42,166,184,.14); }
.material-viewer.is-video { --source-color:#d45b6b; --source-soft:rgba(212,91,107,.14); }
.material-viewer.is-pdf { --source-color:#e47454; --source-soft:rgba(228,116,84,.14); }
.material-viewer.is-document { --source-color:#5b83d8; --source-soft:rgba(91,131,216,.14); }
.material-viewer.is-image { --source-color:#d2a443; --source-soft:rgba(210,164,67,.14); }
.material-viewer.is-text { --source-color:#42a679; --source-soft:rgba(66,166,121,.14); }
.material-viewer > header { align-items: center; }
.material-viewer > header > div { min-width: 0; }
.material-viewer > header h2 { overflow-wrap: anywhere; }
.material-viewer > header small { display: block; margin-top: 4px; color: #829b97; font-size: 9px; }
.material-viewer > header time { flex: 0 0 auto; color: #7f9995; font-size: 8px; }
.material-viewer-type { display: inline-flex !important; align-items: center; gap: 5px; color: var(--source-color) !important; }
.material-summary-editor { display: grid; grid-template-columns: 74px minmax(0,1fr); align-items: center; gap: 8px; margin: 12px 15px 0; color: #819a96; font-size: 9px; }
.material-summary-editor textarea { min-width: 0; min-height: 48px; height: 48px; max-height: 88px; resize: vertical; padding: 8px 10px; border: 1px solid color-mix(in srgb,var(--source-color) 28%,transparent); border-radius: 6px; outline: 0; background: var(--source-soft); color: #d5e2df; font: 11px/1.5 "Microsoft YaHei",sans-serif; }
.material-summary-editor textarea:focus { border-color: var(--source-color); }
.material-body { padding: 15px; }
.material-web-reader { overflow: hidden; border: 1px solid rgba(97,193,208,.24); border-radius: 7px; background: rgba(234,242,239,.96); color: #244348; }
.material-web-reader > header { display: grid; grid-template-columns: 7px 7px 7px minmax(0,1fr) auto; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid rgba(44,112,121,.18); background: #dfe9e6; }
.material-web-reader > header i { width: 7px; height: 7px; border-radius: 50%; background: #7a9995; }.material-web-reader > header i:first-child { background:#d45b6b; }.material-web-reader > header i:nth-child(2) { background:#d2a443; }.material-web-reader > header i:nth-child(3) { background:#42a679; }
.material-web-reader > header b { overflow: hidden; margin-left: 6px; color: #526d69; font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.material-web-reader > header a { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid rgba(40,127,127,.38); border-radius: 5px; background: rgba(40,127,127,.12); color: #176c70; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .18s ease,border-color .18s ease,color .18s ease; }
.material-web-reader > header a:hover,.material-web-reader > header a:focus-visible { border-color: #287f7f; background: #287f7f; color: #fff; outline: 0; }
.material-web-reader article { padding: 26px clamp(18px,7%,54px); }
.material-web-reader article span { color: #287f7f; font-size: 9px; }.material-web-reader article h3 { margin: 8px 0 14px; font-size: 25px; }.material-web-reader article p { color: #48615d; font-size: 14px; line-height: 1.8; }.material-web-reader blockquote { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid #2aa6b8; background: rgba(42,166,184,.09); color: #36534f; font-size: 12px; line-height: 1.65; }
.material-media-frame,.material-image-frame { position: relative; margin: 0; text-align: center; }
.material-media-frame > span,.material-image-frame figcaption { display: block; margin-top: 8px; color: #849c98; font-size: 9px; text-align: left; }
.material-video { width: 100%; aspect-ratio: 16/9; max-height: 430px; background: #020608; object-fit: contain; }
.material-embed-frame { overflow: hidden; border-radius: 10px; background: #020608; }
.material-embed-frame iframe { display: block; width: 100%; aspect-ratio: 16/9; min-height: 280px; border: 0; background: #020608; }
.material-embed-frame > span { display: block; padding: 8px 2px 0; color: #849c98; font-size: 9px; text-align: left; }
.material-embed-frame a,.material-video-pending a { color: #9de6dc; text-decoration: none; }
.material-video-pending { min-height: 180px; display: grid; align-content: center; gap: 8px; padding: 24px; border: 1px solid rgba(105,184,204,.18); border-radius: 10px; background: rgba(2,12,18,.64); }
.material-video-pending span { color: var(--learn-cyan); font: 10px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }
.material-video-pending h3,.material-video-pending p { margin: 0; }.material-video-pending p { color: #9cb2af; font-size: 12px; }.material-video-pending a { width: fit-content; font-size: 12px; }
.material-image { width: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.material-pdf-reader { display: grid; gap: 10px; padding: 10px; background: #273033; }
.material-pdf-reader > header { display: flex; justify-content: space-between; color: #aebbb8; font-size: 9px; }
.material-pdf-reader article { box-sizing: border-box; width: min(620px,100%); min-height: 430px; margin: 0 auto; padding: 42px clamp(24px,8%,62px) 24px; background: #fbfbf7; color: #233a37; box-shadow: 0 8px 30px rgba(0,0,0,.32); text-align: left; }
.material-pdf-reader article small { color: #758984; font-size: 9px; }.material-pdf-reader article h3 { margin: 12px 0 24px; font-family: Georgia,"Times New Roman",serif; font-size: 25px; line-height: 1.25; }.material-pdf-reader article p { font-size: 13px; line-height: 1.85; }.material-pdf-reader article blockquote { margin: 22px 0; padding: 12px; border-left: 3px solid #e47454; background: #f6ebe5; font-size: 11px; line-height: 1.7; }.material-pdf-reader article footer { margin-top: 50px; color: #889894; font-size: 9px; text-align: center; }
.material-document { min-height: 320px; padding: 34px clamp(20px,7%,54px); border: 1px solid rgba(91,131,216,.18); border-radius: 6px; background: rgba(239,244,242,.96); color: #294642; }
.material-document h3 { margin: 0 0 22px; color: #263f3c; font-size: 23px; }.material-document p { margin: 0; font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }.material-document footer { margin-top: 34px; color: #526b65; font-size: 12px; }
.reading-size-large .material-document p { font-size: 18px; }
.reading-size-xlarge .material-document p { font-size: 20px; }
.material-viewer > .clip-note-actions { margin: 0 15px 15px; }

.reading-soft .source-library-tools label,.reading-soft .source-library-tools > button { border-color: rgba(54,111,116,.22); background: rgba(248,251,247,.78); }.reading-soft .source-library-tools input { color: #294c49; }
.reading-soft .learning-source-card { background: rgba(248,252,249,.72); }.reading-soft .source-card-title b,.reading-soft .source-card-summary textarea { color: #294c49; }.reading-soft .source-card-title span,.reading-soft .source-card-summary,.reading-soft .learning-source-card > footer span,.reading-soft .learning-source-card > footer small { color: #657e79; }.reading-soft .source-card-summary textarea { background: color-mix(in srgb,var(--source-color) 9%,#f8fbf8); }
.reading-soft .source-list::before,.reading-soft .material-timeline-feed::before { background: linear-gradient(180deg,transparent,rgba(40,127,127,.55) 5%,rgba(40,127,127,.28) 95%,transparent); }.reading-soft .learning-source-card::before,.reading-soft .material-timeline-entry::before { background: #f5faf7; }.reading-soft .source-timeline-stamp,.reading-soft .material-entry-timestamp { color: #294f4b; }.reading-soft .source-timeline-stamp b,.reading-soft .material-entry-timestamp b { color: #647f79; }
.reading-soft .material-filter-bar { border-color: rgba(54,111,116,.24); background: rgba(248,251,247,.9); box-shadow: 0 12px 26px rgba(47,78,76,.1),inset 0 1px rgba(255,255,255,.8); }.reading-soft .material-filter-bar button { border-color: rgba(54,111,116,.18); background: rgba(229,240,236,.72); color: #52716d; }.reading-soft .material-filter-bar button b { color: #3d5d59; }.reading-soft .material-filter-bar button[aria-pressed="true"] { background: color-mix(in srgb,var(--source-color) 13%,#f7faf7); color: color-mix(in srgb,var(--source-color) 78%,#244348); }.reading-soft .material-filter-bar button[aria-pressed="true"] b { color: #244348; }
.reading-soft .material-summary-editor textarea { background: color-mix(in srgb,var(--source-color) 8%,#f8fbf8); color: #294c49; }.reading-soft .material-viewer > header small,.reading-soft .material-viewer > header time { color: #647d78; }

@media (max-width: 520px) {
  .source-library-tools { grid-template-columns: minmax(0,1fr) 76px; }
  .source-list { padding-left: 48px; }
  .source-list::before { left: 39px; }
  .source-timeline-stamp { left: -50px; width: 34px; font-size: 10px; }.source-timeline-stamp b { font-size: 7px; }
  .learning-source-card::before { left: -13px; }
  .source-card-thumbnail { height: 110px; }
  .material-filter-bar { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; padding: 5px; }
  .material-filter-bar button { min-height: 44px; flex-direction: column; gap: 2px; padding: 3px 2px; }.material-filter-bar button span { font-size: 8px; }.material-filter-bar button b { font-size: 9px; }
  .material-timeline-feed::before { left: 43px; }
  .material-timeline-entry { grid-template-columns: 45px minmax(0,1fr); gap: 9px; }.material-timeline-entry::before { left: 38px; }
  .material-entry-timestamp { padding-top: 9px; font-size: 10px; }.material-entry-timestamp b { font-size: 7px; }
  .material-summary-editor { grid-template-columns: 1fr; }
  .material-viewer > header { align-items: flex-start; flex-direction: column; }.material-viewer > header time { white-space: normal; }
  .material-web-reader > header { grid-template-columns: 7px 7px 7px minmax(0,1fr); }.material-web-reader > header a { grid-column: 1/-1; justify-self: end; }
  .material-pdf-reader article { min-height: 360px; padding: 30px 20px 20px; }.material-pdf-reader article h3 { font-size: 20px; }
}

@media (max-width: 900px) {
  .source-list { grid-template-columns: 1fr; }
}

/* Fixed source controls, aligned panel headings, AI source discovery, and note-to-source tracing. */
.workspace-mode .learning-sources { overflow: hidden; padding: 16px; }
.source-library-header,.note-panel-header { box-sizing: border-box; min-height: 32px; flex: 0 0 32px; align-items: center !important; margin: 0 0 10px !important; }
.source-library-header h1,.note-panel-header h1 { margin: 0; color: #edf7f4; font-size: 20px !important; line-height: 1.2; font-weight: 550; }
.source-library-header { display: flex; justify-content: space-between; gap: 8px; }
.source-ai-discovery-button { display: inline-flex; min-width: 0; height: 32px; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(40,127,127,.38); border-radius: 6px; background: rgba(40,127,127,.1); color: #4d7773; font-size: 9px; cursor: pointer; white-space: nowrap; }
.source-ai-discovery-button span { color: #287f7f !important; font-size: 11px !important; letter-spacing: 0 !important; }
.source-ai-discovery-button:hover,.source-ai-discovery-button:focus-visible { border-color: rgba(40,127,127,.68); background: rgba(40,127,127,.17); color: #244f4b; }
.source-library-tools { position: relative; z-index: 6; flex: 0 0 auto; margin-bottom: 10px; }
.workspace-mode .learning-sources > .source-list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-top: 3px; padding-right: 5px; scrollbar-width: thin; }
.source-material-dock { position: relative; z-index: 7; flex: 0 0 auto; margin-top: 10px; padding-top: 11px; background: linear-gradient(180deg,rgba(3,16,23,0),rgba(3,16,23,.96) 24%); }

.material-timeline-feed::before { left: 69px; }
.material-timeline-entry { grid-template-columns: 72px minmax(0,1fr); }
.material-timeline-entry::before { left: 64px; }
.material-entry-timestamp { align-self: start; padding-right: 24px; }
.material-timeline-entry.is-traced-from-note .material-viewer,.material-timeline-entry.is-traced-from-source .material-viewer { animation: traced-material 2.2s ease-out; }
@keyframes traced-material { 0%,28% { border-color: #9a641d; box-shadow: 0 0 0 4px rgba(154,100,29,.2),0 18px 36px rgba(94,64,26,.16); } 100% { box-shadow: inset 0 1px rgba(255,255,255,.06); } }

.note-source-block[data-note-source-id] { position: relative; padding-right: 66px; border-left-color: #287f7f; cursor: pointer; transition: border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.note-source-block[data-note-source-id]::after { content:"↗"; position: absolute; top: 10px; right: 41px; color: #287f7f; font-size: 14px; }
.note-source-block[data-note-source-id]:hover,.note-source-block[data-note-source-id]:focus-visible { border-left-color: #9a641d; outline: 0; background: rgba(40,127,127,.13); box-shadow: 0 0 0 2px rgba(40,127,127,.16); }
.note-source-remove { position: absolute; z-index: 2; top: 7px; right: 8px; width: 25px; height: 25px; padding: 0; border: 1px solid rgba(127,84,78,.26); border-radius: 50%; background: rgba(255,255,255,.46); color: #8d5a55; cursor: pointer; }.note-source-remove::before { content:"×"; font-size: 17px; line-height: 1; }.note-source-remove:hover,.note-source-remove:focus-visible { border-color: rgba(161,79,69,.58); background: #fff4f1; color: #9b4036; outline: 2px solid rgba(161,79,69,.18); outline-offset: 1px; }

.source-discovery-dialog { width: min(860px,calc(100vw - 28px)); max-height: min(820px,calc(100dvh - 32px)); overflow: auto; }
.source-discovery-dialog form { display: grid; gap: 14px; }
.source-discovery-dialog form > header h2 { font-size: 24px; }
.source-discovery-context { padding: 13px 14px; border-left: 3px solid #67e4d6; background: rgba(40,127,127,.13); }
.source-discovery-context > span { color: #87ede2; font-size: 9px; font-weight: 650; }
.source-discovery-context h3 { margin: 5px 0 4px; color: #edf8f5; font-size: 16px; font-weight: 600; }
.source-discovery-context p { margin: 0; color: #a8bfbb; font-size: 10px; line-height: 1.55; }
.source-discovery-compose { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; }
.source-discovery-compose label { margin: 0; }
.source-discovery-compose > button,.source-discovery-advice > button { min-height: 42px; padding: 0 14px; border: 1px solid rgba(103,228,214,.38); border-radius: 7px; background: rgba(40,127,127,.18); color: #c9e9e4; font-size: 10px; cursor: pointer; }
.source-discovery-advice { display: grid; gap: 8px; }
.source-discovery-advice > header,.source-discovery-results > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.source-discovery-advice > header span,.source-discovery-results > header span { color: #d9ebe7; font-size: 15px; font-weight: 650; }
.source-discovery-advice > header small,.source-discovery-results > header small { color: #8fa7a3; font-size: 12px; }
.source-discovery-advice [data-discovery-directions] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.source-discovery-advice [data-discovery-directions] > p { grid-column: 1/-1; margin: 0; padding: 15px; border: 1px dashed rgba(103,228,214,.28); color: #9cb3af; font-size: 10px; text-align: center; }
.source-discovery-advice [data-discovery-direction] { display: grid; min-width: 0; min-height: 72px; align-content: center; gap: 5px; padding: 9px; border: 1px solid rgba(103,228,214,.18); border-radius: 7px; background: rgba(7,30,39,.78); color: #d7e9e5; cursor: pointer; text-align: left; }
.source-discovery-advice [data-discovery-direction] b { color: #e5f2ef; font-size: 11px; }
.source-discovery-advice [data-discovery-direction] span { color: #91aaa6; font-size: 9px; line-height: 1.45; }
.source-discovery-advice [data-discovery-direction][aria-pressed="true"] { border-color: rgba(103,228,214,.66); background: rgba(40,127,127,.28); box-shadow: inset 0 0 0 1px rgba(103,228,214,.12); color: #effffc; }
.source-discovery-advice > button { justify-self: end; }
.source-discovery-results { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(40,127,127,.16); }
.source-discovery-results > header > div { display: flex; align-items: center; gap: 8px; }
.source-discovery-results > header b { color: #58bdb4; font-size: 13px; }
.source-discovery-result-list { display: grid; gap: 12px; }
.source-discovery-result-row { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(240px,.85fr); gap: 12px; min-width: 0; }
.source-discovery-result { --source-color:#287f7f; position: relative; display: grid !important; grid-template-columns: auto minmax(0,1fr); gap: 6px 10px !important; margin: 0 !important; padding: 16px !important; border: 1px solid color-mix(in srgb,var(--source-color) 28%,transparent); border-radius: 7px; background: color-mix(in srgb,var(--source-color) 7%,#f7faf7); cursor: pointer; }
.source-discovery-result > input { grid-row: 1/5; align-self: start; width: 20px; height: 20px; margin-top: 2px; accent-color: #287f7f; }
.source-discovery-result-type { color: var(--source-color); font-size: 13px; line-height: 1.4; }
.source-discovery-result-type i { display: inline-grid; min-width: 25px; height: 25px; place-items: center; margin-right: 7px; border: 1px solid color-mix(in srgb,var(--source-color) 42%,transparent); border-radius: 4px; font-size: 11px; font-style: normal; }
.source-discovery-result > b { color: #294c49; font-size: 16px; line-height: 1.45; }
.source-discovery-result > small { color: #657e7a; font-size: 13px; line-height: 1.45; }
.source-discovery-result > p { margin: 2px 0 0; color: #4d6965; font-size: 14px; line-height: 1.65; }
.source-discovery-reason { display: grid; align-content: center; gap: 10px; min-width: 0; padding: 16px 18px; border: 1px solid rgba(103,228,214,.2); border-left: 4px solid rgba(103,228,214,.62); border-radius: 7px; background: rgba(8,31,39,.78); }
.source-discovery-reason > span { color: #78ddd2; font-size: 15px; font-weight: 650; }
.source-discovery-reason > p { margin: 0; color: #c4d8d4; font-size: 14px; line-height: 1.75; }
.source-discovery-scroll-state { display: flex; min-height: 58px; align-items: center; justify-content: center; gap: 10px; border: 1px dashed rgba(103,228,214,.22); border-radius: 7px; color: #9db5b0; font-size: 13px; text-align: center; }
.source-discovery-scroll-state small { color: #718d88; font-size: 12px; }
.source-discovery-scroll-state.is-loading i { width: 15px; height: 15px; border: 2px solid rgba(103,228,214,.18); border-top-color: #67e4d6; border-radius: 50%; animation: discovery-spin .7s linear infinite; }
.source-discovery-searching { grid-column: 1/-1; display: flex; min-height: 92px; align-items: center; justify-content: center; gap: 9px; color: #5e7773; font-size: 10px; }
.source-discovery-searching i { width: 16px; height: 16px; border: 2px solid rgba(40,127,127,.18); border-top-color: #287f7f; border-radius: 50%; animation: discovery-spin .7s linear infinite; }
@keyframes discovery-spin { to { transform: rotate(360deg); } }
.source-discovery-boundary { margin: 0; padding: 8px 9px; border-left: 2px solid #d7a75e; background: rgba(154,100,29,.12); color: #d4bd99; font-size: 9px; line-height: 1.5; }
.source-discovery-dialog form > footer { position: sticky; z-index: 5; bottom: 0; padding: 11px 0; background: linear-gradient(180deg,rgba(4,17,25,0),rgba(4,17,25,.97) 28%); }
.source-discovery-dialog footer [data-discovery-add] { border-color: rgba(103,228,214,.38); background: rgba(40,127,127,.18); color: #c9e9e4; }

.reading-soft .source-library-header h1,.reading-soft .note-panel-header h1 { color: #244348; }
.reading-soft .source-library-tools { background: rgba(246,250,247,.94); }
.reading-soft .source-material-dock { background: linear-gradient(180deg,rgba(246,250,247,0),rgba(246,250,247,.96) 24%); }
.reading-soft .note-source-block[data-note-source-id]:hover,.reading-soft .note-source-block[data-note-source-id]:focus-visible { background: #e7f3ef; }

/* Source discovery stays a dark, high-contrast task surface in every reading theme. */
.workspace-mode .material-dialog.source-discovery-dialog {
  color: #edf8f5 !important;
  background: #081923 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.workspace-mode .material-dialog.source-discovery-dialog::backdrop {
  background: rgba(0,5,9,.82) !important;
  -webkit-backdrop-filter: blur(8px) brightness(.62) saturate(.82) !important;
  backdrop-filter: blur(8px) brightness(.62) saturate(.82) !important;
}
.workspace-mode .source-discovery-dialog form { background: #081923 !important; }
.workspace-mode .source-discovery-dialog form > header { background: #081923 !important; }
.workspace-mode .source-discovery-dialog form > header span { color: #67e4d6 !important; }
.workspace-mode .source-discovery-dialog form > header h2 { color: #f4fbf8 !important; text-shadow: none !important; }
.workspace-mode .source-discovery-dialog form > header button {
  border-color: rgba(173,229,233,.42) !important;
  background: #102d38 !important;
  color: #e5f6f2 !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-context {
  border-left-color: #67e4d6 !important;
  background: #0d323d !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-context > span { color: #79eee2 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-context h3 { color: #f0fbf8 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-context p { color: #b7d2ce !important; }
.workspace-mode .source-discovery-dialog .source-discovery-compose label { color: #cfe4df !important; }
.workspace-mode .source-discovery-dialog .source-discovery-compose input {
  border-color: rgba(103,228,214,.42) !important;
  background: #03131d !important;
  color: #f0fbf8 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-compose input::placeholder { color: #789793 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-compose > button,
.workspace-mode .source-discovery-dialog .source-discovery-advice > button {
  border-color: #67d8cf !important;
  background: #17676c !important;
  color: #f2fffc !important;
  font-weight: 650;
}
.workspace-mode .source-discovery-dialog .source-discovery-advice > header span,
.workspace-mode .source-discovery-dialog .source-discovery-results > header span { color: #eaf8f5 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-advice > header small,
.workspace-mode .source-discovery-dialog .source-discovery-results > header small { color: #9bb9b4 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-advice [data-discovery-directions] > p {
  border-color: rgba(103,228,214,.42) !important;
  color: #b1cbc7 !important;
  background: #0a2530 !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-advice [data-discovery-direction] {
  border-color: rgba(103,228,214,.34) !important;
  background: #0a2530 !important;
  color: #e7f8f3 !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-advice [data-discovery-direction] b { color: #effcf8 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-advice [data-discovery-direction] span { color: #a2bfba !important; }
.workspace-mode .source-discovery-dialog .source-discovery-advice [data-discovery-direction][aria-pressed="true"] {
  border-color: #67e4d6 !important;
  background: #17676c !important;
  color: #f4fffc !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-results {
  border-top-color: rgba(103,228,214,.28) !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-result {
  border-color: rgba(103,228,214,.34) !important;
  background: #e9f2ef !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-result > b { color: #173d40 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-result > small { color: #496863 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-result > p { color: #315650 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-reason {
  border-color: rgba(103,228,214,.34) !important;
  border-left-color: #67e4d6 !important;
  background: #0d323d !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-reason > span { color: #8bf0e5 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-reason > p { color: #d1e6e1 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-scroll-state {
  border-color: rgba(103,228,214,.34) !important;
  color: #b4d0ca !important;
}
.workspace-mode .source-discovery-dialog .source-discovery-scroll-state small { color: #8eaca6 !important; }
.workspace-mode .source-discovery-dialog .source-discovery-boundary {
  border-left-color: #e0aa5a !important;
  background: #3b2a16 !important;
  color: #f1ce91 !important;
}
.workspace-mode .source-discovery-dialog form > footer {
  background: linear-gradient(180deg,rgba(8,25,35,0),#081923 28%) !important;
}
.workspace-mode .source-discovery-dialog footer button {
  border-color: rgba(173,229,233,.34) !important;
  background: #102d38 !important;
  color: #d6e9e5 !important;
}
.workspace-mode .source-discovery-dialog footer [data-discovery-add],
.workspace-mode .source-discovery-dialog footer [data-discovery-start] {
  border-color: #67d8cf !important;
  background: #17676c !important;
  color: #f2fffc !important;
}

/* The filter control lives outside the status bar so collapsing it gives the reader the full width back. */
.workspace-mode .learning-content { padding: 16px 72px 24px 16px; overflow-x: hidden; scrollbar-gutter: stable; }
.workspace-mode .learning-content > .learning-timeline-layout { width: 100%; max-width: 1060px; box-sizing: border-box; }
.workspace-mode .material-timeline-entry { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.workspace-mode .material-viewer { min-width: 0; background: #071d27; -webkit-backdrop-filter: none; backdrop-filter: none; }
.workspace-mode .material-web-reader { background: #f4f7f5; color: #244348; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.workspace-mode .material-web-reader article blockquote { background: #e3efeb; color: #294c49; -webkit-backdrop-filter: none; backdrop-filter: none; }
.material-web-frame { display: block; width: 100%; height: clamp(480px,72vh,900px); border: 0; background: #fff; color-scheme: normal; }
.material-web-help { margin: 0; padding: 12px 16px; border-top: 1px solid #cadbd5; color: #47615c; font-size: 12px; line-height: 1.7; }
.material-web-help a { color: #17675c; text-decoration: underline; }
.workspace-mode.reading-soft .material-viewer { background: #f6faf7; }
@media (min-width: 521px) {
  .workspace-mode .material-timeline-entry { grid-template-columns: 52px minmax(0,1fr); gap: 10px; }
  .workspace-mode .material-entry-timestamp { padding-right: 12px; }
  .workspace-mode .material-timeline-feed::before { left: 48px; }
  .workspace-mode .material-timeline-entry::before { left: 43px; }
}
/* Keep gradients and highlights during motion, then restore expensive backdrop sampling after it settles. */
.learning-prototype.workspace-mode.is-filter-animating,
.learning-prototype.workspace-mode.is-filter-animating *,
.learning-prototype.workspace-mode.is-filter-animating *::before,
.learning-prototype.workspace-mode.is-filter-animating *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.learning-timeline-layout { overflow-anchor: none; }
/* Layout changes once per click; bindLearn animates the reader's displacement with transform. */
.material-filter-panel { position: sticky; z-index: 10; top: 0; width: 100%; height: 58px; margin-bottom: 18px; overflow: visible; }
.material-filter-panel .material-filter-bar { position: relative; top: auto; width: 100%; height: 58px; margin: 0; overflow: hidden; box-sizing: border-box; transform-origin: calc(100% + 32px) 20px; transform: scale(1); opacity: 1; will-change: transform,opacity; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
.material-filter-toggle { position: absolute; z-index: 2; top: 0; left: calc(100% + 8px); display: inline-flex; width: 52px; min-width: 52px; min-height: 30px; align-items: center; justify-content: center; gap: 1px; padding: 0 3px; border: 1px solid rgba(105,184,204,.2); border-radius: 6px; background: rgba(3,14,22,.72); color: #91aaa6; font-size: 9px !important; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.06); transition: color .2s ease,transform .2s ease; }
.material-filter-toggle i { color: #67e4d6; font: 9px/1 "IBM Plex Mono",Consolas,monospace; font-style: normal; }
.material-filter-toggle:hover,.material-filter-toggle:focus-visible { border-color: rgba(103,228,214,.58); color: #e8f3f0; outline: 0; box-shadow: 0 0 0 3px rgba(103,228,214,.08),0 10px 26px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.1); }
.material-filter-panel.is-collapsed { height: 0; margin-bottom: 0; }
.material-filter-panel.is-collapsed .material-filter-bar { opacity: 0; pointer-events: none; transform: scale(.02,.12); }
.material-filter-panel.is-collapsed .material-filter-toggle { top: 0; width: 40px; min-width: 40px; border-color: rgba(103,228,214,.34); background: rgba(5,28,36,.86); color: #c5ebe5; box-shadow: 0 0 0 2px rgba(103,228,214,.05),0 10px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08); }
.reading-soft .material-filter-toggle { border-color: rgba(54,111,116,.18); background: rgba(229,240,236,.86); color: #52716d; box-shadow: 0 8px 22px rgba(47,78,76,.1),inset 0 1px rgba(255,255,255,.8); }
.reading-soft .material-filter-toggle i { color: #287f7f; }
.reading-soft .material-filter-toggle:hover,.reading-soft .material-filter-toggle:focus-visible { border-color: #287f7f; color: #164f51; }
.reading-soft .material-filter-panel.is-collapsed .material-filter-toggle { border-color: rgba(40,127,127,.4); background: rgba(236,247,242,.96); color: #245f5c; }

@media (max-width: 520px) {
  .workspace-mode .learning-content { padding: 13px; }
  .material-filter-panel { height: 56px; }
  .material-filter-panel .material-filter-bar { width: calc(100% - 54px); height: 56px; transform-origin: calc(100% + 31px) 21px; }
  .material-filter-toggle { left: auto; right: 0; width: 52px; min-width: 52px; min-height: 30px; padding: 0 3px; font-size: 9px !important; }
  .material-filter-panel.is-collapsed .material-filter-toggle { width: 52px; min-width: 52px; }
}

@media (max-width: 800px) {
  .workspace-mode .learning-sources { overflow: visible; }
  .workspace-mode .learning-sources > .source-list { flex: none; overflow: visible; }
  .source-library-tools { position: sticky; top: 0; padding: 5px 0; background: rgba(4,18,27,.94); backdrop-filter: blur(14px); }
  .source-material-dock { position: sticky; bottom: 8px; }
}

@media (max-width: 520px) {
  .source-library-header h1,.note-panel-header h1 { font-size: 19px !important; }
  .note-panel-header { min-height: 0; flex: 0 0 auto; align-items: center !important; row-gap: 7px; }
  .note-panel-header h1 { order: 1; }
  .note-panel-header > .note-save-state { order: 2; margin-left: auto; }
  .note-panel-header .note-toolbar-edit { order: 3; flex: 1 0 100%; width: 100%; min-width: 0; justify-content: flex-start; flex-wrap: wrap; row-gap: 5px; margin: 0; overflow: visible; }
  .note-panel-header .note-toolbar-edit > details,
  .note-panel-header .note-toolbar-edit > .note-color-tool,
  .note-panel-header .note-toolbar-edit > .note-icon-button { flex: 0 0 36px; }
  .source-ai-discovery-button { padding: 0 7px; }
  .material-timeline-feed::before { left: 55px; }
  .material-timeline-entry { grid-template-columns: 58px minmax(0,1fr); gap: 9px; }
  .material-timeline-entry::before { left: 50px; }
  .material-entry-timestamp { padding-right: 22px; }
  .source-discovery-compose { grid-template-columns: 1fr; }
  .source-discovery-compose > button { width: 100%; }
  .source-discovery-advice [data-discovery-directions],.source-discovery-result-row { grid-template-columns: 1fr; }
  .source-discovery-advice > button { width: 100%; }
  .source-discovery-dialog footer { flex-wrap: wrap; }
  .source-discovery-dialog footer button { flex: 1 1 42%; }
}
/* Knowledge exploration surfaces: nodes stay inspectable, while the map exposes only recorded containment links. */
.explorer-page { height: calc(100dvh - 72px); min-height: calc(100dvh - 68px); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding: 30px clamp(18px,4vw,64px) 44px; color: #edf6f4; background: radial-gradient(circle at 52% 18%,rgba(39,91,109,.22),transparent 38%),linear-gradient(145deg,#04101a,#071b27 54%,#041018); }
.explorer-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: 1400px; margin: 0 auto 22px; }
.explorer-heading > div:first-child { min-width: 0; }
.explorer-heading > div:first-child > span { color: #67e4d6; font: 10px/1.5 "IBM Plex Mono",Consolas,monospace; letter-spacing: .13em; }
.explorer-heading h1 { margin: 7px 0 8px; color: #f1f8f6; font-size: clamp(28px,3.8vw,48px); font-weight: 500; line-height: 1.15; }
.explorer-heading p { max-width: 680px; margin: 0; color: #9eb4b0; font-size: 13px; line-height: 1.7; }
.explorer-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.explorer-actions a { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(171,226,234,.24); border-radius: 9px; background: rgba(8,31,42,.72); color: #c5ddda; font-size: 12px; text-decoration: none; }
.explorer-actions a:hover, .explorer-actions a:focus-visible { border-color: rgba(103,228,214,.52); color: #f0fffc; background: rgba(25,83,91,.32); }
.explorer-actions .explorer-action-map { border-color: rgba(154,124,255,.34); color: #ded6ff; background: rgba(72,53,122,.22); }
.explorer-actions .explorer-action-node { border-color: rgba(106,183,255,.34); color: #cfe9ff; background: rgba(38,82,127,.22); }
.explorer-toolbar { display: grid; grid-template-columns: minmax(260px,1fr) auto auto; align-items: end; gap: 12px; max-width: 1400px; margin: 0 auto 17px; padding: 12px; border: 1px solid rgba(171,226,234,.18); border-radius: 13px; background: rgba(7,25,35,.64); box-shadow: inset 0 1px rgba(242,255,255,.06); }
.explorer-search { display: grid; gap: 6px; color: #8fa9a5; font-size: 10px; }
.explorer-search input { width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid rgba(103,228,214,.22); border-radius: 8px; outline: 0; background: rgba(1,9,15,.74); color: #eef8f5; font: inherit; }
.explorer-search input::placeholder { color: #5f7977; }.explorer-search input:focus { border-color: #67e4d6; box-shadow: 0 0 0 2px rgba(103,228,214,.12); }
.explorer-filter { display: flex; gap: 5px; }
.explorer-filter button { min-height: 38px; padding: 0 10px; border: 1px solid rgba(145,188,193,.17); border-radius: 8px; background: rgba(3,14,23,.68); color: #9fb5b1; font-size: 10px; cursor: pointer; }
.explorer-filter button:hover, .explorer-filter button:focus-visible, .explorer-filter button[aria-pressed="true"] { border-color: rgba(103,228,214,.42); color: #dcfaf4; background: rgba(28,95,99,.28); }
.explorer-metrics { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.explorer-metrics b { margin-left: 7px; color: #f2be72; font: 20px/1 "IBM Plex Mono",Consolas,monospace; }.explorer-metrics b:first-child { margin-left: 0; }.explorer-metrics span { color: #75918e; font-size: 9px; }
.node-list { display: grid; gap: 13px; max-width: 1400px; margin: 0 auto; }
.node-group { overflow: hidden; border: 1px solid rgba(171,226,234,.19); border-radius: 15px; background: rgba(7,27,38,.68); box-shadow: inset 0 1px rgba(242,255,255,.06),0 14px 34px rgba(0,0,0,.14); }
.node-group > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid rgba(148,207,216,.13); background: rgba(34,88,101,.12); }
.node-group > header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }.node-group > header > div > div { min-width: 0; }.node-group > header span:not(.node-domain-dot) { color: #6f9d9d; font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; }.node-group > header h2 { overflow: hidden; margin: 3px 0 0; color: #e8f5f2; font-size: 15px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }.node-group > header > b { color: #9db7b2; font-size: 10px; font-weight: 400; }
.node-domain-dot { display: block; width: 12px; height: 12px; flex: 0 0 auto; border: 1px solid color-mix(in srgb,var(--node-color),white 35%); border-radius: 50%; background: var(--node-color); box-shadow: 0 0 15px color-mix(in srgb,var(--node-color),transparent 32%); }
.node-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 10px; padding: 12px; }
.knowledge-node-card { display: grid; min-width: 0; min-height: 164px; grid-template-rows: auto 1fr auto; padding: 13px; border: 1px solid rgba(145,207,218,.16); border-radius: 11px; background: rgba(3,15,24,.6); color: #dcebe8; text-decoration: none; transition: border-color .2s ease,background .2s ease,transform .2s ease; }
.node-card-color { display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; border: 1px solid color-mix(in srgb,var(--node-color),white 42%); border-radius: 50%; background: var(--node-color); box-shadow: 0 0 10px color-mix(in srgb,var(--node-color),transparent 26%); }
.knowledge-node-card:hover, .knowledge-node-card:focus-visible { border-color: rgba(103,228,214,.48); background: rgba(27,83,92,.24); transform: translateY(-1px); }.knowledge-node-card header, .knowledge-node-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.knowledge-node-card header span { color: #79b8b4; font: 9px "IBM Plex Mono",Consolas,monospace; }.knowledge-node-card header b { color: #f2be72; font: 12px "IBM Plex Mono",Consolas,monospace; }.knowledge-node-card h3 { overflow: hidden; margin: 12px 0 6px; font-size: 16px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }.knowledge-node-card p { display: -webkit-box; overflow: hidden; margin: 0; color: #9fb6b2; font-size: 11px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.knowledge-node-card footer { padding-top: 10px; color: #78938f; font-size: 9px; }.knowledge-node-card footer i { color: #67e4d6; font: 16px/1 "IBM Plex Mono",Consolas,monospace; font-style: normal; }
.explorer-empty { display: grid; min-height: 290px; place-items: center; align-content: center; gap: 8px; padding: 25px; border: 1px dashed rgba(103,228,214,.3); border-radius: 15px; background: rgba(7,27,38,.58); text-align: center; }.explorer-empty > span, .map-inspector-kicker, .map-inspector-empty > span { color: #67e4d6; font: 10px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }.explorer-empty h2, .map-inspector-empty h2 { margin: 2px 0; font-size: 20px; font-weight: 500; }.explorer-empty p, .map-inspector-empty p { margin: 0; color: #8fa9a5; font-size: 12px; line-height: 1.6; }.explorer-empty a { min-height: 38px; margin-top: 7px; padding: 0 13px; border: 1px solid rgba(103,228,214,.34); border-radius: 8px; color: #c6efea; font-size: 11px; line-height: 38px; text-decoration: none; }
.map-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(270px,.7fr); gap: 13px; max-width: 1400px; min-height: 560px; margin: 0 auto 13px; }
.map-visual-panel, .map-inspector-panel, .map-accessible-list { min-width: 0; border: 1px solid rgba(171,226,234,.19); border-radius: 15px; background: rgba(7,27,38,.68); box-shadow: inset 0 1px rgba(242,255,255,.06),0 14px 34px rgba(0,0,0,.14); }
.map-visual-panel > header, .map-accessible-list > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid rgba(148,207,216,.13); }.map-visual-panel > header div { min-width: 0; }.map-visual-panel > header span, .map-accessible-list > header > span { display: block; color: #67e4d6; font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; }.map-visual-panel > header b { display: block; margin-top: 3px; color: #e5f3f0; font-size: 14px; font-weight: 500; }.map-visual-panel > header small, .map-accessible-list > header small { color: #77918e; font-size: 10px; }.map-canvas { position: relative; min-height: 505px; overflow: hidden; background: radial-gradient(circle at 50% 50%,rgba(57,112,129,.18),transparent 42%),radial-gradient(circle at 50% 50%,rgba(3,12,21,.65),rgba(2,10,17,.88)); }.map-canvas::before, .map-canvas::after { content: ""; position: absolute; top: 50%; left: 50%; border: 1px solid rgba(103,228,214,.12); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }.map-canvas::before { width: 42%; height: 56%; }.map-canvas::after { width: 72%; height: 82%; border-color: rgba(154,124,255,.1); }.map-canvas svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }.map-edge { stroke: rgba(103,228,214,.3); stroke-width: .32; stroke-dasharray: 1.2 1; vector-effect: non-scaling-stroke; }.map-node { position: absolute; z-index: 2; display: grid; place-items: center; min-width: 0; transform: translate(-50%,-50%); cursor: pointer; }.map-node b, .map-node small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.map-domain-node { width: 148px; min-height: 74px; gap: 4px; padding: 10px 12px; border: 1px solid color-mix(in srgb,var(--node-color),white 20%); border-radius: 15px; background: color-mix(in srgb,var(--node-color),#04131e 84%); color: #f2fbf8; box-shadow: 0 0 30px color-mix(in srgb,var(--node-color),transparent 72%),inset 0 1px rgba(255,255,255,.18); }.map-domain-node > span { color: var(--node-color); font-size: 19px; }.map-domain-node b { font-size: 12px; font-weight: 550; }.map-domain-node small { color: #a8c6c1; font-size: 9px; }.map-atom-node { width: 108px; min-height: 58px; gap: 3px; padding: 8px; border: 1px solid color-mix(in srgb,var(--node-color),white 15%); border-radius: 11px; background: rgba(4,17,27,.9); color: #deeeeb; box-shadow: 0 0 20px color-mix(in srgb,var(--node-color),transparent 78%); }.map-atom-node > i { display: block; width: 12px; height: 12px; border: 1px solid color-mix(in srgb,var(--node-color),white 40%); border-radius: 50%; background: var(--node-color); box-shadow: 0 0 12px var(--node-color); }.map-atom-node b { font-size: 10px; font-weight: 500; }.map-atom-node small { color: #8ca7a3; font: 8px "IBM Plex Mono",Consolas,monospace; }.map-node:hover, .map-node:focus-visible, .map-node.is-selected { z-index: 5; border-color: #f2be72; box-shadow: 0 0 0 2px rgba(242,190,114,.23),0 0 30px rgba(242,190,114,.22); outline: 0; }.map-node:focus-visible { outline: 2px solid #f2be72; outline-offset: 3px; }
.map-inspector-panel { align-self: start; min-height: 100%; padding: 20px; }.map-inspector-panel h2 { margin: 8px 0 10px; color: #f0f7f4; font-size: 24px; font-weight: 500; line-height: 1.25; }.map-inspector-panel > p { margin: 0; color: #a5bbb7; font-size: 12px; line-height: 1.7; }.map-inspector-panel dl { margin: 20px 0 0; }.map-inspector-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(148,207,216,.13); font-size: 11px; }.map-inspector-panel dt { color: #718c88; }.map-inspector-panel dd { margin: 0; color: #d5e7e3; text-align: right; }.map-inspector-actions { display: grid; gap: 7px; margin-top: 20px; }.map-inspector-actions a { display: flex; min-height: 40px; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px solid rgba(103,228,214,.34); border-radius: 8px; background: rgba(23,82,88,.2); color: #cceee9; font-size: 11px; text-decoration: none; }.map-inspector-actions a:hover, .map-inspector-actions a:focus-visible { border-color: #67e4d6; background: rgba(32,112,112,.34); }.map-inspector-actions a.is-secondary { border-color: rgba(145,188,193,.18); background: rgba(3,14,23,.42); color: #9bb4b0; }.map-inspector-empty { display: grid; align-content: center; min-height: 300px; gap: 8px; }
.map-accessible-list { max-width: 1400px; margin: 0 auto; }.map-accessible-list > header { align-items: end; justify-content: start; }.map-accessible-list > header h2 { margin: 3px 0 0 10px; color: #e4f1ee; font-size: 16px; font-weight: 500; }.map-accessible-list > header small { margin-left: auto; }.map-accessible-list ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 8px; margin: 0; padding: 12px; list-style: none; }.map-accessible-list li a { display: flex; min-height: 47px; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid rgba(145,207,218,.14); border-radius: 8px; color: #cce0dc; text-decoration: none; }.map-accessible-list li a:hover, .map-accessible-list li a:focus-visible { border-color: rgba(103,228,214,.44); background: rgba(28,95,99,.22); }.map-list-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--node-color); box-shadow: 0 0 9px var(--node-color); }.map-accessible-list li a > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }.map-accessible-list li a b, .map-accessible-list li a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.map-accessible-list li a b { font-size: 11px; font-weight: 500; }.map-accessible-list li a small { color: #78938f; font-size: 9px; }.map-accessible-list li a > i { margin-left: auto; color: #67e4d6; font: 14px "IBM Plex Mono",Consolas,monospace; font-style: normal; }.map-list-empty { padding: 14px; color: #839b97; font-size: 11px; }

/* Knowledge node directory: readable at large desktop sizes and intentional with sparse data. */
.explorer-heading h1 { font-size: 44px; }
.explorer-heading > div:first-child > span { font-size: 11px; letter-spacing: 0; }
.explorer-heading p { color: #b7c9c5; font-size: 15px; }
.explorer-actions a { min-height: 42px; font-size: 13px; }
.explorer-search { font-size: 12px; }
.explorer-search input { min-height: 42px; font-size: 13px; }
.explorer-filter button { min-height: 42px; padding: 0 13px; font-size: 12px; }
.explorer-metrics span { font-size: 11px; }
.node-list { align-items: start; }
.node-group { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.node-group > header { padding: 13px 2px; border-bottom-color: rgba(148,207,216,.2); background: transparent; }
.node-group > header span:not(.node-domain-dot) { font-size: 10px; letter-spacing: 0; }
.node-group > header h2 { font-size: 18px; }
.node-group > header > b { font-size: 12px; }
.node-grid { padding: 14px 0 0; }
.node-group.is-single { width: min(100%,720px); }
.node-group.is-single .node-grid { grid-template-columns: minmax(0,1fr); }
.node-group.is-compact { width: min(100%,960px); }
.node-group.is-compact .node-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.node-group.is-triple .node-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.knowledge-node-card { min-height: 190px; padding: 18px; border-radius: 8px; border-top: 2px solid color-mix(in srgb,var(--node-color),transparent 16%); background: rgba(3,15,24,.78); }
.knowledge-node-card.is-demo { border-style: dashed; border-color: rgba(154,124,255,.38); background: linear-gradient(145deg,rgba(41,30,75,.2),rgba(3,15,24,.82) 54%); }
.knowledge-node-card header > .node-card-state { display: flex; min-width: 0; align-items: center; gap: 8px; }
.knowledge-node-card header span { font-size: 11px; letter-spacing: 0; }
.knowledge-node-card header em { padding: 3px 7px; border: 1px solid rgba(154,124,255,.42); border-radius: 999px; color: #ded6ff; background: rgba(72,53,122,.24); font-size: 10px; font-style: normal; }
.knowledge-node-card header b { font-size: 14px; }
.knowledge-node-card h3 { display: -webkit-box; min-height: 2.6em; margin: 16px 0 8px; overflow: hidden; font-size: 21px; line-height: 1.3; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.knowledge-node-card p { color: #b5c8c4; font-size: 14px; line-height: 1.65; }
.knowledge-node-card footer { padding-top: 14px; color: #91aaa5; font-size: 12px; }
.knowledge-node-card footer strong { display: inline-flex; align-items: center; gap: 7px; color: #7ee8dc; font-weight: 550; white-space: nowrap; }
.knowledge-node-card footer i { font-size: 17px; }

/* Reading size presets apply to exploration surfaces as well as the learning workspace. */
.reading-size-large .explorer-heading h1 { font-size: 48px; }
.reading-size-large .explorer-heading p { font-size: 17px; }
.reading-size-large .explorer-search,
.reading-size-large .explorer-filter button,
.reading-size-large .node-group > header > b { font-size: 13px; }
.reading-size-large .explorer-search input { font-size: 15px; }
.reading-size-large .knowledge-node-card h3 { font-size: 23px; }
.reading-size-large .knowledge-node-card p { font-size: 16px; }
.reading-size-large .knowledge-node-card footer { font-size: 13px; }
.reading-size-xlarge .explorer-heading h1 { font-size: 52px; }
.reading-size-xlarge .explorer-heading > div:first-child > span { font-size: 13px; }
.reading-size-xlarge .explorer-heading p { font-size: 19px; }
.reading-size-xlarge .explorer-actions a,
.reading-size-xlarge .explorer-search,
.reading-size-xlarge .explorer-filter button,
.reading-size-xlarge .node-group > header > b { font-size: 15px; }
.reading-size-xlarge .explorer-search input { min-height: 46px; font-size: 17px; }
.reading-size-xlarge .explorer-filter button { min-height: 46px; }
.reading-size-xlarge .explorer-metrics span { font-size: 13px; }
.reading-size-xlarge .node-group > header span:not(.node-domain-dot) { font-size: 12px; }
.reading-size-xlarge .node-group > header h2 { font-size: 22px; }
.reading-size-xlarge .knowledge-node-card { min-height: 220px; }
.reading-size-xlarge .knowledge-node-card header span { font-size: 13px; }
.reading-size-xlarge .knowledge-node-card header em { font-size: 12px; }
.reading-size-xlarge .knowledge-node-card header b { font-size: 16px; }
.reading-size-xlarge .knowledge-node-card h3 { font-size: 26px; }
.reading-size-xlarge .knowledge-node-card p { font-size: 18px; }
.reading-size-xlarge .knowledge-node-card footer { font-size: 15px; }

.explorer-demo-banner { display: flex; align-items: baseline; gap: 14px; max-width: 1400px; margin: -8px auto 18px; padding: 12px 15px; border: 1px solid rgba(242,190,114,.32); border-left: 3px solid #f2be72; border-radius: 8px; background: rgba(104,65,25,.16); color: #d7c29c; }
.explorer-demo-banner span { flex: 0 0 auto; color: #f2be72; font: 10px "IBM Plex Mono",Consolas,monospace; letter-spacing: .08em; }
.explorer-demo-banner p { margin: 0; color: #b9c6bd; font-size: 12px; line-height: 1.6; }
.explorer-demo-banner code { padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.08); color: #f0d7a4; font: inherit; }

/* Soft daylight is a complete exploration theme, not only a light top bar. */
.reading-soft .explorer-page { color: #183d40; background: radial-gradient(circle at 50% 16%,rgba(91,164,163,.13),transparent 40%),linear-gradient(145deg,#eef6f3,#e6f0f1 58%,#f4f7f5); }
.reading-soft .explorer-heading h1,
.reading-soft .node-group > header h2,
.reading-soft .knowledge-node-card h3 { color: #173d40; }
.reading-soft .explorer-heading > div:first-child > span { color: #197c7b; }
.reading-soft .explorer-heading p { color: #506d6b; }
.reading-soft .explorer-actions a { border-color: rgba(43,103,108,.28); background: rgba(246,251,249,.82); color: #315b5b; }
.reading-soft .explorer-actions .explorer-action-map { border-color: rgba(105,84,165,.34); background: rgba(235,230,249,.72); color: #5d4b91; }
.reading-soft .explorer-toolbar { border-color: rgba(48,105,109,.2); background: rgba(250,253,251,.78); box-shadow: inset 0 1px rgba(255,255,255,.9),0 12px 30px rgba(52,87,85,.08); }
.reading-soft .explorer-search { color: #55716f; }
.reading-soft .explorer-search input { border-color: rgba(35,110,112,.28); background: rgba(255,255,255,.86); color: #173d40; }
.reading-soft .explorer-search input::placeholder { color: #758d8a; }
.reading-soft .explorer-filter button { border-color: rgba(57,109,112,.2); background: rgba(235,244,241,.9); color: #4d6c69; }
.reading-soft .explorer-filter button:hover,
.reading-soft .explorer-filter button:focus-visible,
.reading-soft .explorer-filter button[aria-pressed="true"] { border-color: #287f7f; background: rgba(199,232,227,.9); color: #164f51; }
.reading-soft .explorer-metrics b { color: #96611c; }
.reading-soft .explorer-metrics span,
.reading-soft .node-group > header > b { color: #607b78; }
.reading-soft .node-group > header { border-bottom-color: rgba(45,105,108,.22); }
.reading-soft .node-group > header span:not(.node-domain-dot) { color: #4e7775; }
.reading-soft .knowledge-node-card { border-color: rgba(51,109,113,.22); background: rgba(252,254,252,.82); color: #173d40; box-shadow: 0 12px 28px rgba(52,87,85,.08); }
.reading-soft .knowledge-node-card.is-demo { border-color: rgba(105,84,165,.42); background: linear-gradient(145deg,rgba(242,238,251,.94),rgba(250,253,251,.9) 58%); }
.reading-soft .knowledge-node-card:hover,
.reading-soft .knowledge-node-card:focus-visible { border-color: #287f7f; background: #f7fcfa; }
.reading-soft .knowledge-node-card header span { color: #356d6b; }
.reading-soft .knowledge-node-card header em { border-color: rgba(105,84,165,.38); background: rgba(225,218,245,.68); color: #594787; }
.reading-soft .knowledge-node-card header b { color: #96611c; }
.reading-soft .knowledge-node-card p { color: #506b68; }
.reading-soft .knowledge-node-card footer { color: #647f7b; }
.reading-soft .knowledge-node-card footer strong,
.reading-soft .knowledge-node-card footer i { color: #176f70; }
.reading-soft .explorer-demo-banner { border-color: rgba(154,100,29,.32); border-left-color: #b57925; background: rgba(235,221,188,.56); color: #684817; }
.reading-soft .explorer-demo-banner span { color: #8e5b13; }
.reading-soft .explorer-demo-banner p { color: #655a45; }
.reading-soft .explorer-demo-banner code { background: rgba(154,100,29,.1); color: #684817; }

/* Keep the desktop reading panel in the top bar instead of covering page actions. */
@media (min-width: 1100px) {
  .learning-topbar-tools:has(.reading-controls[open]) .learning-local { opacity: 0; pointer-events: none; }
  .reading-panel { top: 6px; right: calc(100% + 14px); width: 430px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px 14px; padding: 12px; transform: none; }
  .reading-panel fieldset { margin: 0; }
  .reading-panel p { grid-column: 1 / -1; margin: 0; }
}

@media (max-width: 1099px) {
  .reading-panel { position: fixed; top: 76px; right: 14px; width: min(300px,calc(100vw - 28px)); }
  .learning-prototype:has(.reading-controls[open]) .explorer-page { padding-top: 220px; }
}

@media (max-width: 900px) {
  .explorer-heading { display: block; }.explorer-actions { margin-top: 16px; }.explorer-toolbar { grid-template-columns: minmax(0,1fr); align-items: stretch; }.explorer-filter { flex-wrap: wrap; }.explorer-metrics { justify-content: flex-start; }.map-layout { grid-template-columns: 1fr; min-height: 0; }.map-canvas { min-height: 470px; }.map-inspector-panel { min-height: 0; }.map-inspector-empty { min-height: 180px; }
  .node-group.is-compact, .node-group.is-triple { width: 100%; }.node-group.is-compact .node-grid, .node-group.is-triple .node-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .explorer-page { padding: 22px 12px 30px; }.explorer-heading h1,.reading-size-large .explorer-heading h1,.reading-size-xlarge .explorer-heading h1 { font-size: 34px; }.explorer-heading p { font-size: 14px; }.explorer-actions { display: grid; grid-template-columns: 1fr 1fr; }.explorer-actions a { justify-content: center; padding: 0 8px; font-size: 11px; }.node-grid { grid-template-columns: 1fr; padding-top: 10px; }.node-group > header { padding: 12px 2px; }.knowledge-node-card,.reading-size-xlarge .knowledge-node-card { min-height: 190px; padding: 15px; }.knowledge-node-card h3,.reading-size-large .knowledge-node-card h3,.reading-size-xlarge .knowledge-node-card h3 { font-size: 22px; }.knowledge-node-card p,.reading-size-large .knowledge-node-card p,.reading-size-xlarge .knowledge-node-card p { font-size: 15px; }.knowledge-node-card footer,.reading-size-large .knowledge-node-card footer,.reading-size-xlarge .knowledge-node-card footer { align-items: flex-end; font-size: 12px; }.map-canvas { min-height: 430px; }.map-domain-node { width: 118px; min-height: 64px; padding: 8px; }.map-atom-node { width: 92px; min-height: 52px; padding: 6px; }.map-node b { font-size: 9px; }.map-node small { font-size: 8px; }.map-accessible-list ul { grid-template-columns: 1fr; padding: 8px; }
  .explorer-demo-banner { display: block; margin: 0 0 14px; padding: 11px 12px; }.explorer-demo-banner span { display: block; margin-bottom: 4px; }.explorer-demo-banner p { font-size: 12px; }
}

/* Complete map: a navigable relationship field with an explicit core and camera. */
.map-visual-panel > header { align-items: center; }
.map-stage-controls { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.map-stage-controls button,
.map-stage-controls output { display: grid; min-width: 32px; height: 32px; place-items: center; border: 1px solid rgba(145,207,218,.22); border-radius: 7px; background: rgba(3,14,23,.62); color: #cce8e4; font-size: 15px; line-height: 1; }
.map-stage-controls button { cursor: pointer; }
.map-stage-controls button:hover,
.map-stage-controls button:focus-visible { border-color: rgba(103,228,214,.62); color: #f0fffc; background: rgba(29,91,101,.38); outline: 0; }
.map-stage-controls output { min-width: 48px; color: #f2be72; font: 11px "IBM Plex Mono",Consolas,monospace; }
.map-canvas { cursor: grab; touch-action: none; }
.map-canvas.is-panning { cursor: grabbing; user-select: none; }
.map-scene { position: absolute; z-index: 2; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.map-canvas .map-scene svg { z-index: 1; }
.map-edge { transition: opacity .2s ease, stroke-width .2s ease; }
.map-edge-core-domain { stroke: rgba(242,190,114,.42); stroke-width: .24; stroke-dasharray: .8 1.8; }
.map-edge-domain-atom { stroke: rgba(103,228,214,.38); stroke-width: .34; stroke-dasharray: 1.2 1; }
.map-core-node { width: 176px; min-height: 88px; gap: 5px; padding: 12px 15px; border: 1px solid rgba(242,190,114,.65); border-radius: 50%; background: radial-gradient(circle at 35% 28%,rgba(255,238,194,.94),rgba(161,100,35,.92) 33%,rgba(38,24,14,.98) 76%); color: #fff6dc; box-shadow: 0 0 0 5px rgba(242,190,114,.08),0 0 38px rgba(242,190,114,.38),inset 0 1px rgba(255,255,255,.42); }
.map-core-node > span { color: #ffe8ab; font-size: 22px; text-shadow: 0 0 14px rgba(255,238,194,.8); }
.map-core-node b { font-size: 14px; font-weight: 600; }
.map-core-node small { color: #f3d7a1; font-size: 9px; }
.map-core-node.is-selected,
.map-core-node:hover,
.map-core-node:focus-visible { border-color: #fff0c4; box-shadow: 0 0 0 3px rgba(242,190,114,.28),0 0 50px rgba(242,190,114,.5),inset 0 1px rgba(255,255,255,.5); }
.map-canvas-overlay { position: absolute; z-index: 4; inset: auto 12px 11px auto; pointer-events: none; }
.map-stage-status { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border: 1px solid rgba(171,226,234,.16); border-radius: 999px; background: rgba(2,10,17,.66); color: #8ca9a5; font: 9px "IBM Plex Mono",Consolas,monospace; }
.map-stage-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid rgba(148,207,216,.13); }
.map-stage-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; color: #96b0ac; font-size: 10px; }
.map-stage-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-swatch { display: inline-block; width: 20px; height: 2px; border-radius: 999px; background: #67e4d6; }
.legend-swatch.is-core { background: #f2be72; background-image: repeating-linear-gradient(90deg,#f2be72 0 5px,transparent 5px 8px); }
.legend-swatch.is-evidence { width: 9px; height: 9px; border: 1px solid #f2be72; border-radius: 50%; background: #f2be72; box-shadow: 0 0 8px #f2be72; }
.map-stage-hint { flex: 0 0 auto; color: #718c88; font-size: 9px; text-align: right; }
.map-empty-state { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; gap: 5px; width: min(270px,calc(100% - 40px)); padding: 16px; border: 1px dashed rgba(242,190,114,.34); border-radius: 10px; background: rgba(3,17,27,.78); color: #d8e9e5; text-align: center; transform: translate(-50%,-50%); }
.map-empty-state b { font-size: 13px; font-weight: 550; }
.map-empty-state span { color: #91aaa5; font-size: 10px; }
.map-canvas[data-map-zoom="far"] .map-atom-node { width: 32px; min-height: 32px; padding: 0; border-radius: 50%; }
.map-canvas[data-map-zoom="far"] .map-atom-node b,
.map-canvas[data-map-zoom="far"] .map-atom-node small { display: none; }
.map-canvas[data-map-zoom="far"] .map-atom-node > i { width: 14px; height: 14px; }
.map-canvas[data-map-zoom="near"] .map-atom-node b { font-size: 12px; }
.map-canvas[data-map-zoom="near"] .map-atom-node small { font-size: 9px; }
.map-inspector-boundary { margin: 12px 0 0 !important; padding: 8px 9px; border-left: 2px solid #f2be72; background: rgba(242,190,114,.08); color: #d5c09a !important; font-size: 10px !important; line-height: 1.5 !important; }
.map-inspector-panel { background: rgba(3,17,27,.92); }
.map-inspector-panel h2 { color: #f4fbf8; }
.map-inspector-panel > p { color: #b6cbc7; }
.map-inspector-panel dt { color: #8ba5a1; }
.map-inspector-panel dd { color: #e0eeeb; }
.map-accessible-list { background: rgba(3,17,27,.92); }
.map-accessible-list > header h2 { color: #eff8f5; }
.map-accessible-list > header small { color: #8ba5a1; }
.map-accessible-list li a { color: #d7e9e5; }
.map-accessible-list li a small { color: #91aaa5; }
.map-index-core .map-list-dot { box-shadow: 0 0 11px #f2be72; }

/* Soft daylight keeps the map readable while retaining a dark starfield canvas. */
.reading-soft .map-visual-panel,
.reading-soft .map-inspector-panel,
.reading-soft .map-accessible-list { border-color: rgba(43,103,108,.22); background: rgba(248,252,250,.9); box-shadow: inset 0 1px rgba(255,255,255,.9),0 14px 34px rgba(52,87,85,.1); }
.reading-soft .map-visual-panel > header,
.reading-soft .map-accessible-list > header { border-bottom-color: rgba(43,103,108,.16); }
.reading-soft .map-visual-panel > header b,
.reading-soft .map-accessible-list > header h2 { color: #173d40; }
.reading-soft .map-visual-panel > header small,
.reading-soft .map-accessible-list > header small { color: #607b78; }
.reading-soft .map-stage-controls button,
.reading-soft .map-stage-controls output { border-color: rgba(43,103,108,.22); background: rgba(234,244,241,.92); color: #315b5b; }
.reading-soft .map-stage-controls output { color: #8e5b13; }
.reading-soft .map-stage-controls button:hover,
.reading-soft .map-stage-controls button:focus-visible { border-color: #287f7f; background: #d8eeea; color: #174f51; }
.reading-soft .map-stage-footer { border-top-color: rgba(43,103,108,.16); }
.reading-soft .map-stage-legend { color: #55716f; }
.reading-soft .map-stage-hint { color: #718a87; }
.reading-soft .map-inspector-panel h2 { color: #173d40; }
.reading-soft .map-inspector-panel > p { color: #506b68; }
.reading-soft .map-inspector-panel dt { color: #607b78; }
.reading-soft .map-inspector-panel dd { color: #244d4e; }
.reading-soft .map-inspector-boundary { border-left-color: #9a641d; background: rgba(231,205,147,.26); color: #684817 !important; }
.reading-soft .map-inspector-actions a { border-color: rgba(40,127,127,.34); background: rgba(207,235,230,.62); color: #205f60; }
.reading-soft .map-inspector-actions a.is-secondary { border-color: rgba(57,109,112,.2); background: rgba(235,244,241,.9); color: #4d6c69; }
.reading-soft .map-accessible-list li a { border-color: rgba(51,109,113,.18); color: #315b5b; }
.reading-soft .map-accessible-list li a small { color: #607b78; }
.reading-soft .map-accessible-list li a:hover,
.reading-soft .map-accessible-list li a:focus-visible { border-color: #287f7f; background: #eef8f5; }

@media (max-width: 900px) {
  .map-stage-footer { align-items: flex-start; flex-direction: column; }
  .map-stage-hint { text-align: left; }
}

@media (max-width: 520px) {
  .map-visual-panel > header { align-items: flex-start; flex-direction: column; }
  .map-stage-controls { width: 100%; justify-content: flex-end; }
  .map-canvas { min-height: 470px; }
  .map-core-node { width: 136px; min-height: 74px; padding: 9px 10px; }
  .map-core-node b { font-size: 11px; }
  .map-core-node small { font-size: 8px; }
  .map-domain-node { width: 126px; min-height: 66px; }
  .map-atom-node { width: 82px; min-height: 52px; padding: 6px; }
  .map-stage-legend { gap: 8px 12px; font-size: 9px; }
}

/* Commercial map skin: stronger hierarchy, material depth, and a calmer stage. */
.map-visual-panel { overflow: hidden; border-radius: 18px; }
.map-visual-panel > header { min-height: 84px; padding: 16px 20px; background: linear-gradient(125deg,rgba(4,20,28,.97),rgba(7,30,39,.93)); }
.map-visual-panel > header > div:first-child > span { color: #67e4d6; font-size: 10px; letter-spacing: .18em; }
.map-visual-panel > header > div:first-child > b { margin-top: 7px; color: #e5f3f0; font-size: 18px; letter-spacing: .01em; }
.map-stage-head-meta { display: flex; align-items: center; gap: 16px; }
.map-stage-head-meta > small { color: #8ba5a1; font: 10px "IBM Plex Mono",Consolas,monospace; white-space: nowrap; }
.map-stage-controls button,
.map-stage-controls output { min-width: 36px; height: 36px; border-radius: 9px; }
.map-stage-controls output { min-width: 54px; background: rgba(3,14,23,.72); }
.map-canvas { min-height: 590px; background-color: #0b1822; background-image: radial-gradient(circle at 50% 50%,rgba(90,141,153,.3),transparent 38%), radial-gradient(circle at 50% 54%,rgba(242,190,114,.09),transparent 17%), linear-gradient(rgba(130,190,199,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(130,190,199,.035) 1px,transparent 1px),linear-gradient(145deg,#0b1822,#172933 52%,#08141e); background-size: auto,auto,56px 56px,56px 56px,auto; }
.map-canvas::before { width: 47%; height: 59%; border-color: rgba(103,228,214,.18); box-shadow: 0 0 50px rgba(103,228,214,.06); }
.map-canvas::after { width: 78%; height: 86%; border-color: rgba(154,124,255,.15); }
.map-canvas .map-scene::before { content: ""; position: absolute; inset: 8%; border: 1px dashed rgba(186,225,228,.1); border-radius: 50%; pointer-events: none; }
.map-edge { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-edge-core-domain { stroke: rgba(242,190,114,.68); stroke-width: .34; stroke-dasharray: 1.4 2.4; filter: drop-shadow(0 0 4px rgba(242,190,114,.25)); }
.map-edge-domain-atom { stroke: rgba(103,228,214,.62); stroke-width: .44; stroke-dasharray: 1.5 1.7; filter: drop-shadow(0 0 4px rgba(103,228,214,.2)); }
.map-node { transition: transform .22s ease, filter .22s ease, opacity .22s ease; }
.map-node:hover,
.map-node:focus-visible { filter: brightness(1.12); }
.map-core-node { width: 220px; min-height: 148px; gap: 6px; padding: 19px 24px; border: 1px solid rgba(255,234,174,.84); border-radius: 50%; background: radial-gradient(circle at 36% 26%,#ffe8ad 0%,#c78839 22%,#75441b 49%,#24160e 78%); color: #fff8e7; box-shadow: 0 0 0 8px rgba(242,190,114,.08),0 0 0 18px rgba(242,190,114,.035),0 0 60px rgba(242,190,114,.4),inset 0 2px 0 rgba(255,255,255,.52),inset 0 -12px 24px rgba(22,10,2,.34); }
.map-core-node::before { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(255,222,142,.2); border-radius: 50%; pointer-events: none; }
.map-core-node::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,242,197,.28); border-radius: 50%; pointer-events: none; }
.map-core-kicker { color: rgba(255,238,189,.78); font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }
.map-core-mark { color: #fff0bd; font-size: 31px; line-height: 1; text-shadow: 0 0 20px rgba(255,241,190,.9); }
.map-core-node b { position: relative; z-index: 1; font-size: 22px; font-weight: 650; letter-spacing: .02em; }
.map-core-node small { position: relative; z-index: 1; color: #f7d99f; font-size: 11px; }
.map-core-node small strong { color: #fff0bd; font-weight: 650; }
.map-core-node small em,
.map-domain-node small em,
.map-atom-node small em { color: rgba(225,240,236,.46); font-style: normal; }
.map-core-node.is-selected,
.map-core-node:hover,
.map-core-node:focus-visible { transform: translate(-50%,-50%) scale(1.035); box-shadow: 0 0 0 4px rgba(255,236,182,.32),0 0 0 14px rgba(242,190,114,.1),0 0 72px rgba(242,190,114,.55),inset 0 2px 0 rgba(255,255,255,.58),inset 0 -12px 24px rgba(22,10,2,.28); }
.map-domain-node { width: 176px; min-height: 92px; grid-template-columns: 25px minmax(0,1fr); grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 2px; padding: 12px 15px; border: 1px solid var(--node-color); border-radius: 20px; background: linear-gradient(145deg,rgba(28,55,62,.98),rgba(5,19,29,.97)); box-shadow: 0 14px 28px rgba(0,0,0,.2),0 0 30px rgba(103,228,214,.18),inset 0 1px rgba(255,255,255,.2); text-align: left; }
.map-domain-node::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--node-color); border-radius: 14px; opacity: .42; pointer-events: none; }
.map-node-kicker { color: #82bcb7; font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; text-transform: uppercase; }
.map-domain-glyph { grid-column: 1; grid-row: 1 / span 3; color: var(--node-color); font-size: 24px; line-height: 1; text-shadow: 0 0 15px var(--node-color); }
.map-domain-node .map-node-kicker { grid-column: 2; grid-row: 1; }
.map-domain-node b { position: relative; z-index: 1; grid-column: 2; grid-row: 2; font-size: 15px; font-weight: 650; }
.map-domain-node small { grid-column: 2; grid-row: 3; color: #bfd2cd; font-size: 10px; }
.map-domain-node small strong { color: #f2be72; font-weight: 650; }
.map-domain-node.is-selected,
.map-domain-node:hover,
.map-domain-node:focus-visible { transform: translate(-50%,-50%) scale(1.06); border-color: #f2be72; box-shadow: 0 0 0 3px rgba(242,190,114,.24),0 16px 32px rgba(0,0,0,.26),0 0 36px rgba(103,228,214,.28),inset 0 1px rgba(255,255,255,.26); }
.map-atom-node { width: 148px; min-height: 82px; gap: 4px; padding: 12px 13px; border: 1px solid var(--node-color); border-radius: 17px; background: linear-gradient(145deg,rgba(12,33,43,.96),rgba(4,16,25,.96)); box-shadow: 0 10px 22px rgba(0,0,0,.23),0 0 22px rgba(103,228,214,.14),inset 0 1px rgba(255,255,255,.12); }
.map-atom-node > i { width: 13px; height: 13px; border: 2px solid var(--node-color); box-shadow: 0 0 13px var(--node-color); }
.map-atom-node .map-node-kicker { color: #6faaa7; font-size: 8px; letter-spacing: .08em; }
.map-atom-node b { font-size: 12px; font-weight: 600; }
.map-atom-node small { color: #91b1ad; font: 9px "IBM Plex Mono",Consolas,monospace; }
.map-atom-node small strong { color: #cfe9e2; font-weight: 650; }
.map-atom-node.has-evidence { border-color: rgba(242,190,114,.7); box-shadow: 0 10px 22px rgba(0,0,0,.23),0 0 26px rgba(242,190,114,.22),inset 0 1px rgba(255,255,255,.16); }
.map-atom-node.is-selected,
.map-atom-node:hover,
.map-atom-node:focus-visible { transform: translate(-50%,-50%) scale(1.07); border-color: #f2be72; box-shadow: 0 0 0 3px rgba(242,190,114,.24),0 12px 27px rgba(0,0,0,.3),0 0 30px rgba(103,228,214,.26),inset 0 1px rgba(255,255,255,.2); }
.map-stage-footer { min-height: 58px; padding: 12px 18px; background: rgba(4,18,27,.96); }
.map-stage-legend { color: #96b0ac; font-size: 11px; }
.map-stage-hint { color: #718c88; font-size: 10px; }
.map-stage-status { border-color: rgba(181,225,225,.24); background: rgba(4,19,28,.78); color: #a8c6c0; }

/* Restore the daylight skin explicitly after the shared commercial map rules. */
.reading-soft .map-visual-panel > header { background: linear-gradient(125deg,rgba(245,252,250,.98),rgba(226,241,239,.92)); }
.reading-soft .map-stage-footer { background: rgba(238,248,245,.95); }

@media (max-width: 900px) {
  .map-visual-panel > header { min-height: 78px; }
  .map-stage-head-meta { width: 100%; justify-content: space-between; }
  .map-stage-head-meta > small { display: none; }
}

@media (max-width: 520px) {
  .map-visual-panel > header { min-height: 122px; padding: 14px; }
  .map-visual-panel > header > div:first-child > b { font-size: 16px; }
  .map-core-node { width: 144px; min-height: 104px; padding: 13px 15px; }
  .map-core-kicker { font-size: 7px; }
  .map-core-mark { font-size: 23px; }
  .map-core-node b { font-size: 16px; }
  .map-core-node small { font-size: 8px; }
  .map-domain-node { width: 128px; min-height: 88px; padding: 11px 12px; }
  .map-domain-glyph { font-size: 20px; }
  .map-domain-node b { font-size: 12px; }
  .map-domain-node small { font-size: 8px; }
  .map-atom-node { width: 92px; min-height: 68px; padding: 9px 8px; }
  .map-atom-node b { font-size: 10px; }
  .map-atom-node small { font-size: 8px; }
  .map-stage-footer { padding: 10px 12px; }
}

/* The map is a long-form exploration surface: the document owns vertical scroll,
   while the relation field keeps its own pan/zoom gestures. */
html[data-screen="learning-prototype"]:has(.learning-prototype.map-mode) body { overflow: auto; }
.learning-prototype.map-mode { overflow: visible; }
.map-mode .explorer-page { height: auto; min-height: calc(100dvh - 72px); overflow: visible; }
.map-mode .map-layout { align-items: stretch; }
.map-mode .map-canvas { height: clamp(380px,calc(100dvh - 480px),640px); min-height: 0; touch-action: pan-y; }
.map-mode .map-core-node { width: clamp(180px,20%,220px); min-height: 0; aspect-ratio: 1; padding: 24px; border-radius: 50%; }
.map-mode .map-atom-node b { display: -webkit-box; line-height: 1.35; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.map-mode .map-inspector-panel { min-height: 100%; height: auto; align-self: stretch; display: flex; flex-direction: column; padding: clamp(24px,2.1vw,34px); }

/* Keep the inspector aligned with the full map stage and readable at a glance. */
.map-mode .map-inspector-kicker { font-size: 12px; letter-spacing: .16em; }
.map-mode .map-inspector-panel h2 { margin: 10px 0 14px; font-size: clamp(30px,2.3vw,38px); line-height: 1.2; }
.map-mode .map-inspector-panel > p { font-size: 16px; line-height: 1.8; }
.map-mode .map-inspector-panel dl { margin-top: 26px; }
.map-mode .map-inspector-panel dl div { padding: 14px 0; font-size: 15px; line-height: 1.45; }
.map-mode .map-relation-inspector { margin-top: 26px; padding-top: 20px; }
.map-mode .map-relation-inspector > header span { font-size: 11px; }
.map-mode .map-relation-inspector > header b { font-size: 14px; }
.map-mode .map-relation-inspector ul { gap: 10px; margin-top: 14px; }
.map-mode .map-relation-inspector li { gap: 5px; padding: 12px 13px; }
.map-mode .map-relation-inspector li b { font-size: 15px; line-height: 1.45; }
.map-mode .map-relation-inspector li small,
.map-mode .map-relation-more,
.map-mode .map-relation-inspector.is-empty p { font-size: 13px; line-height: 1.6; }
.map-mode .map-inspector-boundary { padding: 11px 12px; font-size: 13px !important; line-height: 1.6 !important; }
.map-mode .map-inspector-actions { gap: 10px; margin-top: auto; padding-top: 28px; }
.map-mode .map-inspector-actions a { min-height: 50px; padding: 0 14px; font-size: 14px; }

@media (max-width: 900px) {
  .map-mode .map-canvas { height: min(520px,62dvh); min-height: 420px; }
}

@media (max-width: 520px) {
  .map-mode .map-canvas { height: min(480px,58dvh); min-height: 390px; }
  .map-mode .map-core-node { width: 132px; min-height: 0; aspect-ratio: 1; padding: 13px; }
  .map-mode .map-atom-node b { line-height: 1.25; }
}

/* Knowledge atom dossier: identity, mastery boundary, evidence, then next action. */
.atom-detail { min-height: calc(100dvh - 72px); height: auto; display: block; overflow: auto; padding: 30px clamp(20px,4vw,64px) 48px; color: #edf6f4; background: radial-gradient(circle at 22% 32%,rgba(92,66,171,.16),transparent 31%),radial-gradient(circle at 72% 12%,rgba(39,105,112,.18),transparent 30%),linear-gradient(145deg,#04101a,#071b27 56%,#041018); }
.atom-detail-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px 28px; max-width: 1400px; margin: 0 auto 24px; }
.atom-breadcrumb { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; color: #8ba5a1; font-size: 12px; }
.atom-breadcrumb a { border-bottom: 1px solid transparent; }.atom-breadcrumb a:hover,.atom-breadcrumb a:focus-visible { border-bottom-color: #67e4d6; color: #dffaf5; }
.atom-heading-copy { min-width: 0; max-width: 900px; }
.atom-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.atom-badges span,.atom-badges em { padding: 5px 8px; border: 1px solid rgba(154,124,255,.34); border-radius: 999px; background: rgba(72,53,122,.2); color: #ded6ff; font-size: 11px; font-style: normal; }
.atom-badges em { border-color: rgba(103,228,214,.28); background: rgba(28,95,99,.2); color: #bdeee8; }
.atom-detail-heading h1 { max-width: 100%; margin: 0; color: #f1f8f6; font-size: 44px; font-weight: 550; line-height: 1.18; overflow-wrap: anywhere; }
.atom-detail-heading p { max-width: 760px; margin: 12px 0 0; color: #aec2be; font-size: 16px; line-height: 1.7; }
.atom-heading-actions { align-self: end; display: flex; align-items: center; gap: 8px; }
.atom-heading-actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; padding: 0 14px; border: 1px solid rgba(145,188,193,.24); border-radius: 8px; background: rgba(3,14,23,.6); color: #bad2ce; font-size: 13px; white-space: nowrap; }
.atom-heading-actions a.is-primary { border-color: rgba(242,190,114,.42); background: rgba(112,70,27,.22); color: #ffe5b5; }
.atom-heading-actions a:hover,.atom-heading-actions a:focus-visible { border-color: #67e4d6; color: #effffc; }
.atom-detail-grid { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(0,1.35fr); gap: 18px; max-width: 1400px; margin: 0 auto; }
.atom-state-panel { min-width: 0; padding: 20px; border: 1px solid rgba(171,226,234,.2); border-radius: 8px; background: radial-gradient(circle at 50% 42%,rgba(87,63,168,.21),transparent 39%),rgba(5,20,30,.78); box-shadow: inset 0 1px rgba(255,255,255,.06),0 18px 45px rgba(0,0,0,.16); }
.atom-state-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.atom-state-panel > header span,.atom-record-card header span { color: #67e4d6; font: 11px/1.4 "IBM Plex Mono",Consolas,monospace; letter-spacing: 0; }
.atom-state-panel > header h2 { margin: 4px 0 0; color: #eef8f5; font-size: 20px; font-weight: 550; }
.atom-state-panel > header strong { color: #f2be72; font: 26px/1 "IBM Plex Mono",Consolas,monospace; }
.atom-state-body { display: grid; grid-template-columns: minmax(180px,.85fr) minmax(150px,1fr); align-items: center; gap: 12px; min-height: 270px; }
.atom-state-panel .atom-visual { position: relative; top: auto; left: auto; width: min(100%,250px); margin: auto; transform: none; }
.atom-state-copy span { color: #8ca9a5; font-size: 12px; }.atom-state-copy h3 { margin: 8px 0 5px; color: #f0f7f4; font-size: 30px; font-weight: 550; }.atom-state-copy p { margin: 0; color: #a9bfbb; font-size: 14px; line-height: 1.7; }
.atom-level-track { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.atom-level-track li { position: relative; display: grid; min-width: 0; min-height: 54px; place-items: center; align-content: center; gap: 3px; border-top: 2px solid rgba(127,158,158,.2); color: #647f7c; }
.atom-level-track li span { font: 11px/1 "IBM Plex Mono",Consolas,monospace; }.atom-level-track li b { font-size: 11px; font-weight: 500; }
.atom-level-track li.is-complete { border-top-color: #67e4d6; color: #a9d9d2; }.atom-level-track li.is-current { border-top-color: #f2be72; color: #ffe0a7; background: rgba(112,70,27,.1); }
.atom-records { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 12px; }
.atom-record-card { min-width: 0; padding: 20px; border: 1px solid rgba(171,226,234,.18); border-radius: 8px; background: rgba(6,23,33,.74); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.atom-record-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.atom-record-card header b { color: #91aaa6; font-size: 11px; font-weight: 500; text-align: right; }
.atom-record-card h2 { margin: 0 0 9px; color: #edf7f4; font-size: 21px; font-weight: 550; line-height: 1.45; }
.atom-record-card p { margin: 0; color: #a5bbb7; font-size: 13px; line-height: 1.7; }
.atom-evidence-card dl { margin: 0; }.atom-evidence-card dl div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(148,207,216,.13); font-size: 13px; }.atom-evidence-card dt { color: #839f9b; }.atom-evidence-card dd { margin: 0; color: #d5e7e3; text-align: right; }
.atom-next-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 20px; border-color: rgba(242,190,114,.3); }.atom-next-card header { grid-column: 1 / -1; }.atom-next-card > div { min-width: 0; }.atom-next-card > a { align-self: end; display: inline-flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 14px; border: 1px solid rgba(242,190,114,.42); border-radius: 8px; background: rgba(112,70,27,.22); color: #ffe5b5; font-size: 13px; white-space: nowrap; }
.atom-next-card > a:hover,.atom-next-card > a:focus-visible { border-color: #f2be72; background: rgba(112,70,27,.36); }

.reading-size-large .atom-detail-heading h1 { font-size: 48px; }.reading-size-large .atom-detail-heading p { font-size: 18px; }.reading-size-large .atom-record-card h2 { font-size: 23px; }.reading-size-large .atom-record-card p,.reading-size-large .atom-evidence-card dl div { font-size: 15px; }
.reading-size-xlarge .atom-detail-heading h1 { font-size: 52px; }.reading-size-xlarge .atom-detail-heading p { font-size: 20px; }.reading-size-xlarge .atom-badges span,.reading-size-xlarge .atom-badges em,.reading-size-xlarge .atom-breadcrumb { font-size: 13px; }.reading-size-xlarge .atom-state-panel > header h2 { font-size: 23px; }.reading-size-xlarge .atom-state-copy h3 { font-size: 34px; }.reading-size-xlarge .atom-state-copy p { font-size: 16px; }.reading-size-xlarge .atom-record-card h2 { font-size: 25px; }.reading-size-xlarge .atom-record-card p,.reading-size-xlarge .atom-evidence-card dl div { font-size: 17px; }.reading-size-xlarge .atom-heading-actions a,.reading-size-xlarge .atom-next-card > a { font-size: 15px; }

.reading-soft .atom-detail { color: #183d40; background: radial-gradient(circle at 20% 24%,rgba(105,84,165,.1),transparent 31%),radial-gradient(circle at 72% 10%,rgba(91,164,163,.13),transparent 32%),linear-gradient(145deg,#eef6f3,#e6f0f1 58%,#f4f7f5); }
.reading-soft .atom-breadcrumb { color: #55716f; }.reading-soft .atom-breadcrumb a:hover,.reading-soft .atom-breadcrumb a:focus-visible { border-bottom-color: #287f7f; color: #174f51; }
.reading-soft .atom-badges span { border-color: rgba(105,84,165,.32); background: rgba(228,222,246,.72); color: #5c4b8b; }.reading-soft .atom-badges em { border-color: rgba(40,127,127,.28); background: rgba(207,235,230,.76); color: #205f60; }
.reading-soft .atom-detail-heading h1,.reading-soft .atom-state-panel > header h2,.reading-soft .atom-state-copy h3,.reading-soft .atom-record-card h2 { color: #173d40; }
.reading-soft .atom-detail-heading p,.reading-soft .atom-state-copy p,.reading-soft .atom-record-card p { color: #506b68; }
.reading-soft .atom-heading-actions a { border-color: rgba(43,103,108,.25); background: rgba(248,252,250,.84); color: #315b5b; }.reading-soft .atom-heading-actions a.is-primary,.reading-soft .atom-next-card > a { border-color: rgba(154,100,29,.42); background: rgba(250,239,213,.8); color: #704b17; }
.reading-soft .atom-state-panel { border-color: rgba(51,109,113,.22); background: radial-gradient(circle at 42% 42%,rgba(105,84,165,.12),transparent 38%),rgba(250,253,251,.82); box-shadow: inset 0 1px rgba(255,255,255,.9),0 16px 36px rgba(52,87,85,.09); }
.reading-soft .atom-state-panel > header span,.reading-soft .atom-record-card header span { color: #197c7b; }.reading-soft .atom-state-panel > header strong { color: #96611c; }.reading-soft .atom-state-copy span { color: #607b78; }
.reading-soft .atom-level-track li { border-top-color: rgba(59,111,113,.2); color: #718a87; }.reading-soft .atom-level-track li.is-complete { border-top-color: #287f7f; color: #296a69; }.reading-soft .atom-level-track li.is-current { border-top-color: #9a641d; color: #79501b; background: rgba(231,205,147,.28); }
.reading-soft .atom-record-card { border-color: rgba(51,109,113,.2); background: rgba(252,254,252,.82); box-shadow: inset 0 1px rgba(255,255,255,.9),0 12px 28px rgba(52,87,85,.07); }.reading-soft .atom-record-card header b,.reading-soft .atom-evidence-card dt { color: #607b78; }.reading-soft .atom-evidence-card dl div { border-top-color: rgba(45,105,108,.16); }.reading-soft .atom-evidence-card dd { color: #244d4e; }.reading-soft .atom-next-card { border-color: rgba(154,100,29,.28); }

@media (max-width: 980px) {
  .atom-detail-heading { grid-template-columns: 1fr; }.atom-heading-actions { align-self: auto; }.atom-detail-grid { grid-template-columns: 1fr; }.atom-state-body { grid-template-columns: minmax(180px,.7fr) minmax(180px,1fr); }.atom-records { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .atom-detail { padding: 22px 12px 32px; }.atom-detail-heading { gap: 15px; margin-bottom: 18px; }.atom-detail-heading h1,.reading-size-large .atom-detail-heading h1,.reading-size-xlarge .atom-detail-heading h1 { font-size: 34px; }.atom-detail-heading p,.reading-size-large .atom-detail-heading p,.reading-size-xlarge .atom-detail-heading p { font-size: 16px; }.atom-heading-actions { display: grid; grid-template-columns: 1fr 1fr; }.atom-heading-actions a { padding: 0 8px; font-size: 12px; white-space: normal; text-align: center; }.atom-state-panel { padding: 15px; }.atom-state-body { grid-template-columns: 1fr; min-height: 0; padding: 10px 0 14px; }.atom-state-panel .atom-visual { width: 170px; }.atom-state-copy { text-align: center; }.atom-level-track { grid-template-columns: repeat(3,minmax(0,1fr)); }.atom-records { grid-template-columns: 1fr; }.atom-next-card { grid-column: auto; grid-template-columns: 1fr; }.atom-next-card > a { width: 100%; margin-top: 8px; white-space: normal; }.reading-size-xlarge .atom-record-card h2 { font-size: 22px; }.reading-size-xlarge .atom-record-card p,.reading-size-xlarge .atom-evidence-card dl div { font-size: 15px; }
}

/* 3D relationship field: spheres and labels are separate layers so the map
   stays inspectable without turning every node back into a rectangular card. */
.map-canvas-3d { position: relative; height: clamp(420px,calc(100dvh - 330px),680px); min-height: 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 45%,rgba(104,88,190,.2),transparent 22%),radial-gradient(circle at 52% 52%,rgba(57,164,177,.2),transparent 48%),linear-gradient(145deg,#071521 0%,#0a1f2a 48%,#050e18 100%); }
.map-canvas-3d::before { content: ""; position: absolute; inset: 10% 16%; z-index: 0; border: 1px solid rgba(119,232,232,.12); border-radius: 50%; box-shadow: 0 0 80px rgba(74,214,220,.06),inset 0 0 70px rgba(74,214,220,.04); transform: rotate(-11deg); pointer-events: none; }
.map-canvas-3d::after { content: ""; position: absolute; inset: 22% 27%; z-index: 0; border: 1px dashed rgba(193,153,255,.13); border-radius: 50%; transform: rotate(22deg); pointer-events: none; }
.map-3d-canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.map-3d-canvas:active { cursor: grabbing; }
.map-label-layer { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.map-3d-label { position: absolute; display: grid; width: 42px; min-height: 0; margin: 0; padding: 2px; place-items: center; gap: 1px; border: 1px solid transparent; border-radius: 999px; background: rgba(4,16,25,.5); color: #d9efeb; cursor: pointer; pointer-events: auto; text-align: center; text-shadow: 0 1px 5px #031018,0 0 12px rgba(102,225,225,.22); transform: translate(-50%,-50%) scale(var(--label-depth,1)); transition: opacity .22s ease,filter .22s ease,border-color .22s ease,background .22s ease,transform .22s ease; }
.map-3d-label:hover,.map-3d-label:focus-visible { border-color: rgba(242,190,114,.58); background: rgba(10,31,38,.82); outline: 0; transform: translate(-50%,-50%) scale(calc(var(--label-depth,1) * 1.08)); }
.map-3d-label.is-selected { border-color: rgba(255,219,140,.9); background: rgba(75,45,20,.72); box-shadow: 0 0 22px rgba(242,190,114,.26); }
.map-3d-label.is-related { border-color: rgba(116,225,225,.42); background: rgba(9,43,50,.55); }
.map-3d-label.is-muted { opacity: .15; filter: saturate(.25) brightness(.72); }
.map-3d-label.is-behind { opacity: .18; }
.map-3d-label .map-node-kicker { color: #73b9b7; font: 8px/1.2 "IBM Plex Mono",Consolas,monospace; letter-spacing: .08em; }
.map-3d-label b { display: -webkit-box; max-width: 100%; overflow: hidden; color: #e9f7f4; font-size: 10px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.map-3d-label small { max-width: 100%; overflow: hidden; color: #9dbcb7; font: 8px/1.2 "IBM Plex Mono",Consolas,monospace; text-overflow: ellipsis; white-space: nowrap; }
.map-3d-label small strong { color: #f5cf8b; }
.map-3d-label i { width: 8px; height: 8px; border: 1px solid var(--node-color,#67dff4); border-radius: 50%; background: var(--node-color,#67dff4); box-shadow: 0 0 10px var(--node-color,#67dff4); }
.map-core-label { width: 76px; padding: 4px; border-color: rgba(255,222,144,.3); background: rgba(46,30,18,.64); }
.map-core-label .map-core-kicker { color: #ffe0a1; font: 8px "IBM Plex Mono",Consolas,monospace; letter-spacing: .12em; }
.map-core-label b { color: #fff1cb; font-size: 15px; }
.map-core-label small { color: #e5c88f; }
.map-domain-label { width: 52px; border-color: var(--node-color,#67dff4); background: rgba(5,30,37,.7); }
.map-domain-label b { font-size: 12px; }
.map-domain-label .map-node-kicker { color: var(--node-color,#67dff4); }
.map-stage-status { background: rgba(3,12,20,.78); }
.map-stage-legend .legend-swatch.is-prerequisite { background: #69d9ef; box-shadow: 0 0 8px #69d9ef; }
.map-stage-legend .legend-swatch.is-related { background: #a48cff; box-shadow: 0 0 8px #a48cff; }
.map-stage-legend .legend-swatch.is-application { background: #ffad6d; box-shadow: 0 0 8px #ffad6d; }
.map-relation-inspector { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(148,207,216,.14); }
.map-relation-inspector > header { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.map-relation-inspector > header span { color: #67e4d6; font: 9px "IBM Plex Mono",Consolas,monospace; letter-spacing: .1em; }
.map-relation-inspector > header b { color: #d8ebe7; font-size: 11px; font-weight: 500; }
.map-relation-inspector ul { display: grid; gap: 7px; margin: 11px 0 0; padding: 0; list-style: none; }
.map-relation-inspector li { display: grid; gap: 3px; padding: 8px 9px; border-left: 2px solid rgba(103,228,214,.4); background: rgba(18,58,64,.22); }
.map-relation-link { display: grid; width: 100%; gap: 3px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.map-relation-link:hover b, .map-relation-link:focus-visible b { color: #ffe5b5; }
.map-relation-link:focus-visible { outline: 2px solid #f2be72; outline-offset: 4px; border-radius: 3px; }
.map-relation-inspector li b { color: #e2f1ee; font-size: 11px; font-weight: 550; line-height: 1.35; }
.map-relation-inspector li small,.map-relation-more,.map-relation-inspector.is-empty p { color: #8ca9a5; font-size: 10px; line-height: 1.45; }
.map-relation-inspector.is-empty p { margin: 10px 0 0; }
.relation-kind { width: max-content; padding: 2px 5px; border-radius: 4px; color: #9fe7e2; background: rgba(56,141,145,.18); font: 8px "IBM Plex Mono",Consolas,monospace; }
.relation-kind-application,.relation-kind-cross_domain { color: #ffd29d; background: rgba(187,103,43,.2); }
.relation-kind-related,.relation-kind-causal { color: #d6c8ff; background: rgba(107,83,185,.2); }
.relation-kind-source,.relation-kind-prerequisite { color: #a9eaf0; background: rgba(47,128,151,.2); }
.map-relation-more { display: block; margin-top: 8px; }

/* Soft daylight needs its own contrast tokens for the relation inspector.
   The network can stay dark, but its explanatory copy must remain readable. */
.reading-soft .map-relation-inspector { border-top-color: rgba(43,103,108,.18); }
.reading-soft .map-relation-inspector > header span { color: #1c8582; }
.reading-soft .map-relation-inspector > header b { color: #244d4e; }
.reading-soft .map-relation-inspector li { border-left-color: #67cfc9; background: rgba(193,215,214,.54); }
.reading-soft .map-relation-inspector li b { color: #173d40; }
.reading-soft .map-relation-inspector li small,
.reading-soft .map-relation-more,
.reading-soft .map-relation-inspector.is-empty p { color: #506b68; }
.reading-soft .relation-kind { color: #176f70; background: rgba(125,198,194,.34); }
.reading-soft .relation-kind-application,
.reading-soft .relation-kind-cross_domain { color: #875315; background: rgba(236,196,133,.38); }
.reading-soft .relation-kind-related,
.reading-soft .relation-kind-causal { color: #5b4b91; background: rgba(195,185,231,.42); }
.reading-soft .relation-kind-source,
.reading-soft .relation-kind-prerequisite { color: #286b76; background: rgba(164,211,218,.42); }

/* Node names float over the spheres. Keep the text itself clear; the hover
   state is communicated by scale and glow instead of a surrounding frame. */
.map-3d-label,
.map-core-label,
.map-domain-label { border: 0 !important; border-color: transparent !important; border-radius: 0; background: transparent !important; box-shadow: none !important; }
.map-3d-label b { color: #f4fffc; font-size: 9px; font-weight: 650; text-shadow: 0 1px 3px #020c13,0 0 10px rgba(0,0,0,.9),0 0 18px rgba(124,235,231,.3); }
.map-3d-label small { color: #d2e9e4; text-shadow: 0 1px 3px #020c13,0 0 8px rgba(0,0,0,.9); }
.map-3d-label .map-node-kicker { color: #b2e7e0; text-shadow: 0 1px 3px #020c13,0 0 8px rgba(0,0,0,.85); }
.map-3d-label.is-hovered { z-index: 300 !important; filter: brightness(1.22); transform: translate(-50%,-50%) scale(calc(var(--label-depth,1) * 1.18)); }
.map-3d-label.is-hovered b,
.map-3d-label.is-selected b { color: #fff8da; text-shadow: 0 1px 3px #020c13,0 0 12px rgba(255,221,139,.92),0 0 24px rgba(255,178,89,.46); }
.map-3d-label.is-selected { filter: brightness(1.1); }
.map-3d-label.is-muted { opacity: .2; }
.map-3d-label.is-behind { opacity: .78; }
.map-3d-label.is-muted.is-behind { opacity: .12; }
.map-core-label b { color: #fff4d3; font-size: 12px; }
.map-core-label small { color: #f1d89f; }
.map-domain-label b { font-size: 9px; }
.map-3d-label i { margin-bottom: 1px; }

/* Knowledge-node labels must stay inside their sphere at every interaction
   state. The sphere carries the color; the label itself never becomes a card. */
.map-atom-label,
.map-atom-label:hover,
.map-atom-label:focus-visible,
.map-atom-label.is-hovered,
.map-atom-label.is-selected,
.map-atom-label.is-related { width: 28px; max-width: 28px; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: 0 !important; }
.map-atom-label b { display: -webkit-box; width: 28px; max-width: 28px; color: #f4fffc; font-size: 9px; line-height: 1.08; overflow-wrap: anywhere; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.map-atom-label i { width: 6px; height: 6px; margin-bottom: 1px; }
.map-atom-label.is-hovered,
.map-atom-label:focus-visible,
.map-atom-label.is-selected { filter: brightness(1.18) drop-shadow(0 0 6px var(--node-color, #67dff4)); }

.reading-soft .map-3d-label b { color: #f7fffd; text-shadow: 0 1px 3px rgba(255,255,255,.12),0 1px 4px rgba(0,38,44,.95),0 0 12px rgba(255,255,255,.45); }
.reading-soft .map-3d-label small { color: #e4f3ef; text-shadow: 0 1px 3px rgba(255,255,255,.1),0 1px 4px rgba(0,38,44,.95); }
.reading-soft .map-3d-label .map-node-kicker { color: #d9fffa; text-shadow: 0 1px 3px rgba(0,38,44,.95); }

@media (max-width: 520px) {
  .map-3d-label b { font-size: 10px; }
  .map-core-label b { font-size: 13px; }
  .map-domain-label b { font-size: 11px; }
  .map-3d-label.is-hovered { transform: translate(-50%,-50%) scale(calc(var(--label-depth,1) * 1.12)); }
}

@media (max-width: 900px) {
  .map-canvas-3d { height: clamp(420px,62dvh,570px); min-height: 0; }
  .map-3d-label { width: 40px; }
  .map-core-label { width: 72px; }
  .map-domain-label { width: 48px; }
}

@media (max-width: 520px) {
  .map-canvas-3d { height: min(510px,62dvh); min-height: 390px; }
  .map-3d-label { width: 38px; padding: 2px; }
  .map-atom-label,
  .map-atom-label:hover,
  .map-atom-label:focus-visible,
  .map-atom-label.is-hovered,
  .map-atom-label.is-selected,
  .map-atom-label.is-related { width: 26px; max-width: 26px; padding: 0; }
  .map-atom-label b { width: 26px; max-width: 26px; font-size: 8px; }
  .map-3d-label .map-node-kicker { font-size: 7px; }
  .map-3d-label b { font-size: 9px; }
  .map-3d-label small { font-size: 7px; }
  .map-core-label { width: 66px; }
  .map-core-label b { font-size: 11px; }
  .map-domain-label { width: 46px; }
  .map-domain-label b { font-size: 8px; }
  .map-stage-hint { line-height: 1.5; }
}


/* Small screens use a full-width reader; timestamps sit above the document. */
@media (max-width: 520px) {
  .workspace-mode .material-timeline-entry { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .workspace-mode .material-entry-timestamp { display: flex; align-items: center; gap: 8px; padding: 0; }
  .workspace-mode .material-timeline-feed::before,.workspace-mode .material-timeline-entry::before { display: none; }
  .workspace-mode .material-body { padding: 8px; }
  .material-web-frame { height: 65vh; min-height: 400px; }
  .material-web-help { padding: 10px; }
}

/* V1.3.0 reading reset: a flat surface keeps attention on the material.
   The workspace intentionally uses opaque fills, quiet separators, and no
   glass effects. Keep the focus-mode proportions and source dock intact. */
.learning-prototype.workspace-mode {
  --flat-bg: #081117;
  --flat-topbar: #0d1920;
  --flat-source: #0b171e;
  --flat-reader: #13232b;
  --flat-note: #0d1920;
  --flat-panel: #172a32;
  --flat-control: #1a3038;
  --flat-input: #09151b;
  --flat-line: #29444c;
  --flat-line-soft: #20363e;
  --flat-copy: #d9e6e3;
  --flat-muted: #91aaa5;
  color: var(--flat-copy);
  background: var(--flat-bg) !important;
  background-image: none !important;
}

.workspace-mode .learning-space,
.workspace-mode .learning-space::before,
.workspace-mode .learning-space::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* A single, stable page frame replaces the layered glass panels. */
.workspace-mode,
.workspace-mode * ,
.workspace-mode *::before,
.workspace-mode *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.workspace-mode .learning-topbar {
  background: var(--flat-topbar) !important;
  border-bottom: 1px solid var(--flat-line) !important;
  box-shadow: none !important;
}
.workspace-mode .learning-brand span {
  border-color: #47777b !important;
  box-shadow: none !important;
  background: #10252b !important;
}
.workspace-mode .learning-local i {
  box-shadow: none !important;
}
.workspace-mode .learning-back,
.workspace-mode .learning-route small,
.workspace-mode .learning-local,
.workspace-mode .learning-topbar-tools { color: var(--flat-muted) !important; }
.workspace-mode .learning-route b,
.workspace-mode .learning-brand { color: #edf7f4 !important; }

.workspace-mode .reading-controls summary {
  border-color: #3c6269 !important;
  border-radius: 4px !important;
  background: #13272f !important;
  color: #d8ebe6 !important;
}
.workspace-mode .reading-controls[open] summary {
  border-color: var(--learn-gold) !important;
  background: #283022 !important;
  color: #ffe9c1 !important;
}
.workspace-mode .focus-timer,
.workspace-mode .learning-topbar-center .focus-timer {
  border-radius: 4px !important;
  background: #1a3038 !important;
  box-shadow: none !important;
}
.workspace-mode .focus-timer[data-pomodoro-status="running"] { background: #1d4546 !important; }
.workspace-mode .focus-timer[data-pomodoro-status="complete"] { background: #3a3020 !important; }
.workspace-mode .reading-panel,
.workspace-mode .focus-timer-panel {
  border: 1px solid #3c6269 !important;
  border-radius: 4px !important;
  background: #102129 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
}
.workspace-mode .reading-options button,
.workspace-mode .focus-timer-panel button {
  border-color: #34535b !important;
  border-radius: 3px !important;
  background: #0b171e !important;
  color: #b8cbc7 !important;
  box-shadow: none !important;
}
.workspace-mode .reading-options button[aria-pressed="true"],
.workspace-mode .focus-timer-panel button[aria-pressed="true"] {
  border-color: var(--learn-cyan) !important;
  background: #1d565c !important;
  color: #effffc !important;
}

.workspace-mode .learning-workspace {
  gap: 0 !important;
  padding: 0 !important;
  background: var(--flat-line) !important;
}
.workspace-mode .learning-sources,
.workspace-mode .learning-content,
.workspace-mode .learning-notes {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--flat-source) !important;
}
.workspace-mode .learning-sources {
  border-right: 1px solid var(--flat-line) !important;
}
.workspace-mode .learning-content {
  background: var(--flat-reader) !important;
}
.workspace-mode .learning-notes {
  border-left: 1px solid var(--flat-line) !important;
  background: var(--flat-note) !important;
}

.workspace-mode .learning-sources > header,
.workspace-mode .learning-content > header,
.workspace-mode .learning-notes > header {
  border-bottom: 1px solid var(--flat-line-soft) !important;
}
.workspace-mode .learning-sources header span,
.workspace-mode .learning-content header span,
.workspace-mode .learning-notes header span,
.workspace-mode .material-viewer-type,
.workspace-mode .material-file-preview span,
.workspace-mode .material-link-preview > span {
  color: var(--learn-cyan) !important;
}
.workspace-mode .learning-sources h1,
.workspace-mode .learning-notes h1,
.workspace-mode .learning-content h1,
.workspace-mode .note-panel-header h1 {
  color: #f0f7f4 !important;
}
.workspace-mode .learning-sources header > b,
.workspace-mode .learning-content header > b,
.workspace-mode .learning-notes header > b,
.workspace-mode .learning-boundary,
.workspace-mode .explanation-field small,
.workspace-mode .material-filter-empty,
.workspace-mode .material-ai-actions small {
  color: var(--flat-muted) !important;
}

/* Controls use small radii and one clear active fill. */
.workspace-mode .learning-mode-controls,
.workspace-mode .material-toolbar,
.workspace-mode .material-filter-bar,
.workspace-mode .source-library-tools label,
.workspace-mode .source-library-tools > button,
.workspace-mode .note-toolbar-assistant button,
.workspace-mode .note-toolbar-edit > button,
.workspace-mode .note-toolbar-edit summary,
.workspace-mode .note-color-tool,
.workspace-mode .source-material-dock button,
.workspace-mode .material-filter-toggle {
  border-radius: 4px !important;
  box-shadow: none !important;
}
.workspace-mode .learning-mode-controls {
  border-color: var(--flat-line) !important;
  background: #102129 !important;
}
.workspace-mode .learning-mode-controls-label { color: #8fa9a4 !important; }
.workspace-mode .learning-mode-options button,
.workspace-mode .learning-mode-controls--topbar {
  background: #0b171e !important;
  border-color: #2d4b53 !important;
  box-shadow: none !important;
}
.workspace-mode .learning-mode-options button[aria-pressed="true"],
.workspace-mode .learning-mode-controls--topbar .learning-mode-options button[aria-pressed="true"] {
  border-color: var(--learn-gold) !important;
  background: #3a3020 !important;
  color: #ffe9c1 !important;
  box-shadow: none !important;
}
.workspace-mode .learning-mode-options button small { color: #8fa9a4 !important; }
.workspace-mode .learning-mode-options button[aria-pressed="true"] small { color: #d6ba87 !important; }
.workspace-mode .material-toolbar {
  border-color: var(--flat-line) !important;
  background: var(--flat-panel) !important;
}
.workspace-mode .material-toolbar > button,
.workspace-mode .material-tabs button {
  border-color: #34545c !important;
  border-radius: 3px !important;
  background: #102129 !important;
  color: #c9dad6 !important;
  box-shadow: none !important;
}
.workspace-mode .material-toolbar > button:hover,
.workspace-mode .material-toolbar > button:focus-visible,
.workspace-mode .material-tabs button:hover,
.workspace-mode .material-tabs button:focus-visible {
  border-color: var(--learn-cyan) !important;
  background: #1b3a40 !important;
}
.workspace-mode .material-toolbar > button > span,
.workspace-mode .source-material-dock button > span {
  border-radius: 3px !important;
  background: #12373d !important;
  box-shadow: none !important;
}

.workspace-mode .source-library-tools label,
.workspace-mode .source-library-tools > button,
.workspace-mode .source-material-dock button {
  border-color: #2d4c54 !important;
  background: #102129 !important;
  color: #bdd0cc !important;
}
.workspace-mode .source-library-tools label:focus-within,
.workspace-mode .source-library-tools > button:hover,
.workspace-mode .source-library-tools > button:focus-visible,
.workspace-mode .source-material-dock button:hover,
.workspace-mode .source-material-dock button:focus-visible {
  border-color: var(--learn-cyan) !important;
  background: #18383e !important;
}
.workspace-mode .source-library-tools > button[aria-pressed="true"] {
  border-color: var(--learn-gold) !important;
  background: #3a3020 !important;
  color: #ffe5b5 !important;
}
.workspace-mode .source-material-dock {
  border-top-color: var(--flat-line) !important;
  background: var(--flat-source) !important;
}

/* Source cards read as rows of information instead of floating glass cards. */
.workspace-mode .learning-source-card,
.workspace-mode .learning-source-card:hover {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--flat-line-soft) !important;
  border-left: 3px solid var(--source-color) !important;
  border-radius: 0 !important;
  background: #0e2027 !important;
  box-shadow: none !important;
  transform: none !important;
}
.workspace-mode .learning-source-card.is-active {
  border-bottom-color: var(--source-color) !important;
  background: #17343a !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--source-color) 30%,transparent) !important;
}
.workspace-mode .learning-source-card::before {
  border-radius: 1px !important;
  background: var(--source-color) !important;
  box-shadow: none !important;
}
.workspace-mode .source-open b { color: #e5f0ed !important; }
.workspace-mode .source-open small,
.workspace-mode .source-open span,
.workspace-mode .source-card-title span,
.workspace-mode .source-card-summary,
.workspace-mode .learning-source-card > footer span,
.workspace-mode .learning-source-card > footer small { color: #8ea8a3 !important; }
.workspace-mode .source-toggle {
  border-top-color: var(--flat-line-soft) !important;
  background: #0a181e !important;
  color: #a9c0bb !important;
}
.workspace-mode .source-toggle[aria-pressed="true"] { color: var(--learn-cyan) !important; }
.workspace-mode .source-card-summary textarea {
  border-color: #315159 !important;
  border-radius: 3px !important;
  background: var(--flat-input) !important;
  color: #d8e7e3 !important;
  box-shadow: none !important;
}
.workspace-mode .learning-source-card > footer { border-top-color: var(--flat-line-soft) !important; }
.workspace-mode .learning-source-card > footer button {
  border-radius: 3px !important;
  background: #122d34 !important;
  box-shadow: none !important;
}

/* The reading column carries the strongest contrast and the widest surface. */
.workspace-mode .today-learning-context,
.workspace-mode .material-empty,
.workspace-mode .material-viewer,
.workspace-mode .material-extraction,
.workspace-mode .learning-content blockquote,
.workspace-mode .local-explanation,
.workspace-mode .clip-to-note {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.workspace-mode .today-learning-context {
  border-color: #80683e !important;
  background: #272a25 !important;
}
.workspace-mode .today-learning-signal {
  border-radius: 3px !important;
  background: #403621 !important;
  box-shadow: none !important;
}
.workspace-mode .today-learning-copy h2,
.workspace-mode .today-learning-copy p,
.workspace-mode .today-learning-context-grid dd { color: #f0f2e9 !important; }
.workspace-mode .today-learning-context-grid,
.workspace-mode .today-learning-context-grid > div { border-color: #554a35 !important; }
.workspace-mode .today-learning-boundary {
  background: #3a2b19 !important;
  color: #e9cb92 !important;
}
.workspace-mode .material-empty {
  border: 1px solid #42616a !important;
  background: #182d35 !important;
}
.workspace-mode .material-empty p { color: #a9c0bb !important; }
.workspace-mode .material-viewer {
  border-color: #3d5b63 !important;
  background: #10232b !important;
}
.workspace-mode .material-viewer > header,
.workspace-mode .material-ai-actions { border-color: var(--flat-line) !important; }
.workspace-mode .material-viewer > header { background: #142a32 !important; }
.workspace-mode .material-viewer > header h2 { color: #edf7f4 !important; }
.workspace-mode .material-viewer > header small,
.workspace-mode .material-viewer > header time { color: #91aaa5 !important; }
/* The document keeps its light paper surface in both workspace themes. */
.workspace-mode .material-document { color: #294642 !important; }
.workspace-mode .material-file-preview p,
.workspace-mode .material-link-preview p { color: #d3e1dd !important; }
.workspace-mode .material-extraction {
  border-color: #584a81 !important;
  background: #24223b !important;
}
.workspace-mode .learning-content blockquote {
  border-color: #315961 !important;
  border-left: 3px solid var(--learn-cyan) !important;
  background: #1b3035 !important;
}
.workspace-mode .learning-content blockquote p { color: #edf7f4 !important; }
.workspace-mode .local-explanation {
  border-color: #51467b !important;
  border-left: 3px solid var(--learn-violet) !important;
  background: #24233b !important;
}
.workspace-mode .local-explanation p { color: #d7d9e7 !important; }
.workspace-mode .clip-to-note {
  border-color: #4a9992 !important;
  background: #1b5454 !important;
  color: #f1fffb !important;
}
.workspace-mode .clip-to-note:hover { background: #236966 !important; }
.workspace-mode .material-filter-bar {
  border-color: var(--flat-line) !important;
  background: #142831 !important;
}
.workspace-mode .material-filter-bar button {
  border-color: #315159 !important;
  border-radius: 3px !important;
  background: #0e2027 !important;
  box-shadow: none !important;
}
.workspace-mode .material-filter-bar button[aria-pressed="true"] {
  background: var(--source-soft) !important;
  box-shadow: inset 0 -2px 0 var(--source-color) !important;
}
.workspace-mode .material-filter-toggle {
  border-color: #3d646b !important;
  background: #17323a !important;
  box-shadow: none !important;
}
.workspace-mode .material-filter-toggle:hover,
.workspace-mode .material-filter-toggle:focus-visible {
  border-color: var(--learn-cyan) !important;
  box-shadow: none !important;
}
.workspace-mode .material-timeline-feed::before {
  background: #315b62 !important;
}
.workspace-mode .material-timeline-entry::before {
  border-radius: 1px !important;
  background: #10232a !important;
  box-shadow: none !important;
}

/* Notes stay utilitarian: a clean board, quiet toolbar, and explicit save state. */
.workspace-mode .note-board,
.workspace-mode .note-mind-map,
.workspace-mode .note-mindmap-workspace,
.workspace-mode .note-ai-panel {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.workspace-mode .note-board {
  border-color: #31545b !important;
  background: var(--flat-input) !important;
}
.workspace-mode .note-editor { color: #e3efec !important; }
.workspace-mode .note-editor:empty::before { color: #6f8984 !important; }
.workspace-mode .note-editor:focus { box-shadow: inset 0 0 0 1px var(--learn-cyan) !important; }
.workspace-mode .note-source-block { background: #17353a !important; }
.workspace-mode .note-ai-entry { background: #282442 !important; }
.workspace-mode .note-toolbar-assistant button,
.workspace-mode .note-toolbar-edit > button,
.workspace-mode .note-toolbar-edit summary,
.workspace-mode .note-color-tool {
  border-color: #315159 !important;
  background: #132a32 !important;
  color: #bfd2cd !important;
}
.workspace-mode .note-toolbar-assistant button:hover,
.workspace-mode .note-toolbar-assistant button:focus-visible,
.workspace-mode .note-toolbar-edit > button:hover,
.workspace-mode .note-toolbar-edit > button:focus-visible,
.workspace-mode .note-toolbar-edit summary:hover,
.workspace-mode .note-toolbar-edit summary:focus-visible {
  border-color: var(--learn-cyan) !important;
  background: #1b3c42 !important;
}
.workspace-mode .note-toolbar-assistant button[aria-expanded="true"],
.workspace-mode .note-toolbar-edit details[open] > summary,
.workspace-mode .note-toolbar-edit > button[aria-expanded="true"] {
  border-color: var(--learn-violet) !important;
  background: #2a2449 !important;
  box-shadow: none !important;
}
.workspace-mode .note-font-menu > div,
.workspace-mode .note-underline-menu > div,
.workspace-mode .note-shape-menu > div {
  border-color: #405d64 !important;
  border-radius: 0 !important;
  background: #102129 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
}
.workspace-mode .note-font-menu select,
.workspace-mode .note-shape-menu select,
.workspace-mode .note-underline-menu input[type="color"],
.workspace-mode .note-quiz textarea,
.workspace-mode .note-ai-compose input {
  border-color: #315159 !important;
  border-radius: 3px !important;
  background: var(--flat-input) !important;
  color: #e1efeb !important;
  box-shadow: none !important;
}
.workspace-mode .note-mindmap-workspace { background: #0b171e !important; }
.workspace-mode .note-mindmap-workspace > header { background: #132831 !important; border-bottom-color: var(--flat-line) !important; }
.workspace-mode .note-mindmap-canvas { background: #09151b !important; }
.workspace-mode .note-mindmap-node,
.workspace-mode .note-mindmap-empty {
  border-radius: 0 !important;
  background: #17343a !important;
  box-shadow: none !important;
}
.workspace-mode .note-ai-panel { border-color: #51467b !important; background: #111a25 !important; }
.workspace-mode .note-ai-panel > header { border-bottom-color: #383153 !important; }
.workspace-mode .note-ai-message { border-radius: 0 !important; box-shadow: none !important; }

/* Dialogs and discovery surfaces use the same solid task surface. */
.workspace-mode .material-dialog,
.workspace-mode .source-discovery-dialog {
  border-radius: 4px !important;
  border-color: #41636a !important;
  background: #0f222a !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.46) !important;
}
.workspace-mode .material-dialog form,
.workspace-mode .source-discovery-dialog form,
.workspace-mode .source-discovery-dialog form > header { background: #0f222a !important; }
.workspace-mode .material-dialog header button,
.workspace-mode .source-discovery-dialog form > header button {
  border-radius: 3px !important;
  background: #17343b !important;
  box-shadow: none !important;
}
.workspace-mode .material-dialog input,
.workspace-mode .material-dialog textarea,
.workspace-mode .source-discovery-dialog .source-discovery-compose input {
  border-radius: 3px !important;
  background: var(--flat-input) !important;
  box-shadow: none !important;
}
.workspace-mode .material-dialog footer button,
.workspace-mode .source-discovery-dialog footer button,
.workspace-mode .source-discovery-compose > button,
.workspace-mode .source-discovery-advice > button {
  border-radius: 3px !important;
  box-shadow: none !important;
}
.workspace-mode .material-dialog::backdrop,
.workspace-mode .source-discovery-dialog::backdrop,
.workspace-mode .material-dialog.source-discovery-dialog::backdrop {
  background: rgba(0,5,9,.78) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Keep the compact focus dock visible at every desktop width. */
.workspace-mode.learning-mode-focus .source-material-dock {
  opacity: 1 !important;
  background: var(--flat-source) !important;
}

@media (max-width: 800px) {
  .workspace-mode .learning-sources,
  .workspace-mode .learning-content,
  .workspace-mode .learning-notes { border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--flat-line) !important; }
  .workspace-mode .source-library-tools { background: var(--flat-source) !important; }
}

/* Daylight default: the same flat system with paper-like reading contrast. */
.learning-prototype.workspace-mode.reading-soft {
  --flat-bg: #eef3f0;
  --flat-topbar: #ffffff;
  --flat-source: #f7faf8;
  --flat-reader: #fbfcfa;
  --flat-note: #f7faf8;
  --flat-panel: #eef4f1;
  --flat-control: #ffffff;
  --flat-input: #ffffff;
  --flat-line: #c8d8d3;
  --flat-line-soft: #dce7e3;
  --flat-copy: #243f3d;
  --flat-muted: #607a75;
  --learn-cyan: #287f7f;
  --learn-gold: #9a641d;
  --learn-violet: #6954a5;
  color: var(--flat-copy) !important;
  background: var(--flat-bg) !important;
}
.workspace-mode.reading-soft .learning-back,
.workspace-mode.reading-soft .learning-route small,
.workspace-mode.reading-soft .learning-local,
.workspace-mode.reading-soft .learning-topbar-tools,
.workspace-mode.reading-soft .learning-sources header > b,
.workspace-mode.reading-soft .learning-content header > b,
.workspace-mode.reading-soft .learning-notes header > b,
.workspace-mode.reading-soft .learning-boundary,
.workspace-mode.reading-soft .explanation-field small,
.workspace-mode.reading-soft .material-filter-empty,
.workspace-mode.reading-soft .material-ai-actions small { color: var(--flat-muted) !important; }
.workspace-mode.reading-soft .learning-route b,
.workspace-mode.reading-soft .learning-brand,
.workspace-mode.reading-soft .learning-sources h1,
.workspace-mode.reading-soft .learning-notes h1,
.workspace-mode.reading-soft .learning-content h1,
.workspace-mode.reading-soft .note-panel-header h1 { color: #173d40 !important; }
.workspace-mode.reading-soft .learning-brand span { border-color: #8bb9b1 !important; background: #e8f3ef !important; }
.workspace-mode.reading-soft .reading-controls summary {
  border-color: #9bbcb5 !important;
  background: #f3f8f5 !important;
  color: #315b58 !important;
}
.workspace-mode.reading-soft .reading-controls[open] summary {
  border-color: var(--learn-gold) !important;
  background: #fbf2df !important;
  color: #704b17 !important;
}
.workspace-mode.reading-soft .focus-timer,
.workspace-mode.reading-soft .learning-topbar-center .focus-timer {
  border-color: #c8b17d !important;
  background: #fffaf0 !important;
}
.workspace-mode.reading-soft .focus-timer[data-pomodoro-status="running"] { background: #e8f5ef !important; }
.workspace-mode.reading-soft .focus-timer[data-pomodoro-status="complete"] { background: #fbf2df !important; }
.workspace-mode.reading-soft .focus-timer-copy small,
.workspace-mode.reading-soft .focus-timer-settings summary { color: #7a6a4c !important; }
.workspace-mode.reading-soft .focus-timer-copy b,
.workspace-mode.reading-soft .focus-timer-mode,
.workspace-mode.reading-soft .focus-timer-display { color: #604b2a !important; }
.workspace-mode.reading-soft .focus-timer-primary,
.workspace-mode.reading-soft .focus-timer-settings > summary {
  border-color: #c9ad70 !important;
  background: #fff8e9 !important;
  color: #77521c !important;
}
.workspace-mode.reading-soft .reading-panel,
.workspace-mode.reading-soft .focus-timer-panel {
  border-color: #9bbcb5 !important;
  background: #ffffff !important;
  color: #244d4e !important;
}
.workspace-mode.reading-soft .reading-panel legend,
.workspace-mode.reading-soft .reading-panel p,
.workspace-mode.reading-soft .focus-timer-panel legend,
.workspace-mode.reading-soft .focus-timer-panel p { color: #607a75 !important; }
.workspace-mode.reading-soft .reading-options button,
.workspace-mode.reading-soft .focus-timer-panel button {
  border-color: #b7cec7 !important;
  background: #f5faf7 !important;
  color: #426966 !important;
}
.workspace-mode.reading-soft .reading-options button[aria-pressed="true"],
.workspace-mode.reading-soft .focus-timer-panel button[aria-pressed="true"] {
  border-color: #287f7f !important;
  background: #d9eee9 !important;
  color: #245f5c !important;
}
.workspace-mode.reading-soft .learning-mode-controls { border-color: var(--flat-line) !important; background: #ffffff !important; }
.workspace-mode.reading-soft .learning-mode-controls-label { color: #587572 !important; }
.workspace-mode.reading-soft .learning-mode-options button,
.workspace-mode.reading-soft .learning-mode-controls--topbar {
  border-color: #b7cec7 !important;
  background: #f7faf8 !important;
  color: #426966 !important;
}
.workspace-mode.reading-soft .learning-mode-options button[aria-pressed="true"],
.workspace-mode.reading-soft .learning-mode-controls--topbar .learning-mode-options button[aria-pressed="true"] {
  border-color: var(--learn-gold) !important;
  background: #f3e4c5 !important;
  color: #624516 !important;
}
.workspace-mode.reading-soft .learning-mode-options button small { color: #6b8681 !important; }
.workspace-mode.reading-soft .learning-mode-options button[aria-pressed="true"] small { color: #806332 !important; }
.workspace-mode.reading-soft .material-toolbar,
.workspace-mode.reading-soft .material-filter-bar { border-color: var(--flat-line) !important; background: var(--flat-panel) !important; }
.workspace-mode.reading-soft .material-toolbar > button,
.workspace-mode.reading-soft .material-tabs button,
.workspace-mode.reading-soft .material-filter-bar button,
.workspace-mode.reading-soft .source-library-tools label,
.workspace-mode.reading-soft .source-library-tools > button,
.workspace-mode.reading-soft .source-material-dock button {
  border-color: #b7cec7 !important;
  background: #ffffff !important;
  color: #426966 !important;
}
.workspace-mode.reading-soft .material-toolbar > button:hover,
.workspace-mode.reading-soft .material-toolbar > button:focus-visible,
.workspace-mode.reading-soft .material-tabs button:hover,
.workspace-mode.reading-soft .material-tabs button:focus-visible,
.workspace-mode.reading-soft .source-library-tools label:focus-within,
.workspace-mode.reading-soft .source-library-tools > button:hover,
.workspace-mode.reading-soft .source-library-tools > button:focus-visible,
.workspace-mode.reading-soft .source-material-dock button:hover,
.workspace-mode.reading-soft .source-material-dock button:focus-visible {
  border-color: #287f7f !important;
  background: #eef8f5 !important;
}
.workspace-mode.reading-soft .material-toolbar > button > span,
.workspace-mode.reading-soft .source-material-dock button > span { background: #e3f3ef !important; }
.workspace-mode.reading-soft .material-filter-bar button[aria-pressed="true"] {
  background: color-mix(in srgb,var(--source-color) 13%,#ffffff) !important;
  color: var(--source-color) !important;
  box-shadow: inset 0 -2px 0 var(--source-color) !important;
}
.workspace-mode.reading-soft .source-library-tools > button[aria-pressed="true"] {
  border-color: var(--learn-gold) !important;
  background: #f3e4c5 !important;
  color: #624516 !important;
}
.workspace-mode.reading-soft .source-material-dock { border-top-color: var(--flat-line) !important; background: var(--flat-source) !important; }
.workspace-mode.reading-soft .learning-source-card,
.workspace-mode.reading-soft .learning-source-card:hover { background: #ffffff !important; }
.workspace-mode.reading-soft .learning-source-card.is-active { background: #eef8f5 !important; }
.workspace-mode.reading-soft .source-open b,
.workspace-mode.reading-soft .source-card-title b { color: #244d4e !important; }
.workspace-mode.reading-soft .source-open small,
.workspace-mode.reading-soft .source-open span,
.workspace-mode.reading-soft .source-card-title span,
.workspace-mode.reading-soft .source-card-summary,
.workspace-mode.reading-soft .learning-source-card > footer span,
.workspace-mode.reading-soft .learning-source-card > footer small { color: #657e79 !important; }
.workspace-mode.reading-soft .source-toggle { background: #f5faf7 !important; color: #456b68 !important; }
.workspace-mode.reading-soft .source-card-summary textarea { border-color: #b7cec7 !important; background: #f8fbf9 !important; color: #294c49 !important; }
.workspace-mode.reading-soft .learning-source-card > footer { border-top-color: var(--flat-line-soft) !important; }
.workspace-mode.reading-soft .learning-source-card > footer button { background: #f0f7f4 !important; }
.workspace-mode.reading-soft .today-learning-context { border-color: #c9ad70 !important; background: #fffaf0 !important; }
.workspace-mode.reading-soft .today-learning-signal { background: #fff3d7 !important; }
.workspace-mode.reading-soft .today-learning-copy h2 { color: #263f3c !important; }
.workspace-mode.reading-soft .today-learning-copy p { color: #5c716e !important; }
.workspace-mode.reading-soft .today-learning-context-grid,
.workspace-mode.reading-soft .today-learning-context-grid > div { border-color: #e4d5b7 !important; }
.workspace-mode.reading-soft .today-learning-context-grid dd { color: #344e4b !important; }
.workspace-mode.reading-soft .today-learning-boundary { background: #fbf0d9 !important; color: #785f3c !important; }
.workspace-mode.reading-soft .material-empty { border-color: #a7c5bd !important; background: #f2f8f5 !important; }
.workspace-mode.reading-soft .material-empty h2 { color: #244d4e !important; }
.workspace-mode.reading-soft .material-empty p { color: #607a75 !important; }
.workspace-mode.reading-soft .material-viewer { border-color: #9bbcb5 !important; background: #f5faf7 !important; }
.workspace-mode.reading-soft .material-viewer > header { background: #eaf4f0 !important; border-color: var(--flat-line-soft) !important; }
.workspace-mode.reading-soft .material-viewer > header h2,
.workspace-mode.reading-soft .material-document,
.workspace-mode.reading-soft .material-file-preview h2 { color: #244d4e !important; }
.workspace-mode.reading-soft .material-viewer > header small,
.workspace-mode.reading-soft .material-viewer > header time,
.workspace-mode.reading-soft .material-file-preview p,
.workspace-mode.reading-soft .material-link-preview p { color: #607a75 !important; }
.workspace-mode.reading-soft .material-extraction { border-color: #c1b7df !important; background: #f0ecfa !important; }
.workspace-mode.reading-soft .learning-content blockquote { border-color: #a6c9c1 !important; background: #edf7f4 !important; }
.workspace-mode.reading-soft .learning-content blockquote p { color: #294c49 !important; }
.workspace-mode.reading-soft .local-explanation { border-color: #c1b7df !important; background: #f0ecfa !important; }
.workspace-mode.reading-soft .local-explanation p { color: #536078 !important; }
.workspace-mode.reading-soft .clip-to-note { border-color: #287f7f !important; background: #287f7f !important; color: #ffffff !important; }
.workspace-mode.reading-soft .clip-to-note:hover { background: #205f5f !important; }
.workspace-mode.reading-soft .material-timeline-feed::before { background: #9cc5bc !important; }
.workspace-mode.reading-soft .material-timeline-entry::before { background: #f7faf8 !important; box-shadow: none !important; }
.workspace-mode.reading-soft .note-board { border-color: #b7cec7 !important; background: #ffffff !important; }
.workspace-mode.reading-soft .note-editor { color: #294c49 !important; }
.workspace-mode.reading-soft .note-editor:empty::before { color: #82928f !important; }
.workspace-mode.reading-soft .note-source-block { background: #e7f3ef !important; }
.workspace-mode.reading-soft .note-ai-entry { background: #eeeafb !important; }
.workspace-mode.reading-soft .note-toolbar-assistant button,
.workspace-mode.reading-soft .note-toolbar-edit > button,
.workspace-mode.reading-soft .note-toolbar-edit summary,
.workspace-mode.reading-soft .note-color-tool { border-color: #b7cec7 !important; background: #ffffff !important; color: #456764 !important; }
.workspace-mode.reading-soft .note-toolbar-assistant button:hover,
.workspace-mode.reading-soft .note-toolbar-assistant button:focus-visible,
.workspace-mode.reading-soft .note-toolbar-edit > button:hover,
.workspace-mode.reading-soft .note-toolbar-edit > button:focus-visible,
.workspace-mode.reading-soft .note-toolbar-edit summary:hover,
.workspace-mode.reading-soft .note-toolbar-edit summary:focus-visible { border-color: #287f7f !important; background: #eef8f5 !important; }
.workspace-mode.reading-soft .note-font-menu > div,
.workspace-mode.reading-soft .note-underline-menu > div,
.workspace-mode.reading-soft .note-shape-menu > div { border-color: #b7cec7 !important; background: #ffffff !important; }
.workspace-mode.reading-soft .note-mindmap-workspace { background: #ffffff !important; }
.workspace-mode.reading-soft .note-mindmap-workspace > header { background: #eef6f2 !important; border-bottom-color: var(--flat-line) !important; }
.workspace-mode.reading-soft .note-mindmap-canvas { background: #f7faf8 !important; }
.workspace-mode.reading-soft .note-mindmap-node,
.workspace-mode.reading-soft .note-mindmap-empty { background: #e7f3ef !important; color: #315451 !important; }
.workspace-mode.reading-soft .note-ai-panel { border-color: #c1b7df !important; background: #ffffff !important; }
.workspace-mode.reading-soft .note-ai-panel > header { border-bottom-color: #ded8f1 !important; }
.workspace-mode.reading-soft .note-ai-message { background: #edf5f1 !important; color: #294b48 !important; }
.workspace-mode.reading-soft .note-ai-turn.is-user .note-ai-message { background: #eeeafb !important; }
.workspace-mode.reading-soft .material-dialog,
.workspace-mode.reading-soft .source-discovery-dialog,
.workspace-mode.reading-soft .material-dialog form,
.workspace-mode.reading-soft .source-discovery-dialog form,
.workspace-mode.reading-soft .source-discovery-dialog form > header { border-color: #9bbcb5 !important; background: #ffffff !important; color: #244d4e !important; }
.workspace-mode.reading-soft .material-dialog header button,
.workspace-mode.reading-soft .source-discovery-dialog form > header button { background: #edf6f2 !important; color: #315b58 !important; }
.workspace-mode.reading-soft .material-dialog input,
.workspace-mode.reading-soft .material-dialog textarea,
.workspace-mode.reading-soft .source-discovery-dialog .source-discovery-compose input { background: #f8fbf9 !important; color: #244d4e !important; }

/* Keep the source assistant as one opaque task surface in daytime mode too. */
.workspace-mode.reading-soft .source-discovery-dialog,
.workspace-mode.reading-soft .source-discovery-dialog form,
.workspace-mode.reading-soft .source-discovery-dialog form > header {
  border-color: #41636a !important;
  background: #081923 !important;
  color: #edf8f5 !important;
}
.workspace-mode.reading-soft .source-discovery-dialog form > header h2 { color: #f4fbf8 !important; }
.workspace-mode.reading-soft .source-discovery-dialog .source-discovery-compose input {
  border-color: rgba(103,228,214,.42) !important;
  background: #03131d !important;
  color: #f0fbf8 !important;
}

/* The notes column can be narrow even when the browser viewport is wide.
   Use its own inline size so the heading never competes with edit controls. */
.workspace-mode .learning-notes { container: note-panel / inline-size; }
@container note-panel (max-width: 460px) {
  .workspace-mode .note-panel-header {
    display: grid;
    flex: 0 0 auto;
    min-height: 0;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center !important;
    gap: 7px 8px;
  }
  .workspace-mode .note-panel-header h1 {
    grid-column: 1;
    grid-row: 1;
  }
  .workspace-mode .note-panel-header > .note-save-state {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }
  .workspace-mode .note-panel-header .note-toolbar-edit {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 !important;
    overflow: visible;
  }
  .workspace-mode .note-panel-header .note-toolbar-edit > details,
  .workspace-mode .note-panel-header .note-toolbar-edit > .note-color-tool,
  .workspace-mode .note-panel-header .note-toolbar-edit > .note-icon-button {
    flex: 0 0 36px;
  }
}

/* Responsive desktop frame: preserve readable labels on notebook displays and
   move the mode switch to a second topbar row before controls begin to collide. */
@media (max-width: 1500px) and (min-width: 1200px) {
  .workspace-mode .learning-topbar-center .focus-timer {
    width: clamp(500px,42vw,610px);
  }
  .workspace-mode .learning-mode-controls--topbar .learning-mode-controls-label {
    display: none;
  }
  .workspace-mode .learning-mode-controls--topbar .learning-mode-options button {
    min-width: 48px;
    padding-right: 5px;
    padding-left: 5px;
  }
  .workspace-mode .learning-mode-controls--topbar .learning-mode-options button b {
    font-size: 10px;
  }
  .workspace-mode .learning-local {
    gap: 5px;
    font-size: 12px;
  }
  .workspace-mode .learning-topbar-tools {
    gap: 10px;
  }
}

@media (max-width: 1199px) and (min-width: 801px) {
  .workspace-mode .learning-topbar {
    height: 116px;
    grid-template-columns: minmax(120px,1fr) minmax(400px,560px) minmax(126px,1fr);
    grid-template-rows: 68px 48px;
    padding: 0 18px;
  }
  .workspace-mode .learning-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .workspace-mode .learning-topbar-center {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }
  .workspace-mode .learning-topbar-center .focus-timer {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(112px,1fr) 70px 70px;
  }
  .workspace-mode .learning-topbar-center .focus-timer-mode,
  .workspace-mode .learning-topbar-center .focus-timer-display {
    font-size: 25px;
  }
  .workspace-mode .learning-topbar-tools {
    display: contents;
  }
  .workspace-mode .learning-mode-controls--topbar {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(560px,calc(100% - 20px));
    min-height: 38px;
  }
  .workspace-mode .learning-mode-controls--topbar .learning-mode-options {
    flex: 1;
  }
  .workspace-mode .learning-mode-controls--topbar .learning-mode-options button {
    flex: 1 1 0;
    min-width: 0;
  }
  .workspace-mode .learning-mode-controls--topbar .learning-mode-controls-label {
    display: inline;
  }
  .workspace-mode .learning-local {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    gap: 5px;
    font-size: 0;
  }
  .workspace-mode .learning-local span::after {
    content: "已保存";
    font-size: 11px;
  }
  .workspace-mode .reading-controls {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .workspace-mode .reading-controls summary {
    width: 38px;
    min-width: 38px;
    padding: 0;
    justify-content: center;
  }
  .workspace-mode .reading-controls summary b {
    display: none;
  }
  .workspace-mode .learning-workspace {
    height: calc(100dvh - 116px);
  }
  .workspace-mode .learning-workspace.learning-mode-focus {
    grid-template-columns: minmax(160px,.72fr) minmax(400px,2.5fr) minmax(190px,.86fr);
  }
  .workspace-mode .learning-workspace.learning-mode-notes {
    grid-template-columns: minmax(150px,.72fr) minmax(340px,1.35fr) minmax(250px,1.5fr);
  }
  .workspace-mode .learning-workspace.learning-mode-browse {
    grid-template-columns: minmax(230px,1.55fr) minmax(350px,1.45fr) minmax(170px,.75fr);
  }
  .workspace-mode .learning-sources,
  .workspace-mode .learning-notes {
    padding-right: 12px;
    padding-left: 12px;
  }
  .workspace-mode .learning-content {
    padding-left: 14px;
  }
}

/* V1.3.1 learning consolidation: source search, read states and quiet autosave. */
.workspace-mode .learning-local {
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.workspace-mode .source-library-lookup {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px;
  min-width: 0;
  align-items: center;
}
.workspace-mode .source-search-control {
  display: flex;
  min-width: 0;
  height: 32px;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 0 8px;
  border: 1px solid var(--flat-line) !important;
  border-radius: 4px;
  background: var(--flat-input) !important;
  color: var(--flat-muted);
}
.workspace-mode .source-search-control:focus-within { border-color: var(--learn-cyan) !important; }
.workspace-mode .source-search-control input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--flat-copy); font-size: 10px; }
.workspace-mode .source-search-control input::placeholder { color: var(--flat-muted); }
.workspace-mode .source-library-tools { display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
.workspace-mode .source-reading-filter {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid var(--flat-line-soft);
  border-radius: 4px;
  background: var(--flat-panel);
}
.workspace-mode .source-reading-filter-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.workspace-mode .source-reading-filter-heading b { color: var(--flat-copy); font-size: 10px; font-weight: 600; }
.workspace-mode .source-reading-filter-heading small { color: var(--flat-muted); font-size: 8px; }
.workspace-mode .source-reading-filter-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.workspace-mode .source-reading-filter-options button { display: flex; min-width: 0; min-height: 30px; align-items: center; justify-content: space-between; gap: 4px; padding: 0 7px; border: 1px solid var(--flat-line-soft); border-radius: 3px; background: var(--flat-control); color: var(--flat-muted); cursor: pointer; }
.workspace-mode .source-reading-filter-options button span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-mode .source-reading-filter-options button b { color: var(--flat-copy); font: 11px "IBM Plex Mono",Consolas,monospace; }
.workspace-mode .source-reading-filter-options button:hover,
.workspace-mode .source-reading-filter-options button:focus-visible { border-color: var(--learn-cyan); color: var(--flat-copy); outline: 0; }
.workspace-mode .source-reading-filter-options .source-reading-filter-unread[aria-pressed="true"] { border-color: var(--learn-gold); background: #3a3020; color: #f1d39a; }
.workspace-mode .source-reading-filter-options .source-reading-filter-unread[aria-pressed="true"] b { color: var(--learn-gold); }
.workspace-mode .source-reading-filter-options .source-reading-filter-read[aria-pressed="true"] { border-color: var(--learn-cyan); background: #1d4546; color: #c4eee5; }
.workspace-mode .source-reading-filter-options .source-reading-filter-read[aria-pressed="true"] b { color: var(--learn-cyan); }
.workspace-mode .source-read-state { display: inline-flex; min-width: 0; align-items: center; gap: 4px; margin-left: auto; color: var(--flat-muted); font-size: 8px; white-space: nowrap; }
.workspace-mode .source-read-state i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.workspace-mode .source-read-unread .source-read-state { color: var(--learn-gold); font-weight: 650; }
.workspace-mode .source-read-unread .source-read-state i { box-shadow: 0 0 7px var(--learn-gold) !important; }
.workspace-mode .source-read-read { filter: saturate(.82); }
.workspace-mode .source-read-read .source-read-state { color: #6faaa4; opacity: .85; }
.workspace-mode .source-read-read .source-read-state i { box-shadow: none !important; }
.workspace-mode .source-read-read .source-card-title b { color: #b8cbc7; }
.workspace-mode .source-read-read .source-type-badge { opacity: .78; }
.workspace-mode.reading-soft .source-search-control { border-color: var(--flat-line) !important; background: var(--flat-input) !important; color: var(--flat-muted); }
.workspace-mode.reading-soft .source-reading-filter { border-color: var(--flat-line); background: var(--flat-panel); }
.workspace-mode.reading-soft .source-reading-filter-options button { border-color: var(--flat-line); background: #ffffff; color: var(--flat-muted); }
.workspace-mode.reading-soft .source-reading-filter-options .source-reading-filter-unread[aria-pressed="true"] { border-color: var(--learn-gold); background: #fff3d7; color: #654817; }
.workspace-mode.reading-soft .source-reading-filter-options .source-reading-filter-read[aria-pressed="true"] { border-color: var(--learn-cyan); background: #d5ece6; color: #246664; }
.workspace-mode.reading-soft .source-read-unread .source-read-state { color: #b87a20; }
.workspace-mode.reading-soft .source-read-read .source-read-state { color: #4c8c85; }

/* Compact source cards: the rail identifies a source; editing stays in the reader. */
.workspace-mode .source-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-content: initial;
  gap: 10px;
  padding-left: 0;
}
.workspace-mode .source-list::before,
.workspace-mode .learning-source-card::before { display: none; }
.workspace-mode .learning-source-card {
  flex: 0 0 auto;
  min-height: 92px;
  overflow: hidden;
  border-top: 1px solid var(--flat-line-soft) !important;
  border-right: 1px solid var(--flat-line-soft) !important;
  border-bottom: 1px solid var(--flat-line-soft) !important;
  border-left: 3px solid var(--source-color) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(2,17,22,.05) !important;
}
.workspace-mode .learning-source-card:hover {
  border-top-color: color-mix(in srgb,var(--source-color) 32%,var(--flat-line-soft)) !important;
  border-right-color: color-mix(in srgb,var(--source-color) 32%,var(--flat-line-soft)) !important;
  border-bottom-color: color-mix(in srgb,var(--source-color) 32%,var(--flat-line-soft)) !important;
}
.workspace-mode .learning-source-card + .learning-source-card { margin-top: 0; }
.workspace-mode .source-card-top { min-height: 27px; padding: 7px 10px 3px; }
.workspace-mode .source-type-badge { gap: 4px; font-size: 8px; }
.workspace-mode .source-type-badge i {
  min-width: 18px;
  height: 18px;
  border-radius: 4px;
}
.workspace-mode .source-favorite { width: 24px; height: 24px; font-size: 15px; }
.workspace-mode .source-card-thumbnail {
  display: none;
}
.workspace-mode .source-card-title { min-height: 36px; padding: 4px 10px 6px; }
.workspace-mode .source-card-title b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.workspace-mode .learning-source-card > footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px 9px;
  border-top: 1px solid color-mix(in srgb,var(--source-color) 12%,var(--flat-line-soft)) !important;
}
.workspace-mode .source-card-origin {
  overflow: hidden;
  min-width: 0;
  color: var(--flat-muted);
  font-size: 8px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-mode .source-card-actions { flex: 0 0 auto; gap: 4px; }
.workspace-mode .learning-source-card > footer button {
  min-width: 44px;
  height: 25px;
  padding: 0 7px;
  font-size: 8px;
}
.workspace-mode .learning-source-card > footer .source-remove {
  min-width: 25px;
  width: 25px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

/* Source references share the soft panel language and read as one compact label. */
.workspace-mode .note-source-block[data-note-source-id] {
  position: relative;
  margin: 10px 0;
  padding: 9px 68px 9px 42px;
  border: 1px solid #31545b;
  border-left: 3px solid var(--learn-cyan);
  border-radius: 8px !important;
  background: #17353a !important;
  box-shadow: 0 6px 18px rgba(2,17,22,.1) !important;
}
.workspace-mode .note-source-block[data-note-source-id]::before {
  content: "↗";
  position: absolute;
  top: 10px;
  left: 11px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid color-mix(in srgb,var(--learn-cyan) 45%,transparent);
  border-radius: 6px;
  color: var(--learn-cyan);
  font: 11px/1 "IBM Plex Mono",Consolas,monospace;
}
.workspace-mode .note-source-block[data-note-source-id]::after { content: "定位"; top: 13px; right: 39px; font-size: 8px; }
.workspace-mode .note-source-block[data-note-source-id] > p {
  display: block;
  overflow: hidden;
  margin: 0;
  color: var(--flat-copy);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-mode .note-source-block[data-note-source-id] > p strong { font-weight: 600; }
.workspace-mode .note-source-block[data-note-source-id] > cite {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--flat-muted);
  font-size: 8px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-mode .note-source-block[data-note-source-id] > .note-image {
  max-height: 160px;
  margin: 0 0 8px;
}
.workspace-mode .note-source-remove {
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-color: transparent;
  background: transparent;
  color: var(--flat-muted);
}
.workspace-mode .note-source-remove:hover,
.workspace-mode .note-source-remove:focus-visible {
  border-color: color-mix(in srgb,var(--learn-cyan) 34%,transparent);
  background: color-mix(in srgb,var(--learn-cyan) 10%,transparent);
  color: var(--flat-copy);
}
.workspace-mode.reading-soft .note-source-block[data-note-source-id] {
  border-color: #c5dcd5;
  border-left-color: #287f7f;
  background: #edf7f4 !important;
  box-shadow: 0 6px 18px rgba(53,76,70,.07) !important;
}
.workspace-mode.reading-soft .note-source-block[data-note-source-id]::before {
  border-color: #a9d2ca;
  background: #ffffff;
  color: #287f7f;
}
.workspace-mode.reading-soft .note-source-block[data-note-source-id]::after { color: #527975; }
.workspace-mode.reading-soft .note-source-block[data-note-source-id] > p { color: #294c49; }
.workspace-mode.reading-soft .note-source-block[data-note-source-id] > cite { color: #6c847f; }
.workspace-mode.reading-soft .note-source-remove { color: #718984; }
@media (max-width: 800px) {
  .workspace-mode .source-library-lookup { grid-template-columns: minmax(0,1fr) auto; }
  .workspace-mode .source-library-lookup .source-ai-discovery-button { padding-right: 7px; padding-left: 7px; }
  .workspace-mode .source-reading-filter-options button { min-height: 32px; }
  .workspace-mode .source-list { gap: 12px; }
}