.interval-simulator{border:1px solid #466468;background:#152222;padding:36px;margin:35px 0 45px;--sim-accent:#aadfff;scroll-margin-top:110px}
.interval-simulator *{box-sizing:border-box}
.interval-simulator .sim-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}
.interval-simulator .sim-heading h3{font-size:28px;line-height:1.4;letter-spacing:-.8px;color:#e9f1ee;font-weight:550;margin:0 0 12px}
.interval-simulator .sim-heading p:not(.eyebrow){font-size:14px;line-height:1.9;color:#b6cac5;max-width:640px}
.interval-simulator .sim-heading .eyebrow{font-size:10px;color:var(--sim-accent);margin:0 0 12px;letter-spacing:2px}
.interval-simulator .sim-badge{color:var(--sim-accent);border:1px solid #416369;padding:8px 12px;font-size:10px;white-space:nowrap}
.interval-simulator .sim-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:start}
.interval-simulator .sim-watch-panel{position:sticky;top:110px;text-align:center;min-width:0}
.interval-simulator figure{margin:0}.interval-simulator svg{display:block;width:100%;max-width:480px;height:auto;margin:auto}
.interval-simulator figcaption{font-size:10px;color:#90aca9;margin:15px 0 25px}
.interval-simulator .sim-stage-status{min-height:34px;font-size:13px;color:#c6e7d9;border-top:1px solid #3c5250;padding-top:14px}
.interval-simulator .sim-remaining{display:grid;gap:5px;margin:12px 0 24px;color:#b7d2cc;font-size:12px}
.interval-simulator .sim-remaining output{font-size:42px;line-height:1.4;color:#eef5f2;font-variant-numeric:tabular-nums;letter-spacing:1px}
.interval-simulator .sim-fill-key{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;font-size:11px}
.interval-simulator .sim-fill-key>div{display:grid;grid-template-columns:1fr auto;gap:10px;color:#b6d0c6}
.interval-simulator .sim-fill-key output{font-variant-numeric:tabular-nums;color:#e4eee9}
.interval-simulator progress{grid-column:1/-1;width:100%;height:7px;appearance:none;border:0;background:#2e4140;border-radius:6px;overflow:hidden}
.interval-simulator progress::-webkit-progress-bar{background:#2e4140}.interval-simulator progress::-webkit-progress-value{background:#aadfff}.interval-simulator progress::-moz-progress-bar{background:#aadfff}
.interval-simulator .sim-clock{font-size:12px;color:#b3d9df;margin-top:20px;font-variant-numeric:tabular-nums}
.interval-simulator .sim-small{font-size:11px;line-height:1.8;color:#9ab8b1;margin:10px 0 15px}
.interval-simulator .sim-settings{min-width:0}.interval-simulator .sim-settings-title{display:flex;justify-content:space-between;gap:12px;align-items:center}
.interval-simulator h4{font-size:18px;font-weight:500;line-height:1.5;margin:0}
.interval-simulator button,.interval-simulator select,.interval-simulator input[type=number]{font-family:inherit;font-size:12px;line-height:1.4;color:#e8efeb;border:1px solid #536d65;background:#1c302c;border-radius:4px;min-height:42px;padding:10px 12px;max-width:100%}
.interval-simulator button{cursor:pointer}.interval-simulator button:hover{border-color:#aadfff}.interval-simulator :is(button,select,input):focus-visible{outline:2px solid #aadfff;outline-offset:3px}
.interval-simulator select{width:100%}.interval-simulator label{display:block;font-size:11px;color:#c4d9cd;line-height:1.6}
.interval-simulator label>select,.interval-simulator label>input{margin-top:6px}
.interval-simulator input[type=range]{width:100%;height:30px;accent-color:#aadfff;cursor:pointer;display:block;margin:5px 0}
.interval-simulator .sim-stage{border:1px solid #496854;border-radius:5px;padding:18px;margin:20px 0;background:#1a2d25;min-width:0;--stage-color:#b6e9a5}
.interval-simulator .sim-stage legend{padding:0 8px;color:var(--stage-color);font-size:12px}
.interval-simulator .sim-stage label{color:var(--stage-color)}.interval-simulator .sim-stage input[type=range]{accent-color:var(--stage-color)}
.interval-simulator .sim-tone-1{--stage-color:#aadfff;border-color:#416373;background:#182b36}
.interval-simulator .sim-tone-2{--stage-color:#dfc1fa;border-color:#645174;background:#292335}
.interval-simulator .sim-tone-3{--stage-color:#f2ca9a;border-color:#786141;background:#332a20}
.interval-simulator .sim-duration-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0 10px}
.interval-simulator .sim-duration-inputs input{width:100%;font-variant-numeric:tabular-nums}
.interval-simulator .sim-stage button{padding:7px 12px;min-height:36px;margin-top:4px;color:var(--stage-color);background:transparent;border-color:currentColor}
.interval-simulator .sim-stage button:disabled{opacity:.35;cursor:default}
.interval-simulator .sim-duration-range{margin-top:12px}.interval-simulator .sim-duration-range output{color:#eef3ed}
.interval-simulator .sim-add{width:100%;border-style:dashed;color:var(--sim-accent)}
.interval-simulator .sim-repeat{border-block:1px solid #45605b;margin:26px 0;padding:24px 0}
.interval-simulator .sim-repeat-row{display:grid;grid-template-columns:1fr 65px 16px;align-items:center;gap:12px;margin-top:8px}
.interval-simulator .sim-repeat-row input[type=number]{width:65px;padding:10px 5px;text-align:center}
.interval-simulator .sim-infinite{display:flex;align-items:center;gap:8px;margin-top:14px}.interval-simulator .sim-infinite input{width:17px;height:17px;accent-color:#aadfff;margin:0}
.interval-simulator [data-sim-total]{font-size:12px;color:#c4d9cd;margin-top:15px;line-height:1.8}
.interval-simulator .sim-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0 12px}
.interval-simulator .sim-primary{color:#102322;background:#aadfff;border-color:#aadfff;font-weight:550}
.interval-simulator .sim-next{width:100%;margin-bottom:20px}.interval-simulator [data-sim-elapsed]{display:block;float:right;font-variant-numeric:tabular-nums}
.interval-simulator .sim-disclosure{border-top:1px solid #3f5954;margin:28px 0 0;padding-top:20px;font-size:11px;line-height:1.9;color:#98b2aa}
.interval-simulator button:disabled,.interval-simulator input:disabled{opacity:.45;cursor:default}
@media(max-width:1000px){.interval-simulator{padding:26px}.interval-simulator .sim-layout{gap:28px}.interval-simulator .sim-heading{display:block}.interval-simulator .sim-badge{display:inline-block;margin-top:16px}.interval-simulator .sim-heading h3{font-size:25px}}
@media(max-width:740px){.interval-simulator{padding:20px;margin:25px 0 30px}.interval-simulator .sim-layout{grid-template-columns:1fr;gap:30px}.interval-simulator .sim-watch-panel{position:static}.interval-simulator svg{max-width:350px}.interval-simulator .sim-heading h3{font-size:23px}.interval-simulator .sim-heading p:not(.eyebrow){font-size:13px}.interval-simulator .sim-settings-title{align-items:flex-start}.interval-simulator .sim-settings-title button{font-size:10px;padding:8px}.interval-simulator h4{font-size:16px}.interval-simulator .sim-stage{padding:14px}.interval-simulator .sim-duration-inputs{gap:9px}.interval-simulator .sim-actions{grid-template-columns:1fr}.interval-simulator button{min-height:44px}.interval-simulator .sim-fill-key{gap:15px;font-size:10px}.interval-simulator .sim-heading{margin-bottom:22px}}