:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#e7ebe1;background:#0c242b;--muted:#a4b6ae;--lime:#d5ed9c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#1c4145,transparent 60%),#0c242b}main{max-width:1380px;margin:auto;padding:25px 48px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #54716f;background:#18383e;border-radius:8px;padding:11px 14px;transition:background .15s,transform .15s}button:hover{background:#2a4f50}button:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:disabled{opacity:.55;cursor:wait}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #365356;padding-bottom:20px;gap:20px}header span{font-size:10px;letter-spacing:2px;color:var(--muted)}header button{font-size:12px;background:transparent}.brand{color:var(--lime);text-decoration:none;font-size:18px;font-weight:bold;letter-spacing:3px}.intro{display:flex;align-items:center;justify-content:space-between;margin:35px 0 28px;gap:20px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--lime);font-weight:bold}h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(36px,4.3vw,62px);margin:10px 0}h1 em{color:#d1dfa9;font-weight:normal}.intro p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:0}.progress{text-align:right;display:grid;gap:5px;white-space:nowrap}.progress strong{font:32px Georgia}.progress span{font-size:11px;color:var(--muted)}nav{display:flex;gap:7px;margin-bottom:20px}nav button{font-size:12px;background:transparent;padding:10px 17px;border-color:#3a5759}nav button.active{background:#d5ed9c;color:#183137;border-color:#d5ed9c}nav button.won:after{content:' ✓';color:#c5dea4}nav button.active.won:after{color:#183137}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid #42625f;border-radius:16px;overflow:hidden;background:#133239}.view{min-width:0;background:#0a2127;display:flex;flex-direction:column}.stage-top,.stage-bottom{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:10px;font-size:10px;letter-spacing:1.2px;color:#bed0bd}.stage-top{border-bottom:1px solid #35504c}.live{color:#b7d98f;font-size:9px}canvas{display:block;width:100%;height:auto;aspect-ratio:900/650;background:#143339;min-height:0}.stage-bottom{border-top:1px solid #35504c;color:#d8e5bf}.stage-bottom span:last-child{color:var(--lime);font-size:9px}#result{padding:14px 20px;line-height:1.5;color:#b5c8bc;font-size:13px;min-height:68px;background:#102c32;margin-top:auto}#result.success{color:#ddf4b3}aside{padding:24px;border-left:1px solid #42625f;background:linear-gradient(145deg,#1a3c42,#143138)}h2{font:27px Georgia;margin:10px 0 12px}.control-heading>p:last-child{color:var(--muted);font-size:12px;line-height:1.6;min-height:39px}.tabs{display:flex;gap:6px;margin:20px 0}.tabs button{flex:1;font-size:12px}.tabs .selected{color:#172d33;background:#d3e5bd;border-color:#d3e5bd}fieldset{border:0;padding:0;margin:22px 0}legend{font-size:10px;letter-spacing:1px;color:#c3d1c0;margin-bottom:12px;width:100%}legend span{float:right;color:#819f98;font-size:9px;letter-spacing:0}.pigments{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.pigments button{height:40px;background:var(--swatch);border:3px solid transparent;position:relative}.pigments button.selected{border-color:white;box-shadow:0 0 0 2px #a8c393}.pigments button.selected:after{content:'✓';color:white;text-shadow:0 1px 3px black}.options{display:flex;gap:6px}.options button{flex:1;padding:10px 3px;font-size:11px}.options button.selected{background:#37594f;border-color:#c8dbaf;color:#edffd2}.actions{display:flex;gap:8px;margin-top:26px}.primary{background:var(--lime);color:#173339;border:0;font-weight:bold;flex:1;padding:15px}.primary:hover{background:#e5f7bc}.primary span{float:right}.tools{display:flex;justify-content:space-between;margin-top:18px}.tools button{padding:0;border:0;background:transparent;color:#c6d7be;text-decoration:underline;text-underline-offset:4px;font-size:11px}.keyboard{color:#809e98;font-size:10px;line-height:1.8;margin-top:24px}footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#8ca69e;margin:20px 0;line-height:1.6}footer button{border:0;background:none;font-size:10px;text-decoration:underline;padding:0;white-space:nowrap}dialog{background:#18383e;color:#e7ebe1;border:1px solid #67887a;border-radius:15px;padding:35px;max-width:540px;width:90%;line-height:1.7}dialog::backdrop{background:#061820d9}dialog h2{font-size:30px}dialog p,dialog li{font-size:14px;color:#c2d2c5}dialog a{color:var(--lime)}#close{float:right;font-size:23px;padding:0 9px}dialog .guide{border-top:1px solid #54716f;padding:10px 0}[hidden]{display:none!important}@media(min-width:1500px){main{padding-top:32px}}@media(max-width:1000px){main{padding:20px}.workspace{grid-template-columns:minmax(0,1fr) 300px}aside{padding:18px}.live{display:none}h1{font-size:40px}nav button{padding:10px 13px}}@media(max-width:730px){main{padding:16px}header span{display:none}.intro{margin:25px 0 20px}h1{font-size:36px;line-height:1.12}.intro p:not(.eyebrow){font-size:12px}.progress strong{font-size:25px}.progress span{font-size:9px}.workspace{grid-template-columns:1fr}.stage-top,.stage-bottom{padding:13px 14px}aside{border-left:0;border-top:1px solid #42625f;padding:22px}nav{gap:5px}nav button{flex:1;padding:10px 0}.control-heading>p:last-child{min-height:0}.tabs{margin-top:16px}.keyboard{margin-bottom:0}footer{align-items:flex-start}footer span{max-width:72%}#result{min-height:65px}.brand{font-size:15px}.progress{max-width:70px;white-space:normal}canvas{aspect-ratio:900/650}}