/* MUNO - the door on a computer, in the site's dress (founder, 12/10/2026).
 * The screen splits in two: the form on the left on the site's lit night, and on the right a panel
 * that moves (js/gate-art.js). Only the screens of the door take it - signing in, creating an
 * account, a dead link, a confirmed address, a new password. The first run keeps its wide card, and
 * a phone or a tablet keeps the centred card it has (it never sees the form anyway, auth.js ON_PHONE).
 * Whatever the room's palette, the door is night: the tokens are set again on the gate itself. */

@font-face{font-family:'Switzer';src:url('../assets/fonts/Switzer-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

.gate-art{display:none}

@media (min-width:960px){
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate{
    --ink:#eef2f7; --muted:#a3afbd; --dim:#6f8093; --hairline:rgba(255,255,255,.12);
    --surface:rgba(255,255,255,.045); --surface-brd:rgba(255,255,255,.16); --surface-hover:rgba(255,255,255,.09);
    --accent-deep:#7FB0E6; --font-ui:'Switzer',system-ui,sans-serif; --font-display:'Switzer',system-ui,sans-serif;
    right:50%; justify-content:center; padding:96px 64px 120px; color:var(--ink);
    font-family:var(--font-ui); font-variant-numeric:lining-nums tabular-nums;
    background:
      radial-gradient(90% 55% at 25% 0%, #1F3350 0%, rgba(31,51,80,0) 70%),
      radial-gradient(60% 40% at 30% 100%, rgba(243,178,76,.07), transparent 70%),
      linear-gradient(180deg, #121B29 0%, #0C121B 100%);
  }
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate-art{
    display:block; position:fixed; top:0; right:0; bottom:0; left:50%; z-index:100; overflow:hidden;
    background:#07090D; border-left:1px solid rgba(255,255,255,.06);
  }

  /* the mark in the top left corner, as the site's bar holds it */
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate-word{
    position:absolute; top:34px; left:48px; margin:0; display:flex; align-items:center; gap:10px;
    font-family:var(--font-ui); font-size:21px; font-weight:600; letter-spacing:.06em; color:#fff}

  /* the card loses its glass: on a flat night the form stands on its own, like the reference */
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate-card{
    width:min(100%,372px); padding:0; background:none; border:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; margin:auto 0}
  body[data-gate] .gate .gate-card h1,
  body[data-gate] .gate .gate-card .sent-h{font-family:var(--font-display)}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate h1,
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .sent-h{
    font-size:clamp(24px,2vw,29px); font-weight:600; letter-spacing:-.025em; line-height:1.12; margin:0 0 8px}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .sub,
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .sent-lead{
    font-size:14px; line-height:1.5; color:var(--muted); margin-bottom:20px}

  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .field-lab{
    margin:14px 0 7px; font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; color:#D5DCE4}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .field{
    height:44px; padding:0 14px; font-size:14.5px; border-radius:4px}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .field:focus{
    border-color:#5B9BE0; box-shadow:0 0 0 3px rgba(62,133,211,.22)}

  /* the buttons are the site's: square-ish corners, the one blue */
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .btn{
    height:44px; border-radius:4px; font-size:14.5px; font-weight:600; letter-spacing:0}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .btn.lg{padding:0 20px}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .btn.solid{
    background:#3E85D3; border-color:#3E85D3; box-shadow:0 10px 30px -12px rgba(62,133,211,.7)}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .btn.solid:hover{background:#4C93E2}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .gate-row{margin-top:20px}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .gate-alt{
    font-size:13.5px; text-align:left}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .gate-alt a{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35)}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .gate-alt a:hover{text-decoration-color:#fff}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .gate-or{margin:20px 0 4px}
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate .gate-note{
    margin:24px 0 0; text-align:left; max-width:372px; font-size:11.5px}
}

/* ================= the right half: the covers of the styles (js/gate-art.js) ================= */

/* STYLES - the covers of the styles drift in tilted columns, a band of light reads across them */
.art-styles{position:absolute; inset:0; overflow:hidden; background:#07090D}
.art-cols{position:absolute; left:50%; top:50%; width:150%; height:170%; display:flex; gap:18px;
  transform:translate(-50%,-50%) rotate(-12deg); }
.art-col{flex:1; display:flex; flex-direction:column; gap:18px; will-change:transform;
  animation:art-up var(--d,70s) linear infinite}
.art-col:nth-child(even){animation-name:art-down}
.art-col img{width:100%; aspect-ratio:1; border-radius:6px; display:block; object-fit:cover;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
@keyframes art-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes art-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.art-veil{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 50%, rgba(7,9,13,0) 0%, rgba(7,9,13,.55) 75%, rgba(7,9,13,.92) 100%),
    linear-gradient(90deg, rgba(12,18,27,.9) 0%, rgba(12,18,27,0) 22%)}
.art-sweep{position:absolute; inset:-20%; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:linear-gradient(105deg, transparent 40%, rgba(91,192,235,.22) 48%, rgba(243,178,76,.18) 54%, transparent 62%);
  animation:art-sweep 9s cubic-bezier(.45,0,.25,1) infinite}
@keyframes art-sweep{0%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}

@media (prefers-reduced-motion:reduce){
  .art-col,.art-sweep{animation:none}
}

@media (min-width:960px){
  body[data-gate="auth"] .gate #gInviteWrap .gate-alt{margin-top:22px}
  body[data-gate="auth"] .gate #gTermsWrap{margin-top:14px}
  body[data-gate="auth"] .gate .gate-note{color:var(--dim)}
}

/* the two stores, at the foot of the form's half: the app is where the music plays */
.gate-stores{display:none}
@media (min-width:960px){
  body:is([data-gate="auth"],[data-gate="link"],[data-gate="done"],[data-gate="recover"]) .gate-stores{display:flex; align-items:center; gap:10px; position:fixed; left:48px; bottom:34px; z-index:101}
  .gate-stores span{font-size:12.5px; color:var(--dim); margin-right:4px}
  .gate-stores a, .gate-stores i{display:block; line-height:0}
  .gate-stores img{height:34px; width:auto}
  .gate-stores a{transition:opacity .15s}
  .gate-stores a:hover{opacity:.85}
  /* not on the App Store yet: shown, dimmed, not a link (auth.js STORE.ios) */
  .gate-stores i{opacity:.38; cursor:default}
}

/* the site's lockup (v2/g5-long style.css .logo): mark 37x22, wordmark 100x17, gap 10 */
.gate-word{display:flex; align-items:center; gap:10px; color:#fff; line-height:0}
.gate-mark{width:37px; height:22px; flex:none; object-fit:contain}
.gate-wordmark{display:block; width:100px; height:17px; fill:currentColor}

/* A phone or a tablet (14/10/2026, founder): the store card in the site's dress too - the night
 * of munosound.com, Switzer, a dark glass card and the site's square blue button - instead of the
 * room's light palette. Any width: it is only ever shown on a phone or a tablet (auth.js ON_PHONE). */
body[data-gate="phone"] .gate{
  --ink:#eef2f7; --muted:#a3afbd; --dim:#6f8093; --hairline:rgba(255,255,255,.12);
  --surface:rgba(255,255,255,.045); --surface-brd:rgba(255,255,255,.16); --surface-hover:rgba(255,255,255,.09);
  --accent-deep:#7FB0E6; --font-ui:'Switzer',system-ui,sans-serif; --font-display:'Switzer',system-ui,sans-serif;
  color:var(--ink); font-family:var(--font-ui); font-variant-numeric:lining-nums tabular-nums;
  background:
    radial-gradient(110% 55% at 50% 0%, #1F3350 0%, rgba(31,51,80,0) 70%),
    linear-gradient(180deg, #121B29 0%, #07090D 100%);
}
body[data-gate="phone"] .gate .gate-word{color:#fff}
body[data-gate="phone"] .gate .gate-card{
  background:rgba(14,19,27,.62); border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%)}
body[data-gate="phone"] .gate .sent-h{font-family:var(--font-display); font-size:26px; font-weight:600;
  letter-spacing:-.025em; line-height:1.12; color:#fff}
body[data-gate="phone"] .gate .sent-lead{font-size:15px; line-height:1.5; color:var(--muted)}
body[data-gate="phone"] .gate .gate-alt{font-size:13.5px; line-height:1.5; color:var(--dim)}
body[data-gate="phone"] .gate .btn{height:48px; border-radius:4px; font-size:15px; font-weight:560; letter-spacing:0}
body[data-gate="phone"] .gate .btn.solid{background:#3E85D3; border-color:#3E85D3; color:#fff;
  box-shadow:0 10px 30px -12px rgba(62,133,211,.7)}
body[data-gate="phone"] .gate .btn.ghost{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); color:#fff}
body[data-gate="phone"] .gate .gate-note{color:var(--dim)}