/* Compact Console chrome; palette stays shared with the existing charts. */
:root{--control-compact:32px;--rail-wide:236px;--rail-narrow:64px;--rail-gap:40px;--focus:var(--m-gpt)}
.scope button,.getkey,.period-tabs button{min-height:var(--control-compact);padding:var(--space-1) var(--space-3)}
.scope button{min-width:7em}.getkey{background:var(--raise);color:var(--ink);border:1px solid var(--line)}
.top{margin-bottom:var(--space-6)}.topact{align-items:center}
.tag-demo{display:none!important}
.brand{position:relative;padding-bottom:var(--rail-gap);padding-right:var(--space-5)}
/* the collapse button (owner 2026-09-06: "look a bit different"): a 28px round
 * hairline with a chevron that points the way the rail will move; it flips
 * when collapsed, the hover fills lightly */
#rail-toggle{position:absolute;right:0;top:2px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--dim)}
#rail-toggle:hover{background:var(--raise);color:var(--ink);border-color:var(--line3)}
#rail-toggle svg{display:block}
.rail-collapsed #rail-toggle svg{transform:scaleX(-1)}
.rail-anim #rail-toggle svg{transition:transform var(--rail-ms) var(--rail-ease)}
.nav{display:flex;flex-direction:column;flex:1;gap:var(--space-6);padding-bottom:var(--space-3)}
.nav-primary{display:flex;flex-direction:column;gap:var(--space-1)}
.nav-secondary{display:flex;flex-direction:column;gap:var(--space-1);margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--line2)}
.railfoot{display:flex;align-items:center;gap:var(--space-1)}
.acct{min-width:0;flex:1;min-height:var(--touch-target)}
.logout-button{display:grid;place-items:center;color:var(--dim);width:var(--row-control);height:var(--row-control);flex:none;border:1px solid transparent;border-radius:var(--radius-control)}
.logout-button:hover{color:var(--dn);background:color-mix(in srgb,var(--dn) 12%,transparent);border-color:color-mix(in srgb,var(--dn) 35%,transparent)}
/* theme toggle (owner 2026-09-09, r18): the sign-out button's twin, neutral on hover */
.theme-button{display:grid;place-items:center;color:var(--dim);width:var(--row-control);height:var(--row-control);flex:none;border:1px solid transparent;border-radius:var(--radius-control);cursor:pointer;background:none}
.theme-button:hover{color:var(--ink);background:var(--hover);border-color:var(--line)}
.theme-button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Rail collapse / expand animates (owner 2026-09-06: "it shouldn't jump").
 * The shell's grid columns, the rail padding, the brand gap and the toggle's
 * offset transition over --rail-ms; the labels (brand word, nav text, account
 * email) shrink to zero width and fade instead of switching display, so each
 * icon slides to its collapsed spot. The footer wraps to two rows only when
 * the rail is too narrow for both buttons. .rail-anim is added by applyRail()
 * the first time the state changes, so a deep link to #/docs lands collapsed
 * without animating. Reduced motion: the console-wide rule caps every
 * transition at .01ms. */
