@font-face {
  font-family: 'T4TKalam';
  src: url('fonts/Kalam-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'T4TKalam';
  src: url('fonts/Kalam-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============ T4T Mix v3 — the tape IS the canvas ============ */
:root{
  --trans-1:#5BCEFA; --trans-2:#F5A9B8; --trans-3:#FFFFFF;
  --les-1:#D62900; --les-2:#FF9B55; --les-4:#D462A6; --les-5:#A50062;
  --bi-1:#D60270; --bi-2:#9B4F96; --bi-3:#0038A8;
  --nb-1:#FCF434; --nb-3:#9C59D1; --nb-4:#2C2C2C;
  --pride-1:#E70000; --pride-2:#FF8C00; --pride-3:#FFEF00; --pride-4:#00811F; --pride-5:#0044FF; --pride-6:#760089;
  --ink:#2b2036; --card:#ffffff; --shadow:0 10px 30px rgba(43,32,54,0.12); --radius:20px;
  --shell-body:#2b2036;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:linear-gradient(180deg,#fff8fb 0%,#f3f7ff 100%); color:var(--ink); min-height:100vh; overflow-x:hidden; position:relative; }
.bg-blobs{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(circle at 15% 20%, rgba(91,206,250,0.25), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(245,169,184,0.3), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(156,89,209,0.15), transparent 45%); }
.screen{ display:none; max-width:520px; margin:0 auto; padding:24px 18px 60px; min-height:100vh; }
.screen.active{ display:block; animation:fadein .4s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* hero */
.topbadge{ text-align:center; font-size:12.5px; color:#7a6b8a; background:rgba(255,255,255,0.7); border-radius:999px; padding:6px 14px; width:fit-content; margin:0 auto 22px; box-shadow:var(--shadow); }
.hero-wrap{ text-align:center; padding-top:10px; max-width:520px; margin:0 auto; }
.wordmark{ font-weight:800; font-size:44px; letter-spacing:-1px; line-height:1; }
.wordmark.small{ font-size:24px; } .wordmark.center{ text-align:center; }
.wm-t4t{ background:linear-gradient(90deg,var(--trans-1),var(--trans-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wm-mix{ color:var(--ink); }
.tagline{ font-size:19px; font-weight:600; margin:14px 0 4px; }
.subtagline{ font-size:14.5px; color:#7a6b8a; max-width:380px; margin:0 auto 26px; line-height:1.5; }
.link-card{ background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); text-align:left; }
.link-label{ display:block; font-size:13px; font-weight:700; color:#5c4d6b; margin-bottom:6px; }
.link-label.soon{ margin-top:14px; }
.soon-badge{ background:#e8f9ee; color:#1a9c52; font-size:10px; padding:2px 8px; border-radius:999px; margin-left:6px; font-weight:700; }
.link-card input[type="text"], .link-card input[type="url"]{ width:100%; padding:12px 14px; border-radius:12px; border:2px solid #eee0ea; font-size:14px; margin-bottom:4px; outline:none; background:#fffcfe; }
.link-card input[type="text"]:focus, .link-card input[type="url"]:focus{ border-color:var(--trans-1); }
.load-status{ font-size:12.5px; color:#7a6b8a; margin-top:8px; min-height:16px; }
.btn-primary{ width:100%; margin-top:16px; padding:14px 18px; border:none; border-radius:14px; background:linear-gradient(90deg,var(--trans-1),var(--trans-2)); color:#2b2036; font-weight:800; font-size:15.5px; cursor:pointer; box-shadow:0 8px 20px rgba(91,206,250,0.35); }
.btn-primary:active{ transform:scale(0.97); }
.btn-secondary{ width:100%; margin-top:10px; padding:14px 18px; border:2px solid #e4d7ee; border-radius:14px; background:#fff; color:var(--ink); font-weight:700; font-size:15px; cursor:pointer; }
.btn-ghost{ display:block; margin:26px auto 0; background:none; border:none; color:#9c86ad; font-size:13.5px; cursor:pointer; text-decoration:underline; }
.btn-wide{ max-width:520px; }
.freemium-badge{ margin-top:22px; font-size:12.5px; color:#8a5a3a; background:#fff3e6; border:1px solid #ffe0bf; padding:8px 14px; border-radius:999px; display:inline-block; }
.freemium-badge.center{ display:block; text-align:center; margin:20px auto; width:fit-content; }

/* step indicator */
.step-indicator{ display:flex; align-items:center; justify-content:center; gap:8px; max-width:520px; margin:18px auto 0; padding:0 18px; }
.step-dot{ display:flex; flex-direction:column; align-items:center; font-size:13px; font-weight:800; color:#c9bdd4; position:relative; }
.step-dot span{ font-size:10px; font-weight:700; margin-top:2px; }
.step-dot.active{ color:var(--ink); }
.step-dot.done{ color:#1a9c52; }
.step-line{ flex:1; height:2px; background:#eadff0; max-width:60px; }

.builder-header{ text-align:center; margin:14px 0; }
.playlist-title{ font-size:13px; color:#7a6b8a; margin-top:4px; font-weight:600; }
.skin-picker{ display:flex; justify-content:center; gap:12px; margin:14px 0 12px; }
.skin-swatch{ width:34px; height:34px; border-radius:50%; cursor:pointer; border:3px solid transparent; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.skin-swatch.active{ border-color:#2b2036; transform:scale(1.15); }
.skin-swatch[data-skin="trans"]{ background:linear-gradient(135deg,var(--trans-1),var(--trans-2),var(--trans-3)); }
.skin-swatch[data-skin="lesbian"]{ background:linear-gradient(135deg,var(--les-1),var(--les-2),var(--les-4),var(--les-5)); }
.skin-swatch[data-skin="bi"]{ background:linear-gradient(135deg,var(--bi-1),var(--bi-2),var(--bi-3)); }
.skin-swatch[data-skin="nb"]{ background:linear-gradient(135deg,var(--nb-1),var(--nb-3),var(--nb-4)); }
.skin-swatch[data-skin="pride"]{ background:linear-gradient(135deg,var(--pride-1),var(--pride-2),var(--pride-3),var(--pride-4),var(--pride-5),var(--pride-6)); }
.hint-line{ text-align:center; font-size:12px; color:#9c86ad; max-width:340px; margin:0 auto 14px; line-height:1.5; }

/* ================= CASSETTE (the actual object) ================= */
.cassette-stage{ display:flex; justify-content:center; margin:6px 0 20px; perspective:1400px; }
.cassette-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }

.cassette-body{
  position:relative; width:100%; height:100%; border-radius:14px;
  background: var(--tape-shell, linear-gradient(160deg,#efe6de,#ded1c4));
  box-shadow:0 18px 36px rgba(43,32,54,0.28), inset 0 2px 0 rgba(255,255,255,0.4);
  padding:14px; overflow:visible;
}
.cassette-screw{ position:absolute; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff, #9d9098 70%); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25); z-index:5; }
.cassette-screw.tl{ top:8px; left:8px; } .cassette-screw.tr{ top:8px; right:8px; }
.cassette-screw.bl{ bottom:8px; left:8px; } .cassette-screw.br{ bottom:8px; right:8px; }

/* the paper label — this is the write-on canvas */
.cassette-label{
  position:relative; background:var(--label-paper, #fbf6ea);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:6px; height:112px; margin-top:2px; padding:8px 10px 6px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.5);
  overflow:hidden;
}
.label-lines{ position:absolute; inset:0; top:30px;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 20px, rgba(120,100,90,0.18) 20px, rgba(120,100,90,0.18) 21px);
  pointer-events:none; }
.label-side-tag{ position:absolute; top:6px; right:10px; font-size:8.5px; font-weight:800; letter-spacing:1px; color:#a3762f; background:rgba(255,255,255,0.6); padding:1px 6px; border-radius:4px; }
.handwritten-title{
  font-family:'T4TKalam', cursive; font-size:26px; line-height:1.15; color:#2b2036;
  padding:6px 2px 0; outline:none; cursor:text; min-height:34px; word-break:break-word;
  max-width:70%;
}
.handwritten-title:empty::before{ content:"write a title..."; color:#b3a596; }
.cassette-photo-slot{
  position:absolute; right:8px; bottom:8px; width:60px; height:60px; border-radius:8px;
  border:2px dashed rgba(43,32,54,0.25); display:flex; align-items:center; justify-content:center;
  cursor:pointer; background-size:cover; background-position:center; font-size:20px; color:#b3a596;
  transform:rotate(3deg); box-shadow:0 3px 8px rgba(0,0,0,0.15);
}

/* reels window */
.cassette-window{
  margin-top:10px; height:52px; background:rgba(20,15,25,0.85); border-radius:8px;
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.5);
}
.reel{ width:34px; height:34px; border-radius:50%; background:radial-gradient(circle, #d8d0c8 0%, #b7ab9d 55%, #8b7f73 100%); position:relative; box-shadow:0 0 0 2px rgba(0,0,0,0.3); animation:none; }
.reel-spokes{ position:absolute; inset:5px; border-radius:50%;
  background:
    radial-gradient(circle, #2b2036 5px, transparent 5.5px),
    conic-gradient(from 0deg, transparent 0 40deg, #2b2036 40deg 46deg, transparent 46deg 86deg, #2b2036 86deg 92deg, transparent 92deg 132deg, #2b2036 132deg 138deg, transparent 138deg 178deg, #2b2036 178deg 184deg, transparent 184deg 224deg, #2b2036 224deg 230deg, transparent 230deg 270deg, #2b2036 270deg 276deg, transparent 276deg 316deg, #2b2036 316deg 322deg, transparent 322deg 360deg);
}
.reel.spinning .reel-spokes{ animation:spin 1.4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.tape-ribbon{ flex:1; height:3px; background:#4a3f36; margin:0 10px; border-radius:2px; }

.cassette-teeth{ height:6px; margin-top:8px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0 4px, transparent 4px 9px); border-radius:3px; opacity:0.6; }

/* panels */
.panel{ background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:18px; }
.panel-title{ font-weight:800; font-size:15px; margin-bottom:12px; }
.panel-hint{ font-size:11.5px; color:#a698b3; margin-top:10px; }
.photo-upload-btn{ display:inline-block; background:#faf5fb; border:2px dashed #eadff0; border-radius:12px; padding:10px 14px; font-size:13px; cursor:pointer; font-weight:700; color:#5c4d6b; }

/* letter flap */
.letter-flap-wrap{ display:flex; justify-content:center; margin:4px 0 20px; }
.letter-flap-tab{ background:linear-gradient(90deg,#ffe9f0,#fff7e6); border:2px dashed #f0b8cf; border-radius:16px; padding:14px 20px; font-family:'T4TKalam', cursive; font-size:17px; color:#a3487a; cursor:pointer; box-shadow:var(--shadow); }
.letter-flap-tab.has-letter{ background:linear-gradient(90deg,#ffd9e8,#ffe9c2); border-style:solid; }

/* letter modal */
.letter-card{ max-width:440px; }
.letter-notebook{ position:relative; background:#fffdf5; border-radius:12px; padding:20px 16px 16px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06); }
.letter-lines{ position:absolute; inset:0; top:56px;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, rgba(120,100,90,0.15) 27px, rgba(120,100,90,0.15) 28px);
  pointer-events:none; border-radius:0 0 12px 12px; }
.letter-heading{ font-family:'T4TKalam', cursive; font-size:20px; color:#a3487a; margin-bottom:6px; }
.letter-textarea{ position:relative; width:100%; min-height:220px; border:none; background:transparent; resize:vertical;
  font-family:'T4TKalam', cursive; font-size:18px; line-height:28px; color:#2b2036; outline:none; padding:0; }
.letter-textarea::placeholder{ color:#c2b6a8; font-family:'T4TKalam', cursive; }

/* closing transition overlay */
.closing-overlay{ position:fixed; inset:0; background:rgba(43,32,54,0.85); z-index:200; display:none; align-items:center; justify-content:center; flex-direction:column; gap:18px; }
.closing-overlay.active{ display:flex; animation:overlayfade .6s ease; }
@keyframes overlayfade{ from{opacity:0;} to{opacity:1;} }
.closing-tape{ width:160px; height:105px; border-radius:10px; background:var(--tape-shell, linear-gradient(160deg,#efe6de,#ded1c4)); box-shadow:0 20px 50px rgba(0,0,0,0.5); animation:tapeShrink 1.1s ease forwards; }
@keyframes tapeShrink{ 0%{ transform:scale(1) translateY(0); opacity:1; } 70%{ transform:scale(0.4) translateY(40px); opacity:1; } 100%{ transform:scale(0.15) translateY(80px); opacity:0; } }
.closing-msg{ color:#fff; font-size:14px; font-weight:600; opacity:0.85; }

/* ===== PLAYER SHELLS ===== */
.shell-picker{ display:flex; gap:12px; justify-content:center; margin:18px 0 6px; flex-wrap:wrap; }
.shell-option{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 16px; border-radius:16px; background:#fff; box-shadow:var(--shadow); cursor:pointer; border:2px solid transparent; font-size:11px; font-weight:700; color:#7a6b8a; }
.shell-option.active{ border-color:var(--trans-1); color:var(--ink); }
.shell-thumb{ font-size:28px; }

.player-stage{ display:flex; flex-direction:column; align-items:center; margin:16px 0 24px; }
.player-scene{ perspective:1000px; width:100%; display:flex; justify-content:center; padding:20px 0; min-height:240px; }
.player-shell{ position:relative; transform-style:preserve-3d; transition:transform .4s ease; }
.player-scene:hover .player-shell{ transform:translateY(-4px); }

/* ===========================================================================
   REAL SHELL ART — these three .shell-* rules now render the actual locked
   full_recorder_{shape}.svg build (metal body, anodized sheen, 3-ring glass
   seam, axis-aware hand-etched hatch, reels) instead of flat CSS boxes.
   Each shell is a fixed-size stage (.shell-art-stage) with the SVG as a
   plain <img> background layer, and the LIVE bits (tape title text + the
   two spinning reel overlays) positioned in px directly on top, using the
   exact label/reel geometry the Python build computed for that SVG. If the
   build scripts ever change reel_row_frac / title_y_frac / inset_units for
   a shape, re-run build_scripts/compute_overlay (see README) and update the
   matching --ov-* custom properties below to match. ===========================================================================*/
.shell-art-stage{ position:absolute; inset:0; display:block; }
.shell-art-stage > img.shell-art-img{ display:block; width:100%; height:100%; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.shell-art-overlay-title{
  position:absolute; display:flex; align-items:center; justify-content:center;
  font-family:'T4TKalam', cursive; font-weight:700; color:var(--label-paper,#fbf6ea);
  text-shadow:0 1px 1px rgba(0,0,0,0.4); pointer-events:none; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; letter-spacing:0.2px;
}
.shell-art-overlay-reel{ position:absolute; border-radius:50%; pointer-events:none; }
.shell-art-overlay-reel .reel-spokes{ width:100%; height:100%; position:relative; }
.shell-art-overlay-reel .reel-spokes::before, .shell-art-overlay-reel .reel-spokes::after{
  content:""; position:absolute; top:50%; left:50%; width:74%; height:2px;
  background:rgba(5,3,8,0.55); transform-origin:center;
}
.shell-art-overlay-reel .reel-spokes::before{ transform:translate(-50%,-50%) rotate(0deg); }
.shell-art-overlay-reel .reel-spokes::after{ transform:translate(-50%,-50%) rotate(90deg); }
.shell-art-overlay-reel.spinning .reel-spokes{ animation:spin 1.4s linear infinite; }

/* boombox: real art at 300x270 (top_margin 60 for the chrome carry-handle) */
.shell-boombox{ width:300px; height:270px; }
.shell-boombox .shell-tape-slot{ position:absolute; left:82px; top:112px; width:136px; height:106px; display:flex; align-items:center; justify-content:center; }
.shell-boombox .shell-art-overlay-title{ left:82px; top:126.9px; width:136px; height:16px; font-size:12px; }
.shell-boombox .shell-art-overlay-reel.left{ left:102.4px; top:165.1px; width:38px; height:38px; }
.shell-boombox .shell-art-overlay-reel.right{ left:159.6px; top:165.1px; width:38px; height:38px; }
/* speakers are baked into the SVG art itself now — no separate CSS speaker div needed */

/* carabiner: real art at 170x267.3 (target_w 260 scaled to 170, top_margin 46) */
.shell-carabiner{ width:170px; height:267.3px; }
.shell-carabiner .shell-tape-slot{ position:absolute; left:42.7px; top:69.8px; width:85.9px; height:156.5px; display:flex; align-items:center; justify-content:center; }
.shell-carabiner .shell-art-overlay-title{ left:42.7px; top:88.7px; width:85.9px; height:10.5px; font-size:8.5px; }
.shell-carabiner .shell-art-overlay-reel.left{ left:48.8px; top:135px; width:26px; height:26px; }
.shell-carabiner .shell-art-overlay-reel.right{ left:76.1px; top:135px; width:26px; height:26px; }

/* heart: real art at 220x235.6 (target_w 260 scaled to 220, top_margin 40) */
.shell-heart{ width:220px; height:235.6px; }
.shell-heart .shell-tape-slot{ position:absolute; left:55.9px; top:79.7px; width:108.2px; height:89.9px; display:flex; align-items:center; justify-content:center; }
.shell-heart .shell-art-overlay-title{ left:55.9px; top:92.6px; width:108.2px; height:13.5px; font-size:9.5px; }
.shell-heart .shell-art-overlay-reel.left{ left:82.85px; top:122.15px; width:25.4px; height:25.4px; }
.shell-heart .shell-art-overlay-reel.right{ left:112.45px; top:122.15px; width:25.4px; height:25.4px; }

/* the interactive title text + reels are the ONLY thing app.js swaps per
   track/skin now — the tape body itself is baked into the shell art, so
   there's no separate .eq-bars span{ width:4px; background:#fff; border-radius:2px; animation:eq 0.8s ease-in-out infinite alternate; }
.eq-bars span:nth-child(1){ height:6px; animation-delay:0s; }
.eq-bars span:nth-child(2){ height:14px; animation-delay:.1s; }
.eq-bars span:nth-child(3){ height:9px; animation-delay:.2s; }
.eq-bars span:nth-child(4){ height:16px; animation-delay:.3s; }
.eq-bars span:nth-child(5){ height:7px; animation-delay:.4s; }
@keyframes eq{ from{ transform:scaleY(0.4); } to{ transform:scaleY(1); } }

.tape-controls{ display:flex; gap:14px; margin-top:14px; }
.tctrl{ width:52px; height:52px; border-radius:50%; border:none; background:#fff; font-size:18px; box-shadow:var(--shadow); cursor:pointer; }
.tctrl:active{ transform:scale(0.9); }
.tctrl.big{ width:62px; height:62px; background:linear-gradient(135deg,var(--trans-1),var(--trans-2)); font-size:22px; }

/* now-playing card: pops in fully opaque (no fade-in) each time the track changes */
@keyframes npPop{ 0%{ transform:scale(0.92); } 55%{ transform:scale(1.04); } 100%{ transform:scale(1); } }
.np-label{ font-size:11px; font-weight:800; letter-spacing:1px; color:#ff6f91; text-transform:uppercase; }
.np-track{ font-weight:800; font-size:15.5px; color:var(--ink); }
.np-artist{ font-size:11.5px; color:#9c86ad; margin-bottom:2px; }
.np-note{ font-family:'T4TKalam', cursive; font-size:14px; color:#a3762f; background:rgba(255,182,193,0.25); border-radius:10px; padding:6px 10px; }

/* send screen */
.send-heading{ text-align:center; font-size:22px; margin:18px 0 4px; }
.send-sub{ text-align:center; color:#7a6b8a; font-size:14px; margin-bottom:24px; }
.qr-card{ background:#fff; border-radius:24px; padding:24px; text-align:center; box-shadow:var(--shadow); max-width:280px; margin:0 auto; border:6px solid var(--qr-border, #5BCEFA); }
.qr-caption{ margin-top:12px; font-weight:800; font-size:15px; font-family:'T4TKalam', cursive; }
.qr-honesty-note{ max-width:420px; margin:14px auto 0; font-size:11.5px; color:#a3762f; background:#fff8ea; border:1px solid #ffe4ad; border-radius:12px; padding:10px 14px; text-align:center; line-height:1.5; }
.send-actions{ max-width:520px; margin:26px auto 0; }

/* modal (voice memo) */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(43,32,54,0.55); z-index:100; align-items:flex-end; justify-content:center; }
.modal-overlay.active{ display:flex; }
.modal-card{ background:#fff; width:100%; max-width:520px; border-radius:24px 24px 0 0; padding:24px; position:relative; }
.modal-close{ position:absolute; top:16px; right:16px; background:#faf5fb; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; z-index:2; }
.modal-track-name{ font-weight:800; font-size:17px; padding-right:30px; }
.modal-track-artist{ font-size:12.5px; color:#9c86ad; margin-bottom:10px; }
.modal-label{ display:block; font-size:12.5px; font-weight:700; color:#7a6b8a; margin:12px 0 6px; }
.voice-recorder{ display:flex; align-items:center; gap:12px; }
.btn-record{ padding:10px 18px; border-radius:999px; border:none; background:#ffe0e8; color:#c23b6b; font-weight:800; cursor:pointer; }
.btn-record.recording{ background:#ff4d6d; color:#fff; }
#record-timer{ font-size:13px; color:#7a6b8a; font-weight:700; }

@media (max-width:380px){ .wordmark{ font-size:36px; } .shell-boombox{ width:260px; }  }

/* ===================== merged from style_v4_patch.css (v4) ===================== */
/* ============================================================
   T4T Mix — v4 patch stylesheet
   Load AFTER style.css in index.html:
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="style_v4_patch.css">
   Only overrides the v4 additions. Everything else in style.css
   (fonts, base layout, cassette geometry) is untouched.
   ============================================================ */

/* ---------- Honesty note on hero ---------- */
.honesty-note {
  font-size: 12.5px; line-height: 1.5;
  color: #4a3f5a; opacity: 0.86;
  background: rgba(255,255,255,0.55);
  padding: 10px 14px; border-radius: 12px;
  margin: 14px 0 0; border: 1px dashed #b7a7c9;
}
.honesty-note strong { color: #2b2036; }

/* ---------- Engraving (spine text above the label) ---------- */
.cassette-engraving {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  font-family: "Courier New", monospace;
  font-size: 11px; letter-spacing: 3px;
  color: rgba(60, 40, 20, 0.42);
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: text;
  transition: color 0.2s, background 0.2s;
  z-index: 4;
  max-width: 68%; text-align: center;
  white-space: nowrap; overflow: hidden;
}
.cassette-engraving:focus { outline: none; background: rgba(255,255,255,0.3); color: #2b2036; }
.cassette-engraving.has-value { color: #3d2820; font-weight: 600; }

/* ---------- Now-playing card: original title line ---------- */
.np-original {
  font-size: 12px; color: #8a7fa0;
  font-style: italic;
  margin-top: -2px; margin-bottom: 6px;
}

/* ---------- Voice modal: memo positioning + rename ---------- */
.memo-position select {
  margin-left: 8px; padding: 4px 8px;
  border: 1px solid #b7a7c9; border-radius: 8px;
  background: #fff; font-size: 12px; color: #2b2036;
}

/* ===================== v0.6 send screen (2026-10-20) ===================== */
.send-form, .send-done { max-width: 420px; margin: 14px auto 0; }
.send-field { display: block; margin: 0 0 10px; text-align: left; }
.send-field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; opacity: .85; }
.send-field em { font-weight: 400; font-style: normal; opacity: .7; }
.send-field input, .send-field select {
  width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px;
  border: 1.5px solid rgba(43,32,54,.15); background: #fff; font: inherit; font-size: 16px;
}
.send-status { min-height: 1.2em; font-size: 14px; margin: 8px 0 0; text-align: center; }
.send-link { display: block; text-align: center; word-break: break-all; font-size: 14px; margin: 4px 0 12px; color: #e63a7a; }
.qr-placeholder { width: 220px; height: 220px; display: grid; place-items: center; text-align: center;
  font-size: 14px; line-height: 1.6; border: 2px dashed rgba(43,32,54,.2); border-radius: 12px; opacity: .7; }
.qr-placeholder::first-line { font-size: 40px; }
.sent-list { max-width: 420px; margin: 18px auto 0; text-align: left; }
.sent-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-top: 1px solid rgba(43,32,54,.1); font-size: 14px; }
.sent-row a { font-weight: 600; color: inherit; }
.sent-to { font-size: 12px; opacity: .65; text-align: right; }
.sent-reply { grid-column: 1 / -1; font-size: 13px; opacity: .85; }
.sent-reply audio { height: 32px; vertical-align: middle; max-width: 100%; }


/* ===================== v0.7 tape screen (2026-10-20) ===================== */
html{ --pen:#241a33; --paper-line:rgba(120,100,90,.18); }
html[data-ink="midnight"]{ --pen:#241a33; } html[data-ink="berry"]{ --pen:#a3204f; }
html[data-ink="ocean"]{ --pen:#1d4f8f; } html[data-ink="forest"]{ --pen:#2f5d3a; } html[data-ink="plum"]{ --pen:#5b2a86; }
html[data-paper="kraft"]{ --label-paper:#e9d6b4 !important; --paper-line:rgba(90,60,30,.2); }
html[data-paper="grid"]{ --label-paper:#f7f9fc !important; --paper-line:rgba(60,110,170,.18); }
html[data-paper="blush"]{ --label-paper:#fde8ee !important; --paper-line:rgba(160,70,100,.16); }
#cassette-front{ width:min(340px, 92vw); height:auto; aspect-ratio:auto; }
.cassette-label{ background:var(--label-paper,#fbf6ea); }
.label-lines{ background-image:repeating-linear-gradient(to bottom, transparent, transparent 20px, var(--paper-line) 20px, var(--paper-line) 21px); }
html[data-paper="grid"] .label-lines{ background-image:linear-gradient(var(--paper-line) 1px, transparent 1px), linear-gradient(90deg, var(--paper-line) 1px, transparent 1px); background-size:14px 14px; }
.handwritten-title, .jsong .t, .shell-art-overlay-title{ color:var(--pen); }
.shell-art-overlay-title{ text-shadow:none; background:var(--label-paper,#fbf6ea); border-radius:3px; }
.cassette-photo-slot{ background-color:rgba(255,255,255,.55); }
.cassette-photo-slot.has-photo .cassette-photo-placeholder{ display:none; }

.style-panel{ max-width:420px; margin:0 auto 18px; display:grid; gap:12px; }
.style-row{ display:grid; grid-template-columns:52px 1fr; align-items:center; gap:10px; }
.style-label{ font-size:12px; font-weight:800; color:#9c86ad; text-transform:uppercase; letter-spacing:1px; }
.skin-picker, .ink-picker{ display:flex; gap:10px; flex-wrap:wrap; }
.paper-picker{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.skin-swatch{ padding:0; transition:transform .15s; }
.ink-dot{ width:28px; height:28px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px rgba(43,32,54,.15); cursor:pointer; padding:0; transition:transform .15s; }
.ink-dot.active{ box-shadow:0 0 0 2.5px #2b2036; transform:scale(1.12); }
.ink-dot[data-ink="midnight"]{ background:#241a33; } .ink-dot[data-ink="berry"]{ background:#a3204f; }
.ink-dot[data-ink="ocean"]{ background:#1d4f8f; } .ink-dot[data-ink="forest"]{ background:#2f5d3a; } .ink-dot[data-ink="plum"]{ background:#5b2a86; }
.paper-chip{ padding:7px 4px; text-align:center; border-radius:10px; border:2px solid transparent; font-family:'T4TKalam', cursive; font-size:14px; color:#4a3d58; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.paper-chip[data-paper="cream"]{ background:#fbf6ea; } .paper-chip[data-paper="kraft"]{ background:#e9d6b4; }
.paper-chip[data-paper="grid"]{ background:#f7f9fc linear-gradient(rgba(60,110,170,.16) 1px, transparent 1px) 0 0/8px 8px; } .paper-chip[data-paper="blush"]{ background:#fde8ee; }
.paper-chip.active{ border-color:#2b2036; }

/* J-card: full-width song list with room for long names */
.jcard{ max-width:420px; margin:0 auto 18px; background:var(--label-paper,#fbf6ea); border-radius:16px; box-shadow:var(--shadow); padding:14px 14px 8px; position:relative; }
.jcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:8px; border-radius:16px 0 0 16px; background:var(--tape-shell, #e9dfd4); }
.jcard-head{ display:flex; align-items:center; justify-content:space-between; font-family:'T4TKalam', cursive; font-size:20px; color:var(--pen); padding-left:6px; }
.jcard-play{ border:none; border-radius:999px; padding:7px 14px; font-weight:800; font-size:13px; color:#fff; background:linear-gradient(135deg,var(--trans-1),var(--trans-2)); cursor:pointer; }
.jcard-hint{ font-size:11.5px; color:#9c86ad; margin:2px 0 6px 6px; }
.jcard-list{ list-style:none; margin:0; padding:0 0 0 6px; }
.jcard-list li + li{ border-top:1px dashed var(--paper-line); }
.jsong{ width:100%; display:grid; grid-template-columns:26px 1fr 34px; gap:8px; align-items:center; text-align:left; background:none; border:none; padding:10px 0; cursor:pointer; font:inherit; color:inherit; border-radius:8px; }
.jsong:active{ background:rgba(0,0,0,.04); }
.jsong .num{ font-size:11px; font-weight:800; color:#8f7f70; font-variant-numeric:tabular-nums; }
.jsong .meta{ display:flex; flex-direction:column; min-width:0; }
.jsong .t{ font-family:'T4TKalam', cursive; font-size:17px; line-height:1.2; overflow-wrap:anywhere; }
.jsong .a{ font-size:12px; color:#6f6385; overflow-wrap:anywhere; }
.jsong .n{ font-family:'T4TKalam', cursive; font-size:13px; color:#a3762f; margin-top:2px; }
.jsong .add{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:14px; border:1.5px dashed #d8c7e3; color:#a698b3; }
.jsong .add.has{ border:none; background:linear-gradient(135deg,#ffd1e3,#ffe9c2); box-shadow:0 0 10px rgba(255,111,145,.35); }
.jsong.now .t{ color:#e63a7a; }
.jsong.now .num{ color:#e63a7a; }

/* player screen */
.shell-option img{ width:58px; height:52px; object-fit:contain; }
.np-mini{ text-align:center; margin-top:6px; min-height:40px; max-width:320px; }
.np-mini .np-track{ overflow-wrap:anywhere; }
.deck-msg{ min-height:1.2em; font-size:12.5px; color:#7a6b8a; text-align:center; max-width:340px; margin:10px auto 0; }
.deck-msg.nudge{ color:#e63a7a; font-weight:700; }
.sender-deck{ width:min(420px, 100%); margin-top:10px; display:grid; gap:8px; justify-items:center; }
.sender-deck .lane-switch{ display:inline-flex; padding:3px; border-radius:999px; background:#fff; box-shadow:var(--shadow); }
.sender-deck .lane-switch:empty{ display:none; }
.sender-deck .lane-switch button{ border:none; background:none; padding:6px 12px; border-radius:999px; font-size:13px; color:#7a6b8a; cursor:pointer; }
.sender-deck .lane-switch button.on{ background:#2b2036; color:#fff; font-weight:700; }
.sender-deck .deck-mount{ width:100%; border-radius:12px; overflow:hidden; }
.deck-slot iframe{ display:block; width:100%; border:0; }
.deck-slot[data-lane="youtube"] iframe{ height:200px; }
.deck-slot[data-lane="spotify"] iframe{ height:152px; }
.deck-slot[data-lane="preview"]{ display:none; }

/* ============ v0.8 — launch: account bar, feedback, donation, sign-in, inbox ============ */
.freemium-badge{ display:none !important; }
.site-banner{ position:sticky; top:0; z-index:90; background:#2b2036; color:#fff; text-align:center; font-size:13.5px; padding:9px 14px; font-weight:600; }
.account-bar{ position:fixed; top:12px; right:12px; z-index:80; display:flex; gap:8px; }
.acct-btn{ border:1.5px solid #e4d7ee; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); color:var(--ink); font-weight:700; font-size:13px; padding:8px 12px; border-radius:999px; cursor:pointer; box-shadow:0 4px 14px rgba(43,32,54,.08); display:inline-flex; align-items:center; gap:6px; }
.acct-btn .badge{ background:#e63a7a; color:#fff; border-radius:999px; font-size:11px; min-width:18px; height:18px; display:inline-grid; place-items:center; padding:0 5px; }
.launch-card{ margin:22px auto 0; max-width:440px; background:#fff; border:1.5px dashed #f2c6d6; border-radius:18px; padding:16px 18px; text-align:center; box-shadow:var(--shadow); }
.launch-card.small{ margin-top:20px; box-shadow:none; background:rgba(255,255,255,.7); }
.launch-title{ margin:0 0 4px; font-weight:800; font-size:15px; }
.launch-sub{ margin:0; font-size:13.5px; color:#6f5f80; line-height:1.45; }
.launch-actions{ display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.launch-actions .btn-secondary{ width:auto; margin:0; padding:10px 16px; font-size:14px; }
.btn-donate{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 16px; border-radius:14px; background:linear-gradient(90deg,#ffd166,#f5a9b8); color:#2b2036; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 6px 16px rgba(245,169,184,.35); }
.btn-donate.wide{ display:flex; margin-top:12px; }
.btn-donate[hidden]{ display:none; }
.signin-nudge{ max-width:440px; margin:18px auto 0; background:linear-gradient(135deg,#eef9ff,#fff0f4); border-radius:16px; padding:14px 16px; font-size:13.5px; line-height:1.45; text-align:left; }
.signin-nudge p{ margin:0 0 8px; }
.signin-nudge .btn-secondary{ margin:0; padding:10px; }
.modal-sub{ font-size:13.5px; color:#6f5f80; margin:6px 0 4px; line-height:1.45; }
.modal-card input[type=tel], .modal-card input[type=text], .modal-card textarea{ width:100%; padding:12px 14px; border:2px solid #eee3f4; border-radius:12px; font-size:16px; font-family:inherit; }
.code-input{ text-align:center; letter-spacing:.4em; font-size:24px !important; font-weight:800; margin-top:10px; }
.btn-ghost.small{ font-size:12.5px; margin-top:12px; }
.inbox-card{ max-height:88vh; overflow:auto; }
.inbox-list{ margin:10px 0; }
.reply-open{ color:#c2185b; font-weight:700; text-decoration:none; }
.reply-open.unread::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:#e63a7a; margin-right:6px; vertical-align:middle; }
.muted{ color:#9c86ad; font-size:13px; }
.toggle-row{ display:flex; gap:8px; align-items:center; font-size:13.5px; margin-top:12px; }
.fb-rating{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.fb-rating button{ border:2px solid #eee3f4; background:#fff; border-radius:14px; padding:10px 4px; font-size:24px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.fb-rating button span{ font-size:11px; font-weight:700; color:#7a6b8a; }
.fb-rating button.on{ border-color:#e63a7a; background:#fff0f5; }
.fb-done{ text-align:center; padding:20px 0; } .fb-done .big{ font-size:44px; margin:0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.sent-list .panel-title em{ font-weight:400; opacity:.6; font-style:normal; font-size:12px; }
.acct-btn .badge[hidden]{ display:none; }
.acct-btn{ white-space:nowrap; }
.acct-btn[hidden]{ display:none; }
@media (max-width:520px){ .account-bar{ position:static; justify-content:flex-end; padding:10px 12px 0; } }

[hidden]{display:none!important}

/* ============ ACCESS GATE — the cover page (v0.9) ============ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.gated{ overflow:hidden; }
body.gated .account-bar{ display:none; }
.gate{ position:fixed; inset:0; z-index:150; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#f7f1e6; color:#241a2e;
  background-image:
    radial-gradient(rgba(36,26,46,.045) 1px, transparent 1.2px);
  background-size:14px 14px; }
.gate-stripe{ position:sticky; top:0; height:10px; display:flex; z-index:2; }
.gate-stripe.bottom{ position:relative; top:auto; }
.gate-stripe i{ flex:1; } .gate-stripe i:nth-child(1),.gate-stripe i:nth-child(5){ background:#5BCEFA; }
.gate-stripe i:nth-child(2),.gate-stripe i:nth-child(4){ background:#F5A9B8; } .gate-stripe i:nth-child(3){ background:#fff; }
.gate-inner{ max-width:460px; margin:0 auto; padding:26px 22px 34px; min-height:calc(100vh - 20px); display:flex; flex-direction:column; }
.gate-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.gate-kicker{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; opacity:.6; }
.gate-stamp{ font-family:'T4TKalam',cursive; font-weight:700; font-size:15px; color:#c2416d; border:2px solid #c2416d; border-radius:6px;
  padding:1px 9px; transform:rotate(4deg); letter-spacing:.04em; }
.gate-title{ margin:26px 0 4px; font-size:clamp(56px,17vw,78px); line-height:.95; font-weight:900; letter-spacing:-.02em; }
.gate-title .wm-t4t{ background:linear-gradient(90deg,#5BCEFA,#F5A9B8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gate-title .wm-mix{ color:#241a2e; }
.gate-lede{ font-size:17px; line-height:1.45; margin:6px 0 22px; max-width:30ch; opacity:.85; }

/* the cassette you type into */
.gate-tape{ position:relative; background:linear-gradient(160deg,#e8e0d6,#d8cabf); border-radius:18px; padding:16px 16px 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 30px rgba(36,26,46,.16); transform:rotate(-1.2deg); }
.gt-screw{ position:absolute; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff,#9d9098 70%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.gt-screw.tl{ top:8px; left:8px; } .gt-screw.tr{ top:8px; right:8px; } .gt-screw.bl{ bottom:8px; left:8px; } .gt-screw.br{ bottom:8px; right:8px; }
.gt-label{ background:#fbf6ea; border-radius:8px; padding:10px 14px 6px; box-shadow:inset 0 0 0 1px rgba(36,26,46,.06); }
.gt-label-top{ display:flex; justify-content:space-between; font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.35em; color:#8a7d86; }
.gt-side{ letter-spacing:.15em; color:#3a8fc7; font-weight:700; font-family:inherit; }
.gt-input{ width:100%; border:0; background:transparent; outline:none; font-family:'T4TKalam',cursive; font-weight:700; font-size:30px; color:#241a2e;
  padding:6px 0 0; letter-spacing:.06em; text-transform:uppercase; }
.gt-input::placeholder{ text-transform:none; letter-spacing:0; color:#b7a9b3; font-weight:400; font-size:26px; }
.gt-lines i{ display:block; height:1px; background:rgba(36,26,46,.12); margin:8px 0 0; } .gt-lines i:first-child{ margin-top:2px; }
.gt-window{ margin:12px 6px 12px; height:56px; background:#2f2833; border-radius:10px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; position:relative; }
.gt-ribbon{ position:absolute; left:58px; right:58px; top:50%; height:3px; margin-top:-1.5px; background:#4b3d3a; border-radius:2px; }
.gt-reel{ width:38px; height:38px; border-radius:50%; background:radial-gradient(circle,#e9e1d6 52%,#cfc3b6 54%); position:relative; z-index:1; display:grid; place-items:center; }
.gt-reel b{ width:20px; height:20px; border-radius:50%; background:
   conic-gradient(#2f2833 0 10%,transparent 10% 33%,#2f2833 33% 43%,transparent 43% 66%,#2f2833 66% 76%,transparent 76%); }
.gate-tape.spinning .gt-reel b{ animation:gtspin .7s linear infinite; }
@keyframes gtspin{ to{ transform:rotate(360deg); } }
.gate-tape.shake{ animation:gtshake .45s; }
@keyframes gtshake{ 0%,100%{ transform:rotate(-1.2deg) translateX(0); } 20%{ transform:rotate(-1.2deg) translateX(-9px); } 40%{ transform:rotate(-1.2deg) translateX(8px); } 60%{ transform:rotate(-1.2deg) translateX(-5px); } 80%{ transform:rotate(-1.2deg) translateX(3px); } }
.gt-play{ width:100%; border:0; border-radius:12px; padding:14px; font-size:17px; font-weight:800; color:#241a2e; cursor:pointer;
  background:linear-gradient(90deg,#5BCEFA,#F5A9B8); box-shadow:0 3px 0 rgba(36,26,46,.18); letter-spacing:.02em; }
.gt-play:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(36,26,46,.18); }
.gt-play:disabled{ opacity:.7; }
.gate-msg{ min-height:22px; margin:12px 2px 0; font-size:14.5px; font-weight:600; color:#c2416d; }
.gate-msg.ok{ color:#2a8a5f; }

.gate-or{ display:flex; align-items:center; gap:12px; margin:14px 0 14px; font-family:'T4TKalam',cursive; font-size:19px; color:#6b5a72; }
.gate-or::before,.gate-or::after{ content:""; flex:1; border-top:2px dashed rgba(36,26,46,.18); }
.gate-ways{ display:grid; gap:12px; }
.gate-way{ display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit; background:#fff; border:2.5px solid #241a2e;
  border-radius:16px; padding:15px 16px; box-shadow:4px 4px 0 #241a2e; transition:transform .12s, box-shadow .12s; }
a.gate-way:hover,a.gate-way:focus-visible{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #241a2e; }
a.gate-way:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 #241a2e; }
.way-venmo{ background:#fbe3ea; }
.way-num{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:15px; background:#5BCEFA; color:#241a2e; margin-top:1px; }
.way-venmo .way-num{ background:#F5A9B8; }
.way-body{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.way-body b{ font-family:'T4TKalam',cursive; font-size:22px; line-height:1.1; font-weight:700; }
.way-body small{ font-size:13.5px; line-height:1.35; opacity:.75; }
.way-link{ font-weight:800; font-size:14.5px; word-break:break-all; margin-top:2px; }
.way-go{ font-size:22px; font-weight:900; align-self:center; }
.way-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.way-btn{ display:inline-block; text-decoration:none; color:#fff; background:#241a2e; border:2px solid #241a2e; border-radius:10px; padding:7px 13px; font-weight:800; font-size:14px; cursor:pointer; font-family:inherit; }
.way-btn.ghost{ background:transparent; color:#241a2e; }
.gate-fine{ margin-top:auto; padding-top:22px; text-align:center; font-size:13.5px; opacity:.75; line-height:1.6; }
.gate-linkbtn{ display:block; margin:4px auto 0; background:none; border:0; text-decoration:underline; font:inherit; color:#241a2e; cursor:pointer; font-weight:700; }

/* unlock animation: the cover slides up like a tape door */
.gate.opening{ animation:gateOpen .75s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes gateOpen{ to{ transform:translateY(-105%); } }
@media (prefers-reduced-motion: reduce){ .gate.opening{ animation:none; opacity:0; } .gate-tape.spinning .gt-reel b, .gate-tape.shake{ animation:none; } }
@media (min-width:720px){ .gate-inner{ padding-top:48px; } .gate-title{ margin-top:34px; } }

#signin-modal{ z-index:220; }
.gate-stamp{ white-space:nowrap; flex:none; }
.way-link{ word-break:normal; overflow-wrap:anywhere; }
.way-venmo .way-link{ overflow-wrap:normal; }

/* sign-in reminder before loading a playlist */
.warn-list{list-style:none;padding:0;margin:10px 0 12px;text-align:left}
.warn-list li{padding:8px 10px;margin:6px 0;border-radius:12px;background:rgba(194,65,109,.08);line-height:1.35}
.small-note{font-size:.85em;opacity:.8}

/* landing: survey + People's 990 */
.support-card{ margin:22px auto 0; max-width:440px; background:#fff; border-radius:18px; padding:16px 18px; text-align:center; box-shadow:var(--shadow); position:relative; overflow:hidden; padding-top:21px; }
.support-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,#5BCEFA,#F5A9B8,#fff,#F5A9B8,#5BCEFA); }
.support-title{ font-weight:800; font-size:17px; margin:0 0 4px; }
.support-sub{ margin:0 0 12px; opacity:.8; font-size:14px; line-height:1.4; }
.support-links{ display:flex; flex-direction:column; gap:8px; }
.support-link{ display:flex; align-items:center; gap:12px; text-align:left; padding:11px 14px; border-radius:14px; background:#fbf6fa; border:1.5px solid #f2dbe6; color:inherit; text-decoration:none; font-size:20px; transition:transform .15s; }
.support-link:hover{ transform:translateY(-1px); border-color:#f5a9b8; }
.support-link span{ display:flex; flex-direction:column; font-size:14px; }
.support-link small{ opacity:.7; font-size:12.5px; margin-top:1px; }
.support-link[hidden]{ display:none; }
/* in-app "they wrote back" alert */
.reply-toast{ position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:60; border:0; cursor:pointer; padding:11px 18px; border-radius:999px; background:#2b2036; color:#fff; font:inherit; font-size:14px; box-shadow:0 10px 28px rgba(43,32,54,.35); animation:toastIn .35s ease; max-width:92vw; }
.reply-toast b{ color:#F5A9B8; margin-left:4px; }
.reply-toast[hidden]{ display:none; }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,-14px);} to{ opacity:1; transform:translate(-50%,0);} }