#presentation-practice {
  --pr-gold:#ffd477; --pr-muted:#b6b0cb;
  position:fixed; inset:0; margin:0; padding:0;
  width:100%; height:100dvh; max-width:none; max-height:none;
  overflow:hidden; overscroll-behavior:contain; box-sizing:border-box;
  color:#f7f5ff; background:linear-gradient(130deg,#1a1232,#100d23 70%);
  border:0; border-radius:0;
  font:400 16px/1.6 'Pretendard Variable',Pretendard,system-ui,sans-serif;
  text-align:left; color-scheme:dark;
}
#presentation-practice::backdrop {background:#100d23}
#presentation-practice [hidden] {display:none!important}
#presentation-practice * {box-sizing:border-box}
#presentation-practice button,#presentation-practice select,#presentation-practice textarea {font:inherit}
#presentation-practice button {cursor:pointer;color:inherit;background:transparent;border:1px solid #5b516e;border-radius:10px;padding:9px 14px;min-height:42px;font-size:13px;font-weight:600;line-height:1.4}
#presentation-practice button:hover:not(:disabled) {background:#ffffff12;border-color:#a294b4}
#presentation-practice button:disabled {opacity:.4;cursor:default}
#presentation-practice :focus-visible {outline:2px solid var(--pr-gold);outline-offset:3px}
.pr-workspace {display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,30vw,450px);height:100%;min-height:0}
.pr-preview {position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#0c0920}
.pr-preview-bar {display:flex;justify-content:space-between;gap:12px;flex:none;padding:9px 16px;background:#0e0a1c;color:#b6accb;font:500 10px/1.6 'IBM Plex Mono',Pretendard,monospace;letter-spacing:.06em;border-bottom:1px solid #ffffff16}
.pr-preview-bar span:first-child {color:#e4d3aa}
#pr-preview-frame {display:block;flex:1;min-height:0;width:100%;border:0;pointer-events:none;background:#0c0920}
#pr-preview-status {position:absolute;inset:45% 16px auto;text-align:center;color:#c9bfdc;font-size:14px}
.pr-shell {min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 22px 16px;border-left:1px solid #62506f}
.pr-header {position:sticky;top:-22px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;padding:8px 0;background:#18112c}
.pr-header-actions {display:flex;align-items:center;gap:4px;flex:none}
.pr-modes {display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 18px;padding:4px;background:#0c0820;border:1px solid #ffffff16;border-radius:12px}
#presentation-practice .pr-modes button {border:0;min-height:36px;padding:8px;font-size:12px;color:var(--pr-muted)}
#presentation-practice .pr-modes button[aria-pressed=true] {background:#382748;color:#ffe0a0}
#presentation-practice #pr-collapse {font-size:11px;padding:7px 9px;min-height:34px}
.pr-eyebrow {color:var(--pr-gold);letter-spacing:.18em;font:500 10px/1.6 'IBM Plex Mono',monospace;margin:0 0 3px}
#pr-title {font-size:23px;line-height:1.4;font-weight:700;letter-spacing:-.025em;margin:0}
#pr-title span {font-size:14px;font-weight:400;color:var(--pr-muted);margin-left:15px;letter-spacing:0}
#presentation-practice .pr-icon {flex:none;border:0;font-size:18px;padding:8px 12px;color:var(--pr-muted)}
.pr-tools {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:15px;border-bottom:1px solid #ffffff16}
.pr-scene-label {display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--pr-muted);white-space:nowrap}
#pr-scene,#ps-scene {min-width:0;max-width:430px;width:100%;font-size:14px;color:#eae5f6;border:0;background:#241c37;border-radius:8px;padding:9px 28px 9px 12px;text-overflow:ellipsis}
#presentation-practice #pr-hide {flex:none;font-size:12px;min-height:36px;padding:7px 11px}
#pr-hide[aria-pressed=true] {color:var(--pr-gold);border-color:var(--pr-gold)}
.pr-copy {padding:21px 0 20px}
.pr-line-label {display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 10px/1.6 'IBM Plex Mono',Pretendard,monospace;letter-spacing:.12em;color:var(--pr-muted);margin-bottom:9px}
#pr-english,#pr-memory {font-size:23px;line-height:1.55;letter-spacing:-.02em;font-weight:500;margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
#pr-memory {color:var(--pr-muted);font-size:21px;padding:12px 0}
#pr-korean {font-size:14px;line-height:1.7;color:#c9c2dc;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.pr-upcoming {color:#c3bbd7}
.pr-correct {color:var(--pr-gold)}
.pr-wrong {color:#ff999f;background:#ff626322;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pr-current {color:#fff;border-bottom:2px solid var(--pr-gold);background:#ffd47712}
.pr-writing {border-top:1px solid #ffffff16;padding-top:16px}
#pr-match {color:var(--pr-gold);letter-spacing:0}
.pr-type-wrap {position:relative;min-height:88px;border:1px solid #6b547f;border-radius:12px;background:#08051266;overflow:hidden}
.pr-type-wrap:focus-within {border-color:#ca9ffa;box-shadow:0 0 0 2px #ac6cea1a}
#pr-typed,#pr-input {width:100%;height:100%;min-height:88px;padding:15px 17px;margin:0;border:0;font:400 19px/1.55 'Pretendard Variable',Pretendard,system-ui,sans-serif!important;letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;text-align:left;tab-size:4}
#pr-typed {height:auto;min-height:112px;pointer-events:none}
#pr-typed::after {content:'\200b'}
#presentation-practice #pr-input {position:absolute;inset:0;overflow:hidden;background:transparent;color:transparent;caret-color:#fff;resize:none;outline:0;-webkit-text-fill-color:transparent}
#pr-input::selection {background:#9166db66}
.pr-placeholder {color:#8d829f;font-size:16px}
#pr-help {font-size:11px;color:var(--pr-muted);margin:7px 0 0}
.pr-footer {display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:16px;margin-top:18px}
.pr-feedback {flex:1;min-width:0}
#pr-status {font-size:12px;color:#ddd5eb;margin:0 0 7px;line-height:1.5}
#pr-progress {display:block;width:100%;height:3px;border:0;border-radius:6px;overflow:hidden;background:#ffffff18;accent-color:var(--pr-gold)}
#pr-progress::-webkit-progress-bar {background:#ffffff18}
#pr-progress::-webkit-progress-value {background:var(--pr-gold)}
#pr-progress::-moz-progress-bar {background:var(--pr-gold)}
.pr-actions {display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
#presentation-practice .pr-actions button {padding:9px 11px;font-size:12px}
#presentation-practice .pr-primary {background:var(--pr-gold);border-color:var(--pr-gold);color:#25172c}
#presentation-practice .pr-primary:hover:not(:disabled) {background:#ffe6b0;border-color:#ffe6b0}
.pr-shortcuts {font-size:10px;color:#a298b5;text-align:center;margin:17px 0 0}
.pr-shortcuts span {padding:0 8px;color:#70637e}
.ps-tools {display:flex;align-items:center;justify-content:space-between;gap:12px}
.ps-tools .pr-scene-label {flex:1}
#ps-count {flex:none;color:var(--pr-gold);font:500 11px/1.6 'IBM Plex Mono',monospace}
.ps-hint {color:var(--pr-muted);font-size:11px;margin:10px 0 22px}
.ps-script {padding:0 0 22px}
.ps-language {color:var(--pr-gold);margin:0 0 10px}
#ps-english,.ps-translation-text {margin:0;font-size:22px;line-height:1.6;letter-spacing:-.015em;white-space:pre-wrap;overflow-wrap:anywhere}
.ps-translation {border-top:1px solid #ffffff18;padding-top:22px}
.ps-translation .ps-language {color:#c2a5ff}
.ps-translation-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ps-translation-heading .ps-language {margin:0;min-width:0;overflow-wrap:anywhere}
.ps-reorder {display:flex;align-items:center;gap:2px;flex:none}
.ps-drag-handle {display:flex;align-items:center;justify-content:center;width:24px;height:30px;cursor:grab;color:var(--pr-muted);font-size:20px;user-select:none}
.ps-drag-handle:active {cursor:grabbing}
#presentation-practice .ps-reorder button {min-height:30px;width:30px;padding:3px;border:0;border-radius:6px;color:var(--pr-muted);font-size:16px}
.ps-dragging {opacity:.45}
.ps-drop-target {border-top-color:var(--pr-gold);box-shadow:0 -2px 0 var(--pr-gold)}
.ps-translation-text {font-size:20px;color:#d8cfea;text-align:start;unicode-bidi:plaintext}
.ps-footer {position:sticky;bottom:-16px;padding:16px 0 4px;background:#151025;border-top:1px solid #ffffff16}
#ps-upcoming {margin:0 0 10px;color:var(--pr-muted);font-size:12px}
#ps-progress {display:block;appearance:none;width:100%;height:3px;border:0;margin-bottom:16px;background:#ffffff18;accent-color:var(--pr-gold)}
#ps-progress::-webkit-progress-bar {background:#ffffff18}
#ps-progress::-webkit-progress-value {background:var(--pr-gold)}
#ps-progress::-moz-progress-bar {background:var(--pr-gold)}
.ps-actions {display:flex;align-items:center;justify-content:space-between;gap:10px}
.ps-actions button {flex:1}
.ps-footer .pr-shortcuts {line-height:1.8;margin:12px 0 8px}
#presentation-practice #pr-speaker:focus-visible {outline:0}
#presentation-practice[data-mode=present] .pr-header {top:0;justify-content:flex-end;margin-bottom:8px;padding:0 0 8px;background:#151025}
#presentation-practice[data-mode=present] .ps-hint,
#presentation-practice[data-mode=present] .pr-shortcuts,
#presentation-practice[data-mode=present] #ps-count,
#presentation-practice[data-mode=present] #ps-upcoming,
#presentation-practice[data-mode=present] #ps-progress {display:none}
#presentation-practice[data-mode=present] .ps-footer {padding:4px 0 0;border:0}
#presentation-practice[data-mode=present] .ps-actions {justify-content:flex-end;gap:4px}
#presentation-practice[data-mode=present] .ps-actions button {flex:none;width:38px;min-height:34px;padding:4px;border-color:#ffffff18;color:var(--pr-muted);font-size:18px}
#presentation-practice[data-mode=present] #pr-collapse {min-width:32px;min-height:32px;padding:3px 8px;border:0;font-size:22px;color:var(--pr-muted)}
#presentation-practice[data-mode=present] .pr-icon {min-height:32px;padding:5px 8px;font-size:16px}
.ps-language-menu {flex:none;font-size:12px;line-height:1.4}
.ps-language-menu summary {display:flex;align-items:center;min-height:32px;padding:5px 8px;cursor:pointer;list-style:none;color:var(--pr-muted);border-radius:8px}
.ps-language-menu summary::-webkit-details-marker {display:none}
.ps-language-menu summary:hover,.ps-language-menu[open] summary {background:#ffffff12;color:#f7f5ff}
.ps-language-panel {position:absolute;inset:calc(100% + 4px) 0 auto auto;width:min(320px,100%);max-height:min(380px,calc(68dvh - 100px));overflow-y:auto;overscroll-behavior:contain;padding:12px;background:#241c37;border:1px solid #63516f;border-radius:10px;box-shadow:0 8px 24px #0006}
#ps-language-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0;padding:0;border:0;min-width:0}
#ps-language-options legend {padding:0;margin-bottom:10px;font-size:11px;color:var(--pr-muted)}
#ps-language-options label {display:flex;align-items:center;gap:8px;min-height:38px;padding:6px;border-radius:6px;cursor:pointer;overflow-wrap:anywhere}
#ps-language-options label:hover {background:#ffffff12}
#ps-language-options input {flex:none;width:16px;height:16px;margin:0;accent-color:var(--pr-gold);cursor:pointer}
#presentation-practice #ps-english-only {width:100%;min-height:34px;margin-top:10px;padding:6px;font-size:12px}
.ps-scene-menu {flex:none;font-size:12px;line-height:1.4}
.ps-scene-menu summary {display:flex;align-items:center;justify-content:center;width:32px;height:32px;cursor:pointer;list-style:none;color:var(--pr-muted);font-size:22px;border-radius:8px}
.ps-scene-menu summary::-webkit-details-marker {display:none}
.ps-scene-menu summary:hover {background:#ffffff12}
.ps-scene-menu .ps-tools {position:absolute;inset:calc(100% + 4px) 0 auto auto;width:min(300px,100%);padding:10px;background:#241c37;border:1px solid #63516f;border-radius:10px;box-shadow:0 8px 24px #0006}
.ps-scene-menu #ps-scene {font-size:12px;max-width:none}
/* Prompter mic toggle; the rest of the prompter UI is in prompter.css, loaded on first use. */
#presentation-practice #ps-voice {display:flex;align-items:center;justify-content:center;flex:none;width:32px;min-height:32px;padding:0;border:0;border-radius:8px;color:var(--pr-muted)}
#presentation-practice #ps-voice svg {display:block;pointer-events:none}
#presentation-practice #ps-voice[aria-pressed=true] {background:var(--pr-gold);color:#25172c}
#presentation-practice #ps-voice[aria-pressed=true]:hover {background:#ffe6b0}
.pr-collapsed .pr-workspace {grid-template-columns:minmax(0,1fr) 72px}
.pr-collapsed .pr-shell {padding:14px 8px}
.pr-collapsed .pr-shell > :not(.pr-header),.pr-collapsed .pr-heading {display:none}
.pr-collapsed .ps-scene-menu,.pr-collapsed .ps-language-menu {display:none}
.pr-collapsed .pr-header,.pr-collapsed .pr-header-actions {flex-direction:column;margin:0;gap:14px}
@media(max-width:760px) {
  .pr-workspace {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(130px,32dvh) minmax(0,1fr)}
  .pr-shell {padding:16px 17px 12px;border-left:0;border-top:1px solid #62506f}
  .pr-preview-bar {padding:5px 12px;font-size:9px}
  .pr-header {top:-16px;margin-bottom:12px}
  #pr-title {font-size:20px}
  #pr-title span {display:none}
  .pr-tools {gap:10px;padding-bottom:12px}
  #pr-scene,#ps-scene {font-size:12px;padding:9px 20px 9px 8px;max-width:210px}
  .pr-scene-label {gap:5px}
  .pr-copy {padding:16px 0}
  #pr-english {font-size:20px}
  #pr-korean {font-size:14px}
  .pr-footer {align-items:stretch;gap:13px;flex-direction:column;margin-top:14px}
  .pr-actions {justify-content:space-between}
  #presentation-practice .pr-actions button {padding:10px 12px}
  #pr-help {font-size:10px}
  .pr-shortcuts {font-size:9px;margin-top:12px}
  .pr-shortcuts span {padding:0 3px}
  .pr-modes {margin-bottom:16px}
  #ps-english {font-size:20px}
  .ps-translation-text {font-size:18px}
  .ps-script {padding-bottom:18px}
  .ps-translation {padding-top:18px}
  .ps-footer {bottom:-12px;padding-top:12px}
  #presentation-practice .ps-actions button {font-size:12px;padding:10px 8px}
  .pr-collapsed .pr-workspace {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 68px}
  .pr-collapsed .pr-shell {padding:10px 16px}
  .pr-collapsed .pr-heading {display:block}
  .pr-collapsed .pr-eyebrow {display:none}
  .pr-collapsed .pr-header,.pr-collapsed .pr-header-actions {flex-direction:row;gap:8px}
}
@media(forced-colors:active) {
  #presentation-practice #pr-input {color:CanvasText;-webkit-text-fill-color:CanvasText}
  #pr-typed {visibility:hidden}
  .pr-correct {text-decoration:underline}.pr-wrong {text-decoration:line-through}
  #presentation-practice #ps-voice[aria-pressed=true] {forced-color-adjust:none;background:Highlight;color:HighlightText}
}
