/* The Front Door design: the same pink, Fraunces and Figtree, pill buttons and cards, copied from
   docs/design/screens/*.dc.html. Values are the screens' own; only the fixed 390×844 frame became a
   page that fills the phone. */
:root {
  --bg: #FFF8FA; --door: #FCE4EC; --ink: #2A1B2E; --accent: #C2185B; --deep: #AD1457; --hover: #880E4F;
  --muted: #6B4E62; --pale: #F8BBD0; --mid: #E57BA3; --white: #FFFFFF;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Figtree', system-ui, sans-serif;
}
html, body { margin: 0; background: var(--bg); }
body.door { background: var(--door); }
a { color: var(--deep); }
a:hover { color: var(--hover); }
textarea::placeholder { color: var(--muted); }
button { font-family: var(--sans); cursor: pointer; }
[hidden] { display: none !important; }

.screen {
  box-sizing: border-box; position: relative; overflow: hidden; min-height: 100dvh; max-width: 480px; margin: 0 auto;
  font-family: var(--sans); color: var(--ink); padding: 48px 24px 32px; display: flex; flex-direction: column; gap: 16px;
}
.screen.tight { gap: 12px; }
.screen > * { position: relative; }

/* the soft circles */
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob.inner { top: -90px; right: -60px; width: 220px; height: 220px; background: var(--door); }
.blob.door { top: -120px; right: -120px; width: 320px; height: 320px; background: var(--pale); }
.blob.dot { top: 70px; right: 56px; width: 44px; height: 44px; background: var(--accent); }
.blob.low { bottom: -16px; left: -110px; width: 300px; height: 300px; background: var(--pale); }
.blob.ring { top: -60px; right: -60px; width: 180px; height: 180px; background: var(--door); border: 2px solid var(--accent); }

.brand { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--deep); }
.kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--deep); }
.tag { align-self: flex-start; background: var(--accent); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.title { margin: 0; font-family: var(--serif); font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }
.title.m { font-size: 38px; }
.title.s { font-size: 36px; line-height: 1.08; }
.title.xs { font-size: 30px; line-height: 1.08; }
.title em { font-style: italic; font-weight: 600; color: var(--accent); }
.lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack.center { align-items: center; text-align: center; }
.label { font-size: 13px; font-weight: 700; color: var(--muted); }
.hint { margin: 0; font-size: 13px; text-align: center; color: var(--muted); }
.fine { margin: 0; font-size: 13px; font-weight: 600; text-align: center; color: var(--deep); }
.msg { margin: 0; font-size: 14px; line-height: 1.4; text-align: center; color: var(--deep); min-height: 0; }
.msg:empty { display: none; }
.link { align-self: center; font-size: 14px; font-weight: 600; color: var(--deep); background: none; border: 0; padding: 0; }
.spacer { margin-top: auto !important; }

.code {
  box-sizing: border-box; width: 100%; height: 60px; border-radius: 16px; border: 1.5px solid var(--accent); background: var(--white);
  font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: 8px; text-align: center; color: var(--ink);
}
.code:focus { outline: 2px solid var(--deep); outline-offset: 2px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--white); font-family: var(--sans); font-size: 17px; font-weight: 700; text-decoration: none; width: 100%;
}
.btn:hover { color: var(--white); }
.btn.secondary { height: 50px; background: var(--white); border: 1.5px solid var(--pale); color: var(--deep); font-size: 16px; }
.btn.secondary:hover { color: var(--hover); }
.btn:disabled { opacity: 0.6; cursor: default; }

.note-card { display: flex; gap: 10px; align-items: flex-start; background: var(--white); border: 1.5px solid var(--pale); border-radius: 16px; padding: 12px 14px; }
.note-card svg { flex-shrink: 0; margin-top: 1px; }
.note-card p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

.key-icon { align-self: center; margin-top: 24px; width: 168px; height: 168px; border-radius: 44px; background: var(--door); display: flex; align-items: center; justify-content: center; }
.icon-box { align-self: center; width: 120px; height: 120px; border-radius: 34px; display: flex; align-items: center; justify-content: center; }
.icon-box.pale { background: var(--door); }
.icon-box.white { background: var(--white); }

/* the helper's header and orb (screen 3) */
.helper-head { display: flex; align-items: center; justify-content: space-between; }
.helper-head .who { display: flex; align-items: center; gap: 10px; }
.helper-head .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); }
.helper-head .name { display: flex; flex-direction: column; }
.helper-head .name b { font-size: 15px; font-weight: 700; }
.helper-head .name span { font-size: 12px; color: var(--muted); }
.sound { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--pale); background: var(--white); display: flex; align-items: center; justify-content: center; padding: 0; }
.orb { align-self: center; margin-top: 56px; width: 220px; height: 220px; border-radius: 50%; background: var(--door); display: flex; align-items: center; justify-content: center; }
.orb .mid { width: 168px; height: 168px; border-radius: 50%; background: var(--pale); display: flex; align-items: center; justify-content: center; }
.orb .core { width: 116px; height: 116px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.quote { margin: 28px 0 0; font-family: var(--serif); font-size: 23px; line-height: 1.35; font-weight: 500; text-align: center; color: var(--ink); }

/* the share checklist (screen 4) */
.checklist { background: var(--white); border: 1.5px solid var(--pale); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.checklist div { display: flex; align-items: center; gap: 10px; }
.checklist span { font-size: 15px; font-weight: 600; }
.checklist .never span { color: var(--muted); }

/* the desk's line on the shelf (screens 5, 5b) */
.desk-line { display: flex; gap: 10px; align-items: flex-start; background: var(--door); border-radius: 16px; padding: 12px 14px; }
.desk-line .dot { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); }
.desk-line p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink); }

/* a track card */
.track { background: var(--white); border: 1.5px solid var(--pale); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.track .row { display: flex; align-items: center; gap: 12px; }
.play { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent); display: flex; align-items: center; justify-content: center; padding: 0; }
.play:disabled { background: var(--pale); cursor: default; }
.track .meta { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.track .titles { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.track .name { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.track .length { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bar { height: 6px; border-radius: 999px; background: var(--pale); position: relative; cursor: pointer; }
.bar .fill { width: 0%; height: 6px; border-radius: 999px; background: var(--accent); }
.bar::after { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.track .notes { display: flex; gap: 8px; align-items: stretch; }
.track textarea {
  box-sizing: border-box; flex: 1 1 auto; min-width: 0; resize: none; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--pale);
  background: var(--white); font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--ink);
}
.chip { flex-shrink: 0; height: 40px; align-self: center; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--pale); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--white); }
.track .missing { margin: 0; font-size: 13px; color: var(--muted); }

/* the "welcome back" card (screen 12) */
.thing { margin-top: 16px; background: var(--white); border: 1.5px solid var(--pale); border-radius: 20px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.thing:hover { color: var(--ink); }
.thing .icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.thing .text { display: flex; flex-direction: column; gap: 2px; }
.thing .text b { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.thing .text span { font-size: 13px; color: var(--muted); }

.sharing { display: flex; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sharing a { font-weight: 600; }