:root {
  --ink: #edf2ff;
  --muted: #8c9ab7;
  --subtle: #56627d;
  --bg: #0b1220;
  --panel: #101a2e;
  --panel-2: #121f36;
  --panel-3: #162641;
  --line: rgba(159, 181, 219, .14);
  --accent: #f8b860;
  --accent-strong: #ff9d3d;
  --cyan: #6dd7d0;
  --error: #ff8f8f;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: "Manrope", "Noto Sans TC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--ink); background: radial-gradient(circle at 75% -20%, #243b61 0, transparent 40%), var(--bg); font-family: var(--sans); }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
.app-shell { min-height: 100vh; }
.topbar { min-height: 78px; padding: 16px clamp(20px, 4vw, 58px); display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(9, 15, 27, .72); backdrop-filter: blur(18px); }
.brand-lockup, .top-actions, .status-left, .status-right, .file-tab, .editor-meta, .run-toolbar, .console-header, .footer-bar, .identity-chip, .teacher-note, .panel-kicker { display: flex; align-items: center; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(248, 184, 96, .55); border-radius: 12px 12px 12px 4px; color: var(--accent); background: rgba(248, 184, 96, .1); font: 700 19px Georgia, serif; margin-right: 11px; }
.eyebrow { margin: 0 0 3px; color: var(--accent); font: 500 10px var(--mono); letter-spacing: .16em; }
h1 { margin: 0; font-size: 18px; line-height: 1; letter-spacing: -.03em; } h1 span { color: #9aa9c7; font-weight: 500; }
.top-actions { gap: 10px; }
.ghost-button { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: rgba(255,255,255,.025); color: #aab7d0; font-size: 12px; transition: .2s; }
.ghost-button:hover { border-color: rgba(248,184,96,.5); color: var(--ink); background: rgba(248,184,96,.08); }
.ghost-button span { color: var(--accent); margin-right: 5px; }
.identity-chip { gap: 9px; padding: 5px 9px 5px 6px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.04); text-align: left; }
.identity-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #152139; background: var(--accent); font-weight: 800; font-size: 11px; }
.identity-copy { display: grid; gap: 2px; } .identity-copy strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .identity-copy small { color: var(--muted); font: 10px var(--mono); }
.chevron { color: var(--muted); font-size: 15px; margin-left: 4px; }
.workspace { width: min(1500px, calc(100% - 40px)); margin: 0 auto; padding: 23px 0 18px; }
.status-strip { min-height: 38px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; color: var(--muted); font-size: 11px; font-family: var(--mono); }
.status-left, .status-right { gap: 9px; } .status-right { gap: 12px; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--subtle); box-shadow: 0 0 0 4px rgba(86,98,125,.13); } .live-dot.ready { background: var(--cyan); box-shadow: 0 0 0 4px rgba(109,215,208,.13); }
.status-meta strong { color: #c8d3e8; font-weight: 500; } .status-divider { height: 14px; width: 1px; background: var(--line); }
.workbench { min-height: 710px; display: grid; grid-template-columns: minmax(275px, 32%) 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.2); }
.lesson-panel { padding: 31px clamp(24px, 3.6vw, 52px); border-right: 1px solid var(--line); background: linear-gradient(145deg, rgba(26,44,75,.7), rgba(14,24,42,.65)); }
.panel-kicker { gap: 8px; color: var(--accent); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; } .book-icon { font-size: 14px; }
.lesson-number { margin-top: 47px; color: rgba(248,184,96,.3); font: 700 clamp(54px, 7vw, 88px)/.8 var(--mono); letter-spacing: -.15em; }
.lesson-panel h2 { margin: 26px 0 13px; max-width: 350px; font-size: clamp(25px, 3vw, 40px); line-height: 1.14; letter-spacing: -.06em; }
.lesson-rule { width: 50px; height: 3px; margin: 20px 0 26px; border-radius: 4px; background: var(--accent); }
.markdown-body { color: #b5c1d8; font-size: 14px; line-height: 1.9; } .markdown-body p { margin: 0 0 12px; } .markdown-body strong { color: #e8eefb; } .markdown-body code { padding: 2px 5px; color: var(--accent); border-radius: 4px; background: rgba(0,0,0,.2); font-family: var(--mono); font-size: .9em; }
.example-card { margin-top: 25px; padding: 14px 16px; border: 1px solid rgba(109,215,208,.18); border-left: 3px solid var(--cyan); border-radius: 7px; background: rgba(109,215,208,.055); } .example-label { margin-bottom: 9px; color: var(--cyan); font: 500 10px var(--mono); letter-spacing: .12em; } .example-card pre { margin: 0; color: #b9e9e4; font: 12px/1.65 var(--mono); white-space: pre-wrap; }
.teacher-note { align-items: flex-start; gap: 10px; margin-top: 28px; color: var(--muted); } .teacher-note > span { color: var(--accent); } .teacher-note strong { color: #d3dced; font-size: 11px; } .teacher-note p { margin: 3px 0 0; font-size: 11px; line-height: 1.6; }
.coding-panel { min-width: 0; display: grid; grid-template-rows: 49px minmax(290px, 1fr) 56px minmax(190px, 31%); background: #0d1728; }
.editor-header, .console-header { justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(18,31,54,.8); } .file-tab { height: 100%; gap: 8px; border-bottom: 2px solid var(--accent); color: #e8edf7; font: 12px var(--mono); } .python-icon { padding: 2px 4px; border-radius: 3px; color: #101a2e; background: var(--accent); font: 700 9px var(--mono); } .saved-dot { width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--cyan); } .editor-meta { gap: 11px; color: var(--subtle); font: 10px var(--mono); } .meta-divider { width: 1px; height: 12px; background: var(--line); }
.editor-wrap { min-height: 0; display: flex; overflow: hidden; background: #0b1424; } .line-numbers { width: 59px; flex: 0 0 59px; padding: 19px 14px 19px 0; overflow: hidden; color: #43516d; background: rgba(9,16,29,.56); font: 13px/1.82 var(--mono); text-align: right; user-select: none; white-space: pre; } #codeEditor { width: 100%; height: 100%; min-height: 290px; padding: 19px 22px; resize: none; border: 0; outline: 0; color: #d8e3fa; background: transparent; caret-color: var(--accent); font: 13px/1.82 var(--mono); tab-size: 4; white-space: pre; overflow: auto; }
.run-toolbar { gap: 8px; padding: 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #101b2f; } .run-button, .stop-button, .reset-button { border: 1px solid transparent; border-radius: 7px; padding: 8px 11px; font-size: 12px; } .run-button { color: #111a28; background: var(--accent); font-weight: 800; } .run-button:hover { background: #ffd18d; } .run-button kbd { margin-left: 5px; padding: 2px 4px; border-radius: 3px; color: #6e4c22; background: rgba(255,255,255,.42); font: 9px var(--mono); } .stop-button { color: #ffb1a7; border-color: rgba(255,143,143,.2); background: rgba(255,143,143,.06); } .reset-button { color: #aab8d1; background: transparent; } .reset-button:hover { color: var(--ink); background: rgba(255,255,255,.06); } .autosave-label { margin-left: auto; color: var(--subtle); font: 10px var(--mono); } .autosave-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--cyan); }
.console-panel { min-height: 0; display: grid; grid-template-rows: 42px 1fr; background: #0a1321; } .console-header { padding-inline: 20px; color: #c9d5e9; font: 12px var(--mono); } .console-prompt { margin-right: 7px; color: var(--cyan); } .clear-console { border: 0; color: var(--subtle); background: transparent; font-size: 11px; } .clear-console:hover { color: var(--ink); } .console-output { padding: 14px 20px; overflow: auto; color: #b5c8e4; font: 12px/1.75 var(--mono); white-space: pre-wrap; } .console-placeholder { color: #4c5b76; } .console-line.error { color: var(--error); } .console-line.system { color: var(--subtle); } .console-line.input { color: var(--accent); } .console-line.success { color: var(--cyan); }
.footer-bar { justify-content: space-between; padding: 14px 3px 0; color: #53617b; font: 10px var(--mono); } .footer-bar span:nth-child(2) { color: #687692; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(4,8,15,.78); backdrop-filter: blur(10px); } .modal-backdrop[hidden] { display: none; } .modal-card { width: min(460px, 100%); padding: 32px; border: 1px solid rgba(159,181,219,.19); border-radius: 17px; background: linear-gradient(145deg, #172641, #0e182b); box-shadow: 0 30px 100px rgba(0,0,0,.5); } .modal-icon, .input-terminal-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 13px 13px 13px 4px; color: #172238; background: var(--accent); font-size: 22px; } .modal-icon.small { margin-bottom: 14px; } .modal-card h2 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.05em; } .modal-description, .compact-modal p { margin: 0 0 23px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.identity-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .identity-form label { display: grid; gap: 7px; color: #aebbd1; font-size: 11px; } .identity-form input, #runtimeInput { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--ink); background: rgba(4,10,20,.42); font-size: 13px; } .identity-form input:focus, #runtimeInput:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(248,184,96,.1); } .full-field { grid-column: 1 / -1; }
.primary-button { border: 0; border-radius: 8px; padding: 11px 14px; color: #121b2c; background: var(--accent); font-weight: 800; font-size: 12px; } .primary-button:hover { background: #ffd18d; } .primary-button span { margin-left: 6px; } .identity-form .primary-button { margin-top: 7px; }
.input-modal { width: min(550px, 100%); } .input-terminal-mark { color: var(--cyan); background: rgba(109,215,208,.12); font: 18px var(--mono); } .input-prompt { min-height: 22px; margin: 18px 0 10px; color: var(--accent); font: 13px var(--mono); white-space: pre-wrap; } #inputForm { display: flex; gap: 9px; } #inputForm .primary-button { flex: 0 0 auto; } .compact-modal { width: min(500px, 100%); } .modal-actions { display: flex; justify-content: flex-end; gap: 9px; } .compact-modal .ghost-button { padding: 10px 12px; }
.toast { position: fixed; right: 25px; bottom: 24px; z-index: 30; max-width: 360px; padding: 12px 15px; border: 1px solid rgba(109,215,208,.25); border-radius: 9px; color: #c3eee9; background: #102b35; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s; } .toast.show { opacity: 1; transform: translateY(0); }
body.capture-mode .footer-bar { display: none; } body.capture-mode .workspace { width: min(1500px, calc(100% - 24px)); padding-top: 12px; } body.capture-mode .workbench { min-height: calc(100vh - 136px); } body.capture-mode .lesson-panel { padding-top: 25px; } body.capture-mode .capture-only { display: block; }
body.presentation-mode { --mono: "DM Mono", ui-monospace, monospace; } body.presentation-mode .topbar { min-height: 94px; } body.presentation-mode .workbench { min-height: calc(100vh - 190px); } body.presentation-mode .lesson-panel h2 { font-size: clamp(30px, 3.5vw, 49px); } body.presentation-mode #codeEditor, body.presentation-mode .console-output { font-size: 17px; } body.presentation-mode .line-numbers { font-size: 17px; }
@media (max-width: 900px) { .topbar { align-items: flex-start; flex-direction: column; } .top-actions { width: 100%; flex-wrap: wrap; } .identity-chip { margin-left: auto; } .workbench { grid-template-columns: 1fr; } .lesson-panel { border-right: 0; border-bottom: 1px solid var(--line); } .lesson-number { margin-top: 25px; } .coding-panel { min-height: 680px; } }
@media (max-width: 560px) { .workspace { width: calc(100% - 20px); padding-top: 10px; } .status-strip { align-items: flex-start; flex-direction: column; gap: 8px; padding-inline: 3px; } .top-actions .ghost-button { flex: 1; } .identity-chip { width: 100%; margin-left: 0; } .footer-bar { gap: 9px; align-items: flex-start; flex-direction: column; } .lesson-panel, .coding-panel { padding-left: 0; padding-right: 0; } .lesson-panel { padding: 25px 22px; } .editor-header, .console-header, .run-toolbar { padding-inline: 12px; } #codeEditor { padding-inline: 14px; } .line-numbers { width: 43px; flex-basis: 43px; padding-right: 8px; } .run-button kbd { display: none; } .autosave-label { display: none; } .identity-form { grid-template-columns: 1fr; } .modal-actions { flex-direction: column-reverse; } .modal-actions button { width: 100%; } }