@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,700&display=swap");

:root {
  --ink: #13272a;
  --green: #1b8069;
  --green-dark: #0d5b4c;
  --lime: #d9f27d;
  --paper: #f3f2ea;
  --card: #fffef9;
  --warm: #e8e4d8;
  --muted: #6c7770;
  --line: #d5d8cc;
  --red: #a94a3e;
  font-family: "Manrope", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .64; }
.hidden { display: none !important; }

.shell { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 40px; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-sign { width: 36px; height: 36px; display: grid; place-items: center; background: var(--ink); color: var(--lime); border-radius: 50%; font: 500 22px/1 "DM Mono", monospace; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.4px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.top-actions { display: flex; align-items: center; gap: 22px; font-size: 12px; font-weight: 700; }
.api-state { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.api-state i { width: 8px; height: 8px; border-radius: 50%; background: #b6b9ae; }
.api-state.connected i { background: var(--green); box-shadow: 0 0 0 4px rgba(27,128,105,.12); }
.api-state.connected { color: var(--green-dark); }
.atlas-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

.hero { min-height: 292px; padding: 44px 7.8% 38px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 11px; color: var(--green-dark); font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .13em; }
.hero h1 { margin: 0; font: 700 clamp(38px,5vw,70px)/.94 "Playfair Display", Georgia, serif; letter-spacing: -.05em; }
.hero h1 em { color: var(--green); font-weight: 700; }
.hero-copy { max-width: 500px; margin: 20px 0 0; color: #50605c; font-size: 14px; line-height: 1.65; }
.hero-notation { min-width: 274px; padding: 25px 26px; border: 1px solid #bed3b5; background: #e4f2d4; transform: rotate(3.4deg); color: var(--green-dark); font: 500 19px "DM Mono", monospace; box-shadow: 9px 9px 0 rgba(19,39,42,.07); }
.hero-notation b { margin: 0 9px; color: var(--ink); }.hero-notation i { color: var(--red); }

.workspace { display: grid; grid-template-columns: 245px minmax(420px, 1fr) 345px; align-items: stretch; border-bottom: 1px solid var(--line); }
.control-panel { padding: 29px 22px; border-right: 1px solid var(--line); background: rgba(255,255,251,.37); }
.panel-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 28px; }.panel-heading p { margin: 2px 0 4px; color: var(--muted); font-size: 11px; }.panel-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.5px; }
.step-number { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--ink); border-radius: 50%; font: 500 10px "DM Mono", monospace; }
.control-panel label { display: block; margin: 16px 0 7px; color: var(--muted); font: 500 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: var(--card); outline: none; }
select { appearance: none; padding: 11px 33px 11px 11px; font-size: 12px; background-image: linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%); background-position: calc(100% - 15px) 15px,calc(100% - 10px) 15px; background-size: 5px 5px,5px 5px; background-repeat:no-repeat; }
select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(27,128,105,.11); }
.generate-button { width: 100%; margin-top: 23px; padding: 13px 12px; display: flex; justify-content: space-between; align-items: center; border: 0; background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 800; transition: transform .16s, background .16s; }.generate-button:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-1px); }.generate-button b { font-size: 18px; }
.helper-copy { min-height: 42px; margin: 13px 0 25px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.bank-status { margin: -10px 0 20px; padding: 10px; border: 1px solid #c9d9c1; background: #eef5e7; color: var(--green-dark); font-size: 10px; line-height: 1.45; }.bank-status strong { font: 600 13px "DM Mono",monospace; }.bank-status span { color:#5b6a62; }
.micro-stats { padding-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); gap: 8px; }.micro-stats div { min-width: 0; }.micro-stats strong, .micro-stats span { display:block; }.micro-stats strong { font: 500 17px "DM Mono",monospace; }.micro-stats span { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.2; }

.task-zone { min-height: 620px; padding: 29px 35px 40px; background: var(--card); }.task-placeholder { min-height: 480px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 6%; }.placeholder-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:17px; border:1px solid var(--green); border-radius:50%; color:var(--green); font-size:28px; }.task-placeholder h2 { margin: 0; font: 700 32px/1.12 "Playfair Display", Georgia,serif; letter-spacing: -.04em; }.task-placeholder > p:last-child { max-width: 360px; color: var(--muted); font-size: 13px; line-height:1.6; }
.task-meta { display:flex; align-items:center; gap:8px; flex-wrap: wrap; color:var(--muted); font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }.task-meta > span:first-child { color:var(--green-dark); }.task-meta b { padding-left:8px; border-left:1px solid var(--line); font-weight:500; }.difficulty { margin-left:auto; display:flex; align-items:center; gap:3px; }.difficulty i { display:block; width:5px; height:5px; border:1px solid var(--green); border-radius:50%; }.difficulty i.on { background:var(--green); }.difficulty small { margin-left:3px; font-size:9px; }
.task-card h2 { margin:15px 0 18px; font:700 31px/1.05 "Playfair Display",Georgia,serif; letter-spacing:-.035em; }.statement { margin:0; font-size:13px; line-height:1.72; }.skill-row { display:flex; flex-wrap:wrap; gap:6px; margin:21px 0; }.skill-row span { padding:5px 7px; background:#eff1e6; color:#50605c; font-size:10px; }
.format-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:23px; background:var(--line); border:1px solid var(--line); }.format-grid section { min-height:95px; padding:13px; background:#faf9f2; }.format-grid h3,.examples h3,.constraint-section h3 { margin:0 0 7px; color:var(--green-dark); font:500 10px "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }.format-grid p { margin:0; font-size:11px; line-height:1.5; }
.constraint-section { margin-top:21px; padding:13px; border:1px solid #cfdbca; background:#f1f6e9; }.constraint-section.missing { border-color:#dfc1b9; background:#fbf0ec; }.constraint-section.missing p { margin:0; color:var(--red); font-size:11px; line-height:1.5; }.constraints { margin:0; padding-left:17px; color:#50605c; font-size:11px; line-height:1.65; }.examples { margin-top:22px; }.example { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); background:#f7f7f0; }.example div { min-width:0; padding:11px; }.example div+div { border-left:1px solid var(--line); }.example span { color:var(--muted); font:500 9px "DM Mono",monospace; text-transform:uppercase; }.example pre { margin:7px 0 0; overflow:auto; font:11px/1.4 "DM Mono",monospace; white-space:pre-wrap; }
.reference-section { margin-top:22px; padding-top:17px; border-top:1px solid var(--line); }.reference-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }.reference-head h3 { margin:0; color:var(--green-dark); font:500 10px "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }.reference-head span { color:var(--muted); font-size:9px; }.reference-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }.reference-list a { min-width:0; padding:9px 10px; border:1px solid #d8ddd2; background:#fafaf4; color:var(--ink); text-decoration:none; transition:border-color .15s,transform .15s; }.reference-list a:hover { border-color:var(--green); transform:translateY(-1px); }.reference-list b,.reference-list span,.reference-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.reference-list b { color:var(--green-dark); font:500 8px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.07em; }.reference-list span { margin-top:4px; font-size:10px; font-weight:700; }.reference-list small { margin-top:3px; color:var(--muted); font-size:8px; }
.attempt-box { margin-top:25px; padding-top:18px; border-top:1px solid var(--line); }.attempt-box label { display:block; margin-bottom:8px; font-size:11px; font-weight:700; }.attempt-box textarea { padding:10px; resize:vertical; font-size:11px; line-height:1.5; }.outcomes { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }.outcome-button { padding:8px 10px; border:1px solid var(--line); border-radius:2px; background:transparent; color:var(--ink); font-size:10px; font-weight:700; }.outcome-button:hover:not(:disabled) { border-color:var(--green); color:var(--green-dark); }.outcome-button.solved { background:var(--lime); border-color:var(--lime); }

.coach-zone { display:flex; flex-direction:column; min-width:0; padding:29px 20px 19px; border-left:1px solid var(--line); background:#edf0e6; }.coach-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.coach-head h2 { margin:0; font-size:16px; letter-spacing:-.5px; }.coach-lock { padding:5px 6px; border:1px solid #b5c4ae; color:var(--green-dark); font:500 9px "DM Mono",monospace; white-space:nowrap; }.chat-empty { margin:auto 0; padding:22px 2px; color:var(--muted); font-size:12px; line-height:1.6; }.messages { flex:1; min-height:315px; max-height:610px; margin:20px -3px 14px 0; padding-right:4px; overflow-y:auto; }.message { max-width:94%; margin:0 0 12px; padding:9px 10px; border:1px solid #d4dacd; background:#f8f9f2; }.message.student { margin-left:auto; border-color:#c1d7c2; background:#e5f0dd; }.message.warning { border-left:3px solid var(--red); }.message.checkpoint { border-left:3px solid #d7ad43; }.message-role { display:block; margin-bottom:4px; color:var(--green-dark); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.07em; }.message.student .message-role { color:#536459; }.message p { margin:0; font-size:11px; line-height:1.55; }.message.pending p { color:var(--muted); }.chat-form { display:flex; gap:7px; align-items:flex-end; margin-top:auto; }.chat-form textarea { min-height:59px; padding:9px; resize:vertical; font-size:11px; line-height:1.45; background:#fffef9; }.chat-form button { width:38px; height:38px; border:0; background:var(--green-dark); color:var(--lime); font-size:20px; }.coach-footnote { margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }

.code-lab { padding:38px 7.8% 46px; border-bottom:1px solid var(--line); background:#16292c; color:#f5f3e9; }
.code-lab-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:25px; }
.code-lab-head .eyebrow { color:var(--lime); }
.code-lab-head h2 { margin:0; font:700 31px/1.08 "Playfair Display",Georgia,serif; letter-spacing:-.035em; }
.phase-badge { padding:7px 9px; border:1px solid #526464; color:#a9b8b4; font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.07em; }
.phase-badge.ready { border-color:#789b64; background:rgba(217,242,125,.08); color:var(--lime); }
.code-lock { min-height:135px; display:flex; align-items:center; gap:18px; padding:24px; border:1px dashed #536364; background:#1c3033; }
.code-lock > span { display:grid; place-items:center; flex:0 0 43px; height:43px; border:1px solid #667778; border-radius:50%; color:var(--lime); font-size:26px; }
.code-lock strong,.code-lock p { display:block; }.code-lock strong { font-size:14px; }.code-lock p { max-width:650px; margin:7px 0 0; color:#a9b8b4; font-size:11px; line-height:1.6; }
.code-workspace { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr); border:1px solid #526264; background:#0d1b1e; }
.editor-panel { min-width:0; border-right:1px solid #526264; }
.editor-toolbar { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid #38494b; background:#1e3235; color:#b9c6c2; font:500 10px "DM Mono",monospace; }
.editor-toolbar span { display:flex; align-items:center; gap:8px; }.editor-toolbar i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(217,242,125,.08); }.editor-toolbar b { color:#7e9290; font-weight:400; }
.code-editor { display:block; width:100%; min-height:470px; padding:20px; resize:vertical; border:0; border-radius:0; background:#0d1b1e; color:#e9eee9; caret-color:var(--lime); font:13px/1.65 "DM Mono",monospace; tab-size:4; }
.code-editor:focus { box-shadow:inset 0 0 0 1px #719681; border-color:transparent; }
.editor-status { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-top:1px solid #38494b; color:#829492; font:500 9px "DM Mono",monospace; }
.editor-status .saving { color:#d9c271; }.editor-status .saved { color:#9fbd82; }.editor-status .error { color:#dc9188; }
.judge-panel { min-width:0; padding:16px; background:#142629; }
.judge-title { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:13px; border-bottom:1px solid #38494b; }.judge-title span { font-size:12px; font-weight:800; }.judge-title b { color:#829492; font:400 8px "DM Mono",monospace; }
.judge-summary { min-height:90px; padding:15px 0; color:#aebbb8; font-size:10px; line-height:1.55; }
.judge-summary strong { display:block; margin-bottom:7px; color:#f0f3ea; font-size:12px; }.test-groups { display:flex; flex-wrap:wrap; gap:5px; }.test-groups span { padding:4px 6px; border:1px solid #445557; color:#aebbb8; font:500 8px "DM Mono",monospace; }
.prepare-button,.submit-button { width:100%; min-height:40px; border:0; font-size:10px; font-weight:800; }
.prepare-button { border:1px solid #617174; background:transparent; color:#d4ded9; }.prepare-button:hover:not(:disabled) { border-color:var(--lime); color:var(--lime); }
.submit-button { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding:0 12px; background:var(--lime); color:#14272a; }.submit-button:hover:not(:disabled) { background:#e7fa9f; }.submit-button:disabled { background:#425254; color:#82908f; }
.judge-result { margin-top:13px; padding:12px; border:1px solid #526264; font-size:10px; line-height:1.5; }.judge-result strong { display:block; margin-bottom:4px; font:600 15px "DM Mono",monospace; }.judge-result.ac { border-color:#698d5c; background:rgba(217,242,125,.07); color:#dff1bd; }.judge-result.fail { border-color:#815d58; background:rgba(169,74,62,.08); color:#e7b4ae; }.judge-result pre { max-height:170px; margin:8px 0 0; overflow:auto; white-space:pre-wrap; color:#e7b4ae; font:9px/1.45 "DM Mono",monospace; }
.submission-list { display:grid; gap:5px; margin-top:13px; }.submission-item { display:grid; grid-template-columns:43px 1fr auto; gap:7px; align-items:center; padding:8px; border:1px solid #38494b; color:#aab7b4; font-size:9px; }.submission-item b { color:#eab0a9; font:600 10px "DM Mono",monospace; }.submission-item b.ac { color:#cce99c; }.submission-item small { color:#748784; font:8px "DM Mono",monospace; }
.judge-note { margin:14px 0 0; color:#758886; font-size:8px; line-height:1.55; }

.history-section { display:grid; grid-template-columns:245px 1fr; padding:38px 7.8%; background:#e8e5d9; }.history-copy h2 { margin:0; font:700 27px/1.1 "Playfair Display",Georgia,serif; letter-spacing:-.04em; }.history-list { display:grid; gap:7px; }.history-item { display:grid; grid-template-columns:32px 1fr; align-items:center; min-height:46px; border-bottom:1px solid #cfd1c6; }.history-item span { color:var(--green-dark); font:500 10px "DM Mono",monospace; }.history-item p { margin:0; font-size:11px; }.history-empty { margin:0; align-self:center; max-width:420px; color:var(--muted); font-size:12px; line-height:1.6; }

@media (max-width: 1080px) { .workspace { grid-template-columns:215px minmax(390px,1fr); }.coach-zone { grid-column:1/-1; min-height:365px; border:0; border-top:1px solid var(--line); }.messages { min-height:190px; }.hero { padding-left:4%; padding-right:4%; }.history-section { grid-template-columns:200px 1fr; }.code-workspace { grid-template-columns:1fr; }.editor-panel { border-right:0; border-bottom:1px solid #526264; } }
@media (max-width: 700px) { .shell { width:100%; }.topbar { height:72px; padding:0 18px; }.atlas-link { display:none; }.api-state { font-size:10px; }.hero { min-height:auto; padding:42px 22px 34px; }.hero h1 { font-size:45px; }.hero-notation { display:none; }.workspace { display:block; }.control-panel { border:0; border-bottom:1px solid var(--line); padding:23px 22px; }.task-zone { min-height:auto; padding:25px 22px 30px; }.task-placeholder { min-height:280px; padding:25px 0; }.task-placeholder h2 { font-size:29px; }.coach-zone { min-height:420px; padding:25px 22px 18px; }.format-grid,.example,.reference-list { grid-template-columns:1fr; }.example div+div { border-left:0; border-top:1px solid var(--line); }.code-lab { padding:30px 22px 34px; }.code-lab-head { align-items:flex-start; flex-direction:column; }.code-lab-head h2 { font-size:27px; }.code-lock { padding:18px; align-items:flex-start; }.code-editor { min-height:390px; padding:15px; font-size:11px; }.judge-panel { padding:14px; }.history-section { grid-template-columns:1fr; gap:25px; padding:30px 22px; }.top-actions { gap:0; }.task-card h2 { font-size:28px; } }