/* =========================================================
   LittleJoy — Frutiger Aero sky + art-journal scrapbook
   The sky, clouds, bubbles and the information panels are the Aero part:
   little Vista-style glass windows (see "Aero glass panels").
   The handmade part lives on top of them: tape, polaroids, stickers,
   handwritten notes and the sketchbook tutorial pages.
   ========================================================= */

:root {
  --ink: #16334d;          /* main text: deep Aero navy */
  --ink-soft: #56697a;     /* secondary text */
  --aqua: #1a9be0;
  --aqua-dark: #0b6fa8;
  --green: #3fae33;
  --green-dark: #23761e;
  --pink-pen: #e0567e;     /* handwritten notes */
  --card: #fffdf8;         /* card paper */
  --line: rgba(31, 53, 71, 0.16);
  --shadow: 0 1px 0 rgba(31, 53, 71, 0.06), 0 12px 22px -14px rgba(31, 53, 71, 0.45);
  --tape-pink: rgba(255, 190, 208, 0.85);
  --tape-blue: rgba(178, 225, 255, 0.85);
  --tape-yellow: rgba(255, 234, 150, 0.85);
  /* Type system — four families, each with one job:
       brand   Michroma  — wide, Eurostile-style lettering, only for "LittleJoy"
       display Exo 2     — headings, titles, buttons, navigation, options
       body    Nunito Sans (Segoe UI, the Vista system font, as fallback) — reading text
       hand    Caveat    — handwritten notes and labels */
  --font-brand: "Michroma", "Exo 2", "Segoe UI", sans-serif;
  --font-display: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;

  /* Tutorial sketchbook */
  --sketch-ink: #1a1a1a;   /* black line art: what to draw in this step */
  --sketch-old: #c2c2c2;   /* light grey: lines already drawn in earlier steps */
  --paper: #fffaf2;        /* sketchbook paper */
  --paper-texture:
    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'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(#efe2d0 1px, transparent 1.3px);
  --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'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #bfe8ff;
  min-height: 100vh;
  line-height: 1.5;
}

button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

/* ---------- The Frutiger Aero landscape ----------
   A bright cyan sky with the sun and a lens flare in the top corner, shaded clouds,
   glossy green hills, a strip of reflective water, and a few glass bubbles.
   It sits behind everything (fixed), and every panel on top is mostly opaque,
   so text never has to be read against the scene. */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #1c9fe8 0%, #4dbdf4 24%, #93dafb 50%, #d2f2ff 72%, #eafbff 84%);
}
/* sun + a horizontal light streak */
.sun {
  position: absolute; top: -130px; right: 6%; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 11%, rgba(255, 255, 228, 0.92) 17%, rgba(255, 255, 255, 0.4) 36%, rgba(255, 255, 255, 0) 68%);
}
.sun::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 3px; transform: translate(-50%, -50%) rotate(-7deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 45%, #fff 50%, rgba(255, 255, 255, 0.85) 55%, transparent);
}
/* lens-flare rings trailing away from the sun */
.flare { position: absolute; border-radius: 50%; }
.f1 { top: 21%; right: 22%; width: 64px; height: 64px; background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.35)); border: 1px solid rgba(255, 255, 255, 0.45); }
.f2 { top: 31%; right: 31%; width: 22px; height: 22px; background: rgba(200, 255, 225, 0.35); }
.f3 { top: 40%; right: 41%; width: 110px; height: 110px; border: 2px solid rgba(255, 255, 255, 0.22); background: radial-gradient(circle, transparent 60%, rgba(170, 240, 255, 0.18)); }

/* soft clouds with a little shading underneath */
.cloud { position: absolute; background: linear-gradient(180deg, #ffffff 55%, #e1f2fc); border-radius: 999px; opacity: 0.92; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 55%; height: 170%; left: 12%; bottom: 20%; }
.cloud::after { width: 40%; height: 130%; right: 12%; bottom: 25%; }
.c1 { width: 220px; height: 56px; top: 15%; left: 3%; }
.c2 { width: 300px; height: 72px; top: 36%; right: 2%; opacity: 0.8; }
.c3 { width: 160px; height: 42px; top: 50%; left: 30%; opacity: 0.55; }

/* glossy green hills */
.hill { position: absolute; bottom: 10vh; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hill::after { /* the shine on top of the grass */
  content: ""; position: absolute; left: 18%; right: 30%; top: 4%; height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
}
.h1 { left: -14%; width: 86%; height: 34vh; background: radial-gradient(ellipse at 40% 0%, #d9ff9e 0%, #97df55 22%, #52b52c 58%, #2f8d21 100%); }
.h2 { right: -18%; width: 84%; height: 24vh; background: radial-gradient(ellipse at 55% 0%, #e2ffae 0%, #a6e664 24%, #5fbf33 60%, #3a9a27 100%); }

/* water along the bottom, with shimmer lines and a hint of the hills reflected in it */
.water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11vh;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 7px, rgba(255, 255, 255, 0.22) 7px 8px),
    linear-gradient(180deg, rgba(82, 181, 44, 0.35), rgba(82, 181, 44, 0) 35%),
    linear-gradient(180deg, #86defd 0%, #36b5ea 35%, #1391d6 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
}

/* glass bubbles */
.bubble {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.98) 0 9%, rgba(255, 255, 255, 0.25) 22%, transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.5), transparent 30%),
    radial-gradient(circle, rgba(140, 225, 255, 0.06) 55%, rgba(110, 210, 255, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
}
.b1 { width: 70px; height: 70px; left: 4%; top: 58%; }
.b2 { width: 30px; height: 30px; left: 11%; top: 50%; }
.b3 { width: 104px; height: 104px; right: 5%; top: 62%; }
.b4 { width: 24px; height: 24px; right: 15%; top: 56%; }
.b5 { width: 46px; height: 46px; left: 48%; bottom: 13vh; }

/* ---------- Aero glass panels ----------
   Three levels, all built on the existing classes:
     1. windows  — .panel, .hero, .step-card : glossy glass, cyan edge, top reflection
     2. tiles    — .card, .stat, .post        : lighter glass + a thin green accent on top
     3. insets   — .chip, .have, fields, tips : quiet bevelled glass inside the others
   Corners are nearly square (4–8px). Blur is light and backgrounds stay mostly
   opaque so text is always easy to read. */
:root {
  --edge: rgba(56, 146, 204, 0.42);         /* thin sky-blue border */
  --edge-strong: rgba(34, 124, 186, 0.62);
  --glass-top: rgba(255, 255, 255, 0.97);
  --glass-bottom: rgba(231, 246, 255, 0.95);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  --float: 0 10px 24px -14px rgba(16, 78, 128, 0.55), 0 1px 3px rgba(16, 78, 128, 0.12);
}
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--glass-top) 0%, rgba(246, 252, 255, 0.96) 48%, var(--glass-bottom) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--edge);
  border-radius: 6px;
  box-shadow: var(--bevel), var(--float);
}
/* the glossy reflection across the top edge (drawn behind the content) */
.glass::before {
  content: ""; position: absolute; z-index: -1; left: 1px; right: 1px; top: 1px; height: min(46%, 70px);
  border-radius: 5px 5px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15) 90%, transparent);
}
/* Level 1 — windows: a Vista-style glass frame around a bright white surface.
   The frame is drawn with box-shadow rings: a translucent sky-blue band,
   then a crisp dark-blue outline, then a soft shadow on the landscape. */
