:root { --bg:#101012; --fg:#f8f4ea; --muted:#b6b3ae; --soft:#201f21; --panel:#181819; --edge:#353133; --accent:#ff865f; --lime:#d1fe87; --display:'Space Grotesk',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.4; cursor:not-allowed; }
.hidden { display:none!important; }
.topbar { z-index:20; position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; min-height:62px; padding:0 max(22px,calc((100% - 1200px)/2)); background:rgba(16,16,18,.96); backdrop-filter:blur(14px); border-bottom:1px solid #29282b; }
.logo { background:none; border:0; font:700 22px/1 var(--display); color:#f9f4ed; letter-spacing:-1.4px; padding:9px 0; }
.logo span,.create-heading h1 span { color:var(--accent); }
.nav { display:flex; align-items:center; gap:22px; }
.nav button { background:none; border:0; color:#cbc6be; font-size:12px; font-weight:800; }
.nav .nav-create { color:#111; background:var(--lime); border-radius:30px; padding:11px 16px; }
.nav .nav-create span { margin-left:11px; }
.home-wrap { max-width:1200px; margin:auto; padding:16px 22px 75px; }
.hero { position:relative; height:clamp(480px,56vw,670px); width:100%; border-radius:18px; overflow:hidden; background:#201a1b; isolation:isolate; }
.hero-photos { display:grid; grid-template-columns:1fr 1fr; height:100%; }
.hero-photo { position:relative; overflow:hidden; }
.hero-photo img { width:100%; height:100%; object-fit:cover; display:block; object-position:center 42%; }
.hero-photo.twist:before { content:''; position:absolute; height:100%; left:0; top:0; width:2px; background:rgba(255,255,255,.55); z-index:2; }
.hero-shade { pointer-events:none; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.73) 0%,rgba(0,0,0,.2) 43%,rgba(0,0,0,.17) 64%,rgba(0,0,0,.72) 100%); }
.hero-wordmark { position:absolute; top:33px; left:45px; z-index:3; font:700 clamp(49px,7.7vw,116px)/.87 var(--display); letter-spacing:-.09em; text-shadow:0 3px 20px #0006; }
.hero-wordmark>span { display:block; }
.hero-wordmark .accent { color:var(--accent); }
.hero-wordmark .but { color:var(--lime); padding-top:5px; }
.hero-label { z-index:3; bottom:100px; position:absolute; font-size:12px; font-weight:800; letter-spacing:.1em; text-shadow:0 3px 9px #000; }
.hero-label.left { left:34px; }
.hero-label.right { left:calc(50% + 24px); }
.hero-cta { position:absolute; z-index:4; right:32px; bottom:22px; border:0; background:var(--lime); color:#121212; border-radius:40px; padding:17px 26px; min-height:56px; font-size:18px; font-weight:800; box-shadow:0 9px 28px #0005; }
.hero-cta span { margin-left:18px; }
.home-footer-row { display:flex; justify-content:space-between; align-items:center; padding:22px 0; gap:12px; }
.tiny-title { font-size:11px; font-weight:800; letter-spacing:.14em; }
.design-toggle { margin-left:auto; color:var(--muted); background:none; border:1px solid var(--edge); border-radius:28px; padding:8px 12px; font-size:11px; font-weight:800; }
.design-toggle span { font-size:16px; margin-left:5px; }
.format-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.format-card { text-align:left; display:flex; flex-direction:column; justify-content:space-between; min-height:155px; padding:18px; border:1px solid var(--edge); border-radius:15px; background:var(--panel); color:var(--fg); transition:transform .15s,border-color .15s; }
.format-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.format-card .format-number { font-size:11px; color:var(--accent); font-weight:700; }
.format-card strong { margin-top:13px; display:block; font:700 clamp(20px,2.3vw,32px)/1.05 var(--display); letter-spacing:-.045em; }
.format-card em { font-style:normal; color:var(--lime); }
.format-card .format-arrow { align-self:flex-end; font-size:21px; margin-top:4px; }
.creator-wrap { max-width:780px; margin:auto; padding:34px 22px 100px; }
.create-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:22px; }
.eyebrow { font-size:10px; letter-spacing:.16em; font-weight:800; color:var(--lime); }
.create-heading h1 { font:700 clamp(43px,7vw,72px)/1 var(--display); letter-spacing:-.08em; margin:5px 0 0; }
.outline-link { background:none; border:1px solid var(--edge); color:var(--fg); border-radius:30px; padding:11px 14px; font-weight:700; font-size:12px; white-space:nowrap; }
.step-progress { display:flex; gap:5px; height:4px; margin-bottom:12px; }
.step-progress span { flex:1; border-radius:4px; background:#3c3a39; }
.step-progress span.active { background:var(--lime); }
.step-bar { display:flex; justify-content:space-between; margin-bottom:20px; color:var(--muted); font-size:10px; letter-spacing:.11em; font-weight:800; }
.step-panel { min-height:280px; }
.kind-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:17px; }
.kind-tile { border-radius:14px; background:var(--panel); border:1.5px solid var(--edge); color:var(--fg); display:flex; gap:8px; min-height:89px; padding:13px; flex-direction:column; text-align:left; }
.kind-tile.selected { border-color:var(--lime); background:#253021; }
.kind-icon { font-size:24px; line-height:1; }
.kind-tile strong { font-size:15px; }
.person-card { background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:18px; margin:0 0 14px; }
.person-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.person-top strong { font-size:14px; }
.person-top button { background:none; border:0; color:#e5aaa4; font-size:12px; font-weight:700; }
.compact-kinds { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.compact-kinds button { color:var(--fg); background:#262528; border:1px solid #474347; border-radius:99px; font-size:12px; padding:8px 12px; }
.compact-kinds button.selected { color:#121212; background:var(--lime); border-color:var(--lime); }
.form-field { margin-bottom:16px; }
.field-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:7px; }
.field-heading label { font-weight:800; font-size:12px; }
.field-heading span { color:var(--muted); font-size:11px; }
.input, .form-field input,textarea { background:#111113; color:var(--fg); border:1px solid #4d4849; border-radius:11px; min-height:47px; width:100%; outline:none; padding:13px; }
.input:focus,.form-field input:focus,textarea:focus { border-color:var(--lime); }
textarea { resize:vertical; min-height:95px; line-height:1.5; }
.upload-grid { display:flex; flex-wrap:wrap; gap:10px; }
.photo-tile,.photo-add,.gallery-add { width:105px; height:136px; border-radius:12px; overflow:hidden; position:relative; border:1px solid #4c4846; background:#2e2d2f; }
.photo-tile img { height:100%; width:100%; object-fit:cover; }
.photo-tile button { position:absolute; top:4px; right:4px; border:0; border-radius:50%; width:25px; height:25px; color:white; background:#000c; font-size:16px; }
.photo-add,.gallery-add { display:grid; place-content:center; text-align:center; gap:6px; font-weight:800; font-size:12px; color:var(--fg); cursor:pointer; }
.photo-add span,.gallery-add span { font-size:28px; }
.photo-add input { position:absolute; opacity:0; width:100%; height:100%; top:0; left:0; cursor:pointer; }
.gallery-add { border-style:dashed; cursor:pointer; }
.note-inline { font-size:12px; color:var(--muted); margin-top:8px; }
.people-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.people-head h2,.result-head h2 { margin:0; font:700 26px/1.1 var(--display); letter-spacing:-.04em; }
.people-head span,.result-head span { font-size:10px; color:var(--muted); font-weight:800; }
.people-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.people-actions button { background:#282725; color:var(--fg); border:1px solid var(--edge); border-radius:30px; padding:13px 17px; font-size:13px; font-weight:700; }
.story-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:22px; }
.story-modes button { padding:14px 8px; min-height:67px; color:var(--fg); background:var(--panel); border:1px solid var(--edge); border-radius:11px; font-size:11px; font-weight:800; }
.story-modes button.active { color:#111; background:var(--lime); border-color:var(--lime); }
.switch-line { display:flex; justify-content:space-between; align-items:center; margin:13px 0; font-size:13px; font-weight:800; }
.switch-line input { width:22px; height:22px; accent-color:#bdf47e; }
.caption-edit { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.caption-edit input { background:#1d1c1e; color:var(--fg); border:1px solid var(--edge); border-radius:10px; padding:13px; width:100%; font-size:12px; }
.step-actions { display:flex; justify-content:space-between; gap:14px; margin-top:26px; }
.back-button,.next-button { border:0; padding:15px 20px; border-radius:40px; min-height:54px; font-size:14px; font-weight:800; }
.back-button { color:var(--fg); border:1px solid var(--edge); background:none; }
.next-button { color:#101010; background:var(--lime); margin-left:auto; min-width:160px; }
.next-button span { margin-left:20px; }
.status { min-height:25px; margin-top:12px; color:var(--accent); font-size:12px; }
.result-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.result-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.result-strip.single { grid-template-columns:minmax(0,320px); }
.result-card { position:relative; aspect-ratio:9/16; border-radius:13px; overflow:hidden; background:linear-gradient(120deg,#aa684c,#272335); display:flex; flex-direction:column; justify-content:space-between; padding:14px; }
.result-card:nth-child(2) { background:linear-gradient(120deg,#688a84,#242536); }
.result-card .result-title { text-align:center; z-index:2; font:700 clamp(17px,3vw,28px)/1 var(--display); text-shadow:0 2px 6px #000b; word-break:break-word; }
.result-faces { display:flex; align-items:center; justify-content:center; flex:1; gap:5px; }
.result-face { display:grid; place-items:center; position:relative; width:44%; aspect-ratio:3/4; border:4px solid #fff9; border-radius:8px; overflow:hidden; background:#25252b; box-shadow:0 6px 15px #0005; font-size:30px; }
.result-face img { height:100%; width:100%; object-fit:cover; }
.result-scenario { text-align:center; font-size:12px; font-weight:700; line-height:1.2; text-shadow:0 2px 6px #000; }
.result-mock { position:absolute; bottom:2px; width:100%; left:0; color:#ffdaae; text-align:center; font-size:8px; font-weight:700; letter-spacing:.13em; }
.result-actions { display:flex; gap:10px; margin-top:18px; }
.result-actions button { color:var(--fg); border:1px solid var(--edge); border-radius:99px; padding:12px 15px; background:var(--panel); font-size:12px; font-weight:800; }
.preview-honesty { color:var(--muted); font-size:12px; line-height:1.5; }
.gallery-tabs { display:flex; gap:10px; margin-bottom:19px; }
.gallery-tabs button { border:1px solid var(--edge); background:var(--panel); color:var(--fg); padding:10px 18px; border-radius:50px; font-weight:800; font-size:13px; }
.gallery-tabs button.active { background:var(--lime); color:#121212; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.gallery-tile { background:var(--panel); border:1px solid var(--edge); border-radius:12px; overflow:hidden; }
.gallery-tile img { width:100%; height:180px; display:block; object-fit:cover; }
.gallery-tile .gallery-bottom { display:flex; align-items:center; gap:7px; padding:9px; }
.gallery-tile span { flex:1; min-width:0; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-tile button { padding:6px 9px; font-size:11px; font-weight:700; background:#2a2828; color:var(--fg); border:1px solid var(--edge); border-radius:8px; }
.gallery-foot { color:var(--muted); font-size:12px; margin-top:18px; }
.gallery-empty { color:var(--muted); font-size:14px; grid-column:1/-1; padding:45px 10px; text-align:center; border:1px dashed var(--edge); border-radius:14px; }
.modal { position:fixed; inset:0; z-index:70; display:grid; align-items:end; justify-items:center; }
.modal-backdrop { position:absolute; inset:0; background:#000c; }
.modal-card { position:relative; background:var(--panel); border:1px solid var(--edge); border-radius:20px 20px 0 0; padding:22px; width:min(650px,100%); max-height:78vh; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.modal-header h2 { font:700 23px var(--display); margin:0; }
.icon-button { border:0; background:none; color:var(--fg); font-size:30px; }
.modal .gallery-tile img { cursor:pointer; }
.toast { position:fixed; z-index:80; left:50%; bottom:24px; transform:translate(-50%,30px); background:var(--lime); color:#151515; padding:12px 20px; border-radius:30px; font-weight:800; font-size:12px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
.toast.visible { transform:translate(-50%,0); opacity:1; }
/* Design B deliberately changes the entire art direction: editorial paper, framed cutout cards and ink typography. */
body[data-theme="zine"] { --bg:#f3efe5; --fg:#161514; --muted:#66605a; --soft:#fff9ed; --panel:#fffaf0; --edge:#c8bfb0; --accent:#ee5f4a; --lime:#e9ef8e; }
body[data-theme="zine"] .topbar { background:#f3efe5ed; border-color:#d8d0c4; }
body[data-theme="zine"] .logo { color:#141414; }
body[data-theme="zine"] .nav button:not(.nav-create) { color:#35312c; }
body[data-theme="zine"] .hero { border:9px solid #1a1918; border-radius:0; height:clamp(480px,54vw,610px); box-shadow:15px 15px 0 #ecc98f; }
body[data-theme="zine"] .hero-photo:first-child img { filter:saturate(.8); }
body[data-theme="zine"] .hero-wordmark { color:#fff4e5; transform:rotate(-4deg); text-transform:uppercase; }
body[data-theme="zine"] .hero-wordmark .but { color:#f8d368; }
body[data-theme="zine"] .hero-cta { border:3px solid #151515; border-radius:0; box-shadow:5px 5px 0 #151515; background:#e9ef8e; }
body[data-theme="zine"] .format-card { border-radius:0; border:2px solid #151515; box-shadow:4px 4px 0 #151515; }
body[data-theme="zine"] .kind-tile.selected { background:#e9ef8e; color:#141414; }
body[data-theme="zine"] .input,body[data-theme="zine"] .form-field input,body[data-theme="zine"] textarea,body[data-theme="zine"] .caption-edit input { background:#fff; color:#131313; }
body[data-theme="zine"] .compact-kinds button { background:#e8ddca; color:#161514; }
body[data-theme="zine"] .compact-kinds button.selected { background:#e9ef8e; }
body[data-theme="zine"] .photo-tile,body[data-theme="zine"] .photo-add,body[data-theme="zine"] .gallery-add { background:#e1d6c6; }
body[data-theme="zine"] .result-actions button,body[data-theme="zine"] .gallery-tile button { color:#151515; background:#fff; }
body[data-theme="zine"] .hero-label { color:#fff; }
body[data-theme="zine"] .back-button { color:#181818; }
@media(max-width:760px) {
  .topbar { min-height:56px; padding:0 15px; }
  .logo { font-size:19px; }
  .nav { gap:11px; }
  .nav button { font-size:11px; }
  .nav .nav-create { padding:10px 11px; }
  .nav .nav-create span { margin-left:3px; }
  .home-wrap { padding:9px 12px 40px; }
  .hero { height:min(65svh,520px); min-height:400px; border-radius:13px; }
  .hero-wordmark { left:17px; top:22px; font-size:clamp(43px,11vw,70px); }
  .hero-label { font-size:9px; bottom:91px; }
  .hero-label.left { left:13px; }
  .hero-label.right { left:calc(50% + 10px); }
  .hero-cta { bottom:12px; left:13px; right:13px; padding:13px 20px; min-height:53px; font-size:16px; }
  .hero-cta span { float:right; }
  .home-footer-row { padding:15px 2px; }
  .tiny-title { font-size:9px; }
  .design-toggle { font-size:10px; padding:7px 9px; }
  .format-cards { grid-template-columns:1fr; gap:8px; }
  .format-card { min-height:74px; flex-direction:row; align-items:center; gap:12px; padding:13px 15px; }
  .format-card strong { flex:1; margin:0; font-size:19px; }
  .format-card .format-arrow { align-self:center; margin:0; }
  .creator-wrap { padding:25px 15px 85px; }
  .create-heading h1 { font-size:49px; }
  .kind-tile { padding:11px 9px; min-height:82px; }
  .kind-tile strong { font-size:12px; }
  .person-card { padding:14px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .story-modes button { font-size:10px; padding:10px 7px; }
  .result-head h2 { font-size:21px; }
  .result-card { padding:9px; }
  .result-face { border-width:2px; }
  .result-scenario { font-size:10px; }
  .caption-edit { grid-template-columns:1fr; }
  body[data-theme="zine"] .hero { height:min(65svh,515px); min-height:390px; box-shadow:5px 5px 0 #ecc98f; border-width:5px; }
}
@media(max-width:370px) { .logo { font-size:17px; }.nav { gap:6px; }.nav .nav-create { font-size:10px; }.hero-wordmark { font-size:43px; }.kind-row { gap:6px; }.kind-tile strong { font-size:11px; }.photo-tile,.photo-add,.gallery-add { width:92px; height:117px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; } }
/* v0.4 — one clear meme format, no design switch */
.hero-photo.dream{background:radial-gradient(circle at 42% 35%,#eab17d,transparent 48%),linear-gradient(155deg,#a45d66,#3a263e 80%)}
.hero-photo.twist{background:radial-gradient(circle at 55% 40%,#83a7b7,transparent 48%),linear-gradient(155deg,#487a7a,#262739 80%)}
.hero-sample-art{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-size:clamp(110px,17vw,230px);filter:drop-shadow(5px 14px 12px #0007)}
.hero-sample-label{position:absolute;bottom:13%;left:7%;right:7%;text-align:center;font-weight:800;font-size:clamp(12px,2vw,21px);text-shadow:0 2px 8px #000a}
.home-footer-row{justify-content:center}
.home-explainer{margin:0 auto;max-width:760px;text-align:center;color:var(--muted);font-size:clamp(15px,1.8vw,19px);line-height:1.6}
.home-explainer strong{color:var(--fg)}
.home-explainer em,.story-intro strong{color:var(--lime);font-weight:800;font-style:normal}
.extra-people-panel{border-top:1px solid var(--edge);margin-top:22px;padding-top:22px}
.story-intro{font-size:16px;color:var(--muted);line-height:1.5;margin:0 0 25px}
.small-label{font-weight:500;color:var(--muted);font-size:11px}
.field-note{font-size:12px;color:var(--muted);line-height:1.5}
#butText{border-color:var(--lime);font-weight:700;font-size:16px}
#butText:focus{outline:2px solid var(--lime);outline-offset:2px}
#stepHeading{font-size:clamp(37px,6.2vw,68px)}
@media(max-width:760px){.hero-sample-art{font-size:clamp(90px,25vw,160px)}.hero-sample-label{font-size:11px;bottom:15%}.home-explainer{text-align:left}.hero-wordmark{font-size:clamp(40px,10.5vw,64px)}.kind-tile strong{font-size:11px}}