:root{--rail-ms:260ms;--rail-ease:cubic-bezier(.4,0,.2,1)}
.brand{height:calc(var(--row-control) + var(--rail-gap))}
.brand .mark,.brand .bar,.brand .word{min-width:0;max-width:160px;overflow:hidden;white-space:nowrap}
.nav a{overflow:hidden}
.nav a span{display:block;min-width:0;max-width:160px;overflow:hidden;white-space:nowrap}
.railfoot{flex-wrap:wrap}.railfoot .acct{min-width:var(--row-control)}
.acct .who{max-width:200px}
.rail-anim{transition:grid-template-columns var(--rail-ms) var(--rail-ease)}
.rail-anim .rail{transition:padding var(--rail-ms) var(--rail-ease)}
.rail-anim .brand{transition:padding var(--rail-ms) var(--rail-ease),gap var(--rail-ms) var(--rail-ease)}
.rail-anim #rail-toggle{transition:right var(--rail-ms) var(--rail-ease),background-color .18s,color .18s,border-color .18s}
.rail-anim .nav a{transition:color .18s,background-color .18s,padding var(--rail-ms) var(--rail-ease)}
.rail-anim .brand .mark,.rail-anim .brand .bar,.rail-anim .brand .word,.rail-anim .nav a span,.rail-anim .acct .who{transition:max-width var(--rail-ms) var(--rail-ease),margin var(--rail-ms) var(--rail-ease),opacity .18s ease .1s}
.rail-collapsed{grid-template-columns:var(--rail-narrow) minmax(0,1fr)}
.rail-collapsed .rail{padding-left:var(--space-2);padding-right:var(--space-2)}
.rail-collapsed .brand{padding:0 0 var(--rail-gap);gap:0}
.rail-collapsed .brand .word,.rail-collapsed .brand .bar,.rail-collapsed .brand .mark,.rail-collapsed .nav a span,.rail-collapsed .acct .who{max-width:0;opacity:0;visibility:hidden}
.rail-collapsed.rail-anim .brand .mark,.rail-collapsed.rail-anim .brand .bar,.rail-collapsed.rail-anim .brand .word,.rail-collapsed.rail-anim .nav a span,.rail-collapsed.rail-anim .acct .who{transition:max-width var(--rail-ms) var(--rail-ease),margin var(--rail-ms) var(--rail-ease),opacity .12s ease,visibility 0s linear var(--rail-ms)}
.rail-collapsed .nav a span,.rail-collapsed .acct .who{margin-left:-10px}
.rail-collapsed #rail-toggle{right:calc((var(--rail-narrow) - 2*var(--space-2) - 28px)/2)}
.rail-collapsed .nav a{padding:var(--space-2) calc((var(--rail-narrow) - 2*var(--space-2) - 14px)/2);margin-left:0}
.rail-collapsed .railfoot{justify-content:center}
.rail-collapsed .acct{justify-content:center}
@media(max-width:600px){.rail-collapsed .nav a{padding-left:calc((52px - 2*var(--space-1) - 14px)/2);padding-right:calc((52px - 2*var(--space-1) - 14px)/2)}}
.settings-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);border-bottom:1px solid var(--line);padding-bottom:var(--space-4);margin-bottom:var(--space-6)}
.settings-tabs a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);color:var(--dim);border:1px solid transparent}
.settings-tabs a[aria-current="page"]{background:var(--raise);color:var(--ink);border-color:var(--line)}
.settings-provider-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.provider-connection{display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-panel);padding:var(--space-4);min-width:0;background:var(--panel)}
.provider-connection .provider-label{flex:1;min-width:0}.provider-connection .provider-label strong{display:block;font-size:var(--text-body);font-weight:500}.provider-connection .provider-label small{display:block;color:var(--dim);font-size:var(--text-note)}
.provider-symbol{width:var(--row-control);height:var(--row-control);display:grid;place-items:center;flex:none;font-family:var(--mono);color:var(--sec)}
.provider-connect-options{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}
.provider-connect-options button.on{border-color:var(--sec);color:var(--ink)}
.provider-connect-panel{grid-column:1/-1;margin-bottom:var(--space-4)}
.agent-prompt{display:block;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;color:var(--sec);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--ground);font-family:var(--mono);font-size:var(--text-label);margin-bottom:var(--space-3)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--line2)}
.settings-row:first-child{border-top:0}.settings-row .sub{color:var(--dim);font-size:var(--text-label)}
.saved-card{margin-top:var(--space-3);font-size:var(--text-label);color:var(--sec)}
#portal-go{color:var(--up);border-color:color-mix(in srgb,var(--up) 40%,var(--line))}
.credit-range{width:100%;accent-color:var(--up);margin:var(--space-5) 0 var(--space-2);cursor:pointer}
.range-ticks{display:flex;justify-content:space-between;color:var(--dim);font:var(--text-note) var(--mono)}
.api-keys-panel .key-cap{min-width:8em}.key-spend{min-width:8em}.key-group td{background:var(--raise);font-size:var(--text-label);color:var(--sec);padding-top:var(--space-3);padding-bottom:var(--space-3)}
.key-project{display:block;color:var(--dim);font-size:var(--text-note);margin-top:var(--space-1)}
.member-picker{position:relative;min-width:12em}.member-picker summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);background:var(--raise)}
.member-picker summary::after{content:'⌄';float:right;margin-left:var(--space-3)}
.member-picker-list{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:20;min-width:100%;width:max-content;max-width:min(24rem,75vw);max-height:18rem;overflow:auto;background:var(--raise);border:1px solid var(--line);padding:var(--space-2);border-radius:var(--radius-control);box-shadow:var(--shadow)}
.member-picker-list label{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);white-space:nowrap;font-size:var(--text-label);cursor:pointer}.member-picker-list input{accent-color:var(--up)}
.confirm-dialog .note{margin-bottom:var(--space-4)}.confirm-dialog .inp{margin-bottom:var(--space-3)}
.confirm-dialog [role="alert"]{color:var(--dn);margin:var(--space-3) 0}
/* owner 2026-09-06: "Use an email code instead" shares the buttons' row (left;
 * Cancel and Confirm right) and nothing sits under that row */
