:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#080a12;color:#edf0ff}*{box-sizing:border-box}body{margin:0;overflow:hidden}main{height:100vh;display:flex;position:relative}.panel{z-index:2;width:360px;padding:42px 34px;background:linear-gradient(120deg,rgba(10,12,25,.97),rgba(10,12,25,.72));border-right:1px solid #282c46}.eyebrow{color:#8d7bff;letter-spacing:.15em;font-size:11px;font-weight:700}.panel h1{font-size:38px;line-height:1;margin:16px 0}.intro{color:#a6abc5;line-height:1.6}.controls{margin-top:34px;display:grid;gap:20px}label{font-size:13px;color:#cdd1e7}output{float:right;color:#8d7bff;font-weight:700}input[type=range]{width:100%;accent-color:#8d7bff;margin-top:12px}.check{display:flex;gap:10px;align-items:center}.check input{accent-color:#ff76b7}button{border:1px solid #454b71;background:#171b32;color:#fff;border-radius:8px;padding:12px;cursor:pointer;font-weight:700}button:hover{background:#24294a}.hint{font-size:12px;color:#777d9b;line-height:1.7;margin-top:30px}.formula{color:#8d7bff;font-family:ui-monospace,monospace;font-size:12px;line-height:1.6;margin-top:34px}#stage{position:absolute;inset:0 0 0 360px;width:calc(100% - 360px);height:100%;cursor:grab}#stage:active{cursor:grabbing}@media(max-width:700px){.panel{width:100%;height:auto;padding:20px 22px;background:rgba(8,10,18,.9)}.panel h1{font-size:28px;margin:8px 0}.intro,.hint,.formula{display:none}.controls{margin-top:14px;gap:10px}.controls label:first-child{max-width:260px}#stage{inset:190px 0 0;width:100%;height:calc(100% - 190px)}}