/* Scoped DOM lesson builder; dashboard and legacy canvas styles are independent. */
.canvas-container.lp-container { overflow:hidden; min-width:0; }
.lp-container { position:relative; }
.lp-hotspot-panel { position:absolute; inset:0 0 0 auto; z-index:80; width:66.667%; display:flex; flex-direction:column; min-width:0; background:#121212; color:#ededed; border-left:1px solid #47434e; box-shadow:-16px 0 36px #0004; font:14px/1.5 "Segoe UI",sans-serif; }
.lp-hotspot-panel[hidden], .lp-hotspot-view[hidden], .lp-hotspot-reopen[hidden] { display:none!important; }
.lp-hotspot-panel.is-fullscreen { width:100%; }
.lp-hotspot-panel-heading { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 10px; border-bottom:1px solid #373739; }
.lp-hotspot-panel-heading > button:last-child { margin-left:auto; }
.lp-hotspot-panel-heading button, .lp-hotspot-tabs button, .lp-hotspot-reopen { color:#eee; background:transparent; border:1px solid #45454b; border-radius:6px; padding:7px 10px; min-height:36px; cursor:pointer; font:13px/1.4 "Segoe UI",sans-serif; }
.lp-hotspot-panel-heading button:hover, .lp-hotspot-tabs button:hover, .lp-hotspot-reopen:hover { border-color:#b3a1fa; }
.lp-hotspot-panel button:focus-visible, .lp-hotspot-reopen:focus-visible { outline:2px solid #b3a1fa; outline-offset:-2px; }
.lp-hotspot-panel-heading button:disabled { opacity:.4; cursor:default; }
.lp-hotspot-tabs { display:flex; gap:4px; overflow:auto; flex-shrink:0; padding:5px 10px; border-bottom:1px solid #373739; }
.lp-hotspot-tabs button { flex:0 0 auto; max-width:240px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border-color:transparent; }
.lp-hotspot-tabs button[aria-selected=true] { border-bottom-color:#b3a1fa; border-radius:0; color:#d9cafa; }
.lp-hotspot-panel-body { flex:1; min-height:0; min-width:0; }
.lp-hotspot-view { height:100%; min-height:0; }
.lp-hotspot-panel-status { padding:10px 16px; margin:0; color:#ffb4a8; font-size:13px; }
.lp-hotspot-reopen { position:absolute; right:12px; bottom:12px; z-index:81; background:#121212; box-shadow:0 3px 16px #0004; }
.lp-hotspot { padding:8px 0; }
.lp-editor .lp-hotspot-control { display:inline-flex; align-items:center; gap:10px; max-width:100%; border:0; background:transparent; padding:8px; color:var(--lp-text); font:inherit; text-align:left; }
.lp-editor .lp-hotspot-control:hover { background:transparent; text-decoration:underline; }
.lp-hotspot-dot { flex:0 0 16px; width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 1px color-mix(in srgb,var(--lp-text) 30%,transparent); }
.lp-hotspot-label { overflow-wrap:anywhere; }
.lp-hotspot-palette { display:flex; gap:8px; flex-wrap:wrap; }
.lp-dialog .lp-hotspot-palette button { width:32px; height:32px; padding:0; border:1px solid #aaa; border-radius:50%; }
@media (max-width:700px) { .lp-hotspot-panel { width:100%; } .lp-hotspot-panel-heading { gap:4px; padding:5px; } .lp-hotspot-panel-heading button { padding:6px; } }
.lp-editor { height:100%; min-height:0; display:flex; flex-direction:column; background:#121212; color:#ededed; font:14px/1.5 "Segoe UI",sans-serif; }
.lp-editor *, .lp-dialog * { box-sizing:border-box; }
.lp-toolbar { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#1b1b1d; border-bottom:1px solid #373739; flex-wrap:wrap; }
.lp-identity { display:flex; flex-direction:column; margin-right:auto; }
.lp-editing .lp-identity .lp-caption { display:none; }
.lp-caption, .lp-hint { color:#aaaeb5; font-size:12px; }
.lp-editor button, .lp-dialog button, .lp-editor select, .lp-dialog select, .lp-editor input, .lp-dialog input {
  color:#eee; background:#29292d; border:1px solid #45454b; border-radius:7px; padding:8px 11px; font:13px/1.4 "Segoe UI",sans-serif; min-width:0;
}
.lp-editor button, .lp-dialog button { cursor:pointer; }
.lp-editor button:hover, .lp-dialog button:hover { background:#393940; border-color:#9694ae; }
.lp-editor button:disabled { opacity:.35; cursor:default; }
.lp-editor button:focus-visible, .lp-dialog button:focus-visible, .lp-editor select:focus-visible, .lp-dialog textarea:focus-visible { outline:2px solid #b3a1fa; outline-offset:2px; }
.lp-editor .lp-primary, .lp-dialog .lp-primary { background:#7453d6; border-color:#9273ee; color:white; }
.lp-editor .lp-save { font-size:12px; color:#a9c4ad; max-width:340px; }
.lp-editor .lp-save-error { color:#ffb4a8; }
.lp-select { display:inline-flex; min-width:0; position:relative; }
.lp-editor .lp-select-trigger, .lp-dialog .lp-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-width:0; text-align:left; }
.lp-select-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-select-chevron { width:7px; height:7px; flex:0 0 7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin:0 2px 3px 0; opacity:.75; }
.lp-select-trigger[aria-expanded=true] { border-color:#a58ce9; }
.lp-select-menu { position:fixed; inset:auto; margin:0; z-index:10000; box-sizing:border-box; padding:5px; overflow:auto; overscroll-behavior:contain; color:#f0edf7; background:#252429; border:1px solid #57515f; border-radius:8px; box-shadow:0 12px 30px #0008; font:13px/1.4 "Segoe UI",sans-serif; color-scheme:dark; scrollbar-width:thin; }
.lp-select-menu .lp-select-option { display:flex; align-items:center; gap:9px; width:100%; box-sizing:border-box; margin:0; padding:9px 10px; border:0; border-radius:4px; background:transparent; color:#f0edf7; text-align:left; font:inherit; white-space:normal; cursor:pointer; }
.lp-select-menu .lp-select-option.is-active { background:#3c354b; color:#fff; }
.lp-select-menu .lp-select-option[aria-selected=true] { color:#cbb7ff; }
.lp-select-check { width:14px; flex:0 0 14px; }
.lp-field > .lp-select { width:100%; }
.lp-lesson-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; flex-wrap:wrap; }
.lp-editor .lp-lesson-actions button { background:transparent; color:var(--lp-text); border-color:color-mix(in srgb,var(--lp-text) 28%,transparent); }
.lp-workspace { display:flex; flex:1; min-height:0; min-width:0; }
.lp-scroll { overflow:auto; flex:1; min-width:0; background:#0c0c0e; scrollbar-width:none; }
.lp-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
.lp-page { position:relative; isolation:isolate; background:var(--lp-background); color:var(--lp-text); min-height:100%; width:100%; padding:var(--lp-padding); margin:auto; container-type:inline-size; }
.lp-lesson-entry { padding:6px 10px; background:#1b1b1d; color:#ededed; border-bottom:1px solid #373739; }
.lp-hotspot-layer { position:absolute; inset:0; z-index:5; overflow:clip; pointer-events:none; }
.lp-hotspot-capture { position:absolute; inset:0; z-index:1; pointer-events:auto; cursor:crosshair; touch-action:pan-y; }
.lp-hotspot-capture[hidden], .lp-overlay-point[hidden], .lp-hotspot-list[hidden] { display:none!important; }
.lp-editor .lp-overlay-point { position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; width:36px; height:36px; min-width:36px; min-height:36px; padding:0; border:0; border-radius:50%; transform:translate(-50%,-50%); background:transparent; pointer-events:auto; }
.lp-editor .lp-overlay-point:hover { background:color-mix(in srgb,var(--lp-text) 8%,transparent); }
.lp-overlay-point-dot { width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 1px color-mix(in srgb,var(--lp-text) 35%,transparent),0 1px 5px #0005; }
.lp-editor .lp-overlay-point:focus-visible, .lp-overlay-point.is-selected { outline:2px solid var(--lp-accent); outline-offset:-2px; }
.lp-overlay-point.is-editable { touch-action:none; cursor:move; }
.lp-overlay-point.needs-placement.is-editable { outline:1px dashed var(--lp-accent); outline-offset:-2px; }
.lp-hotspot-list { position:absolute; z-index:30; top:58px; right:10px; width:min(360px,calc(100% - 20px)); max-height:calc(100% - 76px); overflow:auto; padding:12px; background:#202023; color:#eee; border-left:1px solid #47434e; box-shadow:-8px 0 24px #0004; }
.lp-hotspot-list h3 { font-size:15px; margin:0 0 10px; }
.lp-hotspot-list-row { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:9px 0; border-bottom:1px solid #373739; }
.lp-hotspot-list-row > span { flex:1 0 100%; overflow-wrap:anywhere; }
.lp-hotspot-list-row small { flex:1 0 100%; }
.lp-hotspot-list-row.is-selected { color:#d9cafa; }
.lp-editor .lp-hotspot-list button { background:transparent; padding:4px 8px; min-height:30px; }
.lp-page-content { max-width:var(--lp-width); margin:auto; display:flex; flex-direction:column; gap:var(--lp-gap); }
/* Editing uses the available workspace; authored spacing is shown in preview/the lesson. */
.lp-editing .lp-page { padding:0; }
.lp-editing .lp-page-content { max-width:none; margin:0; gap:0; }
.lp-section { min-width:0; }
.lp-editing .lp-section { border:0; border-bottom:1px solid #35353b; border-radius:0; background:transparent; }
.lp-section-tools { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:2px 6px; background:#1b1b1e; color:#b7b7c0; border-bottom:1px solid #35353b; }
.lp-section-tools button, .lp-widget-tools button { padding:2px 6px; min-width:26px; min-height:26px; border-color:transparent; border-radius:3px; background:transparent; }
.lp-section-number { font:12px "Segoe UI",sans-serif; margin-right:auto; }
.lp-section-tools select { max-width:210px; min-height:26px; font-size:12px; padding:2px 5px; background:transparent; border-color:#35353b; border-radius:3px; }
.lp-section-tools .lp-select { max-width:230px; }
.lp-section-tools .lp-select-trigger { min-height:26px; font-size:12px; padding:2px 7px; background:transparent; border-color:#45424b; border-radius:3px; }
.lp-section:hover > .lp-section-tools, .lp-section:focus-within > .lp-section-tools { border-bottom-color:#7d6cb0; }
.lp-grid { display:grid; gap:var(--lp-gap); min-width:0; }
.lp-grid-margins { column-gap:0; }
.lp-editing .lp-grid { padding:0; gap:0; }
.lp-column { min-width:0; display:flex; flex-direction:column; gap:var(--lp-gap); }
.lp-editing .lp-column { border:0; padding:0; gap:0; border-radius:0; }
.lp-editing .lp-column + .lp-column { border-left:1px solid #35353b; }
.lp-editing .lp-grid-margins > .lp-column + .lp-column { border:0; }
.lp-column > button { border:0; border-top:1px solid #35353b; border-radius:0; background:transparent; color:#c8c3e6; padding:4px 8px; min-height:28px; }
.lp-add-element { display:flex; justify-content:center; align-items:center; min-height:96px; }
.lp-editor .lp-add-element-trigger { width:48px; min-height:48px; padding:0; border:0; border-radius:0; background:transparent; color:#c8c3e6; font:300 36px/1 "Segoe UI",sans-serif; }
.lp-editor .lp-add-element-trigger:hover { background:transparent; color:#eee; }
.lp-widget { min-width:0; overflow:clip; border-radius:0; background:transparent; }
.lp-editing .lp-widget { border-radius:0; }
.lp-editing .lp-widget + .lp-widget { border-top:1px solid #35353b; }
.lp-widget-tools { display:flex; align-items:center; gap:4px; background:#202023; padding:1px 6px; color:#b7b7c0; font:12px "Segoe UI",sans-serif; flex-wrap:wrap; border-bottom:1px solid #35353b; }
.lp-widget:hover > .lp-widget-tools, .lp-widget:focus-within > .lp-widget-tools { border-bottom-color:#7d6cb0; }
.lp-widget-tools span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:45px; }
.lp-html-frame { display:block; width:100%; border:0; }
.lp-add-section { display:flex; justify-content:flex-start; align-items:center; gap:8px; padding:6px; background:#1b1b1e; flex-wrap:wrap; }
.lp-add-section button, .lp-add-section select { padding:4px 8px; min-height:28px; border-radius:3px; }
.lp-add-section button { color:#d9cafa; }
.lp-empty { text-align:center; padding:55px 15px 25px; }
.lp-empty h2 { font:500 27px/1.3 "Segoe UI",sans-serif; margin:15px 0; }
.lp-empty p { font:15px/1.6 "Segoe UI",sans-serif; opacity:.65; }
.lp-empty-symbol { font-size:38px; color:var(--lp-accent); }
.lp-settings { width:250px; flex-shrink:0; overflow:auto; padding:18px; border-left:1px solid #39393e; background:#202023; }
.lp-settings h3 { font-size:16px; margin:0 0 10px; }
.lp-field { display:flex; flex-direction:column; gap:6px; margin:15px 0; font:13px/1.4 "Segoe UI",sans-serif; color:#c7c7cd; }
.lp-field input[type=color] { width:100%; height:36px; padding:3px; }
.lp-presets { display:flex; gap:8px; }
.lp-narrow { max-width:390px; }
.lp-dialog { color:#eee; background:#202023; border:1px solid #53535c; border-radius:14px; width:min(1000px,94vw); max-height:92vh; padding:22px; box-shadow:0 24px 100px #0009; }
.lp-dialog::backdrop { background:#000a; }
.lp-dialog-heading { display:flex; align-items:center; justify-content:space-between; }
.lp-dialog h2 { margin:0; font:500 22px "Segoe UI",sans-serif; }
.lp-dialog.lp-element-picker { box-sizing:border-box; width:min(700px,94vw); margin:auto; overflow:auto; }
.lp-element-picker .lp-dialog-heading { gap:16px; }
.lp-element-picker .lp-dialog-heading > button { flex-shrink:0; min-width:44px; min-height:44px; }
.lp-element-picker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.lp-element-picker .lp-element-picker-tile { display:flex; align-items:center; justify-content:center; min-height:104px; padding:18px 14px; font-size:16px; line-height:1.4; text-align:center; white-space:normal; overflow-wrap:anywhere; }
@media (max-width:700px) {
  .lp-element-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-dialog.lp-element-picker { padding:16px; }
}
@media (max-width:350px) {
  .lp-element-picker-grid { grid-template-columns:minmax(0,1fr); }
}
.lp-code { display:block; width:100%; min-height:260px; resize:vertical; color:#dfd9f5; background:#111114; border:1px solid #47414f; border-radius:8px; padding:15px; font:13px/1.6 Consolas,monospace; tab-size:2; }
.lp-dialog-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; padding-top:10px; }
.lp-dialog-preview:not(:empty) { margin-top:15px; border:1px solid #45454b; }
.lp-load-error { padding:20px; color:#efb9b9; }
/* Shared native element skin. All content colors/font/rounding inherit the lesson theme. */
.lp-native { --lp-line:color-mix(in srgb,var(--lp-text) 18%,transparent); --lp-muted:color-mix(in srgb,var(--lp-text) 68%,var(--lp-background)); padding:clamp(16px,3cqi,28px); font:inherit; line-height:1.55; color:var(--lp-text); background:transparent; overflow-wrap:anywhere; }
.lp-element-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; color:var(--lp-muted); font-size:.7em; }
.lp-element-kind { font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--lp-accent); }
.lp-native .lp-question { font-family:inherit; font-size:1.35em; line-height:1.35; font-weight:600; color:inherit; white-space:pre-wrap; margin:16px 0 6px; }
.lp-instruction { font-size:.82em; color:var(--lp-muted); margin:0 0 20px; }
.lp-context { color:var(--lp-muted); font-size:.72em; margin:8px 0 0; }
.lp-choices { display:grid; gap:9px; padding:0; margin:0; border:0; min-width:0; }
.lp-choice { position:relative; display:flex; align-items:center; gap:12px; padding:13px 15px; min-height:52px; border:1px solid var(--lp-line); border-radius:min(var(--lp-radius),10px); font:inherit; color:inherit; cursor:pointer; transition:background .12s,border-color .12s; }
.lp-choice:hover { background:color-mix(in srgb,var(--lp-text) 4%,transparent); }
.lp-choice.is-selected { border-color:var(--lp-accent); background:color-mix(in srgb,var(--lp-accent) 11%,transparent); }
.lp-native .lp-choice input { appearance:none; flex:0 0 18px; width:18px; height:18px; margin:0; padding:0; background:transparent; border:1.5px solid var(--lp-muted); border-radius:4px; color:var(--lp-text); }
.lp-native .lp-choice input[type=radio] { border-radius:50%; }
.lp-native .lp-choice input:checked { background:var(--lp-accent); border-color:var(--lp-accent); box-shadow:inset 0 0 0 3px var(--lp-surface); }
.lp-choice:has(input:focus-visible) { outline:2px solid var(--lp-accent); outline-offset:3px; }
.lp-choice-letter { font-size:.75em; color:var(--lp-muted); }
.lp-choice-text { white-space:pre-wrap; }
.lp-choices:disabled .lp-choice { cursor:default; }
.lp-element-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.lp-editor .lp-native button { font:inherit; font-size:.82em; padding:10px 20px; min-height:42px; border-radius:min(var(--lp-radius),8px); color:var(--lp-text); border:1px solid var(--lp-line); background:transparent; }
.lp-editor .lp-native button:hover { background:color-mix(in srgb,var(--lp-accent) 15%,var(--lp-surface)); border-color:var(--lp-accent); }
.lp-editor .lp-native button.lp-element-primary { background:var(--lp-accent); border-color:transparent; color:var(--lp-on-accent,#111); font-weight:600; }
.lp-editor .lp-native button:focus-visible { outline:2px solid var(--lp-accent); outline-offset:3px; }
.lp-editor .lp-native button:disabled { opacity:.4; cursor:default; }
.lp-native [hidden] { display:none!important; }
.lp-link-button { padding:16px 0; }
.lp-editor .lp-native .lp-link-button-control { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
.lp-link-button .lp-runtime-message { margin:8px 0 0; }
.lp-dialog.lp-link-button-dialog { box-sizing:border-box; width:min(650px,94vw); margin:auto; overflow:auto; }
.lp-link-button-dialog .lp-dialog-heading { gap:16px; }
.lp-link-button-dialog .lp-dialog-heading > button { flex-shrink:0; min-width:44px; min-height:44px; }
.lp-feedback { border-left:3px solid var(--lp-accent); padding:12px 16px; background:color-mix(in srgb,var(--lp-accent) 7%,transparent); margin-top:20px; font-size:.88em; }
.lp-feedback p { margin:4px 0 0; white-space:pre-wrap; }
.lp-feedback .lp-explanation { margin-top:10px; }
.lp-quiz[data-status=incorrect] .lp-feedback { border-left-style:dashed; border-left-color:#eb8171; }
.lp-runtime-message { color:var(--lp-muted); font-size:.7em; margin:8px 0 0; min-height:1.5em; }
.lp-runtime-message.is-error { color:var(--lp-text); }
.lp-attempt-history { border-top:1px solid var(--lp-line); padding-top:12px; margin-top:16px; color:var(--lp-muted); font-size:.75em; }
.lp-attempt-history summary { cursor:pointer; }
.lp-attempt-history p { margin:6px 0; }
.lp-quiz-dialog { max-width:760px; }
.lp-quiz-dialog textarea { display:block; min-width:0; width:100%; resize:vertical; padding:10px; border:1px solid #45454b; border-radius:7px; color:#eee; background:#161619; font:14px/1.5 "Segoe UI",sans-serif; }
.lp-answer-editor { display:grid; gap:8px; margin:12px 0; }
.lp-answer-row { display:flex; align-items:center; gap:10px; }
.lp-answer-row textarea { flex:1; }
.lp-answer-row input { width:20px; height:20px; flex-shrink:0; accent-color:#a78bf0; }
.lp-dialog .lp-form-error { color:#ffb4a8; font-size:13px; }
.lp-dialog button:disabled { opacity:.35; cursor:default; }
.lp-web-reader { position:relative; border:0; border-radius:0; padding:0; }
.lp-reader-header { padding:0; border-radius:0; background:transparent; }
.lp-reader-source { margin:12px 0; color:var(--lp-muted); font-size:.72em; overflow-wrap:anywhere; }
.lp-reader-url-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.lp-reader-url-form input { flex:1 1 180px; min-width:0; width:100%; font:inherit; padding:10px; color:var(--lp-text); background:var(--lp-surface); border:1px solid var(--lp-line); border-radius:min(var(--lp-radius),8px); }
.lp-reader-article { margin-top:22px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.lp-reader-article:focus-visible { outline:2px solid var(--lp-accent); outline-offset:4px; }
.lp-reader-article-title { font-family:inherit; font-size:1.22em; line-height:1.4; font-weight:600; margin:0 0 18px; }
.lp-reader-article p { margin:0 0 1em; }
.lp-reader-popup { box-sizing:border-box; max-width:100%; padding:16px; margin:12px 0 0; border:1px solid var(--lp-line); border-radius:min(var(--lp-radius),10px); color:var(--lp-text); background:var(--lp-background); font:inherit; overflow-wrap:anywhere; box-shadow:0 8px 30px #0005; }
.lp-reader-popup[popover] { position:fixed; inset:auto; margin:0; max-height:calc(100vh - 16px); overflow:auto; }
.lp-reader-popup .lp-element-actions { margin-top:10px; gap:6px; }
.lp-reader-popup .lp-element-actions button { padding:8px 12px; }
.lp-reader-translation { white-space:pre-wrap; margin:12px 0; }
.lp-parallel-reader { border:0; border-radius:0; padding:0; }
.lp-parallel-article { margin-top:20px; line-height:2; white-space:pre-wrap; overflow-wrap:anywhere; }
.lp-editor .lp-parallel-reader .lp-parallel-segment { display:inline; padding:1px 2px; min-height:0; border:0; border-radius:3px; font:inherit; line-height:inherit; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; }
.lp-editor .lp-parallel-reader.is-learn .lp-parallel-segment { margin-right:.5em; }
.lp-editor .lp-parallel-reader .lp-parallel-segment:disabled { opacity:1; }
.lp-editor .lp-parallel-reader .lp-parallel-title { display:block; padding:0; min-height:0; border:0; margin-top:12px; font-family:inherit; font-weight:600; font-size:1.35em; line-height:1.35; text-align:left; white-space:pre-wrap; }
.lp-editor .lp-parallel-reader .lp-parallel-title:disabled { opacity:1; }
.lp-editor .lp-parallel-reader .is-translation { color:var(--lp-accent); background:color-mix(in srgb,var(--lp-accent) 12%,transparent); }
.lp-parallel-reader .is-seen:not(.is-translation) { text-decoration:underline; text-decoration-color:var(--lp-line); text-underline-offset:4px; }
.lp-editor .lp-parallel-reader .is-playing { outline:2px solid var(--lp-accent); outline-offset:2px; }
.lp-parallel-inline-speech, .lp-editor .lp-native button.lp-parallel-inline-speech { box-sizing:border-box; position:fixed; inset:auto; z-index:10000; margin:0; display:flex; align-items:center; justify-content:center; width:28px; height:28px; min-height:0; padding:3px; border:0; border-radius:4px; background:var(--lp-background); color:var(--lp-text); cursor:pointer; }
.lp-parallel-inline-speech[hidden] { display:none!important; }
.lp-parallel-inline-speech .db-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lp-parallel-inline-speech:hover, .lp-editor .lp-native button.lp-parallel-inline-speech:hover { color:var(--lp-accent); background:var(--lp-background); border:0; }
.lp-parallel-inline-speech:focus-visible, .lp-parallel-inline-speech.is-playing { color:var(--lp-accent); outline:2px solid var(--lp-accent); outline-offset:1px; }
.lp-parallel-tools .lp-hint { flex:1 1 100%; white-space:pre-wrap; margin:0; }
.lp-parallel-vocab { border-top:1px solid var(--lp-line); margin-top:24px; padding-top:4px; }
.lp-parallel-vocab h4 { flex:1; margin:0; font-size:.85em; align-self:center; }
.lp-parallel-vocab-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 0; border-bottom:1px solid var(--lp-line); font-size:.8em; }
.lp-parallel-vocab-row > span { flex:1 1 130px; white-space:pre-wrap; overflow-wrap:anywhere; }
.lp-parallel-vocab-ru { color:var(--lp-muted); }
.lp-parallel-vocab-row.is-highlighted { background:color-mix(in srgb,var(--lp-accent) 10%,transparent); }
.lp-parallel-input { width:100%; min-width:0; resize:vertical; padding:10px; border:1px solid #45454b; border-radius:7px; color:#eee; background:#161619; font:14px/1.5 "Segoe UI",sans-serif; }
.lp-parallel-preview { max-height:240px; overflow:auto; }
.lp-parallel-preview-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:8px 0; border-bottom:1px solid #45454b; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
.lp-parallel-assignment { max-width:760px; }
.lp-parallel-assignment-pairs { max-height:40vh; overflow:auto; margin-top:12px; }
.lp-parallel-assignment-pair { display:grid; grid-template-columns:20px minmax(0,1fr) minmax(0,1fr); gap:12px; padding:10px 0; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.lp-parallel-assignment input[type=checkbox] { width:18px; height:18px; accent-color:#a78bf0; }
.lp-parallel-assignment .lp-hint { color:#c7c7cd; font-size:13px; }
.lp-parallel-assignment .lp-runtime-message { color:#c7c7cd; font-size:13px; }
@container (max-width:620px) {
  .lp-grid { grid-template-columns:minmax(0,1fr)!important; }
  .lp-grid-margins .lp-gutter { display:none; }
  .lp-editing .lp-column + .lp-column { border-left:0; border-top:1px solid #35353b; }
}
@media (max-width:760px) {
  .lp-toolbar { padding:6px; gap:6px; }
  .lp-workspace { flex-direction:column; }
  .lp-settings { width:100%; max-height:35%; border-left:0; border-top:1px solid #39393e; }
  .lp-page { padding:min(var(--lp-padding),16px); }
}
.lp-image img, .lp-image-preview { display: block; max-width: 100%; height: auto; }
.lp-image-preview { max-height: 320px; object-fit: contain; margin: 12px auto; }
.lp-image img[hidden], .lp-image-preview[hidden] { display: none; }
.lp-audio { background:transparent; }
.lp-audio-title { font:inherit; font-weight:600; margin:0 0 12px; overflow-wrap:anywhere; }
.lp-audio audio, .lp-audio-preview { display:block; width:100%; min-width:0; max-width:100%; }
.lp-audio-preview { margin:12px 0; }
.lp-audio audio[hidden], .lp-audio-preview[hidden] { display:none; }
.lp-video { background:transparent; }
.lp-video-title { font:inherit; font-weight:600; margin:0 0 12px; overflow-wrap:anywhere; }
.lp-video video, .lp-video-preview { display:block; width:100%; min-width:0; max-width:100%; max-height:70vh; object-fit:contain; }
.lp-video-preview { margin:12px 0; }
.lp-video video[hidden], .lp-video-preview[hidden] { display:none; }
.lp-native.lp-ai-chat { padding:0; border:0; background:transparent; min-width:0; }
.lp-ai-chat-task { margin:16px 0; white-space:pre-wrap; }
.lp-ai-chat-log { display:flex; flex-direction:column; gap:14px; max-height:420px; overflow-y:auto; padding:12px 0; margin:12px 0; scrollbar-width:thin; }
.lp-ai-chat-message { max-width:92%; min-width:0; padding:10px 14px; border-radius:min(var(--lp-radius),10px); background:color-mix(in srgb,var(--lp-text) 5%,transparent); }
.lp-ai-chat-message.is-user { align-self:flex-end; background:color-mix(in srgb,var(--lp-accent) 12%,transparent); }
.lp-ai-chat-message.is-assistant { align-self:flex-start; }
.lp-ai-chat-speaker { display:block; font-size:.7em; color:var(--lp-muted); }
.lp-ai-chat-message p { margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.lp-ai-chat-quota { font-size:.8em; }
.lp-ai-chat-form { display:flex; align-items:flex-end; gap:8px; min-width:0; }
.lp-ai-chat-draft { flex:1; min-width:0; width:100%; resize:vertical; min-height:70px; max-height:220px; font:inherit; line-height:1.5; padding:10px 12px; color:var(--lp-text); background:transparent; border:1px solid var(--lp-line); border-radius:min(var(--lp-radius),8px); }
.lp-editor .lp-native button.lp-ai-chat-send { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; padding:9px; color:var(--lp-text); background:transparent; }
.lp-ai-chat-send svg { width:24px; height:24px; }
.lp-ai-chat-draft:focus-visible { outline:2px solid var(--lp-accent); outline-offset:-2px; }
.lp-ai-chat-log:focus-visible { outline:2px solid var(--lp-accent); outline-offset:3px; }
.lp-ai-chat-draft:disabled { opacity:.5; }
.lp-ai-chat-form + .lp-hint { margin:8px 0; color:var(--lp-muted); font-size:.7em; }
.lp-dialog.lp-ai-chat-dialog { width:min(720px,94vw); overflow:auto; }
.lp-ai-chat-author-input { width:100%; padding:10px; resize:vertical; font:inherit; line-height:1.5; color:inherit; background:#161618; border:1px solid #53535c; border-radius:6px; }
.lp-ai-chat-dialog [hidden] { display:none!important; }