:root{color-scheme:dark;--ink:#f5eee0;--muted:#97938b;--accent:#f6d58d;--accent-ink:#302516;--accent-soft:#f6d58d42}*{box-sizing:border-box}body{margin:0;background:#090a09;color:var(--ink);font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:--accent .4s}header{height:88px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{color:var(--ink);text-decoration:none;font-size:23px;display:flex;align-items:center;gap:12px}.brand i{width:16px;height:16px;background:var(--accent);box-shadow:0 0 20px var(--accent-soft);border-radius:50%;transition:.5s}.brand span,.eyebrow,footer{font-size:10px;letter-spacing:2px}.brand span{margin-left:12px;color:var(--muted)}.tag{font-size:11px;color:var(--muted);letter-spacing:3px}
.voice-picker{max-width:1500px;margin:auto;padding:24px 5% 0;display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.voice-option{min-width:0;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid #ffffff14;background:#ffffff03;color:var(--ink);border-radius:14px;padding:10px;cursor:pointer;transition:background .25s,border-color .25s,transform .25s}.voice-option:hover{background:#ffffff0a;transform:translateY(-1px)}.voice-option.active{border-color:var(--accent-soft);background:#ffffff0c}.voice-option img,.thumb{width:38px;height:38px;flex:0 0 auto;border-radius:50%;object-fit:cover}.sunny-thumb{background:radial-gradient(circle at 65% 20%,#fff9e7 0 22%,#ffd52e 48%,#fa7185 72%,#9d70f8 100%)}.voice-option span:last-child{min-width:0}.voice-option b{display:block;font-size:12px;font-weight:500;white-space:nowrap}.voice-option small{display:block;color:var(--muted);font-size:7px;letter-spacing:1.2px;margin-top:4px;white-space:nowrap}
main{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,.9fr);padding:34px 5% 40px;gap:6%}.eyebrow{color:var(--muted);display:flex;justify-content:space-between;letter-spacing:2px;font-size:10px}.eyebrow span:last-child{opacity:.5}.stage{display:flex;align-items:center;justify-content:center;aspect-ratio:1;max-height:680px}canvas{display:block;width:100%;height:auto;aspect-ratio:1}.live{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);padding:14px 0;border-top:1px solid #ffffff15}#dot{width:5px;height:5px;background:#716e64;border-radius:50%;transition:.25s}#levelText{margin-left:auto;font-variant-numeric:tabular-nums}.meter{width:72px;height:3px;background:#34342c}.meter i{display:block;width:0;height:100%;background:var(--accent);transition:background .4s}
aside{padding-top:18px}h1{font-size:clamp(30px,3.2vw,46px);font-weight:450;line-height:1.35;letter-spacing:-1px;margin:23px 0 14px}.intro{line-height:1.9;color:var(--muted);font-size:13px;min-height:50px}.voice{border:1px solid #ffffff1b;border-radius:18px;padding:22px;margin-top:25px;background:linear-gradient(130deg,#ffffff06,transparent)}.voicehead{display:flex;justify-content:space-between;align-items:center}.voicehead>span{font-size:16px}.voicehead small{font-size:9px;letter-spacing:1px;color:var(--muted)}.quote{font-family:Georgia,"Noto Serif SC",serif;font-size:17px;line-height:1.7;color:#d7ccb8;min-height:118px;margin:18px 0}.playrow{display:flex;align-items:center;justify-content:space-between;gap:12px}button{font:inherit}.primary,.actions button{cursor:pointer;border:1px solid #ffffff23;background:#ffffff04;color:var(--ink);border-radius:10px;padding:12px 16px;transition:background .2s,border-color .2s}.primary:hover,.actions button:hover{background:#ffffff13}.primary:focus-visible,.actions button:focus-visible,.voice-option:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.primary:disabled,.actions button:disabled{opacity:.4;cursor:wait}.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);min-width:130px}.primary:hover{background:var(--accent);filter:brightness(1.08)}#time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent);height:3px;cursor:pointer;margin:17px 0 0}.controls{display:grid;gap:18px;margin:24px 0}.controls label{font-size:12px;display:block}.controls output{float:right;color:var(--muted);font-size:11px}.controls input{display:block;margin-top:12px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button{font-size:12px}#notice{font-size:11px;line-height:1.7;color:var(--muted);min-height:36px}.source{font-size:10px;color:#ada28b;text-decoration:none}.download{display:block;color:var(--accent);font-size:11px;margin:10px 0;text-decoration:none}footer{margin:0 5%;padding:24px 0 30px;display:flex;justify-content:space-between;border-top:1px solid #ffffff12;color:#716e64;font-size:9px}
@media(max-width:980px){.voice-picker{grid-template-columns:repeat(5,150px);overflow-x:auto;padding-bottom:6px}.voice-option{scroll-snap-align:start}main{grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);gap:4%}}
@media(max-width:760px){header{height:70px}.tag{display:none}.voice-picker{padding-top:16px;grid-template-columns:repeat(5,142px);scroll-snap-type:x mandatory}main{grid-template-columns:1fr;padding-top:24px;gap:24px}.stage{max-height:560px}.visual{max-width:600px;width:100%;margin:auto}aside{padding-top:0}h1{font-size:34px}.quote{min-height:0}.eyebrow{font-size:8px}footer{letter-spacing:1px}.controls{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.voice-option{transition:none}}