/* Dojo — quiet surfaces, translucent folders, and room to think. */
body.study-open, body.study-session-open, .study-view, .study-session, .study-note-overlay {
  --study-board: var(--bg);
  --study-ink: var(--text);
  --study-muted: var(--text-secondary);
  --study-stroke: var(--border);
  --study-paper: var(--bg);
  --study-paper-ink: var(--text);
  --study-blue: #4d85d8;
  --study-orange: #c58a41;
  --study-purple: #9572d0;
  --study-red: var(--danger);
  --study-green: #479a83;
  --dojo-flashcards: #5b9d63;
  --dojo-podcast: #c8618a;
  --dojo-tutor: #3f9fc4;
  --dojo-tutor-sky: #8fd2f5;
  --dojo-tutor-grass: #a6e39a;
  --dojo-tutor-hue: linear-gradient(120deg, var(--dojo-tutor-grass), var(--dojo-tutor-sky));
  --study-font: var(--font-sans);
  --study-note: var(--font-sans);
  --dojo-surface: var(--bg);
  --dojo-soft: var(--bg-secondary);
  --dojo-hue-a: #bde6ff;
  --dojo-hue-b: #9fd9fb;
  --dojo-hue-c: #66bdf6;
  --dojo-hue-depth: #58aef0;
  --dojo-display: "Avenir Next", Avenir, var(--font-sans);
}
body[data-mode="dark"] .study-view, body[data-mode="dark"] .study-session, body[data-mode="dark"] .study-note-overlay {
  --dojo-surface: color-mix(in srgb, var(--bg) 60%, var(--bg-secondary));
  --study-paper: var(--bg-secondary);
  --study-blue: #8cb8f6;
  --study-orange: #e6b473;
  --study-purple: #bca1ed;
  --study-green: #82cdb5;
  --dojo-podcast: #f09dbd;
  --dojo-tutor: #9ad6f2;
}
body[data-mode="dark"].study-open { --dojo-flashcards: #a4d989; --dojo-podcast: #f09dbd; --dojo-tutor: #9ad6f2; }
body.study-open .home-wallpaper, body.study-session-open .home-wallpaper { visibility: hidden !important; }
body.study-open .app-shell, body.study-open .chat-panel { background: var(--study-board); }
body.study-open .chat-panel { min-width: 0; }
body.study-open .chat-topbar, body.study-open .temporary-chat-toggle { display: none; }
body.study-open .sidebar { background: var(--study-board); }
.sidebar-nav-item.active { background: var(--bg-secondary); }
.study-svg-defs { display: none; }
.study-view, .study-session { color: var(--study-ink); font-family: var(--study-font); }
.study-view { --study-font: var(--dojo-display); }
.study-view { position: relative; z-index: 3; display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: auto; padding: 36px clamp(24px, 4.5vw, 72px); }
.study-page { width: 100%; max-width: 1200px; margin: 0 auto; }
.dojo-section-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; margin: 0 0 14px; }
.dojo-section-label svg { width: 19px; }
.study-kicker { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.study-page h1 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 650; line-height: 1.2; letter-spacing: -.045em; }
.study-page--library { max-width: 1040px; padding: clamp(12px, 4vh, 48px) 0 48px; }
.dojo-library-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 0 clamp(34px, 6vh, 60px); }
.dojo-wordmark { width: clamp(200px, 22vw, 290px); height: auto; overflow: visible; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--dojo-hue-b) 22%, transparent)); }
.dojo-wordmark-depth { fill: var(--dojo-hue-depth); }
.dojo-wordmark-spark { fill: var(--dojo-hue-a); }
.dojo-library-title { display: flex; align-items: baseline; gap: 10px; padding-left: 4px; }
.dojo-library-title h1 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--text-secondary); }
.dojo-library-title > span { padding: 2px 9px; border-radius: 999px; background: var(--dojo-soft); font-size: 12px; font-weight: 600; color: var(--study-muted); white-space: nowrap; }
.study-course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 236px)); justify-content: center; gap: 22px; }
.study-course-card { --folder-light: #9ad8c4; --folder-deep: #4fa58c; position: relative; min-width: 0; padding: 22px 16px 20px; border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--folder-deep) 7%, var(--dojo-surface)) 0%, var(--dojo-surface) 62%); color: var(--text); text-align: left; font: inherit; box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent); transition: transform 260ms cubic-bezier(.23,1,.32,1), box-shadow 260ms ease, border-color 200ms ease; }
.dojo-tone--clay { --folder-light: #f6c996; --folder-deep: #d98c4c; }
.dojo-tone--blue { --folder-light: #a7c9f7; --folder-deep: #5a8ee0; }
.dojo-tone--lilac { --folder-light: #cdb8f5; --folder-deep: #8e6dd8; }
.dojo-tone--rose { --folder-light: #f5b8c8; --folder-deep: #d7718f; }
.dojo-tone--new { --folder-light: #c9d3e2; --folder-deep: #8796ae; }
.study-course-open { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.dojo-course-label { display: block; width: 100%; padding: 0 6px; }
.study-course-card strong { display: block; max-width: calc(100% - 25px); overflow: hidden; text-overflow: ellipsis; font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; white-space: nowrap; }
.study-course-new { display: flex; flex-direction: column; align-items: center; cursor: pointer; border: 1.5px dashed color-mix(in srgb, var(--text) 13%, transparent); background: color-mix(in srgb, var(--dojo-surface) 55%, transparent); box-shadow: none; }
.study-course-new strong { color: var(--text); }
.dojo-course-enter { position: absolute; right: 20px; bottom: 21px; color: var(--text-tertiary); transition: transform 220ms cubic-bezier(.23,1,.32,1), color 160ms ease; }
.dojo-first-hint { max-width: 360px; margin-top: 30px; color: var(--study-muted); font-size: 13px; line-height: 1.8; }
.dojo-folder { width: 100%; max-width: 190px; height: 172px; overflow: visible; margin-bottom: 14px; }
.dojo-folder-back { stroke: color-mix(in srgb, var(--folder-deep) 70%, white); stroke-opacity: .5; }
.dojo-folder-shadow { fill: var(--folder-deep); opacity: .16; transition: opacity 260ms ease; }
.dojo-folder-sheet { transform-origin: 100px 150px; transition: transform 340ms cubic-bezier(.23,1,.32,1); }
.dojo-folder-sheet rect { fill: #fdfdfb; stroke: color-mix(in srgb, var(--folder-deep) 22%, #e6e8ea); }
.dojo-folder-sheet path { stroke: color-mix(in srgb, var(--folder-deep) 30%, #cfd4d8); stroke-width: 2.2; stroke-linecap: round; }
.dojo-folder-sheet--one { transform: rotate(-6deg); }
.dojo-folder-sheet--two { transform: rotate(5deg); }
.dojo-folder-sheet--three { transform: rotate(-2deg); }
/* New course: sheets start out and tuck in on hover. */
.dojo-folder--new .dojo-folder-sheet--one { transform: translate(-7px, -20px) rotate(-13deg); }
.dojo-folder--new .dojo-folder-sheet--two { transform: translate(7px, -27px) rotate(11deg); }
.dojo-folder--new .dojo-folder-sheet--three { transform: translateY(-13px) rotate(-3deg); }
.dojo-folder-front { stroke: color-mix(in srgb, var(--folder-light) 55%, white); stroke-opacity: .7; stroke-width: 1; }
.dojo-folder-rim { stroke: #fff; opacity: .6; stroke-width: 1.5; stroke-linecap: round; }
.dojo-folder-label { fill: #fff; opacity: .7; }
.dojo-folder-badge { fill: #fff; fill-opacity: .3; stroke: #fff; stroke-opacity: .55; transition: fill-opacity 200ms ease; }
.dojo-folder-plus { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
body[data-mode="dark"] .dojo-folder-sheet rect { fill: #e9ebee; }
.study-course-card > .study-card-menu-wrap { top: 10px; right: 10px; }
.study-course-card .study-menu { top: 30px; }
.study-view.study-view--detail { padding: 0 20px 20px; overflow: hidden; }
.study-view--detail { --study-font: "Avenir Next", Avenir, var(--font-sans); }
.study-detail, .study-detail-body { display: flex; flex: 1; flex-direction: column; min-height: 0; width: 100%; }
.study-detail-header { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.dojo-breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dojo-breadcrumb > span { flex-shrink: 0; width: 2px; height: 19px; margin: 1px 2px 0 0; border-radius: 2px; background: color-mix(in srgb, var(--dojo-hue-c) 55%, var(--text-tertiary)); font-size: 0; transform: rotate(18deg); }
.study-back-btn { border: 0; background: transparent; color: var(--text); font-size: 18px; font-weight: 650; display: inline-flex; align-items: center; gap: 9px; padding: 6px; border-radius: 10px; cursor: pointer; transition: transform 140ms var(--ease-out); }
.study-back-btn:active { transform: scale(.97); }
.study-back-btn:has(.dojo-wordmark--crumb) { padding: 4px 2px; }
.dojo-wordmark--crumb { width: 74px; filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--dojo-hue-b) 26%, transparent)); }
.study-title-input { width: min(32vw, 360px); min-width: 60px; border: 0; padding: 8px 0; background: transparent; color: var(--study-ink); font: 600 16px var(--study-font); text-overflow: ellipsis; }
.study-tabs { display: none; }
.dojo-workspace { display: grid; grid-template-columns: clamp(230px, 17vw, 300px) minmax(340px, 1fr) minmax(270px, 25vw); gap: 12px; flex: 1; min-height: 0; position: relative; }
/* Panel resize: a grab strip sits in each gap beside Ask. */
.dojo-resizer { position: absolute; top: 12px; bottom: 12px; z-index: 6; width: 14px; margin-left: -7px; cursor: col-resize; touch-action: none; outline: none; }
.dojo-resizer::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: min(56px, 30%); border-radius: 999px; background: color-mix(in srgb, var(--text) 38%, transparent); opacity: 0; transform: translate(-50%, -50%) scaleY(.6); transition: opacity 160ms ease, transform 200ms var(--ease-out), height 200ms var(--ease-out); }
.dojo-resizer:hover::after, .dojo-resizer:focus-visible::after { opacity: 1; transform: translate(-50%, -50%); }
.dojo-resizer.is-dragging::after { opacity: 1; height: 100%; background: color-mix(in srgb, var(--accent) 70%, transparent); transform: translate(-50%, -50%); }
.dojo-workspace[data-sources-collapsed="true"] > .dojo-resizer[data-panel-resize="sources"],
.dojo-workspace[data-studio-collapsed="true"] > .dojo-resizer[data-panel-resize="studio"] { display: none; }
body.dojo-resizing { cursor: col-resize; user-select: none; }
body.dojo-resizing iframe, body.dojo-resizing .dojo-workspace > .dojo-panel { pointer-events: none; }
@media (max-width: 760px) { .dojo-resizer { display: none; } }
.dojo-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--dojo-surface); border: 1px solid var(--study-stroke); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px #00000003; }
.dojo-panel-header { height: 62px; padding: 0 20px; display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--study-stroke); }
.dojo-panel-header h2 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; }
.dojo-panel-header > svg { width: 16px; color: var(--study-muted); }
.dojo-panel-tag { color: var(--study-muted); font-size: 10px; }
.study-materials { padding: 16px 12px; display: flex; flex: 1; flex-direction: column; overflow: auto; min-height: 0; }
.study-dropzone { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; width: 100%; border: 1px solid var(--accent); border-radius: 11px; background: var(--accent); color: var(--accent-contrast); font: 600 13px var(--study-font); cursor: pointer; }
.study-dropzone.is-dragover { outline: 2px solid var(--study-green); }
.study-dropzone svg { width: 16px; height: 16px; }
.dojo-source-caption { display: flex; justify-content: space-between; margin: calc(24 * var(--dojo-u)) calc(4 * var(--dojo-u)) calc(12 * var(--dojo-u)); font-size: calc(12 * var(--dojo-u)); font-weight: 600; color: var(--study-muted); }
.dojo-source-type-head { margin: 14px 4px 6px; color: var(--study-muted); font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.study-material-board > .dojo-source-type-head:first-child { margin-top: 0; }
.study-material-card { display: flex; align-items: center; gap: 11px; position: relative; padding: 14px 28px 14px 12px; border: 1px solid var(--border-light); background: var(--bg-secondary); border-radius: 12px; margin-bottom: 8px; }
.study-material-card > svg { flex-shrink: 0; color: var(--study-green); width: 19px; }
.study-material-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.study-material-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; }
.study-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--study-muted); }
.study-status.is-failed { color: var(--study-red); }
.dojo-chat-content { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dojo-chat-welcome { margin: auto; padding: 40px clamp(24px, 3vw, 52px); max-width: 510px; }
.dojo-chat-welcome h2 { font-size: clamp(25px, 2.5vw, 34px); font-weight: 600; letter-spacing: -.04em; margin: 0 0 12px; }
.dojo-prompts { display: grid; gap: 9px; margin-top: 24px; }
.dojo-prompts button { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; background: var(--bg); text-align: left; font: 12px var(--study-font); color: var(--study-ink); cursor: pointer; }
.dojo-messages-slot { display: flex; flex: 1; min-height: 0; }
.dojo-messages-slot:has(.messages.hidden), .dojo-messages-slot:empty { display: none; }
.dojo-messages-slot .messages { width: 100%; padding: 24px 20px 170px; gap: 24px; }
.dojo-messages-slot .message { width: 100%; max-width: 100%; }
.dojo-messages-slot .message-body { font-size: 14px; }
.study-composer-slot { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; padding: 12px 24px 18px; background: transparent; pointer-events: none; }
.study-composer-slot .composer-area { position: relative !important; inset: auto !important; padding: 0 !important; width: 100%; background: transparent; }
.study-composer-slot .composer-wrap { max-width: 760px; }
.study-composer-slot .composer { width: 100%; margin: 0; padding: 12px 12px 10px 14px; border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 22px; background: var(--bg); box-shadow: 0 1px 2px #0000000a, 0 10px 30px -14px #00000026; font-family: var(--study-font); transition: border-color 160ms ease, box-shadow 160ms ease; }
.study-composer-slot .composer:focus-within { border-color: color-mix(in srgb, var(--text) 16%, transparent); box-shadow: 0 1px 2px #0000000a, 0 14px 34px -14px #0000002e; }
.study-composer-slot .composer-input { min-height: 32px; }
.study-composer-slot .composer textarea, .study-composer-slot .composer-prompt { font-size: 14px; }
.study-composer-slot .composer-bottom { margin-top: 4px; }
.study-composer-slot .composer-footer { flex-wrap: wrap; }
body.capacitor-native.study-open .study-composer-slot .composer-area .composer-wrap { width: 100%; max-width: 760px; }
body.capacitor-native.study-open .study-composer-slot .composer:not(.compact) { min-height: 58px; padding: 10px 12px !important; border-radius: 16px; }
.dojo-studio-content { display: flex; flex: 1; flex-direction: column; padding: 16px; overflow: hidden; min-height: 0; }
/* Items in the Create panel grow with the screen: 1px up to a 14" laptop, up to 1.3px on a 27" monitor.
   A narrow panel holds them back so labels stay whole; the panel's own width never changes. */
:root { --dojo-u: 1px; }
.dojo-studio { container: dojo-studio / inline-size; }
.dojo-studio .dojo-studio-content { --dojo-u: clamp(1px, min(calc(.42px + .0385vw), calc(.42px + .24cqi)), 1.3px); }
@media (max-width: 760px) { .dojo-studio .dojo-studio-content { --dojo-u: 1px; } }
.dojo-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(6 * var(--dojo-u)); }
.dojo-studio-content .dojo-tools, .dojo-studio-content > .dojo-source-caption { flex-shrink: 0; }
.dojo-studio-content .study-generation-list { flex-shrink: 0; max-height: min(25vh, 180px); overflow-y: auto; }
.dojo-artifacts { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* The collection scrolls as one page, so the create tiles scroll away and leave room for the list. */
.dojo-studio-content.dojo-collection { container-type: inline-size; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dojo-collection .dojo-artifacts { flex: 0 0 auto; overflow: visible; }
.dojo-collection .study-generation-list { max-height: none; overflow: visible; }
.dojo-group { margin-bottom: calc(6 * var(--dojo-u)); }
.dojo-group-head { display: flex; align-items: center; gap: calc(9 * var(--dojo-u)); width: 100%; padding: calc(7 * var(--dojo-u)) calc(8 * var(--dojo-u)) calc(7 * var(--dojo-u)) calc(6 * var(--dojo-u)); border: 0; border-radius: calc(10 * var(--dojo-u)); background: transparent; color: var(--text); font: 600 calc(12 * var(--dojo-u)) var(--study-font); text-align: left; cursor: pointer; transition: background-color 140ms ease; }
.dojo-group-head:hover { background: var(--dojo-soft); }
.dojo-group-head:focus-visible { outline: 2px solid var(--tool-ink); outline-offset: 1px; }
.dojo-group-icon { display: grid; place-items: center; width: calc(22 * var(--dojo-u)); height: calc(22 * var(--dojo-u)); border-radius: calc(7 * var(--dojo-u)); background: color-mix(in srgb, var(--tool-ink) 14%, transparent); color: var(--tool-ink); flex-shrink: 0; }
.dojo-group-icon svg { width: calc(13 * var(--dojo-u)); height: calc(13 * var(--dojo-u)); }
.dojo-group-icon svg.tutor-orb-icon { width: calc(15 * var(--dojo-u)); height: calc(15 * var(--dojo-u)); }
.dojo-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dojo-group-count { padding: 1px calc(7 * var(--dojo-u)); border-radius: 999px; background: var(--dojo-soft); color: var(--study-muted); font-size: calc(10.5 * var(--dojo-u)); font-variant-numeric: tabular-nums; }
.dojo-group-chevron { width: calc(14 * var(--dojo-u)); height: calc(14 * var(--dojo-u)); color: var(--study-muted); transition: transform 220ms var(--ease-out); }
.dojo-group.is-collapsed .dojo-group-chevron { transform: rotate(-90deg); }
.dojo-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 240ms var(--ease-out), opacity 200ms ease; }
.dojo-group.is-collapsed .dojo-group-body { grid-template-rows: 0fr; opacity: 0; }
.dojo-group-list { min-height: 0; overflow: hidden; }
.dojo-group-list > :first-child { margin-top: calc(4 * var(--dojo-u)); }
.dojo-group.is-collapsed .dojo-group-list { visibility: hidden; transition: visibility 0s 240ms; }
@media (prefers-reduced-motion: reduce) { .dojo-group-body, .dojo-group-chevron { transition: none; } }
.dojo-pin-mark { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--study-muted); }
.dojo-pin-mark svg { width: calc(12 * var(--dojo-u)); height: calc(12 * var(--dojo-u)); }
/* Create tools: small pills, icon then label, three to a row. */
.dojo-tool { position: relative; display: flex; align-items: center; min-width: 0; gap: calc(6 * var(--dojo-u)); height: calc(34 * var(--dojo-u)); padding: 0 calc(10 * var(--dojo-u)) 0 calc(5 * var(--dojo-u)); border: 1px solid color-mix(in srgb, var(--tool-ink) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tool-ink) 10%, var(--dojo-surface)); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
.dojo-tool:active { transform: scale(.97); }
.dojo-tool:focus-visible { outline: 2px solid var(--tool-ink); outline-offset: 2px; }
.dojo-tool-icon { display: grid; flex-shrink: 0; place-items: center; width: calc(24 * var(--dojo-u)); height: calc(24 * var(--dojo-u)); border-radius: 50%; background: color-mix(in srgb, var(--tool-ink) 20%, var(--dojo-surface)); color: var(--tool-ink); }
.dojo-tool-icon svg { width: calc(13 * var(--dojo-u)); height: calc(13 * var(--dojo-u)); }
.dojo-tool--flashcards { --tool-ink: var(--dojo-flashcards); }
.dojo-tool--mindmap { --tool-ink: var(--study-blue); }
.dojo-tool--notes { --tool-ink: var(--study-orange); }
.dojo-tool--quiz { --tool-ink: var(--study-purple); }
.dojo-tool--podcast { --tool-ink: var(--dojo-podcast); }
.dojo-tool--tutor { --tool-ink: var(--dojo-tutor); }
.dojo-tool.dojo-tool--tutor { border-color: color-mix(in srgb, var(--dojo-tutor-sky) 40%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--dojo-tutor-grass) 14%, var(--dojo-surface)), color-mix(in srgb, var(--dojo-tutor-sky) 18%, var(--dojo-surface))); }
.dojo-tool--tutor .dojo-tool-icon { background: transparent; }
.dojo-tool--tutor svg.tutor-orb-icon, .dojo-artifact-icon.dojo-tool--tutor svg.tutor-orb-icon { width: calc(22 * var(--dojo-u)); height: calc(22 * var(--dojo-u)); filter: drop-shadow(0 2px 3px rgba(80, 170, 220, .35)); }
.dojo-tool strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12 * var(--dojo-u)); font-weight: 600; line-height: 1; letter-spacing: -.005em; }
@media (hover: hover) and (pointer: fine) {
  .dojo-tool:hover { background: color-mix(in srgb, var(--tool-ink) 17%, var(--dojo-surface)); border-color: color-mix(in srgb, var(--tool-ink) 42%, transparent); }
}
/* Three pills a row while each label fits whole, otherwise two (never one); the fit grows with the pills. */
.dojo-collection .dojo-tools { grid-template-columns: repeat(auto-fit, minmax(max(min(calc(108 * var(--dojo-u)), calc((100% - 6 * var(--dojo-u)) / 2)), calc((100% - 12 * var(--dojo-u)) / 3)), 1fr)); }
.study-practice-card { position: relative; padding: calc(14 * var(--dojo-u)) calc(24 * var(--dojo-u)) calc(14 * var(--dojo-u)) calc(10 * var(--dojo-u)); border: 1px solid var(--border-light); border-radius: calc(12 * var(--dojo-u)); margin-bottom: calc(8 * var(--dojo-u)); background: var(--bg-secondary); }
.study-practice-open { display: flex; align-items: center; gap: calc(12 * var(--dojo-u)); width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; font: inherit; }
.study-practice-open > span:last-child { min-width: 0; }
.study-practice-open strong { display: block; font-size: calc(12 * var(--dojo-u)); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-practice-open small { display: block; font-size: calc(10 * var(--dojo-u)); color: var(--study-muted); margin-top: calc(5 * var(--dojo-u)); }
.dojo-artifact-icon { display: grid; place-items: center; width: calc(30 * var(--dojo-u)); height: calc(34 * var(--dojo-u)); border-radius: calc(8 * var(--dojo-u)); background: color-mix(in srgb, var(--tool-ink) 12%, transparent); color: var(--tool-ink); flex-shrink: 0; }
.dojo-artifact-icon svg { width: calc(17 * var(--dojo-u)); }
.study-empty { color: var(--study-muted); padding: 36px 12px; text-align: center; }
.study-empty strong { font-size: calc(12 * var(--dojo-u)); font-weight: 500; }
.study-empty p { max-width: calc(260 * var(--dojo-u)); margin: calc(8 * var(--dojo-u)) auto 0; font-size: calc(11 * var(--dojo-u)); line-height: 1.8; }
.study-card-menu-wrap { position: absolute; right: 0; top: 10px; z-index: 3; }
.study-icon-btn, .study-session-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--study-muted); cursor: pointer; }
.study-menu { position: absolute; right: 0; top: 32px; min-width: 140px; padding: 5px; border: 1px solid var(--study-stroke); border-radius: 10px; background: var(--study-paper); box-shadow: 0 6px 24px #00000012; z-index: 6; }
.study-menu-item { display: block; padding: 9px 12px; width: 100%; text-align: left; color: var(--study-ink); font: 12px var(--study-font); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.study-menu-danger { color: var(--study-red); }
/* Placed by floatOpenMenu() against its button, clear of any clipping list. */
.study-menu.is-floating { position: fixed; right: auto; z-index: 60; max-height: calc(100vh - 16px); overflow-y: auto; }
.study-primary-btn, .study-chip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--study-stroke); border-radius: 8px; color: var(--study-ink); background: var(--dojo-soft); font: 12px var(--study-font); cursor: pointer; }
.study-spin { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--study-stroke); border-top-color: var(--study-green); border-radius: 50%; animation: study-spin .65s linear infinite; }
@keyframes study-spin { to { transform: rotate(360deg); } }
.study-generation-list { display: grid; gap: calc(8 * var(--dojo-u)); margin-top: calc(16 * var(--dojo-u)); }
.study-gen-card { position: relative; isolation: isolate; display: grid; grid-template-columns: calc(28 * var(--dojo-u)) minmax(0, 1fr) auto; align-items: center; gap: calc(11 * var(--dojo-u)); padding: calc(10 * var(--dojo-u)) calc(10 * var(--dojo-u)) calc(10 * var(--dojo-u)) calc(11 * var(--dojo-u)); border: 1px solid var(--study-stroke); border-radius: calc(12 * var(--dojo-u)); background: var(--dojo-surface); overflow: hidden; animation: dojo-drop-in 220ms var(--ease-out); }
.study-gen-card.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 200ms ease; }
.study-gen-icon { display: grid; place-items: center; width: calc(28 * var(--dojo-u)); height: calc(28 * var(--dojo-u)); border-radius: calc(8 * var(--dojo-u)); background: var(--dojo-soft); color: var(--study-muted); }
.study-gen-icon svg { width: calc(15 * var(--dojo-u)); height: calc(15 * var(--dojo-u)); }
.study-gen-icon .study-spin { width: calc(13 * var(--dojo-u)); height: calc(13 * var(--dojo-u)); }
.study-gen-card.is-failed .study-gen-icon { background: color-mix(in srgb, var(--study-red) 11%, transparent); color: var(--study-red); }
.study-gen-body { display: grid; gap: 2px; min-width: 0; }
.study-gen-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--study-ink); font-size: calc(12 * var(--dojo-u)); font-weight: 550; line-height: 1.35; }
.study-gen-line { display: flex; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--study-muted); font-size: calc(11 * var(--dojo-u)); line-height: 1.35; }
.study-gen-line > span { overflow: hidden; text-overflow: ellipsis; }
.study-gen-line > span + span::before { content: "·"; margin: 0 5px; color: var(--study-stroke); }
.study-gen-line .study-status { display: inline; font-size: inherit; }
.study-gen-elapsed { flex: none; font-variant-numeric: tabular-nums; }
.study-gen-error { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--study-red); font-size: calc(11 * var(--dojo-u)); line-height: 1.4; }
.study-gen-wave { position: absolute; inset: 0 auto 0 0; z-index: -1; width: 60%; pointer-events: none; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--study-green) 16%, transparent) 28%, color-mix(in srgb, #7aa7e8 22%, transparent) 50%, color-mix(in srgb, #b69ae6 16%, transparent) 72%, transparent 100%); filter: blur(6px); animation: study-gen-wave 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes study-gen-wave { from { transform: translateX(-100%); } to { transform: translateX(170%); } }
.study-gen-card.is-settled, .dojo-studio-view.is-settled, .dojo-studio-view.is-settled .dojo-view-search, .dojo-view-body.is-settled .dojo-qa, .dojo-view-body.is-settled .dojo-flip { animation: none; }
.study-gen-action { display: grid; place-items: center; width: calc(28 * var(--dojo-u)); height: calc(28 * var(--dojo-u)); padding: 0; border: 1px solid var(--study-stroke); border-radius: 50%; color: var(--study-muted); background: var(--dojo-soft); cursor: pointer; transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.study-gen-action svg { width: calc(14 * var(--dojo-u)); height: calc(14 * var(--dojo-u)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.study-gen-action:hover { color: var(--study-ink); border-color: var(--study-ink); }
.study-gen-action.is-retry:hover svg { transform: rotate(180deg); }
.study-gen-action:active { transform: scale(.92); }
.study-gen-action:focus-visible { outline: 2px solid var(--study-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .study-gen-card, .study-gen-wave, .study-gen-action svg { animation: none; transition: none; } .study-gen-wave { display: none; } }
.study-ink-blue { color: var(--study-blue); } .study-ink-green { color: var(--study-green); } .study-ink-orange { color: var(--study-orange); } .study-ink-purple { color: var(--study-purple); }
.study-session { background: var(--study-board); }
.study-view button, .study-session button { transition: transform 140ms var(--ease-out); }
.study-view button:active, .study-session button:active { transform: scale(.98); }
.study-view :focus-visible { outline: 2px solid var(--study-green); outline-offset: 4px; }
@keyframes study-card-leave { to { opacity: 0; transform: scale(.97); } }
.study-practice-card.is-leaving { animation: study-card-leave 180ms var(--ease-out) forwards; }
@media (hover: hover) and (pointer: fine) {
  .study-course-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--folder-deep) 26%, transparent); box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--folder-deep) 55%, transparent); }
  .study-course-new:hover { border-style: dashed; background: var(--dojo-surface); }
  .study-course-card:hover .dojo-folder-shadow { opacity: .24; }
  .study-course-card:hover .dojo-course-enter { transform: translateX(3px); color: var(--folder-deep); }
  .study-course-card:hover .dojo-folder-sheet--one { transform: translate(-7px, -20px) rotate(-13deg); }
  .study-course-card:hover .dojo-folder-sheet--two { transform: translate(7px, -27px) rotate(11deg); }
  .study-course-card:hover .dojo-folder-sheet--three { transform: translateY(-13px) rotate(-3deg); }
  .study-course-new:hover .dojo-folder-sheet--one { transform: rotate(-4deg); }
  .study-course-new:hover .dojo-folder-sheet--two { transform: rotate(3deg); }
  .study-course-new:hover .dojo-folder-sheet--three { transform: rotate(-1deg); }
  .study-course-new:hover .dojo-folder-badge { fill-opacity: .45; }
  .study-icon-btn:hover, .study-menu-item:hover { background: var(--dojo-soft); }
  .dojo-prompts button:hover { color: var(--study-green); }
}
@media (max-width: 1150px) and (min-width: 761px) {
  .dojo-workspace { grid-template-columns: 190px minmax(280px, 1fr) 230px; gap: 8px; }
  .study-view.study-view--detail { padding: 0 10px 10px; }
  .dojo-studio-content { padding: 12px; }
  .dojo-tools { gap: 5px; }
}
@media (max-width: 760px) {
  .study-view { padding: 28px 22px; }
  .dojo-brand { display: none; }
  .study-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .study-course-card { padding: 14px 8px 16px; border-radius: 18px; }
  .dojo-folder { height: auto; margin-bottom: 8px; }
  .study-page--library { padding: 12px 0 32px; }
  .dojo-library-head { margin-bottom: 26px; }
  .dojo-course-label { padding: 0 2px; }
  .dojo-course-enter { display: none; }
  .study-course-card strong { font-size: 13px; max-width: 100%; }
  .study-detail-header { flex-wrap: wrap; gap: 8px; padding: 14px 0 10px; }
  .study-title-input { width: 60vw; }
  .study-tabs { display: flex; width: 100%; gap: 4px; background: var(--dojo-soft); padding: 4px; border-radius: 10px; }
  .study-tabs button { flex: 1; padding: 9px; border: 0; border-radius: 7px; color: var(--study-muted); background: transparent; font: 12px var(--study-font); }
  .study-tabs button.active { background: var(--dojo-surface); color: var(--study-ink); box-shadow: 0 1px 3px #00000008; }
  .dojo-workspace { display: flex; }
  .dojo-panel { display: none; width: 100%; }
  .dojo-workspace[data-mobile-panel="materials"] .dojo-sources,
  .dojo-workspace[data-mobile-panel="chat"] .dojo-chat,
  .dojo-workspace[data-mobile-panel="practice"] .dojo-studio { display: flex; }
  .dojo-chat-welcome { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .study-view *, .study-session * { animation: none !important; transition: none !important; }
  .study-course-card:hover { transform: none; }
}


.study-note-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--study-board) 35%, rgba(0, 0, 0, .28));
}

