/* Mixtapes by Mail — one stylesheet. Mobile-first (designed at 390px). */

/* ---------- tokens & themes ---------- */
:root {
  --paper: #f6efe3;
  --paper-2: #efe4d1;
  --card: #fffaf0;
  --ink: #1f1a17;
  --ink-soft: #5d5249;
  --line: #dccfb8;
  --focus: #1f6feb;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 18px;
  --btn-edge: var(--ink);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* default theme = sunset */
  --shell: #ee6a3c; --shell-dark: #bd4421; --label: #fff3d9; --stripe-a: #dc3f2c; --stripe-b: #f6b73c;
  --accent: #c2410c; --accent-hi: #ff9d70; --accent-ink: #fff; --tint: #fde6d2; --night: #27150f;
}
[data-theme="sunset"] { --shell: #ee6a3c; --shell-dark: #bd4421; --label: #fff3d9; --stripe-a: #dc3f2c; --stripe-b: #f6b73c; --accent: #c2410c; --accent-hi: #ff9d70; --tint: #fde6d2; --night: #27150f; }
[data-theme="ocean"] { --shell: #2f9bb5; --shell-dark: #1d6f86; --label: #eaf7f6; --stripe-a: #1e5f8c; --stripe-b: #86d6d0; --accent: #0b6a8a; --accent-hi: #6fd0ec; --tint: #d9eef0; --night: #0d1c24; }
[data-theme="forest"] { --shell: #5f9460; --shell-dark: #3d6a3f; --label: #f4f1dc; --stripe-a: #2f5d3a; --stripe-b: #dcaa45; --accent: #2b6a3a; --accent-hi: #96d79a; --tint: #e3edd5; --night: #111d14; }
[data-theme="midnight"] { --shell: #2c3160; --shell-dark: #1a1d3d; --label: #ebe8f8; --stripe-a: #6c5ce7; --stripe-b: #f2b0cf; --accent: #4a3fb8; --accent-hi: #b3a9ff; --tint: #e2dff4; --night: #12132b; }
[data-theme="bubblegum"] { --shell: #f27bb0; --shell-dark: #c4487f; --label: #fff0f6; --stripe-a: #d6336c; --stripe-b: #7ad7e8; --accent: #be1f58; --accent-hi: #ff9cc4; --tint: #fde1ec; --night: #26111b; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 17px/1.55 var(--sans); color: var(--ink);
  background: var(--paper) var(--grain);
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; }
.hand { font-family: var(--hand); font-weight: 700; }
.muted { color: var(--ink-soft); font-weight: 400; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 16px; }
.wrap--narrow { max-width: 720px; }
.page-title { font-size: clamp(2.5rem, 9vw, 3.6rem); line-height: 1; margin-bottom: .35em; }
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 36em; }
.hint { font-size: .92rem; color: var(--ink-soft); margin: .3em 0 .7em; }
.eyebrow { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: .8em; }
.fineprint { font-size: .9rem; color: var(--ink-soft); margin-top: 1.1em; }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .65em 1.4em; border: 2px solid var(--btn-edge); border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font: 700 1rem/1.15 var(--sans); text-decoration: none; text-align: center;
  cursor: pointer; box-shadow: 0 3px 0 var(--btn-edge); transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-edge); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.btn--big { min-height: 56px; font-size: 1.12rem; padding: .7em 1.7em; }
.btn--small { min-height: 42px; padding: .4em 1.05em; font-size: .95rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: 0 1px 0 var(--btn-edge); }
.linklike { background: none; border: 0; padding: 4px; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

label { display: block; font-weight: 650; font-size: .92rem; margin-bottom: .35em; }
input, textarea, select {
  width: 100%; min-height: 48px; padding: .65em .85em; font: inherit; font-size: 16px; color: var(--ink);
  background: #fffdf8; border: 2px solid var(--line); border-radius: 12px; appearance: none;
}
input::placeholder, textarea::placeholder { color: #8c7f72; }
input:focus, textarea:focus { border-color: var(--ink); outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 0; }
input[type="search"] { -webkit-appearance: none; }
input[readonly] { background: var(--paper-2); }
textarea { resize: vertical; }
.field { margin: 0; }

/* ---------- header / footer ---------- */
.site-header { padding: 14px 0; }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.logo__mark { width: 36px; height: auto; color: var(--accent); flex: none; }
.logo__text { font: 700 1.7rem/1 var(--hand); }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav__link { color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; display: none; }
.site-nav__link:hover { text-decoration: underline; }
.site-header--minimal .logo__text { font-size: 1.35rem; }
.site-header--minimal .logo__mark { width: 28px; }
.site-footer { margin-top: 64px; padding: 28px 0 36px; border-top: 2px dashed var(--line); font-size: .92rem; color: var(--ink-soft); }
.site-footer--minimal { margin-top: 40px; }
.site-footer__row { display: grid; gap: 14px; }
.site-footer__brand { margin: 0; }
.site-footer__brand .hand { font-size: 1.35rem; color: var(--ink); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__nav a { color: var(--ink-soft); padding: 6px 0; }

/* ---------- cassette ---------- */
.cassette { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 400 / 260; filter: drop-shadow(0 14px 14px rgba(50, 25, 10, .25)); }
.cassette__svg { display: block; width: 100%; height: 100%; }
.c-shell { fill: var(--shell); }
.c-gloss { fill: #fff; opacity: .14; }
.c-edge { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 2.5; }
.c-label { fill: var(--label); }
.c-stripe-a { fill: var(--stripe-a); }
.c-stripe-b { fill: var(--stripe-b); }
.c-rule { stroke: rgba(31, 26, 23, .2); stroke-width: 1.3; fill: none; }
.c-window { fill: #1d1612; }
.c-ribbon { stroke: #5a4638; stroke-width: 3; fill: none; stroke-linecap: round; }
.c-tape { fill: #35291f; }
.c-hub { fill: #efe8da; }
.c-tooth { fill: #35291f; }
.c-trap { fill: var(--shell-dark); }
.c-hole { fill: #1d1612; }
.c-screw { fill: rgba(0, 0, 0, .3); }
.reel { transform-box: fill-box; transform-origin: center; }
.is-playing .reel { animation: spin 2.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cassette__text { position: absolute; left: 10%; right: 10%; top: 14.2%; font-family: var(--hand); color: #2a211c; line-height: 1; pointer-events: none; }
.cassette__title { font-size: 8.4cqw; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: .06em; }
.cassette__names { font-size: 6cqw; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .04em; color: #4a3a30; }
.cassette--mini { filter: drop-shadow(0 4px 4px rgba(50, 25, 10, .2)); }

/* ---------- landing ---------- */
.hero { padding: 16px 0 56px; overflow: hidden; }
.hero__grid { display: grid; gap: 28px; }
.hero__title { font: 700 clamp(3.3rem, 15vw, 5.8rem)/.92 var(--hand); margin: 0 0 .3em; letter-spacing: -.01em; }
.squiggle { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7c10-8 18 6 29-1s18 5 29-1 18 5 29-1 18 4 29-2' fill='none' stroke='%23dc3f2c' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .22em no-repeat; padding-bottom: .08em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.hero__cta .btn { flex: 1 1 auto; }
.hero__art { position: relative; padding: 12px 0 70px; }
.hero__tape { --tilt: -4deg; max-width: 440px; margin: 0 auto; transform: rotate(-4deg); animation: drop .8s cubic-bezier(.2, .8, .3, 1) both; }
.mini-card {
  position: absolute; right: 2%; bottom: 0; width: 132px; aspect-ratio: 5 / 7; padding: 10px; transform: rotate(7deg);
  background: #fffdf6; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 4px 6px 0 rgba(31, 26, 23, .2);
  display: grid; grid-template-rows: auto auto 1fr; justify-items: start; color: var(--ink);
}
.mini-card__nfc { width: 30px; color: var(--accent); }
.mini-card__tap { font-size: 1.5rem; line-height: 1; color: var(--ink); }
.mini-card__qr { width: 66px; align-self: end; justify-self: center; }
@keyframes drop { from { opacity: 0; transform: translateY(26px) rotate(calc(var(--tilt, 0deg) - 5deg)) scale(.95); } to { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); } }

.section { padding: 44px 0; }
.section__title { font: 700 clamp(2.2rem, 8vw, 3rem)/1 var(--hand); margin-bottom: .6em; }
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 34px; counter-reset: s; }
.step { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 30px 22px 22px; box-shadow: 4px 5px 0 rgba(31, 26, 23, .16); }
.step:nth-child(odd) { transform: rotate(-.7deg); }
.step:nth-child(even) { transform: rotate(.6deg); }
.step__num { position: absolute; top: -20px; left: 18px; width: 42px; height: 42px; border-radius: 50%; background: var(--stripe-b); border: 2px solid var(--ink); font-size: 1.9rem; line-height: 36px; text-align: center; }
.step__icon svg { width: 44px; height: 44px; color: var(--accent); display: block; margin-bottom: 10px; }
.step h3 { font: 700 1.9rem/1 var(--hand); margin-bottom: .3em; }
.step p { margin: 0; color: var(--ink-soft); }

.section--band { background: var(--paper-2); border-block: 2px dashed var(--line); }
.works { display: grid; gap: 22px; align-items: center; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: .45em 1em; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-weight: 650; box-shadow: 0 2px 0 var(--ink); }

.ticket { position: relative; display: grid; gap: 22px; padding: 28px 22px; background: var(--card); border: 3px dashed var(--ink); border-radius: 22px; align-items: center; }
.ticket__price { margin: 0 0 .6em; display: flex; align-items: baseline; gap: .4em; }
.ticket__price .hand { font-size: 5rem; line-height: .9; color: var(--accent); }
.ticket__price small { font-size: 1rem; color: var(--ink-soft); }
.ticket__art { display: none; width: 190px; transform: rotate(5deg); }
.ticks { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: .55em; }
.ticks li { position: relative; padding-left: 1.9em; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

.faq details { border-bottom: 2px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 650; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 700 1.9rem/1 var(--hand); color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--ink-soft); }
.final-cta { text-align: center; padding-bottom: 24px; }
.final-cta__title { font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1; margin-bottom: .6em; }

/* ---------- builder ---------- */
.builder { padding-top: 12px; padding-bottom: 40px; }
.builder__intro { margin-bottom: 18px; }
.builder__grid { display: grid; gap: 18px; }
.builder__preview { max-width: 320px; width: 100%; margin: 0 auto; text-align: center; }
.preview__label { font-size: 1.4rem; color: var(--ink-soft); margin: 0 0 6px; }
.preview__meta { margin: 8px 0 0; font-size: .9rem; color: var(--ink-soft); }
.builder__form { display: grid; gap: 16px; min-width: 0; }
.card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 18px 16px; box-shadow: 3px 4px 0 rgba(31, 26, 23, .15); }
.card__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.card__head .hint { margin: .2em 0 0; }
.card__num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.6rem; line-height: 32px; text-align: center; }
.card__title { font: 700 1.75rem/1.05 var(--hand); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field--wide { grid-column: 1 / -1; }
.paper-input {
  font: 500 1.5rem/34px var(--hand); color: #2a211c; padding: 4px 14px 6px; border-radius: 6px; min-height: 12em;
  background: #fffdf5 repeating-linear-gradient(transparent 0 33px, rgba(70, 110, 170, .2) 33px 34px); background-attachment: local; background-position: 0 3px;
}
.counter { text-align: right; font-size: .85rem; color: var(--ink-soft); margin: 4px 2px 0; }
.counter.is-near { color: #a43a10; font-weight: 700; }

.search { position: relative; }
.hint--status { min-height: 1.4em; margin: .5em 0; }
.results, .tracklist, .mine__list { list-style: none; margin: 0; padding: 0; }
.results { display: grid; gap: 6px; }
.result { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px; border-radius: 12px; background: #fffdf8; border: 1.5px solid var(--line); }
.result .btn--small { min-height: 40px; padding-inline: .9em; }
.t-text { min-width: 0; line-height: 1.25; }
.t-title { font-weight: 650; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.t-artist { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.art {
  display: block; position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; flex: none;
  background: color-mix(in srgb, var(--accent) 22%, var(--paper)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f1a17' fill-opacity='.45' d='M9 3v10.6A3.5 3.5 0 1 0 11 17V7.3l8-1.6V12a3.5 3.5 0 1 0 2 3.2V2z'/%3E%3C/svg%3E") center / 52% no-repeat;
}
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ibtn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.ibtn svg { width: 18px; height: 18px; }
.ibtn:hover:not([disabled]) { background: var(--paper-2); }
.ibtn[disabled] { opacity: .35; cursor: default; }
.ibtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.manual { margin: 10px 0 4px; }
.manual summary { cursor: pointer; font-weight: 650; color: var(--accent); padding: 8px 0; }
.manual__row { display: grid; gap: 10px; padding: 10px 0 4px; }
.manual__row .btn { justify-self: start; }
.tracks__head { font: 700 1.5rem/1 var(--hand); margin: 22px 0 4px; display: flex; justify-content: space-between; align-items: baseline; border-top: 2px dashed var(--line); padding-top: 16px; }
.tracks__count { font: 600 .9rem var(--sans); color: var(--ink-soft); }
.tracklist { display: grid; gap: 8px; }
.tracklist li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; background: #fffdf8; border: 1.5px solid var(--line); border-radius: 12px; }
.tracklist .art { position: relative; }
.tl-num { position: absolute; left: 0; top: 0; z-index: 1; min-width: 18px; padding: 0 4px; font: 700 .7rem/18px var(--sans); text-align: center; color: #fff; background: var(--ink); border-radius: 9px 0 9px 0; }
.ctl { display: flex; gap: 4px; }
.ctl .ibtn { width: 36px; height: 36px; border-width: 1.5px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; }
.swatch label { display: block; margin: 0; padding: 10px 8px 8px; text-align: center; border: 2px solid transparent; border-radius: 14px; font-weight: 650; font-size: .85rem; cursor: pointer; }
.swatch label span { display: block; margin-top: 6px; }
.swatch input:checked + label { border-color: var(--ink); background: var(--paper-2); box-shadow: 0 3px 0 var(--ink); }
.swatch input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.pl-chip { display: flex; gap: 10px; align-items: center; color: var(--ink); }
.pl-chip .art { width: 40px; }
.banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; background: #fff4d6; border: 2px solid var(--ink); border-radius: 12px; font-size: .95rem; }
.banner--warn { background: #ffe1d6; }
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(246, 239, 227, 0), var(--paper) 28%); }
.savebar__msg { flex: 1; margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.3; }
.form-error { margin: 0; padding: 12px 14px; background: #ffe1d6; border: 2px solid #a43a10; border-radius: 12px; color: #6e1f00; font-weight: 600; }

/* builder: optional other-service link, live playlist builds */
.more { padding: 6px 16px; box-shadow: none; background: transparent; border-style: dashed; }
.more summary { cursor: pointer; font-weight: 650; color: var(--accent); padding: 12px 0; }
.more[open] { background: var(--card); }
.more[open] summary { padding-bottom: 4px; }
.builds { grid-column: 1 / -1; }
.builds__list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.build { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fffdf8; border: 1.5px solid var(--line); border-radius: 12px; font-weight: 650; }
.build__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ink) 20%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.build.is-ready .build__dot { animation: none; border: 0; background: #3f9a5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.build.is-failed .build__dot { animation: none; border: 0; background: #c2410c; }
.build.is-ready { border-color: #3f9a5a; }

.success { padding: 6px 0 20px; }
.success__grid { display: grid; gap: 16px; margin-top: 18px; }
.copyrow { display: flex; gap: 8px; }
.copyrow input { font-size: 15px; }
.success__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.qr { display: flex; gap: 16px; align-items: center; }
.qr img { flex: none; width: 150px; height: 150px; background: #fff; padding: 8px; border: 2px solid var(--ink); border-radius: 12px; }
.keep { background: #fff3cf; border-style: dashed; }
.keep__warn { margin: 0 0 12px; }
.order__form { display: grid; gap: 12px; margin-top: 12px; }
.success__more { text-align: center; margin-top: 26px; }
.mine { margin-top: 36px; }
.mine__list { display: grid; gap: 8px; margin-top: 10px; }
.mine__list li { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; }
.mine__list a { font-weight: 650; }
.mine__list small { display: block; color: var(--ink-soft); }

/* ---------- recipient page ---------- */
.page-mixtape {
  --card: rgba(255, 255, 255, .62); --line: color-mix(in srgb, var(--shell) 30%, #fff);
  background: radial-gradient(120% 55% at 50% -4%, color-mix(in srgb, var(--shell) 38%, transparent), transparent 70%), var(--tint) var(--grain);
  background-attachment: fixed, scroll;
}
.stage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 16px 30px; min-height: calc(100svh - 150px); justify-content: center; }
.stage__tape { --tilt: -2deg; width: min(100%, 420px); transform: rotate(-2deg); animation: drop 1s cubic-bezier(.2, .8, .3, 1) both; }
.stage__tape.is-clunk { animation: clunk .35s ease; }
.stage__title { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1; margin: 26px 0 0; }
.stage__from { font-size: 1.05rem; color: var(--ink-soft); margin: 6px 0 0; }
.press { margin-top: 26px; min-width: 220px; animation: nudge 2.4s ease-in-out 1.4s infinite; }
.press__icon svg { width: 22px; height: 22px; display: block; }
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-5px); } 90% { transform: translateY(0); } }
@keyframes clunk { 0% { transform: rotate(-2deg) scale(1); } 40% { transform: rotate(-2deg) scale(.95); } 100% { transform: rotate(-2deg) scale(1); } }
.is-open .stage { min-height: 0; padding-bottom: 6px; }
.is-open .stage__tape { width: min(100%, 280px); transition: width .5s ease; }
.is-open .stage__title { font-size: 2.3rem; margin-top: 14px; transition: font-size .4s; }
.is-open .press { display: none; }
.opened { width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 16px 0; }
.is-open .opened > * { animation: rise .8s cubic-bezier(.2, .8, .3, 1) both; }
.is-open .opened > :nth-child(2) { animation-delay: .25s; }
.is-open .opened > :nth-child(3) { animation-delay: .4s; }
.is-open .opened > :nth-child(4) { animation-delay: .55s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.note { position: relative; margin: 16px 4px 26px; padding: 30px 22px 18px; background: #fffdf4; color: #2a211c; border-radius: 4px; transform: rotate(-.8deg); box-shadow: 0 14px 28px -14px rgba(40, 20, 10, .5), 0 1px 0 rgba(0, 0, 0, .06);
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(70, 110, 170, .2) 33px 34px); background-position: 0 28px; }
.note::before, .note::after { content: ""; position: absolute; top: -12px; width: 86px; height: 26px; background: color-mix(in srgb, var(--stripe-b) 75%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.note::before { left: 16px; transform: rotate(-5deg); }
.note::after { right: 16px; transform: rotate(4deg); }
.note__text { margin: 0; font: 500 1.6rem/34px var(--hand); white-space: pre-wrap; overflow-wrap: anywhere; }
.note__sign { margin-top: 8px; text-align: right; font-size: 1.7rem; line-height: 1.2; color: var(--accent); }
.playlist { margin: 0 0 26px; text-align: center; }
.playlist .btn { width: 100%; }
.side__title { font-size: 2.2rem; display: flex; align-items: baseline; gap: 10px; }
.side__title small { font: 600 .85rem var(--sans); color: var(--ink-soft); }
.tracks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.track { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; transition: box-shadow .2s, border-color .2s; }
.track .art { width: 56px; }
.track__main { min-width: 0; }
.track__title { margin: 0; font-weight: 700; line-height: 1.22; overflow-wrap: anywhere; }
.track__artist { margin: 1px 0 0; font-size: .92rem; color: var(--ink-soft); }
.track__links { margin: 3px 0 0; font-size: .82rem; display: flex; flex-wrap: wrap; gap: 0 16px; }
.track__links a { padding: 5px 0; font-weight: 500; }
.track__links a:first-child { font-weight: 700; }
.track.is-playing { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.play { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--btn-edge); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 3px 0 var(--btn-edge); }
.play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge); }
.play svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.play .i-pause, .is-playing > .play .i-play { display: none; }
.is-playing > .play .i-pause { display: block; }
/* "Listen on…" chooser */
.page-mixtape { --svc-bg: #fffdf6; --svc-edge: var(--ink); --svc-shadow: rgba(31, 26, 23, .9); }
.listen { margin: 0 0 30px; }
.listen__title { font-size: 2.7rem; line-height: 1; text-align: center; }
.listen__sub { text-align: center; color: var(--ink-soft); margin: .35em auto 1.1em; max-width: 24em; font-size: .98rem; }
.svcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.svc { position: relative; display: flex; flex-direction: column; }
.svc[hidden] { display: none; }
.svc__btn, .svc__wait {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 80px; padding: 12px 16px 12px 12px; text-align: left;
  color: var(--ink); background: var(--svc-bg); border: 2.5px solid var(--svc-edge); border-radius: 24px; font: inherit; text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 var(--svc-shadow); transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent;
}
.svc__btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--svc-shadow); }
.svc__btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--svc-shadow); }
.svc__btn[disabled] { opacity: .7; cursor: progress; transform: none; box-shadow: 0 2px 0 var(--svc-shadow); }
.svc__btn--open { margin-top: 10px; }
.svc__glyph { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--svc-edge); background: var(--accent); color: var(--accent-ink); transform: rotate(-6deg); }
.svc__glyph svg { width: 28px; height: 28px; }
.svc[data-svc="spotify"] .svc__glyph { background: var(--stripe-b); color: #1f1a17; }
.svc[data-svc="youtube"] .svc__glyph { background: var(--stripe-a); color: #fff; }
.svc__text { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.2; }
.svc__text b { font-size: 1.4rem; line-height: 1.1; }
.svc__text small { font-size: .86rem; color: var(--ink-soft); line-height: 1.3; }
.svc__text .svc__kick { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.svc__go { flex: none; width: 26px; height: 26px; color: var(--accent); }
.svc.is-fav .svc__btn { background: color-mix(in srgb, var(--accent) 14%, var(--svc-bg)); border-color: var(--accent); box-shadow: 0 5px 0 var(--accent); }
.svc.is-fav::before { content: "\2605  Your usual"; position: absolute; z-index: 1; top: -11px; right: 18px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 .74rem/1.5 var(--sans); letter-spacing: .02em; transform: rotate(2deg); }
.svc[data-status="building"] .svc__btn, .svc:not([data-status="building"]) .svc__wait { display: none; }
.svc__wait { cursor: default; border-style: dashed; box-shadow: none; background: transparent; }
.svc__wait .svc__glyph { opacity: .55; filter: saturate(.6); }
.svc__wait small { display: flex; align-items: center; gap: 8px; }
.spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.svc__msg { order: 3; margin: 10px 2px 0; padding: 10px 14px; border-radius: 14px; font-size: .95rem; line-height: 1.4; background: var(--card); border: 1.5px solid var(--line); }
.svc__msg:empty { display: none; }
.svc[data-ui="prep"] .svc__msg, .svc[data-ui="signing"] .svc__msg, .svc[data-ui="saving"] .svc__msg { display: flex; align-items: center; gap: 10px; }
.svc[data-ui="prep"] .svc__msg::before, .svc[data-ui="signing"] .svc__msg::before, .svc[data-ui="saving"] .svc__msg::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ink) 22%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.svc[data-ui="cancelled"] .svc__msg, .svc[data-ui="nosub"] .svc__msg, .svc[data-ui="error"] .svc__msg { background: #fff0d8; border-color: #c2410c; color: #5a2300; }
.svc[data-ui="saved"] .svc__msg { order: -1; margin: 0 2px 10px; background: color-mix(in srgb, #3f9a5a 18%, var(--svc-bg)); border-color: #3f9a5a; font-weight: 650; }
.svc__again { order: 4; align-self: center; font-size: .9rem; margin-top: 6px; }
.svc__note { margin: 10px 4px 0; font-size: .9rem; color: var(--ink-soft); order: 5; }
.svc__note[hidden] { display: none; }
.svc__miss { order: 6; margin: 6px 4px 0; padding: 8px 14px; list-style: none; font-size: .88rem; border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 12px; }
.svc__miss[hidden] { display: none; }
.svc__miss li { padding: 3px 0; }
.svc__miss span { color: var(--ink-soft); }
.svc-extra { text-align: center; margin: 16px 0 0; font-weight: 650; }

.make-cta { margin: 44px 0 0; padding-top: 24px; border-top: 2px dashed var(--line); text-align: center; }
.make-cta .hand { font-size: 1.9rem; line-height: 1.1; margin-bottom: .5em; }
.np { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--np-bg, #fffaf0); border-top: 2px solid var(--ink); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .35); }
.np[hidden] { display: none; }
.np .play { width: 44px; height: 44px; }
.np__text { min-width: 0; display: grid; line-height: 1.25; }
.np__text b, .np__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np__text span { font-size: .85rem; color: var(--ink-soft); }
.np__bar { position: absolute; left: 0; right: 0; top: -2px; height: 3px; }
.np__bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.has-np .site-footer { padding-bottom: 96px; }

@media (prefers-color-scheme: dark) {
  .page-mixtape {
    --paper: var(--night); --paper-2: rgba(255, 255, 255, .06); --ink: #f5ecdc; --ink-soft: #c4b8a6; --card: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .16);
    --accent: var(--accent-hi); --accent-ink: #1b120d; --btn-edge: rgba(0, 0, 0, .55); --np-bg: #1c1612; --focus: #8ab4ff;
    background: radial-gradient(120% 55% at 50% -4%, color-mix(in srgb, var(--shell) 32%, transparent), transparent 70%), var(--night) var(--grain);
    background-attachment: fixed, scroll;
  }
  .page-mixtape { --svc-bg: rgba(255, 255, 255, .09); --svc-edge: rgba(255, 255, 255, .4); --svc-shadow: rgba(0, 0, 0, .55); }
  .page-mixtape .svc[data-status="ready"].is-fav .svc__btn { box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 60%, #000); }
  .page-mixtape .svc__msg { background: rgba(255, 255, 255, .08); }
  .page-mixtape .svc[data-ui="cancelled"] .svc__msg, .page-mixtape .svc[data-ui="nosub"] .svc__msg, .page-mixtape .svc[data-ui="error"] .svc__msg { background: #3a2410; color: #ffd9b3; border-color: #ff9d70; }
  .page-mixtape .svc[data-ui="saved"] .svc__msg { background: rgba(63, 154, 90, .22); }
  .page-mixtape .svc__glyph { border-color: rgba(255, 255, 255, .45); }
  .page-mixtape .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); box-shadow: 0 3px 0 rgba(255, 255, 255, .18); }
  .page-mixtape .logo { color: var(--ink); }
  .page-mixtape .np { border-top-color: rgba(255, 255, 255, .25); }
  .page-mixtape .cassette { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); }
  .page-mixtape .art { background-color: color-mix(in srgb, var(--accent) 25%, #1b120d); }
  .page-mixtape .track__links a:first-child { color: var(--accent); }
}

/* ---------- error / order / legal ---------- */
.error-page, .order-page { padding: 24px 0 20px; text-align: center; }
.error-page__code { font-size: 1.3rem; color: var(--ink-soft); margin: 0; }
.error-page__art { position: relative; width: min(100%, 300px); margin: 6px auto 84px; }
.cassette--broken { transform: rotate(-9deg); }
.cassette--broken .c-gloss { opacity: .05; }
.spill { position: absolute; left: 6%; top: 74%; width: 98%; transform: rotate(8deg); filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.error-page__actions, .order-page__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.4em; }
.error-page .lede, .order-page .lede { margin-inline: auto; }
.order-page__art { width: 180px; margin: 10px auto 18px; animation: drop .9s cubic-bezier(.2, .8, .3, 1) both; }
.envelope { width: 100%; height: auto; display: block; }
.legal { padding-block: 20px; }
.legal__updated { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.6em; }
.legal h2 { font: 700 1.9rem/1.1 var(--hand); margin: 1.6em 0 .4em; }
.legal h3 { font-size: 1rem; margin: 1.1em 0 .2em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .45em; }

/* ---------- printable card ---------- */
.page-card { background: #e6dcc8 var(--grain); }
.card-toolbar { padding: 24px 0 4px; }
.card-toolbar__row { display: grid; gap: 14px; }
.card-toolbar__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sheets { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; padding: 18px 16px 60px; }
.pcard {
  position: relative; width: 5in; height: 7in; flex: none; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: .28in .3in .22in; background: #fffaf0; border: .13in solid var(--shell); border-radius: .12in; color: #1f1a17;
  box-shadow: 0 18px 30px -14px rgba(40, 25, 10, .5); outline: 1px dashed #8a7d6b; outline-offset: 4px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pcard .cassette { filter: none; }
.pcard > * { flex: none; }
.pcard__tape { width: 3in; margin-top: .02in; }
.pcard__title { font-size: 28pt; line-height: 1.02; margin: .14in 0 0; padding-bottom: .04in; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__names { font-size: 11pt; color: #5d5249; margin: .06in 0 0; }
.pcard__tap { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .08in; }
.qrbox { width: 1.75in; height: 1.75in; padding: .1in; background: #fff; border: 2px solid #1f1a17; border-radius: .14in; }
.qrbox img { display: block; width: 100%; height: 100%; }
.pcard__how { font-size: 9.5pt; line-height: 1.35; color: #3f352e; max-width: 3.2in; }
.pcard__how p { margin: 0; }
.pcard__cta { font-size: 22pt; line-height: 1; color: var(--accent); display: flex; align-items: center; justify-content: center; gap: .08in; margin-bottom: .03in !important; }
.pcard__cta .nfc { width: .3in; height: .3in; }
.pcard__apps { margin-top: .05in !important; font-size: 8.5pt; color: #5d5249; }
.pcard__url { margin-top: .04in !important; font-weight: 700; font-size: 8.5pt; letter-spacing: .02em; }
.pcard--back { align-items: stretch; text-align: left; padding: 0; }
.jhead { padding: 0 .3in .1in; border-bottom: 2px solid #1f1a17; }
.jhead::before { content: ""; display: block; height: .14in; margin: 0 -.3in .12in; background: linear-gradient(var(--stripe-a) 0 66%, var(--stripe-b) 66%); }
.jhead__side { font-size: 13pt; color: var(--accent); margin: 0; line-height: 1; }
.jhead__title { font-size: 26pt; line-height: 1; margin: .02in 0 .02in; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jhead__names { margin: 0; font-size: 9.5pt; color: #5d5249; }
.tl { margin: .12in .3in 0; padding: 0; list-style: none; counter-reset: t; }
.tl li { counter-increment: t; display: block; padding: .035in 0 .035in .28in; position: relative; border-bottom: 1px dotted rgba(31, 26, 23, .35); break-inside: avoid; overflow-wrap: anywhere; }
.tl li::before { content: counter(t); position: absolute; left: 0; top: .035in; width: .22in; text-align: right; font-weight: 700; color: var(--accent); }
.tl__t { font-weight: 650; }
.tl__a { color: #5d5249; }
.tl--lg { font-size: 12pt; } .tl--md { font-size: 10.5pt; } .tl--sm { font-size: 8.8pt; } .tl--xs { font-size: 7.8pt; }
.tl--cols { column-count: 2; column-gap: .2in; }
.tl--lg li, .tl--md li { padding-block: .05in; }
.tl-empty { font-size: 20pt; text-align: center; margin: .5in .3in; color: #5d5249; }
.pnote { margin: auto .3in .12in; padding: .12in .16in; background: #fffdf2; border: 1px solid #e3d6b8; border-radius: 4px; transform: rotate(-.6deg); white-space: pre-wrap; overflow: hidden; max-height: 2.6in; line-height: 1.12; }
.pnote--lg { font-size: 20pt; } .pnote--md { font-size: 15pt; } .pnote--sm { font-size: 11.5pt; }
.pnote__sign { display: block; text-align: right; color: var(--accent); margin-top: .04in; }
.jfoot { margin: 0 .3in .1in; font-size: 8pt; text-align: center; color: #6b5f54; }
.tl + .jfoot, .pnote + .jfoot { margin-top: 0; }
.tl-empty ~ .jfoot { margin-top: auto; }
.pcard--back .tl:last-of-type { margin-bottom: .1in; }
.pcard--back > .jfoot:last-child { margin-top: 0; }

@media screen and (max-width: 560px) { .pcard { zoom: .68; } .sheets { gap: 0; padding-inline: 0; } .pcard + .pcard { margin-top: 8px; } }
@page { size: letter; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  body { display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print, .skip-link { display: none !important; }
  .sheets { display: block; padding: 0; }
  .pcard { zoom: 1 !important; margin: 0 auto; position: relative; top: 2in; box-shadow: none; }
  .pcard + .pcard { break-before: page; page-break-before: always; }
}

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .site-nav__link { display: inline; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .site-footer__row { grid-template-columns: 1fr auto; align-items: center; }
  .card-toolbar__row { grid-template-columns: 1fr auto; align-items: end; }
  .manual__row { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .success__grid { grid-template-columns: 1fr 1fr; }
  .ticket { grid-template-columns: 1fr auto; padding: 36px 40px; }
  .ticket__art { display: block; }
  .works { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero__cta .btn { flex: 0 0 auto; }
  .card { padding: 22px 24px; }
  .savebar { margin: 0; padding-inline: 0; }
}
@media (min-width: 900px) {
  .hero { padding: 36px 0 80px; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .mini-card { width: 160px; right: 0; }
  .builder__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .builder__preview { order: 2; position: sticky; top: 18px; margin: 0; }
  .builder__form { order: 1; }
  .stage { min-height: calc(100svh - 170px); }
  .page-mixtape .opened { max-width: 600px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.opened:focus{outline:none}
.logo__text, .site-nav .btn { white-space: nowrap; }
@media (max-width: 420px) { .logo__text { font-size: 1.45rem; } .logo__mark { width: 30px; } .site-nav .btn--small { padding-inline: .85em; min-height: 40px; } }
[hidden] { display: none !important; }
.success .card__title { margin-bottom: .45em; }

/* ---------- v3: import a playlist (builder) ---------- */
.card__num--icon { display: grid; place-items: center; }
.card__num--icon svg { width: 20px; height: 20px; }
.import { margin-bottom: 18px; border-style: solid; background: color-mix(in srgb, var(--stripe-b) 20%, var(--card)); }
.import.more { background: transparent; border-style: dashed; }
.import.more[open] { background: var(--card); }
.import__box { display: grid; gap: 10px; }
.import__box textarea { min-height: 78px; line-height: 1.35; resize: vertical; overflow-wrap: anywhere; }
.import__box .btn { width: 100%; }
.import__out { margin-top: 12px; }
.import__out:empty { display: none; }
.import__alt { margin: 14px 0 0; font-size: .98rem; }
.import__alt a { font-weight: 650; }
.import__ok { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-weight: 650; line-height: 1.35; }
.import__tick { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #3f9a5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.import__note { margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; font-size: .93rem; line-height: 1.4; background: #fffdf8; border: 1.5px solid var(--line); }
.import__note--warn { background: #fff4d6; border-color: #d6b24f; }
.import__note--bad { background: #ffe1d6; border-color: #a43a10; color: #6e1f00; font-weight: 600; }
.import__busy { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-soft); }
.import__choice { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.import__more { margin: 0 0 8px; font-size: .93rem; }
.import__more summary { cursor: pointer; color: var(--accent); font-weight: 650; padding: 6px 0; }
.import__nf { margin: 4px 0 0; padding: 8px 14px 8px 30px; font-size: .9rem; background: #fffdf8; border: 1.5px dashed var(--line); border-radius: 12px; }
.import__look { display: inline-block; margin-top: 4px; font-weight: 650; padding: 6px 0; cursor: pointer; }
.help { padding: 16px; background: #fff4d6; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 3px 4px 0 rgba(31, 26, 23, .14); }
.help__title { font: 700 1.55rem/1.1 var(--hand); margin: 0 0 10px; }
.help__steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; counter-reset: h; }
.help__steps li { counter-increment: h; position: relative; padding-left: 34px; line-height: 1.4; }
.help__steps li::before { content: counter(h); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .85rem/24px var(--sans); text-align: center; }
.help__then { margin: 12px 0 0; font-weight: 650; }
.keys { display: flex; gap: 14px; align-items: center; padding: 12px; background: #fffdf8; border: 1.5px solid var(--line); border-radius: 14px; }
.keys[hidden] { display: none; }
.keys__list { flex: none; width: 92px; height: auto; color: var(--ink); }
.keys__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; font-weight: 600; }
.keys__steps li { display: grid; gap: 4px; }
.keys__combo { display: inline-flex; align-items: center; gap: 6px; }
.keys__combo i { font-style: normal; font-weight: 700; color: var(--ink-soft); }
kbd { display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 10px; font: 700 .95rem var(--sans); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 8px; }
@media (min-width: 640px) { .import__box { grid-template-columns: 1fr auto; align-items: start; } .import__box .btn { width: auto; min-width: 140px; } }

/* ---------- v3: NFC tag box ---------- */
.success__grid .nfcbox { grid-column: 1 / -1; }
.card-nfc { padding-top: 14px; }
.nfcbox__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px; }
.nfcbox__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.nfcbox__icon svg { width: 28px; height: 28px; }
.nfcbox .card__title { margin-bottom: .1em; }
.nfcbox__head .hint { margin: .2em 0 0; }
.nfclink { margin-top: 12px; padding: 12px; background: #fffdf8; border: 1.5px solid var(--line); border-radius: 14px; }
.nfclink__top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.nfclink__badge { padding: 1px 10px; border-radius: 999px; background: var(--tint); border: 1.5px solid var(--ink); font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.nfclink .hint { margin: .3em 0 .7em; }
.nfclink__write { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; }
.nfclink__write[hidden] { display: none; }
.nfclink__state { margin: 8px 0 0; font-size: .93rem; line-height: 1.4; }
.nfclink__state:empty { display: none; }
.nfclink__state[data-kind="wait"] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff4d6; border: 1.5px solid #d6b24f; font-weight: 600; }
.nfclink__state[data-kind="wait"]::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ink) 20%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.nfclink__state[data-kind="ok"] { padding: 9px 12px; border-radius: 12px; background: #e3f4e6; border: 1.5px solid #3f9a5a; color: #1d4d2b; font-weight: 650; }
.nfclink__state[data-kind="bad"] { padding: 9px 12px; border-radius: 12px; background: #ffe1d6; border: 1.5px solid #a43a10; color: #6e1f00; font-weight: 600; }
.nfchow { margin-top: 14px; }
.nfchow summary { cursor: pointer; font-weight: 650; color: var(--accent); padding: 8px 0; }
.nfchow__steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: n; }
.nfchow__steps li { counter-increment: n; display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }
.nfchow__steps li::before { content: counter(n); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--stripe-b); border: 2px solid var(--ink); font: 700 1.25rem/24px var(--hand); text-align: center; }
.nfcbox__tip { margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed var(--line); }

/* ---------- v3: remember my app, play page ---------- */
.remember { margin: 20px 0 0; }
.check { display: flex; gap: 12px; align-items: center; min-height: 48px; margin: 0; padding: 4px 2px; font-weight: 650; font-size: .96rem; line-height: 1.3; cursor: pointer; text-align: left; }
.check input { flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; margin: 0; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 9px; background: var(--svc-bg, #fffdf8); }
.check input:checked { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat; border-color: var(--ink); }
.remember__now { margin: 2px 2px 0; font-size: .9rem; color: var(--ink-soft); text-align: left; }
.svc__alt { align-self: center; margin-top: 10px; padding: 6px 4px; font-weight: 650; font-size: .95rem; }
.svc[data-status="building"] .svc__alt { display: none; }

.playpage { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 520px; margin: 0 auto; padding: 8px 16px 6px; text-align: center; }
.play__tape { --tilt: -2deg; width: min(70%, 250px); transform: rotate(-2deg); margin-top: 4px; animation: drop 1s cubic-bezier(.2, .8, .3, 1) both; }
.play__title { font-size: clamp(2.3rem, 10vw, 3rem); line-height: 1; margin: 20px 0 0; }
.play__from { margin: 6px 0 20px; color: var(--ink-soft); }
.play__lead { font: 700 1.75rem/1.1 var(--hand); margin: 0 0 12px; }
.play__sub { color: var(--ink-soft); max-width: 22em; }
.play__choose, .play__apple { width: 100%; }
.svcs--play .svc__text .svc__help { font-size: .84rem; }
.play__see { margin: 22px 0 0; font-size: .95rem; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.play__see .linklike { font-size: inherit; }
.player { display: grid; gap: 14px; }
.bigplay { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 116px; padding: 14px 18px 14px 14px; text-align: left; font: inherit; color: var(--accent-ink); background: var(--accent); border: 3px solid var(--svc-edge); border-radius: 34px; box-shadow: 0 7px 0 var(--svc-shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .12s ease; }
.bigplay:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 9px 0 var(--svc-shadow); }
.bigplay:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 3px 0 var(--svc-shadow); }
.bigplay[disabled] { cursor: progress; opacity: .92; }
.bigplay[hidden] { display: none; }
.bigplay:not([disabled]) { animation: nudge 2.6s ease-in-out 1.2s infinite; }
.bigplay__icon { flex: none; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: var(--svc-bg); color: var(--accent); border: 3px solid var(--svc-edge); }
.bigplay__icon svg { width: 40px; height: 40px; margin-left: 5px; }
.bigplay__icon::after { content: ""; display: none; width: 36px; height: 36px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--ink) 18%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.player[data-state="prep"] .bigplay__icon::after, .player[data-state="signing"] .bigplay__icon::after, .player[data-state="queueing"] .bigplay__icon::after { display: block; }
.player[data-state="prep"] .bigplay__icon svg, .player[data-state="signing"] .bigplay__icon svg, .player[data-state="queueing"] .bigplay__icon svg { display: none; }
.bigplay__text { display: grid; gap: 3px; line-height: 1.1; }
.bigplay__text small { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.bigplay__text b { font-size: 1.6rem; }
.np-card { padding: 16px; text-align: left; background: var(--card); border: 2.5px solid var(--svc-edge); border-radius: 26px; box-shadow: 0 6px 0 var(--svc-shadow); }
.np-card[hidden] { display: none; }
.np-card__top { display: flex; gap: 14px; align-items: center; }
.np-card__art { flex: none; width: 88px; }
.np-card__art img[hidden] { display: none; }
.np-card__meta { min-width: 0; display: grid; gap: 2px; }
.np-card__meta p { margin: 0; }
.np-card__n { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.np-card__t { font-weight: 700; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-card__a { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-card__bar { height: 6px; margin: 16px 0 14px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.np-card__bar i { display: block; width: 0; height: 100%; background: var(--accent); border-radius: 3px; }
.np-card__ctl { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pctl { flex: none; width: 58px; height: 58px; padding: 0; display: grid; place-items: center; color: var(--ink); background: var(--svc-bg); border: 2.5px solid var(--svc-edge); border-radius: 50%; box-shadow: 0 4px 0 var(--svc-shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pctl:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--svc-shadow); }
.pctl svg { width: 26px; height: 26px; grid-area: 1 / 1; }
.pctl--main { width: 78px; height: 78px; color: var(--accent-ink); background: var(--accent); }
.pctl--main svg { width: 34px; height: 34px; }
.pctl--main .i-pause { display: none; }
.is-playing .pctl--main .i-pause { display: block; }
.is-playing .pctl--main .i-play { display: none; }
.player__msg { margin: 0; padding: 11px 14px; text-align: left; font-size: .95rem; line-height: 1.4; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); }
.player__msg:empty { display: none; }
.player[data-state="needtap"] .player__msg, .player[data-state="idle"] .player__msg { background: color-mix(in srgb, #3f9a5a 16%, var(--svc-bg)); border-color: #3f9a5a; font-weight: 650; }
.player[data-state="cancelled"] .player__msg, .player[data-state="nosub"] .player__msg, .player[data-state="error"] .player__msg, .player[data-state="unavailable"] .player__msg { background: #fff0d8; border-color: #c2410c; color: #5a2300; }
.player[data-state="prep"] .player__msg, .player[data-state="signing"] .player__msg, .player[data-state="queueing"] .player__msg { font-weight: 650; }
.player__alt { margin: 0; text-align: left; }
.player__alt[hidden] { display: none; }
.play__save { margin-top: 26px; padding-top: 22px; border-top: 2px dashed var(--line); }
.play__save .svc__btn { min-height: 68px; }
.play__save .svc__glyph { width: 46px; height: 46px; }
.play__save .svc__glyph svg { width: 24px; height: 24px; }
.play__save .svc__text b { font-size: 1.2rem; }
.play__open { margin: 12px 0 0; font-size: .92rem; }
.play__save:has(.svc[data-ui="saved"]) .play__open { display: none; }
.page-play .site-footer { margin-top: 24px; }
.page-play main { padding-bottom: 6px; }

/* ---------- v3: landing (import + tap) ---------- */
.duo { display: grid; gap: 22px; margin-top: 8px; }
.duo__card { padding: 24px 22px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 4px 5px 0 rgba(31, 26, 23, .16); }
.duo__card:nth-child(odd) { transform: rotate(-.5deg); }
.duo__card:nth-child(even) { transform: rotate(.5deg); }
.duo__icon svg { width: 46px; height: 46px; color: var(--accent); display: block; margin-bottom: 10px; }
.duo__card h3 { font: 700 1.9rem/1 var(--hand); margin-bottom: .35em; }
.duo__card p { margin: 0 0 .7em; color: var(--ink-soft); }
.duo__card p:last-child { margin-bottom: 0; }
@media (min-width: 640px) { .duo { grid-template-columns: 1fr 1fr; gap: 26px; } }

@media (prefers-color-scheme: dark) {
  .page-play .check input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
  .page-play .check input:checked { background-color: var(--accent); }
  .page-play .np-card { background: rgba(255, 255, 255, .07); }
  .page-play .bigplay__icon { color: var(--accent-hi); }
  .page-play .player[data-state="cancelled"] .player__msg, .page-play .player[data-state="nosub"] .player__msg, .page-play .player[data-state="error"] .player__msg, .page-play .player[data-state="unavailable"] .player__msg { background: #3a2410; color: #ffd9b3; border-color: #ff9d70; }
  .page-play .player[data-state="needtap"] .player__msg, .page-play .player[data-state="idle"] .player__msg { background: rgba(63, 154, 90, .22); }
  .page-play .player__msg { background: rgba(255, 255, 255, .08); }
}
.card-nfc .nfcbox { max-width: 760px; margin-inline: auto; }