:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#0b1118;color:#eaf2fb;display:flex;justify-content:center;align-items:center}main{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px}
.dial{position:relative;width:min(92vw,62vh);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1d2c3d,#0e1620 70%);border:6px solid #3b2a6b;box-shadow:0 0 0 6px #14101f,0 20px 50px #000a;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.face{width:68%;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:8px}.kicker{margin:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#9bb3cc}h1{margin:0;font-size:clamp(1.3rem,6vw,2.2rem);line-height:1.15}#sub{margin:0;font-size:clamp(.9rem,3.6vw,1.1rem);color:#c9d8e8;max-height:7.5em;overflow:hidden}.hint{margin:0;font-size:.78rem;color:#8aa0b8}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:15%;height:40%;background:none;border:0;color:#6f86a0;font-size:2.4rem;cursor:pointer}.nav.left{left:2%}.nav.right{right:2%}
.dots{position:absolute;bottom:7%;left:0;right:0;display:flex;justify-content:center;gap:6px}.dots i{width:7px;height:7px;border-radius:50%;background:#2c3b4d}.dots i.on{background:#b79cff}
#editor{width:min(92vw,520px)}#text{width:100%;font-size:1rem;padding:10px;border-radius:10px;border:1px solid #2c3b4d;background:#101a25;color:inherit}button{font:inherit;padding:10px 18px;border-radius:10px;border:1px solid #3b4d63;background:#16222f;color:inherit}button.go{background:#5b3fc4;border-color:#5b3fc4}#msg{min-height:1.2em;color:#b9ffc8;margin:0}