.study-note-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(82vh, 860px);
  overflow: hidden;
  border: 2.5px solid var(--study-stroke);
  border-radius: 8px 18px 10px 14px;
  background: var(--study-paper);
  color: var(--study-paper-ink);
  box-shadow: 6px 10px 0 color-mix(in srgb, var(--study-ink) 12%, transparent);
  font-family: var(--study-font);
}



.study-note-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 2px solid color-mix(in srgb, var(--study-paper-ink) 18%, transparent);
}

.study-note-panel h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
}

.study-note-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.study-note-download-wrap {
  position: relative;
}

.study-note-actions .document-viewer-action {
  min-height: 32px;
  padding: 0 10px;
}

.study-note-actions .document-viewer-action.is-busy > svg:first-of-type {
  display: none;
}

.study-note-actions .document-viewer-action.is-busy .study-spin {
  width: 14px;
  height: 14px;
  border-color: color-mix(in srgb, var(--study-paper-ink) 35%, transparent);
  border-top-color: var(--study-paper-ink);
}

.study-icon-btn.copy-flash {
  animation: copy-success-flash 0.42s ease;
}

.study-note-download-wrap .document-download-menu {
  left: auto;
  right: 0;
}

.study-note-body {
  overflow: auto;
  padding: 18px 20px 28px;
  font-size: 16px;
  line-height: 1.65;
}

.study-note-body pre {
  white-space: pre-wrap;
}

#studyCreateDialog {
  border: 2.5px solid var(--study-stroke, #2a2a2a);
  border-radius: 16px 22px 14px 18px;
  background: var(--study-paper, #f3e0c2);
  color: var(--study-paper-ink, #243056);
  font-family: var(--study-font);
  box-shadow: 6px 10px 0 rgba(28, 28, 28, .12);
}

#studyCreateDialog h2 {
  font-size: 28px;
  font-weight: 800;
}

/* Course create / rename: soft card, X to close, backdrop dismisses. */
.dojo-course-dialog {
  --dojo-hue-a: #d3eeff;
  --dojo-hue-b: #a3dafc;
  width: min(420px, calc(100vw - 32px));
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 26px;
  background: var(--bg);
  color: var(--text);
  font-family: "Avenir Next", Avenir, var(--font-sans);
  box-shadow: 0 30px 80px -24px #00000059, 0 2px 8px #00000014;
}
.dojo-course-dialog::backdrop { background: color-mix(in srgb, #0b0d12 34%, transparent); backdrop-filter: blur(3px); }
.dojo-course-dialog[open] { animation: dojo-dialog-in 260ms cubic-bezier(.23, 1, .32, 1); }
.dojo-course-dialog form { position: relative; padding: 30px 30px 28px; }
.dojo-dialog-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-tertiary); cursor: pointer; transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out); }
.dojo-dialog-close svg { width: 18px; height: 18px; }
.dojo-dialog-close:hover { background: var(--bg-secondary); color: var(--text); }
.dojo-dialog-close:active { transform: scale(.92); }
.dojo-course-dialog h2 { margin: 4px 40px 6px 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.dojo-course-dialog p { margin: 0 0 24px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.5; }
.dojo-course-dialog label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.dojo-course-dialog label span { font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.dojo-course-dialog .course-dialog-field { margin-top: 16px; }
.dojo-course-dialog input { height: 46px; padding: 0 14px; border: 1px solid transparent; border-radius: 13px; background: var(--bg-secondary); font-size: 15px; transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease; }
.dojo-course-dialog input::placeholder { color: var(--text-tertiary); }
.dojo-course-dialog input:focus { border-color: color-mix(in srgb, var(--dojo-hue-b) 70%, transparent); background: var(--bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dojo-hue-b) 16%, transparent); }
.dojo-dialog-submit { display: block; height: 40px; margin: 24px 0 0 auto; padding: 0 20px; border: 0; border-radius: 11px; background: linear-gradient(100deg, var(--dojo-hue-a), var(--dojo-hue-b)); color: #13639b; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; box-shadow: 0 1px 2px #0000000f, inset 0 1px 0 #ffffff66; transition: transform 140ms var(--ease-out), filter 140ms ease; }
.dojo-dialog-submit:hover { filter: brightness(1.03); }
.dojo-dialog-submit:active { transform: scale(.97); }
@keyframes dojo-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dojo-course-dialog[open] { animation: none; } }

.study-session {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  overflow: hidden;
}

.study-session.hidden {
  display: none !important;
}

body.study-session-open .toast {
  z-index: 130;
}

.study-session-frame {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.study-session-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 4;
  width: 40px;
  height: 40px;
  font-size: 28px;
  color: var(--study-ink);
}

.study-session-frame.is-review .study-session-close {
  right: auto;
  left: max(14px, env(safe-area-inset-left));
}

.study-session-stage,
.study-session-end,
.study-review {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 48px 20px 28px;
}

.study-review {
  position: relative;
  gap: 22px;
  padding-top: 64px;
}

.study-review-hint {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  z-index: 2;
  margin: 0;
  color: var(--study-muted);
  font-size: 15px;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.study-review-glow {
  display: none;
}

.study-review-stage {
  position: relative;
  width: min(560px, 100%);
  perspective: 1200px;
}

.study-review-stage.is-got::after,
.study-review-stage.is-miss::after {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  animation: study-stamp 480ms var(--ease-out) both;
}

.study-review-stage.is-got::after {
  content: "✓";
  color: var(--study-green);
}

.study-review-stage.is-miss::after {
  content: "✕";
  color: var(--study-red);
}

.study-review-stage.is-got .study-flip {
  animation: study-got 480ms var(--ease-out);
}

.study-review-stage.is-miss .study-flip {
  animation: study-miss 480ms var(--ease-out);
}

.study-flip {
  width: 100%;
  min-height: 500px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
}

.study-flip:focus,
.study-flip:focus-visible,
.study-session .study-flip:focus,
.study-session .study-flip:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.study-flip-inner {
  position: relative;
  display: block;
  width: 100%;
  min-height: 500px;
  transform-style: preserve-3d;
  transition: transform 240ms var(--ease-in-out);
}

.study-flip.is-flipped .study-flip-inner {
  transform: rotateY(180deg);
}

.study-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 20px 16px 22px 14px;
  padding: 18px 22px 16px;
  background: color-mix(in srgb, var(--study-board) 80%, #fff 20%);
  color: var(--study-ink);
  backface-visibility: hidden;
  font-size: 28px;
  font-weight: 520;
  line-height: 1.32;
  text-align: center;
  user-select: none;
}

body[data-mode="dark"] .study-flip-face {
  background: color-mix(in srgb, var(--study-board) 88%, #000 12%);
}

.study-flip-back {
  background: #f3e0c2;
  color: #2a241c;
  transform: rotateY(180deg);
}

body[data-mode="dark"] .study-flip-back {
  background: #e4d0a8;
  color: #241e16;
}

.study-flip-back .study-sketch-stroke {
  border-color: #2a241c;
}

.study-flip-back .study-review-top,
.study-flip-back .study-review-see {
  color: color-mix(in srgb, #2a241c 52%, transparent);
}

.study-review-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 32px;
  color: var(--study-muted);
  font-size: 15px;
  font-weight: 600;
}

.study-review-count {
  justify-self: start;
}

.study-review-mark {
  justify-self: center;
  min-height: 1em;
  font-weight: 650;
}

.study-review-mark.is-good {
  color: var(--study-green);
  animation: study-mark-in 160ms var(--ease-out);
}

.study-review-mark.is-bad {
  color: var(--study-red);
  animation: study-mark-in 160ms var(--ease-out);
}

.study-review-kebab {
  justify-self: end;
  width: 32px;
  height: 32px;
}

.study-review-text {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: auto;
  padding: 12px 8px;
  text-align: center;
}

.study-blank {
  display: inline-block;
  min-width: 4.5ch;
  height: 0.85em;
  border-bottom: 2px solid currentColor;
  vertical-align: baseline;
}

.study-review-see {
  color: var(--study-muted);
  font-size: 15px;
  font-weight: 500;
}

.study-review-tools {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 2px;
}

.study-review-tools .study-card-menu-wrap,
.study-review-menu {
  position: relative;
  top: auto;
  right: auto;
}

.study-review-tools .study-icon-btn {
  color: var(--study-muted);
}

.study-review-star {
  width: 44px;
  height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.study-review-star.is-on,
.study-review-star[aria-pressed="true"] {
  color: var(--study-orange);
  background: transparent;
}

.study-flip.is-flipped ~ .study-review-tools .study-icon-btn {
  color: color-mix(in srgb, #2a241c 62%, transparent);
}

.study-flip.is-flipped ~ .study-review-tools .study-icon-btn:hover,
.study-flip.is-flipped ~ .study-review-tools .study-icon-btn:focus-visible,
.study-flip.is-flipped ~ .study-review-tools .study-icon-btn[aria-expanded="true"] {
  background: transparent;
  color: #2a241c;
  box-shadow: none;
}

.study-flip.is-flipped ~ .study-review-tools .study-review-star,
.study-flip.is-flipped ~ .study-review-tools .study-review-star:hover,
.study-flip.is-flipped ~ .study-review-tools .study-review-star:focus-visible,
.study-flip.is-flipped ~ .study-review-tools .study-review-star.is-on {
  background: transparent;
  box-shadow: none;
  color: #c45a12;
}

.study-flip.is-flipped ~ .study-review-tools .study-review-star:not(.is-on) {
  color: color-mix(in srgb, #2a241c 62%, transparent);
}

.study-review-menu .study-menu {
  top: 36px;
  min-width: 188px;
  padding: 6px;
  border-radius: 12px;
  transform-origin: top right;
  animation: study-menu-in 160ms var(--ease-out);
}

.study-review-menu .study-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
}

.study-menu-sep {
  height: 1px;
  margin: 4px 6px;
  border: 0;
  background: color-mix(in srgb, var(--study-ink) 18%, transparent);
}

.study-review-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.study-review-nav,
.study-review-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border: 2px solid var(--study-stroke);
  background: transparent;
  color: var(--study-muted);
  transition: transform 140ms var(--ease-out), color 140ms ease;
}

.study-review-nav {
  width: 48px;
  border-radius: 50%;
}

.study-review-grade {
  min-width: 76px;
  padding: 0 16px;
  border-radius: 22px 26px 18px 24px;
  font-size: 16px;
  font-weight: 650;
}

.study-review-grade.is-miss {
  color: var(--study-red);
  border-color: var(--study-red);
}

.study-review-grade.is-got {
  color: var(--study-green);
  border-color: var(--study-green);
}

.study-review-nav:disabled {
  opacity: 0.35;
}

.study-starred-toggle {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 8;
}

.study-starred-toggle.is-on,
.study-starred-toggle[aria-pressed="true"] {
  color: var(--study-ink);
}

.study-starred-toggle.is-on .study-sketch-stroke,
.study-starred-toggle[aria-pressed="true"] .study-sketch-stroke {
  background: color-mix(in srgb, var(--study-orange) 55%, transparent);
  border-color: var(--study-orange);
}

.study-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(560px, 100%);
  padding: 5px 6px 5px 16px;
  border: 2px solid var(--study-stroke);
  border-radius: 999px;
  background: var(--study-paper);
  color: var(--study-paper-ink);
}

.study-ask:focus,
.study-ask:focus-within {
  outline: none;
  box-shadow: none;
}

.study-ask-input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  box-shadow: none;
  appearance: none;
}

.study-ask-input:focus,
.study-ask-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.study-ask-input::placeholder {
  color: color-mix(in srgb, var(--study-paper-ink) 55%, transparent);
}

.study-ask-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--study-ink);
  color: var(--study-board);
  cursor: pointer;
}

body.study-session-open .side-chat-panel {
  border: 2.5px solid var(--study-stroke);
  border-radius: 18px 12px 20px 14px;
  background: color-mix(in srgb, var(--study-board) 88%, var(--study-paper));
  color: var(--study-ink);
  box-shadow: 6px 9px 0 color-mix(in srgb, var(--study-ink) 13%, transparent);
  font-family: var(--study-font);
}

body.study-session-open .side-chat-header {
  justify-content: flex-end;
  min-height: 44px;
  padding: 6px 8px;
  border-bottom: 2px solid color-mix(in srgb, var(--study-ink) 14%, transparent);
}

body.study-session-open .side-chat-header > div {
  display: none;
}

body.study-session-open .side-chat-header button {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  color: var(--study-ink);
  transition: transform 140ms var(--ease-out), background 140ms ease;
}

body.study-session-open .side-chat-context {
  margin: 12px 14px 0;
  padding: 9px 11px;
  border: 2px solid var(--study-stroke);
  border-radius: 12px 16px 10px 14px;
  background: color-mix(in srgb, var(--study-blue) 26%, transparent);
  color: var(--study-ink);
  font-family: var(--study-note);
  font-size: 14px;
}

body.study-session-open .side-chat-messages {
  gap: 16px;
  padding: 16px;
  scrollbar-color: color-mix(in srgb, var(--study-ink) 30%, transparent) transparent;
}

body.study-session-open .side-chat-message {
  color: var(--study-ink);
  font-size: 15px;
  line-height: 1.55;
}

body.study-session-open .side-chat-message.user {
  padding: 8px 12px;
  border: 2px solid var(--study-stroke);
  border-radius: 16px 12px 18px 14px;
  background: color-mix(in srgb, var(--study-orange) 34%, transparent);
}

body.study-session-open .side-chat-error {
  color: var(--study-red);
}

body.study-session-open .side-chat-composer {
  gap: 8px;
  margin: 0 14px 14px;
  padding: 6px 6px 6px 13px;
  border: 2px solid var(--study-stroke);
  border-radius: 18px 22px 16px 20px;
  background: var(--study-paper);
  box-shadow: none;
}

body.study-session-open .side-chat-composer:focus-within {
  border-color: var(--study-stroke);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--study-blue) 38%, transparent);
}

body.study-session-open .side-chat-composer textarea {
  color: var(--study-paper-ink);
  font-family: var(--study-font);
  font-size: 15px;
}

body.study-session-open .side-chat-composer textarea::placeholder {
  color: color-mix(in srgb, var(--study-paper-ink) 55%, transparent);
}

body.study-session-open .side-chat-composer button {
  width: 34px;
  height: 34px;
  color: var(--study-board);
  background: var(--study-ink);
  transition: transform 140ms var(--ease-out), opacity 140ms ease;
}

body.study-session-open .side-chat-composer button:disabled {
  color: var(--study-muted);
  background: color-mix(in srgb, var(--study-ink) 12%, transparent);
}

body.study-session-open .side-chat-add-card {
  padding: 6px 11px;
  border: 2px solid var(--study-stroke);
  border-radius: 14px 18px 12px 16px;
  color: var(--study-ink);
  font-family: var(--study-font);
  font-size: 13px;
  transition: transform 140ms var(--ease-out), background 140ms ease;
}

body.study-session-open .side-chat-header button:active,
body.study-session-open .side-chat-composer button:active:not(:disabled),
body.study-session-open .side-chat-add-card:active:not(:disabled) {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  body.study-session-open .side-chat-header button:hover,
  body.study-session-open .side-chat-add-card:hover:not(:disabled) {
    color: var(--study-ink);
    background: color-mix(in srgb, var(--study-ink) 7%, transparent);
  }
}

.study-edit {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 0;
  padding: 56px 20px 28px;
}

.study-edit-pair {
  display: flex;
  gap: 18px;
  width: min(980px, 100%);
  min-height: 0;
}

.study-edit-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 280px;
  padding: 22px 20px 18px;
  overflow: hidden;
  border-radius: 20px 16px 22px 14px;
  background: transparent;
  color: var(--study-paper-ink);
}

.study-edit-card .study-sketch-stroke {
  background: var(--study-paper);
}

.study-edit-card .study-kicker {
  position: relative;
  z-index: 1;
}

.study-edit-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 8em;
  overflow: auto;
  outline: none;
  box-shadow: none;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 22px;
  line-height: 1.35;
}

.study-edit-text:focus,
.study-edit-text:focus-visible {
  outline: none;
  box-shadow: none;
}

.study-edit-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

@media (pointer: coarse), (max-width: 700px) {
  .study-ask {
    display: none;
  }
}

body.capacitor-native .study-ask {
  display: none;
}

@keyframes study-menu-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes study-mark-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

