:root {
  --bg: #faf6ef;
  --surface: #ffffff;
  --ink: #221c17;
  --muted: #6f655c;
  --line: #e7dfd2;
  --brand: #c2553a;
  --brand-ink: #9e3f28;
  --gold: #b8893b;
  --ok: #2f7d57;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(34, 28, 23, .06), 0 12px 32px -12px rgba(34, 28, 23, .18);
  --shadow-lg: 0 2px 4px rgba(34, 28, 23, .06), 0 40px 80px -30px rgba(34, 28, 23, .35);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 22px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: rgba(250, 246, 239, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 18px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.logo svg { width: 34px; height: 34px; }
.bar nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.bar nav a { text-decoration: none; color: var(--muted); font-size: 15px; }
.bar nav a:hover { color: var(--ink); }
.bar nav a.btn-primary, .bar nav a.btn-primary:hover { color: #fff; }
.logo { white-space: nowrap; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 0 rgba(47, 191, 113, .6); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(47, 191, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0); } }
.burger { display: none; }

/* ---------- buttons + form ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px -8px rgba(194, 85, 58, .7); }
.btn-primary:hover { background: var(--brand-ink); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: #cfc3b1; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-sm { padding: 9px 15px; font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
label.f { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
label.f small { font-weight: 400; color: var(--muted); }
.input, textarea.input, select.input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; outline: none; transition: border .15s, box-shadow .15s; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(194, 85, 58, .12); }
textarea.input { resize: vertical; min-height: 96px; }
.field { margin-bottom: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.stickers { display: flex; gap: 6px; flex-wrap: wrap; }
.stickers button { width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; padding: 7px; }
.stickers button svg { width: 100%; height: 100%; }
.stickers button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.stickers .none { font-size: 12px; color: var(--muted); }
.err { color: #b42318; font-size: 14px; min-height: 20px; margin: 8px 0 0; }
.counter { float: right; font-weight: 400; color: var(--muted); }
.drop { display: flex; align-items: center; gap: 14px; border: 1.5px dashed #d6cab8; border-radius: 14px; padding: 14px; background: #fffdf9; cursor: pointer; }
.drop:hover { border-color: var(--brand); }
.drop .thumb { width: 64px; height: 64px; border-radius: 10px; background: #f2ebdf center/cover; flex: none; display: grid; place-items: center; color: var(--muted); }
.drop b { display: block; font-size: 14px; }
.drop span { font-size: 13px; color: var(--muted); }
.drop input { display: none; }

/* ---------- signature pad ---------- */
.pad-tabs { display: flex; gap: 4px; background: #f1ebe1; padding: 4px; border-radius: 12px; width: max-content; margin-bottom: 10px; }
.pad-tabs button { border: 0; background: transparent; padding: 7px 16px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); }
.pad-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.pad { position: relative; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.pad canvas { display: block; width: 100%; height: 150px; touch-action: none; cursor: crosshair; }
.pad::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 36px; border-bottom: 1.5px solid #e9e1d4; pointer-events: none; }
.pad .hint { position: absolute; left: 22px; bottom: 10px; font-size: 12px; color: #a99d8e; pointer-events: none; }
.pad .tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; }
.pad .tools button { border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 12.5px; padding: 5px 10px; cursor: pointer; }
.typed-preview { margin-top: 10px; min-height: 76px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: flex; align-items: center; padding: 6px 18px; overflow: hidden; }

/* ---------- the card: shared ---------- */
.inside { --paper: #f7f1e6; --c-ink: #2b2320; --c-accent: #a67c34; --c-sub: #6d6259; position: relative; background: var(--paper); color: var(--c-ink); border-radius: 10px; padding: clamp(22px, 4vw, 56px); box-shadow: var(--shadow-lg); overflow: hidden; }
.inside::before, .front::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .36 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.inside[data-theme="sage"] { --paper: #edf1e8; --c-ink: #22301f; --c-accent: #5b7a53; --c-sub: #5f6b5a; }
.inside[data-theme="midnight"] { --paper: #1c2333; --c-ink: #f4ecdc; --c-accent: #d4b06a; --c-sub: #b9b3a6; }
.inside[data-theme="midnight"]::before { mix-blend-mode: screen; opacity: .25; }
.inside[data-theme="confetti"] { --paper: #fffaf6; --c-ink: #2a2230; --c-accent: #e4573d; --c-sub: #6e6570; }
.inside[data-theme="confetti"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image: radial-gradient(circle at 12% 8%, #f5b83d 0 5px, transparent 6px), radial-gradient(circle at 88% 5%, #4f8cf0 0 4px, transparent 5px), radial-gradient(circle at 94% 16%, #e5484d 0 6px, transparent 7px), radial-gradient(circle at 5% 22%, #3cb179 0 4px, transparent 5px), radial-gradient(circle at 76% 10%, #8b5cf6 0 3px, transparent 4px), radial-gradient(circle at 22% 3%, #e5484d 0 3px, transparent 4px); }
.kicker { display: inline-block; font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent, var(--brand)); }
.inside-head { position: relative; text-align: center; max-width: 760px; margin: 0 auto clamp(22px, 4vw, 44px); }
.inside-title { font: italic 600 clamp(28px, 4.2vw, 50px)/1.08 var(--serif); letter-spacing: -.015em; margin: 14px 0 12px; }
.inside-intro { color: var(--c-sub); margin: 0 auto; max-width: 600px; font-size: clamp(14px, 1.5vw, 16.5px); }
.inside-head::after { content: ''; display: block; width: 64px; height: 2px; background: var(--c-accent); margin: 22px auto 0; opacity: .6; }
.notes { position: relative; column-count: 3; column-gap: clamp(18px, 3vw, 40px); }
.inside-foot { position: relative; display: flex; justify-content: center; gap: 22px; margin-top: 30px; font-size: 13px; color: var(--c-sub); }
.empty { column-span: all; text-align: center; color: var(--c-sub); padding: 40px 10px; }

.note { position: relative; break-inside: avoid; padding: 16px 6px 22px; margin-bottom: 8px; transform: rotate(var(--rot)); }
.inside[data-theme="midnight"] .note { background: #fbf6ec; color: #2b2320; padding: 16px 16px 18px; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); }
.note .msg { padding-right: 26px; margin: 0 0 8px; line-height: 1.22; overflow-wrap: anywhere; }
.note .sig, .sticky .sig { width: auto; max-width: 88%; }
.sig-svg { display: block; height: calc(var(--hand) * 2.4); width: auto; max-width: 100%; }
.sig-typed { white-space: nowrap; overflow: hidden; text-overflow: clip; line-height: 1.1; }
.sig-script { font: calc(var(--hand) * 2) / 1.2 'Mrs Saint Delafield', cursive; }
.sig-pen { font: var(--hand) / 1.8 'Homemade Apple', cursive; }
.sig-marker { font: calc(var(--hand) * 1.15) / 1.5 'Permanent Marker', cursive; }
.note .who { margin-top: 2px; font-size: 12.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.note .who span { color: var(--c-sub); }
.inside[data-theme="midnight"] .note .who span { color: #7c7166; }
.sticker { position: absolute; right: 2px; top: 2px; width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .12)); }
.sticker svg { width: 100%; height: 100%; }
.polaroid { margin: 0 0 12px; background: #fff; padding: 7px 7px 20px; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45); width: 78%; }
.polaroid img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.note-draft { outline: 2px dashed var(--brand); outline-offset: 6px; border-radius: 6px; }
.note-draft::before { content: 'Your note (preview)'; position: absolute; top: -14px; left: 0; background: var(--brand); color: #fff; font: 600 11px/1 var(--sans); padding: 5px 8px; border-radius: 99px; transform: rotate(calc(var(--rot) * -1)); }
.note-fresh { animation: pop .9s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.94) rotate(var(--rot)); } to { opacity: 1; transform: rotate(var(--rot)); } }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ink 1.6s ease forwards; animation-delay: calc(var(--i, 0) * .22s + .3s); }
@keyframes ink { to { stroke-dashoffset: 0; } }

/* wall view (sticky notes) */
.view-wall .notes { column-count: 4; column-gap: 22px; }
.sticky { position: relative; break-inside: avoid; background: var(--bg); padding: 26px 18px 18px; margin: 0 0 26px; transform: rotate(var(--rot)); box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 14px 22px -14px rgba(0, 0, 0, .35); border-radius: 2px 2px 14px 2px; color: #2b2320; }
.sticky .tape { position: absolute; top: -10px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(0, 0, 0, .04); transform: rotate(-3deg); }
.sticky .msg { padding-right: 20px; margin: 0 0 8px; line-height: 1.22; overflow-wrap: anywhere; }

.sticky .who { font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; }
.sticky .who span { color: #7c7166; }
.sticky .sticker { top: 6px; right: 6px; width: 28px; height: 28px; }
.sticky-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 10px; border-radius: 2px; }

/* card front */
.front { position: relative; background: #fbf7f0; border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; box-shadow: var(--shadow-lg); aspect-ratio: 5/7; color: #2b2320; }
.front-photo { position: relative; overflow: hidden; background: #e9dfcf; }
.front-photo img { width: 100%; height: 100%; object-fit: cover; }
.front-text { position: relative; padding: 7% 8% 9%; text-align: center; }
.front-title { font: italic 600 clamp(30px, 5vw, 58px)/1 var(--serif); margin: 12px 0 8px; letter-spacing: -.02em; }
.front-sub { margin: 0; color: #6d6259; font-size: clamp(12px, 1.4vw, 15px); }
.front .kicker { color: #a67c34; }
.front[data-theme="midnight"] { background: #1c2333; color: #f4ecdc; }
.front[data-theme="midnight"] .kicker { color: #d4b06a; }
.front[data-theme="midnight"] .front-sub { color: #b9b3a6; }
.front[data-theme="sage"] { background: #edf1e8; }
.front[data-theme="sage"] .kicker { color: #5b7a53; }
.front[data-theme="confetti"] .kicker { color: #e4573d; }

/* view toggle */
.seg { display: inline-flex; background: #efe8dc; border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; opacity: 0; transition: .25s; z-index: 99; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.panel h3 { font: 600 20px/1.2 var(--serif); margin: 0 0 4px; }
.panel .lead { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 90px; padding: 40px 0 50px; color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; align-items: center; }

@media (max-width: 980px) {
  .notes { column-count: 2; }
  .view-wall .notes { column-count: 3; }
}
@media (max-width: 640px) {
  :root { --hand: 20px; }
  .wrap { width: calc(100% - 32px); }
  .bar nav a.hide-m { display: none; }
  .notes { column-count: 1; }
  .view-wall .notes { column-count: 2; column-gap: 14px; }
  .view-wall { --hand: 16px; }
  .sticky { padding: 22px 12px 14px; }
  .row2 { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
}
@media print {
  .bar, .foot, .no-print { display: none !important; }
  body { background: #fff; }
  .inside { box-shadow: none; }
  .note, .sticky { break-inside: avoid; }
}