.account-shell{--bar:calc(16 * var(--grid-base));--plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4 0h1v9H4zM0 4h9v1H0z'/%3E%3C/svg%3E");--main:40px;--row:64px;--hub:992px;--narrow:calc(6 * 68px + 5 * var(--space-4));background:var(--bg);min-height:100dvh;color:var(--ink);font-family:var(--font-narrow);flex-direction:column;display:flex;position:relative;overflow-x:clip}.account-shell :is(h1,h2,p,form){margin:0}.account-shell .hub{z-index:1;width:min(100vw - 2 * var(--grid-margin), var(--hub) + 2px);border-inline:1px solid var(--rule);flex-direction:column;flex:1;margin:0 auto;display:flex;position:relative}.account-shell main{flex-direction:column;flex:1;display:flex}.account-shell .centred main{justify-content:center}.account-shell .band{padding:var(--space-6) var(--space-4);position:relative}.account-shell .band:before{content:"";background:var(--rule);width:100vw;height:1px;position:absolute;top:-1px;left:calc(50% - 50vw)}.account-shell .band.end{padding:0}.account-shell .hub:not(.centred) main>.band:first-child:before,.account-shell .hub:not(.centred) main>:first-child>.band:first-child:before,.account-shell .hub:not(.centred) main>.band:first-child:after,.account-shell .hub:not(.centred) main>:first-child>.band:first-child:after{content:none}.account-shell .band:after{content:"";background:var(--line-strong);pointer-events:none;--plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4 0h1v9H4zM0 4h9v1H0z'/%3E%3C/svg%3E");height:9px;-webkit-mask:var(--plus) left top / 9px 9px no-repeat, var(--plus) right top / 9px 9px no-repeat;-webkit-mask:var(--plus) left top / 9px 9px no-repeat, var(--plus) right top / 9px 9px no-repeat;mask:var(--plus) left top / 9px 9px no-repeat, var(--plus) right top / 9px 9px no-repeat;position:absolute;top:-5px;left:-5px;right:-5px}.account-shell :is(h1,h2,strong){color:var(--ink)}.account-shell p{color:var(--ink-2)}.account-shell a{color:var(--accent);text-decoration:none}.account-shell a:hover{text-decoration:underline}.account-shell .cols{column-gap:var(--space-4);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.account-shell .col{gap:var(--space-3);grid-column:3/span 8;align-content:start;display:grid}.account-shell .narrow{gap:var(--space-6);text-align:center;grid-column:4/span 6;display:grid}.account-shell .narrow p{text-wrap:balance}.account-shell .usage-line{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--control-lg);display:flex}.account-shell .crumb{align-items:center;gap:var(--space-2);margin-left:calc(var(--space-2) - var(--space-4));display:flex}.account-shell .action{margin-left:auto}.account-shell .crumb .slash{color:var(--line-strong)}.account-shell .stack{gap:var(--space-2);display:grid}.account-shell .pair{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.account-shell .or{align-items:center;gap:var(--space-3);color:var(--ink-3);display:flex}.account-shell .or:before,.account-shell .or:after{content:"";background:var(--line);flex:1;height:1px}.account-shell .section-head{gap:var(--space-1);display:grid}.account-shell .section-head p{color:var(--ink-3)}.account-shell :where(button:not(.segmented>button),.btn){appearance:none;box-sizing:border-box;justify-content:center;align-items:center;gap:var(--space-2);height:var(--control-lg);padding:0 var(--space-4);cursor:pointer;color:var(--ink);background:var(--surface-3) var(--grain) 0 0 / 64px;background-blend-mode:overlay;border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--bevel-light);white-space:nowrap;border-radius:0;flex:none;margin:0;text-decoration:none;display:flex}.account-shell :where(button:not(.segmented>button),.btn):active{box-shadow:inset 0 1px 0 var(--bevel-shade);transform:translateY(1px)}.account-shell :where(button:not(.segmented>button),.btn):disabled{cursor:default;color:var(--ink-3)}.account-shell :where(button:not(.segmented>button),.btn):disabled:active{box-shadow:inset 0 1px 0 var(--bevel-light);transform:none}.account-shell :is(.quiet,.group button):active{transform:none}.account-shell a.btn{color:var(--ink)}.account-shell a.quiet{color:var(--ink-3)}@media (hover:hover){.account-shell :is(.btn,button:not(.segmented>button)):not(:disabled):hover{background-color:var(--surface-4);text-decoration:none}}.account-shell :is(button:not(.segmented>button),a):focus-visible{outline:1px solid var(--accent);outline-offset:1px}.account-shell .main{width:100%;height:var(--main)}.account-shell .provider svg{flex:none;width:20px;height:20px}.account-shell .quiet{box-shadow:none;color:var(--ink-3);background:0 0;border-color:#0000;justify-self:center}@media (hover:hover){.account-shell .quiet:not(:disabled):hover{color:var(--ink);background:0 0}}@media (pointer:coarse){.account-shell :is(.main,.btn,.quiet,.group button,.metal-key){position:relative}.account-shell :is(.main,.btn,.quiet,.group button,.metal-key):before{content:"";inset:calc((100% - var(--tap)) / 2) 0;position:absolute}.account-shell :is(.stack,form)>:is(.main,.btn,.quiet,form)+:is(.main,.btn,.quiet):before{top:max(calc((100% - var(--tap)) / 2), calc(var(--space-2) / -2))}.account-shell :is(.stack,form)>:is(.main,.btn,.quiet):has(+:is(.main,.btn,.quiet,form)):before{bottom:max(calc((100% - var(--tap)) / 2), calc(var(--space-2) / -2))}}.account-shell[data-theme=light] :is(svg,svg *)[fill]:not([fill=none]){fill:currentColor}.account-shell[data-theme=light] :is(svg,svg *)[stroke]:not([stroke=none],[stroke=currentColor]){stroke:currentColor}.account-shell .metal-key{all:unset;box-sizing:border-box;--control:var(--control-lg);cursor:pointer;display:grid}.account-shell .metal-key>*{width:100%}.account-shell .metal-key:active>*{--up:0;transform:translateY(1px)}.account-shell .metal-key:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.account-shell .badge{height:var(--control);padding:0 var(--space-2);background:var(--surface-3);color:var(--gold);text-transform:uppercase;border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--bevel-light);place-items:center;display:grid}.account-shell .badge>span{text-box:trim-both cap alphabetic;margin-right:-.06em}.account-shell .offer{align-items:center;gap:var(--space-2);display:flex}.account-shell :is(button,.btn).danger{color:var(--danger);border-color:var(--danger)}.account-shell .recess{background:var(--well);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--bevel-shade)}.account-shell .chip{justify-content:center;align-items:center;gap:var(--space-1);height:var(--control-lg);padding:0 var(--space-4);color:var(--ink-3);border:1px solid var(--line);white-space:nowrap;display:flex}.account-shell .group{height:var(--control-lg);display:flex}.account-shell .group>.field{min-width:0;padding:0 var(--space-3);color:var(--ink);white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:all;user-select:all;flex:1;align-items:center;display:flex;overflow:hidden}.account-shell .group button{border-width:0 0 0 1px;height:100%}.account-shell :where(input:not([type=hidden])){appearance:none;box-sizing:border-box;width:100%;height:var(--main);padding:0 var(--space-3);color:var(--ink);text-align:left;background:0 0;border:0;border-radius:0;outline:none;margin:0}.account-shell input::placeholder{color:var(--ink-3)}.account-shell .slot{min-width:0;display:grid;position:relative}.account-shell .slot>input{height:100%}.account-shell .slot.recess{height:var(--main)}.account-shell .slot.recess:focus-within{border-color:var(--accent)}.account-shell .slot.recess.invalid{border-color:var(--danger)}@media (hover:none) and (pointer:coarse){.account-shell .slot{--k:calc(16 / 13)}.account-shell .slot>input{width:calc(100% * var(--k));height:calc(100% * var(--k));padding-inline:calc(var(--space-3) * var(--k));font-size:16px;line-height:calc(16px * var(--k));transform:scale(calc(1 / var(--k)));transform-origin:0 0;position:absolute;top:0;left:0}}@media (hover:none) and (pointer:coarse) and (width<=512px){.account-shell .slot{--k:calc(16 / 12)}}.account-shell .said{transition:grid-template-rows var(--motion-2) var(--ease-close);grid-template-rows:0fr;display:grid}.account-shell .said.open{transition:grid-template-rows var(--motion-3) var(--ease-open);grid-template-rows:1fr}.account-shell .said>div{min-height:0;overflow:hidden}.account-shell .error{padding-top:var(--space-2);color:var(--danger);text-align:left}.account-shell .code{gap:var(--space-2);grid-template-columns:repeat(6,minmax(0,1fr));display:grid;position:relative}.account-shell .code input{z-index:1;color:#0000;caret-color:#0000;height:100%;box-shadow:none;background:0 0;border:0;outline:none;padding:0;position:absolute;inset:0}.account-shell .code input::selection{background:0 0}.account-shell .code .cell{height:var(--main);color:var(--ink);font-variant-numeric:tabular-nums;background:var(--well);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--bevel-shade);place-items:center;display:grid}.account-shell .code.invalid .cell{border-color:var(--danger)}.account-shell .code .cell.at{border-color:var(--accent)}.account-shell .panel{column-gap:var(--space-4);padding:0 var(--space-4);background:var(--surface-1);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--bevel-light);grid-template-columns:minmax(0,1fr) auto;display:grid}.account-shell .panel.marks{grid-template-columns:20px minmax(0,1fr) auto}.account-shell .row{grid-column:1/-1;grid-template-columns:subgrid;column-gap:var(--space-4);min-height:var(--row);padding:var(--space-3) 0;align-items:center;display:grid;position:relative}.account-shell .row.whole{grid-template-columns:minmax(0,1fr);align-content:center}.account-shell .row+.row:before{content:"";top:0;left:calc(-1 * var(--space-4));right:calc(-1 * var(--space-4));background:var(--line);height:1px;position:absolute}.account-shell .row>.mark svg{width:20px;height:20px;display:block}.account-shell .row form{justify-self:stretch;display:block}.account-shell .row form>:is(button,.metal-key),.account-shell .row .chip{width:100%}.account-shell .text{min-height:var(--control-lg);align-content:center;display:grid}.account-shell .text>*{overflow-wrap:anywhere}.account-shell .sub{color:var(--ink-3)}.account-shell .note>p{color:var(--ink);text-wrap:pretty;grid-column:1/-2}.account-shell :is(.note>p,.sub).alarm{color:var(--danger)}.account-shell .sub.out{color:var(--ink)}.account-shell .usage{gap:var(--space-2);display:grid}.account-shell .usage .usage-line{min-height:0}.account-shell .meter{height:var(--space-3)}.account-shell .meter i{background:var(--accent);height:100%;box-shadow:inset 0 1px 0 var(--bevel-light), inset 0 -1px 0 var(--bevel-shade);transform-origin:0;animation:account-fill var(--motion-4) var(--ease-open) calc((var(--i,0) + 1) * var(--motion-stagger)) backwards;display:block}@keyframes account-fill{0%{transform:scaleX(0)}}.account-shell form{gap:var(--space-2);display:grid}.account-shell .usage-line form{display:block}.account-shell .icon{width:var(--control-lg);place-items:center;padding:0;display:grid}.account-shell .in{animation:account-in var(--motion-4) var(--ease-open) calc(var(--i,0) * var(--motion-stagger)) backwards}@keyframes account-in{0%{opacity:0;filter:blur(4px);translate:0 var(--space-1)}}.account-shell .enter{animation:account-enter var(--motion-5) var(--ease-open) calc(var(--i,0) * 2 * var(--motion-stagger)) backwards}.account-shell .card-rise{--at:calc(var(--i,0) * 2 * var(--motion-stagger));animation:account-show 1s var(--ease-close) var(--at) backwards, account-travel 1s var(--ease-move) var(--at) backwards}.account-shell .card-rise .rise-piece{animation:account-enter var(--motion-5) var(--ease-open) calc(var(--at) + 1s / 2 + var(--p,0) * min(var(--motion-stagger), var(--motion-4) / var(--n,1))) backwards}@keyframes account-enter{0%{opacity:0;filter:blur(4px);translate:0 var(--space-1)}}@keyframes account-show{0%{opacity:0;filter:blur(4px)}}@keyframes account-travel{0%{translate:0 var(--space-8)}}@media (prefers-reduced-motion:reduce){.account-shell :is(.enter,.card-rise,.card-rise .rise-piece){animation:none}}.account-shell .toasts{inset:auto 0 calc(var(--space-4) + env(safe-area-inset-bottom,0px));z-index:50;padding-inline:var(--grid-margin);pointer-events:none;justify-items:center;display:grid;position:fixed}.account-shell .toast{align-items:center;gap:var(--space-2);max-width:var(--narrow);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--surface-1);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--bevel-light), var(--shadow-overlay);pointer-events:auto;animation:account-in var(--motion-4) var(--ease-open) backwards;display:flex}.account-shell .toast p{color:var(--ink)}.account-shell .toast.leaving{animation:account-out var(--motion-3) var(--ease-close) forwards}@keyframes account-out{to{opacity:0;filter:blur(4px);translate:0 var(--space-1)}}@media (width<=512px){.account-shell .hub{width:calc(100vw - 2 * var(--grid-margin))}.account-shell{--bar:calc(14 * var(--grid-base))}.account-shell .band{padding:var(--space-3)}.account-shell :is(.col,.narrow){grid-column:1/-1}}