:root { --ink:#f1edf8; --muted:#aaa3ba; --paper:#f5f0ea; --dark:#151321; --surface:#211d32; --line:rgba(241,237,248,.15); --orange:#ff8a66; --lavender:#b8a5ff; --mono:'DM Mono',monospace; --sans:'Manrope',sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-width:320px;color:var(--ink);background:radial-gradient(circle at 82% 5%,#4d2c49 0,transparent 23%),radial-gradient(circle at 7% 40%,#253b55 0,transparent 26%),var(--dark);font-family:var(--sans)} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit} button{cursor:pointer} button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.skip-link{position:fixed;z-index:9;transform:translateY(-150%);padding:11px;background:var(--orange);color:#1b1420;font-weight:800}.skip-link:focus{transform:translateY(0)}.site-header{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{font:800 1.02rem var(--mono);letter-spacing:-.09em}.brand span,em{color:var(--orange);font-style:normal}.portfolio-link{color:var(--muted);font-size:.73rem;font-weight:700}.portfolio-link:hover{color:var(--ink)}.hero{min-height:480px;display:flex;flex-direction:column;justify-content:center;padding:66px 0 88px}.eyebrow{margin:0 0 18px;color:#b6afbd;font:500 .66rem/1.4 var(--mono);letter-spacing:.14em}.eyebrow span{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 13px var(--orange)}h1,h2,h3,p{margin-top:0}h1{max-width:860px;margin-bottom:25px;font-size:clamp(3.1rem,8vw,7rem);line-height:.96;letter-spacing:-.085em}.hero>p:not(.eyebrow){max-width:560px;color:var(--muted);font-size:1rem;line-height:1.75}.hero-meta{display:flex;flex-wrap:wrap;gap:10px 25px;margin-top:24px;color:#c4beca;font:.62rem var(--mono)}.hero-meta span::before{content:'/ ';color:var(--orange)}.studio{padding:78px 0 106px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:48px}.section-heading .eyebrow{margin-bottom:15px}h2{font-size:clamp(2.25rem,5vw,4.7rem);line-height:1;letter-spacing:-.075em}.privacy-note{max-width:260px;margin:0;color:var(--muted);font-size:.76rem;line-height:1.65}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.session-panel,.metro-panel{min-height:510px;padding:26px;background:linear-gradient(145deg,rgba(44,38,67,.93),rgba(22,19,34,.96));border:1px solid var(--line)}.metro-panel{background:linear-gradient(145deg,rgba(56,31,46,.92),rgba(29,19,35,.97))}.panel-top{display:flex;justify-content:space-between;align-items:center}.panel-kicker{margin:0;color:#cbc3d5;font:.62rem var(--mono);letter-spacing:.1em}.state-pill{padding:6px 9px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font:.59rem var(--mono);text-transform:uppercase}.state-pill.active{border-color:var(--orange);color:var(--orange)}.session-panel h3,.metro-panel h3{margin:47px 0 22px;font-size:1.45rem;letter-spacing:-.055em}.field-label{display:block;margin-bottom:8px;color:#c0bac7;font:.66rem var(--mono)}.field-label span{color:#8c8497}input[type=text],textarea{width:100%;border:1px solid var(--line);border-radius:5px;padding:13px;background:rgba(7,7,13,.24);color:var(--ink)}textarea{resize:vertical}.timer{margin:44px 0 30px;font:500 clamp(3rem,7vw,5.5rem)/.9 var(--mono);letter-spacing:-.1em}.session-actions{display:flex;gap:9px}.primary-button,.quiet-button,.metro-button{border:0;padding:13px 17px;border-radius:4px;font-size:.75rem;font-weight:800}.primary-button{background:var(--orange);color:#201520}.primary-button:hover{background:#ffa385}.quiet-button{border:1px solid var(--line);color:var(--ink);background:transparent}.quiet-button:disabled{opacity:.4;cursor:not-allowed}.notes-label{margin-top:35px}.tempo-display{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;max-width:350px;margin:58px auto 23px}.tempo-display output{font:500 clamp(4.5rem,10vw,7rem)/.78 var(--mono);letter-spacing:-.13em;text-align:center}.tempo-display>span{grid-column:2;color:#c7bdcb;font:.63rem var(--mono);letter-spacing:.13em;text-align:center}.tempo-step{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:transparent;font-size:1.25rem}.tempo-step:hover{border-color:var(--lavender);color:var(--lavender)}.tempo-slider{width:100%;accent-color:var(--orange)}.metro-options{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-top:27px;color:#c5bdca;font:.68rem var(--mono)}.metro-options label{display:grid;gap:8px}.metro-options select{padding:7px;border:1px solid var(--line);border-radius:3px;background:#231d30;color:var(--ink)}.metro-options .ramp-label{display:block;max-width:185px;line-height:1.6}.ramp-label input{accent-color:var(--orange)}.ramp-label span{display:block;margin-left:20px;color:var(--muted);font-size:.59rem}.beat-lights{display:flex;justify-content:center;gap:12px;margin:45px 0 26px}.beat-light{width:13px;height:13px;border:1px solid var(--orange);border-radius:50%;opacity:.4}.beat-light.current{opacity:1;background:var(--orange);box-shadow:0 0 18px var(--orange)}.metro-button{display:block;width:100%;margin-top:0;background:var(--lavender);color:#1c1525}.metro-button:hover{background:#cbbfff}.insights{padding:100px 0 110px;border-top:1px solid var(--line)}.text-button{padding:0;border:0;border-bottom:1px solid var(--muted);background:none;color:var(--muted);font:.68rem var(--mono)}.text-button:hover{color:var(--orange);border-color:var(--orange)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.metrics article{min-height:166px;padding:22px;border-right:1px solid var(--line)}.metrics article:last-child{border:0}.metrics span{color:#beb6c4;font:.63rem var(--mono)}.metrics strong{display:block;margin:31px 0 8px;font-size:clamp(1.45rem,3vw,2.3rem);letter-spacing:-.07em}.metrics p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.5}.heatmap-card,.history{margin-top:15px;padding:25px;border:1px solid var(--line);background:rgba(33,29,50,.48)}.heatmap-header,.history-heading{display:flex;justify-content:space-between;gap:20px}.heatmap-header h3,.history h3{margin-bottom:6px;font-size:1rem;letter-spacing:-.04em}.heatmap-header p,.history p{margin:0;color:var(--muted);font-size:.7rem}.legend{display:flex;align-items:center;gap:5px;color:var(--muted);font:.57rem var(--mono)}.legend i,.heat-cell{width:11px;height:11px;border-radius:2px;background:#2d293b}.legend i:nth-of-type(1),.level-1{background:#5c536a}.legend i:nth-of-type(2),.level-2{background:#a06780}.legend i:nth-of-type(3),.level-3{background:#df785f}.legend i:nth-of-type(4),.level-4{background:#ffb165}.heatmap{display:grid;grid-template-columns:repeat(12,1fr);gap:7px;margin-top:28px}.heat-cell{width:100%;aspect-ratio:1}.history-list{margin-top:25px}.history-item{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line)}.history-item strong{display:block;font-size:.82rem}.history-item span,.history-item p{display:block;margin:6px 0 0;color:var(--muted);font-size:.68rem;line-height:1.5}.history-item button{align-self:start;border:0;background:transparent;color:#bdaeb9;font:.62rem var(--mono)}.history-item button:hover{color:var(--orange)}.empty-history{padding:10px 0 0}.site-footer{display:flex;justify-content:space-between;padding:24px 0;border-top:1px solid var(--line);color:var(--muted);font:.63rem var(--mono)}.site-footer a:hover{color:var(--orange)}@media(max-width:760px){.shell{width:min(100% - 32px,1180px)}.site-header{height:72px}.portfolio-link{font-size:.61rem}.hero{min-height:420px;padding:60px 0}.studio,.insights{padding:73px 0}.section-heading{display:block}.privacy-note{margin-top:22px}.studio-grid{grid-template-columns:1fr}.session-panel,.metro-panel{min-height:0}.metrics{grid-template-columns:1fr 1fr}.metrics article:nth-child(2){border-right:0}.metrics article:nth-child(-n+2){border-bottom:1px solid var(--line)}.metro-options{flex-direction:column}.heatmap{gap:5px}.heatmap-card,.history{padding:18px}.history-item{flex-direction:column}.history-item button{padding:0}.site-footer{gap:18px}}
@media(min-width:1200px){.shell{width:min(1440px,calc(100% - 96px))}.hero{min-height:540px}.studio-grid{gap:22px}.session-panel,.metro-panel{padding:34px}.metrics article{padding:28px}}