/* One typeface for the whole product: Archivo Narrow (OFL) — brat-style narrow grotesque with full Vietnamese. */
@font-face { font-family:'Archivo Narrow'; src:url('../fonts/ArchivoNarrow-Variable.ttf') format('truetype'); font-weight:400 700; font-display:swap; }
:root { --ink:#5b4b43; --paper:#f2efe8; --card:rgba(252,251,247,.88); --pink:#f48ac6; --cyan:#89e8e2; --gold:#e9c46a; /* pastel buttons + brown text (8-10:1 contrast) */ --brown:#4a3326; --btn-pink:#FFC8DD; --btn-yellow:#FFE9A8; --btn-green:#CFEFD2; --btn-edge:rgba(74,51,38,.22); --muted:#85766b; --line:rgba(74,58,48,.14); --font:'Archivo Narrow','Arial Narrow',sans-serif; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--paper); color:var(--ink); font-family:var(--font); overscroll-behavior:none; }
/* Paper + film layers: the same crumpled, dotted cream paper the stories are printed on, and a fine grain over everything. */
body::before { content:''; position:fixed; inset:0; z-index:-1; background:var(--paper) url('./paper-bg.jpg') center / cover no-repeat; }
body::after { content:''; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
button,input,select { font:inherit; color:inherit; }
[hidden] { display:none !important; }

.app { max-width:480px; margin:0 auto; min-height:100dvh; }
.screen { min-height:100dvh; display:flex; flex-direction:column; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(14px + var(--safe-top)) 16px 12px; }
.wordmark { display:flex; align-items:center; gap:8px; }
.wordmark-eyes { height:22px; width:auto; image-rendering:pixelated; }
.wordmark .dot-wordmark { height:22px; }
.icon-button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--card); font-size:18px; }
.account { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:8px 14px; font:12px var(--font); text-transform:lowercase; }
.account.signed-in { background:var(--btn-green); color:var(--brown); border-color:var(--btn-edge); }

.landing-body { flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 22px; }
/* Logo lockup: free-floating lily eyes + polka-dot wordmark, no square behind them. */
.lockup { display:flex; align-items:center; gap:12px; margin:0 0 30px; }
.lockup-eyes { position:relative; width:96px; flex:none; }
.lockup-eyes img { display:block; width:100%; height:auto; image-rendering:pixelated; }
.lockup-eyes .twinkles { inset:-6px; }
.dot-wordmark { display:inline-block; line-height:0; cursor:default; }
.dot-wordmark svg { display:block; height:100%; width:auto; overflow:visible; }
.dot-wordmark circle { transform-box:fill-box; transform-origin:center; }
.lockup .dot-wordmark { height:62px; cursor:pointer; }
.tagline { position:relative; margin:0; }
.dot-tagline { display:block; line-height:0; }
.dot-tagline svg { display:block; width:100%; height:auto; max-width:360px; }
.tagline .h1-spark { position:absolute; top:auto; bottom:18%; right:6%; width:18px; height:18px; margin:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.h1-spark { display:inline-block; position:relative; top:-.62em; width:.3em; height:.3em; margin-left:.06em; vertical-align:baseline; line-height:0; background:var(--pink); clip-path:var(--sparkle); animation:twinkle 2.6s ease-in-out infinite; }
h1 { font-size:clamp(40px,12vw,56px); line-height:.92; letter-spacing:-.07em; margin:0; } h1 em { font-style:normal; color:#978a80; }
.landing-actions { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 16px calc(30px + var(--safe-bottom)); }
.landing-actions .twinkles { inset:0 22%; }
/* The one entry point: a ringed camera button, like a shutter. */
.camera-button { position:relative; width:92px; height:92px; border-radius:50%; border:0; background:var(--btn-pink); color:var(--brown); cursor:pointer;
  box-shadow:0 0 0 7px var(--paper), 0 0 0 8.5px var(--brown), 0 18px 30px -14px rgba(74,51,38,.45); transition:transform .15s ease; }
.camera-button svg { width:38px; height:38px; }
.camera-button:active { transform:scale(.94); }
.camera-hint { margin:10px 0 0; font:12px var(--font); color:var(--muted); letter-spacing:.04em; }

.button { display:flex; align-items:center; justify-content:center; min-height:54px; border-radius:16px; border:0; font-weight:600; font-size:17px; cursor:pointer; text-align:center; padding:0 18px; }
.button.primary { position:relative; overflow:hidden; background:var(--btn-pink); color:var(--brown); box-shadow:inset 0 0 0 1px var(--btn-edge); }
/* A slow shimmer across primary buttons, like light catching foil. */
.button.primary::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); transform:translateX(-120%); animation:shimmer 5.5s ease-in-out infinite; }
.button.ghost { background:transparent; border:1px solid var(--line); color:var(--ink); }
.button.pink { background:var(--pink); color:var(--ink); }
.button:active { transform:scale(.98); }

