/* one surface colour: neumorphism needs bg == surface */
:root{--bg:#E0E5EC;--surf:#E0E5EC;--ink:#2A3140;--mute:#4F5B70;--acc:#B93210;--accfill:#B93210;--sd:#A3B1C6;--sl:#FFFFFF;--line:rgba(42,49,64,.14);
--r:24px;--rs:12px;--ease:cubic-bezier(.22,.8,.24,1);
--serif:'Instrument Serif',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace}
[data-theme=dark]{--bg:#1F2530;--surf:#1F2530;--ink:#E6E9EF;--mute:#A3ACBD;--acc:#FF7A4D;--accfill:#B93210;--sd:#11141A;--sl:#2D3544;--line:rgba(230,233,239,.14)}
*{box-sizing:border-box;margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);overflow-x:hidden;transition:background .4s var(--ease),color .4s var(--ease)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme=dark] body::after{mix-blend-mode:screen;opacity:.05}
svg{display:block}.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.mono{font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mute{color:var(--mute)}.pill{display:inline-block;padding:8px 24px;border-radius:99px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:.95}
h1{font-size:clamp(3.25rem,8vw,7.5rem)}h2{font-size:clamp(2.5rem,6vw,5rem)}h3{font-size:2rem;line-height:1.05}
em{font-style:italic;color:var(--acc)}
/* surfaces */
.raise{background:linear-gradient(145deg,color-mix(in srgb,var(--sl) 30%,var(--surf)),var(--surf) 70%);border-radius:var(--r);box-shadow:12px 12px 24px var(--sd),-12px -12px 24px var(--sl);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.sunk{background:var(--bg);border-radius:var(--rs);box-shadow:inset 3px 4px 8px var(--sd),inset -3px -3px 8px var(--sl)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 24px;border:0;border-radius:var(--rs);background:var(--surf);cursor:pointer;text-decoration:none;font-weight:700;font-size:.9375rem;
box-shadow:3px 4px 8px var(--sd),-3px -3px 8px var(--sl);transition:transform .25s var(--ease),box-shadow .25s var(--ease),color .25s}
.btn:hover{transform:translateY(-2px);box-shadow:6px 9px 16px var(--sd),-5px -5px 12px var(--sl)}
.btn:active,.btn[aria-pressed=true]{transform:translateY(1px);box-shadow:inset 3px 3px 7px var(--sd),inset -3px -3px 7px var(--sl);color:var(--acc)}
.btn.hot{background:var(--accfill);color:#fff;box-shadow:3px 5px 12px rgba(185,50,16,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.hot:active{box-shadow:inset 3px 3px 8px rgba(0,0,0,.35);color:#fff}
.btn.sq{width:48px;padding:0}
.btn:hover .arr{transform:translateX(4px)}.arr{transition:transform .25s var(--ease)}
/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);box-shadow:0 10px 24px -8px var(--sd);transition:background .4s var(--ease)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:16px}
.logo{font:400 1.75rem/1 var(--serif);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo svg{width:24px;height:24px}
nav{display:flex;gap:32px}nav a{font-size:.9375rem;text-decoration:none;position:relative;padding:4px 0}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav a:hover::after{transform:scaleX(1)}
.tools{display:flex;gap:12px}.menu{display:none}
@media(max-width:860px){nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);padding:8px 24px 24px;border-bottom:1px solid var(--line)}
nav.open{display:flex}nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:1.25rem}.menu{display:inline-flex}.tools .hot{display:none}}
/* hero */
.hero{position:relative;padding:clamp(48px,8vw,120px) 0 96px}
.rings{position:absolute;right:-12%;top:0;width:min(900px,120vw);opacity:.5;pointer-events:none;z-index:0}
.rings circle{fill:none;stroke:var(--line);stroke-width:1}
.hgrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.htxt{grid-column:1/-1}
.htxt h1{margin:24px 0 32px}.htxt p{max-width:30ch;font-size:1.25rem;color:var(--mute)}.htxt p.pill{max-width:none;font-size:.75rem}
.acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.dialcard{grid-column:1/-1;padding:32px;max-width:480px;justify-self:center;width:100%}
@media(min-width:980px){.htxt{grid-column:1/8}.dialcard{grid-column:8/13}.htxt h1{position:relative;z-index:2}}
.dialhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.dialwrap{position:relative;width:100%;aspect-ratio:1;touch-action:none;cursor:grab;border-radius:50%}
.dialwrap:active{cursor:grabbing}.dialwrap::before{content:"";position:absolute;inset:11%;border-radius:50%;box-shadow:inset 8px 10px 20px var(--sd),inset -8px -8px 20px var(--sl)}.ticks{position:absolute;inset:0;width:100%;height:100%}
.ticks line{stroke:var(--line);stroke-width:2;stroke-linecap:round;transition:stroke .3s}.ticks line.on{stroke:var(--acc);filter:drop-shadow(0 0 3px var(--acc))}
.knob{position:absolute;inset:17%;border-radius:50%;background:linear-gradient(145deg,var(--sl),var(--surf) 60%);box-shadow:8px 12px 24px var(--sd),-6px -6px 16px var(--sl),0 0 0 8px var(--bg),0 0 0 9px var(--line);transition:transform .35s var(--ease)}
.dialwrap.drag .knob{transition:none}
.knob::before{content:"";position:absolute;top:8%;left:50%;width:6px;height:18%;margin-left:-3px;border-radius:3px;background:var(--acc)}
.read{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.read b{font:400 clamp(3.5rem,9vw,5rem)/1 var(--serif);letter-spacing:-.04em}.read span{margin-top:4px}
.dial.off .knob{filter:grayscale(1) opacity(.6)}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.modes .btn{padding:0;font-size:.875rem}
.pow{display:flex;gap:8px;align-items:center}
/* ledger strip */
.strip{overflow:hidden;padding:24px 0;box-shadow:inset 6px 8px 16px var(--sd),inset -6px -6px 16px var(--sl)}
.strip div{display:flex;gap:48px;white-space:nowrap;width:max-content;animation:slide 40s linear infinite}
.strip span{display:inline-flex;align-items:center;gap:48px}.strip span::after{content:"";width:8px;height:8px;background:var(--acc);border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}
.strip{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.strip:hover div{animation-play-state:paused}
.bench .card.raise:hover{transform:translateY(-4px);box-shadow:16px 18px 32px var(--sd),-14px -14px 28px var(--sl)}
.card>header h3::before{content:"";display:inline-block;width:8px;height:8px;margin-right:12px;vertical-align:middle;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.sh>div>p.mono,.cgrid>div>p.mono{display:inline-block;padding:6px 16px;border-radius:99px;box-shadow:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl)}
::selection{background:var(--acc);color:#fff}
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bg);border:2px solid var(--bg);border-radius:8px;box-shadow:inset 2px 2px 4px var(--sd),inset -2px -2px 4px var(--sl)}
.facts{display:flex;flex-wrap:wrap;gap:24px 48px;margin:56px 0 0;padding-top:32px;border-top:1px solid var(--line)}.facts dt{margin-bottom:8px}.facts dd{margin:0;font:400 clamp(2.25rem,4vw,3rem)/1 var(--serif);letter-spacing:-.02em}
nav a[aria-current=true]{color:var(--acc)}nav a[aria-current=true]::after{transform:scaleX(1)}
#up{position:fixed;right:24px;bottom:24px;z-index:60;opacity:0;pointer-events:none;transform:translateY(16px)}#up.show{opacity:1;pointer-events:auto;transform:none}
/* hero shapes */
.shapes{display:none;position:absolute;right:6%;bottom:-40px;width:280px;height:120px;z-index:2;pointer-events:none}
@media(min-width:980px){.shapes{display:block}}
.shapes i{position:absolute;display:block;animation:fl 7s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes fl{50%{transform:translateY(-8px)}}
.s1,.s4{background:linear-gradient(145deg,color-mix(in srgb,var(--sl) 40%,var(--surf)),var(--surf));box-shadow:10px 10px 20px var(--sd),-10px -10px 20px var(--sl)}
.s1{left:0;bottom:0;width:88px;height:88px;border-radius:50%}
.s2{left:104px;bottom:56px;width:56px;height:56px;border-radius:50%;box-shadow:inset 6px 6px 12px var(--sd),inset -6px -6px 12px var(--sl);--dl:-2s}
.s3{left:132px;bottom:0;width:112px;height:44px;border-radius:22px;box-shadow:inset 4px 4px 8px var(--sd),inset -4px -4px 8px var(--sl);--dl:-4s}
.s3::after{content:"";position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;background:var(--accfill);box-shadow:3px 3px 6px var(--sd),0 0 14px color-mix(in srgb,var(--acc) 55%,transparent)}
.s4{right:0;top:0;width:72px;height:72px;border-radius:20px;--dl:-1s}
.s4::after{content:"";position:absolute;inset:28px;border-radius:50%;background:var(--accfill);box-shadow:0 0 14px var(--acc)}
/* compare */
.cmp{position:relative;height:clamp(440px,54vw,520px);overflow:hidden;--p:50%}
.pane{position:absolute;inset:0;display:grid;place-items:center;padding:24px}
.pane.soft{background:var(--bg)}
.pane.flat{background:color-mix(in srgb,var(--sl) 60%,var(--bg));clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.lbl{position:absolute;top:24px;padding:6px 16px;border-radius:99px}
.flat .lbl{left:24px;border:1px solid var(--line)}.soft .lbl{right:24px;box-shadow:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl)}
.ui{width:min(360px,100%);display:grid;gap:24px;padding:32px;border-radius:var(--r)}
.ui h3{font-size:1.75rem}
.ui .f{height:52px;padding:0 20px;display:flex;align-items:center;color:var(--mute);border-radius:12px}
.ui .r{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ui .t{flex:none;width:56px;height:32px;border-radius:16px;position:relative}
.ui .t::after{content:"";position:absolute;top:4px;left:28px;width:24px;height:24px;border-radius:50%;background:var(--accfill)}
.ui .bt{flex:1;height:48px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:.9375rem}
.ui .bt.p{background:var(--accfill);color:#fff}
.ui .pr{height:12px;border-radius:6px;position:relative}.ui .pr::after{content:"";position:absolute;inset:0 auto 0 0;width:68%;border-radius:6px;background:var(--acc)}
.soft .ui{box-shadow:12px 12px 24px var(--sd),-12px -12px 24px var(--sl)}
.soft .f,.soft .pr{box-shadow:inset 3px 4px 8px var(--sd),inset -3px -3px 8px var(--sl)}
.soft .t{box-shadow:inset 2px 3px 6px var(--sd),inset -2px -2px 6px var(--sl)}.soft .t::after{box-shadow:2px 3px 6px var(--sd)}
.soft .bt{box-shadow:5px 5px 10px var(--sd),-5px -5px 10px var(--sl)}
.flat .ui{border:1px solid var(--line);background:color-mix(in srgb,var(--sl) 40%,var(--bg))}
.flat .f,.flat .bt{border:1px solid var(--line)}.flat .bt.p{border-color:transparent}
.flat .t,.flat .pr{background:var(--line)}.flat .pr::after{background:var(--acc)}
.hd{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--acc);z-index:2;pointer-events:none}
.kn{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;background:var(--surf);color:var(--acc);box-shadow:5px 5px 10px var(--sd),-5px -5px 10px var(--sl)}
.cmpr{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.cmp:has(.cmpr:focus-visible){outline:2px solid var(--acc);outline-offset:4px}
/* sections */
section{padding:clamp(80px,12vw,160px) 0}
.sh{display:grid;gap:24px;margin-bottom:clamp(48px,7vw,88px)}
.sh p{max-width:44ch;color:var(--mute);font-size:1.125rem}
@media(min-width:980px){.sh{grid-template-columns:5fr 4fr;align-items:end}}
.bench{display:grid;gap:32px;grid-template-columns:1fr}
.card{padding:32px;display:flex;flex-direction:column;min-width:0}
.card>header{all:unset;display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}
.card>header h3{font-size:1.75rem}
@media(min-width:720px){.bench{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.bench{grid-template-columns:repeat(12,1fr)}.c4{grid-column:span 4}.c5{grid-column:span 5}.c7{grid-column:span 7}.ctl2{grid-template-columns:1fr 1fr}}
.push{margin-top:auto;padding-top:24px}
.disp{padding:16px 24px;text-align:right;margin-bottom:24px;min-height:104px}
.disp small{display:block;min-height:24px;color:var(--mute);font-family:var(--mono)}.disp output{font:400 3.25rem/1.1 var(--serif);display:block;overflow:hidden;text-overflow:ellipsis}
.keys{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(64px,1fr);gap:16px}.keys .btn{padding:0;min-height:0;font-size:1.25rem}.keys .op{color:var(--acc)}.keys .eq{grid-row:span 2}.keys .z{grid-column:span 2}
.art{display:flex;gap:24px;align-items:center;margin-bottom:24px}
.disc{flex:none;width:96px;height:96px;border-radius:50%;background:conic-gradient(from 20deg,var(--ink),var(--mute),var(--ink),var(--mute),var(--ink));position:relative;box-shadow:6px 8px 16px var(--sd),-4px -4px 12px var(--sl)}
.disc::after{content:"";position:absolute;inset:36%;border-radius:50%;background:var(--accfill);box-shadow:0 0 0 5px var(--surf)}
.spin{animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.art h3{margin-bottom:4px}
.rg{width:100%;-webkit-appearance:none;appearance:none;height:12px;border-radius:6px;background:var(--bg);box-shadow:inset 2px 2px 5px var(--sd),inset -2px -2px 5px var(--sl);cursor:pointer}
.rg::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--surf);border:0;box-shadow:3px 4px 8px var(--sd),0 0 0 4px var(--bg),0 0 0 6px var(--acc)}
.rg::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--surf);border:0;box-shadow:3px 4px 8px var(--sd),0 0 0 4px var(--bg),0 0 0 6px var(--acc)}
.times{display:flex;justify-content:space-between;margin:8px 0 24px;color:var(--mute)}
.ctl{display:flex;gap:16px;align-items:center;justify-content:center}.ctl .btn{min-width:56px;min-height:56px}
.vol{display:flex;gap:16px;align-items:center;margin:24px 0}
.fld{display:block;margin-bottom:24px}.fld span{display:block;margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;padding:16px 20px;border:0;background:var(--bg);border-radius:var(--rs);box-shadow:inset 3px 4px 8px var(--sd),inset -3px -3px 8px var(--sl)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mute);opacity:.8}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.sw{position:relative;flex:none;width:64px;height:36px}.sw input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.sw i{position:absolute;inset:0;border-radius:18px;background:var(--bg);box-shadow:inset 2px 3px 6px var(--sd),inset -2px -2px 6px var(--sl);transition:background .3s}
.sw i::after{content:"";position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:var(--surf);box-shadow:2px 3px 6px var(--sd),inset 1px 1px 0 var(--sl);transition:transform .3s var(--ease),background .3s}
.sw input:checked+i::after{transform:translateX(28px);background:var(--accfill)}
.sw input:focus-visible+i{outline:2px solid var(--acc);outline-offset:3px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;margin-top:24px}.seg .btn{min-height:40px;padding:0;box-shadow:none;background:transparent;font-size:.875rem}
.seg .btn[aria-pressed=true]{background:var(--surf);box-shadow:2px 3px 6px var(--sd);transform:none}
.kpi{margin-bottom:24px}.kpi b{display:block;font:400 2.75rem/1 var(--serif);letter-spacing:-.02em}
.kpi small{color:var(--mute)}.up{color:var(--acc)}
.bars{flex:1;min-height:128px;display:flex;gap:8px;padding:12px}
.bars div{flex:1;position:relative}
.bars div::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--h,50%);border-radius:6px 6px 2px 2px;background:linear-gradient(var(--acc),var(--accfill));box-shadow:2px 3px 6px var(--sd);transition:height .6s var(--ease)}
/* more components */
.q{margin-top:auto;display:grid;gap:8px;padding:8px}
.q button{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:48px;padding:0 16px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left;transition:all .25s var(--ease)}
.q button[aria-pressed=true]{background:var(--surf);color:var(--acc);box-shadow:3px 4px 8px var(--sd),-3px -3px 8px var(--sl)}
.lg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lg .btn{flex-direction:column;gap:8px;min-height:112px;padding:0 8px;font-weight:500}.lg .btn svg{width:28px;height:28px}
.lg .btn[aria-pressed=true] svg{filter:drop-shadow(0 0 6px var(--acc))}
.ring{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
.ring svg{width:100%;max-width:104px;margin:0 auto;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}.ring .tr{stroke:var(--sd);opacity:.45}
.ring .pg{stroke:var(--acc);stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset 1.4s var(--ease) .3s}
.in .ring .pg{stroke-dashoffset:calc(226 * (1 - var(--v)))}
.ring b{display:block;font:400 1.75rem/1.1 var(--serif);margin-top:8px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}
.cal .wd{padding:8px 0;color:var(--mute)}
.cal button{aspect-ratio:1;border:0;border-radius:50%;background:transparent;cursor:pointer;font-weight:500;transition:all .25s var(--ease)}
.cal button:hover{box-shadow:3px 3px 6px var(--sd),-3px -3px 6px var(--sl)}
.cal button.today{box-shadow:0 0 0 2px var(--acc)}
.cal button[aria-pressed=true]{color:var(--acc);font-weight:700;box-shadow:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl)}
.chips{display:flex;flex-wrap:wrap;gap:12px}.chips .btn{min-height:44px;padding:0 20px;border-radius:99px;font-weight:500}
.opt{display:flex;gap:16px;align-items:center;cursor:pointer;padding:8px 0;position:relative}
.opt input{position:absolute;opacity:0;width:28px;height:28px;margin:0;cursor:pointer}
.opt i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg);box-shadow:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl);display:grid;place-items:center}
.opt.cb i{border-radius:8px}
.opt input:checked+i::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.opt.cb input:checked+i::after{border-radius:3px}
.opt input:focus-visible+i{outline:2px solid var(--acc);outline-offset:3px}
.ctl2{display:grid;gap:32px}
.lab{display:block;margin-bottom:16px}
.step{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}
.step output{font:400 2.5rem/1 var(--serif);min-width:2ch;text-align:center}
.mail{display:inline-block;margin-top:32px;font:400 clamp(1.5rem,3.2vw,2.5rem)/1.15 var(--serif);letter-spacing:-.02em;text-decoration:none;border-bottom:2px solid var(--acc);word-break:break-all;transition:color .25s}
.mail:hover{color:var(--acc)}
#prog{position:fixed;top:0;left:0;right:0;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;z-index:70;pointer-events:none}
/* studio */
.sgrid{display:grid;gap:48px}
@media(min-width:980px){.sgrid{grid-template-columns:4fr 6fr;gap:80px}}
.panel{padding:32px;display:flex;flex-direction:column}.panel.l{justify-content:space-between}
.ctrl{margin-bottom:32px}.ctrl label{display:flex;justify-content:space-between;margin-bottom:16px}
.stage{flex:1;display:grid;place-items:center;padding:clamp(40px,8vw,96px);border-radius:var(--r);background:var(--bg);box-shadow:inset 10px 10px 20px var(--sd),inset -10px -10px 20px var(--sl)}
.stage div{width:min(260px,100%);aspect-ratio:1;display:grid;place-items:center;color:var(--mute);transition:all .2s}
pre{margin-top:32px;padding:24px;border-radius:var(--rs);font:400 .875rem/1.7 var(--mono);white-space:pre-wrap;word-break:break-all;background:var(--bg);box-shadow:inset 4px 5px 10px var(--sd),inset -4px -4px 10px var(--sl)}
.tg{display:flex;gap:8px;padding:8px;border-radius:var(--rs);background:var(--bg);box-shadow:inset 3px 4px 8px var(--sd),inset -3px -3px 8px var(--sl)}
.tg button{flex:1;min-height:44px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-weight:500;transition:all .25s var(--ease)}
.tg button[aria-pressed=true]{background:var(--surf);color:var(--acc);box-shadow:3px 4px 8px var(--sd),-3px -3px 8px var(--sl)}
#playground .btn{margin-top:24px;width:100%}
/* ledger pricing */
.tier{display:grid;gap:16px;padding:40px;margin-bottom:40px;position:relative;border-radius:var(--r);background:linear-gradient(145deg,color-mix(in srgb,var(--sl) 30%,var(--surf)),var(--surf) 70%);box-shadow:12px 12px 24px var(--sd),-12px -12px 24px var(--sl);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tier:hover{transform:translateY(-4px);box-shadow:16px 18px 32px var(--sd),-14px -14px 28px var(--sl)}
.tier.pop{box-shadow:12px 12px 24px var(--sd),-12px -12px 24px var(--sl),0 0 0 2px var(--acc)}
.tier h3{font-size:clamp(2.25rem,4vw,3.5rem)}.price{font:400 clamp(3rem,6vw,5rem)/1 var(--serif)}.price small{font:500 .75rem var(--mono);color:var(--mute);margin-left:8px;letter-spacing:.1em}
.tier ul{list-style:none;padding:0;display:grid;gap:8px;color:var(--mute)}
.tier li{display:flex;gap:12px;align-items:flex-start}.tier li .i{flex:none;margin-top:4px;color:var(--acc);width:16px;height:16px;stroke-width:2.5}
.tag{display:inline-block;margin-bottom:12px;padding:4px 12px;border-radius:99px;background:var(--accfill);color:#fff}
@media(min-width:980px){.tier{grid-template-columns:4fr 3fr 4fr 2fr;gap:48px;align-items:center}.tier .btn{justify-self:end}}
/* contact */
.cgrid{display:grid;gap:56px}@media(min-width:980px){.cgrid{grid-template-columns:5fr 6fr;gap:96px;align-items:start}}
.cgrid h2{margin:24px 0}.two{display:grid;gap:0 24px}@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}
footer{padding:48px 0 0;overflow:hidden}
footer .big{font:400 clamp(4rem,31vw,28rem)/1 var(--serif);letter-spacing:-.05em;margin:32px 0 0;color:var(--bg);text-shadow:10px 10px 20px var(--sd),-10px -10px 20px var(--sl);white-space:nowrap;padding:0 .1em .2em}
footer .wrap>div{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
footer a{text-decoration:none}footer a:hover{color:var(--acc)}
dialog{margin:auto;border:0;padding:40px;width:min(480px,calc(100% - 32px));color:var(--ink)}
dialog::backdrop{background:rgba(30,36,48,.55);backdrop-filter:blur(4px)}
dialog[open]{animation:pop .35s var(--ease)}@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin:24px 0;padding:16px 0;border-block:1px solid var(--line)}
.tot b{font:400 2.5rem/1 var(--serif)}
.x{position:absolute;top:16px;right:16px}
#toast{position:fixed;left:50%;bottom:24px;z-index:100;padding:16px 24px;border-radius:var(--rs);background:var(--surf);color:var(--ink);box-shadow:8px 8px 18px var(--sd),-8px -8px 18px var(--sl);transform:translate(-50%,160%);transition:transform .35s var(--ease);max-width:calc(100% - 32px);font-size:.9375rem}
#toast.show{transform:translate(-50%,0)}
.cur{position:fixed;left:0;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;border:1.5px solid var(--acc);border-radius:50%;pointer-events:none;z-index:99;opacity:0;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,opacity .3s}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:color-mix(in srgb,var(--acc) 14%,transparent)}
@media(pointer:coarse){.cur{display:none}}
/* motion */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.ld{animation:up .9s var(--ease) both;animation-delay:calc(var(--i)*90ms + 100ms)}
@keyframes up{from{opacity:0;transform:translateY(40px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}.cur{display:none}}