.stage{--ink:#33332e;--muted:#929289;--surface:#fcfcfa;--hairline:#e8e8e0;--signal:#d89a29;--beat:.625s;--cycle:2.5s;--lift:9px;--tilt:7deg;--squash:.835;--letter-lift:-6.6px;--dot-lift:-42px;--loader-scale:1;--context-scale:1;position:relative;height:clamp(320px,44vh,480px);min-height:320px;border:1px solid #d8d8cf;border-radius:9px;background:var(--surface);color:var(--ink);overflow:hidden;box-shadow:0 3px 10px #25251d03;isolation:isolate}.stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,var(--hairline) 1px,transparent 1px),linear-gradient(var(--hairline) 1px,transparent 1px);background-size:42px 42px;opacity:.32;-webkit-mask-image:radial-gradient(ellipse at center,#000a,transparent 65%);mask-image:radial-gradient(ellipse at center,#000a,transparent 65%);pointer-events:none}.stage-top,.stage-bottom{position:absolute;left:23px;right:23px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3;color:var(--muted)}.stage-top{top:21px;font-size:9px;letter-spacing:1.3px}.stage-bottom{bottom:21px;font-size:10px;line-height:1.5}.stage-bottom>span:first-child{max-width:65%}.live-label{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:1px}.live-label>i{width:5px;height:5px;background:var(--signal);border-radius:50%;animation:live-pulse var(--beat) ease-in-out infinite}.beat-meter{font-size:9px;letter-spacing:.7px;display:flex;gap:6px;align-items:baseline;white-space:nowrap}.beat-meter strong{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}.beat-meter>i{width:1px;height:9px;background:var(--hairline);margin:0 4px}.preview-body{height:100%;display:flex;align-items:center;justify-content:center;position:relative;padding:45px 28px}.loader-core{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;transform:scale(calc(var(--loader-scale)*var(--context-scale)));transform-origin:center;z-index:2;flex-shrink:0}.animation-window{height:136px;width:360px;display:flex;align-items:center;justify-content:center}.concept{display:none}.stage[data-concept=beat] .concept-beat,.stage[data-concept=groove] .concept-groove,.stage[data-concept=conductor] .concept-conductor{display:block}.hero-wordmark{display:flex;align-items:center;gap:13px;height:120px}.hero-word,.conducted-word{font-family:Manrope,sans-serif;font-size:85px;letter-spacing:-6px;font-weight:800;line-height:1.2}.rhythm-mark{width:63px;display:flex;flex-direction:column;gap:8px;transform:rotate(-12deg);margin:0 5px 1px 0}.rhythm-mark i{display:block;width:59px;height:10px;background:var(--ink);border-radius:7px;transform-origin:left center;animation:signature-stroke var(--cycle) cubic-bezier(.35,0,.2,1) infinite}.rhythm-mark i:nth-child(2){width:43px;animation-delay:calc(var(--beat)*-.5)}.rhythm-mark i:nth-child(3){width:27px;animation-delay:calc(var(--beat)*-1)}.beat-period{font-family:Manrope,sans-serif;font-size:85px;font-weight:800;color:var(--signal);letter-spacing:-4px;line-height:1.2;margin-left:-13px;animation:period-tap var(--beat) ease-in-out infinite;transform-origin:bottom center}.loading-copy{font-size:12px;letter-spacing:.1px;margin-top:4px;color:var(--muted);line-height:1.6;text-align:center}.beat-count{display:flex;gap:7px;margin-top:19px}.beat-count i{height:3px;width:14px;border-radius:3px;background:var(--ink);opacity:.12;animation:count-beat var(--cycle) linear infinite}.beat-count i:nth-child(2){animation-delay:calc(var(--beat)*1)}.beat-count i:nth-child(3){animation-delay:calc(var(--beat)*2)}.beat-count i:nth-child(4){animation-delay:calc(var(--beat)*3)}.concept-groove{width:244px}.groove-track{position:relative;display:flex;flex-direction:column;gap:11px;padding:8px 0 7px;background:repeating-linear-gradient(90deg,transparent 0,transparent 47px,var(--hairline) 47px,var(--hairline) 48px)}.groove-track>div{height:15px;display:flex;align-items:center;position:relative}.groove-track>div>i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--muted);left:0;opacity:.4}.groove-track>div>span{display:block;height:12px;width:145px;margin-left:14px;border-radius:4px;background:var(--ink);transform-origin:left center;animation:task-groove var(--cycle) cubic-bezier(.4,0,.2,1) infinite}.groove-track>div:nth-child(2)>span{width:172px;margin-left:55px;background:var(--signal);animation-delay:calc(var(--beat)*-.8)}.groove-track>div:nth-child(3)>span{width:145px;margin-left:81px;opacity:.45;animation-delay:calc(var(--beat)*-1.6)}.groove-track b{position:absolute;right:5px;top:-2px;font-size:12px;color:var(--surface);font-weight:500;animation:groove-check var(--cycle) linear infinite}.groove-track>div:nth-child(1)>b{right:91px}.groove-track>div:nth-child(2)>b{right:23px;animation-delay:calc(var(--beat)*-.8)}.groove-track>div:nth-child(3)>b{right:24px;animation-delay:calc(var(--beat)*-1.6)}.groove-playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--signal);left:0;animation:groove-scan var(--cycle) linear infinite;opacity:.8}.groove-word{font-family:Manrope,sans-serif;font-size:27px;font-weight:800;letter-spacing:-1.4px;text-align:center;margin-top:10px}.groove-word>span{color:var(--signal)}.conducted-word{position:relative;display:flex;align-items:baseline;padding-right:15px}.conducted-word>span{display:inline-block;animation:letter-nod var(--cycle) cubic-bezier(.3,0,.2,1) infinite}.conducted-word>span:nth-child(2){animation-delay:calc(var(--beat)*.5)}.conducted-word>span:nth-child(3){animation-delay:calc(var(--beat)*1)}.conducted-word>span:nth-child(4){animation-delay:calc(var(--beat)*1.5)}.conducted-word>span:nth-child(5){animation-delay:calc(var(--beat)*2)}.conducted-word>i{position:absolute;bottom:18px;right:-2px;width:13px;height:13px;border-radius:50%;background:var(--signal);animation:dot-conduct var(--cycle) cubic-bezier(.45,0,.35,1) infinite}.conductor-score{display:flex;justify-content:center;gap:10px;margin-top:2px}.conductor-score>i{width:3px;height:3px;border-radius:50%;background:var(--ink);opacity:.15}.conductor-score>i:nth-child(3){background:var(--signal);opacity:.8}.mock-workspace,.inline-description{display:none}.stage[data-context=overlay]{--context-scale:.77}.stage[data-context=overlay] .mock-workspace{display:flex;position:absolute;inset:53px 30px;border:1px solid var(--hairline);border-radius:7px;overflow:hidden;color:var(--ink);opacity:.4;filter:blur(.7px)}.mock-rail{border-right:1px solid var(--hairline);width:49px;padding:16px 13px;display:flex;flex-direction:column;gap:22px}.mock-rail .brand-symbol{transform:rotate(-12deg) scale(.65);transform-origin:left top;height:22px}.mock-rail>b{width:15px;height:15px;border:1px solid var(--muted);border-radius:4px}.mock-plan{flex:1;min-width:0}.mock-title{font-size:13px;font-weight:650;padding:18px;border-bottom:1px solid var(--hairline)}.mock-title>span{float:right;font-size:10px;font-weight:400;color:var(--muted)}.mock-days{display:flex;border-bottom:1px solid var(--hairline);padding:10px 0 10px 25%}.mock-days>span{flex:1;font-size:8px;text-align:center}.mock-rows{height:210px;padding:18px 15%;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),var(--hairline) calc(20% - 1px),var(--hairline) 20%)}.mock-rows>i{display:block;width:45%;height:9px;border-radius:4px;background:var(--muted);margin-bottom:22px;opacity:.4}.mock-rows>i:nth-child(2){margin-left:20%;width:60%}.mock-rows>i:nth-child(3){margin-left:40%;width:40%}.mock-rows>i:nth-child(4){width:30%}.mock-rows>i:nth-child(5){margin-left:30%;width:60%}.stage[data-context=overlay] .loader-core{background:var(--surface);border:1px solid var(--hairline);border-radius:13px;padding:22px 16px 25px;box-shadow:0 16px 70px #0000000a}.stage[data-context=inline]{--context-scale:.3}.stage[data-context=inline] .preview-body{padding:65px 32px;gap:0}.stage[data-context=inline] .inline-description{display:flex;align-items:center;gap:15px;position:relative;z-index:2}.inline-file{width:41px;height:45px;border:1px solid var(--hairline);border-radius:6px;font-size:29px;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--surface)}.inline-description strong{display:block;font-size:13px;font-weight:600;white-space:nowrap}.inline-description div>span{font-size:10px;color:var(--muted);display:block;margin-top:6px;white-space:nowrap}.stage[data-context=inline] .loader-core{width:142px;height:80px;flex-shrink:1;min-width:115px}.stage[data-context=inline] .animation-window{position:absolute}.stage[data-context=inline] .loading-copy,.stage[data-context=inline] .beat-count{display:none}.stage[data-context=inline] .preview-body:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(calc(100% - 64px),550px);height:100px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface);box-shadow:0 4px 14px #00000003}.stage[data-theme=dark]{--ink:#efefe9;--muted:#96968d;--surface:#292926;--hairline:#44443e;border-color:#292926}.stage[data-accent=mono]{--signal:var(--ink)}.stage[data-paused=true] *{animation-play-state:paused!important}.stage[data-calm=true] *{animation:none!important}.stage[data-calm=true] .beat-count i{opacity:.3}.stage[data-calm=true] .beat-count i:first-child{background:var(--signal);opacity:1}.stage[data-calm=true] .groove-playhead{left:75%}.stage[data-calm=true] .groove-track b{opacity:0}@keyframes signature-stroke{0%,12%,52%,to{transform:translateY(0) scaleX(1)}25%{transform:translateY(calc(var(--lift)*-1)) scaleX(var(--squash)) rotate(calc(var(--tilt)*-1))}38%{transform:translateY(calc(var(--lift)*.3)) scaleX(1)}}@keyframes period-tap{0%,to{transform:translateY(0)}42%{transform:translateY(calc(var(--lift)*-.65))}75%{transform:translateY(0) scaleY(.88)}}@keyframes count-beat{0%,19%{background:var(--signal);opacity:1}24%,to{background:var(--ink);opacity:.12}}@keyframes live-pulse{0%,to{opacity:.45}40%{opacity:1}}@keyframes task-groove{0%,to{transform:scaleX(var(--groove-rest,.325));opacity:.2}35%,65%{transform:translateY(calc(var(--lift)*-.2)) scaleX(1);opacity:1}80%{transform:scaleX(1);opacity:.2}}@keyframes groove-check{0%,40%,85%,to{opacity:0}50%,70%{opacity:1}}@keyframes groove-scan{0%{transform:translate(0);opacity:0}10%,90%{opacity:.6}to{transform:translate(240px);opacity:0}}@keyframes letter-nod{0%,8%,32%,to{transform:translateY(0)}20%{transform:translateY(var(--letter-lift)) rotate(calc(var(--tilt)*-.22))}}@keyframes dot-conduct{0%,to{transform:translate(0)}12%{transform:translate(-214px,var(--dot-lift))}28%{transform:translate(-170px,calc(var(--dot-lift)*1.15))}44%{transform:translate(-123px,var(--dot-lift))}60%{transform:translate(-74px,calc(var(--dot-lift)*1.15))}76%{transform:translate(-25px,var(--dot-lift))}90%{transform:translateY(-15px)}}.stage[data-concept=swing] .concept-swing,.stage[data-concept=ripple] .concept-ripple,.stage[data-concept=field] .concept-field{display:block}.metronome{width:160px;height:95px;position:relative;margin:auto}.metronome-ticks{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-start;padding:3px 7px}.metronome-ticks>i{height:9px;width:1px;background:var(--muted);opacity:.45}.metronome-ticks>i:nth-child(2),.metronome-ticks>i:nth-child(4){height:6px;margin-top:7px}.metronome-ticks>i:nth-child(3){height:12px;background:var(--signal);opacity:.9;margin-top:13px}.metronome-arm{position:absolute;left:calc(50% - 1.5px);bottom:4px;height:79px;width:3px;background:var(--ink);border-radius:4px;transform-origin:50% calc(100% - 4px);animation:pendulum-swing calc(var(--beat)*2) cubic-bezier(.45,0,.55,1) infinite}.metronome-arm>i{position:absolute;top:6px;left:-6px;width:15px;height:15px;border:3px solid var(--signal);background:var(--surface);border-radius:50%}.metronome>b{position:absolute;bottom:3px;left:calc(50% - 6px);width:12px;height:12px;border:3px solid var(--ink);border-radius:50%;background:var(--surface)}.concept-swing>.groove-word{margin-top:1px;font-size:23px}.ripple-field,.rhythm-field{display:none;pointer-events:none;position:absolute;inset:0;overflow:hidden;z-index:0}.stage[data-concept=ripple]:not([data-context=inline]) .ripple-field{display:block}.ripple-field>i{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border:1.5px solid var(--ink);border-radius:50%;opacity:0;animation:room-ripple calc(var(--cycle)*2) linear infinite;animation-delay:calc(var(--n)*var(--cycle)*-.4)}.ripple-field>i:nth-child(2n){border-color:var(--signal)}.stage[data-concept=ripple] .rhythm-mark i{animation:signature-stroke var(--cycle) ease-in-out infinite}.stage[data-concept=field]:not([data-context=inline]) .rhythm-field{display:flex;align-items:center;gap:2%;padding:0 2%}.rhythm-field>i{display:block;height:82%;flex:1;border-radius:100px;background:var(--ink);opacity:.085;animation:field-wave var(--cycle) ease-in-out infinite;animation-delay:calc(var(--n)*var(--beat)*-.22);transform-origin:50% 50%}.rhythm-field>i:nth-child(6n+2){background:var(--signal);opacity:.15}.stage[data-concept=field] .rhythm-mark i{animation:signature-stroke var(--cycle) ease-in-out infinite}.stage[data-calm=true] .ripple-field>i{animation:none;opacity:.08;transform:translate(-50%,-50%) scale(calc(.4 + var(--n)*.4))}.stage[data-calm=true] .rhythm-field>i{transform:scaleY(.35);opacity:.05}.stage[data-calm=true] .rhythm-field>i:nth-child(3n){transform:scaleY(.65)}.app-loading-motion.stage{width:100%;height:100dvh;min-height:100dvh;border:0;border-radius:0;box-shadow:none;--context-scale:1}.app-loading-motion .preview-body{padding:60px 20px}.app-loading-motion .loading-copy{font-family:DM Sans,sans-serif}.app-loading-motion .concept-ripple,.app-loading-motion .concept-field{position:relative}@keyframes pendulum-swing{0%,to{transform:rotate(calc(var(--swing,25deg)*-1))}50%{transform:rotate(var(--swing,25deg))}}@keyframes room-ripple{0%{transform:translate(-50%,-50%) scale(.16);opacity:0}10%{opacity:var(--ripple-strength,.22)}to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}@keyframes field-wave{0%,to{transform:scaleY(var(--field-low,.15))}50%{transform:scaleY(1)}}@media(max-width:600px){.app-loading-motion .loader-core{--context-scale:.8}.app-loading-motion .ripple-field>i{width:140%}}