@keyframes study-stamp {
  from { opacity: 0; transform: scale(0.72) rotate(-8deg); }
  42% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes study-got {
  0% { transform: scale(1); }
  32% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes study-miss {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(7px); }
  62% { transform: translateX(-4px); }
  82% { transform: translateX(2px); }
}

@media (hover: hover) and (pointer: fine) {
  .study-review-nav:hover:not(:disabled),
  .study-review-grade:hover {
    background: color-mix(in srgb, var(--study-ink) 5%, transparent);
  }
}

.study-session-end {
  gap: 16px;
  text-align: center;
}

.study-session-end strong {
  font-size: 34px;
}

.study-create-list {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  margin-top: 12px;
  overflow: auto;
  border: 2px solid var(--study-stroke, #2a2a2a);
  border-radius: 10px 14px 8px 12px;
}

.study-create-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.study-create-item + .study-create-item {
  border-top: 1px solid color-mix(in srgb, var(--study-ink, #1c1c1c) 12%, transparent);
}

.study-create-item input {
  width: auto;
  height: auto;
  margin-top: 3px;
}

.study-create-item span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.study-create-item small {
  color: var(--study-muted, #6b675e);
  font-size: 13px;
}

.study-create-empty {
  padding: 16px 12px;
  color: var(--study-muted, #6b675e);
  font-size: 15px;
}

.study-create-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.study-create-modes button:disabled {
  cursor: default;
  opacity: .55;
}

.study-view :focus-visible,
.study-session :focus-visible {
  outline: 2px dashed var(--study-blue);
  outline-offset: 3px;
}

.study-session .study-flip:focus-visible,
.study-session .study-ask:focus-visible,
.study-session .study-ask-input:focus-visible,
.study-session .study-edit-text:focus-visible,
.study-session .study-review-star:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

body.study-open .study-composer-slot .composer-prompt,
body.study-open .study-composer-slot .composer-prompt:focus,
body.study-open .study-composer-slot .composer-prompt:focus-visible,
.study-view .composer-prompt:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

@media (max-width: 860px) {
  .study-review-controls {
    position: sticky;
    bottom: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--study-board) 28%);
  }

  .study-review-nav,
  .study-review-grade {
    min-height: 48px;
    touch-action: manipulation;
  }

  .study-flip,
  .study-flip-inner {
    min-height: min(500px, calc(100dvh - 230px));
  }

  .study-flip-face {
    font-size: 22px;
  }

  .study-review-hint {
    display: none;
  }
}

body.capacitor-native .study-review-hint {
  display: none;
}

@media (max-width: 700px) { .study-edit-pair { flex-direction: column; } }

@media (prefers-reduced-motion: reduce) {
  .study-dropzone,
  .study-flip-inner,
  .study-primary-btn,
  .study-chip-btn,
  .study-course-card,
  .study-practice-card,
  .study-review-nav,
  .study-review-grade {
    transition: none;
  }

  .study-practice-card.is-leaving {
    animation: none;
    opacity: 0;
  }

  .study-course-card,
  .study-material-card,
  .study-practice-card,
  .study-chat-item,
  .study-sticky,
  .study-title-row::after {
    transform: none;
  }

  .study-sketch-stroke,
  .study-browse,
  .study-review-nav,
  .study-review-grade,
  .study-tabs button.active::before,
  .study-marker::after {
    filter: none;
  }

  .study-dropzone.is-dragover,
  .study-course-card:active,
  .study-practice-card:active,
  .study-primary-btn:active,
  .study-chip-btn:active,
  .study-review-nav:active,
  .study-review-grade:active {
    transform: none;
  }

  .study-doodle-draw {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .study-dropzone.is-dropped,
  .study-spin,
  .study-review-menu .study-menu,
  .study-review-mark.is-good,
  .study-review-mark.is-bad,
  .study-review-stage.is-got,
  .study-review-stage.is-miss,
  .study-review-stage.is-got .study-flip,
  .study-review-stage.is-miss .study-flip,
  .study-review-stage.is-got::after,
  .study-review-stage.is-miss::after {
    animation: none;
  }

  .study-flip.is-flipped .study-flip-inner {
    transform: none;
  }

  .study-flip:not(.is-flipped) .study-flip-back,
  .study-flip.is-flipped .study-flip-front {
    display: none;
  }

  .study-flip-back {
    transform: none;
  }
}

body.capacitor-native.study-open .native-mobile-mode-wrap {
  display: none !important;
}

body.capacitor-native.study-open .native-mobile-menu {
  position: absolute;
}

body.capacitor-native.study-open .study-view,
body.capacitor-native.study-open .study-view.study-view--detail {
  padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top)) + var(--native-bar-h, 52px) + 8px);
}

/* Shared study readers use the same calm surfaces as the workspace. */
.study-note-panel { border: 1px solid var(--study-stroke); border-radius: 18px; box-shadow: 0 24px 80px #00000020; }
.study-note-panel header { border-bottom-width: 1px; padding: 18px 22px; }
.study-note-panel h2 { font-size: 15px; font-weight: 550; }
.study-note-body { font-size: 14px; line-height: 1.8; }
.study-flip-face { border: 1px solid var(--study-stroke); border-radius: 20px; box-shadow: 0 8px 32px #00000006; }
.study-flip-back, body[data-mode="dark"] .study-flip-back { background: var(--dojo-soft); color: var(--study-ink); }
.study-flip-back .study-review-top, .study-flip-back .study-review-see { color: var(--study-muted); }
.study-review-nav, .study-review-grade { border: 1px solid var(--study-stroke); border-radius: 12px; }
.study-review-menu .study-menu { border-width: 1px; border-radius: 10px; box-shadow: 0 6px 24px #00000012; }
#studyCreateDialog { --create-accent: var(--accent); --create-soft: color-mix(in srgb, var(--text) 3.5%, var(--bg)); --create-soft-strong: color-mix(in srgb, var(--text) 6%, var(--bg)); --create-muted: color-mix(in srgb, var(--text-secondary) 78%, var(--bg)); width: min(880px, calc(100vw - 32px)); max-height: 90dvh; overflow: auto; border-radius: 20px; }
#studyCreateDialog[data-create-type="flashcards"] { --create-accent: var(--dojo-flashcards); }
#studyCreateDialog[data-create-type="notes"] { --create-accent: #bd8136; }
#studyCreateDialog[data-create-type="quiz"] { --create-accent: #8b69c6; }
#studyCreateDialog[data-create-type="podcast"] { --create-accent: var(--dojo-podcast); }
#studyCreateDialog[data-create-type="tutor"] { --create-accent: var(--dojo-tutor); }
#studyCreateDialog[data-motion="off"] { animation: none; }
#studyCreateDialog h2 { margin-top: 0; font-size: 23px; letter-spacing: -.035em; font-weight: 600; }
#studyCreateDialog form { position: relative; display: flex; flex-direction: column; padding: 26px; }
#studyCreateDialog .study-create-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; color: var(--text-secondary); }
#studyCreateDialog .study-create-close svg { width: 18px; height: 18px; }
#studyCreateDialog h2 { padding-right: 44px; }
#studyCreateDialog #studyCreateHint { margin-bottom: 26px; color: var(--create-muted); }
.dojo-create-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; }
.dojo-create-sources { align-self: start; min-width: 0; padding: 14px 8px 8px; border-radius: 16px; background: var(--create-soft); }
#studyCreateDialog .dojo-create-sources > label { display: flex; justify-content: space-between; align-items: center; margin: 0 6px 10px; font-size: 12.5px; font-weight: 600; }
.dojo-create-sources > label span { font-size: 11px; font-weight: 400; color: var(--create-muted); font-variant-numeric: tabular-nums; }
.dojo-create-search { position: relative; margin: 0 2px 6px; }
.dojo-create-search svg { position: absolute; top: 50%; left: 11px; width: 15px; height: 15px; color: var(--create-muted); transform: translateY(-50%); pointer-events: none; transition: color 140ms ease; }
#studyCreateDialog #studyCreateSearch { height: 36px; padding: 0 12px 0 33px; border: 1px solid transparent; border-radius: 10px; background: var(--bg); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent); font-size: 12.5px; transition: border-color 140ms ease, box-shadow 140ms ease; }
#studyCreateDialog #studyCreateSearch::placeholder { color: var(--create-muted); }
#studyCreateDialog #studyCreateSearch:focus { border-color: color-mix(in srgb, var(--create-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--create-accent) 14%, transparent); }
.dojo-create-search:focus-within svg { color: var(--create-accent); }
.dojo-create-options { display: grid; gap: 24px; align-content: start; min-width: 0; }
.dojo-option-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.dojo-option-group legend { padding: 0; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; }
.dojo-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.is-pair .dojo-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-count .dojo-option-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.is-style .dojo-option-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-style .dojo-option-grid:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#studyCreateDialog .dojo-option { position: relative; display: flex; margin: 0; cursor: pointer; min-width: 0; }
#studyCreateDialog .dojo-option input { position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0; }
.dojo-option-face { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; border: 1px solid transparent; border-radius: 12px; overflow: hidden; background: var(--create-soft); transition: border-color 140ms ease, background 140ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1); }
.dojo-option input:checked + .dojo-option-face { border-color: var(--create-accent); background: color-mix(in srgb, var(--create-accent) 11%, var(--bg)); box-shadow: inset 0 0 0 .5px var(--create-accent); }
.dojo-option input:focus-visible + .dojo-option-face { outline: 2px solid var(--create-accent); outline-offset: 3px; transition: none; }
.dojo-option input:focus-visible + .dojo-option-face * { transition: none; }
.dojo-option-copy { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.dojo-option-copy strong { font-size: 12px; font-weight: 600; line-height: 1.4; }
.dojo-option-copy small { font-size: 10.5px; font-weight: 400; line-height: 1.45; color: var(--create-muted); }
.dojo-option-check { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 15px; height: 15px; font-size: 10px; border-radius: 50%; color: var(--bg); background: var(--create-accent); opacity: 0; }
.dojo-option input:checked + .dojo-option-face .dojo-option-check { opacity: 1; }
.dojo-option-preview { display: flex; align-items: center; padding: 18px 11px 12px; height: 108px; color: var(--create-accent); background: color-mix(in srgb, var(--create-accent) 15%, var(--bg-secondary)); }
.dojo-demo-sheet { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 10px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 7px; background: var(--bg); box-shadow: 0 3px 7px #00000005; transition: transform 180ms cubic-bezier(.23, 1, .32, 1); }
.dojo-demo-question, .dojo-demo-section { font-size: 8px; line-height: 1.4; font-weight: 550; }
.dojo-demo-section { font-size: 7px; }
.dojo-demo-sheet > i { display: block; height: 3px; border-radius: 3px; background: currentColor; opacity: .2; width: 90%; }
.dojo-demo-sheet > i:nth-of-type(2) { width: 65%; }
.dojo-demo-sheet > i:nth-of-type(3) { width: 78%; }
.dojo-demo-answer { align-self: flex-end; font-size: 7px; padding: 3px 5px; border-radius: 3px; background: color-mix(in srgb, currentColor 10%, transparent); }
.dojo-demo-choices { display: flex; gap: 7px; }
.dojo-demo-choices i { font-size: 7px; font-style: normal; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 50%; }
.dojo-demo-choices i:nth-child(2) { background: var(--create-accent); color: var(--bg); }
.dojo-demo-blank { font-size: 7px; padding: 4px; border: 1px dashed currentColor; border-radius: 3px; text-align: center; }
.is-count .dojo-option-copy { text-align: center; padding: 10px 4px; }
.is-count .dojo-option-copy strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.is-style .dojo-option-copy { padding: 12px 8px; }
.is-style .dojo-option-copy strong { font-size: 11px; }
.is-style .dojo-option-check, .is-count .dojo-option-check { display: none; }
.is-illustrated .dojo-option:nth-child(2) { --create-accent: var(--study-blue); }
.is-illustrated .dojo-option:nth-child(3) { --create-accent: var(--study-purple); }
.is-pair:not(.is-illustrated) .dojo-option:nth-child(2), .is-style .dojo-option:nth-child(2) { --create-accent: var(--study-blue); }
.is-style .dojo-option:nth-child(3) { --create-accent: var(--study-orange); }
.is-style .dojo-option:nth-child(4) { --create-accent: var(--study-purple); }
.is-difficulty .dojo-option[data-value="easy"] { --create-accent: #5baf79; }
.is-difficulty .dojo-option[data-value="medium"] { --create-accent: #d8ae32; }
.is-difficulty .dojo-option[data-value="hard"] { --create-accent: #d76e74; }
.dojo-difficulty-bars { display: flex; align-items: flex-end; box-sizing: border-box; gap: 5px; width: max-content; height: 36px; padding: 7px 8px; margin: 12px 12px 0; border-radius: 8px; color: var(--create-accent); background: color-mix(in srgb, currentColor 8%, var(--bg-secondary)); }
.dojo-difficulty-bars i { width: 9px; height: 9px; background: currentColor; opacity: .25; border-radius: 4px 4px 3px 3px; }
.dojo-difficulty-bars i:nth-child(2) { height: 16px; }
.dojo-difficulty-bars i:nth-child(3) { height: 23px; }
.dojo-difficulty-bars i:first-child,
[data-value="medium"] .dojo-difficulty-bars i:nth-child(2),
[data-value="hard"] .dojo-difficulty-bars i { opacity: 1; }
#studyCreateDialog .dojo-focus-field { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; }
.dojo-focus-field > span { color: var(--create-muted); font-size: 10.5px; font-weight: 400; margin-left: auto; }
.dojo-focus-field textarea { flex-basis: 100%; width: 100%; padding: 12px 14px; color: var(--text); background: var(--create-soft, var(--bg-secondary)); border: 1px solid transparent; border-radius: 12px; font: 12.5px/1.6 var(--font-sans); resize: vertical; min-height: 72px; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.dojo-focus-field textarea::placeholder { color: var(--create-muted, var(--text-secondary)); }
.dojo-focus-field textarea:focus-visible { outline: 0; background: var(--bg); border-color: color-mix(in srgb, var(--create-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--create-accent) 14%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .dojo-option:hover .dojo-option-face { border-color: color-mix(in srgb, var(--create-accent) 45%, transparent); }
  .dojo-option:hover .dojo-demo-sheet { transform: translateY(-2px); }
  .dojo-option:active .dojo-option-face { transform: scale(.98); }
}
@media (max-width: 680px) {
  #studyCreateDialog form { padding: 20px; }
  .dojo-create-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dojo-create-sources { align-self: stretch; }
  .dojo-option-copy { padding: 10px 8px; }
  .dojo-option-preview { padding: 15px 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #studyCreateDialog[open] { animation: none; }
  .dojo-option-face, .dojo-demo-sheet { transition: none; }
  .dojo-option:hover .dojo-demo-sheet { transform: none; }
}
.study-note-panel:has(.dojo-mindmap) { width: min(1000px, 95vw); }
.dojo-mindmap { --map-line: color-mix(in srgb, var(--study-green) 38%, var(--study-stroke)); box-sizing: border-box; width: 100%; margin: 16px auto; padding-top: 18px; overflow: hidden; border: 1px solid var(--study-stroke); border-radius: 14px; background: var(--dojo-surface); }
.dojo-map-root { position: relative; box-sizing: border-box; width: min(240px, calc(100% - 32px)); margin: 0 auto; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--study-green) 45%, var(--study-stroke)); border-radius: 10px; background: color-mix(in srgb, var(--study-green) 10%, var(--dojo-surface)); color: var(--study-ink); font-size: 13px; font-weight: 650; line-height: 1.4; text-align: center; }
.dojo-map-root::after { content: ""; position: absolute; top: 100%; left: 50%; height: 20px; border-left: 1px solid var(--map-line); }
.dojo-map-scroll { max-height: 400px; margin-top: 20px; overflow: auto; scrollbar-width: thin; }
.dojo-map-canvas { box-sizing: border-box; width: max-content; min-width: 100%; padding: 0 18px 20px; }
.dojo-map-branches { margin: 0; padding: 0; list-style: none; }
.dojo-map-canvas > .dojo-map-branches { position: relative; display: flex; justify-content: center; gap: 14px; width: max-content; min-width: 100%; padding-top: 22px; }
.dojo-map-canvas > .dojo-map-branches::before { content: ""; position: absolute; top: 0; right: 99px; left: 99px; border-top: 1px solid var(--map-line); }
.dojo-map-canvas > .dojo-map-branches:has(> li:only-child)::before,
.dojo-map-canvas > .dojo-map-branches:empty::before { display: none; }
.dojo-map-canvas > .dojo-map-branches > .dojo-map-node { flex: 0 0 198px; width: 198px; }
.dojo-map-canvas > .dojo-map-branches > .dojo-map-node::before { content: ""; position: absolute; top: -22px; left: 50%; height: 22px; border-left: 1px solid var(--map-line); }
.dojo-map-node { position: relative; min-width: 0; }
.dojo-map-branch { --map-accent: var(--study-green); min-width: 0; }
.dojo-map-node:nth-child(4n + 2) > .dojo-map-branch { --map-accent: var(--study-blue); }
.dojo-map-node:nth-child(4n + 3) > .dojo-map-branch { --map-accent: var(--study-orange); }
.dojo-map-node:nth-child(4n + 4) > .dojo-map-branch { --map-accent: var(--study-purple); }
.dojo-map-branch summary { display: flex; align-items: center; gap: 7px; min-height: 52px; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--study-stroke); border-top: 3px solid var(--map-accent); border-radius: 9px; background: color-mix(in srgb, var(--map-accent) 6%, var(--dojo-surface)); color: var(--study-ink); cursor: pointer; font-size: 11px; font-weight: 650; line-height: 1.35; list-style: none; overflow-wrap: anywhere; }
.dojo-map-branch summary::-webkit-details-marker { display: none; }
.dojo-map-branch summary::after { content: ""; flex: none; width: 5px; height: 5px; margin-left: auto; border-right: 1.5px solid var(--map-accent); border-bottom: 1.5px solid var(--map-accent); transform: rotate(45deg); }
.dojo-map-branch:not([open]) summary::after { transform: rotate(-45deg); }
.dojo-map-branch summary:focus-visible { outline: 2px solid var(--map-accent); outline-offset: 2px; }
.dojo-map-branch > .dojo-map-branches { display: grid; gap: 8px; margin: 12px 0 0 12px; padding-left: 11px; border-left: 1px solid var(--map-line); }
.dojo-map-branch > .dojo-map-branches > .dojo-map-node::before { content: ""; position: absolute; top: 18px; left: -11px; width: 11px; border-top: 1px solid var(--map-line); }
.dojo-map-leaf { padding: 8px 9px; border: 1px solid var(--study-stroke); border-radius: 8px; background: var(--dojo-surface); color: var(--study-ink); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .study-dropzone { min-height: 0; width: 100%; } }
@media (max-width: 760px) {
  .study-view.study-view--detail { padding: 0 12px 12px; }
  .study-detail-header { flex-direction: row; }
  .study-title-input { font-size: 14px; }
  .study-tabs button { padding: 9px; }
  .study-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dojo-chat-welcome { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 0; max-width: none; margin: 0 auto; padding: 30px 24px; overflow: auto; width: 100%; text-align: center; }
.dojo-chat-welcome h2 { margin: 0; font-size: clamp(23px, 2.2vw, 30px); font-weight: 600; }
.dojo-prompts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.dojo-prompts button { display: inline-flex; width: auto; padding: 8px 13px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.dojo-chat-actions { display: flex; align-items: center; gap: 4px; }
.dojo-chat-recent { position: relative; }
.dojo-chat-recent summary { list-style: none; }
.dojo-chat-recent summary::-webkit-details-marker { display: none; }
.dojo-chat-recent[open] summary { color: var(--accent); background: var(--bg-secondary); }
.dojo-chat .dojo-panel-header { position: relative; z-index: 5; }
.dojo-chat-recent-menu { position: absolute; top: calc(100% + 9px); right: 0; width: min(340px, calc(100vw - 48px)); padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); box-shadow: 0 10px 30px #0000001a; }
.dojo-chat-recent-search { display: flex; align-items: center; gap: 9px; padding: 8px 10px 11px; margin-bottom: 4px; border-bottom: 1px solid var(--border); color: var(--study-muted); }
.dojo-chat-recent-search svg { width: 17px; height: 17px; flex: none; }
.dojo-chat-recent-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--study-ink); font: 12px var(--study-font); }
.dojo-chat-recent-search:focus-within { color: var(--accent); border-color: var(--accent); }
.dojo-chat-recent-list { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dojo-chat-recent-list button { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; height: 40px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--study-ink); font: 12px var(--study-font); text-align: left; cursor: pointer; }
.dojo-chat-recent-list button[hidden] { display: none; }
.dojo-chat-recent-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dojo-chat-recent-list button.is-current { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.dojo-chat-current-label { flex: none; color: var(--accent); font-size: 10px; font-weight: 600; }
.dojo-chat-recent-list p { margin: 4px 8px 8px; color: var(--study-muted); font-size: 12px; }
@media (hover: hover) and (pointer: fine) { .dojo-chat-recent-list button:hover { background: var(--bg-secondary); } .dojo-chat-recent-list button.is-current:hover { background: color-mix(in srgb, var(--accent) 15%, var(--bg)); } }
#studyCreateDialog .study-create-list { gap: 2px; max-height: 360px; margin: 0; border: 0; border-radius: 0; scrollbar-width: thin; }
#studyCreateDialog .study-create-item { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 8px; margin: 0; border: 0; border-radius: 10px; font-weight: 400; transition: background 140ms ease; }
#studyCreateDialog .study-create-item > span:last-child { min-width: 0; }
#studyCreateDialog .study-create-item strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12.5px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
#studyCreateDialog .study-create-item input { appearance: none; display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin: 0; padding: 0; border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 5px; background: var(--bg) no-repeat center / 11px; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; }
#studyCreateDialog .study-create-item input:checked { border-color: var(--create-accent); background-color: var(--create-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E"); }
#studyCreateDialog .study-create-item input:focus-visible { outline: 2px solid var(--create-accent); outline-offset: 2px; }
#studyCreateDialog .study-create-item:has(:checked) { background: color-mix(in srgb, var(--create-accent) 10%, var(--bg)); }
#studyCreateDialog .study-create-item:has(:disabled) { opacity: .45; cursor: default; }
#studyCreateDialog .study-create-item:has(:disabled) input { cursor: default; }
@media (hover: hover) and (pointer: fine) { #studyCreateDialog .study-create-item:not(:has(:disabled, :checked)):hover { background: color-mix(in srgb, var(--bg) 70%, transparent); } }
#studyCreateDialog .study-create-empty { margin: 0; padding: 14px 8px; color: var(--create-muted); font-size: 12px; }
.dojo-source-badge { --tag: var(--text-secondary); display: grid; place-items: center; flex: none; width: 30px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--tag) 12%, transparent); color: var(--tag); font: 700 9px/1 var(--font-sans); letter-spacing: .04em; }
.dojo-source-badge svg { width: 14px; height: 14px; }
#studyCreateDialog .study-create-item .dojo-source-badge { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; padding-top: 1px; }
.dojo-source-badge.is-pdf { --tag: #d4574a; }
.dojo-source-badge.is-slides { --tag: #d9843d; }
.dojo-source-badge.is-word { --tag: #3f7fd6; }
.dojo-source-badge.is-sheet { --tag: #3b8f7a; }
.dojo-source-badge.is-image { --tag: #9a6fd0; }
.dojo-source-badge.is-website { --tag: var(--dojo-tutor); }
@media (max-width: 680px) { #studyCreateDialog .study-create-list { max-height: 150px; } }
#studyCreateDialog .project-dialog-actions { position: sticky; bottom: -26px; background: var(--bg); padding: 16px 0 2px; margin-top: 12px; box-shadow: 0 -14px 14px -10px var(--bg); }
.study-note-overlay { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; }
.study-composer-slot .app-footer { font-size: 9px; padding-top: 8px; }

/* Dojo composer toolbar: soft round tools, the model pill and a Context pill. */
.study-composer-slot .composer-bottom { margin-top: 8px; gap: 10px; }
.study-composer-slot .composer-actions { gap: 6px; }
.study-composer-slot .composer-plus-btn { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-secondary); box-shadow: none; transition: background 140ms ease, color 140ms ease, transform 140ms ease; }
.study-composer-slot .composer-plus-btn:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); border: 0; }
.study-composer-slot .composer-plus-btn:active { transform: scale(.94); }
.study-composer-slot .composer-plus-btn[aria-expanded="true"] { background: var(--accent); color: var(--accent-contrast); }
.study-composer-slot .composer-plus-btn[aria-expanded="true"]:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.study-composer-slot .heat-bar { box-shadow: none; }
.study-composer-slot .composer-send { gap: 6px; }
.study-composer-slot .voice-btn { width: 34px; height: 34px; }
.study-composer-slot .voice-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 7%, transparent); }
.study-composer-slot .send-btn, .study-composer-slot .stop-btn { width: 36px; height: 36px; }
.composer-context-wrap { display: none; }
.study-composer-slot .composer:has(#researchModeChip:not(.hidden)[data-mode="research"]) .composer-context-wrap { display: none; }
.study-composer-slot .composer-context-wrap { position: relative; display: block; min-width: 0; margin-left: 4px; }
.study-composer-slot .composer-context-wrap::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -6px; width: 1px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.composer-context-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; height: 34px; padding: 0 9px 0 11px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-secondary); font: 600 13px var(--study-font); cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.composer-context-btn > span:not(.composer-context-chevron) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-context-btn svg { flex: 0 0 auto; }
.composer-context-btn:hover, .composer-context-wrap.is-open .composer-context-btn { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.composer-context-btn.is-scoped { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.composer-context-btn.is-scoped:hover, .composer-context-wrap.is-open .composer-context-btn.is-scoped { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.composer-context-chevron { display: inline-flex; opacity: .6; transition: transform 180ms cubic-bezier(.23, 1, .32, 1); }
.composer-context-wrap.is-open .composer-context-chevron { transform: rotate(180deg); }
.composer-context-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.composer-context-pop { position: absolute; bottom: calc(100% + 12px); left: -4px; z-index: 60; display: flex; flex-direction: column; width: min(310px, calc(100vw - 32px)); max-height: min(380px, 60vh); padding: 6px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 18px; background: var(--bg); box-shadow: 0 18px 44px -12px #00000033, 0 2px 6px #0000000f; font-family: var(--study-font); transform-origin: 16px 100%; animation: composer-context-in 160ms cubic-bezier(.23, 1, .32, 1); }
@keyframes composer-context-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .composer-context-pop { animation: none; } .composer-context-chevron { transition: none; } }
.composer-context-auto { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background 120ms ease; }
.composer-context-auto:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.composer-context-auto.is-on { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.composer-context-auto-icon { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-secondary); }
.composer-context-auto.is-on .composer-context-auto-icon { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.composer-context-auto-copy { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.composer-context-auto-copy strong { font-size: 13.5px; font-weight: 650; }
.composer-context-auto-copy small { color: var(--text-tertiary, var(--text-secondary)); font-size: 12px; }
.composer-context-tick { display: inline-flex; color: var(--accent); opacity: 0; }
.composer-context-auto.is-on .composer-context-tick { opacity: 1; }
.composer-context-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 10px 4px; color: var(--text-tertiary, var(--text-secondary)); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.composer-context-head button { padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.composer-context-head button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.composer-context-search { position: relative; display: block; margin: 2px 4px 6px; }
.composer-context-search svg { position: absolute; top: 50%; left: 10px; color: var(--text-tertiary, var(--text-secondary)); transform: translateY(-50%); pointer-events: none; }
.composer-context-search input { width: 100%; height: 32px; padding: 0 10px 0 30px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); font: 13px var(--study-font); outline: none; }
.composer-context-search input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.composer-context-list { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.composer-context-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 13px var(--study-font); text-align: left; cursor: pointer; transition: background 120ms ease; }
.composer-context-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.composer-context-item.is-on { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.composer-context-item:focus-visible, .composer-context-auto:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: -2px; }
.composer-context-check { display: grid; flex: 0 0 auto; place-items: center; width: 17px; height: 17px; border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 5px; color: transparent; transition: background 120ms ease, border-color 120ms ease; }
.composer-context-item.is-on .composer-context-check { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); }
.composer-context-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-context-item .dojo-source-badge { flex: 0 0 auto; }
.composer-context-pages { flex: 0 0 auto; color: var(--accent); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Ticked source pages, shown with the composer's attachments. */
.composer-scope-tray { margin-bottom: 10px; }
.composer-scope-tray:empty { display: none; }
.composer-scope-page { display: grid; place-items: center; width: 56px; height: 72px; background: #fff; }
.composer-scope-page img { object-fit: cover; object-position: top; }
.composer-scope-page-icon { display: grid; place-items: center; width: 100%; height: 100%; background: var(--bg-secondary); color: var(--text-tertiary, var(--text-secondary)); }
.composer-scope-page-label { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 999px; background: rgba(0, 0, 0, .66); color: #fff; font: 600 10px/1.4 var(--study-font); font-variant-numeric: tabular-nums; }
.composer-scope-pages-card { width: auto; max-width: 200px; height: 56px; }
.composer-scope-pages-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.preview-file .composer-scope-pages-copy strong { overflow: hidden; color: var(--text); font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.preview-file .composer-scope-pages-copy small { overflow: hidden; color: var(--text-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.composer-scope-stack { color: var(--accent); }
@media (hover: none) { .composer-scope-tray .preview-remove { opacity: 1; pointer-events: auto; } }
/* Under each page of a Dojo source preview: tick it to ask about just that page. */
.pdf-page-pick { position: relative; display: flex; align-items: center; gap: 8px; max-width: 100%; margin: -4px auto 14px; padding: 6px 4px; color: var(--text-secondary); font: 600 12px var(--study-font, inherit); cursor: pointer; user-select: none; }
.pdf-page-pick input { position: absolute; opacity: 0; pointer-events: none; }
.pdf-page-pick-box { display: grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent); border-radius: 5px; color: transparent; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.pdf-page-pick-box svg { width: 12px; height: 12px; stroke-width: 3; }
.pdf-page-pick-label { color: var(--text); font-variant-numeric: tabular-nums; }
.pdf-page-pick-hint { margin-left: auto; color: var(--text-tertiary, var(--text-secondary)); font-weight: 500; }
.pdf-page-pick:hover .pdf-page-pick-box { border-color: var(--accent); }
.pdf-page-pick input:focus-visible + .pdf-page-pick-box { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.pdf-page-pick.is-on .pdf-page-pick-box { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); }
.pdf-page-pick.is-on .pdf-page-pick-hint { color: var(--accent); }
.composer-context-empty { margin: 6px 10px 10px; color: var(--text-secondary); font-size: 12.5px; }
@media (max-width: 560px) {
  .study-composer-slot .composer-context-btn > span:not(.composer-context-chevron) { max-width: 64px; }
}
@media (max-width: 900px) {
  body.study-open:not(.capacitor-native) .study-view { padding-top: 52px; }
  body.study-open:not(.capacitor-native) .study-view--detail { padding-top: 42px; }
}

/* Sources: compact library, collapse rail, and an embedded document preview. */
.dojo-sources-expanded, .dojo-studio-expanded { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.dojo-source-actions { display: flex; align-items: center; gap: 4px; }
.dojo-source-actions .study-icon-btn { position: static; display: grid; place-items: center; width: 30px; height: 30px; padding: 6px; }
.dojo-source-actions svg { width: 17px; height: 17px; }
.dojo-source-sort { position: relative; }
.dojo-source-sort summary { list-style: none; cursor: pointer; }
.dojo-source-sort summary::-webkit-details-marker { display: none; }
.dojo-source-sort[open] summary { color: var(--accent); background: var(--bg-secondary); }
.dojo-sort-menu { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 172px; padding: 5px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); box-shadow: 0 8px 28px #00000016; transform-origin: top right; }
.dojo-sort-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; color: var(--text); padding: 10px; border-radius: 7px; text-align: left; font: 12px var(--study-font); cursor: pointer; }
.dojo-sort-menu button[aria-pressed="true"] { background: var(--bg-secondary); color: var(--accent); }
.dojo-sources .study-materials { padding: 16px 14px; overflow: hidden; }
.dojo-add-source-row { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 13px; }
.dojo-source-nudge { width: 35px; height: 29px; flex-shrink: 0; stroke: color-mix(in srgb, var(--study-muted) 78%, var(--study-ink)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; transition: transform 180ms cubic-bezier(.23, 1, .32, 1); }
.dojo-source-nudge--right { transform: scaleX(-1); }
.dojo-sources .study-material-board { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dojo-sources .study-dropzone { align-self: flex-start; width: auto; height: 36px; gap: 7px; padding: 0 16px 0 13px; border: 1px solid color-mix(in srgb, var(--dojo-hue-c) 30%, transparent); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--dojo-hue-a) 55%, #fff), var(--dojo-hue-a)); color: #13639b; font: 600 13px var(--dojo-display); letter-spacing: .005em; box-shadow: 0 1px 2px #0000000d, 0 4px 12px color-mix(in srgb, var(--dojo-hue-b) 28%, transparent), inset 0 1px 0 #ffffffb3; transition: transform 140ms var(--ease-out), box-shadow 160ms ease, filter 140ms ease; }
.dojo-sources .study-dropzone svg { width: 14px; height: 14px; stroke-width: 2.4; }
.dojo-sources .study-dropzone:active { transform: scale(.97); }
body[data-mode="dark"] .dojo-sources .study-dropzone { border-color: color-mix(in srgb, var(--dojo-hue-c) 40%, transparent); background: color-mix(in srgb, var(--dojo-hue-c) 18%, var(--bg-secondary)); color: var(--dojo-hue-a); box-shadow: none; }
.dojo-sources .dojo-source-caption { margin: 20px 2px 8px; }
.dojo-sources .study-material-card { padding: 0; gap: 0; margin-bottom: 0; border: 0; border-bottom: 1px solid var(--border-light); border-radius: 0; background: transparent; }
.dojo-source-open { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 43px; padding: 7px 30px 7px 5px; border: 0; border-radius: 8px; text-align: left; background: transparent; color: var(--text); cursor: pointer; }
.dojo-source-open .study-material-copy { flex: 1; gap: 3px; }
.dojo-source-open .study-material-copy strong { font-size: 11.5px; line-height: 1.4; }
.dojo-source-open .dojo-file-icon { flex-basis: 25px; width: 25px; height: 27px; border-radius: 6px; }
.dojo-source-open .dojo-file-icon svg { width: 19px; height: 21px; }
.dojo-file-icon { display: inline-grid; place-items: center; flex: 0 0 29px; width: 29px; height: 32px; border-radius: 7px; color: var(--text-secondary); background: var(--bg-secondary); }
.dojo-file-icon svg { width: 22px; height: 24px; }
.dojo-file-icon.is-pdf { color: #ce535b; background: #d8586110; }
.dojo-file-icon.is-slides { color: #d47736; background: #dd7c3012; }
.dojo-file-icon.is-word { color: #4a80d0; background: #4d82d614; }
.dojo-file-icon.is-sheet { color: #38906b; background: #38906b12; }
.dojo-file-icon.is-image { color: #9870c8; background: #9870c812; }
.dojo-source-open:focus-visible, .dojo-source-rail button:focus-visible, .dojo-source-sort summary:focus-visible, .dojo-sort-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dojo-sources .study-card-menu-wrap { top: 6px; right: 2px; }
.dojo-sources, .dojo-studio { position: relative; }
.dojo-source-rail, .dojo-studio-rail { position: absolute; inset: 0; display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 15px 8px; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; }
.dojo-source-rail > .study-icon-btn, .dojo-studio-rail > .study-icon-btn { width: 32px; height: 32px; display: grid; place-items: center; padding: 7px; }
.dojo-source-rail svg, .dojo-studio-rail svg { width: 18px; height: 18px; }
.dojo-rail-label { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin: 5px 0; color: var(--text-secondary); }
.dojo-rail-count { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dojo-rail-files { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dojo-rail-files button { display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.dojo-rail-files .dojo-file-icon { width: 30px; height: 32px; }
.dojo-source-preview-slot { display: flex; flex: 1; min-width: 0; min-height: 0; }
.dojo-source-preview-slot .document-viewer.is-inline-source { position: relative; inset: auto; flex: 1; width: 100%; height: 100%; min-height: 0; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.document-viewer.is-inline-source .document-viewer-resizer, .document-viewer.is-inline-source .document-viewer-meta { display: none; }
.document-viewer.is-inline-source .document-viewer-header { min-height: 54px; padding: 10px; gap: 6px; }
.document-viewer.is-inline-source .document-viewer-title { font-size: 12px; }
.document-viewer.is-inline-source .document-viewer-file-icon { width: 25px; height: 30px; flex-basis: 25px; }
.document-viewer.is-inline-source .document-viewer-action { width: 28px; min-width: 28px; min-height: 28px; padding: 5px; }
.document-viewer.is-inline-source .document-viewer-action > span { display: none; }
.document-viewer.is-inline-source .document-viewer-actions { gap: 2px; }
.document-viewer.is-inline-source .document-viewer-icon-action, .document-viewer.is-inline-source .document-viewer-close { width: 28px; height: 28px; padding: 5px; }
.document-viewer.is-inline-source .document-viewer-body { padding: 12px; min-height: 0; }
body.document-viewer-fullscreen .document-viewer.is-inline-source { position: fixed; inset: 0; z-index: 3000; width: auto; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .dojo-add-source-row:has(.study-dropzone:hover) .dojo-source-nudge:not(.dojo-source-nudge--right) { transform: translateX(3px); }
  .dojo-add-source-row:has(.study-dropzone:hover) .dojo-source-nudge--right { transform: translateX(-3px) scaleX(-1); }
  .dojo-sources .study-dropzone:hover { filter: brightness(1.02) saturate(1.08); box-shadow: 0 1px 2px #0000000d, 0 6px 16px color-mix(in srgb, var(--dojo-hue-b) 38%, transparent), inset 0 1px 0 #ffffffb3; }
  .study-back-btn:hover .dojo-wordmark--crumb { filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--dojo-hue-b) 45%, transparent)); }
  .dojo-sources .study-material-card > .study-card-menu-wrap > button { opacity: 0; transition: opacity 120ms ease; }
  .dojo-sources .study-material-card:hover > .study-card-menu-wrap > button,
  .dojo-sources .study-material-card:focus-within > .study-card-menu-wrap > button,
  .dojo-sources .study-material-card > .study-card-menu-wrap > button[aria-expanded="true"] { opacity: 1; }
  .dojo-source-open:hover, .dojo-sort-menu button:hover { background: var(--bg-hover, var(--bg-secondary)); }
  .dojo-studio .study-practice-card > .study-card-menu-wrap > button { opacity: 0; transition: opacity 120ms ease; }
  .dojo-studio .study-practice-card:hover > .study-card-menu-wrap > button,
  .dojo-studio .study-practice-card:focus-within > .study-card-menu-wrap > button,
  .dojo-studio .study-practice-card > .study-card-menu-wrap > button[aria-expanded="true"] { opacity: 1; }
}
@media (min-width: 761px) {
  .dojo-sources-expanded, .dojo-source-rail, .dojo-studio-expanded, .dojo-studio-rail { transition: opacity 170ms ease, visibility 170ms; }
  .dojo-workspace[data-sources-collapsed="true"] { grid-template-columns: 56px minmax(340px, 1.85fr) minmax(270px, 1fr); }
  .dojo-workspace[data-studio-collapsed="true"] { grid-template-columns: clamp(230px, 17vw, 300px) minmax(340px, 1fr) 56px; }
  .dojo-workspace[data-sources-collapsed="true"][data-studio-collapsed="true"] { grid-template-columns: 56px minmax(0, 1fr) 56px; }
  .dojo-workspace[data-studio-collapsed="true"] .dojo-studio-expanded { opacity: 0; visibility: hidden; pointer-events: none; }
  .dojo-workspace[data-studio-collapsed="true"] .dojo-studio-rail { opacity: 1; visibility: visible; pointer-events: auto; }
  .dojo-workspace[data-source-motion="off"] .dojo-studio-expanded,
  .dojo-workspace[data-source-motion="off"] .dojo-studio-rail { transition: none; }
  .dojo-workspace[data-sources-collapsed="true"] .dojo-sources-expanded { opacity: 0; visibility: hidden; pointer-events: none; }
  .dojo-workspace[data-sources-collapsed="true"] .dojo-source-rail { opacity: 1; visibility: visible; pointer-events: auto; }
  .dojo-workspace[data-source-motion="off"] .dojo-sources-expanded,
  .dojo-workspace[data-source-motion="off"] .dojo-source-rail { transition: none; }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .dojo-workspace[data-sources-collapsed="true"] { grid-template-columns: 56px minmax(280px, 1fr) 230px; }
  .dojo-workspace[data-studio-collapsed="true"] { grid-template-columns: 190px minmax(280px, 1fr) 56px; }
}
@media (min-width: 1121px) {
  .dojo-workspace[data-source-preview="true"][data-sources-collapsed="false"] { grid-template-columns: clamp(340px, 26vw, 480px) minmax(300px, 1fr) minmax(230px, 20vw); }
  .dojo-workspace[data-source-preview="true"][data-sources-collapsed="false"][data-studio-collapsed="true"] { grid-template-columns: clamp(340px, 26vw, 480px) minmax(300px, 1fr) 56px; }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .dojo-workspace[data-source-preview="true"][data-sources-collapsed="false"] { grid-template-columns: minmax(260px, 34%) minmax(250px, 1fr) 180px; }
  .dojo-workspace[data-source-preview="true"][data-sources-collapsed="false"][data-studio-collapsed="true"] { grid-template-columns: minmax(260px, 34%) minmax(250px, 1fr) 56px; }
}
@media (max-width: 760px) {
  .dojo-collapse-sources, .dojo-collapse-studio { display: none !important; }
  .dojo-source-rail, .dojo-studio-rail { display: none; }
  .dojo-sources-expanded, .dojo-studio-expanded { width: 100%; }
}
.document-viewer.is-inline-source .document-preview-toolbar { flex-wrap: wrap; row-gap: 6px; }
.dojo-source-rail, .dojo-studio-rail { overflow-y: auto; }
.dojo-source-rail, .dojo-studio-rail { font-family: var(--font-sans); }

.dojo-studio-rail .dojo-rail-files button { width: 32px; height: 34px; border-radius: 8px; background: color-mix(in srgb, currentColor 8%, transparent); }
.dojo-studio-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Study previews live in Ask messages and use the same surfaces as Dojo. */
.study-inline { box-sizing: border-box; width: min(100%, 720px); margin: 14px 0; padding: 16px; border: 1px solid var(--border); border-radius: 17px; background: var(--bg); color: var(--text); font: 13px var(--font-sans); box-shadow: 0 9px 28px #0000000c; }
.artifact-list:has(.study-inline--cards) { width: 100%; max-width: none; }
.study-inline--cards { width: min(100%, 960px); margin: 28px auto 20px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.study-inline-top, .study-inline-progress, .study-inline-actions { display: flex; align-items: center; gap: 10px; }
.study-inline-top { justify-content: space-between; color: var(--text-secondary); font-size: 11px; font-weight: 650; }
.study-inline-source { display: inline-block; overflow: hidden; max-width: 55%; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; text-align: right; font-weight: 500; }
.study-inline-source-foot { align-self: flex-end; margin-top: 18px; color: var(--text-secondary); font-size: 11px; text-align: right; }
.study-inline-source-foot .study-inline-source { max-width: 100%; }
.study-inline-count { margin: 12px 0 5px; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; }
.study-inline-count span { color: var(--text-secondary); font-weight: 450; }
.study-inline-progress { margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.study-inline-progress > div { flex: 1; height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg-secondary); }
.study-inline-progress > div > span { display: block; height: 100%; border-radius: inherit; background: var(--study-blue); transition: width 200ms cubic-bezier(.23,1,.32,1); }
.study-inline-progress > button { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: background 140ms ease, transform 140ms cubic-bezier(.23,1,.32,1); }
.study-inline-progress > button svg { width: 22px; height: 22px; }
.study-inline-progress > button:disabled { opacity: .35; cursor: default; }
.study-inline-stack { position: relative; isolation: isolate; padding-top: 18px; perspective: 900px; }
.study-inline-stack.has-stack::before, .study-inline-stack.has-stack::after { content: ""; position: absolute; z-index: -1; height: calc(100% - 18px); border: 1px solid var(--border); border-radius: 23px; background: var(--bg); }
.study-inline-stack.has-stack::before { top: 0; left: 30px; right: 30px; box-shadow: 0 3px 12px #00000008; }
.study-inline-stack.has-stack::after { top: 9px; left: 15px; right: 15px; box-shadow: 0 5px 16px #0000000b; }
.study-inline-card { position: relative; display: flex; flex-direction: column; align-items: center; min-height: clamp(330px, 31vw, 440px); padding: 32px 36px 22px; border: 1px solid var(--border); border-radius: 23px; background: var(--bg); box-shadow: 0 18px 36px #00000016, 0 3px 8px #0000000a; text-align: center; }
.study-inline-card-content { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 650px); }
.study-inline-question { max-width: 620px; margin: 0 0 22px; font-size: clamp(19px, 2vw, 25px); font-weight: 560; line-height: 1.4; text-wrap: balance; }
.study-inline-answer { max-width: 600px; margin: 0; padding-top: 18px; border-top: 1px solid var(--border); color: var(--accent); font-size: 16px; line-height: 1.5; white-space: pre-line; animation: study-preview-reveal 180ms cubic-bezier(.23,1,.32,1) both; }
.study-inline-choices { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; margin: 0 0 16px; text-align: left; }
.study-inline-choices button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.study-inline-choices button span { display: grid; place-items: center; flex: 0 0 21px; height: 21px; border-radius: 6px; background: var(--bg-secondary); font-weight: 700; }
.study-inline-choices button.is-picked { border-color: var(--accent); }
.study-inline-choices button.is-correct { border-color: #5b9d63; background: color-mix(in srgb, #5b9d63 12%, var(--bg)); }
.study-inline-reveal { padding: 8px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text-secondary); font: inherit; cursor: pointer; }
.study-inline-save { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 24px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); }
.study-inline-save label { display: grid; gap: 7px; flex: 1 1 230px; min-width: 0; color: var(--text-secondary); font-size: 12px; }
.study-inline-save select { width: 100%; max-width: 380px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font: 13px var(--font-sans); }
.study-inline-actions { flex-wrap: wrap; }
.study-inline-actions button { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: 12px var(--font-sans); cursor: pointer; transition: transform 140ms cubic-bezier(.23,1,.32,1), background 140ms ease; }
.study-inline-actions button.is-primary { border-color: var(--study-blue); background: var(--study-blue); color: var(--bg); }
.study-inline-actions button:disabled { opacity: .52; cursor: default; }
.study-inline-actions small { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.artifact-list:has(.study-inline--map) { width: 100%; max-width: none; grid-template-columns: minmax(0, 1fr); }
.study-inline--map { width: 100%; min-width: 0; margin: 28px auto 20px; padding: 0; border: 0; box-shadow: none; }
.study-inline--map > .study-inline-actions { margin-top: 20px; }
@keyframes study-preview-reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) { .study-inline-actions button:not(:disabled):hover, .study-inline-choices button:hover, .study-inline-reveal:hover, .study-inline-progress button:not(:disabled):hover { background: var(--bg-secondary); } .study-inline-actions button:not(:disabled):active, .study-inline-progress button:not(:disabled):active { transform: scale(.97); } }
@media (max-width: 600px) { .study-inline { padding: 12px; } .study-inline--cards { padding: 0; } .study-inline-card { min-height: 300px; padding: 24px 18px 16px; } .study-inline-question { font-size: 19px; } .study-inline-save { padding: 15px; } .study-inline-choices { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .study-inline-answer { animation: none; } .study-inline-progress > div > span { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .dojo-source-nudge { transition: none; }
  .dojo-add-source-row:has(.study-dropzone:hover) .dojo-source-nudge:not(.dojo-source-nudge--right) { transform: none; }
  .dojo-add-source-row:has(.study-dropzone:hover) .dojo-source-nudge--right { transform: scaleX(-1); }
}

/* Source intake uses the same quiet surfaces as the Dojo workspace. */
.dojo-source-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-sizing: border-box; padding: 22px 26px 26px; border: 1px solid var(--border); border-radius: 24px; background: var(--bg); color: var(--text); box-shadow: 0 24px 100px #0003; overflow: auto; font-family: var(--font-sans); }
.dojo-source-dialog::backdrop { background: #10151b66; backdrop-filter: blur(5px); }
.dojo-source-dialog-head, .dojo-source-brand, .dojo-source-text-label, .dojo-source-text-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dojo-source-dialog-head { margin-bottom: 18px; }
.dojo-source-brand { justify-content: flex-start; min-height: 34px; padding-left: 2px; font-size: 10px; letter-spacing: .12em; font-weight: 650; text-transform: uppercase; color: var(--text-secondary); }
.dojo-source-dialog button { font: inherit; cursor: pointer; }
.dojo-source-dialog button:disabled { cursor: wait; opacity: .55; }
.dojo-source-dialog button:focus-visible, .dojo-source-dialog input:focus-visible, .dojo-source-dialog textarea:focus-visible { outline: 2px solid var(--study-blue, #4d85d8); outline-offset: 3px; }
.dojo-source-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 176px; padding: 20px 12px; border: 1px dashed color-mix(in srgb, var(--text-secondary) 35%, var(--border)); border-radius: 16px; background: var(--bg-secondary); color: var(--text); }
.dojo-upload-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 4px; background: var(--bg); box-shadow: 0 3px 10px #00000008; color: var(--study-green, #479a83); }
.dojo-upload-symbol svg { width: 24px; height: 24px; }
.dojo-source-upload strong { font-size: 15px; font-weight: 550; }
.dojo-source-upload > span:not(.dojo-upload-symbol) { font-size: 12px; color: var(--text-secondary); }
.dojo-source-upload u { text-underline-offset: 3px; color: var(--text); }
.dojo-source-upload small { font-size: 10px; color: var(--text-secondary); margin-top: 8px; }
.dojo-source-dialog:has(.dojo-source-form:not([hidden])) .dojo-source-upload { min-height: 70px; flex-direction: row; gap: 14px; padding: 12px; }
.dojo-source-dialog:has(.dojo-source-form:not([hidden])) .dojo-upload-symbol { width: 36px; height: 36px; margin: 0; }
.dojo-source-dialog:has(.dojo-source-form:not([hidden])) .dojo-source-upload > span:not(.dojo-upload-symbol), .dojo-source-dialog:has(.dojo-source-form:not([hidden])) .dojo-source-upload small { display: none; }
.dojo-source-dialog:has(.dojo-source-form:not([hidden])) .dojo-source-dialog-head { margin-bottom: 12px; }
.dojo-source-dialog:has(.dojo-source-form:not([hidden])) .dojo-source-divider { margin: 14px 0; }
.dojo-source-divider { display: flex; align-items: center; gap: 14px; color: var(--text-secondary); font-size: 10px; margin: 20px 0; }
.dojo-source-divider::before, .dojo-source-divider::after { content: ''; height: 1px; background: var(--border); flex: 1; }
.dojo-source-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dojo-source-options button { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-align: left; }
.dojo-source-options button > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--study-blue, #4d85d8); }
.dojo-source-options button:last-child > svg { color: var(--study-purple, #9572d0); }
.dojo-source-options button > span:last-child { margin-left: auto; font-size: 16px; color: var(--text-secondary); }
.dojo-source-options strong, .dojo-source-options small { display: block; }
.dojo-source-options strong { font-size: 13px; font-weight: 550; }
.dojo-source-options small { margin-top: 5px; color: var(--text-secondary); font-size: 10px; }
.dojo-source-options [aria-expanded="true"] { border-color: var(--study-blue, #4d85d8); background: color-mix(in srgb, var(--study-blue, #4d85d8) 5%, var(--bg)); }
.dojo-source-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.dojo-source-form[hidden] { display: none; }
.dojo-source-form label { display: block; font-size: 12px; font-weight: 550; margin-bottom: 9px; }
.dojo-source-optional { font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.dojo-source-form input, .dojo-source-form textarea { box-sizing: border-box; width: 100%; padding: 12px 13px; background: var(--bg-secondary); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font: 13px/1.5 var(--font-sans); }
.dojo-source-form textarea { resize: vertical; min-height: 104px; max-height: 35vh; }
.dojo-source-input-row { display: flex; gap: 8px; }
.dojo-source-input-row input { min-width: 0; }
.dojo-source-form [data-source-paste] { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--bg); font-size: 12px; }
.dojo-source-form [data-source-paste] svg { width: 15px; height: 15px; }
.dojo-source-form .dojo-source-hint { color: var(--text-secondary); font-size: 11px; line-height: 1.5; margin: 9px 0 16px; }
.dojo-source-submit { display: flex; align-items: center; justify-content: center; gap: 16px; margin-left: auto; min-height: 40px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-contrast); font-size: 12px !important; font-weight: 550 !important; }
.dojo-source-text-label { margin: 16px 0 8px; }
.dojo-source-text-label label { margin: 0; }
.dojo-source-text-footer { margin-top: 10px; }
.dojo-source-text-footer > span { color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; }
.dojo-source-dialog > .dojo-source-feedback { margin: 16px 0 0; font-size: 12px; }
.dojo-source-dialog > .dojo-source-feedback.is-error { color: var(--danger); }
.dojo-source-dialog[aria-busy="true"] .dojo-source-feedback::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--study-green, #479a83); margin-right: 8px; }
.dojo-source-dialog.is-dragging .dojo-source-upload { border-color: var(--study-green, #479a83); background: color-mix(in srgb, var(--study-green, #479a83) 9%, var(--bg)); }
.dojo-source-dialog[data-motion="on"], .dojo-source-dialog[data-motion="on"] .dojo-source-form { transition: opacity 220ms cubic-bezier(.23, 1, .32, 1), transform 220ms cubic-bezier(.23, 1, .32, 1); }
.dojo-source-dialog[data-motion="on"] button { transition: transform 140ms cubic-bezier(.23, 1, .32, 1); }
.dojo-source-dialog[data-motion="on"] button:active:not(:disabled) { transform: scale(.97); }
@starting-style {
  .dojo-source-dialog[open][data-motion="on"] { opacity: 0; transform: translateY(8px) scale(.97); }
  .dojo-source-dialog[data-motion="on"] .dojo-source-form:not([hidden]) { opacity: 0; transform: translateY(5px); }
}
@media (hover: hover) and (pointer: fine) {
  .dojo-source-upload:hover, .dojo-source-options button:hover { border-color: var(--text-secondary); }
  .dojo-source-form [data-source-paste]:hover { background: var(--bg-secondary); }
  #studyCreateDialog .study-create-close:hover { background: var(--bg-secondary); color: var(--text); }
}
@media (prefers-reduced-motion: reduce) {
  .dojo-source-dialog[data-motion="on"], .dojo-source-dialog[data-motion="on"] .dojo-source-form, .dojo-source-dialog[data-motion="on"] button { transition: opacity 120ms ease; transform: none !important; }
}
@media (max-width: 480px) {
  .dojo-source-dialog { padding: 20px; border-radius: 20px; max-height: calc(100dvh - 24px); }
  .dojo-source-options { gap: 8px; }
  .dojo-source-options button { padding: 11px; gap: 8px; }
  .dojo-source-options small { line-height: 1.4; }
  .dojo-source-options button > span:last-child { display: none; }
  .dojo-source-upload { min-height: 172px; }
  .dojo-source-form input, .dojo-source-form textarea { font-size: 16px; }
}
.source-text-preview { padding: 24px; color: var(--text); }
.source-text-preview a { display: block; margin-bottom: 20px; font: 12px var(--font-sans); color: var(--study-blue, #4d85d8); }
.source-text-preview pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.8 var(--font-sans); }
.dojo-file-icon.is-website { color: var(--study-blue); background: color-mix(in srgb, var(--study-blue) 9%, var(--bg)); }
.dojo-source-kind { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 10px; font-weight: 400; }

/* Create panel viewer: decks, notes, and tests open in place and widen the panel. */
@media (min-width: 1121px) {
  .dojo-workspace[data-studio-view="true"][data-studio-collapsed="false"] { grid-template-columns: clamp(230px, 17vw, 300px) minmax(320px, 1fr) minmax(360px, 33vw); }
  .dojo-workspace[data-studio-view="true"][data-studio-collapsed="false"][data-sources-collapsed="true"] { grid-template-columns: 56px minmax(340px, 1fr) minmax(380px, 37vw); }
  .dojo-workspace[data-studio-view="true"][data-studio-collapsed="false"][data-source-preview="true"][data-sources-collapsed="false"] { grid-template-columns: clamp(320px, 24vw, 440px) minmax(280px, 1fr) minmax(340px, 29vw); }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .dojo-workspace[data-studio-view="true"][data-studio-collapsed="false"] { grid-template-columns: 190px minmax(260px, 1fr) 320px; }
  .dojo-workspace[data-studio-view="true"][data-studio-collapsed="false"][data-sources-collapsed="true"] { grid-template-columns: 56px minmax(260px, 1fr) 340px; }
  .dojo-workspace[data-studio-view="true"][data-studio-collapsed="false"][data-source-preview="true"][data-sources-collapsed="false"] { grid-template-columns: minmax(240px, 30%) minmax(220px, 1fr) 280px; }
}
.dojo-studio-view { padding: 0; gap: 0; animation: dojo-view-in 260ms var(--ease-out); }
@keyframes dojo-view-in { from { opacity: 0; transform: translateX(10px); } }
.dojo-view-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 8px; border-bottom: 1px solid var(--study-stroke); flex-shrink: 0; }
.dojo-view-head h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px var(--study-font); letter-spacing: -.01em; color: var(--study-ink); }
.dojo-view-count, .dojo-view-badge { flex-shrink: 0; padding: 2px 8px; border-radius: 7px; background: var(--dojo-soft); color: var(--study-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.dojo-view-head h3 + .dojo-view-count + .dojo-view-full, .dojo-view-head h3 + .dojo-view-full { margin-left: auto; }
.dojo-view-modes { display: flex; gap: 2px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--study-stroke); flex-shrink: 0; }
.dojo-view-modes button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--study-muted); font: 12px var(--study-font); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.dojo-view-modes button[aria-selected="true"] { background: var(--dojo-soft); color: var(--study-ink); font-weight: 550; }
.dojo-view-tools { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-shrink: 0; }
.dojo-view-tools-end { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.dojo-view-tools .study-icon-btn.is-on { background: var(--dojo-soft); color: var(--study-ink); }
.dojo-view-action { display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px 7px 11px; border: 1px solid var(--study-stroke); border-radius: 10px; background: var(--dojo-surface); color: var(--study-ink); font: 550 12px var(--study-font); cursor: pointer; }
.dojo-view-action.is-primary { padding-right: 12px; border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.dojo-view-action:disabled { opacity: .5; cursor: default; }
.dojo-view-tip { color: var(--study-muted); font-size: 11px; }
.dojo-view-search { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 0 11px; border: 1px solid var(--study-stroke); border-radius: 10px; background: var(--dojo-soft); color: var(--study-muted); animation: dojo-drop-in 200ms var(--ease-out); flex-shrink: 0; }
.dojo-view-search input { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: transparent; color: var(--study-ink); font: 13px var(--study-font); outline: none; }
.dojo-view-search span { font-size: 11px; font-variant-numeric: tabular-nums; }
@keyframes dojo-drop-in { from { opacity: 0; transform: translateY(-4px); } }
.dojo-view-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 12px 16px; }
.dojo-studio-view[data-layout="column"] .dojo-view-body { padding: 0; border-top: 1px solid var(--study-stroke); }

.dojo-qa { color: var(--study-ink); font-size: 13px; line-height: 1.55; animation: dojo-qa-in 260ms var(--ease-out) both; }
.dojo-qa:nth-child(2) { animation-delay: 25ms; } .dojo-qa:nth-child(3) { animation-delay: 50ms; } .dojo-qa:nth-child(4) { animation-delay: 75ms; } .dojo-qa:nth-child(n+5) { animation-delay: 100ms; }
@keyframes dojo-qa-in { from { opacity: 0; transform: translateY(6px); } }
.dojo-qa strong { display: block; font-weight: 600; white-space: pre-line; }
.dojo-qa p { margin: 6px 0 0; color: var(--study-muted); white-space: pre-line; }
.dojo-qa.is-column { padding: 13px 14px; border-bottom: 1px solid var(--study-stroke); }
.dojo-qa.is-column strong, .dojo-qa.is-column p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dojo-qa.is-column .dojo-cites { margin-top: 9px; }
.dojo-qa.is-list { margin-top: 10px; padding: 12px 14px 16px; border: 1px solid var(--study-stroke); border-radius: 14px; background: var(--dojo-surface); }
.dojo-qa.is-list strong { font-size: 14px; }
.dojo-qa.is-list p { margin-top: 12px; }
.dojo-qa-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dojo-card-star svg { width: 17px; height: 17px; }
.dojo-card-star.is-on { color: #e0a93a; }
.dojo-card-star.is-on svg { animation: dojo-star-pop 320ms var(--ease-out); }
@keyframes dojo-star-pop { 40% { transform: scale(1.3) rotate(-8deg); } }
.dojo-qa.is-toggle { border-bottom: 1px solid var(--study-stroke); }
.dojo-qa.is-toggle summary { display: flex; gap: 6px; padding: 12px 4px; list-style: none; cursor: pointer; border-radius: 8px; }
.dojo-qa.is-toggle summary::-webkit-details-marker { display: none; }
.dojo-qa.is-toggle summary > span:last-child { min-width: 0; flex: 1; }
.dojo-qa.is-toggle strong { font-weight: 450; }
.dojo-qa.is-toggle .dojo-cites { margin-bottom: 6px; }
.dojo-toggle-chevron { display: grid; place-items: center; flex-shrink: 0; align-self: flex-start; width: 20px; height: 20px; margin-top: 1px; color: var(--study-muted); transform-origin: 50% 50%; transition: transform 200ms var(--ease-out); }
.dojo-toggle-chevron svg { width: 14px; height: 14px; }
.dojo-qa.is-toggle[open] .dojo-toggle-chevron { transform: rotate(90deg); }
.dojo-qa.is-toggle > p, .dojo-qa.is-toggle > ol { margin: 0 4px 14px 30px; }
.dojo-qa.is-toggle[open] > :not(summary) { animation: dojo-drop-in 220ms var(--ease-out); }
.dojo-qa.is-typing { padding: 16px 2px 18px; border-bottom: 1px solid var(--study-stroke); }
.dojo-q { margin: 8px 0 10px !important; color: var(--study-ink) !important; font-size: 14px; font-weight: 550; }
.dojo-q > span { color: var(--study-muted); font-weight: 450; margin-right: 2px; }
.dojo-qa.is-typing textarea { box-sizing: border-box; width: 100%; min-height: 76px; padding: 11px 12px; resize: vertical; border: 1px solid var(--study-stroke); border-radius: 11px; background: var(--dojo-surface); color: var(--study-ink); font: 13px/1.5 var(--study-font); transition: border-color 160ms ease, box-shadow 160ms ease; }
.dojo-qa.is-typing textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 50%, var(--study-stroke)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.dojo-qa.is-checked textarea { background: var(--dojo-soft); color: var(--study-muted); }
.dojo-typing-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0 auto; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-contrast); font: 550 12px var(--study-font); cursor: pointer; transition: opacity 160ms ease, transform 140ms var(--ease-out); }
.dojo-typing-check:disabled { opacity: .45; cursor: default; }
.dojo-typing-result { position: relative; margin-top: 10px; padding: 11px 12px; border-radius: 11px; background: color-mix(in srgb, var(--study-green) 11%, var(--dojo-surface)); border: 1px solid color-mix(in srgb, var(--study-green) 30%, transparent); animation: dojo-drop-in 240ms var(--ease-out); }
.dojo-typing-result > span { font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--study-green); }
.dojo-typing-result p { margin: 4px 0 8px; color: var(--study-ink); }

.dojo-cites { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.dojo-cite { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 7px; border: 1px solid var(--study-stroke); border-radius: 6px; background: var(--dojo-surface); color: var(--study-muted); font: 550 10px/1.6 var(--study-font); white-space: nowrap; }
button.dojo-cite { cursor: pointer; transition: color 140ms ease, border-color 140ms ease, transform 140ms var(--ease-out); }
.dojo-cite-name { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.dojo-cite > span:last-child:not(.dojo-cite-name) { color: var(--study-ink); font-variant-numeric: tabular-nums; }
.study-flip-face .dojo-cites { justify-content: center; margin-bottom: 14px; }

.dojo-flip-wrap { display: flex; flex-direction: column; min-height: 100%; padding-top: 6px; }
.dojo-flip-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dojo-flip-track { flex: 1; height: 6px; border-radius: 6px; background: var(--dojo-soft); overflow: hidden; }
.dojo-flip-track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 280ms var(--ease-out); }
.dojo-flip-count { flex: none; min-width: 42px; text-align: right; color: var(--study-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dojo-flip { display: flex; flex: 1; min-height: 280px; max-height: 560px; perspective: 1200px; cursor: pointer; border-radius: 18px; outline-offset: 3px; animation: dojo-qa-in 280ms var(--ease-out); }
.dojo-flip-inner { position: relative; flex: 1; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.3, 1.3, .5, 1); }
.dojo-flip.is-flipped .dojo-flip-inner { transform: rotateY(180deg); }
.dojo-flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 4px; padding: 22px; text-align: center; border: 1px solid var(--study-stroke); border-radius: 18px; background: var(--dojo-surface); box-shadow: 0 10px 0 -5px var(--dojo-soft), 0 10px 0 -4px var(--study-stroke), 0 4px 18px #0000000a; backface-visibility: hidden; overflow-y: auto; }
.dojo-flip-face.is-back { transform: rotateY(180deg); }
.dojo-flip-face .dojo-cites { justify-content: center; margin-bottom: 10px; }
.dojo-flip-face p { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-line; color: var(--study-ink); }
.dojo-flip-face small { margin-top: 14px; color: var(--study-muted); font-size: 12px; }
.dojo-flip-kicker { font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--study-green); margin-bottom: 8px; }
.dojo-flip-hint { margin: 12px 0 0; text-align: center; color: var(--study-muted); font-size: 11px; }
.dojo-flip-face { transition: border-color 200ms ease; }
.dojo-flip.is-got .dojo-flip-face { border-color: color-mix(in srgb, var(--study-green) 55%, var(--study-stroke)); }
.dojo-flip.is-miss .dojo-flip-face { border-color: color-mix(in srgb, var(--study-red) 55%, var(--study-stroke)); }
/* Grade row: back and next at the edges, missed and got it in the middle with their running counts. */
.dojo-flip-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.dojo-flip-nav, .dojo-flip-grade { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--study-stroke); background: transparent; font: 600 15px var(--study-font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out), opacity 140ms ease; }
.dojo-flip-nav { width: 46px; border-radius: 50%; color: var(--study-ink); }
.dojo-flip-nav.is-next { color: var(--accent); }
.dojo-flip-nav:disabled { opacity: .35; cursor: default; }
.dojo-flip-nav svg, .dojo-flip-grade svg { width: 18px; height: 18px; }
.dojo-flip-grade { --grade: var(--study-green); gap: 10px; min-width: 88px; padding: 0 20px; border-radius: 999px; border-color: color-mix(in srgb, var(--grade) 38%, var(--study-stroke)); color: var(--grade); }
.dojo-flip-grade.is-miss { --grade: var(--study-red); margin-left: auto; }
.dojo-flip-grade.is-got { margin-right: auto; }
.dojo-flip-grade svg { stroke-width: 2.2; }
.dojo-flip-grade[aria-pressed="true"] { border-color: var(--grade); background: color-mix(in srgb, var(--grade) 14%, transparent); }
.dojo-flip-nav:active:not(:disabled), .dojo-flip-grade:active { transform: scale(.95); }
.dojo-flip-nav:focus-visible, .dojo-flip-grade:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .dojo-flip-nav:hover:not(:disabled) { background: var(--dojo-soft); }
  .dojo-flip-grade:hover { border-color: var(--grade); background: color-mix(in srgb, var(--grade) 8%, transparent); }
}
@container (max-width: 360px) {
  .dojo-flip-controls { gap: 4px; }
  .dojo-flip-nav, .dojo-flip-grade { height: 40px; }
  .dojo-flip-nav { width: 40px; }
  .dojo-flip-grade { flex: 0 1 auto; min-width: 0; padding: 0 4px; gap: 4px; font-size: 14px; }
  .dojo-flip-grade svg { width: 16px; height: 16px; }
}
.dojo-flip-round-note { margin: 0 0 10px; text-align: center; color: var(--study-muted); font-size: 12px; }
.dojo-flip-round-note button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
/* End of a preview round. */
.dojo-flip-done { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; max-height: 560px; padding: 24px; border: 1px solid var(--study-stroke); border-radius: 18px; background: var(--dojo-surface); text-align: center; animation: dojo-qa-in 280ms var(--ease-out); }
.dojo-flip-done-ring { position: relative; display: grid; place-content: center; width: 104px; height: 104px; margin-bottom: 16px; border-radius: 50%; background: conic-gradient(var(--study-green) var(--got), color-mix(in srgb, var(--study-red) 45%, var(--dojo-soft)) 0); }
.dojo-flip-done-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--dojo-surface); }
.dojo-flip-done-ring > * { position: relative; }
.dojo-flip-done-ring strong { font-size: 28px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.dojo-flip-done-ring small { margin-top: 3px; color: var(--study-muted); font-size: 11px; }
.dojo-flip-done h4 { margin: 0; font-size: 17px; font-weight: 650; }
.dojo-flip-done p { margin: 6px 0 18px; color: var(--study-muted); font-size: 13px; }
.dojo-flip-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dojo-flip-done-actions button { border-radius: 999px; padding: 9px 16px; }
.dojo-flip-done-actions svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .dojo-flip-done { animation: none; } }
@media (hover: none) { .dojo-flip-hint { display: none; } }

.dojo-quiz-num { display: block; margin-bottom: 3px; color: var(--study-muted); font-size: 10px; letter-spacing: .02em; }
.dojo-quiz-marks { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--study-purple) 12%, transparent); color: var(--study-purple); font-weight: 600; letter-spacing: 0; }
.dojo-quiz-choices { list-style: none; padding: 0; display: grid; gap: 5px; }
.dojo-quiz-choices li { display: flex; gap: 8px; padding: 7px 9px; border: 1px solid var(--study-stroke); border-radius: 9px; color: var(--study-muted); }
.dojo-quiz-choices li > span { font-weight: 650; }
.dojo-quiz-choices li.is-answer { border-color: color-mix(in srgb, var(--study-green) 45%, transparent); background: color-mix(in srgb, var(--study-green) 10%, transparent); color: var(--study-ink); }
.dojo-quiz-model { color: var(--study-ink) !important; }
.dojo-quiz-model span { display: block; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--study-green); }
.dojo-view-note { padding: 16px 18px 24px; font-size: 13px; line-height: 1.65; }
.dojo-view-note.is-mindmap { overflow: auto; }

@media (hover: hover) and (pointer: fine) {
  .dojo-view-modes button:hover { color: var(--study-ink); background: var(--dojo-soft); }
  .dojo-view-action:not(:disabled):hover { border-color: var(--study-muted); }
  .dojo-view-action.is-primary:not(:disabled):hover { filter: brightness(1.06); }
  button.dojo-cite:hover { color: var(--study-ink); border-color: var(--study-muted); }
  .dojo-qa.is-column:hover { background: var(--dojo-soft); }
  .dojo-qa.is-toggle summary:hover { background: var(--dojo-soft); }
  .dojo-flip:hover .dojo-flip-face { border-color: color-mix(in srgb, var(--study-muted) 45%, var(--study-stroke)); }
}
@media (prefers-reduced-motion: reduce) {
  .dojo-studio-view, .dojo-qa, .dojo-view-search, .dojo-typing-result, .dojo-flip, .dojo-qa.is-toggle[open] > :not(summary), .dojo-card-star.is-on svg { animation: none; }
  .dojo-flip-inner { transition: none; }
}

/* Practice test — always full screen. */
.study-test { --t-accent: var(--study-purple); --t-strong: #7b5ac6; --t-full: var(--study-green); --t-part: var(--study-orange); --t-revisit: #d9735b; --t-gutter: 14px; container-type: inline-size; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; color: var(--study-ink); font-family: var(--study-font); }
body[data-mode="dark"] .study-test { --t-strong: #8c6ad6; --t-revisit: #ec9a86; }
.study-test-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 8px; border-bottom: 1px solid var(--study-stroke); flex-shrink: 0; }
.study-test-title { flex: 1; min-width: 0; }
.study-test-title small { display: block; color: var(--study-muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.study-test-title h2 { margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.3 var(--study-font); letter-spacing: -.01em; }
.study-test-clock { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--dojo-soft); color: var(--study-ink); font: 600 12px var(--study-font); font-variant-numeric: tabular-nums; }
.study-test-clock svg { color: var(--study-muted); }
.study-test-clock.is-live svg { color: var(--t-accent); }
.study-test-scroll.dojo-view-body { flex: 1; min-height: 0; padding: 12px var(--t-gutter) 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.study-test-nav { padding: 12px 12px 10px; border: 1px solid var(--study-stroke); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--t-accent) 7%, var(--dojo-surface)), var(--dojo-surface) 70%); }
.study-test-nav-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
.study-test-nav-top strong { font-size: 13px; font-weight: 650; }
.study-test-nav-top strong span, .study-test-count { color: var(--study-muted); font-weight: 450; }
.study-test-count b { color: var(--t-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.study-test-dots { display: flex; gap: 6px; margin-top: 10px; padding: 4px 3px 5px; overflow-x: auto; scrollbar-width: none; }
.study-test-dots::-webkit-scrollbar { display: none; }
.study-test-dot { position: relative; flex: 0 0 32px; height: 32px; padding: 0; border: 1px solid var(--study-stroke); border-radius: 9px; background: var(--dojo-surface); color: var(--study-muted); font: 600 12px var(--study-font); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out); }
.study-test-dot.is-answered { border-color: color-mix(in srgb, var(--t-accent) 40%, var(--study-stroke)); background: color-mix(in srgb, var(--t-accent) 11%, var(--dojo-surface)); color: var(--study-ink); }
.study-test-dot.is-answered::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border: 2px solid var(--dojo-surface); border-radius: 50%; background: var(--t-strong); }
.study-test-dot.is-current { border-color: var(--t-accent); color: var(--study-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 20%, transparent); }
.study-test-dot:active { transform: scale(.94); }

.study-test-card { margin-top: 12px; padding: 16px; border: 1px solid var(--study-stroke); border-radius: 16px; background: var(--dojo-surface); box-shadow: 0 1px 2px #0000000a, 0 8px 24px -12px #0000001a; }
.study-test.is-entering .study-test-card { animation: study-test-in 260ms var(--ease-out); }
@keyframes study-test-in { from { opacity: 0; transform: translateY(6px); } }
.study-test-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; }
.study-test-kind { padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.study-test-kind.is-mcq { background: color-mix(in srgb, var(--study-green) 13%, transparent); color: var(--study-green); }
.study-test-kind.is-short { background: color-mix(in srgb, var(--study-blue) 13%, transparent); color: var(--study-blue); }
.study-test-topic { flex: 1 1 14ch; min-width: 0; color: var(--study-muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.study-test-marks { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--t-accent) 13%, transparent); color: var(--t-accent); font-size: 11px; font-weight: 650; white-space: nowrap; }
.study-test-q { margin: 0 0 16px; font: 550 15px/1.55 var(--study-font); letter-spacing: -.005em; white-space: pre-line; }
.study-test-choices { display: grid; gap: 8px; }
.study-test-choice { display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; align-items: start; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--study-stroke); border-radius: 12px; background: var(--dojo-surface); color: var(--study-ink); font: 13px/1.5 var(--study-font); text-align: left; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out); }
.study-test-choice-text { padding-top: 3px; white-space: pre-line; }
.study-test-letter { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--dojo-soft); color: var(--study-muted); font: 650 12px var(--study-font); transition: background-color 160ms ease, color 160ms ease; }
.study-test-tick { display: grid; place-items: center; height: 26px; color: var(--t-accent); opacity: 0; transform: scale(.6); transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.study-test-choice.is-picked { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 8%, var(--dojo-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 13%, transparent); }
.study-test-choice.is-picked .study-test-letter { background: var(--t-strong); color: #fff; }
.study-test-choice.is-picked .study-test-tick { opacity: 1; transform: scale(1); }
.study-test-choice:active { transform: scale(.99); }
.study-test-written { display: grid; gap: 8px; }
.study-test-written-label { color: var(--study-muted); font-size: 11px; font-weight: 600; }
.study-test-written textarea { box-sizing: border-box; width: 100%; min-height: 150px; padding: 12px 13px; resize: vertical; border: 1px solid var(--study-stroke); border-radius: 12px; background: var(--dojo-soft); color: var(--study-ink); font: 13px/1.65 var(--study-font); transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.study-test-written textarea:focus { outline: none; border-color: color-mix(in srgb, var(--t-accent) 60%, var(--study-stroke)); background: var(--dojo-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 14%, transparent); }
.study-test-written-foot { display: flex; align-items: center; gap: 10px; color: var(--study-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.study-test-words { margin-left: auto; }
.study-test-mic { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border: 1px solid var(--study-stroke); border-radius: 999px; background: var(--dojo-surface); color: var(--study-ink); font: 600 12px var(--study-font); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.study-test-mic svg { color: var(--t-accent); }
.study-test-mic:hover { border-color: color-mix(in srgb, var(--t-accent) 45%, var(--study-stroke)); }
.study-test-mic:active { transform: scale(.96); }
.study-test-mic:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.study-test-mic.is-recording { border-color: color-mix(in srgb, #e5484d 55%, transparent); background: color-mix(in srgb, #e5484d 12%, var(--dojo-surface)); color: #e5484d; animation: study-test-mic-pulse 1.4s ease-in-out infinite; }
.study-test-mic.is-recording svg { color: currentColor; }
.study-test-mic.is-processing { opacity: .7; cursor: progress; }
@keyframes study-test-mic-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, #e5484d 16%, transparent); } }
@media (prefers-reduced-motion: reduce) { .study-test-mic.is-recording { animation: none; } }

.study-test-foot { display: flex; align-items: center; gap: 8px; padding: 10px var(--t-gutter); border-top: 1px solid var(--study-stroke); flex-shrink: 0; }
.study-test-step { display: inline-flex; align-items: center; gap: 4px; padding: 8px 11px; border: 0; border-radius: 10px; background: transparent; color: var(--study-ink); font: 550 12.5px var(--study-font); cursor: pointer; transition: background-color 160ms ease, opacity 160ms ease, transform 140ms var(--ease-out); }
.study-test-step:disabled { opacity: .35; cursor: default; }
.study-test-step.is-next { margin-left: auto; padding-left: 14px; background: var(--dojo-soft); }
.study-test-step:not(:disabled):active, .study-test-submit:active, .study-report-btn:active { transform: scale(.97); }
.study-test-left { margin-left: auto; color: var(--study-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.study-test-submit, .study-report-btn.is-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #9272db, #6f4fc0); color: #fff; font: 600 12.5px var(--study-font); box-shadow: 0 6px 18px -6px #6f4fc080; cursor: pointer; transition: filter 160ms ease, transform 140ms var(--ease-out); }

.study-test-marking { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 100%; padding: 32px 12px; text-align: center; }
.study-test-marking strong { margin-top: 14px; font-size: 15px; font-weight: 650; }
.study-test-marking p { max-width: 30ch; margin: 0; color: var(--study-muted); font-size: 12.5px; line-height: 1.5; }
.study-test-marking-orb { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--t-accent), transparent 70%); animation: study-test-spin 1.4s linear infinite; }
.study-test-marking-orb span { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--t-accent) 30%, var(--dojo-surface)), var(--dojo-surface) 70%); }
@keyframes study-test-spin { to { transform: rotate(1turn); } }

.study-report { --tone: var(--t-accent); display: grid; gap: 12px; }
.study-report.is-top { --tone: var(--t-full); }
.study-report.is-high { --tone: var(--study-blue); }
.study-report.is-grow { --tone: var(--t-part); }
.study-report-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--study-stroke); border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 60%), var(--dojo-surface); }
.study-report-ring { position: relative; width: 112px; height: 112px; }
.study-report-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.study-report-ring circle { fill: none; stroke-width: 8; }
.study-report-track { stroke: color-mix(in srgb, var(--study-ink) 8%, transparent); }
.study-report-value { stroke: var(--tone); stroke-linecap: round; stroke-dashoffset: var(--ring-offset); }
@keyframes study-ring-in { from { stroke-dashoffset: var(--ring-full); } }
.study-test.is-entering .study-report-hero, .study-test.is-entering .study-answer { animation: study-test-in 300ms var(--ease-out) both; }
.study-test.is-entering .study-report-value { animation: study-ring-in 900ms cubic-bezier(.2, .8, .2, 1) both; }
.study-test.is-entering .study-report-note { animation: study-test-in 360ms var(--ease-out) both; }
.study-test.is-entering .study-report-note:nth-child(2) { animation-delay: 60ms; }
.study-test.is-entering .study-report-note:nth-child(3) { animation-delay: 120ms; }
.study-report-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.study-report-ring strong { font-size: 25px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.study-report-ring small { color: var(--study-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.study-report-band { display: inline-block; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.study-report-copy h2 { margin: 8px 0 12px; font: 600 15px/1.45 var(--study-font); letter-spacing: -.01em; }
.study-report-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.study-report-stats dt { color: var(--study-muted); font-size: 10.5px; }
.study-report-stats dd { display: flex; align-items: center; gap: 4px; margin: 1px 0 0; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.study-report-stats dd svg { color: var(--study-muted); }
.study-report-strip { display: flex; gap: 6px; padding: 1px 1px 3px; overflow-x: auto; scrollbar-width: none; }
.study-report-strip::-webkit-scrollbar { display: none; }
.study-report-q { --c: var(--study-muted); display: grid; flex: 0 0 auto; gap: 1px; min-width: 50px; padding: 6px 10px 8px; border: 1px solid var(--study-stroke); border-radius: 10px; background: var(--dojo-surface); box-shadow: inset 0 -3px 0 var(--c); color: var(--study-ink); font: 10.5px var(--study-font); text-align: left; cursor: pointer; transition: background-color 160ms ease, transform 140ms var(--ease-out); }
.study-report-q span { color: var(--study-muted); }
.study-report-q b { font-size: 12px; font-variant-numeric: tabular-nums; }
.study-report-q.is-full, .study-answer.is-full { --c: var(--t-full); }
.study-report-q.is-partial, .study-answer.is-partial { --c: var(--t-part); }
.study-report-q.is-revisit, .study-answer.is-revisit { --c: var(--t-revisit); }
.study-report-notes { display: grid; gap: 10px; }
.study-report-note { --c: var(--t-accent); padding: 14px 15px 15px; border: 1px solid var(--study-stroke); border-radius: 15px; background: var(--dojo-surface); }
.study-report-note.is-strengths { --c: var(--t-full); }
.study-report-note.is-growth { --c: var(--t-part); }
.study-report-note h3 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--c); font: 650 13px var(--study-font); }
.study-report-note h3 span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); }
.study-report-note ul { display: grid; gap: 7px; margin: 11px 0 0; padding: 0; list-style: none; }
.study-report-note li { position: relative; padding-left: 15px; color: var(--study-ink); font-size: 12.5px; line-height: 1.5; }
.study-report-note li::before { content: ""; position: absolute; top: .6em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.study-report-fine { margin: 0; color: var(--study-muted); font-size: 11px; text-align: center; }
.study-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.study-report-btn { flex: 1 1 0; padding: 10px 14px; border: 1px solid var(--study-stroke); border-radius: 11px; background: var(--dojo-surface); color: var(--study-ink); font: 600 12.5px var(--study-font); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out); }
.study-report-btn.is-primary { flex: 1 1 100%; border: 0; }

.study-answers { display: grid; gap: 12px; }
.study-answers-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.study-answers-head .study-test-step { padding-left: 6px; }
.study-answers-filter { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--dojo-soft); }
.study-answers-filter button { padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--study-muted); font: 550 11.5px var(--study-font); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.study-answers-filter button span { margin-left: 3px; opacity: .7; font-variant-numeric: tabular-nums; }
.study-answers-filter button[aria-selected="true"] { background: var(--dojo-surface); color: var(--study-ink); box-shadow: 0 1px 3px #00000014; }
.study-answer { --c: var(--study-muted); scroll-margin-top: 12px; padding: 14px 15px 13px 17px; border: 1px solid var(--study-stroke); border-radius: 16px; background: var(--dojo-surface); box-shadow: inset 3px 0 0 var(--c); }
.study-answer header { display: flex; align-items: center; gap: 8px; }
.study-answer-num { padding: 2px 7px; border-radius: 7px; background: var(--dojo-soft); font-size: 11px; font-weight: 700; }
.study-answer-kind { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--study-muted); font-size: 11px; }
.study-answer-score { color: var(--c); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.study-answer-score small { color: var(--study-muted); font-size: 11px; font-weight: 550; }
.study-answer-status { display: inline-block; margin: 9px 0 5px; color: var(--c); font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.study-answer h3 { margin: 0 0 11px; font: 600 13.5px/1.5 var(--study-font); white-space: pre-line; }
.study-answer-choices { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.study-answer-choices li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border: 1px solid var(--study-stroke); border-radius: 11px; }
.study-answer-choices p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; }
.study-answer-choices em { margin-left: 5px; color: var(--study-muted); font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.study-answer-choices small { display: block; margin-top: 3px; color: var(--study-muted); font-size: 11.5px; line-height: 1.45; }
.study-answer-choices li.is-picked { border-color: color-mix(in srgb, var(--t-revisit) 45%, var(--study-stroke)); background: color-mix(in srgb, var(--t-revisit) 7%, transparent); }
.study-answer-choices li.is-picked .study-test-letter { background: var(--t-revisit); color: #fff; }
.study-answer-choices li.is-picked em { color: var(--t-revisit); }
.study-answer-choices li.is-correct { border-color: color-mix(in srgb, var(--t-full) 45%, var(--study-stroke)); background: color-mix(in srgb, var(--t-full) 8%, transparent); }
.study-answer-choices li.is-correct .study-test-letter { background: var(--t-full); color: #fff; }
.study-answer-choices li.is-correct em { color: var(--t-full); }
.study-answer-block { margin-top: 8px; padding: 10px 12px; border: 1px solid transparent; border-radius: 11px; background: var(--dojo-soft); }
.study-answer-block small { color: var(--study-muted); font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.study-answer-block p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; white-space: pre-line; }
.study-answer-block.is-model { border-color: color-mix(in srgb, var(--t-full) 25%, transparent); background: color-mix(in srgb, var(--t-full) 8%, transparent); }
.study-answer-block.is-model small { color: var(--t-full); }
.study-answer-feedback { display: flex; gap: 9px; margin: 10px 0 0; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--t-accent) 9%, transparent); font-size: 12.5px; line-height: 1.5; }
.study-answer-feedback svg { flex-shrink: 0; margin-top: 2px; color: var(--t-accent); }
.study-answer-explain { margin: 10px 0 0; color: var(--study-muted); font-size: 12px; line-height: 1.55; white-space: pre-line; }
.study-answer-add { margin-top: 12px; }

@container (max-width: 400px) {
  .study-report-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .study-report-stats { justify-content: center; }
}
@container (min-width: 640px) {
  .study-report-notes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .study-report-btn.is-primary { flex: 1.4 1 0; }
  .study-report-hero { padding: 24px 26px; gap: 26px; }
  .study-report-ring { width: 128px; height: 128px; }
  .study-report-copy h2 { font-size: 18px; }
}

/* Full screen: the same test with more room. */
.study-session:has(> .study-session-frame.is-test) { animation: study-test-open 240ms var(--ease-out); }
@keyframes study-test-open { from { opacity: 0; transform: scale(.99); } }
.study-session-frame.is-test { background: radial-gradient(1100px 460px at 50% -8%, color-mix(in srgb, var(--study-purple) 9%, transparent), transparent 70%), var(--study-board); }
.study-test.is-full { --t-gutter: max(20px, calc((100% - 760px) / 2)); }
.study-test.is-full .study-test-top { gap: 10px; padding: max(14px, env(safe-area-inset-top)) var(--t-gutter) 14px; }
.study-test.is-full .study-test-title h2 { font-size: 17px; }
.study-test.is-full .study-test-scroll.dojo-view-body { padding-top: 22px; padding-bottom: 32px; }
.study-test.is-full .study-test-foot { padding-top: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.study-test.is-full .study-test-nav { padding: 14px 16px 12px; }
.study-test.is-full .study-test-dot { flex-basis: 36px; height: 36px; }
.study-test.is-full .study-test-card { margin-top: 16px; padding: 24px 26px 26px; border-radius: 20px; }
.study-test.is-full .study-test-q { font-size: 19px; line-height: 1.5; margin-bottom: 20px; }
.study-test.is-full .study-test-choice { padding: 13px 16px; font-size: 14.5px; gap: 12px; }
.study-test.is-full .study-test-written textarea { min-height: 200px; font-size: 14.5px; }
.study-test.is-full .study-answer h3 { font-size: 15px; }
.study-test.is-full .study-report-note li, .study-test.is-full .study-answer-choices p, .study-test.is-full .study-answer-block p { font-size: 13.5px; }

@media (hover: hover) and (pointer: fine) {
  .study-test-dot:hover { border-color: color-mix(in srgb, var(--t-accent) 55%, var(--study-stroke)); color: var(--study-ink); }
  .study-test-choice:not(.is-picked):hover { border-color: color-mix(in srgb, var(--t-accent) 40%, var(--study-stroke)); background: var(--dojo-soft); }
  .study-test-choice:not(.is-picked):hover .study-test-letter { color: var(--study-ink); }
  .study-test-step:not(:disabled):hover { background: var(--dojo-soft); }
  .study-test-step.is-next:hover { background: color-mix(in srgb, var(--study-ink) 9%, transparent); }
  .study-test-submit:hover, .study-report-btn.is-primary:hover { filter: brightness(1.08); }
  .study-report-btn:not(.is-primary):hover { border-color: var(--study-muted); background: var(--dojo-soft); }
  .study-report-q:hover { background: var(--dojo-soft); }
  .study-answers-filter button:hover { color: var(--study-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .study-test.is-entering *, .study-session:has(> .study-session-frame.is-test) { animation: none; }
  .study-test-marking-orb { animation-duration: 4s; }
  .study-test-dot, .study-test-choice, .study-test-tick, .study-test-step, .study-test-submit, .study-report-btn { transition: none; }
}

/* ---------- AI podcast ---------- */
/* Create dialog */
.is-podcast-style .dojo-option-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-podcast-style .dojo-option:nth-child(1) { --create-accent: #d9784f; }
.is-podcast-style .dojo-option:nth-child(2) { --create-accent: var(--study-blue); }
.is-podcast-style .dojo-option:nth-child(3) { --create-accent: var(--study-purple); }
.is-podcast-style .dojo-option:nth-child(4) { --create-accent: var(--study-green); }
.dojo-option-preview.is-podcast { justify-content: center; height: 92px; padding: 12px; }
.dojo-pod-art { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 100%; transition: transform 180ms cubic-bezier(.23, 1, .32, 1); }
.dojo-pod-art b, .dojo-pod-art i, .dojo-pod-art em { display: block; font-style: normal; }
.dojo-pod-face { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px #0000001a; }
.dojo-pod-face.is-b { margin-left: -14px; }
.dojo-pod-art.is-casual { color: var(--create-accent); }
.dojo-pod-art.is-casual .dojo-pod-face { color: var(--bg); background: var(--create-accent); }
.dojo-pod-art.is-casual .dojo-pod-face.is-b { background: color-mix(in srgb, var(--create-accent) 55%, var(--bg)); }
.dojo-pod-bubbles { display: grid; gap: 5px; }
.dojo-pod-bubbles b { width: 42px; height: 5px; border-radius: 4px; background: currentColor; opacity: .55; }
.dojo-pod-bubbles b + b { width: 28px; opacity: .3; }
.dojo-pod-bubbles em { position: absolute; top: 8px; right: 10px; padding: 1px 5px; border-radius: 6px 6px 6px 1px; background: var(--bg); color: var(--create-accent); font-size: 8px; font-weight: 700; transform: rotate(8deg); box-shadow: 0 1px 4px #00000012; }
.dojo-pod-mic { position: relative; width: 16px; height: 26px; border: 2px solid currentColor; border-radius: 9px; opacity: .8; }
.dojo-pod-mic::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 2px; height: 7px; background: currentColor; transform: translateX(-50%); }
.dojo-pod-lines { display: grid; gap: 5px; margin-left: 6px; }
.dojo-pod-lines b { width: 48px; height: 4px; border-radius: 3px; background: currentColor; opacity: .35; }
.dojo-pod-lines b:nth-child(2) { width: 36px; opacity: .25; }
.dojo-pod-lines b:nth-child(3) { width: 42px; opacity: .18; }
.dojo-pod-art.is-tutor { flex-direction: column; align-items: stretch; gap: 6px; padding: 0 8px; }
.dojo-pod-q { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, currentColor 22%, var(--bg)); font-size: 11px; font-weight: 700; }
.dojo-pod-q.is-a { align-self: flex-end; background: currentColor; color: var(--bg); }
.dojo-pod-bar { width: 70%; height: 4px; border-radius: 3px; background: currentColor; opacity: .3; }
.dojo-pod-bar.is-short { align-self: flex-end; width: 50%; }
.dojo-pod-card { display: grid; place-items: center; width: 26px; height: 32px; border: 1.5px solid currentColor; border-radius: 6px; background: var(--bg); font-size: 11px; font-weight: 700; }
.dojo-pod-card.is-a { background: currentColor; color: var(--bg); }
.dojo-pod-dots { display: flex; gap: 3px; }
.dojo-pod-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .35; }
.is-podcast-length .dojo-option-copy { padding: 12px 13px; }
.dojo-length-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.dojo-length-top strong { font-size: 13px !important; }
.dojo-length-time { color: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dojo-option input:checked + .dojo-option-face .dojo-length-time { color: var(--create-accent); font-weight: 600; }
.dojo-voices legend { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.dojo-voice-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 6px 0; }
.dojo-voice-role { display: grid; gap: 2px; min-width: 0; }
.dojo-voice-role strong { font-size: 12px; font-weight: 600; }
.dojo-voice-role small { color: var(--create-muted); font-size: 10.5px; font-weight: 400; line-height: 1.4; }
.dojo-voice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dojo-voice { justify-content: space-between; }
.dojo-voice { position: relative; display: flex; align-items: center; min-width: 0; border: 1px solid transparent; border-radius: 999px; background: var(--create-soft); transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease; }
.dojo-voice label { display: flex; flex: 1; min-width: 0; margin: 0; cursor: pointer; }
.dojo-voice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dojo-voice-face { display: inline-flex; align-items: center; gap: 9px; min-width: 0; padding: 4px 2px 4px 4px; font-size: 12.5px; font-weight: 500; }
.dojo-voice-name { overflow: hidden; padding-right: 2px; text-overflow: ellipsis; white-space: nowrap; }
.dojo-voice.is-picked { border-color: color-mix(in srgb, var(--create-accent) 70%, transparent); background: color-mix(in srgb, var(--create-accent) 10%, var(--bg)); }
.dojo-voice:has(input:disabled) { opacity: .42; }
.dojo-voice:has(input:disabled) label { cursor: not-allowed; }
.dojo-voice:has(input:focus-visible) { outline: 2px solid var(--create-accent); outline-offset: 2px; }
.dojo-voice-play { position: relative; display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; }
.dojo-voice-play svg { width: 11px; height: 11px; }
.dojo-voice-play:hover, .dojo-voice-play:focus-visible { background: color-mix(in srgb, var(--create-accent) 14%, transparent); color: var(--create-accent); }
.dojo-voice-eq { display: none; align-items: flex-end; gap: 1.5px; height: 10px; }
.dojo-voice-eq i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; animation: dojo-voice-eq 700ms ease-in-out infinite; }
.dojo-voice-eq i:nth-child(2) { animation-delay: -250ms; }
.dojo-voice-eq i:nth-child(3) { animation-delay: -480ms; }
@keyframes dojo-voice-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.dojo-voice-eq i { transform-origin: bottom; }
.dojo-voice-play.is-playing { color: var(--create-accent); background: color-mix(in srgb, var(--create-accent) 14%, transparent); }
.dojo-voice-play.is-playing .dojo-voice-play-icon { display: none; }
.dojo-voice-play.is-playing .dojo-voice-eq { display: flex; }
/* One colour per voice, reused by the transcript avatars. */
.dojo-voice-avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--voice, var(--dojo-podcast)); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.dojo-voice-avatar.is-af_heart { --voice: #d9607f; }
.dojo-voice-avatar.is-af_bella { --voice: #e38a3f; }
.dojo-voice-avatar.is-bf_emma { --voice: #9a6fd0; }
.dojo-voice-avatar.is-am_michael { --voice: #3f7fd6; }
.dojo-voice-avatar.is-am_fenrir { --voice: #3b8f7a; }
.dojo-voice-avatar.is-am_puck { --voice: #c3902a; }
#studyCreateDialog .dojo-focus-field.is-podcast { align-items: baseline; }
.dojo-focus-tag { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--create-accent) 10%, transparent); color: var(--create-accent) !important; font-weight: 500 !important; }
@media (hover: hover) and (pointer: fine) {
  .dojo-option:hover .dojo-pod-art { transform: translateY(-2px); }
  .dojo-voice:not(:has(input:disabled)):hover { border-color: color-mix(in srgb, var(--create-accent) 45%, transparent); }
}
@media (max-width: 680px) {
  .is-podcast-style .dojo-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-podcast-length .dojo-option-copy { padding: 10px; }
  .dojo-length-top { flex-direction: column; gap: 1px; }
  .dojo-voice-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .dojo-voice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Player (inside the Create panel) */
.dojo-studio-view.is-podcast { --pod: var(--dojo-podcast); container-type: inline-size; }
.dojo-pod-head { align-items: center; }
.dojo-pod-title { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dojo-pod-title h3 { flex: none; }
.dojo-pod-title small { overflow: hidden; color: var(--study-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dojo-pod-download { flex: none; text-decoration: none; }
.dojo-pod-download:hover { color: var(--pod); }
.dojo-pod-player { position: relative; display: grid; gap: 4px; margin: 12px 12px 4px; padding: 16px 16px 12px; border: 1px solid color-mix(in srgb, var(--pod) 22%, var(--study-stroke)); border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pod) 13%, transparent), transparent 70%), color-mix(in srgb, var(--pod) 4%, var(--dojo-surface)); flex-shrink: 0; }
.dojo-pod-scrub { --p: 0%; position: relative; height: 18px; }
.dojo-pod-scrub input, .dojo-pod-volume input { -webkit-appearance: none; appearance: none; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; }
.dojo-pod-scrub input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--pod) var(--p), color-mix(in srgb, var(--study-ink) 10%, transparent) var(--p)); }
.dojo-pod-scrub input::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--pod) var(--p), color-mix(in srgb, var(--study-ink) 10%, transparent) var(--p)); }
.dojo-pod-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 3px solid var(--pod); border-radius: 50%; background: var(--dojo-surface); box-shadow: 0 1px 5px #00000026; transition: transform 140ms ease; }
.dojo-pod-scrub input::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--pod); border-radius: 50%; background: var(--dojo-surface); box-shadow: 0 1px 5px #00000026; }
.dojo-pod-scrub input:active::-webkit-slider-thumb { transform: scale(1.15); }
.dojo-pod-scrub input:focus-visible, .dojo-pod-volume input:focus-visible { outline: 2px solid var(--pod); outline-offset: 3px; border-radius: 6px; }
.dojo-pod-times { display: flex; justify-content: space-between; color: var(--study-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.dojo-pod-transport { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 8px; }
.dojo-pod-skip { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--study-ink); cursor: pointer; }
.dojo-pod-skip:hover { background: color-mix(in srgb, var(--pod) 12%, transparent); }
.dojo-pod-play { position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--pod); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--pod) 38%, transparent), inset 0 1px 0 #ffffff40; cursor: pointer; }
body[data-mode="dark"] .dojo-pod-play { color: #1d1418; }
.dojo-pod-play svg { width: 22px; height: 22px; }
.dojo-pod-player:not(.is-playing) .dojo-pod-play svg { margin-left: 2px; }
.dojo-pod-play::after { content: ""; position: absolute; inset: -5px; border: 2px solid color-mix(in srgb, var(--pod) 35%, transparent); border-top-color: var(--pod); border-radius: 50%; opacity: 0; }
.dojo-pod-player.is-waiting .dojo-pod-play::after { opacity: 1; animation: study-spin .8s linear infinite; }
.dojo-pod-skip:focus-visible, .dojo-pod-play:focus-visible, .dojo-pod-speed-btn:focus-visible, .dojo-pod-speed-menu button:focus-visible { outline: 2px solid var(--pod); outline-offset: 3px; }
.dojo-pod-extras { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--pod) 14%, var(--study-stroke)); }
.dojo-pod-volume { --v: 100%; display: flex; align-items: center; gap: 4px; min-width: 0; }
.dojo-pod-volume input { width: clamp(64px, 26cqi, 120px); height: 18px; }
.dojo-pod-volume input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--study-ink) var(--v), color-mix(in srgb, var(--study-ink) 12%, transparent) var(--v)); }
.dojo-pod-volume input::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--study-ink) var(--v), color-mix(in srgb, var(--study-ink) 12%, transparent) var(--v)); }
.dojo-pod-volume input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--study-ink); }
.dojo-pod-volume input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--study-ink); }
.dojo-pod-speed { position: relative; }
.dojo-pod-speed-btn { display: inline-flex; align-items: center; gap: 5px; min-width: 64px; justify-content: center; padding: 6px 10px; border: 1px solid var(--study-stroke); border-radius: 999px; background: var(--dojo-surface); color: var(--study-ink); font: 600 12px var(--study-font); font-variant-numeric: tabular-nums; cursor: pointer; }
.dojo-pod-speed-btn svg { width: 14px; height: 14px; color: var(--study-muted); }
.dojo-pod-speed-btn.is-on { border-color: color-mix(in srgb, var(--pod) 55%, transparent); background: color-mix(in srgb, var(--pod) 11%, var(--dojo-surface)); color: var(--pod); }
.dojo-pod-speed-btn.is-on svg { color: currentColor; }
.dojo-pod-speed-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; display: grid; grid-template-columns: repeat(4, 46px); gap: 4px; padding: 6px; border: 1px solid var(--study-stroke); border-radius: 14px; background: var(--study-paper); box-shadow: 0 10px 30px #0000001f; animation: dojo-pod-pop 160ms var(--ease-out); }
.dojo-pod-speed-menu button { padding: 7px 0; border: 0; border-radius: 9px; background: transparent; color: var(--study-ink); font: 550 12px var(--study-font); font-variant-numeric: tabular-nums; cursor: pointer; }
.dojo-pod-speed-menu button:hover { background: var(--dojo-soft); }
.dojo-pod-speed-menu button[aria-pressed="true"] { background: var(--pod); color: #fff; }
body[data-mode="dark"] .dojo-pod-speed-menu button[aria-pressed="true"] { color: #1d1418; }
@keyframes dojo-pod-pop { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.dojo-pod-transcript-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 16px 6px; flex-shrink: 0; }
.dojo-pod-transcript-head span { font-size: 12px; font-weight: 650; letter-spacing: .01em; }
.dojo-pod-transcript-head small { color: var(--study-muted); font-size: 10.5px; }
.dojo-pod-transcript { display: grid; align-content: start; gap: 2px; padding: 0 8px 20px; }
.dojo-pod-line { display: flex; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--study-muted); text-align: left; font: inherit; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.dojo-pod-line .dojo-voice-avatar { width: 26px; height: 26px; margin-top: 1px; font-size: 11px; opacity: .8; }
.dojo-pod-line-body { display: grid; gap: 3px; min-width: 0; }
.dojo-pod-line-head { display: flex; align-items: baseline; gap: 7px; }
.dojo-pod-line-head strong { color: var(--study-ink); font-size: 12px; font-weight: 650; }
.dojo-pod-line-head time { color: var(--study-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.dojo-pod-line-text { font-size: 13px; line-height: 1.6; }
.dojo-pod-line.is-past { color: color-mix(in srgb, var(--study-ink) 72%, transparent); }
.dojo-pod-line.is-active { background: color-mix(in srgb, var(--pod) 11%, transparent); color: var(--study-ink); box-shadow: inset 3px 0 0 var(--pod); }
.dojo-pod-line.is-active .dojo-voice-avatar { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--voice) 25%, transparent); }
.dojo-pod-line:hover:not(.is-active) { background: var(--dojo-soft); }
.dojo-pod-line:focus-visible { outline: 2px solid var(--pod); outline-offset: -2px; }
.dojo-pod-line.is-pause { justify-content: center; padding: 6px 10px; }
.dojo-pod-think { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed color-mix(in srgb, var(--study-green) 45%, transparent); border-radius: 999px; color: var(--study-green); font-size: 11px; font-weight: 600; }
.dojo-pod-think svg { width: 13px; height: 13px; }
.dojo-pod-line.is-pause.is-active { box-shadow: none; background: transparent; }
.dojo-pod-line.is-pause.is-active .dojo-pod-think { border-style: solid; background: color-mix(in srgb, var(--study-green) 12%, transparent); }
@container (max-width: 360px) {
  .dojo-pod-player { margin: 10px 8px 4px; padding: 14px 12px 10px; }
  .dojo-pod-transport { gap: 10px; }
  .dojo-pod-volume input { width: 64px; }
  .dojo-pod-transcript-head small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dojo-voice-eq i, .dojo-pod-speed-menu, .dojo-pod-player.is-waiting .dojo-pod-play::after { animation: none; }
  .dojo-pod-line, .dojo-pod-art { transition: none; }
}

/* ---------- AI tutor ---------- */
/* Create dialog */
.dojo-tutor-style, .dojo-tutor-formats { --ink: var(--dojo-tutor); }
.dojo-tutor-style.is-teacher, .dojo-tutor-formats.is-teacher { --ink: #d9843d; }
.dojo-tutor-style.is-buddy, .dojo-tutor-formats.is-buddy { --ink: var(--study-green); }
.dojo-tutor-style.is-socratic, .dojo-tutor-formats.is-socratic { --ink: var(--study-blue); }
.dojo-tutor-style.is-professor, .dojo-tutor-formats.is-professor { --ink: var(--study-purple); }
.dojo-tutor-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#studyCreateDialog .dojo-tutor-style { position: relative; display: flex; min-width: 0; margin: 0; cursor: pointer; }
#studyCreateDialog .dojo-tutor-style input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; }
.dojo-tutor-style-face { display: grid; flex: 1; align-content: start; gap: 10px; min-width: 0; padding: 14px 16px 15px; border: 1px solid transparent; border-radius: 14px; background: var(--create-soft); transition: border-color 140ms ease, background 140ms ease, box-shadow 180ms ease; }
.dojo-tutor-style-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dojo-tutor-style-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.dojo-tutor-style-icon svg { width: 21px; height: 21px; }
.dojo-tutor-style strong { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.dojo-tutor-style small { color: var(--create-muted); font-size: 11.5px; font-weight: 400; line-height: 1.55; }
.dojo-tutor-style:hover .dojo-tutor-style-face { background: var(--create-soft-strong); }
.dojo-tutor-style input:checked + .dojo-tutor-style-face { border-color: color-mix(in srgb, var(--ink) 60%, transparent); background: color-mix(in srgb, var(--ink) 8%, var(--bg)); box-shadow: 0 8px 20px -16px var(--ink); }
.dojo-tutor-style input:checked + .dojo-tutor-style-face .dojo-tutor-style-icon { transform: scale(1.06); }
.dojo-tutor-style input:focus-visible + .dojo-tutor-style-face { outline: 2px solid var(--ink); outline-offset: 3px; }
.dojo-tutor-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#studyCreateDialog .dojo-tutor-format { position: relative; display: flex; min-width: 0; margin: 0; cursor: pointer; }
#studyCreateDialog .dojo-tutor-format input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; }
.dojo-tutor-format-face { display: flex; flex: 1; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 14px 13px; border: 1px solid transparent; border-radius: 14px; background: var(--create-soft); transition: border-color 140ms ease, background 140ms ease, box-shadow 180ms ease; }
.dojo-tutor-format-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--create-soft-strong); color: var(--create-muted); transition: background 160ms ease, color 160ms ease; }
.dojo-tutor-format-copy { display: grid; gap: 3px; min-width: 0; }
.dojo-tutor-format strong { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.dojo-tutor-format small { color: var(--create-muted); font-size: 11.5px; font-weight: 400; line-height: 1.5; }
.dojo-tutor-format:hover .dojo-tutor-format-face { background: var(--create-soft-strong); }
.dojo-tutor-format input:checked + .dojo-tutor-format-face { border-color: color-mix(in srgb, var(--ink) 60%, transparent); background: color-mix(in srgb, var(--ink) 8%, var(--bg)); box-shadow: 0 8px 20px -16px var(--ink); }
.dojo-tutor-format input:checked + .dojo-tutor-format-face .dojo-tutor-format-icon { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
.dojo-tutor-format input:focus-visible + .dojo-tutor-format-face { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 560px) { .dojo-tutor-format-grid { grid-template-columns: 1fr; } }
.dojo-voices.is-tutor legend small { color: var(--create-muted); font-size: 11px; font-weight: 400; }
#studyCreateDialog .dojo-focus-field.is-tutor { align-items: baseline; }
.dojo-focus-field > .dojo-focus-count { margin-left: 8px; font-variant-numeric: tabular-nums; }
.dojo-focus-field > .dojo-focus-count.is-full { color: var(--danger, #c2410c); font-weight: 600; }

/* Orb used on the prep and plan screens (the live call draws its own on a canvas). */
.dojo-tutor-orb { position: relative; display: block; flex: none; width: 104px; height: 104px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #cdf2bb 0, #a3e08c 36%, #86cbea 74%, #6db6ea 100%); box-shadow: 0 18px 44px -14px rgba(110, 190, 235, .7), inset 0 -10px 22px rgba(40, 110, 160, .14); animation: dojo-orb-breathe 3.4s ease-in-out infinite; }
.dojo-tutor-orb i { position: absolute; inset: -25%; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle at 32% 30%, rgba(186, 244, 160, .75), transparent 52%); animation: dojo-orb-swirl 7s linear infinite; }
.dojo-tutor-orb i:nth-child(2) { background: radial-gradient(circle at 70% 62%, rgba(140, 208, 255, .65), transparent 48%); animation-duration: 9.5s; animation-direction: reverse; }
.dojo-tutor-orb i:nth-child(3) { background: radial-gradient(circle at 42% 78%, rgba(255, 226, 190, .3), transparent 42%); animation-duration: 12s; }
.dojo-tutor-orb::after { content: ""; position: absolute; left: 17%; top: 11%; width: 40%; height: 30%; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, .8), transparent 70%); filter: blur(2px); }
.dojo-tutor-orb.is-thinking { animation-duration: 1.8s; }
.dojo-tutor-orb.is-thinking i { animation-duration: 2.6s; }
.dojo-tutor-orb.is-thinking i:nth-child(2) { animation-duration: 3.4s; }
@keyframes dojo-orb-swirl { to { transform: rotate(360deg); } }
@keyframes dojo-orb-breathe { 50% { transform: scale(1.045); } }

/* Studio views */
.dojo-studio-view.is-tutor { --tc: var(--dojo-tutor); container-type: inline-size; }
.dojo-tutor-prep { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 22px; text-align: center; }
.dojo-tutor-prep h4 { margin: 18px 0 0; color: var(--study-ink); font: 600 17px var(--study-font); letter-spacing: -.01em; }
.dojo-tutor-prep p { max-width: 290px; margin: 0; color: var(--study-muted); font-size: 12.5px; line-height: 1.55; }
.dojo-tutor-stages { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; text-align: left; }
.dojo-tutor-stages li { display: flex; align-items: center; gap: 10px; color: var(--study-muted); font-size: 12.5px; transition: color 200ms ease; }
.dojo-tutor-stages li > span { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--study-stroke); border-radius: 50%; color: var(--bg); }
.dojo-tutor-stages li > span svg { width: 11px; height: 11px; }
.dojo-tutor-stages li.is-now { color: var(--study-ink); font-weight: 550; }
.dojo-tutor-stages li.is-now > span { border-color: var(--tc); border-top-color: transparent; animation: study-spin 800ms linear infinite; }
.dojo-tutor-stages li.is-done > span { border-color: transparent; background: var(--dojo-tutor-hue); }
.dojo-tutor-ready { display: flex; flex-direction: column; gap: 18px; padding: 22px 16px 20px; }
.dojo-tutor-hero { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.dojo-tutor-hero .dojo-tutor-orb { width: 84px; height: 84px; margin-bottom: 8px; }
.dojo-tutor-kicker { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); font-size: 11px; font-weight: 650; }
.dojo-tutor-hero h4 { margin: 2px 0 0; color: var(--study-ink); font: 600 18px/1.3 var(--study-font); letter-spacing: -.015em; }
.dojo-tutor-hero p { max-width: 340px; margin: 4px 0 0; color: var(--study-ink); font-size: 13.5px; line-height: 1.55; text-wrap: balance; }
.dojo-tutor-plan { display: grid; gap: 2px; margin: 0; padding: 4px; border: 1px solid var(--study-stroke); border-radius: 14px; background: var(--dojo-surface); list-style: none; }
.dojo-tutor-plan li { display: flex; align-items: center; gap: 11px; padding: 9px 10px; color: var(--study-ink); font-size: 13px; line-height: 1.35; animation: dojo-plan-in 380ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
.dojo-tutor-plan li + li { border-top: 1px solid color-mix(in srgb, var(--study-stroke) 60%, transparent); }
.dojo-tutor-plan-num { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--tc) 13%, transparent); color: var(--tc); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes dojo-plan-in { from { opacity: 0; transform: translateY(6px); } }
.dojo-tutor-launch { display: grid; gap: 11px; margin-top: auto; }
.dojo-tutor-who { display: flex; align-items: center; gap: 10px; }
.dojo-tutor-who .dojo-voice-avatar { width: 32px; height: 32px; font-size: 13px; }
.dojo-tutor-who > span:last-child { display: grid; gap: 1px; }
.dojo-tutor-who strong { color: var(--study-ink); font-size: 13px; font-weight: 600; }
.dojo-tutor-who small { color: var(--study-muted); font-size: 11px; }
.dojo-tutor-start { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 999px; background: var(--dojo-tutor-hue); color: #173a4a; font: 600 14px var(--study-font); cursor: pointer; box-shadow: 0 12px 26px -14px var(--tc); transition: transform 150ms var(--ease-out), filter 150ms ease; }
.dojo-tutor-start:hover { filter: brightness(1.06); }
.dojo-tutor-start:active { transform: scale(.98); }
.dojo-tutor-start:focus-visible { outline: 2px solid var(--tc); outline-offset: 3px; }
.dojo-tutor-mic-note { color: var(--study-muted); font-size: 11px; text-align: center; }
.dojo-tutor-review { display: grid; align-content: start; gap: 14px; padding: 14px 14px 24px; }
.dojo-tutor-recap { display: grid; gap: 10px; padding: 16px; border: 1px solid color-mix(in srgb, var(--tc) 24%, var(--study-stroke)); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 10%, var(--dojo-surface)), var(--dojo-surface) 70%); animation: dojo-plan-in 360ms var(--ease-out) both; }
.dojo-tutor-recap h4 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tc); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dojo-tutor-overview { margin: 0; color: var(--study-ink); font-size: 13.5px; line-height: 1.6; }
.dojo-tutor-recap h5 { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--study-ink); font-size: 12px; font-weight: 650; }
.dojo-tutor-concepts { display: grid; gap: 7px; margin: 0; }
.dojo-tutor-concepts div { padding: 9px 11px; border: 1px solid var(--study-stroke); border-radius: 10px; background: var(--dojo-surface); }
.dojo-tutor-concepts dt { color: var(--study-ink); font-size: 12.5px; font-weight: 650; }
.dojo-tutor-concepts dd { margin: 2px 0 0; color: var(--study-muted); font-size: 12px; line-height: 1.55; }
.dojo-tutor-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.dojo-tutor-split > div { padding: 10px 12px; border-radius: 11px; }
.dojo-tutor-split .is-good { background: color-mix(in srgb, var(--study-green) 11%, transparent); }
.dojo-tutor-split .is-good h5 svg { color: var(--study-green); }
.dojo-tutor-split .is-review { background: color-mix(in srgb, var(--study-orange) 12%, transparent); }
.dojo-tutor-split .is-review h5 svg { color: var(--study-orange); }
.dojo-tutor-split h5 { margin: 0; }
.dojo-tutor-split ul { margin: 6px 0 0; padding-left: 16px; color: var(--study-ink); font-size: 12px; line-height: 1.55; }
.dojo-tutor-split li + li { margin-top: 4px; }
.dojo-tutor-next { margin: 0; color: var(--study-ink); font-size: 12.5px; line-height: 1.55; }
.dojo-tutor-recap.is-empty p { margin: 0; color: var(--study-muted); font-size: 12.5px; line-height: 1.55; }
.dojo-tutor-log-head { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 2px 0; }
.dojo-tutor-log-head span { font-size: 12px; font-weight: 650; }
.dojo-tutor-log-head small { color: var(--study-muted); font-size: 10.5px; }
.dojo-tutor-log { display: grid; gap: 12px; }
.dojo-tutor-line { display: flex; gap: 9px; }
.dojo-tutor-line .dojo-voice-avatar { width: 24px; height: 24px; margin-top: 1px; font-size: 10.5px; }
.dojo-tutor-line.is-tutor > div { flex: 1; min-width: 0; }
.dojo-tutor-line.is-student { justify-content: flex-end; }
.dojo-tutor-line.is-student > div { max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--tc) 12%, var(--dojo-soft)); }
.dojo-tutor-line-head { display: flex; align-items: baseline; gap: 7px; }
.dojo-tutor-line-head strong { color: var(--study-ink); font-size: 11.5px; font-weight: 650; }
.dojo-tutor-line-head time { color: var(--study-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.dojo-tutor-line p { margin: 3px 0 0; color: var(--study-ink); font-size: 13px; line-height: 1.6; }
.dojo-tutor-cut { margin-left: 3px; color: var(--study-muted); }

/* Live call */
/* The slot is a size container so the orb can shrink on short screens (phones with browser
   bars) and the call controls always stay on screen. */
.dojo-tutor-slot { display: flex; flex: 1; min-height: 0; container-type: size; }
.tutor-call { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 12px 14px 16px; overflow-y: auto; }
.tutor-call-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tutor-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 10px 5px 8px; border-radius: 999px; background: linear-gradient(120deg, color-mix(in srgb, var(--dojo-tutor-grass) 24%, transparent), color-mix(in srgb, var(--dojo-tutor-sky) 26%, transparent)); color: var(--tc); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.tutor-timer { display: flex; align-items: center; gap: 8px; }
.tutor-timer-bar { width: 60px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--dojo-soft); }
.tutor-timer-bar i { display: block; height: 100%; border-radius: inherit; background: var(--dojo-tutor-hue); transform: scaleX(0); transform-origin: left; transition: transform 400ms linear, background 300ms ease; }
.tutor-timer b { color: var(--study-ink); font: 600 12.5px var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.tutor-call.is-last-minutes .tutor-timer b { color: #d9735b; }
.tutor-call.is-last-minutes .tutor-timer-bar i { background: #d9735b; }
.tutor-step { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--study-muted); font-size: 11.5px; }
.tutor-step[hidden] { display: none; }
.tutor-step-dots { display: flex; flex: none; gap: 3px; }
.tutor-step-dots i { width: 12px; height: 3px; border-radius: 3px; background: var(--study-stroke); transition: width 300ms var(--ease-out), background 300ms ease; }
.tutor-step-dots i.is-done { background: color-mix(in srgb, var(--tc) 50%, transparent); }
.tutor-step-dots i.is-now { width: 22px; background: var(--dojo-tutor-hue); }
.tutor-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tutor-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; }
.tutor-orb { position: relative; display: block; width: clamp(88px, min(250px, 66cqw, 100cqh - 300px), 250px); aspect-ratio: 1; margin: -6px 0 -10px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 200ms var(--ease-out); }
.tutor-orb:active { transform: scale(.98); }
.tutor-orb canvas { display: block; width: 100%; height: 100%; }
.tutor-orb:focus-visible { outline: 2px solid var(--tc); outline-offset: -22%; }
.tutor-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--dojo-soft); color: var(--study-ink); font-size: 12px; font-weight: 550; }
.tutor-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); transition: background 200ms ease; }
.tutor-call[data-phase="listening"] .tutor-status i { animation: tutor-pulse 1.3s ease-in-out infinite; }
.tutor-call[data-phase="speaking"] .tutor-status i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 25%, transparent); }
.tutor-call:is([data-phase="thinking"], [data-phase="connecting"], [data-phase="finishing"]) .tutor-status i { background: #9cc8ff; animation: tutor-blink 900ms ease-in-out infinite; }
.tutor-call[data-phase="paused"] .tutor-status i { background: var(--study-muted); }
.tutor-hint { min-height: 15px; color: var(--study-muted); font-size: 11px; transition: opacity 200ms ease; }
.tutor-hint:empty { opacity: 0; }
.tutor-captions { display: flex; flex: 1; flex-direction: column; gap: 14px; min-height: 64px; padding: 10px 2px 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px); mask-image: linear-gradient(to bottom, transparent 0, #000 12px); }
.tutor-line { display: grid; gap: 2px; animation: tutor-line-in 260ms var(--ease-out) both; }
.tutor-line-who { color: var(--study-muted); font-size: 10.5px; font-weight: 650; letter-spacing: .02em; }
.tutor-line p { margin: 0; color: var(--study-ink); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.tutor-line.is-tutor p { font-weight: 450; }
.tutor-line.is-student { justify-items: end; }
.tutor-line.is-student p { max-width: 88%; padding: 7px 11px; border-radius: 14px 14px 4px 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--dojo-tutor-grass) 18%, var(--dojo-soft)), color-mix(in srgb, var(--dojo-tutor-sky) 20%, var(--dojo-soft))); }
/* Words still to be spoken stay legible, just quieter than what has been said. */
.tutor-pending { color: color-mix(in srgb, var(--study-ink) 58%, transparent); }
.tutor-cut { margin-left: 3px; color: var(--study-muted); }
.tutor-skipped { color: color-mix(in srgb, var(--study-ink) 42%, transparent); text-decoration: underline dotted color-mix(in srgb, var(--study-muted) 60%, transparent); text-underline-offset: 3px; }
.tutor-dots { display: inline-flex; gap: 3px; padding: 4px 0; color: var(--study-muted); }
.tutor-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: tutor-dot 1s ease-in-out infinite; }
.tutor-dots i:nth-child(2) { animation-delay: 150ms; }
.tutor-dots i:nth-child(3) { animation-delay: 300ms; }
.tutor-type { display: flex; gap: 6px; }
.tutor-type[hidden] { display: none; }
.tutor-type input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--study-stroke); border-radius: 999px; background: var(--dojo-soft); color: var(--study-ink); font: 13px var(--study-font); }
.tutor-type input:focus-visible { outline: 2px solid var(--tc); outline-offset: 1px; }
.tutor-type button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tc); color: var(--bg); cursor: pointer; }
.tutor-controls { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 16px; padding-top: 6px; }
.tutor-btn { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: transform 160ms var(--ease-out), filter 160ms ease, background 200ms ease, color 200ms ease; }
.tutor-btn[hidden] { display: none; }
.tutor-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.tutor-btn:active { transform: scale(.95); }
.tutor-btn:focus-visible { outline: 2px solid var(--tc); outline-offset: 3px; }
.tutor-btn.is-pause { background: #f4b733; color: #3a2a00; box-shadow: 0 12px 24px -14px #f4b733; }
.tutor-btn.is-end { background: #e5484d; color: #fff; box-shadow: 0 12px 24px -14px #e5484d; }
.tutor-btn.is-ghost { width: 42px; height: 42px; background: var(--dojo-soft); color: var(--study-muted); }
.tutor-btn.is-ghost[aria-pressed="true"] { background: color-mix(in srgb, var(--tc) 15%, transparent); color: var(--tc); }
.tutor-call.is-paused .tutor-captions { opacity: .7; }
.tutor-call.is-finishing .tutor-controls, .tutor-call.is-finishing .tutor-type { opacity: .4; pointer-events: none; }
/* After the opening, the orb tucks into the top corner and the conversation takes the room. */
.tutor-call.is-compact .tutor-stage { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding-top: 0; }
.tutor-call.is-compact .tutor-orb { width: 54px; margin: -2px 0; }
.tutor-call.is-compact .tutor-hint { flex: 1; min-width: 0; min-height: 0; text-align: right; }
.tutor-call.is-compact .tutor-captions { padding-top: 6px; }
/* Full screen: the call gets its own layer, sized for reading. */
.study-session.tutor-fullscreen { --tc: var(--dojo-tutor); --study-font: var(--dojo-display); container-type: size; background: var(--study-board); color: var(--study-ink); font-family: var(--study-font); animation: tutor-full-in 240ms var(--ease-out); }
.tutor-call.is-fullscreen { gap: 12px; padding: max(18px, env(safe-area-inset-top)) max(20px, calc((100% - 760px) / 2)) max(18px, env(safe-area-inset-bottom)); }
.tutor-call.is-fullscreen:not(.is-compact) .tutor-orb { width: clamp(96px, min(300px, 60cqw, 100cqh - 330px), 300px); }
.tutor-call.is-fullscreen.is-compact .tutor-orb { width: 64px; }
.tutor-call.is-fullscreen .tutor-line p { font-size: 17px; line-height: 1.65; }
.tutor-call.is-fullscreen .tutor-line-who { font-size: 11.5px; }
.tutor-call.is-fullscreen .tutor-captions { gap: 18px; }
@keyframes tutor-full-in { from { opacity: 0; transform: scale(.985); } }
@keyframes tutor-pulse { 50% { transform: scale(1.5); opacity: .55; } }
@keyframes tutor-blink { 50% { opacity: .3; } }
@keyframes tutor-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-2px); } }
@keyframes tutor-line-in { from { opacity: 0; transform: translateY(5px); } }
@media (max-height: 760px) {
  .tutor-call:not(.is-compact) .tutor-orb { width: clamp(88px, min(180px, 54cqw, 100cqh - 300px), 180px); }
}
@media (prefers-reduced-motion: reduce) {
  .dojo-tutor-orb, .dojo-tutor-orb i, .dojo-tutor-plan li, .dojo-tutor-recap, .tutor-line, .tutor-dots i, .tutor-status i, .dojo-tutor-preview q.is-new { animation: none !important; }
  .dojo-tutor-stages li.is-now > span { animation-duration: 2s; }
}

/* ---------- Audio sources: recorder, queue cards, lecture player ---------- */
body.study-open, .dojo-source-dialog, .dojo-rec-pill { --dojo-audio: #de5f4c; --dojo-audio-soft: color-mix(in srgb, var(--dojo-audio) 10%, var(--bg)); }
body[data-mode="dark"].study-open, body[data-mode="dark"] .dojo-source-dialog, body[data-mode="dark"] .dojo-rec-pill { --dojo-audio: #f29682; }

/* Option card */
.dojo-source-options [data-source-kind="text"] > svg { color: var(--study-purple, #9572d0); }
.dojo-source-options .dojo-source-audio-option { grid-column: 1 / -1; min-height: 64px; }
.dojo-source-options button.dojo-source-audio-option > svg { color: var(--dojo-audio); }
.dojo-source-options .dojo-source-audio-option[aria-expanded="true"] { border-color: var(--dojo-audio); background: var(--dojo-audio-soft); }
.dojo-source-audio-option.has-recovery strong::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--dojo-audio); vertical-align: middle; }
.dojo-source-audio-live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 10px 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--dojo-audio) 13%, transparent); color: var(--dojo-audio); font-size: 12px !important; font-weight: 650; font-variant-numeric: tabular-nums; }
.dojo-source-audio-live[hidden] { display: none; }
.dojo-source-audio-live:not([hidden]) + span { margin-left: 10px; }
.dojo-rec-mini { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.dojo-rec-mini i, .dojo-rec-pill-bars i { width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.07); transform-origin: center; transition: transform 90ms linear; }

/* Panel: two choices */
.dojo-audio-panel { display: grid; gap: 12px; }
.dojo-audio-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dojo-audio-choice { display: grid; justify-items: center; gap: 6px; padding: 18px 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text); text-align: center; }
.dojo-audio-choice strong { font-size: 13px; font-weight: 600; }
.dojo-audio-choice small { color: var(--text-secondary); font-size: 10.5px; }
.dojo-audio-choice-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 50%; background: var(--bg-secondary); color: var(--study-green, #479a83); }
.dojo-audio-choice-icon svg { width: 20px; height: 20px; }
.dojo-audio-choice.is-record .dojo-audio-choice-icon { background: var(--dojo-audio); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--dojo-audio) 35%, transparent); }
body[data-mode="dark"] .dojo-audio-choice.is-record .dojo-audio-choice-icon { color: #2a1511; }
.dojo-audio-panel .dojo-source-hint { margin: 0; text-align: center; }
@media (hover: hover) {
  .dojo-audio-choice:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text) 22%, var(--border)); background: var(--bg-secondary); }
  .dojo-audio-choice.is-record:hover:not(:disabled) { border-color: var(--dojo-audio); background: var(--dojo-audio-soft); }
}

/* Recovery */
.dojo-rec-recover { display: grid; gap: 8px; }
.dojo-rec-recover-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 1px solid color-mix(in srgb, var(--dojo-audio) 35%, var(--border)); border-radius: 12px; background: var(--dojo-audio-soft); }
.dojo-rec-recover-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--bg); color: var(--dojo-audio); }
.dojo-rec-recover-icon svg { width: 17px; height: 17px; }
.dojo-rec-recover-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dojo-rec-recover-copy strong { font-size: 12px; font-weight: 600; }
.dojo-rec-recover-copy small { overflow: hidden; color: var(--text-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dojo-rec-ghost, .dojo-rec-soft { flex: none; padding: 7px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 12px !important; }
.dojo-rec-soft { border-color: transparent; background: var(--text); color: var(--bg); font-weight: 550 !important; }

/* Live recorder */
.dojo-rec-live { display: grid; justify-items: center; gap: 10px; padding: 8px 0 2px; }
.dojo-rec-head { display: inline-flex; align-items: center; gap: 8px; color: var(--dojo-audio); font-size: 12px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; }
.dojo-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dojo-audio); box-shadow: 0 0 0 0 color-mix(in srgb, var(--dojo-audio) 50%, transparent); animation: dojo-rec-pulse 1.6s ease-out infinite; }
@keyframes dojo-rec-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.dojo-rec-live.is-paused .dojo-rec-head, .dojo-rec-live.is-waiting .dojo-rec-head { color: var(--text-secondary); }
.dojo-rec-live.is-paused .dojo-rec-dot, .dojo-rec-live.is-waiting .dojo-rec-dot, .dojo-rec-pill.is-paused .dojo-rec-dot { background: var(--text-secondary); animation: none; }
.dojo-rec-time { font: 600 40px/1 var(--dojo-display, var(--font-sans)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.dojo-rec-live.is-paused .dojo-rec-time { color: var(--text-secondary); }
.dojo-rec-levels { display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; max-width: 360px; height: 56px; padding: 0 8px; color: var(--dojo-audio); }
.dojo-rec-levels i { flex: 1; max-width: 5px; height: 100%; border-radius: 3px; background: currentColor; opacity: .85; transform: scaleY(.07); transform-origin: center; transition: transform 90ms linear, opacity 200ms ease; }
.dojo-rec-levels:not(.is-hearing) i { opacity: .45; }
.dojo-rec-live.is-paused .dojo-rec-levels { color: var(--text-secondary); }
.dojo-rec-controls { display: flex; gap: 10px; margin-top: 4px; }
.dojo-rec-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-size: 13px !important; font-weight: 600 !important; }
.dojo-rec-btn svg { width: 16px; height: 16px; }
.dojo-rec-btn.is-stop { border-color: transparent; background: var(--dojo-audio); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--dojo-audio) 32%, transparent); }
body[data-mode="dark"] .dojo-rec-btn.is-stop { color: #2a1511; }
.dojo-rec-note { max-width: 340px; margin: 2px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; text-align: center; }
.dojo-rec-note.is-warning { color: var(--dojo-audio); font-weight: 550; }

/* Review */
.dojo-rec-review { display: grid; gap: 10px; }
.dojo-rec-review-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.dojo-rec-review-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--dojo-audio-soft); color: var(--dojo-audio); }
.dojo-rec-review-icon svg { width: 19px; height: 19px; }
.dojo-rec-review-head strong { display: block; font-size: 13px; font-weight: 600; }
.dojo-rec-review-head small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.dojo-rec-review label { margin: 0 !important; }
.dojo-rec-listen { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-secondary); }
.dojo-rec-listen-btn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); }
.dojo-rec-listen-btn svg { width: 14px; height: 14px; }
.dojo-rec-listen-track { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.dojo-rec-listen-track i { position: absolute; inset: 0; background: var(--dojo-audio); transform: scaleX(0); transform-origin: left; }
.dojo-rec-listen time { flex: none; color: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.dojo-rec-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.dojo-rec-actions .dojo-source-submit { margin-left: 0; }
.dojo-source-submit.is-audio { background: var(--dojo-audio); color: #fff; transition: background-color 160ms ease; }
.dojo-source-submit.is-audio:hover { background: color-mix(in srgb, var(--dojo-audio) 88%, #000); }
body[data-mode="dark"] .dojo-source-submit.is-audio { color: #2a130e; }
body[data-mode="dark"] .dojo-source-submit.is-audio:hover { background: color-mix(in srgb, var(--dojo-audio) 88%, #fff); }

/* Floating pill while the dialog is closed */
.dojo-rec-pill { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 6px; border: 1px solid color-mix(in srgb, var(--dojo-audio) 30%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 36px #0000002a; transform: translateX(-50%); animation: dojo-pill-in 260ms cubic-bezier(.23, 1, .32, 1); font-family: var(--font-sans); }
.dojo-rec-pill[hidden] { display: none; }
@keyframes dojo-pill-in { from { opacity: 0; transform: translate(-50%, -12px) scale(.96); } }
.dojo-rec-pill button { font: inherit; cursor: pointer; }
.dojo-rec-pill-open { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text); }
.dojo-rec-pill-copy { display: grid; gap: 1px; text-align: left; }
.dojo-rec-pill-copy strong { font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--dojo-audio); }
.dojo-rec-pill.is-paused .dojo-rec-pill-copy strong { color: var(--text-secondary); }
.dojo-rec-pill-copy time { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dojo-rec-pill-bars { display: inline-flex; align-items: center; gap: 2px; height: 20px; color: var(--dojo-audio); }
.dojo-rec-pill-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--text); }
.dojo-rec-pill-btn svg { width: 15px; height: 15px; }
.dojo-rec-pill-btn.is-stop { border-color: transparent; background: var(--dojo-audio); color: #fff; }
body[data-mode="dark"] .dojo-rec-pill-btn.is-stop { color: #2a1511; }
.dojo-rec-pill button:focus-visible { outline: 2px solid var(--dojo-audio); outline-offset: 2px; }

/* Queue cards in Sources */
.dojo-audio-cards { display: grid; gap: 8px; margin-bottom: 8px; }
.dojo-audio-card .study-gen-body { gap: 3px; }
.dojo-audio-detail { overflow: hidden; color: var(--study-muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dojo-audio-detail:empty { display: none; }
.dojo-audio-card .study-status { font-weight: 550; }
.dojo-audio-card.is-waiting .study-gen-icon { color: var(--dojo-audio); background: var(--dojo-audio-soft); }
.dojo-audio-card.is-waiting .study-gen-icon svg { width: 16px; height: 16px; animation: dojo-audio-breathe 2.4s ease-in-out infinite; }
@keyframes dojo-audio-breathe { 50% { opacity: .45; } }
.dojo-audio-bar { position: relative; display: block; height: 3px; margin-top: 4px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--study-ink) 8%, transparent); }
.dojo-audio-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--study-green), #7aa7e8); transform-origin: left; transition: transform 600ms cubic-bezier(.23, 1, .32, 1); }
.dojo-audio-actions { display: flex; gap: 6px; }
.dojo-file-icon.is-audio { color: var(--dojo-audio); background: color-mix(in srgb, var(--dojo-audio) 9%, transparent); }
.dojo-source-badge.is-audio { --tag: var(--dojo-audio); }

/* Lecture player in the source preview */
.dojo-lecture-root { display: flex; flex: 1; min-width: 0; min-height: 0; background: var(--dojo-surface); }
.dojo-lecture { --pod: var(--dojo-audio); display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; container-type: inline-size; animation: dojo-view-in 260ms var(--ease-out); }
.dojo-lecture .dojo-view-head { padding-left: 12px; }
.dojo-lecture-badge { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--dojo-audio) 12%, transparent); color: var(--dojo-audio); }
.dojo-lecture-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dojo-lecture .dojo-pod-play { color: #fff; }
body[data-mode="dark"] .dojo-lecture .dojo-pod-play { color: #2a1511; }
.dojo-lecture-line { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
.dojo-lecture-line time { padding-top: 2px; color: var(--study-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.dojo-lecture-line.is-active time { color: var(--dojo-audio); font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
  .dojo-rec-dot, .dojo-audio-card.is-waiting .study-gen-icon svg, .dojo-rec-pill, .dojo-lecture { animation: none; }
  .dojo-rec-levels i, .dojo-rec-mini i, .dojo-rec-pill-bars i { transition: none; }
}
@media (max-width: 560px) {
  .dojo-audio-choices { grid-template-columns: 1fr; }
  .dojo-audio-choice { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; padding: 14px; }
  .dojo-audio-choice-icon { grid-row: span 2; margin: 0; }
  .dojo-rec-time { font-size: 34px; }
  .dojo-rec-pill { width: max-content; max-width: calc(100vw - 24px); }
}

/* Flashcard review: top-right actions and the round label. */
.study-review-actions { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 18px; z-index: 8; display: flex; align-items: center; gap: 8px; }
.study-review-actions .study-starred-toggle { position: static; }
.study-card-chat-toggle.is-on { color: var(--study-ink); border-color: var(--study-blue); background: color-mix(in srgb, var(--study-blue) 22%, transparent); }
.study-review-nav.is-finish { color: var(--study-green); border-color: var(--study-green); }
.study-review-round { margin: -8px 0 0; color: var(--study-muted); font-size: 13px; font-weight: 600; }
@media (max-width: 700px) { .study-card-chat-toggle { display: none; } }

/* Card chat docked to the right of a flashcard review. */
:root { --card-chat-w: clamp(320px, 27vw, 400px); }
.side-chat-panel.is-docked { top: 0 !important; right: 0; bottom: 0; left: auto !important; width: var(--card-chat-w); height: auto; min-width: 0; min-height: 0; max-height: none; resize: none; border-radius: 0; animation: side-chat-dock-in 260ms var(--ease-out); }
body.study-session-open .side-chat-panel.is-docked { border: 0; border-left: 2px solid var(--study-stroke); border-radius: 0; box-shadow: none; background: var(--study-board); }
body.side-chat-docked .study-session { right: var(--card-chat-w); transition: right 260ms var(--ease-out); }
.side-chat-panel.is-docked .side-chat-header { cursor: default; }
body.study-session-open .side-chat-panel.is-docked .side-chat-header { justify-content: space-between; min-height: 58px; padding: 8px 10px 8px 18px; }
body.study-session-open .side-chat-panel.is-docked .side-chat-header > div { display: flex; }
.side-chat-panel.is-docked .side-chat-header span, .side-chat-panel.is-docked .side-chat-context { display: none; }
.side-chat-panel.is-docked .side-chat-header strong { font-size: 15px; font-weight: 650; }
@keyframes side-chat-dock-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.side-chat-suggest { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 14px 12px; }
.side-chat-suggest.hidden { display: none; }
.side-chat-suggest button { max-width: 100%; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: 500 13px var(--font-sans); text-align: left; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 140ms ease, border-color 140ms ease; }
.side-chat-suggest button:active:not(:disabled) { transform: scale(.97); }
.side-chat-suggest button:disabled { opacity: .5; cursor: default; }
.side-chat-suggest.is-row { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
.side-chat-suggest.is-row button { flex: 0 0 auto; padding: 6px 11px; font-size: 12px; white-space: nowrap; }
body.study-session-open .side-chat-suggest button { border: 2px solid var(--study-stroke); background: var(--study-paper); color: var(--study-paper-ink, var(--study-ink)); font-family: var(--study-font); }
@media (hover: hover) and (pointer: fine) {
  .side-chat-suggest button:hover:not(:disabled) { border-color: var(--text-tertiary); background: var(--bg-secondary); }
}

/* End of a flashcard round. */
.study-session-frame.is-done { overflow-y: auto; }
.study-done { display: flex; flex-direction: column; gap: 22px; width: min(640px, 100%); margin: 0 auto; padding: max(76px, 9vh) 22px 48px; color: var(--study-ink); font-family: var(--study-font); animation: study-done-in 380ms var(--ease-out) both; }
.study-done-head { display: flex; align-items: center; gap: 26px; }
.study-done-ring { position: relative; flex: 0 0 auto; width: 132px; height: 132px; }
.study-done-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.study-done-ring circle { fill: none; stroke-width: 9; }
.study-done-track { stroke: color-mix(in srgb, var(--study-ink) 10%, transparent); }
.study-done-fill { stroke: var(--study-green); stroke-linecap: round; stroke-dashoffset: calc(var(--ring) * 1px * (1 - var(--pct) / 100)); animation: study-ring-fill 1s cubic-bezier(.22, 1, .36, 1) 150ms both; }
.study-done-ring[style*="--pct:0;"] .study-done-fill { stroke-linecap: butt; }
.study-done-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.study-done-ring strong { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.study-done-ring small { margin-top: 4px; color: var(--study-muted); font-size: 12px; font-weight: 600; }
.study-done-copy .study-kicker { margin: 0; color: var(--study-muted); font-size: 13px; }
.study-done-copy h2 { margin: 4px 0 6px; font-size: clamp(28px, 4vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.study-done-copy p:last-child { margin: 0; color: var(--study-muted); font-size: 15px; }
.study-done-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.study-done-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 2px solid var(--study-stroke); border-radius: 16px 12px 18px 14px; animation: study-done-in 380ms var(--ease-out) both; }
.study-done-stats > div:nth-child(2) { animation-delay: 60ms; }
.study-done-stats > div:nth-child(3) { animation-delay: 120ms; }
.study-done-stats strong { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.study-done-stats span { color: var(--study-muted); font-size: 13px; font-weight: 600; }
.study-done-stats .is-got strong { color: var(--study-green); }
.study-done-stats .is-missed strong { color: var(--study-red); }
.study-done-stats .is-skipped strong { color: var(--study-orange); }
.study-done-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.study-done-actions .study-primary-btn { padding: 12px 20px; border-color: transparent; background: var(--study-ink); color: var(--study-board); font-size: 15px; font-weight: 650; }
.study-done-actions .study-chip-btn { padding: 11px 16px; font-size: 14px; }
.study-done-actions > :last-child { margin-left: auto; }
.study-done-note { margin: -8px 0 0; color: var(--study-muted); font-size: 13px; line-height: 1.5; }
.study-done-buckets { display: flex; flex-direction: column; gap: 10px; }
.study-bucket { border: 2px solid var(--study-stroke); border-radius: 16px 12px 18px 14px; overflow: hidden; }
.study-bucket > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 15px; font-weight: 650; list-style: none; cursor: pointer; }
.study-bucket > summary::-webkit-details-marker { display: none; }
.study-bucket-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.study-bucket.is-missed { --dot: var(--study-red); }
.study-bucket.is-skipped { --dot: var(--study-orange); }
.study-bucket.is-got { --dot: var(--study-green); }
.study-bucket-name { flex: 1; }
.study-bucket-count { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--dot) 18%, transparent); font-size: 12px; font-variant-numeric: tabular-nums; }
.study-bucket-chevron { color: var(--study-muted); transition: transform 200ms var(--ease-out); }
.study-bucket:not([open]) .study-bucket-chevron { transform: rotate(-90deg); }
.study-bucket ol { margin: 0; padding: 0 8px 8px; list-style: none; counter-reset: bucket; }
.study-bucket li { counter-increment: bucket; border-top: 1px solid color-mix(in srgb, var(--study-ink) 10%, transparent); }
.study-bucket li summary { display: flex; gap: 10px; padding: 10px 8px; font-size: 14px; line-height: 1.45; list-style: none; cursor: pointer; border-radius: 10px; }
.study-bucket li summary::-webkit-details-marker { display: none; }
.study-bucket li summary::before { content: counter(bucket); flex: 0 0 auto; min-width: 18px; color: var(--study-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.9; }
.study-bucket li p { margin: 0 8px 10px 36px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--dot) 10%, transparent); font-size: 14px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .study-bucket li summary:hover { background: color-mix(in srgb, var(--study-ink) 5%, transparent); } }
@keyframes study-done-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes study-ring-fill { from { stroke-dashoffset: calc(var(--ring) * 1px); } }
@media (max-width: 560px) {
  .study-done-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .study-done-ring { width: 108px; height: 108px; }
  .study-done-actions > * { flex: 1 1 100%; }
  .study-done-actions > :last-child { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .study-done, .study-done-stats > div, .study-done-fill, .side-chat-panel.is-docked { animation: none; } }

/* Deck view: resume a paused round or revisit the last one's misses. */
.dojo-deck-progress { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 10px 10px 10px 14px; border: 1px solid var(--study-stroke); border-radius: 14px; background: var(--dojo-soft); overflow: hidden; animation: dojo-drop-in 220ms var(--ease-out); }
.dojo-deck-progress p { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.dojo-deck-progress strong { font-size: 12.5px; font-weight: 650; }
.dojo-deck-progress small { color: var(--study-muted); font-size: 11px; }
.dojo-deck-progress button { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; font-size: 12px; }
.dojo-deck-progress.is-revisit { border-color: color-mix(in srgb, var(--study-red) 35%, var(--study-stroke)); background: color-mix(in srgb, var(--study-red) 7%, var(--dojo-surface)); }
.dojo-deck-progress.is-clear { border-color: color-mix(in srgb, var(--study-green) 35%, var(--study-stroke)); background: color-mix(in srgb, var(--study-green) 7%, var(--dojo-surface)); }
.dojo-deck-progress-bar { position: absolute; left: 0; bottom: 0; width: var(--done); height: 2px; background: var(--dojo-flashcards); }

/* Create dialog: title stays at the top, the options scroll, and the Generate row is always in view. */
#studyCreateDialog { overflow: hidden; }
#studyCreateDialog[open] { display: flex; flex-direction: column; }
#studyCreateDialog form { flex: 1 1 auto; min-height: 0; max-height: 90dvh; padding-bottom: 0; }
#studyCreateDialog .dojo-create-body { flex: 1 1 auto; min-height: 0; margin: 0 -26px; padding: 2px 26px 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#studyCreateDialog .project-dialog-actions { flex-shrink: 0; margin: 0 -26px; padding: 14px 26px 16px; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
#studyCreateDialog #studyCreateHint { margin-bottom: 18px; }
@media (max-width: 680px) {
  #studyCreateDialog .dojo-create-body { margin: 0 -20px; padding: 2px 20px 18px; }
  #studyCreateDialog .project-dialog-actions { margin: 0 -20px; padding: 12px 20px max(14px, env(safe-area-inset-bottom)); }
  #studyCreateDialog .study-create-list { max-height: 220px; }
}