.story-scroll { flex:1; overflow-y:auto; padding:0 16px 40px; }
/* The story as a flat card you can spin: drag to rotate, tap to flip to its back. */
.preview { position:relative; aspect-ratio:4/5; margin-top:12px; perspective:1200px; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
.preview.dragging { cursor:grabbing; }
.card-sway { position:absolute; inset:0; transform-style:preserve-3d; animation:sway 6s ease-in-out infinite; }
.preview.dragging .card-sway, .preview.lifted .card-sway { animation-play-state:paused; }
.card3d { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.9,.3,1.15); }
.preview.dragging .card3d { transition:none; }
.face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.face canvas { display:block; width:100%; height:100%; border-radius:6px; background:var(--ink); box-shadow:0 18px 34px -18px rgba(60,40,30,.45), 0 0 0 1px rgba(74,58,48,.06); }
.face.back { transform:rotateY(180deg); }
.face.back canvas { background:#faf7f0; }
@keyframes sway { 0%, 100% { transform:rotateY(-16deg) rotateX(6deg) rotateZ(-1.5deg) translateY(0); } 50% { transform:rotateY(14deg) rotateX(-4deg) rotateZ(1.5deg) translateY(-8px); } }
.preview.lifted .face canvas { box-shadow:0 34px 50px -22px rgba(60,40,30,.5), 0 0 0 1px rgba(74,58,48,.06); }
.face canvas { transition:box-shadow .6s ease; }
.card-hint { margin:26px 0 0; text-align:center; font:11px var(--font); color:var(--muted); }
.card-actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:10px 0 16px; }
.icon-action { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; padding:12px 0 10px; border:1px solid var(--line); border-radius:18px; background:var(--card); font:11px var(--font); color:var(--ink); cursor:pointer; position:relative; }
.icon-action svg { width:24px; height:24px; }
.icon-action .png-mark { font:700 13px var(--font); border:1.6px solid currentColor; border-radius:999px; padding:3px 7px; }
.icon-action.primary { background:var(--btn-pink); color:var(--brown); border-color:var(--btn-edge); }
.detected { font:12px var(--font); color:var(--muted); margin:10px 2px 14px; }
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:12px;
  /* Stitched edge, like the cross-stitch motifs. */
  outline:1.5px dashed rgba(74,58,48,.13); outline-offset:-7px; box-shadow:0 10px 24px -20px rgba(60,40,30,.4); }