.confirm-dialog .identity-actions{flex-wrap:nowrap}
.confirm-dialog .confirm-alternate{margin:0 auto 0 0;padding:0;min-height:var(--row-control);font-size:var(--text-label);color:var(--dim);text-decoration:underline;text-underline-offset:3px;text-align:left;white-space:nowrap}
.confirm-dialog .confirm-alternate:hover{color:var(--ink)}
body[data-console-view="docs"] .top{display:none}
body[data-console-view="uptime"] .stat .pb{padding:var(--space-3) var(--space-4)}
@media(max-width:1150px){.settings-provider-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.brand .mark{display:none}.brand{height:calc(var(--touch-target) + var(--rail-gap));padding:0}#rail-toggle{right:0}.railfoot{display:flex;flex-direction:column}.acct .who{display:none}.nav a{justify-content:center}.settings-provider-list{grid-template-columns:1fr}}
@media(max-width:600px){.settings-tabs{gap:var(--space-1)}.settings-tabs a{padding:var(--space-2)}.settings-row{flex-wrap:wrap}.settings-provider-list{grid-template-columns:1fr}.shell,.rail-collapsed{grid-template-columns:52px minmax(0,1fr)}.rail-collapsed .rail{padding-left:var(--space-1);padding-right:var(--space-1)}.provider-connection{padding:var(--space-3);gap:var(--space-2)}.settings-provider-mark{display:none}.provider-connect-options{flex-wrap:wrap}}
@media(pointer:coarse){.scope button,.getkey,.period-tabs button,.logout-button,.theme-button{min-height:var(--touch-target)}.logout-button,.theme-button{width:var(--touch-target)}}
/* Docs: the reading room owns its own columns, so the console page column gives up its gutter and 1300px cap (the docs sidebar then sits flush right of the rail). The lazy-load notice keeps a gutter until the reader mounts. */
body[data-console-view="docs"] .main{max-width:none;padding:0;margin:0}
body[data-console-view="docs"] .hw-docs-root:not(:has(.hw-docs)){padding:24px 32px}
/* Focus, console-wide (owner 2026-09-06): no glow on a mouse click anywhere;
 * keyboard focus gets one thin neutral ring. Text fields, selects and search
 * boxes never ring: their hairline goes one step lighter while focused. */
:root{--focus:#959595}
:focus:not(:focus-visible){outline:none!important}
:focus-visible{outline:1px solid var(--focus)!important;outline-offset:2px}
.af-stop:focus-visible{outline:none!important}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,select:focus-visible,textarea:focus-visible,.inp:focus,.inp:focus-visible{outline:none!important;border-color:var(--mute);box-shadow:none}
.arinput:focus-within{border-color:var(--mute)}
/* revoke, remove, delete: destructive controls read red at rest */
.btn.danger{color:var(--dn);border-color:color-mix(in srgb,var(--dn) 45%,transparent)}
.btn.danger:hover{color:var(--dn-hi);border-color:color-mix(in srgb,var(--dn) 70%,transparent);background:color-mix(in srgb,var(--dn) 10%,transparent)}
/* mint forms: one control height across the row (the member picker sat taller than the project select) */
.mintform>.inp,.mintform>span>.inp,.mintform .member-picker summary,.mintform .seg,.mintform>.btn{min-height:var(--control-compact);box-sizing:border-box}
.mintform>.btn{height:var(--control-compact);padding-top:0;padding-bottom:0}
.mintform .member-picker summary{display:flex;align-items:center;font-family:var(--mono);font-size:var(--text-label);padding:0 11px;background:var(--field);line-height:1}
.mintform .member-picker summary::after{float:none;margin-left:auto;padding-left:var(--space-3)}
/* Set up payment (owner 2026-09-07): the link + one-line reason that stands in
 * for an action needing a funded account; shares the panel header's right slot
 * with the (disabled) action */
.ph-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap;min-width:0}
.pay-gate{display:inline-flex;align-items:center;gap:var(--space-3);min-width:0}
.pay-gate .pay-why{font-family:var(--mono);font-size:var(--text-note);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pay-gate .btn{text-decoration:none;white-space:nowrap}
/* Get started (owner 2026-09-07, rebuilt r13 after Experiential Labs' bottom
 * right): a small fixed button on every view, raise ground, one hairline,
 * console corners, sans with the done count in mono; it opens a narrow
 * panel above itself — serif title like the panels, an × top right, four
 * hairline rows with a 16px check ring each (the ring is the only round
 * shape). z-index 5 sits over page content; every <dialog> is in the top
 * layer above it. The main column's own 80px bottom padding already clears
 * the button, so the page needs no extra room while it shows. */
.getstarted{position:fixed;right:24px;bottom:24px;z-index:5;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--space-2);max-width:calc(100vw - 48px)}
.gs-btn{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch-target);padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--raise);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;box-shadow:var(--shadow-sm);transition:border-color .18s,background-color .18s,color .18s}
.gs-btn .gs-rocket{flex:none;width:var(--space-4);height:var(--space-4);color:var(--sec)}
.gs-btn:hover{border-color:var(--mute);background:var(--raise-hi)}
.gs-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gs-btn .gs-count{display:inline-block;font-family:var(--mono);font-size:var(--text-note);font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
/* r18 (owner 2026-09-09) — a fresh account (0 of 4): the button wears the
 * console's primary look and a slow breathing halo until the first step lands */
.gs-btn.is-fresh{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.gs-btn.is-fresh:hover{background:var(--gold);border-color:var(--gold);filter:brightness(.94)}
.gs-btn.is-fresh .gs-rocket,.gs-btn.is-fresh .gs-count{color:inherit}
.gs-btn.is-fresh .gs-count{opacity:.62}
.gs-btn.is-fresh::after{content:"";position:absolute;inset:-5px;border-radius:calc(var(--radius-control) + 4px);border:2px solid var(--cue-ring-strong);pointer-events:none;opacity:0;animation:gs-breathe 2.4s ease-in-out infinite}
@keyframes gs-breathe{0%,100%{opacity:0;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
/* a step flipped while the panel was closed: the button pops a little and its count rolls */
.gs-btn.is-pop{animation:gs-pop .5s cubic-bezier(.22,1,.36,1)}
@keyframes gs-pop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
/* the odometer: the old figure above the new one, the column slides up by one line */
.gs-odo{display:inline-block;position:relative;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.gs-odo-roll{display:block;animation:gs-odo .45s cubic-bezier(.22,1,.36,1) .15s both}
.gs-odo-roll i{display:block;height:1em;line-height:1;font-style:normal}
@keyframes gs-odo{from{transform:translateY(0)}to{transform:translateY(-1em)}}
.gs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gs-count,.gs-progress{line-height:1}
/* r18 (owner 2026-09-09: "the actual get started small button should morph
 * into the get started panel and vice versa when you hit x"): open, the button
 * is out of flow and unseen — it became the panel, which sits at its corner.
 * It keeps its layout so gsClose can measure where the box lands. */
.getstarted.is-open .gs-btn{position:absolute;right:0;bottom:0;visibility:hidden;pointer-events:none}
.getstarted.is-open .gs-btn.is-fresh::after{display:none}
/* the morph box: the button's rect, colours and label at first, the panel's
 * at the end (gsOpenMorph / gsClose set every frame from measurements) */
.gs-morph{position:fixed;z-index:6;box-sizing:border-box;display:flex;align-items:flex-start;padding:0 16px 0 14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--panel);box-shadow:var(--shadow);overflow:hidden;pointer-events:none;white-space:nowrap}
.gs-morph-label{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;color:var(--ink)}
.gs-morph .gs-rocket{flex:none;width:16px;height:16px;color:var(--sec)}
.gs-morph .gs-count{font-family:var(--mono);font-size:var(--text-note);font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
.gs-morph.is-fresh .gs-rocket,.gs-morph.is-fresh .gs-count{color:inherit}
.gs-morph.is-fresh .gs-count{opacity:.62}
.gs-morph.is-done svg{width:16px;height:16px;flex:none}
.gs-panel{width:276px;max-height:calc(100vh - 120px);overflow:auto;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-control);box-shadow:var(--shadow);transform-origin:100% 100%}
/* the fresh account's auto-open (no button to morph from yet): the panel rises
 * in from its corner and the rows follow in a short stagger (--i is the row's
 * index); it plays only when the open state changes (paintGetStarted's gsWasOpen) */
.gs-panel.is-entering{animation:gs-panel-in .22s cubic-bezier(.22,1,.36,1) both}
.gs-panel.is-entering .gs-row{animation:gs-row-in .26s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(70ms + var(--i,0) * 25ms)}
@keyframes gs-panel-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes gs-row-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* behind the morph box the panel's ground is there from the first frame (the
 * box fades away over it); its head comes in over the second half and the
 * rows follow; on a close the content goes first, then the box shrinks */
.gs-panel.is-morph-in>.gs-head{opacity:0;animation:gs-morph-fade .14s cubic-bezier(.22,1,.36,1) .14s forwards}
.gs-panel.is-morph-in .gs-row{opacity:0;animation:gs-row-in .2s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(150ms + var(--i,0) * 20ms)}
.gs-panel.is-morph-out>*{animation:gs-morph-out .09s ease-in forwards}
@keyframes gs-morph-fade{to{opacity:1}}
@keyframes gs-morph-out{to{opacity:0}}
.gs-head{padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);border-bottom:1px solid var(--line2)}
.gs-head-row{display:flex;align-items:center;gap:var(--space-3)}
.gs-title{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.gs-progress{margin-left:auto;font-family:var(--mono);font-size:var(--text-note);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.gs-x{display:grid;place-items:center;width:var(--touch-target);height:var(--touch-target);border:1px solid transparent;border-radius:var(--radius-control);color:var(--dim);font-size:13px;line-height:1}
.gs-x:hover{color:var(--ink);background:var(--raise);border-color:var(--line)}
.gs-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the progress track under the head: one segment per step, lit left to right
 * by count (gsTrack); the segment lit this paint fills like a liquid */
.gs-track{display:flex;gap:4px;margin-top:var(--space-3);padding-right:var(--space-1)}
.gs-track i{position:relative;overflow:hidden;flex:1;height:3px;border-radius:2px;background:var(--line3);transform-origin:left center}
.gs-track i.on{background:var(--up)}
.gs-track i.just{animation:gs-liquid .6s cubic-bezier(.22,1,.36,1) .12s both}
@keyframes gs-liquid{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gs-steps{display:flex;flex-direction:column;padding:var(--space-1) 0}
.gs-row{position:relative;display:flex;min-height:var(--touch-target);box-sizing:border-box;align-items:center;gap:var(--space-3);padding:11px var(--space-4);border-top:1px solid var(--line2);color:var(--sec);font-family:var(--sans);font-size:13px;line-height:1.3;text-decoration:none;transition:background-color .15s,color .15s}
.gs-row:first-child{border-top:0}
.gs-row:hover{background:var(--raise);color:var(--ink)}
.gs-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.gs-ring{flex:none;position:relative;z-index:2;width:16px;height:16px;display:grid;place-items:center;border:1px solid var(--faint);border-radius:50%;color:transparent}
.gs-ring svg{display:block}
.gs-ring svg path{stroke-dasharray:14;stroke-dashoffset:0}
.gs-row.done{color:var(--dim)}
.gs-row.done .gs-ring{background:var(--up);border-color:var(--up);color:var(--panel)}
.gs-aside{color:var(--dim)}
.gs-row.done .gs-aside{color:var(--faint)}
/* a step just flipped (owner 2026-09-09, the ink effect he picked over the
 * sparks): the ring fills like ink pooling from its centre, then the check is
 * drawn as a pen would, the label lifts and settles, the segment fills like a
 * liquid; every one a plain state switch under reduced motion */
.gs-row.just-done .gs-ring{animation:gs-ink-edge .5s cubic-bezier(.22,1,.36,1) both}
.gs-row.just-done .gs-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--up);transform:scale(0);animation:gs-ink .42s cubic-bezier(.22,1,.36,1) .08s forwards}
.gs-row.just-done .gs-ring svg{position:relative;z-index:1}
.gs-row.just-done .gs-ring svg path{stroke-dashoffset:14;animation:gs-pen .32s cubic-bezier(.4,0,.2,1) .36s forwards}
.gs-row.just-done .gs-step{animation:gs-ink-label .75s cubic-bezier(.22,1,.36,1) both}
@keyframes gs-ink-edge{0%{background:transparent;border-color:var(--faint)}100%{background:transparent;border-color:var(--up)}}
@keyframes gs-ink{to{transform:scale(1)}}
@keyframes gs-pen{to{stroke-dashoffset:0}}
@keyframes gs-ink-label{0%{color:var(--ink);font-weight:500;transform:translateX(0)}50%{transform:translateX(2px)}100%{color:var(--dim);font-weight:400;transform:translateX(0)}}
/* the finish: the head reads You're all set over a faint ink wash, the edge
 * turns --up, then gsClose(host,true) morphs the panel down into an "All set"
 * button in --up that holds and fades */
.getstarted.is-finale .gs-panel{border-color:var(--up)}
.getstarted.is-finale .gs-title{animation:gs-title-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes gs-title-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.getstarted.is-finale .gs-head{animation:gs-ink-head .9s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes gs-ink-head{to{background:color-mix(in srgb,var(--up) 9%,transparent)}}
@media (prefers-reduced-motion:reduce){.gs-btn.is-fresh::after,.gs-morph{display:none}.gs-row.just-done .gs-ring,.gs-row.just-done .gs-ring::before,.gs-row.just-done .gs-ring svg path,.gs-row.just-done .gs-step,.gs-track i.just,.gs-btn.is-pop,.gs-odo-roll,.getstarted.is-finale .gs-title,.getstarted.is-finale .gs-head,.gs-panel.is-entering,.gs-panel.is-entering .gs-row,.gs-panel.is-morph-in>.gs-head,.gs-panel.is-morph-in .gs-row,.gs-panel.is-morph-out>*{animation:none}.gs-panel.is-morph-in>.gs-head,.gs-panel.is-morph-in .gs-row{opacity:1}.gs-row.just-done .gs-ring svg path{stroke-dashoffset:0}.gs-row.just-done .gs-ring::before{transform:scale(1)}.gs-odo-roll{transform:translateY(-1em)}}
@media(max-width:600px){.getstarted{right:12px;bottom:12px}.gs-panel{width:min(276px,calc(100vw - 24px))}}