*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#f3f6f8;background:#0a1016;font-synthesis:none}body{margin:0;padding:24px;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:3px solid #79d7ff;outline-offset:5px}button:disabled{cursor:default}.trainer{width:min(1440px,100%);border:1px solid #34414d;border-radius:12px;overflow:hidden;box-shadow:0 24px 80px #0008}header{min-height:88px;background:#0a0e12;display:flex;align-items:center;justify-content:space-between;padding:18px 26px;gap:16px}.eyebrow{font-size:12px;letter-spacing:3px;color:#79cce7;font-weight:700}h1{font-size:clamp(18px,2.4vw,32px);margin:6px 0 0;letter-spacing:-.7px;font-weight:900}h1 span{color:#aebdc8}nav{display:flex;gap:10px}nav button{border:1px solid #3a4853;border-radius:6px;padding:13px 16px;font-size:13px;font-weight:700;background:#1c2730;white-space:nowrap}nav .start{background:#e8f5fb;color:#0b151b;border-color:#e8f5fb}nav button:disabled{opacity:.4}.course{position:relative;aspect-ratio:16/9;background:#298ab0 none center/cover no-repeat;isolation:isolate;overflow:hidden}.course:before{content:'';position:absolute;inset:0;background:linear-gradient(#00132330,transparent 40%,#0005);z-index:-1}.status{position:absolute;top:24px;left:24px;display:flex;gap:9px;align-items:center;padding:10px 13px;background:#09141ce8;border:1px solid #ffffff30;border-radius:5px;font-size:12px;letter-spacing:1.4px;font-weight:700}.status i{width:6px;height:6px;border-radius:50%;background:#ef332b}.tree{position:absolute;top:4%;right:19%;width:19%;min-width:150px;filter:drop-shadow(0 9px 8px #0006)}.timers{display:flex;background:linear-gradient(135deg,#28333a,#080d10);padding:7px;border:1px solid #68747a;border-radius:7px;gap:5px}.timers>div{width:50%;text-align:center;background:#050807;border:1px solid #414d49;border-radius:3px;padding:8px 0 2px}.timers span{font-size:clamp(10px,1vw,14px);color:#c3cbd0}.count{display:block;font-family:Consolas,'Courier New',monospace;font-size:clamp(35px,5vw,72px);color:#ff352a;line-height:1.1;text-shadow:0 0 12px #ff302a66}.lamps{display:flex;justify-content:space-around}.stack{display:grid;gap:10px;background:linear-gradient(90deg,#04080b,#20262a,#04080b);padding:12px;border-radius:0 0 7px 7px}.stack i{width:clamp(24px,3vw,44px);aspect-ratio:1;border-radius:50%;border:3px solid #0008;box-shadow:inset 0 0 10px #000;background:#151b1d}.stack .red{background:#47110e}.stack .yellow{background:#494012}.stack .green{background:#123f13}.stack .red.on{background:#ff2519;box-shadow:0 0 18px #ff281d99,inset 0 0 4px white}.stack .yellow.on{background:#ffd72c;box-shadow:0 0 18px #ffd72c99,inset 0 0 4px white}.stack .green.on{background:#71f331;box-shadow:0 0 18px #71f33199,inset 0 0 4px white}.results{position:absolute;top:15%;right:2%;width:15%}.panel{background:linear-gradient(130deg,#0a151bef,#05090df5);border:1px solid #8b9da899;border-radius:7px;text-align:center;padding:18px 6px;margin-bottom:10px;box-shadow:0 4px 12px #0003}.panel>span{display:block;color:#b8c9d4;font-size:clamp(10px,.9vw,13px);font-weight:700}.panel output{display:block;font:700 clamp(23px,3vw,43px) Consolas,monospace;margin:10px 0 4px;letter-spacing:-1px}.panel small{font-size:12px;color:#9cadb7}.panel.early output,.panel.early small{color:#ff716b}.panel.late output,.panel.late small{color:#ffd664}.panel.perfect output,.panel.perfect small{color:#94ff88}#go{position:absolute;left:50%;top:78%;transform:translate(-50%,-50%);width:clamp(90px,12vw,176px);aspect-ratio:1;border-radius:50%;border:7px solid #aeb7b9;background:radial-gradient(circle at 40% 30%,#ff5243,#e71e13 65%,#8f0907);box-shadow:0 0 0 7px #12191d,0 10px 18px #0009,inset 0 3px 3px #ffb1a4,inset 0 -8px 8px #7c000966;text-shadow:0 2px 1px #9b120b;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation;user-select:none}#go strong{font-size:clamp(30px,4.5vw,62px);line-height:1;font-weight:900}#go span{font-size:clamp(10px,1vw,13px);font-weight:700;letter-spacing:2px;margin-top:7px}#go:active:not(:disabled){transform:translate(-50%,-47%);filter:brightness(.9)}#go:disabled{filter:saturate(.7) brightness(.8)}.run-message{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);background:#06121bdf;padding:9px 18px;border-radius:5px;font-size:14px;text-align:center;white-space:nowrap}footer{display:flex;align-items:center;gap:30px;background:#101a22;padding:24px 28px}label,.target>span{display:block;font-size:12px;font-weight:700;letter-spacing:1.5px;color:#9cbbc9;margin-bottom:10px}.input-wrap{border:1px solid #516874;border-radius:5px;background:#07121a;display:flex;align-items:center;padding-right:14px}.input-wrap input{width:100px;color:white;font-size:26px;font-weight:700;border:0;background:transparent;padding:9px 12px}.input-wrap span{font-size:14px;color:#a0b4be}.target{border-left:1px solid #35444e;padding-left:30px;min-width:190px}.target strong{font:700 30px Consolas,monospace;color:#89d8f5;margin-right:8px}.target small{font-size:13px;color:#a9bac4}footer p{margin:0 0 0 auto;max-width:450px;color:#c3d0d8;font-size:14px;line-height:1.6}footer p span{display:block;color:#8ca6b5;margin-top:5px}kbd{font:12px Arial;border:1px solid #5c707a;border-radius:3px;padding:2px 5px}@media(max-width:750px){body{padding:8px}header{padding:14px;align-items:flex-start}h1 span{display:block;font-size:14px;letter-spacing:.4px;margin-top:4px}nav{gap:5px}nav button{padding:10px;font-size:12px}nav #reset span{display:none}.eyebrow{font-size:10px}.course{aspect-ratio:4/3;background-size:auto 100%}.status{top:10px;left:10px;font-size:10px;padding:7px}.tree{top:16%;right:29%;width:27%;min-width:0}.stack{padding:7px;gap:7px}.results{top:16%;right:2%;width:25%}.panel{padding:9px 3px;margin-bottom:6px}.panel small{font-size:10px}.panel output{margin:6px 0}.count{font-size:40px}.timers span{font-size:8px}.timers{padding:4px}.run-message{bottom:2%;font-size:11px;width:94%;white-space:normal;padding:7px}#go{top:78%;width:100px}footer{padding:18px 14px;gap:18px;flex-wrap:wrap}.target{padding-left:18px;min-width:0;flex:1}.target small{display:block}.input-wrap input{width:82px}footer p{max-width:none;margin:0;font-size:14px}.setting label,.target>span{font-size:10px}}@media(prefers-reduced-motion:no-preference){.stack i{transition:background .05s}#go{transition:filter .15s}}

/* Original mockup alignment */