.card-head { display:flex; align-items:center; justify-content:space-between; }
.card-label { font:11px var(--font); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:12px 0 8px; }
.card-head .card-label { margin-top:0; }
.field { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:11px 0; font-size:16px; font-family:var(--font); outline:0; }
.field.hero { font-size:22px; }
.field::placeholder { color:#a89c92; }
.field-row { margin-top:4px; } .field-row.two { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 13px; font-family:var(--font); font-size:16px; }
.chip.active { background:var(--btn-yellow); color:var(--brown); border-color:var(--brown); }

.style-card.locked .select-row { opacity:.45; }
.style-card.locked .select-row .swatch { pointer-events:none; }

.picker-row { display:flex; align-items:center; gap:12px; width:100%; border:0; border-top:1px solid var(--line); background:transparent; padding:10px 0; text-align:left; cursor:pointer; }
.picker-thumb { width:80px; height:50px; border-radius:10px; object-fit:cover; background:#ece8df; flex:none; box-shadow:inset 0 0 0 1px var(--line); }
.picker-text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.picker-label { font:11px var(--font); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.picker-name { font-size:16px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-go { font-size:22px; color:var(--muted); }

.sheet.gallery { max-height:88dvh; padding-bottom:0; gap:8px; }
.sheet.gallery > * { flex:none; }
.sheet.gallery > .gallery-body { flex:1 1 auto; min-height:0; }
.gallery-head { display:flex; align-items:center; justify-content:space-between; }
.gallery-hint { margin:0; font:11px var(--font); color:var(--muted); }
.gallery-color { display:flex; align-items:center; justify-content:space-between; padding:4px 0 8px; border-bottom:1px solid var(--line); }
.gallery-body { overflow-y:auto; margin:0 -18px; padding:4px 18px calc(18px + var(--safe-bottom)); }
.theme-chips { display:flex; gap:8px; overflow-x:auto; margin:0 -18px; padding:2px 18px 8px; scrollbar-width:none; }
.theme-chips::-webkit-scrollbar { display:none; }
.theme-chip { flex:none; border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; font-size:14px; white-space:nowrap; }
.theme-chip.active { background:var(--btn-yellow); color:var(--brown); border-color:var(--brown); }
.gallery-section { font:11px var(--font); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:14px 0 8px; }
.gallery-section:first-child { margin-top:4px; }
.tile-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.tile { position:relative; display:flex; flex-direction:column; border:0; padding:0; background:transparent; text-align:left; cursor:pointer; }
.tile-art { display:block; position:relative; aspect-ratio:8/5; border-radius:14px; overflow:hidden; background:#ece8df; box-shadow:inset 0 0 0 1px var(--line); }
.tile-art canvas, .tile-art img { display:block; width:100%; height:100%; object-fit:cover; }
.tile-art .tile-blink { position:absolute; inset:0; margin:auto; width:44px; height:44px; background:var(--ink); border-radius:10px; image-rendering:pixelated; }
.tile.selected .tile-art { box-shadow:0 0 0 3px var(--brown); }
.tile-name { display:block; font-size:13px; margin:6px 2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quote-field { resize:none; font-size:17px; line-height:1.3; }
.link-button { border:0; background:transparent; font:12px var(--font); color:var(--ink); text-decoration:underline; padding:4px 0; cursor:pointer; }
.tile-quote { position:absolute; left:6px; top:6px; font:700 11px var(--font); background:rgba(255,255,255,.9); border-radius:999px; padding:3px 7px; }
.select-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; border-top:1px solid var(--line); font:12px var(--font); text-transform:uppercase; color:var(--muted); }
.select-row select { border:0; background:transparent; font:16px var(--font); text-transform:none; color:var(--ink); text-align:right; max-width:62%; }
.swatches { display:flex; gap:10px; }
.swatches { gap:8px; }
.swatch { width:28px; height:28px; border-radius:50%; border:2px solid transparent; padding:0; box-shadow:inset 0 0 0 1px var(--line); }
.swatch.active { border-color:var(--brown); }


.loading { position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgba(58,40,30,.92); color:#fff; font:13px var(--font); }
.loading img { width:176px; height:176px; image-rendering:pixelated; }

.sheet-backdrop { position:fixed; inset:0; z-index:30; background:rgba(74,58,48,.4); }
.sheet { position:fixed; z-index:35; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:480px; background-color:#fbfaf6; border-radius:22px 22px 0 0; padding:22px 18px calc(18px + var(--safe-bottom)); display:flex; flex-direction:column; gap:10px; animation:rise .22s ease-out; }
.sheet h2 { font-size:26px; letter-spacing:-.05em; line-height:1; margin:0 0 4px; }
.benefits { margin:0; padding-left:18px; line-height:1.7; }
.sheet-note { margin:0; color:var(--muted); font-size:14px; } .sheet-note.small { font:11px var(--font); }
@keyframes rise { from { transform:translate(-50%,40px); opacity:0; } to { transform:translate(-50%,0); opacity:1; } }

/* ---- Twinkles ---------------------------------------------------------- */
:root { --sparkle:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.twinkles { position:absolute; inset:0; pointer-events:none; }
.twinkles i { position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); background:var(--c); clip-path:var(--sparkle);
  animation:twinkle 2.8s ease-in-out var(--d) infinite; transform:scale(.2); opacity:0; }
@keyframes twinkle { 0%, 100% { transform:scale(.2) rotate(0deg); opacity:0; } 45% { transform:scale(1) rotate(20deg); opacity:1; } 60% { transform:scale(.85) rotate(28deg); opacity:.9; } }
@keyframes shimmer { 0%, 62% { transform:translateX(-120%); } 82%, 100% { transform:translateX(120%); } }
.loading-eyes { position:relative; }
.loading-eyes .twinkles { inset:-18px; }
.sheet { background-image:radial-gradient(rgba(91,83,74,.12) 1px, transparent 1.3px); background-size:18px 18px; }
/* Reduce motion: sparkles still glimmer, but only by fading, with no scaling or spinning. */
@keyframes glimmer { 0%, 100% { opacity:.15; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  /* Still tilted at rest, just not moving. */
  .card-sway { animation:none; transform:rotateY(-14deg) rotateX(6deg) rotateZ(-1.5deg); }
  .twinkles i, .h1-spark { animation:glimmer 3.2s ease-in-out var(--d, 0s) infinite; transform:none; }
  .button.primary::after { animation:none; }
}

/* Google renders its own sign-in button inside this box. */
.google-button { display:flex; justify-content:center; min-height:44px; }

/* Feedback: a small pill on every screen, under the sheets. */
.feedback-fab { position:fixed; z-index:25; right:14px; bottom:calc(14px + var(--safe-bottom)); border:1px solid var(--btn-edge); background:var(--btn-pink); color:var(--brown); border-radius:999px; padding:8px 14px; font:12px var(--font); text-transform:lowercase; box-shadow:0 4px 14px rgba(74,51,38,.14); }
#feedback-form { display:flex; flex-direction:column; gap:10px; }
.feedback-text { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px; font:16px var(--font); color:var(--ink); resize:vertical; }

/* Landing footer credit: small and quiet. */
.built-by { margin:6px 0 0; font:11px var(--font); color:var(--muted); letter-spacing:.02em; }
.built-by a { color:var(--brown); text-decoration:underline; text-underline-offset:2px; }