.cloud-account-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid #8d9fb94a;border-radius:999px;color:#f3f6ff;background:#14202c;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}.cloud-account-link[hidden]{display:none}.cloud-account-link:hover{background:#253747}.cloud-account-link:focus-visible{outline:3px solid #b7f07c;outline-offset:3px}
.account-page{--ink:#f6efe4;--muted:#c3b09c;--gold:#d7be86;--gold-bright:#f3e6be;--gold-deep:#8d7440;--cord:#a51f33;box-sizing:border-box;margin:0;min-height:100svh;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 34% 16%,#5d0b18 0%,#3d060f 48%,#1e0207 100%)}
.account-page *{box-sizing:border-box}
.account-page [hidden]{display:none!important}
.account-page a{color:inherit}
.account-page button,.account-page input{font:inherit}
.account-page button,.account-page a,.account-page input{touch-action:manipulation}
.account-page :focus-visible{outline:3px solid var(--gold-bright);outline-offset:5px}
/* The cloth sits behind everything and is decorative: the page is complete, and
   legible, if the canvas never paints a pixel. */
.velvet-cloth{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;border:0}
.account-page>:not(.velvet-cloth){position:relative;z-index:1}
/* The layout sits above the cloth, so it would otherwise swallow every pointer
   move and leave only the page margins brushable. Let the empty areas through;
   anything a hand actually uses takes its events back. */
.account-header,.account-main,.account-footer{pointer-events:none}
.account-header a,.account-card,.account-footer a{pointer-events:auto}
.account-header{max-width:1320px;margin:auto;padding:32px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.account-header>a:last-child{font-size:13px;text-decoration:none;color:var(--muted)}
.account-header .inza-brand{font-size:28px}
.account-main{display:grid;grid-template-columns:1fr 1fr;max-width:1180px;margin:30px auto 64px;align-items:center;padding:0 32px;gap:8%}
.account-art{position:relative;min-height:650px;display:flex;flex-direction:column;justify-content:flex-end;padding:44px 32px;pointer-events:none}
.account-art-copy{font-size:clamp(34px,4.2vw,58px);font-weight:760;letter-spacing:-2px;line-height:.98;text-shadow:0 4px 30px rgba(0,0,0,.75)}
.account-art-note{margin-top:20px;font-size:12px;letter-spacing:2.4px;font-weight:700;color:var(--gold);text-transform:uppercase}
/* A scrim, because a sign-in form has to stay readable over brushed cloth. */
.account-card{position:relative;padding:34px 34px 30px;max-width:452px;border:1px solid #d7be8636;border-radius:12px;background:rgba(11,3,6,.76);box-shadow:0 34px 90px rgba(0,0,0,.6);backdrop-filter:blur(15px) saturate(125%);-webkit-backdrop-filter:blur(15px) saturate(125%)}
.account-rope{display:block;width:calc(100% + 26px);margin:-52px -13px 20px;height:auto;filter:drop-shadow(0 7px 14px rgba(0,0,0,.6))}
.account-eyebrow{margin:0 0 24px;color:var(--gold);font-size:11px;letter-spacing:2.6px;font-weight:750}
.account-eyebrow span{opacity:.55;margin:0 5px}
.account-card h1{font-size:clamp(32px,3.6vw,44px);line-height:1.07;letter-spacing:-1.6px;margin:0 0 18px;font-weight:650}
.account-intro{color:var(--muted);line-height:1.65;font-size:15px;margin:0 0 30px}
.account-card label{display:block;font-size:13px;font-weight:600;margin:0 0 20px}
.account-card input{display:block;width:100%;padding:14px 15px;margin-top:8px;background:rgba(0,0,0,.34);border:1px solid #d7be8640;color:var(--ink);border-radius:6px;font-size:16px;min-height:49px}
.account-card input:focus{border-color:var(--gold)}
.account-primary,.account-secondary{display:flex;width:100%;justify-content:center;align-items:center;gap:15px;min-height:49px;border:0;border-radius:6px;text-decoration:none;font-weight:700;font-size:14px;padding:13px 18px;cursor:pointer}
.account-card .account-primary{background:linear-gradient(#f3e6be,#d7be86);color:#24120a}
.account-primary:hover{background:linear-gradient(#fff5da,#e6cf98)}
.account-secondary{margin-top:12px;color:var(--ink);border:1px solid #d7be8640;background:transparent}
.account-secondary:hover{background:rgba(215,190,134,.12)}
.account-text-button{display:block;border:0;background:none;color:var(--muted);font-size:12px;margin:16px auto 22px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.account-help{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 20px}
.account-identity{overflow-wrap:anywhere;margin:0 0 24px;color:var(--gold)}
/* Nobody catches up to a number. Set it like the thing it is. */
.account-place{display:flex;align-items:baseline;gap:12px;margin:-12px 0 20px;padding-bottom:18px;border-bottom:1px solid #d7be8630}
.account-place[hidden]{display:none}
.account-place>b{font-size:34px;font-weight:680;line-height:1;letter-spacing:-1.4px;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.account-place>span{font-size:11px;letter-spacing:2.4px;font-weight:700;text-transform:uppercase;color:var(--gold)}
.account-arrival{margin:-4px 0 24px;font-size:13px;line-height:1.6;color:var(--gold-bright)}
#account-signed-in .account-help{margin-top:20px}
/* A code is read off one screen and typed into another, so it is set in a face
   that keeps its characters apart, and spaced to be read in two halves. */
#account-invite,.account-code{font-family:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace;letter-spacing:2px}
#account-invite{text-transform:uppercase}
#account-invite-help[data-state=good]{color:#a8dcb6}
#account-invite-help[data-state=bad]{color:#ffb7a5}
.account-songs{margin-top:26px;padding-top:22px;border-top:1px solid #d7be8630}
.account-songs h2{margin:0 0 10px;color:var(--gold);font-size:11px;letter-spacing:2.6px;font-weight:750;text-transform:uppercase}
#account-signed-in #account-songs-note{margin:0}
.account-song-list{list-style:none;margin:8px 0 0;padding:0}
.account-song{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:14px 0;border-top:1px solid #d7be8626}
.account-song-title{font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.account-song-state{font-size:11px;letter-spacing:1.6px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-left:auto}
.account-song[data-state=public] .account-song-state{color:#a8dcb6}
.account-song[data-state=archived] .account-song-title{color:var(--muted)}
.account-song-meta{width:100%;font-size:12px;color:var(--muted)}
.account-song-actions{width:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
/* A genre is a label, not a move, so it sits away from the buttons that change
   who can see the song and keeps the quieter edge. */
.account-song-genres{width:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.account-song-genre-field{flex:1 1 200px;min-width:0;padding:11px 15px;background:rgba(0,0,0,.34);border:1px solid #d7be8640;color:var(--ink);border-radius:6px;font-size:16px;min-height:44px}
.account-song-genre-field:focus{border-color:var(--gold)}
.account-invitations{margin-top:26px;padding-top:22px;border-top:1px solid #d7be8630}
.account-invitations h2{margin:0 0 10px;color:var(--gold);font-size:11px;letter-spacing:2.6px;font-weight:750;text-transform:uppercase}
#account-signed-in #account-invitation-count{margin:0}
.account-invitation-list{list-style:none;margin:8px 0 16px;padding:0}
.account-invitation-list:empty{display:none}
.account-invitation{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:13px 0;border-top:1px solid #d7be8626}
.account-code{font-size:15px;color:var(--gold-bright)}
.account-invitation-state{font-size:11px;letter-spacing:1.6px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.account-invitation[data-state=accepted] .account-invitation-state{color:#a8dcb6}
.account-invitation[data-state=withdrawn] .account-code{color:var(--muted);text-decoration:line-through}
.account-invitation-note{width:100%;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.account-invitation-actions{margin-left:auto;display:flex;gap:8px}
.account-mini{min-height:44px;padding:11px 16px;border:1px solid #d7be8640;border-radius:999px;background:transparent;color:var(--ink);font-size:12px;font-weight:600;cursor:pointer}
.account-mini:hover{background:rgba(215,190,134,.12)}
/* After .account-mini, not before it: publishing is the one loud move in the
   song list and the base pill would otherwise flatten it back out. */
.account-mini-go{border-color:#d7be86;background:rgba(215,190,134,.16);color:var(--gold-bright)}
.account-mini-go:hover{background:rgba(215,190,134,.28)}
/* Also after .account-mini, and for the opposite reason: the genre pill is the
   quiet one on the row, and it goes to the far end away from the moves. */
.account-mini-genre{margin-left:auto;border-style:dashed;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-mini-genre:disabled{opacity:.5;cursor:default}
.account-status{min-height:1px;line-height:1.6;font-size:13px;color:var(--gold-bright);overflow-wrap:anywhere}
.account-status:empty{margin:0}
.account-status[data-error=true]{color:#ffb7a5}
.account-guest{display:flex;justify-content:space-between;text-decoration:none;border-top:1px solid #d7be8630;margin-top:26px;padding-top:22px;font-size:13px;color:var(--muted)!important}
.account-guest:hover{color:var(--ink)!important}
/* The welcome page borrows the club's cloth, rope palette and controls, so an
   arrival and the door behind it are recognisably the same room. */
.welcome-page .account-header a:last-child{font-size:13px}
.welcome-main{pointer-events:none;max-width:760px;margin:clamp(6px,2.5vh,36px) auto 64px;padding:0 32px}
.welcome-main a{pointer-events:auto}
.welcome-title{font-size:clamp(40px,6vw,74px);line-height:.98;letter-spacing:-2.2px;font-weight:680;margin:0 0 20px;text-shadow:0 4px 34px rgba(0,0,0,.6)}
.welcome-lede{max-width:52ch;font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:var(--muted);margin:0 0 26px}
.welcome-points{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
.welcome-points li{display:grid;gap:5px;max-width:52ch;font-size:14px;line-height:1.65;color:var(--muted);border-left:1px solid #d7be8636;padding-left:16px}
.welcome-points b{color:var(--ink);font-size:12px;letter-spacing:2.2px;font-weight:700;text-transform:uppercase}
.welcome-actions{display:flex;flex-wrap:wrap;gap:14px;max-width:520px}
.welcome-actions>*{flex:1 1 210px}
.welcome-actions .account-secondary{margin-top:0}
.welcome-actions .account-primary{background:linear-gradient(#f3e6be,#d7be86);color:#24120a}
.welcome-note{margin:22px 0 0;max-width:52ch;font-size:13px;line-height:1.7;color:var(--gold)}
.welcome-note:empty{display:none}
/* Which door a stranger is standing at. Until the club has answered, neither
   headline is shown and neither state-specific line is claimed — but the space
   is held, so the page settles rather than jumping when the answer lands. */
.welcome-headline{display:grid}
.welcome-headline>.welcome-title{grid-area:1/1;margin:0}
.welcome-page [data-face]{visibility:hidden}
.welcome-page [data-face]:not(.welcome-title){display:none}
.welcome-page[data-door=open] [data-face=open],
.welcome-page[data-door=shut] [data-face=shut]{visibility:visible}
.welcome-page[data-door=open] [data-face=open]:not(.welcome-title),
.welcome-page[data-door=shut] [data-face=shut]:not(.welcome-title){display:block}
.welcome-clock{margin:-8px 0 22px;font-size:12px;letter-spacing:2.4px;font-weight:700;text-transform:uppercase;color:var(--gold)}
.welcome-clock[hidden]{display:none}
/* Counts the club made. Set like a plaque, because the small numbers are the
   argument and shrinking them would be apologising for them. */
.welcome-facts{list-style:none;display:flex;flex-wrap:wrap;gap:14px 34px;margin:4px 0 28px;padding:18px 0 0;border-top:1px solid #d7be8630;max-width:52ch}
.welcome-facts[hidden]{display:none}
.welcome-facts li{display:grid;gap:3px}
.welcome-facts b{font-size:30px;font-weight:680;line-height:1;letter-spacing:-1.2px;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.welcome-facts span{font-size:12px;line-height:1.45;color:var(--muted);max-width:18ch}
@media(max-width:800px){.welcome-main{padding:0 24px;margin-top:8px}.welcome-points{gap:15px}}
.account-footer{max-width:1240px;margin:0 auto;padding:0 44px 26px;color:#a08d7c;font-size:12px}
.account-page button:disabled{cursor:wait;opacity:.6}
@media(max-width:800px){.account-header{padding:24px}.account-main{display:block;margin:16px auto 48px;padding:0 24px;max-width:500px}.account-art{display:none}.account-card{max-width:none;padding:30px 22px 26px}.account-rope{width:calc(100% + 14px);margin:-42px -7px 18px}.account-card h1{font-size:38px}.account-footer{padding:0 24px 24px}.account-eyebrow{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.account-page *{scroll-behavior:auto}}
.player-header:has(.cloud-account-link:not([hidden])){column-gap:clamp(8px,1.5vw,22px)}body:not([data-phase=catalogue]) .cloud-account-link{display:none}