.account-page{box-sizing:border-box;max-width:720px;min-height:var(--view-h);padding:calc(var(--bar-h) + 32px) 16px 96px;margin:0 auto}.account{border:var(--rim-w) solid var(--edge);background:var(--tank);color:var(--cream);border-radius:16px;padding:40px 40px 16px}.account h2{margin:0 0 32px;font-family:Yowza,ui-sans-serif,sans-serif;font-size:52px;font-weight:400;line-height:1.5}.account h3{margin:0 0 10px;font-size:24px;font-weight:400;line-height:1.2}.account-back{margin:0 0 8px}.account .link{color:color-mix(in srgb, var(--cream) 75%, transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--cream) 30%, transparent);text-decoration-color:color-mix(in srgb, var(--cream) 30%, transparent)}.account .link:hover{color:var(--cream);text-decoration-color:currentColor}.account-back .link:before{content:"← "}.account .account-section{border-top:2px solid color-mix(in srgb, var(--cream) 14%, transparent);max-width:none;margin:0;padding:24px 0}.account-email,.account-note,.account-empty,.account-error,.account-list,.account-field input{text-transform:none;-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.account-email{overflow-wrap:anywhere;margin:0 0 14px;font-size:18px}.account-note,.account-empty{color:color-mix(in srgb, var(--cream) 70%, transparent);margin:0 0 14px}.account-error{color:var(--marked);margin:0}.account-form{gap:14px;display:grid}.account-form .account-note{margin:0}.account-field{color:color-mix(in srgb, var(--cream) 75%, transparent);gap:8px;display:grid}.account-field input{border:2px solid color-mix(in srgb, var(--cream) 18%, transparent);background:color-mix(in srgb, var(--pixel-ink) 55%, transparent);width:100%;color:var(--cream);border-radius:8px;padding:11px 14px;font-size:16px}.account-field input:focus{border-color:var(--cream);outline:none}.account-actions{flex-wrap:wrap;gap:8px;display:flex}.account .btn-primary,.account .btn-primary:hover{background:var(--cream);border-color:var(--cream);color:var(--pixel-ink)}.account .btn-primary:hover:not(:disabled){background:#fffaf0;border-color:#fffaf0}.account .btn-ghost{color:var(--cream);border-color:color-mix(in srgb, var(--cream) 30%, transparent)}.account .btn-ghost:hover:not(:disabled){color:var(--cream);border-color:var(--cream);background:color-mix(in srgb, var(--cream) 8%, transparent)}.account .btn:disabled{opacity:.45;cursor:default}.account-list{margin:0 0 14px;padding:0;list-style:none}.account-list li{border-bottom:1px solid color-mix(in srgb, var(--cream) 12%, transparent);flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:10px 0;display:flex}.account-list li:last-child{border-bottom:none}.account-what{overflow-wrap:anywhere;flex:auto;min-width:0}.account-build-name{flex-basis:100%;gap:8px;display:grid}.account-when{color:color-mix(in srgb, var(--cream) 60%, transparent);font-size:14px}.account-much{font-variant-numeric:tabular-nums}.account-list li.is-refunded .account-what,.account-list li.is-refunded .account-much{color:color-mix(in srgb, var(--cream) 55%, transparent)}.account-list li.is-refunded .account-much{text-decoration:line-through}.account-build-art{justify-content:center;align-self:center;align-items:flex-end;width:64px;height:48px;display:flex}.account-build-canvas{image-rendering:pixelated;display:block}.account-list li.is-hidden .account-build-art,.account-list li.is-hidden .account-what{opacity:.55}.account-refund{color:var(--marked);flex-basis:100%;font-size:14px}.account-failed{justify-items:start;gap:12px;display:grid}.account-check{cursor:pointer;align-items:center;gap:10px;display:inline-flex}.account-section>.account-check{width:fit-content;margin:0 0 14px;display:flex}.account-check input{width:20px;height:20px;accent-color:var(--cream)}.account-avatar{text-align:center;flex-direction:column;align-items:center;width:100%;margin:8px 0 24px;display:flex}.account-avatar-shrimp{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}.account-avatar-shrimp:disabled{cursor:default}.account-avatar-shrimp:focus-visible{outline:2px solid var(--cream);outline-offset:4px}.account-avatar-big{animation:.26s ease-out both account-avatar-in}.account-avatar-reel{scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;align-items:flex-end;gap:8px;width:100%;margin:0;padding:24px 50%;list-style:none;animation:.26s ease-out both account-avatar-in;display:flex;overflow-x:auto;-webkit-mask:linear-gradient(90deg,#0000,#000 30% 70%,#0000);mask:linear-gradient(90deg,#0000,#000 30% 70%,#0000)}.account-avatar-reel::-webkit-scrollbar{display:none}.account-avatar-reel li{--px:6px;padding:calc(var(--px) * 2) calc(var(--px) * 2) calc(var(--px) * 4);scroll-snap-align:center;opacity:.3;transform-origin:50% 60%;flex:none;transition:opacity .26s,transform .26s,filter .26s;position:relative;transform:scale(.72)}.account-avatar-reel li.is-lit{opacity:1;transform:scale(1)}.account-avatar-name{color:var(--cream);margin:8px 0 0;font-size:18px;animation:.2s ease-out both account-avatar-name-in}@keyframes account-avatar-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes account-avatar-name-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.account-avatar-big,.account-avatar-reel,.account-avatar-name{animation:none}.account-avatar-reel li{transition:none}}@media (max-width:560px){.account{padding:28px 20px 8px}.account-list li:has(>.account-build-art){grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:4px 12px;display:grid}.account-list li:has(>.account-build-art)>.account-build-art{grid-area:1/1/span 2}.account-list li:has(>.account-build-art)>.account-what{grid-area:1/2;align-self:end}.account-list li:has(>.account-build-art)>.account-when{grid-area:2/2;align-self:start}.account-list li:has(>.account-build-art)>.btn{grid-column:3;padding:6px 14px;font-size:14px}.account-list li:has(>.account-build-art):not(:has(>.btn~.btn))>.btn{grid-row:1/span 2}.account-list li:has(>.account-build-art)>:not(.account-build-art,.account-what,.account-when,.btn){grid-column:1/-1}.account h2{font-size:26px}}.account-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.account-terms{color:color-mix(in srgb, var(--cream) 60%, transparent);font-size:13px}.account-refund-ask{font:inherit;color:color-mix(in srgb, var(--cream) 70%, transparent);cursor:pointer;background:0 0;border:0;margin-top:6px;padding:0;font-size:13px;text-decoration:underline;display:inline-block}
