/*
 * Responsibility: Define the visual system and responsive layout for the teleprompter.
 * Implementation:
 * 1. Establish a dark, high-contrast reading workspace with minimal chrome.
 * 2. Keep the editor and reading stage balanced on large screens and stacked on small screens.
 * 3. Expose theme and state changes through body classes and component-level transitions.
 */
:root {
  color-scheme: dark;
  --bg: #0b0e14;
  --panel: #11151e;
  --panel-raised: #171c27;
  --line: rgba(255,255,255,.1);
  --muted: #8993a5;
  --text: #f4f6fb;
  --accent: #a7f36b;
  --accent-strong: #7fd33f;
  --warm-bg: #1b1713;
  --warm-text: #f8ebcb;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); }
body { min-height: 100vh; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; border: 0; cursor: pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.app-shell { height: 100dvh; min-height: 600px; display: flex; flex-direction: column; padding: 0 4.4vw 22px; }
.topbar { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--text); display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; font-size: 19px; }
.brand-mark { width: 24px; height: 24px; display: inline-flex; align-items: end; gap: 3px; padding: 3px; border: 1px solid rgba(167,243,107,.5); border-radius: 7px; }
.brand-mark span { flex: 1; background: var(--accent); border-radius: 2px; }.brand-mark span:nth-child(1){height: 45%}.brand-mark span:nth-child(2){height: 76%}.brand-mark span:nth-child(3){height: 58%}
.topbar-actions { display: flex; gap: 6px; }.icon-button { width: 38px; height: 38px; display: grid; place-items: center; background: transparent; border-radius: 10px; color: var(--muted); font-size: 21px; transition: .2s ease; }.icon-button:hover { background: var(--panel-raised); color: var(--text); }
.workspace { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(480px, 1.7fr); gap: 26px; flex: 1; padding: 30px 0 24px; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.topbar, .bottombar { flex-shrink: 0; }
.editor-panel, .stage { min-height: 0 !important; }
.reading-window { min-height: 0; }
#script-input { min-height: 0; }
.focus-button { padding: 9px 14px; background: var(--panel-raised); color: var(--muted); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; margin-right: 8px; }
.focus-button:hover { color: var(--text); }
.focus-mode .editor-panel { display: none; }
.focus-mode .workspace { grid-template-columns: minmax(0, 1fr); }
.focus-mode .script-display { padding-left: 16%; padding-right: 16%; }
.focus-mode .focus-button { color: var(--accent); border-color: rgba(167,243,107,.3); }
.setting-row input:focus-visible + .toggle { outline: 2px solid var(--accent); outline-offset: 3px; }
.editor-panel, .stage { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }.editor-panel { display: flex; flex-direction: column; min-height: 570px; }.panel-heading { display:flex; align-items:flex-start; justify-content: space-between; padding: 27px 27px 20px; }.eyebrow { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .18em; margin: 0 0 9px; }.panel-heading h1, .drawer-header h2 { font-size: 20px; letter-spacing: -.03em; margin: 0; }.save-state { color: var(--muted); font-size: 11px; margin-top: 4px; }
#script-input { flex:1; width:100%; resize:none; background:transparent; border:0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 27px; color: #cdd3df; line-height: 1.85; font-size: 16px; }.editor-footer { display:flex; justify-content:space-between; padding: 15px 27px; color: var(--muted); font-size: 12px; }.text-button { background: transparent; color: var(--muted); font-size: 12px; }.text-button:hover { color: var(--text); }
.stage { background: #0e121a; display:flex; flex-direction:column; position:relative; min-height:570px; }.stage-toolbar { display:flex; align-items:center; justify-content:space-between; padding: 22px 27px; }.status-chip { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(167,243,107,.1); }.playing .status-dot { animation: pulse 1.2s infinite; }.stage-hint { color:#596375; font-size:11px; }.reading-window { flex: 1; position:relative; overflow:hidden; margin: 0 0; }.script-display { height:100%; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; color:var(--text); font-size:32px; line-height:1.7; font-weight: 530; letter-spacing: -.02em; padding: 125px 12%; text-align:left; white-space: pre-wrap; scroll-behavior:auto; }.script-display::-webkit-scrollbar { display:none; }.reading-fade { position:absolute; z-index:2; left:0; right:0; height: 120px; pointer-events:none; }.reading-fade-top { top:0; background:linear-gradient(#0e121a, transparent); }.reading-fade-bottom { bottom:0; background:linear-gradient(transparent, #0e121a); }.center-guide { position:absolute; z-index:3; top:49%; left: 8%; right:8%; border-top:1px solid rgba(167,243,107,.19); pointer-events:none; }.progress-track { height:2px; background:rgba(255,255,255,.08); margin:0 27px; }.progress-track span { display:block; height:100%; width:0; background:var(--accent); transition:width .15s linear; }.stage-controls { display:flex; justify-content:center; align-items:center; gap:19px; padding: 22px 27px 25px; }.play-button { width:57px; height:57px; border-radius:50%; background:var(--accent); color:#10160d; display:grid; place-items:center; font-size:18px; padding-left:3px; box-shadow:0 9px 25px rgba(167,243,107,.14); transition:.2s ease; }.play-button:hover { transform:translateY(-2px); background:#bbfa86; }.control-button { width:38px;height:38px; border-radius:50%; background:var(--panel-raised); color:var(--muted); font-size:19px; }.control-button:hover { color:var(--text); }.mirror .script-display { transform: scaleX(-1); }.mirror .script-display::selection { background:transparent; }
.bottombar { display:flex; align-items:center; gap: 30px; min-height: 62px; border-top: 1px solid var(--line); }.metric { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }.metric-label { color:#697385; margin-right:2px; }.metric strong { min-width:46px; text-align:center; color:var(--text); font-size:12px; font-weight:600; }.stepper { background:transparent; color:var(--muted); font-size:18px; line-height:1; width:18px; }.stepper:hover { color:var(--accent); }.wide-metric { flex:1; }.wide-metric input { width:130px; accent-color:var(--accent); }.keyboard-hint { color:#5e6879; font-size:11px; margin-left:auto; }.keyboard-hint kbd { display:inline-grid; place-items:center; height:21px; min-width:21px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:10px; margin:0 3px 0 8px; }
.settings-drawer { position:fixed; inset:0; z-index:20; visibility:hidden; }.settings-drawer.open { visibility:visible; }.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:.25s ease; }.open .drawer-backdrop { opacity:1; }.drawer-content { position:absolute; top:0; right:0; bottom:0; width:min(370px, 92vw); background:#141923; border-left:1px solid var(--line); padding:30px; transform:translateX(100%); transition:.28s ease; }.open .drawer-content { transform:translateX(0); }.drawer-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:38px; }.setting-row { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); color:#d6dbe5; font-size:14px; cursor:pointer; }.setting-row input { position:absolute; opacity:0; pointer-events:none; }.toggle { width:38px; height:22px; border-radius:12px; background:#343c4a; position:relative; transition:.2s; }.toggle::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#a0a9b9; transition:.2s; }.setting-row input:checked + .toggle { background:var(--accent-strong); }.setting-row input:checked + .toggle::after { left:19px; background:#fff; }.drawer-note { color:var(--muted); font-size:12px; line-height:1.7; margin-top:28px; }
.warm-theme { --bg: #16130f; --panel:#1d1914; --panel-raised:#282117; --line:rgba(255,237,202,.12); --text:var(--warm-text); --muted:#b4a68e; }.warm-theme .stage { background:#181510; }.warm-theme .reading-fade-top { background:linear-gradient(#181510, transparent); }.warm-theme .reading-fade-bottom { background:linear-gradient(transparent, #181510); }.uppercase-text .script-display { text-transform:uppercase; }.no-guide .center-guide { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(167,243,107,0); } }
@media (max-width: 900px) { .app-shell { padding: 0 20px 16px; }.workspace { grid-template-columns:1fr; padding-top:22px; min-height:0; }.editor-panel, .stage { min-height: 480px; }.stage { min-height: 560px; }.bottombar { flex-wrap:wrap; gap:18px; padding:14px 0; }.keyboard-hint { width:100%; margin-left:0; }.wide-metric { flex:initial; } }
@media (max-width: 520px) { .topbar { height:70px; }.stage-hint { display:none; }.panel-heading { padding:21px 20px 16px; }.editor-footer { padding:12px 20px; } #script-input { padding:20px; }.script-display { font-size:25px; padding-left:8%; padding-right:8%; }.stage-toolbar { padding:19px 20px; }.progress-track { margin:0 20px; }.stage-controls { padding-bottom:22px; }.bottombar { gap:14px; }.metric-label { display:none; } }
@media (max-width: 900px) {
  .app-shell { height: auto; min-height: 100dvh; }
  .workspace { grid-template-rows: 340px 570px; flex: none; }
  .focus-mode .app-shell { height: 100dvh; min-height: 500px; }
  .focus-mode .workspace { grid-template-rows: minmax(0, 1fr); flex: 1; }
  .focus-mode .script-display { padding-left: 8%; padding-right: 8%; }
  .focus-mode .keyboard-hint { display: none; }
}