*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#0e1020;color:#ebe8f1;font:15px/1.6 "Segoe UI",Arial,sans-serif}#app{forced-color-adjust:none;max-width:1280px;margin:auto;background:#121426}header{display:flex;justify-content:space-between;padding:24px 32px;color:#9b97b1;font-size:10px;letter-spacing:2px;border-bottom:1px solid #ffffff0f}.intro{text-align:center;padding:25px 20px 20px}.eyebrow{font-size:9px;letter-spacing:3px;color:#aba0c7}h1{font:normal 48px/1 Georgia,serif;letter-spacing:6px;margin:16px 0}.intro>p:last-child{font-size:13px;color:#aaa3ba;margin:0}#visual{display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:#080a16}canvas{display:block;width:100%;height:auto;max-width:800px;aspect-ratio:4/3}#cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#352d58,#141526 65%);text-align:center;padding:20px}.orbits{width:240px;height:240px;position:relative}.orbits i{position:absolute;inset:22px;border:1px solid #b1a0d355;border-radius:50%;transform:rotateX(55deg) rotate(30deg)}.orbits i:nth-child(2){transform:rotateY(55deg) rotate(-30deg)}.orbits i:nth-child(3){inset:50px;border-color:#e2c79488}.orbits b{position:absolute;inset:104px;border-radius:50%;background:#f2d9a7;box-shadow:0 0 50px #e6c1a580,0 0 100px #9b76ce66}#cover p{font:28px Georgia,serif;margin:15px 0 10px}small{color:#a9a1bd;font-size:12px}#panel{padding:25px 32px;border-top:1px solid #b5a0cf22;background:#16182b}.progress-row{display:flex;justify-content:space-between;gap:20px;color:#aaa2bc;font-size:12px}time{white-space:nowrap}input{accent-color:#c4a7dc}#seek{width:100%;margin:13px 0 22px;cursor:pointer}.toolbar{display:flex;flex-wrap:wrap;gap:10px}button{font:inherit;cursor:pointer;border:1px solid #ffffff26;border-radius:25px;padding:10px 21px;background:#ffffff04;color:#e9e3f1}button:hover{background:#ffffff10}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #e6c893;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}#start{background:#e4cba2;color:#242234;border-color:#e4cba2;min-width:120px}.settings{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:22px;font-size:13px;color:#b5adc6}.settings label{display:flex;align-items:center;gap:7px}#volume{width:110px}#status{font-size:12px;color:#d3bfdd;margin:18px 0}#editor{border-top:1px solid #ffffff12;padding-top:24px}.form-top{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-top label{font-size:12px;color:#b2a9c4}.form-top input,select,.phrase input{display:block;width:100%;padding:12px 14px;margin-top:6px;border:1px solid #ffffff20;border-radius:8px;background:#0f1120;color:#eee9f5;font:14px "Segoe UI",Arial,sans-serif}.form-top input::placeholder{color:#716a83}#methodNote{font-size:12px;color:#9b93ae;margin:16px 0 20px}#phrases{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}.phrase span{font-size:12px}.phrase:last-child{grid-column:1/-1}.note{font-size:12px;color:#9189a5;margin:20px 0 0;max-width:860px}details{font-size:12px;color:#a89ebc;margin-top:22px;border-top:1px solid #ffffff12;padding-top:16px}summary{cursor:pointer;color:#c7b6d9}details p{max-width:900px}footer{font-size:10px;letter-spacing:1px;color:#706a83;text-align:center;padding:20px}#restore{position:absolute;top:16px;right:16px;z-index:3;background:#151529e8;font-size:12px;padding:8px 16px}[hidden]{display:none!important}.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.compact header,.compact .intro,.compact #panel,.compact footer{display:none}.compact #visual{height:100vh}.compact canvas{width:auto;height:auto;max-width:100%;max-height:100vh;aspect-ratio:4/3}#app:fullscreen{max-width:none;width:100%;overflow:auto}#app:fullscreen.compact{overflow:hidden}@media(max-width:600px){header{padding:17px;font-size:8px;letter-spacing:1px}h1{font-size:36px}.intro{padding:20px}.eyebrow{font-size:8px}#panel{padding:20px 17px}.form-top,#phrases{grid-template-columns:1fr}.toolbar{gap:8px}button{font-size:13px;padding:10px 13px}.settings{gap:18px}.orbits{width:150px;height:150px}.orbits i{inset:10px}.orbits i:nth-child(3){inset:30px}.orbits b{inset:64px}#cover p{font-size:21px}.phrase:last-child{grid-column:auto}}