@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"]{ 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{ 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; }