@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#eef0e9;background:#111728;font-size:16px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% -30%,#34465c 0,transparent 55%),#111728;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f6bb88;outline-offset:3px}.page{max-width:1480px;margin:auto;padding:0 clamp(20px,5vw,82px)}header{height:92px;border-bottom:1px solid #52606a;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font-family:'DM Serif Display',Georgia,serif;font-size:2.5rem;text-decoration:none;color:#f6f4ef;line-height:1}.logo span{color:#c5a5ca;font-size:1.85rem;padding:0 2px}.header-note,.header-end{color:#aebdc4;font-size:.72rem;font-weight:700;letter-spacing:.17em}.header-end{text-align:right}main{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(420px,1.25fr);column-gap:clamp(40px,7vw,140px);padding:68px 0 80px}.intro{align-self:start;padding-top:20px}.eyebrow,.overline{font-size:.75rem;font-weight:700;letter-spacing:.18em;color:#d2adc9}h1,h2,p{margin-top:0}h1,.preset-card h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400}h1{font-size:clamp(4rem,7vw,7.4rem);line-height:.97;letter-spacing:-.035em;margin:34px 0 30px}h1 em{color:#d3add2;font-weight:400}.intro>p:last-child{color:#c3ccd0;line-height:1.7;font-size:1.06rem;max-width:390px}.studio{background:#e9e7e3;color:#1e2734;border-radius:22px;padding:clamp(24px,3.1vw,46px);box-shadow:0 24px 70px #070a1690}.studio-top{display:flex;align-items:center;justify-content:space-between;min-height:170px;gap:24px}.studio .overline,.settings .overline{color:#896a88}.studio h2{font:400 clamp(1.7rem,2.5vw,2.45rem) 'DM Serif Display',Georgia,serif;margin:12px 0 9px}.studio-top p{color:#69747c;font-size:.9rem}.disc{width:130px;height:130px;flex:none;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 6px,#a5a4a33c 7px 8px),conic-gradient(from 35deg,#d7c7d9,#a8bcca,#e5d9d1,#d7c7d9);border:9px solid #d4d4d3;display:grid;place-items:center;box-shadow:0 7px 18px #14213322}.disc.playing{animation:spin 16s linear infinite}.disc-center{border-radius:50%;background:#f4efe6;width:27px;height:27px;border:5px solid #93919a}.track{display:grid;grid-template-columns:96px minmax(0,1fr) 43px;gap:18px;align-items:center;border-top:1px solid #cbd0d0;padding:21px 0}.track-name{font-weight:700;font-size:.96rem}.track-value{font-size:.85rem;color:#68727a;text-align:right;font-variant-numeric:tabular-nums}.track input{width:100%;accent-color:#8b628c;cursor:pointer}.transport{display:flex;align-items:center;gap:20px;border-top:1px solid #cbd0d0;padding-top:24px}.play{border:0;background:#715673;color:#fff;border-radius:100px;padding:16px 24px;min-width:207px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:700}.play:hover{background:#59415b}.play span:first-child{font-size:.86rem}.transport-note{color:#737d84;font-size:.8rem}.settings{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:19px}.timer-card,.preset-card{border:1px solid #536273;border-radius:17px;padding:26px;background:#1d2738}.setting-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.setting-title strong{font-weight:600;color:#eef0e9}.timer-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:27px 0 17px}.timer-options button{color:#c6d0d3;background:#293647;border:1px solid #526071;border-radius:9px;padding:11px 3px;font-size:.83rem}.timer-options button.selected{background:#d2adc9;border-color:#d2adc9;color:#17202d;font-weight:700}.timer-card p{color:#abb8c0;font-size:.82rem;line-height:1.5;margin:0}.preset-card h2{font-size:1.65rem;margin:13px 0 15px}.presets{display:grid}.presets button{border:0;border-top:1px solid #465363;background:none;color:#e4e8e5;text-align:left;padding:11px 0;display:flex;justify-content:space-between;font-size:.9rem}.presets button:hover{color:#e6bce1}footer{border-top:1px solid #52606a;display:flex;justify-content:space-between;gap:20px;padding:28px 0 45px;color:#aebdc4;font-size:.75rem;letter-spacing:.08em}.foot-star{color:#d2adc9}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1100px){main{grid-template-columns:1fr;gap:38px}.intro{padding:0}.intro h1{max-width:600px;margin:22px 0}.studio,.settings{grid-column:1}.settings{margin-top:-18px}}@media(max-width:650px){.header-end{display:none}header{height:75px}main{padding:44px 0 64px;gap:26px}h1{font-size:4.5rem}.studio{padding:24px}.disc{width:92px;height:92px}.studio-top{min-height:130px}.track{grid-template-columns:80px minmax(0,1fr) 35px;gap:10px}.settings{grid-template-columns:1fr;margin-top:-7px}.transport{flex-wrap:wrap}.transport-note{font-size:.75rem}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){.disc.playing{animation:none}}