:root{font:14px 'Segoe UI',sans-serif;color:#e4ecf3;background:#0d151f;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{display:flex;flex-direction:column}html.embedded,html.embedded body{height:100%;overflow:hidden}html.embedded .example-description{display:none}html.embedded main,html.embedded #stage{min-height:0}html.embedded main{flex:1}html.embedded .responses{flex-shrink:0;max-height:220px;overflow:auto}.header-right{display:flex;gap:16px;align-items:center}.header-right a{color:#ecc082;font-size:12px;text-decoration:none;letter-spacing:.08em;text-transform:uppercase}header{height:84px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #293847}.brand{letter-spacing:2px;font-size:16px;position:relative;padding-left:28px}.brand>span{position:absolute;left:0;color:#ecc082;font-size:36px;top:-5px}.brand b{font-weight:350;color:#9eacb9}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:7px;color:#91a2b3}button,select{font:inherit;padding:9px 12px;border:1px solid #344758;background:#1b2a38;color:#e4ecf3;border-radius:6px;cursor:pointer}button:hover{background:#314657}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ecc082;outline-offset:3px}main{display:grid;grid-template-columns:minmax(0,1fr) 305px;flex:1;min-height:650px}#stage{position:relative;background:radial-gradient(ellipse at 50% 40%,#263f51,#101f2d 65%,#0c1823);min-height:650px}#canvas{position:absolute;inset:0}canvas{display:block;touch-action:none}.caption{position:absolute;z-index:1;top:24px;left:26px;font-size:11px;letter-spacing:1.8px;color:#a0b0be;pointer-events:none}.caption span{display:block;margin-top:10px;color:#ecc082;letter-spacing:0;font-size:12px}.hint{position:absolute;bottom:22px;left:26px;color:#93a8b9;font-size:12px;pointer-events:none}aside{padding:25px;background:#111d29;border-left:1px solid #293847}h1{font-size:29px;font-weight:400;line-height:1.15;letter-spacing:-.8px;margin:16px 0}.intro,.note{color:#a1b0bd;line-height:1.6}.eyebrow{letter-spacing:1.8px;color:#8fa5b7;font-size:11px}.stats{display:flex;gap:48px;margin:25px 0}.stats small{display:block;color:#99abb9}.stats strong{font-size:25px;font-weight:400;color:#ecc082}hr{border:0;border-top:1px solid #293b4b;margin:23px 0}label{display:block;margin:17px 0 9px}select{width:100%;font-size:13px}.row{display:flex;justify-content:space-between}output{color:#ecc082}input[type=range]{width:100%;accent-color:#ecc082;cursor:pointer}.ends{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#9cafbd;margin-top:5px}.ends button{padding:0;background:none;border:0;font-size:11px;color:#ecc082}.check{display:flex;gap:8px;align-items:center;font-size:13px}.check input{accent-color:#ecc082;width:16px;height:16px}.views{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.views button[aria-pressed=true]{border-color:#ecc082;color:#ecc082}.note{font-size:12px;margin-top:20px}a{color:#ecc082;text-decoration:none;font-size:12px}.gradient{height:7px;border-radius:6px;background:linear-gradient(90deg,#2065a8,#28b5b1,#f3d078,#d84838);margin-top:18px}#legend small{color:#8da0b2;font-size:10px}footer{display:flex;justify-content:space-between;padding:14px 28px;border-top:1px solid #293847;color:#8fa4b5;font-size:12px}#error{position:absolute;left:10%;top:40%;padding:20px;background:#612727;z-index:3}@media(max-width:760px){header{padding:0 16px}.brand{font-size:12px}main{display:block}#stage{height:62dvh;min-height:420px}aside{border-left:0}footer{gap:15px;font-size:10px}}
:root{overflow-x:hidden}canvas{max-width:100%;width:100%;height:100%}footer{flex-wrap:wrap}#stage,aside{min-width:0}@media(max-width:760px){header{gap:12px}.brand{letter-spacing:1px}header button{font-size:12px;flex-shrink:0}}
:root .playback{display:flex;align-items:center;gap:18px;padding:18px 28px;background:#152331;border-top:1px solid #344758;position:sticky;bottom:0;z-index:4}.playback .track{flex:1;min-width:130px}.playback .row{margin:0 0 8px;font-size:12px}.playback select{width:76px}.playback button{white-space:nowrap}#playAnimation{background:#ecc082;color:#142333;min-width:95px}#loopAnimation[aria-pressed=false]{opacity:.5}@media(max-width:600px){:root .playback{padding:12px;gap:10px;flex-wrap:wrap}.playback .track{min-width:190px}.playback .row{font-size:10px}}