:root { --ink:#153f34; --deep:#0d3028; --cream:#f6f2e9; --paper:#fffdf8; --line:#e4ddcf; --lime:#c8f15a; --orange:#f3763b; --muted:#72827c; --mono:"Space Mono",monospace; --display:"Space Grotesk",sans-serif; --body:"DM Sans",sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:#172820; background:var(--cream); font-family:var(--body); } button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.challenge-topbar { display:flex; height:68px; align-items:center; gap:36px; padding:0 5vw; color:white; background:var(--deep); }.brand { display:flex; gap:8px; align-items:center; font:700 18px var(--display); }.brand>span:last-child { color:var(--lime); }.brand-mark { display:grid; gap:2px; width:20px; }.brand-mark i { display:block; height:3px; border-radius:2px; background:var(--lime); }.brand-mark i:nth-child(2){width:14px}.brand-mark i:nth-child(3){width:8px}
.challenge-progress { display:flex; max-width:370px; flex:1; gap:13px; align-items:center; margin-left:auto; color:#b5c9c1; font:10px var(--mono); }.challenge-progress div { height:4px; flex:1; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.16); }.challenge-progress i { display:block; width:0; height:100%; background:var(--lime); transition:.3s; }.exit-link { color:#b5c9c1; font-size:11px; font-weight:700; }
main { max-width:1380px; margin:auto; padding:42px 5vw 54px; }.kicker { color:var(--orange); font:700 10px var(--mono); letter-spacing:1.5px; }.challenge-hero { display:flex; justify-content:space-between; gap:30px; align-items:end; }.challenge-hero h1 { margin:13px 0; color:var(--ink); font:700 clamp(43px,6vw,70px)/.98 var(--display); letter-spacing:-4px; }.challenge-hero em { color:var(--orange); font-style:normal; }.challenge-hero p { max-width:680px; color:var(--muted); font-size:15px; line-height:1.65; }.hero-status { min-width:230px; padding:15px; border:1px solid var(--line); background:var(--paper); }.hero-status span,.hero-status strong,.hero-status small { display:block; }.hero-status span { color:var(--orange); font:700 9px var(--mono); }.hero-status strong { margin:7px 0; color:var(--ink); font-family:var(--display); }.hero-status small { color:#8d9894; font-size:10px; }
.workspace { display:grid; min-height:510px; grid-template-columns:310px 1fr; margin-top:30px; box-shadow:0 14px 40px rgba(34,51,45,.08); }.brief-panel { padding:22px; border:1px solid var(--line); background:var(--paper); }.brief-panel h2 { margin:8px 0; color:var(--ink); font:700 23px var(--display); }.brief-panel p { color:var(--muted); font-size:12px; line-height:1.55; }.brief-panel code { color:var(--orange); font:11px var(--mono); }.step-list { margin-top:20px; }.step-list article { display:flex; gap:10px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }.step-list i { color:#9ba49f; font:10px var(--mono); font-style:normal; }.step-list div { flex:1; }.step-list b,.step-list code,.step-list small { display:block; }.step-list b { margin-bottom:4px; font-size:11px; }.step-list small { color:#8b9691; font-size:10px; }.step-list span { color:#abb3ae; }.step-list article.active span { color:var(--orange); }.step-list article.done span { color:#78a42a; }.solution-button { width:100%; margin-top:17px; padding:11px; border:1px solid #bed275; color:#547225; background:#f3f9dc; font-size:11px; font-weight:700; }.solution-button span { float:right; font-size:17px; line-height:11px; }
.work-panel { display:flex; min-width:0; flex-direction:column; overflow:hidden; background:var(--deep); }.tab-bar { display:flex; height:45px; align-items:end; background:#09261f; }.tab { height:100%; padding:0 20px; border:0; color:#88a399; background:transparent; font:11px var(--mono); }.tab.active { color:var(--lime); background:var(--deep); }.tab i { display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%; background:var(--orange); opacity:0; }.tab i.visible { opacity:1; }
.terminal-pane { display:none; min-height:0; flex:1; flex-direction:column; }.terminal-pane.active { display:flex; }.terminal-output { flex:1; overflow-y:auto; padding:22px; color:#d7e5df; font:12px/1.75 var(--mono); }.terminal-output p { margin:0 0 3px; white-space:pre-wrap; }.terminal-output .comment { color:#7b9d92; }.terminal-output b { color:var(--lime); font-weight:400; }.terminal-form { display:flex; gap:8px; align-items:center; padding:15px 20px; border-top:1px solid rgba(255,255,255,.09); color:white; font:12px var(--mono); }.terminal-form label { color:white; }.terminal-form span { color:var(--lime); }.terminal-form input { min-width:80px; flex:1; border:0; outline:0; color:white; background:transparent; caret-color:var(--lime); font:12px var(--mono); }.terminal-form input::placeholder { color:#739087; }.terminal-form button { border:0; color:var(--lime); background:transparent; }
.editor-pane { display:none; min-height:0; flex:1; color:#d7e5df; background:#123b32; }.editor-pane.active { display:block; }.editor-pane header { display:flex; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); color:#a7bbb4; font:11px var(--mono); }.editor-pane small { color:#eea07d; }.editor-placeholder { padding:65px 30px; text-align:center; color:#92aaa1; }.editor-placeholder p { font-size:12px; }.editor-placeholder code { color:var(--lime); }.conflict-editor { display:none; max-width:700px; padding:28px; }.conflict-editor.visible { display:block; }.conflict-editor p { color:#afc3bc; font-size:13px; }.conflict-editor button { display:block; width:100%; margin-top:12px; padding:14px; border:1px solid rgba(255,255,255,.14); border-radius:4px; color:#d7e5df; background:rgba(255,255,255,.04); text-align:left; }.conflict-editor button:hover { border-color:var(--lime); }.conflict-editor button.selected { border-color:var(--lime); background:rgba(200,241,90,.1); }.conflict-editor span,.conflict-editor code { display:block; }.conflict-editor span { margin-bottom:7px; color:var(--lime); font:700 9px var(--mono); }.conflict-editor code { color:#d7e5df; font:11px/1.7 var(--mono); }
.solution-drawer { position:fixed; inset:0 0 0 auto; z-index:20; width:min(410px,100%); padding:30px; color:#dce8e3; background:var(--deep); box-shadow:-15px 0 40px rgba(10,30,25,.2); transform:translateX(100%); transition:.25s; }.solution-drawer.visible { transform:translateX(0); }.solution-drawer button { float:right; border:0; color:white; background:transparent; font-size:28px; }.solution-drawer h2 { margin:10px 0 24px; color:white; font:700 28px var(--display); }.solution-drawer ol { padding-left:20px; }.solution-drawer li { margin:16px 0; padding-left:4px; color:#adc1ba; font-size:13px; line-height:1.6; }.solution-drawer code { color:var(--lime); font:11px var(--mono); }
.success-modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; visibility:hidden; background:rgba(7,25,20,.7); opacity:0; transition:.25s; }.success-modal.visible { visibility:visible; opacity:1; }.success-modal div { max-width:430px; padding:35px; border-radius:8px; background:var(--paper); text-align:center; }.success-modal span { display:grid; width:55px; height:55px; margin:0 auto 16px; place-items:center; border-radius:50%; color:var(--ink); background:var(--lime); font-size:28px; }.success-modal small { color:var(--orange); font:700 10px var(--mono); letter-spacing:1px; }.success-modal h2 { margin:10px 0; color:var(--ink); font:700 26px var(--display); }.success-modal p { color:var(--muted); font-size:13px; }.success-modal a { display:inline-block; margin-top:12px; padding:12px 16px; border-radius:4px; color:white; background:var(--ink); font-size:12px; font-weight:700; }
@media(max-width:760px){.challenge-topbar{padding:0 18px}.challenge-progress{display:none}.exit-link{margin-left:auto}.challenge-hero{display:block}.hero-status{display:none}main{padding:30px 18px}.workspace{grid-template-columns:1fr}.brief-panel{order:2}.work-panel{min-height:430px}.challenge-hero h1{font-size:47px}.solution-drawer{padding:24px}}