:root {
  --window-frame:
    0 0 0 5px rgba(190, 231, 252, 0.78),
    0 0 0 6px rgba(26, 88, 142, 0.55),
    0 18px 32px -14px rgba(8, 56, 104, 0.6);
}
.panel, .hero, .step-card {
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #fff, var(--window-frame);
}
.panel { padding: 24px 28px; margin: 6px 6px 26px; border-radius: 7px; }

/* Glossy blue title bars (the question captions, "Kinds of art I've tried", "Share a creation") */
.question h2, .passport h3, .post-form .panel-title, .backup .panel-title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 -28px 16px; padding: 9px 28px;
  font-size: 1.2rem; font-weight: 700; color: #fff; text-shadow: 0 1px 1px rgba(0, 45, 90, 0.55);
  background: linear-gradient(180deg, #74cff8 0%, #33a7e6 48%, #1a8fd6 50%, #33a9ea 100%);
  border-bottom: 1px solid #0f6aa8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.question, .passport, .post-form, .backup { padding-top: 0; overflow: hidden; }
/* Profile: backup panel */
.backup { max-width: 900px; margin: 6px auto 26px; }
.backup p { margin: 0 0 14px; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.backup-actions label.btn { cursor: pointer; }
.passport h3 { justify-content: center; }

/* Washi tape: add .taped (or use the card patterns below) */
.taped::after, .card:nth-child(3n+1)::after, .card:nth-child(3n+2)::after, .creation::after, .hero-card::after, .done-card::after {
  content: ""; position: absolute; z-index: 2; width: 84px; height: 22px; pointer-events: none;
  background: var(--tape-pink); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(31, 53, 71, 0.12);
  /* torn ends */
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 60%, 100% 100%, 2% 96%, 0 65%, 4% 35%);
}

/* Handwritten notes */
.hand-note { font-family: var(--hand); font-size: 1.35rem; font-weight: 700; color: var(--pink-pen); line-height: 1.1; }

/* A hand-drawn wavy divider */
hr.squiggle {
  border: 0; height: 14px; margin: 2.4rem auto 0; max-width: 260px; opacity: 0.8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0,7 C10,0 10,14 20,7 S30,0 40,7' fill='none' stroke='%231a9be0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;
}

/* ---------- Top bar & navigation (the one frosted-glass piece) ---------- */
.topbar {
  position: sticky; top: 12px; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  max-width: 1148px; margin: 14px auto 0; padding: 6px 10px 6px 16px;
  border-radius: 7px;
  /* a glossy toolbar: bright upper half, slightly deeper lower half */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(234, 247, 255, 0.94) 49%, rgba(205, 234, 251, 0.94) 50%, rgba(224, 243, 254, 0.94) 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #fff, var(--window-frame);
}
.logo {
  display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 4px;
  font-family: var(--font-brand); font-size: 1.2rem; font-weight: 400; letter-spacing: 0.02em; color: var(--ink);
  -webkit-text-stroke: 0.5px currentColor; /* Michroma only comes in one light weight — this firms it up */
}
.logo-orb { /* a little glossy Aero globe — the brand mark */
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background:
    radial-gradient(circle at 32% 26%, #fff 0 12%, transparent 34%),
    radial-gradient(circle at 50% 110%, #b7f06b 0 30%, transparent 60%),
    radial-gradient(circle at 50% 40%, #6fdcff, #1690e0 75%);
  box-shadow: inset 0 -3px 6px rgba(0, 60, 120, 0.25);
}

.nav { display: flex; gap: 2px; }
/* Toolbar buttons: invisible until you point at them (a light glossy box),
   the current page looks pressed in (deeper blue glass). */
.nav button {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 14px;
  background: none; border: 1px solid transparent; border-radius: 4px;
  font-size: 1rem; font-weight: 600; color: #24466a;
}
.nav button:hover {
  border-color: #8ccbf0; color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #eef8ff 49%, #d4eefd 50%, #e6f6ff 100%);
  box-shadow: inset 0 1px 0 #fff;
}
.nav button.active {
  color: #0b3a62; border-color: #3f8cc4;
  background: linear-gradient(180deg, #c7e7fb 0%, #b1dcf7 49%, #9bd1f4 50%, #b9e2fa 100%);
  box-shadow: inset 0 1px 3px rgba(10, 70, 120, 0.3);
}
.nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill { min-width: 22px; padding: 0 6px; border-radius: 999px; font-size: 0.8rem; text-align: center; background: #c9f2a8; color: #1a4d10; }
.avatar-sm {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1rem; background: #fff; border: 1.5px solid var(--line);
}
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

main { max-width: 1160px; margin: 0 auto; padding: 28px 20px 80px; }
.screen { animation: rise 0.25s ease-out; }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Type ---------- */
/* Exo 2 for everything that labels or controls the interface.
   Reading text (descriptions, instructions, tips) stays in the body font. */
h1, h2, h3, .page-title, .section-title, .hero-title, .tut-name, .step-count,
.btn, .nav button, .chip, .sub-q, .panel-title, .meta, .have, .like, .stat span {
  font-family: var(--font-display);
}
.btn, .nav button { letter-spacing: 0.02em; }
.page-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0.2em 0 0.3em; text-align: center; }
.page-title.left { text-align: left; }
.page-sub { text-align: center; color: #173f63; font-weight: 600; font-size: 1.1rem; margin: 0 0 1.6rem; }
/* Text that sits directly on the sky gets a soft white glow, the way Aero-era sites did it */
.page-title, .page-sub, .section-title, .tut-head { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 14px rgba(255, 255, 255, 0.7); }
.section-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 1.55rem; font-weight: 800; margin: 2.2rem 0 1rem; color: #0f3558; }
/* a small glossy orb in front of each section title */
.section-title::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 16%, transparent 40%),
    radial-gradient(circle at 50% 110%, #b7f06b 0 28%, transparent 58%),
    radial-gradient(circle at 50% 40%, #6fdcff, #1690e0 78%);
  box-shadow: 0 1px 2px rgba(0, 50, 100, 0.35);
}
.section-title span:not(.hand-note) { color: var(--aqua-dark); }
.section-title .hand-note { font-size: 1.3rem; rotate: -2deg; }
.hint { color: var(--ink-soft); font-size: 0.95rem; }
.center { text-align: center; }
.center-screen { text-align: center; padding-top: 16vh; }

/* ---------- Buttons ---------- */
/* Shiny blue Vista buttons: a bright upper half, a deeper lower half split by a hard
   highlight line, a crisp blue edge and a bevel. Hover glows cyan; pressed sinks in. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 24px; border-radius: 4px;
  font-size: 1.05rem; font-weight: 700; color: #0c3f66;
  background: linear-gradient(180deg, #f4fbff 0%, #dcf1fe 49%, #b8e2fb 50%, #cfeefe 100%);
  border: 1px solid #3c86bd;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 40, 80, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: box-shadow 0.12s, border-color 0.12s, background 0.12s;
}
.btn:hover:not(:disabled) {
  border-color: #2a7bb8;
  background: linear-gradient(180deg, #ffffff 0%, #e8f7ff 49%, #a6dbfb 50%, #c6ecff 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 10px rgba(70, 185, 250, 0.65);
}
.btn:active:not(:disabled) {
  background: linear-gradient(180deg, #a8d8f4 0%, #c3e5f9 49%, #aad8f4 50%, #c4e6fa 100%);
  box-shadow: inset 0 1px 3px rgba(0, 50, 100, 0.4);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible, .chip:focus-visible, .nav button:focus-visible, .have:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }

/* The one glossy Aero button: the main action on each screen */
.btn.primary {
  color: #fff; border-color: #1f6f19;
  background: linear-gradient(180deg, #a6ec84 0%, #5ec645 49%, #37a12a 50%, #52bd3b 100%);
  text-shadow: 0 1px 1px rgba(0, 60, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 5px -1px rgba(20, 90, 15, 0.5);
}
.btn.primary:hover:not(:disabled) {
  border-color: #1a6215;
  background: linear-gradient(180deg, #b8f59a 0%, #6fd455 49%, #3cad2d 50%, #5cca44 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 12px rgba(120, 230, 90, 0.7);
}
.btn.primary:active:not(:disabled) {
  background: linear-gradient(180deg, #3f9f2f 0%, #4fb13b 49%, #3a9d2c 50%, #4bae37 100%);
  box-shadow: inset 0 1px 4px rgba(0, 50, 0, 0.45);
}
.btn.big { min-height: 56px; padding: 13px 32px; font-size: 1.2rem; }
.btn.small { min-height: 40px; padding: 7px 16px; font-size: 0.95rem; }
.btn.finish { background: linear-gradient(180deg, #ffeaa0 0%, #ffd35c 49%, #f6be2e 50%, #ffd14f 100%); border-color: #c08900; color: #4a2a00; text-shadow: none; }

.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 1.4rem; flex-wrap: wrap; }

/* ---------- Home: hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center;
  padding: 48px 48px 44px; border-radius: 8px; border-color: var(--edge-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 251, 255, 0.9) 45%, rgba(214, 239, 253, 0.86) 100%);
}
.hero.glass::before { height: 90px; }
.eyebrow {
  display: inline-block; margin: 0 0 12px; padding: 3px 12px;
  font-family: var(--font-brand); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
  -webkit-text-stroke: 0.35px currentColor;
  color: var(--aqua-dark); background: var(--tape-blue); rotate: -2deg;
  clip-path: polygon(2% 0, 98% 6%, 100% 100%, 0 94%);
}
.hero-title { margin: 0; font-size: clamp(2.6rem, 6.2vw, 4.7rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; }
/* hand-drawn marker underline */
.scribble {
  padding-bottom: 0.08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,10 C45,3 85,15 125,7 S185,5 197,9' fill='none' stroke='%23ff9fbd' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat bottom / 100% 0.3em;
}
.hero-sub { font-size: 1.25rem; color: var(--ink-soft); margin: 16px 0 26px; max-width: 30ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.start-note { display: flex; align-items: flex-end; gap: 4px; margin: 8px 0 0 70px; }
.start-note svg { width: 48px; height: 32px; fill: none; stroke: var(--pink-pen); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Three taped polaroids — deliberately not lined up */
.hero-art { position: relative; height: 410px; }
.hero-card {
  position: absolute; width: 220px; margin: 0; padding: 10px 10px 8px; border-radius: 3px;
  background: #fff; box-shadow: 0 10px 20px -10px rgba(31, 53, 71, 0.45);
}
.hero-card .sketch { display: block; background-color: var(--paper); background-image: var(--paper-texture); background-size: 180px 180px, 18px 18px; }
.hero-card figcaption { font-family: var(--hand); font-weight: 700; font-size: 1.2rem; text-align: center; margin-top: 4px; color: var(--ink); }
.hero-card::after { top: -10px; left: calc(50% - 42px); rotate: 3deg; }
.hc-1::after { background: var(--tape-yellow); rotate: -4deg; }
.hc-2::after { background: var(--tape-blue); }
.hc-0 { left: 0; top: 0; rotate: -5deg; }
.hc-1 { right: 0; top: 18px; rotate: 4deg; }
.hc-2 { left: 26%; top: 54%; rotate: -1.5deg; z-index: 1; }
.hero-card figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Project cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 22px; margin: 1rem 0 1.6rem; }
/* Level 2 — tiles: glass with a thin green accent along the top edge.
   Tape on some (not all) cards keeps the handmade feel. */
.card { display: flex; flex-direction: column; transition: transform 0.15s, box-shadow 0.15s; border-top: 3px solid #6cc84f; }
.card:nth-child(3n+1)::after { top: -11px; left: 18px; rotate: -6deg; }
.card:nth-child(3n+2)::after { top: -11px; right: 16px; rotate: 5deg; background: var(--tape-yellow); }
/* Vista hover: the tile lights up with a cyan glow */
.card { border-color: rgba(40, 112, 170, 0.5); }
.card:hover { border-color: #4fb0ea; border-top-color: #4fb536; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #8fd6fb, 0 0 16px rgba(70, 185, 250, 0.55), 0 14px 26px -14px rgba(16, 78, 128, 0.6); }
.card-body h3 { color: #0f3558; }
/* the picture sits in the tile like a photo in a frame */
.card-art {
  position: relative; margin: 10px 10px 0; border-radius: 3px; overflow: hidden;
  background-color: var(--paper); background-image: var(--paper-texture); background-size: 180px 180px, 18px 18px;
  border: 1px solid rgba(56, 146, 204, 0.25); box-shadow: inset 0 1px 3px rgba(16, 78, 128, 0.12);
}
.card-art .sketch { display: block; }
/* the project emoji as a little sticker */
.orb-icon {
  position: absolute; top: 8px; left: 8px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: #fff; border: 1.5px solid var(--line); rotate: -8deg;
  box-shadow: 1px 2px 0 rgba(31, 53, 71, 0.12);
}
.orb-icon.big { width: 60px; height: 60px; font-size: 2rem; }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 18px; flex: 1; }
.card-body h3 { margin: 2px 0 0; font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.card-body p { margin: 0; }
.card-body .mats { font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.card-body .why { font-size: 0.86rem; color: #8a4a62; border-left: 2px dashed #f2a7bb; padding: 2px 0 2px 10px; }
.card-body .mats { padding: 6px 8px; border-radius: 4px; background: rgba(214, 238, 252, 0.55); border: 1px solid rgba(56, 146, 204, 0.18); }
.card-body .btn { margin-top: auto; align-self: flex-start; }
.card-body .desc + .btn, .card-body .why + .btn { margin-top: 10px; }

/* Category label: a strip of masking tape with handwriting */
.cat-tag {
  align-self: flex-start; display: inline-block; padding: 1px 12px 0;
  font-family: var(--hand); font-size: 1.15rem; font-weight: 700; color: #3c5a1c;
  background: #e4f7c9; rotate: -1.5deg;
  clip-path: polygon(2% 0, 98% 8%, 100% 92%, 1% 100%);
}
.cat-tag.small { font-size: 1rem; }

.meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--ink-soft); font-weight: 700; font-size: 0.92rem; }
.level { display: inline-flex; align-items: center; gap: 3px; }
.level i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--aqua); }
.level i:last-of-type { margin-right: 4px; }
.lvl-1 i:nth-child(-n+1), .lvl-2 i:nth-child(-n+2), .lvl-3 i:nth-child(-n+3) { background: var(--aqua); }

/* ---------- Discover: questions & chips ---------- */
/* Each question is a small glass window with a glossy blue title bar (see "Glossy blue title bars") */
.question .hint { margin: 0 0 14px; }
.question h2 + .choices { margin-top: 14px; }
/* the question number, handwritten in white inside a wobbly pen circle on the title bar */
.q-num {
  flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hand); font-size: 1.5rem; font-weight: 700; color: #fff; text-shadow: 0 1px 1px rgba(0, 45, 90, 0.5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M21,4 C31,3 37,11 36,21 C35,31 27,37 18,36 C9,35 3,28 4,18 C5,10 12,4 23,6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sub-q {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 10px;
  font-size: 0.8rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua-dark);
}
.sub-q::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); }
.digital-hint { margin: 12px 0 0; font-size: 1.2rem; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; }
/* Level 3 — options: bevelled glass buttons; selected = Vista-style blue selection */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px;
  border-radius: 5px; font-size: 1rem; font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #f5fafd 50%, #eaf4fa 100%);
  border: 1px solid rgba(56, 146, 204, 0.35); box-shadow: var(--bevel);
  transition: border-color 0.12s, background 0.12s;
}
.chip:hover { border-color: var(--aqua); background: linear-gradient(180deg, #ffffff 0%, #eef8ff 50%, #dff1fc 100%); }
.chip .e { font-size: 1.2rem; }
.chip small { display: block; font-weight: 600; font-size: 0.8rem; color: var(--ink-soft); }
/* selected: soft blue glass, with a hand-drawn check */
.chip.on {
  background: linear-gradient(180deg, #eaf7ff 0%, #d3edfd 50%, #bfe4fb 100%);
  border-color: #3a9ad8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(58, 154, 216, 0.18);
}
.chip.on::after { content: "✓"; font-family: var(--hand); font-size: 1.3rem; line-height: 1; color: var(--aqua-dark); }

.big-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.big-choices .chip { position: relative; flex-direction: column; justify-content: center; border-radius: 6px; padding: 16px 10px; min-height: 112px; text-align: center; }
.big-choices .chip.on::after { position: absolute; top: 6px; right: 10px; }
/* emoji on an organic pastel blob — each category its own color */
.big-choices .chip .e {
  width: 54px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; background: #ffe1ea;
}
.big-choices .chip:nth-child(8n+2) .e { background: #fff0b8; border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; }
.big-choices .chip:nth-child(8n+3) .e { background: #d6f3e2; }
.big-choices .chip:nth-child(8n+4) .e { background: #e6ddff; border-radius: 52% 48% 60% 40% / 40% 60% 42% 58%; }
.big-choices .chip:nth-child(8n+5) .e { background: #d4ecff; }
.big-choices .chip:nth-child(8n+6) .e { background: #ffe3cc; border-radius: 40% 60% 48% 52% / 58% 42% 58% 42%; }
.big-choices .chip:nth-child(8n+7) .e { background: #e4f7c9; }
.big-choices .chip:nth-child(8n+8) .e { background: #f7dcf2; }
.level-choices .chip { padding: 12px 20px; text-align: left; }
.level-choices .chip .l { display: block; }

/* ---------- Loading ---------- */
.loader { display: inline-flex; gap: 12px; margin-bottom: 18px; }
.loader span { width: 18px; height: 18px; border-radius: 50%; background: #ffb3c8; animation: bounce 1s ease-in-out infinite; }
.loader span:nth-child(2) { background: #9fd8ff; animation-delay: 0.15s; }
.loader span:nth-child(3) { background: #b9e894; animation-delay: 0.3s; }
@keyframes bounce { 50% { transform: translateY(-14px); } }

/* ---------- Project overview ---------- */
.prep { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: start; }
.prep-preview { position: relative; background-color: var(--paper); background-image: var(--paper-texture); background-size: 180px 180px, 18px 18px; border-radius: 4px; border: 1px solid var(--edge); box-shadow: 0 8px 18px -12px rgba(16, 78, 128, 0.55); overflow: hidden; }
.prep-info h3 { margin: 1.2rem 0 0.6rem; font-weight: 900; }
.prep-desc { font-size: 1.1rem; margin: 10px 0 0; }
/* "You'll need": a list inside an inset glass well */
.materials-check {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--edge); border-radius: 5px;
  background: rgba(240, 249, 255, 0.7); box-shadow: inset 0 1px 3px rgba(16, 78, 128, 0.12);
}
.have {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px;
  background: transparent; border: none; border-bottom: 1px solid rgba(56, 146, 204, 0.18); border-radius: 0;
  padding: 8px 14px; font-size: 1.05rem; font-weight: 700; text-align: left;
}
.have:last-child { border-bottom: none; }
.materials-check > p { margin: 12px 14px; font-weight: 700; }
.have:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(214, 238, 252, 0.8)); }
.have .nope { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.have:hover .nope { color: var(--pink-pen); text-decoration: underline; }

/* Tips: a warm glass info balloon — the one yellow thing on the page */
.tip-box {
  position: relative; display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 16px 12px 14px; text-align: left;
  background: linear-gradient(180deg, #fffdf0 0%, #fff6cf 55%, #ffefb4 100%);
  border: 1px solid #e6c65a; border-left: 4px solid #f2b81f; border-radius: 5px; color: #4d3a00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px -10px rgba(140, 100, 0, 0.6);
}
.tip-box b { white-space: nowrap; font-family: var(--hand); font-size: 1.3rem; line-height: 1.1; }

/* ---------- Tutorial ---------- */
#tutorial { max-width: 820px; margin: 0 auto; }
.tut-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.tut-name { margin: 0; font-size: 1.4rem; font-weight: 900; line-height: 1.2; }
.step-count { margin: 0; color: var(--ink-soft); font-weight: 800; }
/* a glossy Vista-style progress bar */
.progress {
  height: 16px; border-radius: 4px; overflow: hidden; padding: 1px;
  background: linear-gradient(180deg, #e9f1f7, #fbfdff); border: 1px solid var(--edge-strong);
  box-shadow: inset 0 1px 3px rgba(16, 78, 128, 0.2);
}
.bar {
  height: 100%; border-radius: 3px; transition: width 0.4s ease;
  background: linear-gradient(180deg, #b7f196 0%, #6ccf4c 48%, #45b331 50%, #62c946 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.step-dots { display: flex; justify-content: center; gap: 8px; margin: 12px 0 16px; }
.step-dots span { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 1px solid var(--edge-strong); }
.step-dots .done { background: var(--green); border-color: var(--green); }
.step-dots .on { background: var(--aqua); border-color: var(--aqua); transform: scale(1.3); }

/* Level 1 window around the step; the sketchbook page is taped inside it */
.step-card { padding: 20px; text-align: center; border-color: var(--edge-strong); border-radius: 8px; }
/* The tutorial picture: a clean white page, so the black line art is easy to read. */
.visual {
  position: relative; margin: 14px 0 22px; border-radius: 4px;
  background: #ffffff; border: 1px solid #d8e1e8;
  box-shadow: 0 6px 14px -10px rgba(16, 60, 100, 0.35);
}
.visual.digital { background: #f6f8fa; }
/* Built-in drawings and dropped-in PNGs share the same frame. Big enough to see
   clearly: the full card width, up to 480px tall. */
.visual > .sketch, .visual > .step-photo, .visual > .emoji-art {
  display: block; width: 100%; max-height: 480px; border-radius: 4px;
}
.visual > .step-photo, .visual > .emoji-art { aspect-ratio: 264 / 188; }
.step-photo { object-fit: contain; }
.step-text { font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.5; margin: 0 auto; max-width: 36ch; }
.step-card .tip-box { max-width: 560px; margin: 18px auto 0; }
.adapted-tag { display: inline-block; margin: 14px auto 0; font-family: var(--hand); font-size: 1.25rem; font-weight: 700; color: var(--pink-pen); }

/* ---------- Tutorial sketches: black-and-white hand-drawn line art ----------
   Black = what to draw in this step. Light grey = what you already drew.
   No colors, no shading — just clear, slightly wobbly lines. */
.sketch { width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* already drawn: light grey */
.sketch .was { stroke: var(--sketch-old); color: var(--sketch-old); stroke-width: 2.2; }
/* the new lines: black */
.sketch .now { stroke: var(--sketch-ink); color: var(--sketch-ink); stroke-width: 2.6; }
.sketch.done .now { stroke-width: 2.3; }
.sketch .thin { stroke-width: 1.4; }
.sketch .solid { fill: currentColor; stroke: none; }
.sketch .dashed { stroke-dasharray: 6 6; }
/* filled areas (digital "color" steps) show as a pale grey tint, never a color */
.sketch .flat { fill: #ececec; stroke: none; }
.sketch .was .flat { fill: #f4f4f4; }
.sketch .shine { fill: #fff; stroke: none; }
/* arrows and notes: black pen, handwritten */
.sketch .arrow, .sketch .marks { stroke: var(--sketch-ink); color: var(--sketch-ink); stroke-width: 2; stroke-dasharray: none; }
.sketch text { fill: var(--sketch-ink); stroke: none; font-family: "Caveat", cursive; font-size: 16px; font-weight: 700; text-anchor: middle; }
.sketch .was text { fill: var(--sketch-old); }
.sketch .step-tag { text-anchor: start; font-size: 15px; fill: #8a8a8a; }
.emoji-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; font-size: 4rem; background-color: #fff; }

/* Digital version: the same black-and-white lines inside a plain greyscale app screen */
.sketch.digital .was { stroke: #c4c4c4; color: #c4c4c4; stroke-width: 2; }
.sketch.digital .now { stroke: var(--sketch-ink); color: var(--sketch-ink); stroke-width: 2.4; }
.sketch.digital .kept { stroke: #555; color: #555; stroke-width: 2.2; }
.sketch .ui-frame { fill: #fff; stroke: #cfcfcf; stroke-width: 1.5; }
.sketch .ui-canvas { fill: #fff; stroke: #e2e2e2; stroke-width: 1; }
.sketch .ui-line { stroke: #e2e2e2; stroke-width: 1.2; }
.sketch .ui-dot { fill: #d6d6d6; stroke: none; }
.sketch .ui-icon { stroke: #8a8a8a; stroke-width: 1.4; }
.sketch .ui-dash { stroke-dasharray: 2 2; }
.sketch .ui-active { fill: #e6e6e6; stroke: #bdbdbd; stroke-width: 0.8; }
.sketch .ui-row { fill: #f4f4f4; stroke: none; }
.sketch text.ui-text { font-family: var(--font-display); font-size: 7.5px; font-weight: 800; fill: #777; text-anchor: start; }
.sketch text.ui-title { text-anchor: middle; }
.sketch .stylus { fill: #fff; }

/* ---------- Done ---------- */
.done-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: start; max-width: 900px; margin: 0 auto 18px; }
.done-card::after { top: -10px; left: 30px; rotate: -5deg; background: var(--tape-yellow); }
.done-info h2 { margin: 0; font-size: 1.8rem; font-weight: 900; }
.done-info h3 { margin: 18px 0 6px; font-weight: 900; }
/* The photo spot is an empty polaroid waiting for your picture */
.photo-drop {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; text-align: center;
  background: var(--paper); border: 10px solid #fff; border-bottom-width: 26px; border-radius: 3px;
  outline: 1px dashed rgba(56, 146, 204, 0.5); outline-offset: -18px;
  box-shadow: 0 10px 20px -12px rgba(16, 78, 128, 0.55), 0 0 0 1px rgba(56, 146, 204, 0.2);
  cursor: pointer; overflow: hidden; color: var(--ink-soft); font-weight: 700; rotate: -1.5deg;
}
.photo-drop:hover { outline-color: var(--pink-pen); }
.photo-drop:has(img:not([hidden])) { outline: none; }
.photo-drop span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; }
.photo-drop b { font-size: 2.6rem; }
.photo-drop img { width: 100%; height: 100%; object-fit: cover; }
.stars { display: flex; gap: 4px; }
.stars button {
  background: none; border: none; padding: 0 2px; min-width: 44px; min-height: 44px;
  font-size: 2.4rem; line-height: 1; color: #d4dde5; transition: transform 0.12s;
}
.stars button.on { color: #ffb400; }
.stars button:hover { transform: scale(1.12) rotate(-6deg); }
.field-label { display: block; margin: 16px 0 6px; font-weight: 800; }
/* fields: slightly sunken glass */
textarea, select, input[type="text"] {
  width: 100%; padding: 10px 14px; font-size: 1rem; border-radius: 4px;
  border: 1px solid var(--edge-strong); background: linear-gradient(180deg, #f4f9fc, #ffffff 40%);
  box-shadow: inset 0 1px 2px rgba(16, 78, 128, 0.15);
}
textarea:focus, select:focus, input[type="text"]:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(26, 155, 224, 0.18); }
.check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--aqua); }

/* ---------- Journey ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
/* stats: glass tiles with the green accent, and a handwritten number */
.stat { padding: 14px 18px 14px; text-align: left; border-top: 3px solid #6cc84f; }
.stat b { display: block; font-family: var(--hand); font-size: 2.4rem; font-weight: 700; color: var(--aqua-dark); line-height: 1.1; }
.stat span { color: var(--ink-soft); font-weight: 700; }

.passport { text-align: center; }
.stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* rubber stamps: faint outlines until you've tried that kind of art */
.stamp {
  width: 100px; height: 100px; border-radius: 50%; padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-size: 0.76rem; font-weight: 800; line-height: 1.15; color: rgba(31, 53, 71, 0.4);
  border: 2px dashed rgba(31, 53, 71, 0.2);
}
.stamp span { font-size: 1.7rem; filter: grayscale(1); opacity: 0.5; margin-bottom: 2px; }
.stamp.got {
  color: #c43d66; border: 3px double #e0567e; background: rgba(255, 228, 236, 0.5);
  font-family: var(--hand); font-size: 1.05rem; text-transform: none;
}
.stamp.got:nth-child(odd) { rotate: -8deg; }
.stamp.got:nth-child(even) { rotate: 6deg; }
.stamp.got span { filter: none; opacity: 1; }
.next { font-family: var(--hand); font-size: 1.35rem; color: var(--green-dark); font-weight: 700; margin-bottom: 0; }

/* My creations: taped polaroids */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 20px; margin-bottom: 1.6rem; }
.creation { position: relative; margin: 0; padding: 10px 10px 14px; background: #fff; border-radius: 3px; box-shadow: 0 10px 18px -10px rgba(31, 53, 71, 0.45); }
.creation::after { top: -10px; left: calc(50% - 42px); rotate: -3deg; }
.creation:nth-child(3n+1) { rotate: -1.4deg; }
.creation:nth-child(3n+2) { rotate: 1deg; }
.creation:nth-child(3n+2)::after { background: var(--tape-blue); rotate: 4deg; }
.creation-art { aspect-ratio: 1; overflow: hidden; background-color: var(--paper); background-image: var(--paper-texture); background-size: 180px 180px, 18px 18px; display: flex; align-items: center; }
.creation-art > * { width: 100%; }
.creation-art img { height: 100%; object-fit: cover; }
.creation figcaption { display: flex; flex-direction: column; gap: 3px; padding: 10px 4px 0; }
.creation figcaption b { font-family: var(--hand); font-size: 1.5rem; line-height: 1.1; }
.creation small { color: var(--ink-soft); font-weight: 600; }
.creation q { font-family: var(--hand); font-size: 1.2rem; color: var(--pink-pen); }
.creation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.creation .creation-actions .btn { margin-top: 0; min-height: 40px; }
/* "Remove" on a journey card: quiet until you point at it */
.creation .remove-entry { align-self: flex-start; margin-top: 8px; min-height: 40px; padding: 6px 14px; font-size: 0.85rem; color: var(--ink-soft); }
.creation .remove-entry:hover:not(:disabled) {
  color: #a3243c; border-color: #c9566b;
  background: linear-gradient(180deg, #fff7f8 0%, #ffe9ec 49%, #ffd6dc 50%, #ffe4e8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 8px rgba(220, 80, 100, 0.35);
}
.stars-small { color: #ffb400; letter-spacing: 1px; }
.empty { text-align: center; color: var(--ink-soft); font-weight: 700; grid-column: 1 / -1; }

/* ---------- Community ---------- */
.post-form { max-width: 760px; margin: 6px auto 30px; }
.post-form-grid { display: grid; grid-template-columns: 160px 1fr; gap: 18px; }
.post-fields .field-label:first-child { margin-top: 0; }
.post-fields .btn { margin-top: 12px; }
.photo-drop.small { aspect-ratio: 1; font-size: 0.9rem; }
.notice {
  padding: 10px 14px; border-radius: 4px; margin: 0 0 12px; font-weight: 700; color: var(--aqua-dark);
  background: linear-gradient(180deg, #f2faff, #dcf0fc); border: 1px solid var(--edge); border-left: 4px solid var(--aqua);
}

.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post { padding: 14px; display: flex; flex-direction: column; gap: 10px; border-top: 3px solid #6cc84f; }
.post-head { display: flex; align-items: center; gap: 10px; }
.post-head small { display: block; color: var(--ink-soft); font-weight: 600; }
.avatar, .avatar-lg {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: var(--ink);
  background: #d4efff; border: 1.5px solid var(--line);
}
.avatar img, .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.badge { margin-left: auto; font-family: var(--hand); font-size: 1.1rem; font-weight: 700; color: var(--pink-pen); rotate: 4deg; }
.post-art { border-radius: 3px; border: 1px solid rgba(56, 146, 204, 0.25); overflow: hidden; background-color: var(--paper); background-image: var(--paper-texture); background-size: 180px 180px, 18px 18px; }
.post-art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.caption { margin: 0; font-weight: 700; font-size: 1.05rem; }
.post-project { margin: 0; color: var(--ink-soft); font-size: 0.9rem; font-weight: 700; }
.post-head .delete-post { margin-left: auto; min-height: 34px; padding: 4px 12px; font-size: 0.85rem; }
.post-head .badge + .delete-post { margin-left: 0; }
.post-actions { display: flex; align-items: center; gap: 12px; }
.post-actions .try { margin-left: auto; }
.like {
  min-height: 40px; padding: 6px 14px; border-radius: 5px; font-weight: 800; font-size: 1rem;
  background: linear-gradient(180deg, #ffffff, #eaf4fa); border: 1px solid rgba(56, 146, 204, 0.35); box-shadow: var(--bevel);
}
.like.on { color: #d6245a; border-color: #f0a3bb; background: linear-gradient(180deg, #fff7fa, #ffe3ec); }
.count { font-weight: 800; color: var(--ink-soft); }
.comments p { margin: 4px 0; font-size: 0.95rem; }
.comment-form { display: flex; gap: 8px; }
.comment-form input { flex: 1; min-height: 40px; }

/* ---------- Profile ---------- */
.profile-card { max-width: 620px; margin: 0 auto 20px; text-align: center; padding: 34px 28px; }
.avatar-lg { width: 96px; height: 96px; font-size: 2.6rem; margin: 0 auto 8px; border: 3px solid #fff; box-shadow: var(--shadow); }
.profile-note { color: var(--ink-soft); max-width: 46ch; margin: 8px auto 18px; }
.g-logo { width: 22px; height: 22px; }
#profile-stats { max-width: 900px; margin: 0 auto 18px; }
#profile-stats .stat b { font-size: 1.8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding: 36px 28px; }
  .hero-art { height: 340px; max-width: 520px; width: 100%; margin: 0 auto; }
  .hero-card { width: 190px; }
  .prep, .done-card { grid-template-columns: 1fr; }
  .prep-preview { max-width: 460px; }
  .done-card .photo-drop { max-width: 360px; width: 100%; margin: 0 auto; }
}

/* Phones & small tablets: navigation moves to a bottom tab bar */
@media (max-width: 760px) {
  /* no blur here: a blurred parent would trap the fixed tab bar inside the top bar */
  .topbar { top: 8px; margin: 8px 10px 0; -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, #ffffff, #e6f4fc); }
  .nav {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 30;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px;
    border-radius: 8px; border: 1px solid var(--edge-strong);
    background: linear-gradient(180deg, #ffffff 0%, #f1f9fe 50%, #e0f1fb 100%);
    box-shadow: var(--bevel), 0 10px 24px -12px rgba(16, 78, 128, 0.55);
  }
  .nav button.active { background: linear-gradient(180deg, #eaf7ff, #cdeafc); box-shadow: inset 0 0 0 1px rgba(58, 154, 216, 0.5); border-radius: 6px; }
  .sun { width: 220px; height: 220px; top: -90px; right: -20px; }
  .sun::after { width: 520px; }
  .f3 { display: none; }
  .panel.question, .panel.passport, .panel.post-form, .panel.backup { padding-top: 0; }
  .question h2, .passport h3, .post-form .panel-title, .backup .panel-title { margin: 0 -16px 14px; padding: 9px 16px; font-size: 1.05rem; }
  .nav button { position: relative; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 0.72rem; min-height: 54px; }
  .nav .pill { position: absolute; top: 2px; right: 18%; font-size: 0.7rem; }
  .nav .avatar-sm { width: 22px; height: 22px; }
  main { padding: 20px 14px 110px; }
  .panel { padding: 18px 16px; }
  .hero { padding: 28px 20px; }
  .hero-sub { font-size: 1.1rem; }
  .start-note { margin-left: 40px; }
  .hero-art { height: 290px; }
  .hc-2 { top: 57%; }
  .hero-card { width: 150px; padding: 6px 6px 4px; }
  .hero-card figcaption { font-size: 0.95rem; }
  .cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .stat { display: flex; align-items: center; justify-content: space-between; }
  .stat b { font-size: 2rem; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .stamp { width: 84px; height: 84px; font-size: 0.68rem; }
  .stamp span { font-size: 1.4rem; }
  .feed { grid-template-columns: 1fr; }
  .post-form-grid { grid-template-columns: 1fr; }
  .photo-drop.small { max-width: 180px; }
  .row .btn { flex: 1; }
  .tut-head { gap: 10px; }
  .tut-name { font-size: 1.15rem; }
  .big-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .gallery { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
}

/* Respect people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}