/* Common timing, focus and surface treatments for the PaybackBet workspace. */
:root{--settle:cubic-bezier(.2,.8,.23,1);--studio-mint:var(--cyan,#abf5d2);--studio-key:var(--text,#edf2f1);--studio-hair:var(--line,#7cae991f)}
html{scroll-padding-top:96px}
#workflow .steps-stage{list-style:none;margin:0;padding:0}
:where(.future-site,.future-dashboard) :where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--studio-mint);outline-offset:3px}
:where(.future-site,.future-dashboard) :is(.price strong,.order-price strong,.payment-amount strong,.result strong,.usage-metrics b,.session-stats strong,output){font-variant-numeric:tabular-nums}
.headline-line{display:block;overflow:hidden;padding:.08em 0;margin:-.08em 0}
.headline-line>span{display:inline-block}
.orb-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;fill:none}
.ai-orb-scene{touch-action:pan-y pinch-zoom}
.ai-orb-scene .orb-caption{bottom:2%}
.rim-ticks{stroke:#adceea;stroke-opacity:.38;stroke-width:.4;stroke-dasharray:.08 3.92}
.rim-dot{transform-origin:50px 47.7px;fill:#aae8e2;stroke:none}
:root[data-theme=light] .orb-frame{--studio-key:#1d3853}
:root[data-theme=light] .rim-ticks{stroke:#496f94}
:root[data-theme=light] .rim-dot{fill:#407e87}
.future-site .desktop-nav a{position:relative}
.future-site .desktop-nav a::after{content:'';position:absolute;bottom:0;inset-inline:0;height:1px;background:var(--studio-mint);transform:scaleX(0);transform-origin:left}
.future-site .desktop-nav a.active::after,.future-site .desktop-nav a:focus-visible::after{transform:scaleX(1)}
#plans .period-switch{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch;padding:4px}
#plans .period-switch::before{content:'';position:absolute;inset:4px auto 4px 4px;width:calc(50% - 4px);border-radius:6px;background:var(--accent,#b1fbd6);z-index:-1}
#plans .period-switch:has([data-period=year][aria-pressed=true])::before{transform:translateX(100%)}
#plans .period-switch button{position:relative;min-height:36px;background:none;border:0}
#plans .period-switch button.active{background:transparent;color:#103528;box-shadow:none}
#plans .period-switch button.active small{color:#21503c;background:#174a3520}
.round-trace{margin:0 clamp(14px,3vw,32px) 24px;padding:16px clamp(12px,2.5vw,22px) 12px;border:1px solid var(--studio-hair);border-radius:14px;background:linear-gradient(120deg,#84bca709,transparent 65%),var(--bg,#0b1217);color:var(--studio-key)}
.round-trace[hidden]{display:none}
.round-trace figcaption,.round-trace figcaption>div,.trace-key,.trace-key>span{display:flex;align-items:center}
.round-trace figcaption{justify-content:space-between;gap:10px}.round-trace figcaption>div{gap:12px;flex-wrap:wrap}
.trace-section,.trace-round,.trace-key small{font:500 10px/1.4 var(--mono,monospace);letter-spacing:.04em}
.trace-section{color:var(--studio-key);letter-spacing:.11em}.trace-round,.trace-key{color:var(--muted,#a3b3bd)}
.round-trace output{font:600 20px/1.25 var(--display,sans-serif);font-variant-numeric:tabular-nums;min-width:5ch;text-align:right}
.trace-plot{position:relative;height:clamp(85px,12vw,130px);margin:8px 0 4px;border-radius:5px}
.trace-plot svg,.trace-plot input{position:absolute;inset:0;display:block;width:100%;height:100%}
.trace-plot input{appearance:none;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}
.trace-plot input::-webkit-slider-thumb{appearance:none;width:3.4%;height:32px}.trace-plot input::-moz-range-thumb{width:3.4%;height:32px;border:0}
.trace-plot:focus-within{outline:2px solid var(--studio-mint);outline-offset:2px}
.trace-grid,.trace-boundary,.trace-guide,.trace-line{vector-effect:non-scaling-stroke}
.trace-plot path[fill],.trace-dot{stroke:none}
.trace-grid{stroke:var(--studio-hair);stroke-dasharray:2 5}
.trace-boundary{stroke:var(--muted,#9cacc4);stroke-dasharray:3 5;opacity:.55}
.trace-line{fill:none;stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round}
.history-line{stroke:var(--studio-mint)}.upcoming-line{stroke:#8eaef5;stroke-dasharray:.026 .018}
.trace-dot{fill:var(--studio-mint)}.future-dot{fill:#9fbaff}
.trace-guide{stroke:var(--studio-key);stroke-dasharray:2 3;opacity:.36}
.trace-point{fill:var(--studio-mint);stroke:var(--bg,#071016);stroke-width:2;vector-effect:non-scaling-stroke}
.trace-point.future-dot{fill:#9fbaff}
.trace-key{gap:15px;font-size:11px;flex-wrap:wrap}.trace-key>span{gap:6px}.trace-key i{width:13px;height:2px;background:var(--studio-mint)}
.trace-key span:nth-child(2) i{background:repeating-linear-gradient(90deg,#91aff2 0 5px,transparent 5px 8px)}
.trace-key small{margin-left:auto;letter-spacing:0}
:root[data-theme=light] .upcoming-line{stroke:#4b70ab}
:root[data-theme=light] .future-dot{fill:#527bc0}
.sample-inputs>span.trace-active,.sample-outputs>div:has(b.trace-active){outline:1px solid var(--studio-mint);outline-offset:1px}
.entry-meter{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:12px;margin:16px 0 0;color:var(--muted,#94a9aa);font:500 11px/1.4 var(--display,sans-serif)}
.entry-meter progress{width:100%;height:4px;appearance:none;accent-color:var(--studio-mint);border:0;border-radius:5px;overflow:hidden;background:var(--card,#25333c)}
.entry-meter progress::-webkit-progress-bar{background:var(--card,#25333c)}.entry-meter progress::-webkit-progress-value{background:linear-gradient(90deg,#74bba5,var(--studio-mint))}
.entry-meter progress::-moz-progress-bar{background:var(--studio-mint)}#entry-count{font-variant-numeric:tabular-nums}
.future-dashboard .results-inputs{margin-top:12px}
.results-inputs label[data-filled] span{color:var(--studio-mint)}
.results-inputs label[data-filled]::after{content:'';position:absolute;inset-block-start:12px;inset-inline-end:11px;width:5px;height:5px;border-radius:50%;background:var(--studio-mint);pointer-events:none}
.order-steps{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto 16px;padding:0;list-style:none;color:var(--o-muted);font:500 11px/1.4 var(--display,sans-serif)}
.order-steps li{display:flex;align-items:center;gap:6px}.order-steps li+li::before{content:'';display:block;width:24px;height:1px;background:var(--o-edge);margin-inline-end:2px}
.order-steps b{display:grid;place-items:center;font:500 9px/1 var(--mono,monospace);width:24px;height:24px;border-radius:50%;border:1px solid var(--o-edge);font-variant-numeric:tabular-nums}
.order-steps [aria-current=step]{color:var(--o-text)}.order-steps [aria-current=step] b{color:var(--o-aqua);border-color:var(--o-aqua);background:var(--o-field)}
.auth-field:focus-within>span:first-child,.receipt-form label:focus-within{color:var(--o-aqua,var(--studio-mint))}
.account-mini-card:focus-visible,.account-mini-card:hover{border-color:var(--studio-mint)}
@keyframes pb-line-in{from{opacity:.22;transform:translateY(55%)}to{opacity:1;transform:none}}
@keyframes pb-enter{from{opacity:.5;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes pb-rim{from{transform:rotate(-26deg)}to{transform:rotate(24deg)}}
@keyframes pb-price-in{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  :root[data-motion=on] .headline-line>span{animation:pb-line-in .76s var(--settle) both}
  :root[data-motion=on] .headline-line:nth-child(2)>span{animation-delay:.09s}
  :root[data-motion=on] .future-hero-copy .hero-actions{animation:pb-enter .65s .16s var(--settle) both}
  :root[data-motion=on] .checkout-grid:not([data-stage=receipt]) .order-card{animation:pb-enter .32s var(--settle) both}
  :root[data-motion=on] .checkout-grid:not([data-stage=receipt]) #payment-step{animation:pb-enter .36s .045s var(--settle) both}
  :root[data-motion=on] .orb-frame{animation:pb-enter 1s var(--settle) both}
  :root[data-motion=on] .rim-dot{animation:pb-rim 16s ease-in-out infinite alternate;animation-play-state:paused}
  :root[data-motion=on] .ai-orb-scene[data-in-view=true] .rim-dot{animation-play-state:running}
  :root[data-motion=on] .desktop-nav a::after,:root[data-motion=on] .period-switch::before{transition:transform .34s var(--settle)}
  :root[data-motion=on] #plans[data-period-changing] .price strong{display:inline-block;animation:pb-price-in .32s var(--settle)}
  :root[data-motion=on] :is(.plan-button,.hero-primary,.pay-action,.auth-submit,.account-mini-card,.offer-entry button):active{scale:.984}
  :root[data-motion=on] :is(.plan-button,.hero-primary,.pay-action,.auth-submit,.account-mini-card,.offer-entry button){transition:scale .16s var(--settle),box-shadow .22s,border-color .22s,background-color .22s}
  :root[data-motion=on] :is(.receipt-form,.auth-panel,.profile-card,dialog[open]){animation:pb-enter .34s var(--settle)}
  :root[data-motion=on] .result.result-enter{animation:pb-enter .38s var(--settle) both;animation-delay:calc(var(--result-order,0) * 42ms)}
  :root[data-motion=on] .entry-meter progress::-webkit-progress-value{transition:width .22s var(--settle)}
}
@media(max-width:600px){html{scroll-padding-top:80px}.entry-meter{gap:8px}.trace-key{gap:8px 12px}.trace-key small{font-size:9px}.trace-round{font-size:9px}.orb-frame{opacity:.86}.order-steps{margin-bottom:12px}}
/* The example has its own light field; transforms keep the interface steady. */
.sequence-lab::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--flow-x,50%) var(--flow-y,40%),#8ef6d112,transparent 75%);z-index:0}
.sequence-lab>*{position:relative}
.sequence-lab .lab-connector>span{position:relative}
.sequence-lab .lab-connector>span::before,.sequence-lab .lab-connector>span::after{content:'';position:absolute;inset:-8px;border:1px solid #b1fbd629;border-radius:19px;pointer-events:none;opacity:0}
.sequence-lab .sample-inputs>span,.sequence-lab .sample-outputs>div{position:relative;overflow:hidden}
.sequence-lab .sample-inputs>span::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,#b1fbd62e 50%,transparent 80%);transform:translateX(-160%);pointer-events:none}
@keyframes pb-sample-scan{0%,55%{transform:translateX(-160%)}90%,100%{transform:translateX(160%)}}
@keyframes pb-link-ring{0%{transform:scale(.88) rotate(0);opacity:0}22%{opacity:.65}100%{transform:scale(1.65) rotate(25deg);opacity:0}}
@keyframes pb-outcome-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(prefers-reduced-motion:no-preference){
 :root[data-motion=on] .sequence-lab[data-motion-visible] .lab-connector>span::before{animation:pb-link-ring 3.6s ease-out infinite}
 :root[data-motion=on] .sequence-lab[data-motion-visible] .lab-connector>span::after{animation:pb-link-ring 3.6s 1.8s ease-out infinite}
 :root[data-motion=on] .sequence-lab[data-motion-visible] .lab-connector>i::after{animation:dimension-flow 2s linear infinite}
 :root[data-motion=on] .sequence-lab[data-motion-visible] .sample-inputs>span::after{animation:pb-sample-scan 5s calc(var(--flow-order)*.15s) ease-in-out infinite}
 :root[data-motion=on] .sequence-lab[data-motion-visible][data-lab-step="2"] .sample-outputs>div{animation:pb-outcome-float 4s calc(var(--flow-order)*-.4s) ease-in-out infinite}
}
:root[data-motion=paused] .sequence-lab *{transition:none!important}
@media(prefers-reduced-motion:reduce){.sequence-lab *{animation:none!important;transition:none!important}}