Spaces:
Running
Running
| :root { | |
| --shell: oklch(0.985 0.004 255); | |
| --surface: oklch(1 0 0); | |
| --surface-subtle: oklch(0.96 0.01 255); | |
| --ink: oklch(0.2 0.035 255); | |
| --muted: oklch(0.44 0.03 255); | |
| --line: oklch(0.87 0.015 255); | |
| --navy: oklch(0.31 0.115 255); | |
| --navy-strong: oklch(0.23 0.09 255); | |
| --action: oklch(0.56 0.2 255); | |
| --action-hover: oklch(0.49 0.2 255); | |
| --action-soft: oklch(0.94 0.04 255); | |
| --help: oklch(0.75 0.16 76); | |
| --help-soft: oklch(0.95 0.05 78); | |
| --success: oklch(0.55 0.16 150); | |
| --success-soft: oklch(0.95 0.04 150); | |
| --danger: oklch(0.56 0.2 25); | |
| --danger-soft: oklch(0.95 0.04 25); | |
| --editor: oklch(0.18 0.035 258); | |
| --editor-raised: oklch(0.23 0.04 258); | |
| --editor-line: oklch(0.31 0.035 258); | |
| --editor-ink: oklch(0.94 0.012 255); | |
| --space-xs: .25rem; | |
| --space-sm: .5rem; | |
| --space-md: .75rem; | |
| --space-lg: 1rem; | |
| --space-xl: 1.5rem; | |
| --space-2xl: 2rem; | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 14px; | |
| --shadow-menu: 0 4px 8px oklch(0.18 0.03 255 / .12); | |
| --z-header: 20; | |
| --z-dialog: 40; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif; | |
| color: var(--ink); | |
| background: var(--shell); | |
| } | |
| * { box-sizing: border-box; } | |
| [hidden] { 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; } | |
| html, body { width: 100%; height: 100%; overflow: hidden; } | |
| body { min-height: 0; margin: 0; display: flex; flex-direction: column; background: var(--shell); color: var(--ink); } | |
| button, input, textarea, select { font: inherit; } | |
| button { cursor: pointer; } | |
| button:disabled { cursor: not-allowed; opacity: .48; } | |
| :focus-visible { | |
| outline: 3px solid var(--help); | |
| outline-offset: 2px; | |
| } | |
| .skip-link { | |
| position: fixed; | |
| top: -60px; | |
| left: var(--space-lg); | |
| z-index: 100; | |
| padding: var(--space-md) var(--space-lg); | |
| background: var(--surface); | |
| color: var(--navy); | |
| } | |
| .skip-link:focus { top: var(--space-lg); } | |
| .app-header { | |
| min-height: 60px; | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--space-lg); | |
| padding: var(--space-md) var(--space-xl); | |
| background: var(--navy); | |
| color: white; | |
| position: sticky; | |
| top: 0; | |
| z-index: var(--z-header); | |
| } | |
| .brand { display: flex; align-items: center; gap: var(--space-md); min-width: 0; } | |
| .brand-mark { | |
| width: 36px; | |
| height: 36px; | |
| display: grid; | |
| place-items: center; | |
| border-radius: var(--radius-sm); | |
| background: white; | |
| color: var(--navy); | |
| font-weight: 900; | |
| } | |
| .brand-copy strong { display: block; font-size: 1rem; } | |
| .brand-copy span { display: block; margin-top: 2px; color: oklch(0.86 0.035 255); font-size: .8rem; } | |
| .header-actions { display: flex; align-items: center; gap: var(--space-sm); } | |
| .connection-state { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| min-height: 36px; | |
| padding: 0 var(--space-md); | |
| border-radius: 999px; | |
| background: oklch(1 0 0 / .1); | |
| color: white; | |
| font-size: .875rem; | |
| font-weight: 700; | |
| } | |
| .status-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--line); } | |
| .status-dot.online, .status-dot.success { background: oklch(0.76 0.18 150); } | |
| .status-dot.running { background: oklch(0.76 0.15 255); } | |
| .status-dot.error { background: oklch(0.72 0.18 25); } | |
| .status-dot.help { background: var(--help); } | |
| .btn { | |
| min-height: 44px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-sm); | |
| padding: 0 var(--space-lg); | |
| border: 0; | |
| border-radius: var(--radius-md); | |
| background: var(--action); | |
| color: white; | |
| font-weight: 800; | |
| transition: background-color 160ms ease, transform 160ms ease; | |
| } | |
| .btn:hover { background: var(--action-hover); } | |
| .btn:active { transform: translateY(1px); } | |
| .btn.secondary { background: var(--surface-subtle); color: var(--navy); } | |
| .btn.secondary:hover { background: var(--action-soft); } | |
| .btn.stop { background: var(--danger); } | |
| .btn.stop:hover { background: oklch(0.49 0.2 25); } | |
| .btn.help { background: var(--help); color: oklch(0.25 0.08 70); } | |
| .btn.help.active { background: oklch(0.65 0.17 68); } | |
| .btn.compact { min-height: 36px; padding: 0 var(--space-md); font-size: .875rem; } | |
| .header-link { text-decoration:none; } | |
| .project-bar { min-height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-sm) var(--space-xl);border-bottom:1px solid var(--line);background:var(--surface); } | |
| .project-context,.project-actions { display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap; } | |
| .project-context label { color:var(--muted);font-size:.75rem;font-weight:800; } | |
| .project-context select,.project-context input { min-height:36px;max-width:280px;padding:0 var(--space-md);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-weight:700; } | |
| .submission-summary { padding:var(--space-sm) var(--space-md);border-radius:999px;background:var(--success-soft);color:oklch(.37 .12 150);font-size:.8rem;font-weight:800; } | |
| .student-layout { | |
| --reference-width: 280px; | |
| --console-width: 360px; | |
| min-height: 0; | |
| flex: 1; | |
| overflow: hidden; | |
| display: grid; | |
| grid-template-columns: minmax(220px, var(--reference-width)) 9px minmax(320px, 1fr) 9px minmax(260px, var(--console-width)); | |
| grid-template-areas: "reference reference-resizer editor console-resizer console"; | |
| } | |
| .panel { min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); } | |
| .reference-panel { grid-area: reference; display:grid;grid-template-rows:44px minmax(0,1fr); } | |
| .editor-panel { grid-area: editor; display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);background:var(--editor); } | |
| .console-panel { grid-area: console; display:grid;grid-template-rows:52px minmax(0,1fr); } | |
| .panel-resizer { position:relative;min-width:9px;min-height:0;background:var(--shell);cursor:col-resize;touch-action:none; } | |
| .panel-resizer::after { content:"";position:absolute;inset:0 auto 0 4px;width:1px;background:var(--line);transform:scaleX(1);transform-origin:left center;transition:background-color 160ms ease,transform 160ms ease; } | |
| .panel-resizer:hover::after,.panel-resizer:focus-visible::after,.panel-resizer.dragging::after { transform:scaleX(2);background:var(--action); } | |
| .panel-resizer:focus-visible { outline:3px solid var(--help);outline-offset:-3px; } | |
| .reference-resizer { grid-area:reference-resizer; } | |
| .console-resizer { grid-area:console-resizer; } | |
| body.panel-resizing { cursor:col-resize;user-select:none; } | |
| .editor-toolbar { display:flex;align-items:center;justify-content:flex-end;gap:var(--space-sm);flex:0 1 auto;flex-wrap:wrap;min-width:0; } | |
| .editor-toggle { min-height:32px;padding:0 var(--space-md);border:1px solid oklch(.42 .035 258);border-radius:var(--radius-sm);background:transparent;color:oklch(.82 .025 255);font-size:.78rem;font-weight:750; } | |
| .editor-toggle:hover,.editor-toggle[aria-pressed="true"] { border-color:oklch(.66 .12 255);background:oklch(.3 .065 258);color:white; } | |
| @media (min-width: 981px) { | |
| .student-layout.reference-hidden { grid-template-columns:minmax(320px,1fr) 9px minmax(260px,var(--console-width));grid-template-areas:"editor console-resizer console"; } | |
| .student-layout.console-hidden { grid-template-columns:minmax(220px,var(--reference-width)) 9px minmax(320px,1fr);grid-template-areas:"reference reference-resizer editor"; } | |
| .student-layout.reference-hidden.console-hidden { grid-template-columns:minmax(0,1fr);grid-template-areas:"editor"; } | |
| .student-layout.reference-hidden .reference-panel,.student-layout.reference-hidden .reference-resizer,.student-layout.console-hidden .console-panel,.student-layout.console-hidden .console-resizer { display:none; } | |
| } | |
| .panel-heading { | |
| min-height: 52px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--space-md); | |
| padding: 0 var(--space-lg); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .panel-heading h1 { margin: 0; font-size: 1.5rem; } | |
| .panel-heading h2 { margin: 0; font-size: 1.1875rem; } | |
| .panel-heading.dark { min-width:0;padding-block:6px;flex-wrap:wrap;border-color:var(--editor-line);background:var(--editor-raised);color:var(--editor-ink); } | |
| .side-tabs { height:44px;display:flex;border-bottom:1px solid var(--line); } | |
| .side-tab { min-width:0;flex:1;padding-inline:var(--space-xs);border:0;background:var(--surface);color:var(--muted);font-size:.76rem;font-weight:800; } | |
| .side-tab.active { color:var(--navy);box-shadow:inset 0 -3px 0 var(--action); } | |
| #filesView { min-height:0;display:grid;grid-template-rows:52px minmax(0,1fr) auto; } | |
| #syntaxView { min-height:0;display:grid;grid-template-rows:52px auto minmax(0,1fr); } | |
| #lessonView { min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr); } | |
| .lesson-guide-content { min-height:0;overflow:auto;padding:var(--space-lg); } | |
| .lesson-guide-block { padding:0 0 var(--space-lg);margin:0 0 var(--space-lg);border-bottom:1px solid var(--line); } | |
| .lesson-guide-block h2,.lesson-help-note h2 { margin:0 0 var(--space-sm);font-size:.9375rem;line-height:1.35; } | |
| .lesson-guide-block p,.lesson-help-note p { margin:0;color:var(--muted);font-size:.875rem;line-height:1.55; } | |
| .lesson-guide-block ul,.lesson-guide-block ol,.lesson-details ul { display:grid;gap:.45rem;margin:0;padding-inline-start:1.25rem;color:var(--ink);font-size:.83rem;line-height:1.5; } | |
| .lesson-timeline { gap:.65rem; } | |
| .lesson-timeline strong { color:var(--navy); } | |
| .lesson-guide-block li::marker,.lesson-details li::marker { color:var(--action);font-weight:800; } | |
| .lesson-source-link { display:inline-flex;min-height:44px;align-items:center;color:var(--action);font-size:.84rem;font-weight:800;text-decoration-thickness:1px;text-underline-offset:3px; } | |
| .lesson-source-link:focus-visible { outline:2px solid var(--action);outline-offset:3px;border-radius:2px; } | |
| .lesson-target { padding:var(--space-md);border:0;border-radius:var(--radius-md);background:var(--action-soft); } | |
| .lesson-ai-note { padding:var(--space-md);border:0;border-radius:var(--radius-md);background:var(--help-soft); } | |
| .lesson-details { margin:0 0 var(--space-lg);border-bottom:1px solid var(--line); } | |
| .lesson-details summary { min-height:44px;display:flex;align-items:center;color:var(--navy);font-size:.84rem;font-weight:800;cursor:pointer; } | |
| .lesson-details ul { padding:0 0 var(--space-lg) 1.25rem; } | |
| .lesson-help-note { padding:var(--space-md) 0 0; } | |
| .file-list { min-height:0;overflow:auto;padding:var(--space-sm); } | |
| .file-row { display:flex;align-items:center;border-radius:var(--radius-sm); } | |
| .file-row:hover { background:var(--surface-subtle); }.file-row.selected{background:var(--action-soft);color:var(--navy)} | |
| .file-row>button:first-child { min-width:0;min-height:40px;flex:1;padding:0 var(--space-md);border:0;background:transparent;color:inherit;text-align:left;font:650 .82rem/1.2 "SFMono-Regular",Consolas,monospace;overflow:hidden;text-overflow:ellipsis; } | |
| .file-remove { width:36px;min-height:36px;border:0;background:transparent;color:var(--muted);font-size:1.2rem; }.file-remove:hover{color:var(--danger)} | |
| .side-note { margin:0;padding:var(--space-lg);border-top:1px solid var(--line);color:var(--muted);font-size:.75rem;line-height:1.5; } | |
| .search-wrap { padding: var(--space-lg); border-bottom: 1px solid var(--line); } | |
| .field-label { display: block; margin-bottom: var(--space-sm); color: var(--muted); font-size: .8125rem; font-weight: 750; } | |
| .text-field, .stdin-field { | |
| width: 100%; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| background: var(--surface); | |
| color: var(--ink); | |
| } | |
| .text-field { min-height: 44px; padding: 0 var(--space-md); } | |
| .secondary-label { margin-top: var(--space-lg); } | |
| .text-field::placeholder, .stdin-field::placeholder { color: oklch(0.46 0.025 255); opacity: 1; } | |
| .text-field:focus, .stdin-field:focus { border-color: var(--action); } | |
| .chip-row { display: flex; gap: var(--space-sm); padding-top: var(--space-md); overflow-x: auto; } | |
| .chip { | |
| min-height: 34px; | |
| flex: none; | |
| padding: 0 var(--space-md); | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: var(--surface); | |
| color: var(--muted); | |
| font-size: .8125rem; | |
| font-weight: 750; | |
| } | |
| .chip[aria-pressed="true"] { border-color: var(--action); background: var(--action-soft); color: var(--navy); } | |
| .snippet-list { min-height:0;overflow:auto;padding:var(--space-sm) var(--space-lg) var(--space-xl); } | |
| .snippet-empty { padding: var(--space-xl) 0; color: var(--muted); line-height: 1.55; } | |
| .snippet-item { padding: var(--space-lg) 0; border-bottom: 1px solid var(--line); } | |
| .snippet-item:last-child { border-bottom: 0; } | |
| .snippet-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); } | |
| .snippet-title strong { font-size: .9375rem; } | |
| .snippet-title span { color: var(--muted); font-size: .75rem; } | |
| .snippet-item p { margin: var(--space-sm) 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; } | |
| .snippet-item pre { | |
| margin: var(--space-sm) 0; | |
| padding: var(--space-md); | |
| overflow: auto; | |
| border-radius: var(--radius-sm); | |
| background: var(--editor); | |
| color: var(--editor-ink); | |
| font: 500 .78rem/1.55 "SFMono-Regular", Consolas, monospace; | |
| white-space: pre-wrap; | |
| } | |
| .copy-button { | |
| min-height: 36px; | |
| padding: 0 var(--space-md); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--navy); | |
| font-size: .8rem; | |
| font-weight: 800; | |
| } | |
| .copy-button:hover { background: var(--action-soft); } | |
| .checkpoint-action { border-color: oklch(0.72 0.1 150); color: oklch(0.38 0.13 150); } | |
| .checkpoint-action:hover { background: var(--success-soft); } | |
| .file-name { min-width:0;flex:1 1 100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 .875rem/1 "SFMono-Regular",Consolas,monospace;color:oklch(.82 .025 255); } | |
| .editor-host { min-width:0;min-height:0; } | |
| .CodeMirror { height: 100%; font: 500 1rem/1.7 "SFMono-Regular", Consolas, monospace; background: var(--editor); } | |
| .CodeMirror-gutters { background: var(--editor); border-right: 1px solid var(--editor-line); } | |
| .console-body { min-height:0;display:grid;grid-template-rows:auto minmax(120px,1fr) auto auto; } | |
| .console-tabs { min-height:38px;display:flex;align-items:stretch;gap:2px;padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--line);background:var(--surface); } | |
| .console-tabs[hidden],#pygameFrame[hidden] { display:none; } | |
| .console-tab { min-width:88px;padding:0 var(--space-md);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:.78rem;font-weight:800; } | |
| .console-tab:hover { background:var(--surface-subtle);color:var(--navy); } | |
| .console-tab.active { background:var(--action-soft);color:var(--navy); } | |
| .console-tab:focus-visible { outline:2px solid var(--action);outline-offset:1px; } | |
| .console-stream { position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;background:var(--editor); } | |
| .field-help { margin: var(--space-sm) 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; } | |
| .console-output { | |
| grid-area:1 / 1; | |
| min-width:0; | |
| min-height:0; | |
| margin: 0; | |
| padding: var(--space-lg); | |
| overflow: auto; | |
| background: var(--editor); | |
| color: var(--editor-ink); | |
| font: 500 .875rem/1.65 "SFMono-Regular", Consolas, monospace; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .console-stream[data-view="pygame"] .console-output { visibility:hidden; } | |
| .console-stream[data-view="pygame"] .console-output[hidden] { display:none; } | |
| #pygameFrame { display:block;grid-area:1 / 1;z-index:1;width:100%;height:100%;min-width:0;min-height:0;border:0;background:var(--editor);visibility:hidden; } | |
| .console-stream[data-view="pygame"] #pygameFrame { visibility:visible; } | |
| .console-input-row { grid-area:2 / 1; } | |
| .console-input-row { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-top:1px solid var(--editor-line);background:var(--editor-raised);color:var(--editor-ink); } | |
| .console-input-row>span { color:oklch(.76 .15 150);font:800 1.1rem/1 monospace; } | |
| .console-input-row input { min-width:0;height:38px;padding:0 var(--space-md);border:1px solid var(--editor-line);border-radius:var(--radius-sm);background:var(--editor);color:var(--editor-ink);font:500 .875rem/1.4 "SFMono-Regular",Consolas,monospace; } | |
| .console-input-row input::placeholder { color:oklch(.7 .02 255); } | |
| .console-input-row input:focus { border-color:var(--action);outline:2px solid var(--action);outline-offset:1px; } | |
| .console-hint { margin:0;padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.75rem;line-height:1.45; } | |
| .console-status { min-height: 48px; display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-lg); border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; } | |
| .mobile-tabs { display: none; } | |
| dialog { | |
| width: min(440px, calc(100vw - 32px)); | |
| border: 0; | |
| border-radius: var(--radius-lg); | |
| padding: 0; | |
| color: var(--ink); | |
| box-shadow: var(--shadow-menu); | |
| } | |
| dialog::backdrop { background: oklch(0.16 0.04 255 / .72); } | |
| .dialog-content { padding: var(--space-2xl); } | |
| .dialog-content h1, .dialog-content h2 { margin: 0 0 var(--space-sm); font-size: 1.5rem; } | |
| .dialog-content > p { margin: 0 0 var(--space-xl); color: var(--muted); line-height: 1.55; } | |
| .form-stack { display: grid; gap: var(--space-lg); } | |
| .form-error { min-height: 1.25rem; margin: 0; color: var(--danger); font-size: .875rem; } | |
| .teacher-layout { min-height:0;flex:1;overflow:hidden;display:grid;grid-template-columns:minmax(360px,43%) minmax(480px,57%); } | |
| .roster-panel { min-height:0;display:grid;grid-template-rows:52px auto auto 42px minmax(0,1fr);overflow:hidden;border-right:1px solid var(--line);background:var(--surface); } | |
| .teacher-detail { min-width:0;min-height:0;overflow:hidden;background:var(--shell); } | |
| .roster-add { display:flex;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--line);background:var(--surface-subtle); } | |
| .roster-add .text-field { min-width:0;min-height:36px; } | |
| .roster-add .btn { flex:none; } | |
| .filter-bar { display: flex; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--line); overflow-x: auto; } | |
| .roster-list { min-height:0;overflow:auto; } | |
| .roster-header, .student-row { | |
| display: grid; | |
| grid-template-columns: minmax(110px, 1.15fr) 80px minmax(112px, 1fr) 82px; | |
| gap: var(--space-md); | |
| align-items: center; | |
| padding: var(--space-md) var(--space-lg); | |
| } | |
| .roster-header { min-height: 42px; color: var(--muted); font-size: .75rem; font-weight: 800; border-bottom: 1px solid var(--line); } | |
| .student-row { width: 100%; min-height: 58px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; } | |
| .student-row:hover { background: var(--surface-subtle); } | |
| .student-row.selected { background: var(--action-soft); box-shadow: inset 4px 0 0 var(--action); } | |
| .student-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; } | |
| .status-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8rem; } | |
| .time-label { color: var(--muted); font: 500 .72rem/1.3 "SFMono-Regular", Consolas, monospace; white-space:nowrap; } | |
| .help-label { color: oklch(0.45 0.13 70); font-size: .78rem; font-weight: 850; } | |
| .empty-roster { padding: var(--space-2xl); color: var(--muted); line-height: 1.55; } | |
| .detail-empty { height:100%;display:grid;place-items:center;padding:var(--space-2xl);color:var(--muted);text-align:center; } | |
| .detail-view { height:100%;display:grid;grid-template-rows:auto minmax(0,1fr); } | |
| .detail-header { min-height: 76px; display: flex; flex-wrap:wrap;align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); background: var(--surface); border-bottom: 1px solid var(--line); } | |
| .detail-header>div:first-child { min-width:0;flex:1 1 380px; } | |
| .detail-header h1 { margin: 0; font-size: 1.3rem; } | |
| .detail-meta { margin-top: 4px; color: var(--muted); font-size: .8rem; } | |
| .detail-actions { display: flex;flex:0 1 auto;flex-wrap:wrap;gap: var(--space-sm); } | |
| .detail-actions .copy-button { white-space:nowrap; } | |
| .detail-split { min-height: 0; display: grid; grid-template-rows: minmax(240px, 1.15fr) minmax(180px, .85fr); } | |
| .teacher-project { min-height:0;display:grid;grid-template-rows:38px 42px minmax(0,1fr); } | |
| .teacher-version-tabs { display:flex;align-items:center;gap:var(--space-sm);padding:0 var(--space-lg);border-bottom:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.78rem; } | |
| .teacher-version-tabs button { margin-left:auto;white-space:nowrap; } | |
| .teacher-version-tabs strong { color:var(--navy); } | |
| .detail-actions [aria-pressed="true"] { border-color:var(--action);background:var(--action-soft);color:var(--navy); } | |
| .teacher-file-tabs { display:flex;gap:2px;padding:var(--space-xs) var(--space-md);overflow-x:auto;background:var(--editor-raised);border-bottom:1px solid var(--editor-line); } | |
| .teacher-file-tab { flex:none;min-height:32px;padding:0 var(--space-md);border:0;border-radius:var(--radius-sm);background:transparent;color:oklch(.72 .02 255);font:650 .78rem/1 "SFMono-Regular",Consolas,monospace; } | |
| .teacher-file-tab:hover,.teacher-file-tab.active { background:var(--editor-line);color:white; } | |
| .danger-action { border-color:oklch(.82 .08 25);color:var(--danger); } | |
| .danger-action:hover { background:var(--danger-soft); } | |
| .progress-list { display:grid;gap:var(--space-sm);max-height:50vh;overflow:auto;margin-bottom:var(--space-lg); } | |
| .progress-item { display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-md);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);text-align:left; } | |
| .progress-item:hover{background:var(--action-soft)}.progress-item span{color:var(--muted);font-size:.75rem}.publish-actions{display:flex;justify-content:flex-end;gap:var(--space-sm)} | |
| .read-only-pane { min-height: 0; display: grid; grid-template-rows: 40px minmax(0, 1fr); } | |
| .read-only-pane + .read-only-pane { border-top: 1px solid var(--editor-line); } | |
| .pane-label { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-lg); background: var(--editor-raised); color: oklch(0.82 0.025 255); font-size: .8rem; font-weight: 800; } | |
| .code-readonly, .output-readonly { margin: 0; padding: var(--space-lg) var(--space-xl); overflow: auto; background: var(--editor); color: var(--editor-ink); font: 500 .875rem/1.65 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; tab-size: 4; } | |
| .toast { position: fixed; left: 50%; bottom: var(--space-xl); z-index: 60; transform: translateX(-50%) translateY(16px); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--navy-strong); color: white; font-weight: 750; opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; } | |
| .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } | |
| @media (max-width: 980px) { | |
| html.student-page { height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto; } | |
| html.student-page body { height:auto;min-height:100vh;min-height:100dvh;overflow:visible;padding-bottom:env(safe-area-inset-bottom); } | |
| .student-page .project-bar { align-items:stretch;flex-direction:column;padding:var(--space-md); } | |
| .student-page .project-actions { overflow:visible;flex-wrap:wrap;align-items:stretch;justify-content:flex-start; } | |
| .student-page .project-actions>* { flex:0 1 auto;min-width:0;max-width:100%; } | |
| .editor-toggle { display:none; } | |
| .panel-resizer { display:none; } | |
| .student-layout { display:block;height:min(68dvh,700px);min-height:360px;flex:none; } | |
| .mobile-tabs { display:flex;flex:none;background:var(--surface);border-bottom:1px solid var(--line); } | |
| .mobile-tab { flex: 1; min-height: 46px; border: 0; background: var(--surface); color: var(--muted); font-weight: 800; } | |
| .mobile-tab[aria-selected="true"] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--action); } | |
| .student-layout .panel { display:none;height:100%;min-height:0; } | |
| .student-layout .panel.mobile-active { display:grid; } | |
| .teacher-layout { grid-template-columns: minmax(320px, 42%) minmax(420px, 58%); } | |
| } | |
| @media (max-width: 720px) { | |
| .student-page .app-header { min-height:0;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-sm) var(--space-md); } | |
| .student-page .brand { width:100%;min-width:0; } | |
| .student-page .brand-copy { min-width:0; } | |
| .student-page .brand-copy span { display:block;max-width:calc(100vw - 72px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } | |
| .student-page .header-actions { width:100%;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xs); } | |
| .student-page .connection-state { min-height:44px;padding-inline:var(--space-sm); } | |
| .student-page .header-actions .btn { min-height:44px;padding-inline:.6rem; } | |
| .student-page .project-context { display:grid;width:100%;grid-template-columns:max-content minmax(0,1fr);align-items:center; } | |
| .student-page .project-context select,.student-page .project-context input { width:100%;min-width:0;max-width:none; } | |
| .student-page .project-actions { display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch; } | |
| .student-page .project-actions>* { width:100%;min-width:0;min-height:44px;padding:.4rem .5rem;line-height:1.3;white-space:normal;overflow-wrap:anywhere; } | |
| .student-page .student-layout { height:min(68dvh,680px);min-height:360px; } | |
| .mobile-tab { min-height:48px; } | |
| .student-page dialog { max-height:calc(100dvh - 32px);overflow:auto; } | |
| .student-page .dialog-content { padding:var(--space-xl); } | |
| .student-page .progress-item { align-items:flex-start;flex-direction:column; } | |
| .student-page .progress-item span { min-width:0;overflow-wrap:anywhere; } | |
| .student-page .console-status { min-height:56px;flex-wrap:wrap;row-gap:4px;padding-block:var(--space-sm); } | |
| .student-page .toast { left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));max-width:calc(100vw - 24px);text-align:center;overflow-wrap:anywhere; } | |
| .teacher-layout { display: block; } | |
| .roster-panel { height:100%;min-height:0;border-right:0; } | |
| .teacher-detail { position: fixed; inset: 60px 0 0; z-index: 18; display: none; } | |
| .teacher-detail.mobile-open { display: block; } | |
| .roster-header, .student-row { grid-template-columns: minmax(120px, 1fr) 90px 70px; } | |
| .roster-header > :nth-child(3), .student-row > :nth-child(3) { display: none; } | |
| .detail-header { padding-inline: var(--space-lg); } | |
| .roster-add { padding-inline:var(--space-md); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { transition-duration: .01ms ; animation-duration: .01ms ; } | |
| } | |