/* blackrouter: white on black, everything monospace and lowercase (keys, addresses and code keep their case),
   thin rules, grey for what is secondary, solid white buttons, and no change on screen without easing ("motion").
   Ported from the design canvas "blackrouter web ui". No inline styles anywhere: the CSP allows none. */

/* JetBrains Mono, SIL Open Font License 1.1: fonts/jetbrains-mono/OFL.txt (release v2.304). */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2")}

/* base ------------------------------------------------------------------------------------------------------- */
html{background:#000;color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:#000;color:#fff;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.6;text-transform:lowercase}
p,h1,h2,h3,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:#fff;text-decoration:none}
a:hover{color:#000;background:#fff}
a.solid{background:#fff;color:#000;font-weight:700}
a.solid:hover{background:#000;color:#fff;box-shadow:inset 0 0 0 1px #fff}
a.more,a.ul{text-decoration:underline;text-underline-offset:6px}
button{font:inherit;text-transform:inherit;color:#fff;background:#000;border:1px solid #3a3a3a;padding:0 16px;min-height:44px;cursor:pointer}
button:hover{border-color:#fff}
button[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
button[aria-expanded="true"]{border-color:#fff}
button:disabled{color:#8c8c8c;border-color:#2a2a2a;cursor:not-allowed}
button.solid{background:#fff;color:#000;border-color:#fff;font-weight:700}
button.solid:hover{background:#000;color:#fff}
button.solid:disabled{background:#2a2a2a;color:#8c8c8c;border-color:#2a2a2a}
button.link{border:0;padding:0;background:none;color:#8c8c8c;text-decoration:underline;text-underline-offset:6px}
button.link:hover{color:#fff}
button.quiet{border:0;padding:0;background:none;color:#8c8c8c}
button.quiet:hover{color:#000;background:#fff}
button[aria-busy="true"]{cursor:progress}
input{font:inherit;text-transform:none;color:#fff;background:#000;border:1px solid #3a3a3a;padding:0 12px;min-height:44px;box-sizing:border-box;border-radius:0}
input::placeholder,textarea::placeholder{color:#8c8c8c}
input:hover{border-color:#8c8c8c}
input:focus{border-color:#fff}
input[aria-invalid="true"]{border-color:#fff}
input[readonly]{color:#8c8c8c;border-color:#2a2a2a}
input[type="search"]{text-transform:inherit;-webkit-appearance:none;appearance:none}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-height:0;padding:0;margin:0;border:1px solid #8c8c8c;background:#000;display:inline-grid;place-content:center;cursor:pointer;flex:none}
input[type="checkbox"]::before{content:"";width:10px;height:10px;background:#fff;transform:scale(0)}
input[type="checkbox"]:hover,input[type="checkbox"]:checked{border-color:#fff}
input[type="checkbox"]:checked::before{transform:scale(1)}
@media (forced-colors:active){input[type="checkbox"]::before{background:CanvasText}}
textarea{display:block;width:100%;min-height:132px;box-sizing:border-box;padding:12px 16px;font:inherit;line-height:1.6;text-transform:none;color:#fff;background:#000;border:1px solid #3a3a3a;border-radius:0;resize:vertical;outline:0 solid #fff;outline-offset:6px}
textarea:hover{border-color:#fff}
pre{margin:0}
table{border-collapse:collapse;width:100%}
th{font-weight:400;color:#8c8c8c;text-align:left;padding:0 24px 12px 0;border-bottom:1px solid #2a2a2a;white-space:nowrap}
td{padding:12px 24px 12px 0;border-bottom:1px solid #1a1a1a;white-space:nowrap;vertical-align:middle}
th:last-child,td:last-child{padding-right:0}
th.num,td.num{text-align:right}
caption{caption-side:bottom;text-align:left;padding-top:12px;color:#8c8c8c}
dl.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px 48px}
dl.facts dt{font-weight:700}
dl.facts dd{margin:6px 0 0;color:#8c8c8c}

/* words ------------------------------------------------------------------------------------------------------ */
.muted{color:#8c8c8c}
.faint{color:#4d4d4d}
.keep{text-transform:none}
.b{font-weight:700}
.n{font-weight:400}
.small{font-size:12px}
.nowrap{white-space:nowrap}
.break{word-break:break-all}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:20;padding:12px 16px;background:#fff;color:#000;font-weight:700}
.skip:focus{top:8px}
.offscreen{position:fixed;left:-9999px;top:0;opacity:0}
.tag{position:relative;cursor:help;text-decoration:underline dotted #8c8c8c;text-underline-offset:6px}
/* A hidden tip has no height, so it never makes a table's scroller scroll; it takes its size the moment it turns
   visible, while still transparent, and fades in from there. */
.tip{position:absolute;left:0;top:calc(100% + 10px);z-index:10;width:max-content;max-width:280px;max-height:0;overflow:hidden;padding:0 12px;background:#fff;color:#000;font-size:12px;font-weight:400;line-height:1.5;white-space:normal;text-transform:lowercase;opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease),visibility 0s linear var(--t1),max-height 0s linear var(--t1),padding 0s linear var(--t1)}
.tag:hover .tip,.tag:focus .tip{max-height:20em;padding:8px 12px;opacity:1;visibility:visible;transform:none;transition:opacity var(--t1) var(--ease) .08s,transform var(--t1) var(--ease) .08s,visibility 0s linear .08s,max-height 0s linear .08s,padding 0s linear .08s}
.dim,.dim .tag{color:#8c8c8c}

/* frame ------------------------------------------------------------------------------------------------------ */
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding:16px 32px;border-bottom:1px solid #2a2a2a}
.top-left{display:flex;flex-wrap:wrap;align-items:center;gap:0 32px}
.top-right{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.brand{font-weight:700;padding:12px 0}
.main-nav{display:flex;gap:24px}
.main-nav a{padding:12px 0;color:#8c8c8c}
.main-nav a:hover{color:#000}
.main-nav a.here{color:#fff;text-decoration:underline;text-underline-offset:6px}
.main-nav a.here:hover{color:#000}
.pad{padding:12px 0}
.btn{padding:12px 16px}
.btn-md{padding:12px 24px}
.btn-lg{padding:14px 24px;font-size:16px}
.top .quiet{min-height:44px}
main{width:100%;box-sizing:border-box;margin:0 auto;flex:1 0 auto}
main.home{max-width:1080px;padding:96px 32px 0;display:flex;flex-direction:column}
main.wide{max-width:1200px;padding:48px 32px 64px}
main.wide.flow{display:flex;flex-direction:column;gap:48px}
main.wide.account{display:flex;flex-direction:column;gap:56px}
main.mid{max-width:720px;padding:96px 32px 64px;display:flex;flex-direction:column;gap:32px}
main.slim{max-width:560px;padding:96px 32px 64px;display:flex;flex-direction:column;gap:32px}
main.pay{max-width:720px;padding:48px 32px 64px;display:flex;flex-direction:column;gap:40px}
footer.bottom{padding:24px 32px;border-top:1px solid #2a2a2a;color:#8c8c8c}
h1.title{font-size:32px;line-height:1.2;font-weight:700}
h1.label,h2.label{font-size:14px;font-weight:700}
h1.quiet-label,h2.quiet-label{font-size:14px;font-weight:400;color:#8c8c8c}
h2.big{font-size:28px;line-height:1.25;font-weight:700}
.col{display:flex;flex-direction:column}
.col-4{display:flex;flex-direction:column;gap:4px}
.col-8{display:flex;flex-direction:column;gap:8px}
.col-12{display:flex;flex-direction:column;gap:12px}
.col-16{display:flex;flex-direction:column;gap:16px}
.col-24{display:flex;flex-direction:column;gap:24px}
.spread{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:flex}
.wide-scroll{overflow-x:auto}
.wide,.wide-scroll{position:relative}
@media (max-width:1100px){.wide{overflow-x:auto}}

/* front page ------------------------------------------------------------------------------------------------- */
.hero{display:flex;flex-direction:column;gap:32px;padding-bottom:96px}
.hero-title{font-size:48px;line-height:1.15;font-weight:700}
.lede{font-size:16px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.box{border:1px solid #2a2a2a;margin-top:16px}
.box-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 24px;border-bottom:1px solid #2a2a2a}
pre.code{padding:24px;overflow-x:auto;font:inherit;line-height:1.7;text-transform:none}
pre.code.framed{border:1px solid #2a2a2a}
.box-foot{padding:16px 24px;border-top:1px solid #2a2a2a}
.band{display:flex;flex-direction:column;gap:40px;padding:96px 0;border-top:1px solid #2a2a2a}
.band.start{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.callout{align-self:flex-start;max-width:100%;box-sizing:border-box;overflow-x:auto;white-space:nowrap;border:1px solid #fff;padding:16px 24px;font-size:16px;text-transform:none}
.self-start{align-self:flex-start}

/* models ----------------------------------------------------------------------------------------------------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
input.filter{width:220px}
.rows td{padding:0 24px 0 0;vertical-align:top;border-bottom:1px solid transparent}
.rows td:last-child{padding-right:0}
.rows tr.end td{border-bottom-color:#2a2a2a}
.cell{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.2,0,0,1),opacity .28s cubic-bezier(.2,0,0,1)}
.cell>div{min-height:0;padding:12px 0;transition:padding .28s cubic-bezier(.2,0,0,1)}
.rows tr{animation:fade .48s cubic-bezier(.2,0,0,1) backwards;transition:visibility 0s}
.rows tr.gone{visibility:hidden;transition:visibility 0s linear .28s}
.rows tr.gone .cell{grid-template-rows:0fr;opacity:0}
.rows tr.gone .cell>div{overflow:hidden;padding:0}
.rows tr.gone td{border-bottom-color:transparent!important}
.rows .name{visibility:hidden;opacity:0;transition:opacity var(--t2) var(--ease),visibility 0s linear var(--t2),color var(--t1) var(--ease),background-color var(--t1) var(--ease),outline-width var(--t1) var(--ease),outline-offset var(--t1) var(--ease)}
.rows tr.named .name{visibility:visible;opacity:1;transition:opacity var(--t2) var(--ease),visibility 0s,color var(--t1) var(--ease),background-color var(--t1) var(--ease),outline-width var(--t1) var(--ease),outline-offset var(--t1) var(--ease)}
/* a lone row that folds away like the models' rows (no keys yet) */
tr.fold-row td{padding:0}
tr.fold-row .cell>div{padding:12px 0}
tr.fold-row{transition:visibility 0s}
tr.fold-row.gone{visibility:hidden;transition:visibility 0s linear .28s}
tr.fold-row.gone .cell{grid-template-rows:0fr;opacity:0}
tr.fold-row.gone .cell>div{overflow:hidden;padding:0}
tr.fold-row.gone td{border-bottom-color:transparent}
.rows tr:nth-child(2){animation-delay:18ms}.rows tr:nth-child(3){animation-delay:36ms}.rows tr:nth-child(4){animation-delay:54ms}
.rows tr:nth-child(5){animation-delay:72ms}.rows tr:nth-child(6){animation-delay:90ms}.rows tr:nth-child(7){animation-delay:108ms}
.rows tr:nth-child(8){animation-delay:126ms}.rows tr:nth-child(9){animation-delay:144ms}.rows tr:nth-child(10){animation-delay:162ms}
.rows tr:nth-child(11){animation-delay:180ms}.rows tr:nth-child(12){animation-delay:198ms}.rows tr:nth-child(13){animation-delay:216ms}
.rows tr:nth-child(14){animation-delay:234ms}.rows tr:nth-child(15){animation-delay:252ms}.rows tr:nth-child(16){animation-delay:270ms}
.rows tr:nth-child(17){animation-delay:288ms}.rows tr:nth-child(n+18){animation-delay:300ms}

/* one model -------------------------------------------------------------------------------------------------- */
.model-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.report-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px}
.report{margin-top:24px;border:1px solid #fff;padding:24px;display:flex;flex-direction:column;gap:24px}
.prices{max-width:640px}
td.tags{font-weight:700}
.uptime{display:inline-flex;align-items:center;gap:12px}
.bar{font-size:10px;line-height:1;letter-spacing:0;white-space:nowrap}
.b-up{color:#fff}
.b-partial{color:#8c8c8c}
.b-down{color:#3a3a3a}
.b-none{color:#1a1a1a}
.legend{display:flex;flex-wrap:wrap;gap:8px 24px;color:#8c8c8c;font-size:12px}
.notes{display:flex;flex-direction:column;gap:4px;color:#8c8c8c}
dl.examples{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 32px}
dl.examples dt{color:#8c8c8c}
dl.examples dd{text-transform:none;overflow-wrap:anywhere}

/* coding agents ---------------------------------------------------------------------------------------------- */
.agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
a.agent{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid #2a2a2a;min-width:0}
a.agent:hover{background:#000;color:#fff;border-color:#fff}
.agent-name{font-size:16px;font-weight:700}
.agent-install{margin:8px 0;text-transform:none;white-space:nowrap;overflow-x:auto}
.agent-go{margin-top:auto;padding-top:8px;text-decoration:underline;text-underline-offset:6px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs a{padding:11px 16px;border:1px solid #3a3a3a}
.tabs a:hover{background:#000;color:#fff;border-color:#fff}
.tabs a[aria-current="page"]{background:#fff;color:#000;border-color:#fff;font-weight:700}
ol.steps{counter-reset:step;display:flex;flex-direction:column}
ol.steps>li{counter-increment:step;display:grid;grid-template-columns:56px minmax(0,1fr);padding:32px 0;border-top:1px solid #2a2a2a}
ol.steps>li::before{content:counter(step,decimal-leading-zero);color:#4d4d4d;font-weight:700}
.step{display:flex;flex-direction:column;gap:16px;min-width:0}
.step .box,.col-16 .box{margin-top:0}

/* forms and panels ------------------------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field>span:first-child{color:#8c8c8c}
.field.roomy{gap:8px}
.grow{flex:1 1 320px;min-width:0}
.grow-sm{flex:1 1 280px;min-width:0}
input.big{display:block;width:100%;min-height:52px;padding:0 16px}
input.otp{font-size:24px;letter-spacing:.3em}
input.code{width:160px;letter-spacing:.2em}
input.code-wide{width:200px;letter-spacing:.2em}
input.amount{width:120px}
.alert{margin:12px 0 0}
.alert-tight{margin:8px 0 0}
.panel{border:1px solid #fff;padding:24px;margin:16px 0;display:flex;flex-direction:column;gap:16px}
.panel.across{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.panel.setup{flex-direction:row;flex-wrap:wrap;gap:32px}
.across-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}
.across-row.top{align-items:flex-start}
.full{flex-basis:100%}
.balance-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.panel.tight{gap:12px}
.panel.fresh{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 20px;margin:16px 0 0}
.setup{display:flex;flex-wrap:wrap;gap:32px}
.setup-side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.setup-side>.grow{flex:none}
.qr{width:176px;height:176px;border:1px solid #3a3a3a;display:grid;place-items:center;color:#8c8c8c;flex:none}
.qr img{display:block;width:176px;height:176px}
.qr.stack{display:inline-grid;place-items:center}
.secret{word-break:break-all;text-transform:none}
ol.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;text-transform:none}
.srows{display:flex;flex-direction:column}
.srow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:12px 0;border-bottom:1px solid #1a1a1a}
.srow-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 32px}
.srow-label{width:128px;color:#8c8c8c}
.srow-plain{display:flex;flex-wrap:wrap;align-items:center;gap:4px 32px;padding:12px 0;border-bottom:1px solid #1a1a1a}
.checks{display:flex;flex-wrap:wrap;gap:0 32px}
.check{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.stack.end-items{justify-items:end;align-items:center}
.balance-figure{font-size:48px;line-height:1.1;font-weight:700}
.keybox{border:1px solid #fff;padding:32px 24px;display:flex;flex-direction:column;gap:16px}
.master{font-size:22px;line-height:1.4;font-weight:700;letter-spacing:.02em;word-break:break-all;text-transform:none}
.new-master{font-size:18px;font-weight:700;word-break:break-all;text-transform:none}
.gen{align-self:flex-start;min-height:56px;padding:0 24px;font-size:16px}
.tall{min-height:52px}
.to-right{display:flex;justify-content:flex-end}
.apart{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.blocked{display:block;padding:12px 24px;background:#2a2a2a;color:#8c8c8c;font-weight:700}
.blocked-link{display:block;padding:12px 0;color:#4d4d4d}
.flex{display:flex}
.amounts{display:flex;flex-wrap:wrap;gap:8px}
.dollar{display:inline-flex;align-items:center;gap:8px}
button.pay{width:100%;min-height:56px;font-size:16px}
.invoice{border:1px solid #fff;padding:24px;display:flex;flex-direction:column;gap:12px}
.col-32{display:flex;flex-direction:column;gap:32px}
.cta-16{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.white{color:#fff}
.mt-32{margin-top:32px}
.mt-8{margin-top:8px}
.mt-4{margin-top:4px}
.ml-8{margin-left:8px}
.max-480{max-width:480px}
.link-gap{min-height:44px}

/* admin ------------------------------------------------------------------------------------------------------ */
select{font:inherit;text-transform:none;color:#fff;background:#000;border:1px solid #3a3a3a;padding:0 12px;min-height:44px;box-sizing:border-box;border-radius:0;cursor:pointer}
select:hover{border-color:#8c8c8c}
select:focus{border-color:#fff}
.field[hidden]{display:none}
.listing-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;min-height:24px}
.listing-note button[hidden]{display:none}
.end-btns{justify-content:flex-end;flex-wrap:nowrap;gap:16px}
.model-block{margin-top:16px}
.log-box{display:block}
.log-box summary{cursor:pointer;min-height:24px}
pre.log{white-space:pre-wrap;word-break:break-all;color:#8c8c8c;font-size:12px;line-height:1.5;max-height:240px;overflow:auto;padding:12px 0 0}

/* selection: white highlight, inverted on white surfaces */
::selection{background:#fff;color:#000}
.solid::selection,.solid ::selection,.tip::selection,.tip ::selection,[aria-pressed="true"]::selection,[aria-pressed="true"] ::selection,a:hover::selection,a:hover ::selection{background:#000;color:#fff}
.solid:hover::selection,.solid:hover ::selection{background:#fff;color:#000}

/* motion: every change eases in or out, nothing cuts ----------------------------------------------------------- */
:root{--ease:cubic-bezier(.2,0,0,1);--t1:.16s;--t2:.28s;--t3:.48s;--rise:6px;interpolate-size:allow-keywords}
*,*::before,*::after{transition:color var(--t1) var(--ease),background-color var(--t1) var(--ease),border-color var(--t1) var(--ease),text-decoration-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease),opacity var(--t1) var(--ease),transform var(--t1) var(--ease),outline-width var(--t1) var(--ease),outline-offset var(--t1) var(--ease)}
a,button,input,summary,.tag{outline:0 solid #fff;outline-offset:6px}
:focus-visible{outline-width:1px;outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
button:not(:disabled):active,a.solid:active,a.row:active,a.pick:active,summary:active{transform:scale(.98)}
@keyframes enter{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes fade{from{opacity:0}}
header,footer{animation:fade var(--t3) var(--ease) backwards}
footer{animation-delay:.3s}
main>*{animation:enter var(--t3) var(--ease) backwards}
main>:nth-child(2){animation-delay:.05s}
main>:nth-child(3){animation-delay:.1s}
main>:nth-child(4){animation-delay:.15s}
main>:nth-child(5){animation-delay:.2s}
main>:nth-child(n+6){animation-delay:.25s}
tbody tr{animation:fade .48s cubic-bezier(.2,0,0,1) backwards}
.reveal{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--t2) var(--ease),opacity var(--t2) var(--ease),display var(--t2) allow-discrete}
.reveal>*{min-height:0;overflow:hidden;padding:4px;margin:-4px}
.reveal.shut{display:none;grid-template-rows:0fr;opacity:0}
@starting-style{.reveal{grid-template-rows:0fr;opacity:0}}
.reveal.closing{animation:fold var(--t2) var(--ease) forwards;pointer-events:none}
@keyframes fold{to{grid-template-rows:0fr;opacity:0}}
@keyframes fold-fade{to{opacity:0}}
.pop{transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease),display var(--t2) allow-discrete,color var(--t1) var(--ease),background-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease),outline-width var(--t1) var(--ease),outline-offset var(--t1) var(--ease)}
.pop.shut{display:none;opacity:0;transform:scale(.96)}
@starting-style{.pop{opacity:0;transform:scale(.96)}}
.pop.closing{animation:pop-out var(--t2) var(--ease) forwards;pointer-events:none}
@keyframes pop-out{to{opacity:0;transform:scale(.96)}}
/* Opening plays as an animation too, for browsers that cannot transition out of display:none (ui.js "fold"). */
.reveal.opening{animation:unfold var(--t2) var(--ease)}
.pop.opening{animation:pop-in var(--t2) var(--ease)}
@keyframes unfold{from{grid-template-rows:0fr;opacity:0}}
@keyframes pop-in{from{opacity:0;transform:scale(.96)}}
.stack{display:inline-grid}
.stack>*{grid-area:1/1}
.stack>.off{opacity:0;visibility:hidden;transition:opacity var(--t2) var(--ease),visibility 0s linear var(--t2)}
.stack>.on{opacity:1;visibility:visible;transition:opacity var(--t2) var(--ease),visibility 0s}
@keyframes sw0{from{opacity:.3}}
@keyframes sw1{from{opacity:.3}}
.sw0{animation:sw0 var(--t2) var(--ease)}
.sw1{animation:sw1 var(--t2) var(--ease)}
details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size var(--t2) var(--ease),opacity var(--t2) var(--ease),content-visibility var(--t2) allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
@media (prefers-reduced-motion:reduce){
  :root{--rise:0px}
  .reveal{transition:opacity var(--t2) var(--ease),display var(--t2) allow-discrete}
  .reveal.closing{animation-name:fold-fade}
  .pop.closing{animation-name:fold-fade}
  .reveal.opening,.pop.opening{animation-name:fade}
  .pop,.pop.shut,.tip{transform:none}
  button:not(:disabled):active,a.solid:active,a.row:active,a.pick:active,summary:active{transform:none}
  details::details-content{transition:opacity var(--t2) var(--ease),content-visibility var(--t2) allow-discrete}
  .cell,.cell>div{transition:opacity .28s cubic-bezier(.2,0,0,1)}
  .live{animation:none}
}

/* phones ----------------------------------------------------------------------------------------------------- */
@media (max-width:720px){
  .hero-title{font-size:32px}
  header.top{padding:8px 16px}
  main.home,main.wide,main.mid,main.slim,main.pay{padding-left:16px;padding-right:16px}
  main.home{padding-top:64px}
  main.mid,main.slim{padding-top:56px}
  .hero{padding-bottom:64px}
  .band{padding:64px 0}
  footer.bottom{padding:24px 16px}
  .box-bar,.box-foot{padding:12px 16px}
  pre.code{padding:16px}
  .panel,.report,.invoice{padding:16px}
  .keybox{padding:24px 16px}
  .srow-label{width:auto;min-width:96px}
  input.filter{width:100%;flex:1 1 160px}
  ol.codes{grid-template-columns:minmax(0,1fr)}
  .master{font-size:18px}
  .balance-figure{font-size:40px}
  ol.steps>li{grid-template-columns:36px minmax(0,1fr);padding:24px 0}
  a.agent{padding:16px}
}