:root { --font-sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif; --track-display:-.06em; --track-section:-.05em; --track-heading:-.014em; --track-label:.04em; --track-eyebrow:.11em; --w-display:800; --w-heading:800; --ink:#11120f; --paper:#efeee8; --panel:#faf9f5; --line:#d7d5cd; --muted:#6f6e67; --lime:#e1ff44; --orange:#ff5536; font-family:var(--font-sans); color:var(--ink); background:var(--paper); scroll-behavior:smooth; }
* { box-sizing:border-box; } body { margin:0;min-width:320px;background:var(--paper); } button,input,textarea { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { color:inherit;cursor:pointer; } a { color:inherit;text-decoration:none; }
.site-header { height:68px;display:flex;align-items:center;padding:0 clamp(20px,4vw,64px);color:#fff;background:var(--ink);border-bottom:1px solid #30312a; }.brand { display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.5px; }.brand-mark { display:grid;place-items:center;width:31px;height:31px;border-radius:5px;color:var(--ink);background:var(--lime);font:700 11px DM Mono;transform:rotate(-4deg); }.site-header nav { display:flex;gap:30px;margin:auto;color:#a5a59d;font-size:11px; }.site-header nav a:hover { color:#fff; }.privacy-badge { display:flex;align-items:center;gap:8px;color:#9b9b93;font:500 9px DM Mono;text-transform:uppercase; }.privacy-badge span { width:7px;height:7px;border-radius:50%;background:#48d283;box-shadow:0 0 0 5px rgba(72,210,131,.12); }
.hero { min-height:520px;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;padding:75px max(24px,calc((100vw - 1280px)/2)) 105px;color:#fff;background:radial-gradient(circle at 82% 25%,rgba(225,255,68,.11),transparent 24%),var(--ink);overflow:hidden; }.hero-copy { position:relative;z-index:2; }.eyebrow { display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--lime);font:500 9px DM Mono;letter-spacing:1.3px; }.eyebrow span { display:grid;place-items:center;width:20px;height:20px;border:1px solid #46483f;border-radius:50%; }.hero h1 { margin:0;font-size:clamp(55px,7vw,94px);line-height:.94;letter-spacing:-6px; }.hero h1 em { color:var(--lime);font-style:normal; }.hero-copy > p { max-width:620px;margin:27px 0;color:#aaa9a2;font-size:17px;line-height:1.7; }.hero-points { display:flex;flex-wrap:wrap;gap:18px;color:#85857e;font:500 9px DM Mono; }.hero-points span::first-letter { color:var(--lime); }.hero-art { position:relative;height:340px; }.mini-poster { position:absolute;width:205px;height:265px;padding:20px;box-shadow:0 25px 60px rgba(0,0,0,.35); }.mini-poster small,.mini-poster strong,.mini-poster b { position:relative;z-index:2;display:block; }.mini-poster small { font:500 6px DM Mono; }.mini-poster strong { margin-top:100px;font-size:38px;line-height:.82;letter-spacing:-3px; }.mini-poster b { position:absolute;left:20px;bottom:18px;font:700 7px DM Mono; }.mini-poster i { position:absolute;right:17px;top:45px;width:76px;height:76px;border-radius:50%; }.poster-a { left:35px;top:20px;color:#111;background:var(--lime);transform:rotate(-7deg); }.poster-a i { background:var(--orange); }.poster-b { right:15px;bottom:5px;color:#fff;background:#5942bc;transform:rotate(6deg); }.poster-b i { background:#0de3e5;box-shadow:0 0 32px #0de3e5; }.scan-line { position:absolute;z-index:3;width:170px;height:1px;right:55px;top:50%;background:var(--lime);box-shadow:0 0 15px var(--lime);transform:rotate(6deg); }
.workspace { position:relative;z-index:4;width:min(1240px,calc(100% - 36px));margin:-42px auto 90px;display:grid;grid-template-columns:minmax(360px,.78fr) minmax(500px,1.22fr);gap:16px;align-items:start; }.editor-card,.preview-card { border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 20px 60px rgba(17,18,15,.09); }.editor-card { padding:22px; }.preview-card { padding:22px;position:sticky;top:10px; }.card-header { min-height:46px;display:flex;align-items:center;gap:11px;padding-bottom:18px;border-bottom:1px solid var(--line); }.card-header > span { display:grid;place-items:center;width:27px;height:27px;flex:0 0 auto;border-radius:50%;color:#fff;background:var(--ink);font:500 9px DM Mono; }.card-header strong,.card-header small { display:block; }.card-header strong { font-size:13px; }.card-header small { margin-top:3px;color:var(--muted);font-size:9px; }.card-header > button { margin-left:auto;border:0;color:#686760;background:transparent;font:500 9px DM Mono;text-transform:uppercase; }
.input-field { display:block;margin-top:17px; }.input-field > span,.field-label { display:flex;justify-content:space-between;margin-bottom:7px;color:#55544e;font:500 9px DM Mono;text-transform:uppercase;letter-spacing:.6px; }.input-field > span b,.field-label b { color:#aaa8a0;font-weight:400; }.input-field input,.input-field textarea { width:100%;border:1px solid #ceccc4;border-radius:7px;outline:0;background:#fff;transition:.15s; }.input-field input { height:42px;padding:0 11px; }.input-field textarea { padding:10px 11px;resize:vertical;line-height:1.45; }.input-field input:focus,.input-field textarea:focus { border-color:#77766e;box-shadow:0 0 0 3px rgba(17,18,15,.05); }.input-field > small { display:block;margin-top:6px;color:#686760;font-size:8px; }.input-field > small.error { color:#b63a25; }.url-input { position:relative; }.url-input i { position:absolute;left:11px;top:11px;color:#686760;font-style:normal;font-size:12px; }.url-input input { padding-left:31px;font-family:DM Mono;font-size:10px; }
.field-label { margin-top:21px; }.template-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:6px; }.template-option { min-width:0;padding:5px;border:1px solid var(--line);border-radius:7px;background:transparent; }.template-option > strong { display:block;padding:6px 0 2px;color:#76756f;font-size:8px; }.template-option.active { border-color:var(--ink);box-shadow:0 0 0 1px var(--ink); }.template-option.active > strong { color:var(--ink); }.thumb { position:relative;display:block;height:62px;overflow:hidden;border-radius:4px; }.thumb b { position:absolute;left:6px;bottom:5px;font-size:16px;line-height:.8; }.thumb span { position:absolute;right:6px;top:7px;width:19px;height:19px;border-radius:50%; }.thumb.signal { color:#111;background:#e1ff44; }.thumb.signal span { background:#ff5536; }.thumb.night { color:#fff;background:linear-gradient(135deg,#0b0d18,#713ee0); }.thumb.night span { background:#2ee7ed;box-shadow:0 0 10px #2ee7ed; }.thumb.editorial { color:#371a1a;background:#ede4d4; }.thumb.editorial b { font-family:Newsreader;font-weight:700; }.thumb.editorial span { height:29px;border-radius:50%;background:#a5203d; }.thumb.market { color:#152a65;background:#ff6c42; }.thumb.market { border:3px solid #152a65; }.thumb.market span { background:#f7e85e; }.thumb.mono { color:#111;background:repeating-linear-gradient(90deg,#f4f3ed 0,#f4f3ed 12px,#d7d6d0 13px); }.thumb.mono span { border-radius:0;background:#111; }
.format-label { margin-top:20px; }.format-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }.format-grid button { display:flex;align-items:center;justify-content:center;gap:7px;min-height:45px;border:1px solid var(--line);border-radius:7px;background:transparent; }.format-grid button > i { color:#93928a;font-style:normal;font-size:18px; }.format-grid button span,.format-grid button small { display:block;text-align:left; }.format-grid button span { color:#5d5c56;font-size:9px;font-weight:700; }.format-grid button small { margin-top:1px;color:#a3a198;font:400 7px DM Mono; }.format-grid button.active { color:#fff;border-color:var(--ink);background:var(--ink); }.format-grid button.active span { color:#fff; }.format-grid button.active i { color:var(--lime); }.download-main { width:100%;height:50px;display:flex;align-items:center;justify-content:center;gap:15px;margin-top:18px;border:0;border-radius:7px;color:var(--ink);background:var(--lime);font-weight:800; }.download-main b { font-size:18px; }.download-main:hover { filter:brightness(.96); }.local-message { margin:10px 0 0;color:#98978f;text-align:center;font:400 8px DM Mono; }.local-message span { color:#40c878; }
.qr-status { display:flex;align-items:center;gap:6px;margin-left:auto;color:#2f704f;font:500 8px DM Mono;text-transform:uppercase; }.qr-status i { width:6px;height:6px;border-radius:50%;background:#45cc7c; }.qr-status.error { color:#b63a25; }.qr-status.error i { background:#e6553b; }.preview-shell { height:690px;display:grid;place-items:center;margin-top:18px;padding:22px;overflow:hidden;background-color:#e5e3dc;background-image:linear-gradient(45deg,#d8d6cf 25%,transparent 25%),linear-gradient(-45deg,#d8d6cf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8d6cf 75%),linear-gradient(-45deg,transparent 75%,#d8d6cf 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0; }.poster { --poster-bg:#e8ff43;--poster-fg:#11120f;--poster-accent:#ff4b2f;position:relative;height:100%;aspect-ratio:4/5;overflow:hidden;padding:7%;color:var(--poster-fg);background:var(--poster-bg);box-shadow:0 25px 55px rgba(17,18,15,.25);transition:.2s; }.format-1-1 { aspect-ratio:1/1; }.format-9-16 { aspect-ratio:9/16; }.format-a4 { aspect-ratio:1/1.414; }.poster-grid-lines { position:absolute;inset:0;opacity:.18;background-image:linear-gradient(to right,transparent 24.7%,currentColor 25%,transparent 25.3%),linear-gradient(to bottom,transparent 49.7%,currentColor 50%,transparent 50.3%);background-size:25% 100%,100% 20%; }.poster-top { position:relative;z-index:3;display:flex;justify-content:space-between;font:500 7px DM Mono;letter-spacing:.7px; }.poster-shape { position:absolute;z-index:1;right:-5%;top:10%;width:51%;aspect-ratio:1;border-radius:50%;background:var(--poster-accent); }.poster-shape i { position:absolute;width:130%;height:43%;left:-18%;top:29%;border:1px solid currentColor;border-radius:50%;transform:rotate(-20deg); }.poster-main { position:absolute;z-index:3;left:7%;right:7%;bottom:29%; }.poster-main .poster-title { max-width:98%;margin:0;font-size:clamp(31px,4.8vw,61px);line-height:.84;letter-spacing:-4px;white-space:pre-line; }.poster-main p { max-width:66%;margin:17px 0 0;white-space:pre-line;font-size:9px;font-weight:600;line-height:1.5; }.poster-bottom { position:absolute;z-index:3;left:7%;right:7%;bottom:6%;display:flex;align-items:center;gap:13px;padding-top:10px;border-top:1px solid currentColor; }.qr-card { flex:0 0 auto;padding:6px;background:#fff; }.qr-card #qrPreview { width:66px;height:66px;overflow:hidden; }.qr-card canvas,.qr-card img { display:block!important;width:66px!important;height:66px!important; }.qr-copy strong,.qr-copy span,.qr-copy small { display:block; }.qr-copy strong { font-size:9px; }.qr-copy span { max-width:130px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 7px DM Mono;opacity:.68; }.qr-copy small { margin-top:10px;font:500 6px DM Mono;opacity:.55; }
.poster-night { --poster-bg:#0b0d18;--poster-fg:#f5f2e9;--poster-accent:#895cff;background:radial-gradient(circle at 75% 24%,#6840d0,transparent 31%),var(--poster-bg); }.poster-night .poster-shape { background:#23e2e7;filter:blur(8px);mix-blend-mode:screen; }.poster-night .poster-grid-lines { opacity:.12;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:22px 22px; }.poster-night .poster-main .poster-title { text-shadow:3px 3px 0 #8657ff; }.poster-editorial { --poster-bg:#efe8d9;--poster-fg:#2b1918;--poster-accent:#a5203d; }.poster-editorial .poster-shape { right:9%;top:10%;width:34%;height:42%;border-radius:48% 48% 3px 3px; }.poster-editorial .poster-main .poster-title { font-family:Newsreader,Georgia,serif;font-weight:700;line-height:.88;letter-spacing:-2px;text-transform:none; }.poster-editorial .poster-grid-lines { opacity:.06; }.poster-market { --poster-bg:#ff6c42;--poster-fg:#152a65;--poster-accent:#f7e85e;box-shadow:inset 0 0 0 5px var(--poster-fg),0 25px 55px rgba(17,18,15,.25); }.poster-market .poster-shape { right:5%;top:9%;width:42%; }.poster-market .poster-main .poster-title { font-family:Arial Black,Manrope,sans-serif;transform:scaleX(.92);transform-origin:left; }.poster-market .poster-grid-lines { display:none; }.poster-mono { --poster-bg:#f5f4ef;--poster-fg:#11110f;--poster-accent:#11110f; }.poster-mono .poster-grid-lines { opacity:.11;background-size:16.66% 100%,100% 16.66%; }.poster-mono .poster-shape { right:8%;top:9%;width:35%;border-radius:0; }.poster-mono .poster-main .poster-title { font-family:DM Mono,monospace;font-weight:500;letter-spacing:-4px; }.poster-mono .poster-main p { font-family:DM Mono;font-weight:400; }.preview-footer { display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#6f6e67;font:400 8px DM Mono; }.preview-footer span i { display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#43ca79; }.preview-footer button { border:0;color:#55544e;background:transparent;font:500 8px DM Mono;text-transform:uppercase; }
.trust-strip { display:flex;justify-content:space-around;gap:20px;padding:24px clamp(20px,5vw,80px);overflow:hidden;color:#8c8b83;background:#1a1b17;font:500 8px DM Mono;letter-spacing:1.2px; }.template-section { padding:100px max(22px,calc((100vw - 1240px)/2)); }.section-heading { max-width:680px; }.section-heading > span,.faq-section > div:first-child > span { color:#686760;font:500 8px DM Mono;letter-spacing:1.3px; }.section-heading h2,.faq-section h2 { margin:16px 0;font-size:clamp(40px,5vw,65px);line-height:1;letter-spacing:-3.5px; }.section-heading p { max-width:600px;color:#686760;line-height:1.75; }.template-showcase { display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:50px;overflow-x:auto;padding-bottom:15px; }.showcase { position:relative;min-width:190px;aspect-ratio:3/4;padding:17px;overflow:hidden;box-shadow:0 13px 30px rgba(17,18,15,.12); }.showcase small,.showcase strong,.showcase span { position:relative;z-index:2;display:block; }.showcase small { font:500 6px DM Mono; }.showcase strong { position:absolute;left:17px;bottom:28%;font-size:29px;line-height:.84;letter-spacing:-2px; }.showcase span { position:absolute;left:17px;bottom:15px;font:600 6px DM Mono; }.showcase i { position:absolute;right:10%;top:12%;width:37%;aspect-ratio:1;border-radius:50%; }.signal-show { background:#e1ff44; }.signal-show i { background:#ff5536; }.night-show { color:#fff;background:linear-gradient(145deg,#0b0d18,#5937a5); }.night-show i { background:#21e1e7;box-shadow:0 0 20px #21e1e7; }.editorial-show { color:#321919;background:#eee5d5; }.editorial-show strong { font-family:Newsreader;font-size:35px;font-weight:700; }.editorial-show i { height:42%;border-radius:50% 50% 3px 3px;background:#a5203d; }.market-show { color:#152a65;background:#ff6c42;box-shadow:inset 0 0 0 4px #152a65; }.market-show i { background:#f6e85c; }.mono-show { background:#f5f4ef;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 32px,#deddd7 33px); }.mono-show strong { font-family:DM Mono;font-weight:500; }.mono-show i { border-radius:0;background:#111; }
.how-section { padding:100px max(22px,calc((100vw - 1240px)/2));color:#fff;background:var(--ink); }.how-section .section-heading > span { color:var(--lime); }.steps { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:55px;background:#383933; }.steps article { padding:34px;background:var(--ink); }.steps b { color:var(--lime);font:500 9px DM Mono; }.steps h3 { margin:38px 0 12px;font-size:19px; }.steps p { margin:0;color:#92928b;font-size:12px;line-height:1.7; }
.faq-section { padding:100px max(22px,calc((100vw - 1100px)/2));display:grid;grid-template-columns:.8fr 1.2fr;gap:90px; }.faq-list { border-top:1px solid var(--line); }.faq-list details { border-bottom:1px solid var(--line); }.faq-list summary { padding:22px 5px;cursor:pointer;font-weight:700;font-size:13px;list-style:none; }.faq-list summary::after { content:"＋";float:right;color:#85847c; }.faq-list details[open] summary::after { content:"−"; }.faq-list p { margin:0;padding:0 30px 22px 5px;color:#686760;font-size:12px;line-height:1.7; }
footer { min-height:100px;display:flex;align-items:center;gap:25px;padding:25px clamp(20px,4vw,64px);color:#888880;background:#0b0c0a;font-size:9px; }footer .brand { color:#fff;font-size:14px; }footer .brand-mark { width:26px;height:26px;font-size:9px; }footer p { margin-right:auto; }.toast { position:fixed;z-index:50;left:50%;bottom:24px;padding:12px 17px;border-radius:7px;color:#111;background:var(--lime);box-shadow:0 16px 40px rgba(0,0,0,.25);font:600 9px DM Mono;transform:translate(-50%,25px);opacity:0;pointer-events:none;transition:.22s; }.toast.visible { opacity:1;transform:translate(-50%,0); }
@media (max-width:980px) { .hero { grid-template-columns:1fr; }.hero-copy { text-align:center; }.hero-copy > p { margin-left:auto;margin-right:auto; }.eyebrow,.hero-points { justify-content:center; }.hero-art { display:none; }.workspace { max-width:760px;grid-template-columns:1fr; }.preview-card { position:relative;top:auto; }.template-showcase { grid-template-columns:repeat(5,190px); }.faq-section { grid-template-columns:1fr;gap:40px; } }
@media (max-width:650px) { .site-header { height:60px;padding:0 16px; }.site-header nav,.privacy-badge { display:none; }.hero { min-height:470px;padding:63px 20px 80px; }.hero-copy { text-align:left; }.eyebrow,.hero-points { justify-content:flex-start; }.hero h1 { font-size:55px;letter-spacing:-4px; }.hero-copy > p { font-size:15px; }.hero-points { gap:10px; }.workspace { width:calc(100% - 18px);margin-top:-28px; }.editor-card,.preview-card { padding:15px; }.template-grid { grid-template-columns:repeat(5,70px);overflow-x:auto;padding:1px 1px 7px; }.format-grid { grid-template-columns:repeat(2,1fr); }.preview-shell { height:510px;padding:13px; }.poster-main .poster-title { font-size:38px; }.qr-card #qrPreview,.qr-card canvas,.qr-card img { width:53px!important;height:53px!important; }.qr-copy small { display:none; }.trust-strip { justify-content:flex-start;white-space:nowrap;overflow-x:auto; }.template-section,.how-section,.faq-section { padding:70px 20px; }.template-showcase { margin-top:35px; }.steps { grid-template-columns:1fr; }.steps article { padding:25px 5px; }.steps h3 { margin-top:17px; }footer { align-items:flex-start;flex-direction:column;gap:10px; }footer p { margin:0; } }

/* Distinct information architecture for each poster template */
.template-option > small { display:block;min-height:15px;padding:0 1px 3px;color:#6f6e67;font:400 6px/1.2 DM Mono; }
.template-option.active > small { color:#696860; }

.poster-night .poster-top { justify-content:flex-start;gap:14px; }
.poster-night .poster-top b { opacity:.5; }
.poster-night .poster-main { top:16%;bottom:auto;left:7%;right:7%; }
.poster-night .poster-main .poster-title { max-width:88%;font-size:clamp(31px,4.6vw,59px); }
.poster-night .poster-main p { position:absolute;top:calc(100% + 24px);left:0;max-width:48%; }
.poster-night .poster-shape { right:-4%;top:40%;width:38%; }
.poster-night .poster-bottom { left:auto;right:7%;bottom:6%;width:48%;padding-top:0;border-top:0;flex-direction:row-reverse;text-align:right; }
.poster-night .qr-copy { display:flex;flex-direction:column;align-items:flex-end; }

.poster-editorial .poster-top { padding-bottom:8px;border-bottom:1px solid currentColor; }
.poster-editorial .poster-main { top:18%;bottom:auto;left:39%;right:6%; }
.poster-editorial .poster-main .poster-title { max-width:100%;font-size:clamp(30px,4.3vw,55px); }
.poster-editorial .poster-main p { max-width:100%;margin-top:22px;font-family:Manrope,sans-serif; }
.poster-editorial .poster-shape { top:auto;right:-12%;bottom:-6%;width:62%;height:44%;border-radius:50% 50% 0 0; }
.poster-editorial .poster-bottom { left:7%;right:auto;bottom:7%;width:25%;padding-top:0;border-top:0;display:block; }
.poster-editorial .qr-card { display:inline-block; }
.poster-editorial .qr-copy { margin-top:10px; }
.poster-editorial .qr-copy small { margin-top:5px; }

.poster-market .poster-top { padding:6px 9px;color:var(--poster-bg);background:var(--poster-fg); }
.poster-market .poster-main { top:15%;bottom:auto;left:7%;right:7%; }
.poster-market .poster-main .poster-title { max-width:78%;font-size:clamp(34px,5vw,64px);line-height:.78; }
.poster-market .poster-main p { max-width:55%;margin-top:24px;padding:7px 9px;color:var(--poster-bg);background:var(--poster-fg); }
.poster-market .poster-shape { top:auto;right:7%;bottom:28%;width:37%; }
.poster-market .poster-bottom { left:7%;right:7%;bottom:7%;padding-top:0;border-top:0;flex-direction:row-reverse;justify-content:space-between; }
.poster-market .qr-copy { margin-right:auto; }

.poster-mono .poster-top { width:53%;padding-bottom:8px;border-bottom:1px solid currentColor; }
.poster-mono .poster-main { top:35%;bottom:auto;left:7%;right:39%; }
.poster-mono .poster-main .poster-title { max-width:100%;font-size:clamp(28px,4vw,51px);line-height:.92; }
.poster-mono .poster-main p { max-width:100%;font-size:7px;font-weight:400; }
.poster-mono .poster-shape { top:auto;right:7%;bottom:7%;width:25%; }
.poster-mono .poster-bottom { top:9%;right:7%;bottom:auto;left:auto;width:27%;padding:0 0 9px;border-top:0;border-bottom:1px solid currentColor;display:block; }
.poster-mono .qr-card { display:inline-block;padding:5px; }
.poster-mono .qr-copy { margin-top:8px; }
.poster-mono .qr-copy small { display:none; }

@media (max-width:650px) {
  .template-option > small { display:none; }
  .poster-night .poster-main .poster-title,.poster-market .poster-main .poster-title { font-size:36px; }
  .poster-editorial .poster-main .poster-title { font-size:34px; }
  .poster-mono .poster-main .poster-title { font-size:31px; }
}

/* Scenario-aware fields and local background images */
.scenario-label { margin-top:20px; }
.scenario-hint { margin:9px 2px 2px;color:#686760;font-size:9px;line-height:1.45; }
.input-field > span > i { font-style:normal; }
.background-field { margin-top:18px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#f5f4ef; }
.background-controls { display:flex;gap:7px; }
.upload-button { flex:1; }
.upload-button input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.upload-button span,.background-controls button { min-height:39px;display:flex;align-items:center;justify-content:center;border:1px solid #c9c7bf;border-radius:6px;background:#fff;font-size:9px;font-weight:700; }
.upload-button span { padding:0 13px;cursor:pointer; }
.background-controls button { width:74px;color:#6f6e67; }
.background-controls button:disabled { opacity:.42;cursor:not-allowed; }
.strength-row { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px; }
.strength-row > span { max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#686760;font:400 8px DM Mono; }
.strength-row label { display:flex;align-items:center;gap:7px;color:#6f6e67;font:400 7px DM Mono;text-transform:uppercase; }
.strength-row input { width:75px;accent-color:var(--ink); }
.poster-photo { position:absolute;z-index:0;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;pointer-events:none; }
.poster.has-photo .poster-grid-lines { z-index:1; }
.poster.has-photo .poster-shape { z-index:2; }
.poster-signal .poster-photo { mix-blend-mode:multiply;filter:grayscale(.25) contrast(1.06); }
.poster-night .poster-photo { mix-blend-mode:screen;filter:grayscale(.2) contrast(1.12) brightness(.68); }
.poster-editorial .poster-photo { mix-blend-mode:multiply;filter:grayscale(.55) contrast(.95); }
.poster-market .poster-photo { mix-blend-mode:multiply;filter:saturate(.55) contrast(1.08); }
.poster-mono .poster-photo { mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1); }

@media (max-width:650px) {
  .scenario-hint { min-height:27px; }
  .background-field { padding:10px; }
}


/* Independent scenario, layout, and background controls */
.scenario-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:6px; }
.scenario-grid button { min-width:0;padding:9px 4px;border:1px solid var(--line);border-radius:7px;background:#fff; }
.scenario-grid span,.scenario-grid small { display:block; }
.scenario-grid span { font-size:8px;font-weight:800; }
.scenario-grid small { margin-top:3px;color:#686760;font:400 6px DM Mono; }
.scenario-grid button.active { color:#fff;border-color:var(--ink);background:var(--ink);box-shadow:0 0 0 1px var(--ink); }
.scenario-grid button.active small { color:var(--lime); }
.background-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px; }
.background-option { min-width:0;padding:4px;border:1px solid var(--line);border-radius:7px;background:#fff; }
.background-option i { display:block;height:54px;border-radius:4px;background-position:center;background-size:cover; }
.background-option span { display:block;padding:5px 0 2px;color:#77766f;font-size:7px;font-weight:700; }
.background-option.active { border-color:var(--ink);box-shadow:0 0 0 1px var(--ink); }
.background-option.active span { color:var(--ink); }
.no-background i { position:relative;background-color:#efeee8;background-image:linear-gradient(45deg,#d6d4cc 25%,transparent 25%),linear-gradient(-45deg,#d6d4cc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6d4cc 75%),linear-gradient(-45deg,transparent 75%,#d6d4cc 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0; }
.no-background i::after { content:'×';position:absolute;inset:0;display:grid;place-items:center;color:#7d7b73;font:500 18px DM Mono; }
@media (max-width:650px) {
  .scenario-grid,.background-grid { display:flex;overflow-x:auto;padding:1px 1px 7px; }
  .scenario-grid button { min-width:70px; }
  .background-option { min-width:70px; }
}


/* Multilingual poster typography (the language switcher lives in the site header) */
.layout-recommendation { margin:8px 2px 0;color:#686760;font:400 8px DM Mono; }
.layout-recommendation b { color:var(--ink); }
.template-grid { grid-template-columns:repeat(3,1fr); }
.template-option { position:relative; }
.template-option.recommended::after { content:'★';position:absolute;right:7px;top:7px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;color:var(--ink);background:var(--lime);font-size:7px; }
.thumb.focus { color:#111;background:#f5efe3; }
.thumb.focus b { left:50%;bottom:12px;transform:translateX(-50%);font-size:28px; }
.thumb.focus span { right:50%;top:50%;width:34px;height:34px;border:4px solid #ff5137;background:transparent;transform:translate(50%,-50%); }
.thumb.kinetic { color:#f7f2e7;background:#2167f3; }
.thumb.kinetic b { left:50%;bottom:20px;transform:translateX(-50%);font-size:22px;white-space:nowrap; }
.thumb.kinetic span { left:0;right:0;top:auto;bottom:0;width:auto;height:15px;border-radius:0;background:#ffed3d; }
.thumb.ticket { color:#172118;background:#dfff63; }
.thumb.ticket::after { content:'';position:absolute;left:9px;right:9px;top:35px;border-top:1px dashed #172118; }
.thumb.ticket span { top:auto;right:50%;bottom:4px;width:22px;height:18px;border-radius:2px;color:#111;background:#fff;transform:translateX(50%);font:500 10px DM Mono; }
.thumb.corner { color:#161320;background:linear-gradient(135deg,#d8d0ff,#ff775f); }
.thumb.corner span { top:auto;right:5px;bottom:5px;width:24px;height:24px;border-radius:3px;color:#111;background:#fff;font:500 10px DM Mono; }

/* Creative QR-first layouts derived from common poster composition patterns */
.poster-focus { --poster-bg:#f5efe3;--poster-fg:#11110f;--poster-accent:#ff5137; }
.poster-focus .poster-shape { top:34%;left:50%;right:auto;width:57%;border:12px solid var(--poster-accent);background:transparent;transform:translateX(-50%); }
.poster-focus .poster-shape i { display:none; }
.poster-focus .poster-main { top:11%;bottom:auto;text-align:center; }
.poster-focus .poster-main .poster-title { max-width:100%;font-size:clamp(28px,4.1vw,51px);line-height:.9; }
.poster-focus .poster-main p { max-width:70%;margin:56% auto 0; }
.poster-focus .poster-bottom { top:38%;bottom:auto;left:50%;right:auto;width:42%;padding:0;border:0;display:block;text-align:center;transform:translateX(-50%); }
.poster-focus .qr-card { display:inline-block;padding:9px; }
.poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:98px!important;height:98px!important; }
.poster-focus .qr-copy { margin-top:9px; }
.poster-focus .qr-copy span { margin-left:auto;margin-right:auto; }
.poster-focus .qr-copy small { display:none; }

.poster-kinetic { --poster-bg:#2167f3;--poster-fg:#f7f2e7;--poster-accent:#ffed3d; }
.poster-kinetic .poster-grid-lines { display:none; }
.poster-kinetic .poster-shape { top:38%;left:0;right:0;width:100%;height:24%;border-radius:0;background:var(--poster-accent); }
.poster-kinetic .poster-shape i { display:none; }
.poster-kinetic .poster-main { top:10%;bottom:auto;text-align:center; }
.poster-kinetic .poster-main .poster-title { max-width:100%;font-size:clamp(34px,5vw,65px);line-height:.75;text-transform:uppercase; }
.poster-kinetic .poster-main p { max-width:78%;margin:57% auto 0; }
.poster-kinetic .poster-bottom { top:42%;bottom:auto;left:50%;right:auto;width:40%;padding:0;border:0;display:block;text-align:center;transform:translateX(-50%);color:#111; }
.poster-kinetic .qr-card { display:inline-block;transform:rotate(-2deg);box-shadow:5px 5px 0 #111; }
.poster-kinetic .qr-card #qrPreview,.poster-kinetic .qr-card canvas,.poster-kinetic .qr-card img { width:88px!important;height:88px!important; }
.poster-kinetic .qr-copy { margin-top:8px; }
.poster-kinetic .qr-copy span { margin-left:auto;margin-right:auto; }
.poster-kinetic .qr-copy small { display:none; }

.poster-ticket { --poster-bg:#dfff63;--poster-fg:#172118;--poster-accent:#ff684d; }
.poster-ticket .poster-grid-lines { display:none; }
.poster-ticket .poster-shape { left:7%;right:auto;top:7%;width:9%;height:43%;border-radius:0;background:var(--poster-accent); }
.poster-ticket .poster-shape i { display:none; }
.poster-ticket .poster-main { top:12%;bottom:auto;left:22%;right:7%; }
.poster-ticket .poster-main .poster-title { font-size:clamp(31px,4.5vw,58px); }
.poster-ticket .poster-main p { max-width:88%;margin-top:28px; }
.poster-ticket .poster-bottom { left:18%;right:18%;bottom:6%;padding:12px;border:1px solid currentColor;border-radius:5px;display:block;text-align:center;background:rgba(255,255,255,.5); }
.poster-ticket .poster-bottom::before { content:'';position:absolute;left:-18%;right:-18%;top:-17px;border-top:1px dashed currentColor; }
.poster-ticket .qr-card { display:inline-block; }
.poster-ticket .qr-copy { margin-top:7px; }
.poster-ticket .qr-copy span { margin-left:auto;margin-right:auto; }
.poster-ticket .qr-copy small { display:none; }

.poster-corner { --poster-bg:#d8d0ff;--poster-fg:#161320;--poster-accent:#ff775f;background:linear-gradient(145deg,var(--poster-bg),var(--poster-accent)); }
.poster-corner .poster-grid-lines { display:none; }
.poster-corner .poster-shape { display:none; }
.poster-corner .poster-main { top:14%;bottom:auto; }
.poster-corner .poster-main .poster-title { max-width:82%;font-size:clamp(33px,5vw,64px); }
.poster-corner .poster-main p { max-width:50%;margin-top:25px; }
.poster-corner .poster-bottom { left:auto;right:6%;bottom:5%;width:36%;padding:10px;border:0;border-radius:7px;display:block;color:#111;background:rgba(255,255,255,.88);backdrop-filter:blur(8px); }
.poster-corner .qr-card { display:inline-block; }
.poster-corner .qr-copy { margin-top:7px; }
.poster-corner .qr-copy small { display:none; }
.poster-corner .poster-photo { mix-blend-mode:multiply;filter:saturate(.75) contrast(1.05); }

@media (max-width:650px) {
  .template-grid { display:flex;grid-template-columns:none; }
  .template-option { min-width:92px; }
  .poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:76px!important;height:76px!important; }
  .poster-kinetic .qr-card #qrPreview,.poster-kinetic .qr-card canvas,.poster-kinetic .qr-card img { width:70px!important;height:70px!important; }
}

/* Site language and bundled scenario presets */
html[data-language="zh"] body { font-family:"Noto Sans SC",Manrope,sans-serif; }
html[data-language="ja"] body { font-family:"Noto Sans JP",Manrope,sans-serif; }
.header-actions { display:flex;align-items:center;gap:18px; }
.privacy-badge b { font:inherit; }
.site-language { position:relative;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #3d3e37;border-radius:6px;color:#c5c5bd;background:#20211d; }
.site-language > span { color:var(--lime);font-size:11px; }
.site-language select { min-width:92px;border:0;outline:0;color:#fff;background:transparent;font:600 9px Manrope,sans-serif;cursor:pointer; }
.site-language option { color:#111;background:#fff; }
.scenario-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.scenario-grid .scenario-option { padding:4px;text-align:left;background:#fff;overflow:hidden; }
.scenario-option > i { display:block;height:68px;border-radius:4px;background-position:center;background-size:cover;filter:saturate(.8); }
.scenario-option > span { padding:7px 3px 0;font-size:8px;font-weight:800; }
.scenario-option > small { min-height:20px;padding:3px;color:#686760;font:400 6px/1.25 DM Mono; }
.scenario-option.active { color:var(--ink);background:#fff; }
.scenario-option.active > i { box-shadow:inset 0 0 0 2px var(--lime);filter:saturate(1.05); }
.scenario-option.active > small { color:#626159; }
.format-grid button span > b { color:inherit;font-size:9px; }
.strength-row label > b { font:inherit;font-weight:400; }
.local-message > b,.preview-footer b { font:inherit; }
@media (max-width:650px) {
  .site-header { gap:12px; }
  .site-header .brand { margin-right:auto; }
  .header-actions { gap:0; }
  .site-language select { min-width:82px; }
  .scenario-grid { display:flex;overflow-x:auto;padding:1px 1px 7px; }
  .scenario-option { min-width:112px!important; }
  .scenario-option > i { height:72px; }
}

/* Layout controls are neutral; scenario theme and background stay independent */
.theme-signal { --poster-bg:#e8ff43;--poster-fg:#11120f;--poster-accent:#ff4b2f;background:var(--poster-bg); }
.theme-night { --poster-bg:#0b0d18;--poster-fg:#f6f2e8;--poster-accent:#895cff;background:radial-gradient(circle at 75% 24%,#33206d,transparent 34%),var(--poster-bg); }
.theme-editorial { --poster-bg:#efe8d9;--poster-fg:#2b1918;--poster-accent:#a5203d;background:var(--poster-bg); }
.theme-market { --poster-bg:#ff6c42;--poster-fg:#152a65;--poster-accent:#f7e85e;background:var(--poster-bg); }
.theme-mono { --poster-bg:#f5f4ef;--poster-fg:#11110f;--poster-accent:#11110f;background:var(--poster-bg); }
.theme-signal .poster-photo { mix-blend-mode:multiply;filter:grayscale(.25) contrast(1.06); }
.theme-night .poster-photo { mix-blend-mode:screen;filter:grayscale(.2) contrast(1.12) brightness(.68); }
.theme-editorial .poster-photo { mix-blend-mode:multiply;filter:grayscale(.55) contrast(.95); }
.theme-market .poster-photo { mix-blend-mode:multiply;filter:saturate(.55) contrast(1.08); }
.theme-mono .poster-photo { mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1); }
#templateGrid .thumb { color:#222!important;border:1px solid #d2d0c8!important;background:#f1f0eb!important;box-shadow:none!important; }
#templateGrid .thumb::before { content:'';position:absolute;left:7px;top:9px;width:34px;height:4px;border-radius:2px;background:#282824;box-shadow:0 8px 0 #aaa89f,0 16px 0 #cfcdc5; }
#templateGrid .thumb b { z-index:2;left:7px;bottom:5px;color:#4f4e48;font:600 7px DM Mono!important;transform:none!important; }
#templateGrid .thumb span { z-index:3;width:17px!important;height:17px!important;border:3px solid #fff!important;border-radius:1px!important;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 50%/5px 5px!important;box-shadow:0 0 0 1px #111!important;transform:none!important;filter:none!important; }
#templateGrid .thumb.signal span { left:7px!important;right:auto!important;top:auto!important;bottom:7px!important; }
#templateGrid .thumb.night span { left:auto!important;right:7px!important;top:auto!important;bottom:7px!important; }
#templateGrid .thumb.editorial span { left:7px!important;right:auto!important;top:auto!important;bottom:7px!important; }
#templateGrid .thumb.market span { left:auto!important;right:7px!important;top:auto!important;bottom:7px!important; }
#templateGrid .thumb.mono span { left:auto!important;right:7px!important;top:7px!important;bottom:auto!important; }
#templateGrid .thumb.focus span,#templateGrid .thumb.kinetic span { left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important; }
#templateGrid .thumb.ticket span { left:50%!important;right:auto!important;top:auto!important;bottom:6px!important;transform:translateX(-50%)!important; }
#templateGrid .thumb.corner span { left:auto!important;right:6px!important;top:auto!important;bottom:6px!important; }

/* Three independent editor parts: copy, layout, background — now collapsible steps */
.input-field.compact-first { margin-top:0; }
#templateGrid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.poster.theme-signal,.poster.theme-night,.poster.theme-editorial,.poster.theme-market,.poster.theme-mono { background:#f3f1eb; }
.poster .poster-photo { mix-blend-mode:normal!important;filter:none!important; }
.poster-overlay { position:absolute;z-index:1;inset:0;pointer-events:none; }
.poster.has-photo .poster-grid-lines { z-index:2; }
.poster.has-photo .poster-shape { z-index:2; }
.overlay-panel { display:grid;grid-template-columns:1.15fr .65fr 1.2fr;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line); }
.overlay-panel label { min-height:38px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid #d2d0c8;border-radius:6px;color:#77766f;background:#fff;font:500 7px DM Mono;text-transform:uppercase; }
.overlay-toggle input { width:14px;height:14px;margin:0;accent-color:var(--ink); }
.color-control input { width:25px;height:24px;margin-left:auto;padding:0;border:0;background:transparent;cursor:pointer; }
.overlay-strength input { width:68px;margin-left:auto;accent-color:var(--ink); }
.overlay-panel input:disabled { opacity:.35;cursor:not-allowed; }

/* Layout controls describe structure only; visual styling belongs to Background. */
.poster-grid-lines,.poster-shape { display:none!important; }
#templateGrid .thumb { background:#f4f3ef!important; }
#templateGrid .thumb b { width:28px;height:3px;overflow:hidden;color:transparent!important;border-radius:2px;background:#2d2d29;box-shadow:0 7px 0 #88867f,0 14px 0 #c4c2ba; }
#templateGrid .thumb span { border:2px solid #fff!important;background:repeating-conic-gradient(#222 0 25%,#fff 0 50%) 50%/4px 4px!important; }
@media (max-width:650px) {
  #templateGrid { display:flex; }
  .overlay-panel { grid-template-columns:1fr 1fr; }
  .overlay-strength { grid-column:1/-1; }
}

/* Readability and interaction pass */
.site-header nav { font-size:13px; }
.privacy-badge { font-size:11px; }
.site-language { min-height:40px;padding:7px 10px; }
.site-language select { min-width:108px;font-size:12px; }
.eyebrow,.hero-points { font-size:11px; }

.workspace { grid-template-columns:minmax(430px,.9fr) minmax(520px,1.1fr);gap:20px; }
.editor-card,.preview-card { border-radius:16px; }
.editor-card,.preview-card { padding:26px; }
.card-header { min-height:54px;padding-bottom:20px; }
.card-header > span { width:32px;height:32px;font-size:11px; }
.card-header strong { font-size:16px; }
.card-header small { margin-top:4px;font-size:12px; }
.card-header > button { min-width:56px;min-height:40px;padding:0 10px;border-radius:6px;font-size:11px; }
.card-header > button:hover { color:var(--ink);background:#efeee8; }

.input-field { margin-top:20px; }
.input-field > span,.field-label { align-items:center;gap:14px;margin-bottom:10px;font-size:11px;line-height:1.35;letter-spacing:.45px; }
.input-field > span b,.field-label b { font-size:10px;text-align:right;text-transform:none; }
.input-field input,.input-field textarea { border-radius:9px;font-size:14px; }
.input-field input { height:48px;padding:0 14px; }
.input-field textarea { min-height:72px;padding:12px 14px; }
.input-field > small { margin-top:7px;font-size:11px;line-height:1.45; }
.url-input i { left:14px;top:14px;font-size:14px; }
.url-input input { padding-left:37px;font-size:13px; }

.scenario-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
.scenario-grid .scenario-option { min-height:128px;padding:6px;border-radius:9px; }
.scenario-option > i { height:78px;border-radius:6px; }
.scenario-option > span { padding:8px 5px 0;font-size:11px;line-height:1.25; }
.scenario-option > small { min-height:22px;padding:4px 5px;font-size:9px;line-height:1.35; }
.scenario-hint,.layout-recommendation { margin-top:10px;font-size:11px;line-height:1.5; }

#templateGrid { grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
.template-option { min-height:112px;padding:7px;border-radius:9px; }
.thumb { height:70px;border-radius:6px; }
.template-option > strong { padding:8px 2px 3px;font-size:11px; }
.template-option > small { min-height:18px;padding:0 2px 4px;font-size:9px;line-height:1.3; }

.background-field { margin-top:22px;padding:16px;border-radius:10px; }
.background-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:13px; }
.background-option { padding:6px;border-radius:8px; }
.background-option i { height:68px;border-radius:5px; }
.background-option span { padding:7px 2px 3px;font-size:10px; }
.upload-button span,.background-controls button { min-height:46px;font-size:11px; }
.background-controls button { width:88px; }
.strength-row { margin-top:13px; }
.strength-row > span { font-size:10px; }
.strength-row label { font-size:10px; }
.strength-row input { width:104px; }
.overlay-panel { grid-template-columns:1fr 1fr;gap:9px;margin-top:13px;padding-top:13px; }
.overlay-panel label { min-height:46px;padding:0 12px;font-size:10px; }
.overlay-strength { grid-column:1/-1; }
.overlay-toggle input { width:18px;height:18px; }
.color-control input { width:32px;height:30px; }
.overlay-strength input { width:min(150px,48%); }

.format-grid { grid-template-columns:repeat(4,1fr);gap:9px; }
.format-grid button { min-height:54px;border-radius:9px; }
.format-grid button span,.format-grid button span > b { font-size:12px; }
.format-grid button small { font-size:10px; }
.download-main { height:56px;border-radius:9px;font-size:14px; }
.local-message { font-size:11px;line-height:1.45; }

.qr-status { font-size:10px; }
.preview-shell { margin-top:20px;border-radius:10px; }
.qr-copy small { margin-top:8px;font-size:8px;opacity:.72; }
.preview-footer { min-height:44px;margin-top:8px;font-size:10px; }
.preview-footer button { min-height:40px;padding:0 9px;border-radius:6px;font-size:10px; }
.preview-footer button:hover { color:var(--ink);background:#efeee8; }

.poster.theme-market { --poster-fg:#101820; }
.poster.theme-market .poster-main .poster-title { text-shadow:0 2px 16px rgba(255,236,190,.72); }
.poster.theme-market .poster-main p { padding:8px 10px;border-radius:4px;background:rgba(255,244,216,.9);box-shadow:0 4px 14px rgba(16,24,32,.12); }

.trust-strip { font-size:10px; }
.section-heading > span,.faq-section > div:first-child > span { font-size:10px; }
.section-heading p { font-size:16px; }
.showcase small,.showcase span { font-size:8px; }
.steps b { font-size:11px; }
.steps h3 { font-size:21px; }
.steps p { font-size:14px; }
.faq-list summary { font-size:15px; }
.faq-list p { font-size:14px; }
footer { font-size:11px; }
.toast { padding:14px 18px;font-size:11px; }

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid rgba(53,101,255,.38);outline-offset:2px; }

@media (max-width:1100px) and (min-width:981px) {
  .workspace { width:min(960px,calc(100% - 28px));grid-template-columns:minmax(400px,.9fr) minmax(480px,1.1fr); }
  .editor-card,.preview-card { padding:22px; }
}

@media (max-width:650px) {
  .editor-card,.preview-card { padding:18px; }
  .field-label { align-items:flex-start; }
  .field-label b { max-width:48%; }
  .input-field input,.input-field textarea { font-size:16px; }
  .scenario-option { min-width:148px!important; }
  .scenario-option > i { height:86px; }
  .template-option { min-width:122px; }
  .background-option { min-width:104px; }
  .background-option i { height:72px; }
  .preview-shell { height:530px;padding:10px; }
  .download-main { position:sticky;bottom:8px;z-index:8;box-shadow:0 10px 26px rgba(17,18,15,.22); }
}

/* Center-focus layout: reserve independent title, QR, and detail zones. */
.poster-focus .poster-main { top:10%;bottom:7%; }
.poster-focus .poster-main p { position:absolute;left:0;right:0;bottom:0;max-width:80%;margin:0 auto; }
.poster-focus .poster-bottom { top:34%;width:50%; }
.poster-focus .qr-card { padding:10px; }
.poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:120px!important;height:120px!important; }

@media (max-width:650px) {
  .poster-focus .poster-main { top:9%;bottom:6%; }
  .poster-focus .poster-main p { max-width:86%; }
  .poster-focus .poster-bottom { top:32%;width:58%; }
  .poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:94px!important;height:94px!important; }
}

/* Center-focus refinement: make the QR the hero and separate its copy. */
.poster-focus .poster-main .poster-title { max-width:92%;margin:0 auto;letter-spacing:-2px;line-height:.92; }
.poster-focus .poster-bottom { top:31%;width:58%; }
.poster-focus .qr-card { padding:11px;border-radius:3px; }
.poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:150px!important;height:150px!important; }
.poster-focus .qr-copy { margin-top:14px; }
.poster-focus .qr-copy strong { line-height:1.35;letter-spacing:.45px; }
.poster-focus .qr-copy span { margin-top:7px;line-height:1.4; }

@media (max-width:650px) {
  .poster-focus .poster-main .poster-title { max-width:96%;letter-spacing:-1.5px; }
  .poster-focus .poster-bottom { top:29%;width:66%; }
  .poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:112px!important;height:112px!important; }
  .poster-focus .qr-copy { margin-top:11px; }
}

/* Preset visual refinement: natural overlays and consistent QR hierarchy. */
.poster.theme-signal { --poster-bg:#f3efe7;--poster-fg:#141713;--poster-accent:#b9d94a; }
.poster.theme-editorial { --poster-bg:#f2ede5;--poster-fg:#281d1a;--poster-accent:#9f4f43; }
.poster.theme-market { --poster-bg:#dfe7d6;--poster-fg:#173326;--poster-accent:#e8bd55; }
.poster.theme-mono { --poster-bg:#f5f2eb;--poster-fg:#181914;--poster-accent:#181914; }

.qr-card #qrPreview,.qr-card canvas,.qr-card img { width:82px!important;height:82px!important; }
.qr-card { padding:8px;border-radius:3px;box-shadow:0 5px 18px rgba(17,18,15,.13); }
.qr-copy { line-height:1.3; }
.qr-copy strong { letter-spacing:.2px; }

.poster.theme-signal .poster-main .poster-title { text-shadow:0 2px 18px rgba(255,255,255,.55); }
.poster-night .poster-main .poster-title { text-shadow:0 3px 20px rgba(0,0,0,.5); }
.poster-night .poster-main p { max-width:54%;text-shadow:0 2px 10px rgba(0,0,0,.7); }
.poster-night .poster-bottom { width:52%; }
.poster-editorial .poster-bottom { width:29%; }
.poster-editorial .qr-copy strong { line-height:1.35; }

.poster.theme-market .poster-main .poster-title { color:#173326;text-shadow:0 2px 16px rgba(255,255,255,.5); }
.poster.theme-market .poster-main p { color:#fffaf0;background:rgba(23,59,45,.93);box-shadow:0 7px 20px rgba(23,51,38,.2); }
.poster.theme-market.poster-corner .poster-bottom { color:#fffaf0;background:rgba(23,59,45,.93);box-shadow:0 8px 24px rgba(23,51,38,.22);backdrop-filter:blur(6px); }
.poster.theme-market .qr-copy span { color:#dce8df;opacity:.9; }
.poster.theme-market .qr-card { box-shadow:none; }

.poster-ticket .poster-bottom { background:rgba(248,246,239,.88);box-shadow:0 8px 26px rgba(17,18,15,.12);backdrop-filter:blur(5px); }
.poster-ticket .poster-bottom::before { opacity:.55; }

.poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:150px!important;height:150px!important; }

@media (max-width:650px) {
  .qr-card #qrPreview,.qr-card canvas,.qr-card img { width:72px!important;height:72px!important; }
  .poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:112px!important;height:112px!important; }
}

/* Preset refinement v2: preserve photography and use neutral surfaces. */
.poster.theme-signal .poster-main .poster-title { text-shadow:0 2px 18px rgba(255,255,255,.72); }
.poster.theme-market .poster-main .poster-title { color:#173326;text-shadow:0 2px 14px rgba(255,255,255,.72); }
.poster.theme-market .poster-main p { color:#173326;border-left:3px solid #173326;background:rgba(250,248,242,.86);box-shadow:0 8px 22px rgba(30,38,32,.12);backdrop-filter:blur(5px); }
.poster.theme-market.poster-corner .poster-bottom { color:#173326;background:rgba(250,248,242,.9);box-shadow:0 8px 24px rgba(30,38,32,.14);backdrop-filter:blur(6px); }
.poster.theme-market .qr-copy span { color:#526158;opacity:1; }
.poster.theme-market .qr-card { box-shadow:0 4px 14px rgba(30,38,32,.12); }
.qr-copy small { display:none; }
.poster-ticket .poster-bottom { left:20%;right:20%;padding:15px 12px;border:0;background:rgba(250,248,242,.9); }

/* Preset refinement v3: no tint on photo-led presets, no colored text panels. */
.poster.theme-market .poster-main p { padding:0;color:#173326;border:0;background:transparent;box-shadow:none;backdrop-filter:none;text-shadow:0 1px 7px #fff,0 0 16px rgba(255,255,255,.95); }
.poster.theme-market.poster-corner .poster-bottom { padding:0;color:#173326;background:transparent;box-shadow:none;backdrop-filter:none;text-shadow:0 1px 7px #fff,0 0 14px rgba(255,255,255,.95); }
.poster.theme-market .qr-copy span { color:#173326; }
.poster.theme-market .qr-card { box-shadow:0 5px 18px rgba(20,32,24,.18); }

/* Keep the two-column workspace from overriding tablet and mobile layouts. */
@media (max-width:980px) {
  .workspace { width:min(760px,calc(100% - 24px));grid-template-columns:minmax(0,1fr); }
}
@media (max-width:650px) {
  .workspace { width:calc(100% - 18px); }
}

/* Export controls live beside the poster preview, so what you see is what you export. */
.preview-card .format-label { margin-top:24px; }
.preview-card .format-grid { margin-top:0; }
.preview-card .download-main { margin-top:20px; }
/* The card now carries the poster plus the export controls, so on short laptop
   screens the poster shrinks instead of pushing the download button below the fold. */
@media (min-width:981px) {
  .preview-shell { height:clamp(280px,calc(100vh - 420px),690px); }
}
@media (max-width:650px) {
  .preview-card .format-label { margin-top:18px; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .poster,.toast,.download-main { transition:none; }
}

/* Horizontal option carousels on narrow screens: the JS toggles is-carousel /
   fade-left / fade-right so the faded edge always shows where more options are. */
.scenario-grid,.template-grid,.background-grid { scrollbar-width:thin; }
.scenario-grid.fade-right,.template-grid.fade-right,.background-grid.fade-right {
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
}
.scenario-grid.fade-left,.template-grid.fade-left,.background-grid.fade-left {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px);
  mask-image:linear-gradient(90deg,transparent,#000 32px);
}
.scenario-grid.fade-left.fade-right,.template-grid.fade-left.fade-right,.background-grid.fade-left.fade-right {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
}
@media (max-width:650px) {
  .scenario-grid.is-carousel,.template-grid.is-carousel,.background-grid.is-carousel {
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .scenario-grid.is-carousel > *,.template-grid.is-carousel > *,.background-grid.is-carousel > * { scroll-snap-align:start; }
}

/* ------------------------------------------------------------------
   Collapsible maker steps (1 / 2 / 3)
   The editor card opens compact: the three steps start collapsed, each
   header toggles its own step, and clicking the poster opens all three.
   ------------------------------------------------------------------ */
.maker-step { margin-top:20px;border-top:1px solid var(--line); }
/* Padding stays 0 so the step titles line up with the card's other labels. */
.step-toggle { width:100%;min-height:54px;display:flex;align-items:center;gap:12px;margin:0;padding:13px 0;border:0;background:transparent;text-align:left; }
.step-title { color:#55544e;font:500 11px DM Mono;text-transform:uppercase;letter-spacing:.45px;line-height:1.35;transition:color .18s; }
.step-toggle:hover .step-title,.maker-step.open .step-title { color:var(--ink); }
.step-meta { flex:0 1 auto;max-width:44%;margin-left:auto;color:#6f6e67;font:400 10px DM Mono;text-transform:none;text-align:right;line-height:1.35; }
.step-chevron { position:relative;flex:0 0 auto;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;background:#fff;transition:border-color .2s,background .2s; }
.step-toggle:hover .step-chevron { border-color:#b6b4ab;background:#f2f1eb; }
.step-chevron::before { content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-right:1.7px solid #6d6c65;border-bottom:1.7px solid #6d6c65;transform:translate(-50%,-68%) rotate(45deg);transition:transform .28s ease; }
.maker-step.open .step-chevron::before { transform:translate(-50%,-32%) rotate(-135deg); }
/* grid-template-rows animates 0fr -> 1fr, so no JS height measuring is needed.
   `visibility` keeps collapsed fields out of the tab order once the collapse ends,
   and the padding/negative-margin pair stops `overflow:hidden` from clipping the
   focus rings of the fields inside. */
.step-panel { display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.maker-step.open .step-panel { grid-template-rows:1fr; }
.step-panel-inner { overflow:hidden;min-height:0;padding:0 6px;margin:0 -6px;visibility:hidden;transition:visibility 0s linear .32s; }
.maker-step.open .step-panel-inner { visibility:visible;transition-delay:0s; }
.maker-step .background-field { margin-top:0; }

/* The poster is the fastest way into the editor, so the shell reads as clickable. */
.preview-shell { cursor:pointer;transition:box-shadow .2s; }
.preview-shell:hover { box-shadow:inset 0 0 0 2px rgba(17,18,15,.16); }
.preview-hint { margin:10px 2px 0;color:#686760;text-align:center;font:400 10px DM Mono; }

@media (max-width:650px) {
  .maker-step { margin-top:16px; }
  .step-toggle { min-height:50px;padding:11px 0; }
  .step-meta { max-width:38%;font-size:9px; }
}

@media (prefers-reduced-motion: reduce) {
  .step-panel,.step-panel-inner,.step-chevron::before,.step-title,.preview-shell { transition:none; }
}

/* ==================================================================
   Typography pass: one explicit scale, so a section heading can never
   read as a form label again.

   Four roles, and only four:
     display   hero + section headlines        sans 800, tight tracking
     heading   in-product section titles       sans 800, slight tracking
     label     meta, counters, kickers         mono 500, uppercase, wide
     body      running text                    sans 400-600, relaxed

   Before this pass .step-title and .field-label shared the exact same
   recipe (mono / 11px / 500 / uppercase / .45px), which is why "1. Edit
   content & QR" read as another field caption instead of a heading.

   Tracking is expressed in em, not px: the old fixed px values made the
   same headline roughly 40% tighter on mobile than on desktop.
   ================================================================== */

/* Chinese and Japanese glyphs sit on a fixed em box. Applying the Latin
   condensed-display tracking to them pushes strokes into each other, so
   the display voices reset to neutral and labels only breathe slightly.
   The heading weight also drops to 700: Noto Sans SC/JP are loaded at
   500/700/900, so asking for 800 would silently resolve to 900. */
html[data-language="zh"], html[data-language="ja"] {
  --track-display:0em; --track-section:0em; --track-heading:0em;
  --track-label:.01em; --track-eyebrow:.03em;
  --w-display:700; --w-heading:700;
}

/* --- display role: marketing headlines ----------------------------
   Headings never set font-family. They inherit it, so English keeps
   Manrope and Chinese / Japanese keep Noto Sans — setting a family here
   would bypass the body rule and drop CJK headlines back to the system
   default. Only weight and tracking are touched. */
.hero h1 { font-weight:var(--w-display); letter-spacing:var(--track-display); }
.section-heading h2, .faq-section h2 { font-weight:var(--w-display); letter-spacing:var(--track-section); }

/* --- heading role: in-product section titles ---------------------- */
.card-header strong { font-size:17px; font-weight:var(--w-heading); letter-spacing:var(--track-heading); }
/* Step titles became real headings: sans, heavier, sentence case, ink.
   The open step is marked by the chevron's own rotation alone
   (45deg -> -135deg) and keeps its normal colours. Two colour cues were
   tried and both dropped: a brand-lime rule under the text (lime on the
   #faf9f5 panel is roughly 1.2:1 contrast, i.e. invisible) and a
   brand-lime chevron fill (visible, but reads as decoration rather than
   as the control's own state). Do not reintroduce either. */
.step-title { color:var(--ink); font-family:inherit; font-size:17px; font-weight:var(--w-heading); letter-spacing:var(--track-heading); line-height:1.3; text-transform:none; }
.steps h3 { font-size:22px; font-weight:var(--w-heading); letter-spacing:var(--track-heading); text-wrap:balance; }
.faq-list summary { font-size:16px; font-weight:var(--w-heading); letter-spacing:var(--track-heading); }

/* --- label role: stays clearly weaker than every heading ---------- */
.eyebrow, .trust-strip, .section-heading > span, .faq-section > div:first-child > span { letter-spacing:var(--track-eyebrow); }
.input-field > span, .field-label { letter-spacing:var(--track-label); }
.step-meta { font-size:11px; line-height:1.4; }

/* Mono labels are the only line where Latin (DM Mono) and CJK meet, so
   the CJK face is appended as an explicit fallback instead of leaving the
   choice to the browser — this font stack is used nowhere else. */
html[data-language="zh"] .input-field > span,
html[data-language="zh"] .field-label,
html[data-language="zh"] .step-meta { font-family:"DM Mono","Noto Sans SC",monospace; }
html[data-language="ja"] .input-field > span,
html[data-language="ja"] .field-label,
html[data-language="ja"] .step-meta { font-family:"DM Mono","Noto Sans JP",monospace; }

/* --- small-text floor --------------------------------------------
   Interface text used to reach down to 6px (scenario meta, layout
   captions, format ratios). Everything that carries wording now stops
   at 11px. Three deliberate exceptions keep their own optical size:
   the brand chips (.brand-mark), the recommended ★ badge, and the
   poster artwork, which is scaled art rather than interface text. */
.local-message, .preview-hint, .scenario-hint, .layout-recommendation,
.trust-strip, .section-heading > span, .faq-section > div:first-child > span,
.overlay-panel label, .strength-row > span, .strength-row label,
.background-option span, .format-grid button small, .qr-status,
.preview-footer, .preview-footer button, .step-meta,
.template-option > small, .scenario-option > small,
.input-field > span b, .field-label b { font-size:11px; }

/* --- legibility: the label suffix ("17/32", "1080 x 1350") carried
   meaning at ~2.3:1 contrast. Same size, now ~4.9:1. --------------- */
.input-field > span b, .field-label b { color:#6f6e67; }

/* --- body: avoid single-word last lines in marketing copy --------- */
.hero-copy > p, .section-heading p, .steps p, .faq-list p { text-wrap:pretty; }

/* --- poster preview: the canvas export draws with no letter-spacing,
   so neutralising it for CJK both fixes overlapping strokes and moves
   the preview closer to what actually gets downloaded. ------------- */
html[data-language="zh"] .poster-main .poster-title,
html[data-language="ja"] .poster-main .poster-title { letter-spacing:0; }

@media (max-width:650px) {
  .card-header strong, .step-title { font-size:16px; }
}

/* Presets are recipes; visual contrast belongs to Background, not Layout. */
.preset-combination { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px; }
.preset-combination span { min-width:0;display:flex;align-items:center;gap:7px;padding:9px;border:1px solid #d3d1c8;border-radius:7px;background:#f4f3ee; }
.preset-combination i { display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;border-radius:50%;color:#fff;background:var(--ink);font:600 9px DM Mono; }
.preset-combination b { min-width:0;overflow:hidden;color:#4f4e48;font-size:10px;font-weight:700;text-overflow:ellipsis;white-space:nowrap; }
.preset-combination.is-custom span { border-style:dashed;background:#fff; }
.scenario-option:not(.active) { opacity:.78; }
.scenario-option:hover { opacity:1; }

.poster.background-none,.poster.background-upload { --poster-bg:#f3f1eb;--poster-fg:#171814;--poster-accent:#d8d5ca;background:var(--poster-bg); }
.poster.background-meetup { --poster-bg:#f3efe7;--poster-fg:#141713;--poster-accent:#b9d94a; }
.poster.background-concert { --poster-bg:#0b0d18;--poster-fg:#f6f2e8;--poster-accent:#895cff; }
.poster.background-exhibition { --poster-bg:#f2ede5;--poster-fg:#281d1a;--poster-accent:#9f4f43; }
.poster.background-market { --poster-bg:#dfe7d6;--poster-fg:#173326;--poster-accent:#e8bd55; }
.poster.background-workshop { --poster-bg:#f5f2eb;--poster-fg:#181914;--poster-accent:#7c8b73; }
.poster.has-photo { background:var(--poster-bg); }
.poster.has-photo::after { content:'';position:absolute;z-index:2;inset:0;pointer-events:none; }
.poster.has-photo.background-meetup::after { background:linear-gradient(180deg,rgba(250,248,242,.9) 0%,rgba(250,248,242,.42) 24%,rgba(250,248,242,.14) 50%,rgba(250,248,242,.52) 72%,rgba(250,248,242,.92) 100%); }
.poster.has-photo.background-concert::after { background:linear-gradient(180deg,rgba(4,6,14,.74) 0%,rgba(4,6,14,.28) 24%,rgba(4,6,14,.12) 50%,rgba(4,6,14,.4) 72%,rgba(4,6,14,.78) 100%); }
.poster.has-photo.background-exhibition::after { background:linear-gradient(180deg,rgba(250,248,243,.68) 0%,rgba(250,248,243,.28) 24%,rgba(250,248,243,.08) 50%,rgba(250,248,243,.3) 72%,rgba(250,248,243,.72) 100%); }
.poster.has-photo.background-market::after { background:linear-gradient(180deg,rgba(250,248,242,.82) 0%,rgba(250,248,242,.34) 24%,rgba(250,248,242,.1) 50%,rgba(250,248,242,.4) 72%,rgba(250,248,242,.86) 100%); }
.poster.has-photo.background-workshop::after { background:linear-gradient(180deg,rgba(250,249,245,.76) 0%,rgba(250,249,245,.3) 24%,rgba(250,249,245,.08) 50%,rgba(250,249,245,.32) 72%,rgba(250,249,245,.8) 100%); }
.poster.has-photo.background-upload::after { background:linear-gradient(180deg,rgba(250,248,242,.82) 0%,rgba(250,248,242,.34) 24%,rgba(250,248,242,.1) 50%,rgba(250,248,242,.42) 72%,rgba(250,248,242,.88) 100%); }

.poster .poster-main .poster-title { text-shadow:none; }
.poster.has-photo.text-dark .poster-top,
.poster.has-photo.text-dark .poster-main,
.poster.has-photo.text-dark .qr-copy { text-shadow:0 1px 2px rgba(255,255,255,.96),0 0 12px rgba(255,255,255,.9); }
.poster.has-photo.text-light .poster-top,
.poster.has-photo.text-light .poster-main,
.poster.has-photo.text-light .qr-copy { text-shadow:0 2px 4px rgba(0,0,0,.82),0 0 14px rgba(0,0,0,.62); }
.poster.has-photo.text-dark .poster-main .poster-title { text-shadow:0 1px 2px rgba(255,255,255,.96),0 0 14px rgba(255,255,255,.92); }
.poster.has-photo.text-light .poster-main .poster-title { text-shadow:0 2px 4px rgba(0,0,0,.86),0 0 16px rgba(0,0,0,.68); }
.poster-ticket .poster-bottom,.poster-corner .poster-bottom { color:#151713; }
.poster.background-market.poster-corner .poster-bottom { padding:0;color:#173326;background:transparent;box-shadow:none;backdrop-filter:none; }

@media (max-width:650px) {
  .preset-combination { gap:5px; }
  .preset-combination span { padding:7px; }
  .preset-combination b { font-size:9px; }
}

/* Unified poster sizing system: the frame anchor stays fixed; formats only adjust scale and composition. */
.poster {
  container-type:inline-size;
  --poster-frame-edge:7cqw;
  --poster-top-size:clamp(8px,1.95cqw,10px);
  --poster-body-size:clamp(10px,2.35cqw,12px);
  --poster-copy-size:clamp(10px,2.35cqw,12px);
  --poster-domain-size:clamp(8px,1.95cqw,10px);
  --poster-qr-size:clamp(62px,13cqw,72px);
  --poster-focus-qr-size:clamp(98px,29cqw,150px);
  --signal-title-size:clamp(31px,11.8cqw,61px);
  --night-title-size:clamp(31px,11.4cqw,59px);
  --focus-title-size:clamp(28px,9.9cqw,51px);
  --corner-title-size:clamp(33px,12.4cqw,64px);
  --ticket-title-size:clamp(31px,9.7cqw,52px);
  padding:0;
}
.poster.format-1-1 {
  --signal-title-size:clamp(32px,8.1cqw,52px);
  --night-title-size:clamp(32px,8cqw,52px);
  --focus-title-size:clamp(28px,7.2cqw,46px);
  --corner-title-size:clamp(34px,8.4cqw,54px);
  --ticket-title-size:clamp(32px,8cqw,52px);
}
.poster.format-9-16 {
  --poster-top-size:clamp(8px,2.5cqw,9px);
  --poster-body-size:clamp(10px,2.8cqw,11px);
  --poster-copy-size:clamp(10px,2.8cqw,11px);
  --poster-domain-size:clamp(8px,2.3cqw,9px);
  --poster-qr-size:clamp(62px,17cqw,68px);
  --poster-focus-qr-size:clamp(96px,28cqw,112px);
  --signal-title-size:clamp(30px,11.5cqw,42px);
  --night-title-size:clamp(30px,11cqw,40px);
  --focus-title-size:clamp(28px,9.6cqw,36px);
  --corner-title-size:clamp(31px,11.5cqw,42px);
  --ticket-title-size:clamp(30px,9.8cqw,38px);
}
.poster.format-a4 {
  --poster-qr-size:clamp(62px,14.5cqw,68px);
  --poster-focus-qr-size:clamp(104px,27cqw,126px);
  --signal-title-size:clamp(31px,11.2cqw,52px);
  --night-title-size:clamp(31px,10.8cqw,50px);
  --focus-title-size:clamp(28px,9.4cqw,44px);
  --corner-title-size:clamp(33px,11.4cqw,52px);
  --ticket-title-size:clamp(31px,9.6cqw,45px);
}

.poster-top { position:absolute;top:var(--poster-frame-edge);left:var(--poster-frame-edge);right:var(--poster-frame-edge);font-size:var(--poster-top-size);line-height:1.35; }
.poster .poster-main { left:var(--poster-frame-edge);right:var(--poster-frame-edge); }
.poster .poster-main .poster-title { max-width:100%;font-size:var(--signal-title-size);line-height:.86;letter-spacing:clamp(-4px,-.7cqw,-2px); }
.poster .poster-main p { max-width:68%;font-size:var(--poster-body-size);font-weight:700;line-height:1.5; }
.poster .poster-bottom { left:var(--poster-frame-edge);right:var(--poster-frame-edge); }
.poster .qr-card #qrPreview,.poster .qr-card canvas,.poster .qr-card img { width:var(--poster-qr-size)!important;height:var(--poster-qr-size)!important; }
.poster .qr-copy strong { font-size:var(--poster-copy-size);line-height:1.35; }
.poster .qr-copy span { max-width:34cqw;font-size:var(--poster-domain-size);line-height:1.4; }

.poster-signal .poster-main { top:auto;bottom:29%; }
.poster-signal .poster-main .poster-title { font-size:var(--signal-title-size); }
.poster-night .poster-main { top:16%;bottom:auto; }
.poster-night .poster-main .poster-title { max-width:88%;font-size:var(--night-title-size); }
.poster-night .poster-main p { max-width:54%; }
.poster-night .poster-bottom { left:auto;right:var(--poster-frame-edge);width:52%; }
.poster-focus .poster-main { top:10%;bottom:7%;text-align:center; }
.poster-focus .poster-main .poster-title { max-width:92%;font-size:var(--focus-title-size);margin:0 auto;line-height:.92;letter-spacing:clamp(-2px,-.4cqw,-1px); }
.poster-focus .poster-main p { left:0;right:0;bottom:0;max-width:82%; }
.poster-focus .poster-bottom { top:31%;left:50%;right:auto;width:58%; }
.poster-focus .qr-card #qrPreview,.poster-focus .qr-card canvas,.poster-focus .qr-card img { width:var(--poster-focus-qr-size)!important;height:var(--poster-focus-qr-size)!important; }
.poster-corner .poster-main { top:14%;bottom:auto; }
.poster-corner .poster-main .poster-title { max-width:84%;font-size:var(--corner-title-size); }
.poster-corner .poster-main p { max-width:54%;margin-top:clamp(16px,4cqw,25px); }
.poster-corner .poster-bottom { left:auto;right:var(--poster-frame-edge);bottom:5%;width:38%; }
.poster-ticket .poster-main { top:12%;bottom:auto;left:12%;right:12%;text-align:left; }
.poster-ticket .poster-main .poster-title { max-width:100%;font-size:var(--ticket-title-size);line-height:.9;letter-spacing:clamp(-3px,-.5cqw,-1.5px); }
.poster-ticket .poster-main p { max-width:92%;margin-top:clamp(16px,4cqw,24px); }
.poster-ticket .poster-bottom { left:16%;right:16%;bottom:6%;padding:clamp(11px,2.8cqw,15px) clamp(9px,2.3cqw,12px); }
.poster-ticket .poster-bottom::before { left:0;right:0;top:clamp(-26px,-4.5cqw,-18px); }

.format-1-1.poster-signal .poster-main { bottom:32%; }
.format-1-1.poster-night .poster-main { top:14%; }
.format-1-1.poster-focus .poster-main { top:9%;bottom:6%; }
.format-1-1.poster-focus .poster-bottom { top:30%;width:52%; }
.format-1-1.poster-corner .poster-main { top:12%; }
.format-1-1.poster-ticket .poster-main { top:11%;left:14%;right:14%; }
.format-1-1.poster-ticket .poster-bottom { left:18%;right:18%;bottom:5%; }

.format-9-16.poster-signal .poster-main { bottom:31%; }
.format-9-16.poster-signal .poster-main p { max-width:82%; }
.format-9-16.poster-night .poster-main { top:19%; }
.format-9-16.poster-night .poster-main .poster-title { max-width:100%; }
.format-9-16.poster-night .poster-main p { max-width:72%;margin-top:18px; }
.format-9-16.poster-night .poster-bottom { width:68%; }
.format-9-16.poster-focus .poster-main { top:13%;bottom:8%; }
.format-9-16.poster-focus .poster-main .poster-title { max-width:100%; }
.format-9-16.poster-focus .poster-main p { max-width:92%; }
.format-9-16.poster-focus .poster-bottom { top:34%;width:72%; }
.format-9-16.poster-corner .poster-main { top:16%; }
.format-9-16.poster-corner .poster-main .poster-title { max-width:100%; }
.format-9-16.poster-corner .poster-main p { max-width:72%; }
.format-9-16.poster-corner .poster-bottom { width:48%; }
.format-9-16.poster-ticket .poster-main { top:14%;left:10%;right:10%;text-align:center; }
.format-9-16.poster-ticket .poster-main p { max-width:100%;margin-top:18px; }
.format-9-16.poster-ticket .poster-bottom { left:12%;right:12%;bottom:5%; }

.format-a4.poster-signal .poster-main { bottom:30%; }
.format-a4.poster-night .poster-main { top:18%; }
.format-a4.poster-focus .poster-main { top:11%;bottom:7%; }
.format-a4.poster-focus .poster-bottom { top:32%;width:64%; }
.format-a4.poster-corner .poster-main { top:15%; }
.format-a4.poster-ticket .poster-main { top:13%;left:12%;right:12%; }
.format-a4.poster-ticket .poster-main p { max-width:96%;margin-top:20px; }
.format-a4.poster-ticket .poster-bottom { left:14%;right:14%;bottom:5%; }

/* Hero proof and real preset examples. */
.hero { grid-template-rows:auto auto;column-gap:70px;row-gap:42px;padding-bottom:72px; }
.hero-trust { grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.13);color:#c5c5bd;background:transparent;overflow:visible; }
.hero-trust span { display:flex;align-items:center;justify-content:center;gap:8px;min-height:28px;border-right:1px solid rgba(255,255,255,.1);font-size:10px;white-space:nowrap; }
.hero-trust span:first-child { justify-content:flex-start; }
.hero-trust span:last-child { justify-content:flex-end;border-right:0; }
.hero-trust span::before { content:'✓';color:var(--lime);font:700 11px Manrope,sans-serif; }

.hero-art { height:370px; }
.hero-preview { position:absolute;aspect-ratio:4/5;overflow:hidden;filter:drop-shadow(0 28px 34px rgba(0,0,0,.42)); }
.hero-preview-meetup { left:18px;top:2px;width:230px;transform:rotate(-4deg); }
.hero-preview-concert { right:6px;bottom:3px;width:205px;transform:rotate(5deg); }
.hero-case-note { position:absolute;z-index:5;left:45%;bottom:8px;padding:8px 11px;color:#d7d7d0;border:1px solid #3e4038;border-radius:999px;background:#1b1c18;font:500 8px DM Mono;letter-spacing:.65px;white-space:nowrap;transform:translateX(-50%); }

[data-preview-scale] > .showcase-poster { position:absolute;left:0;top:0;width:var(--preview-source-width,552px);height:var(--preview-source-height,690px);max-width:none;transform:scale(var(--preview-scale,.36));transform-origin:top left;box-shadow:none;transition:none; }

.template-showcase { align-items:start; }
.showcase-item { min-width:190px;display:block;color:var(--ink); }
.showcase-frame { position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;box-shadow:0 16px 36px rgba(17,18,15,.16);transition:transform .2s ease,box-shadow .2s ease; }
.showcase-item:hover .showcase-frame { transform:translateY(-5px);box-shadow:0 22px 46px rgba(17,18,15,.22); }
.showcase-item:focus-visible { outline:4px solid rgba(53,101,255,.5);outline-offset:4px; }
.showcase-caption { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 2px 0; }
.showcase-caption b { font-size:12px;line-height:1.3; }
.showcase-caption small { color:#686760;font:500 8px/1.4 DM Mono;text-align:right; }
.showcase-poster .case-qr { display:block;width:var(--poster-qr-size);height:var(--poster-qr-size); }
.showcase-poster.poster-focus .case-qr { width:var(--poster-focus-qr-size);height:var(--poster-focus-qr-size); }
.showcase-poster .case-qr img { display:none!important; }

@media (max-width:980px) {
  .hero { row-gap:30px; }
  .hero-trust { grid-column:auto;grid-template-columns:repeat(5,max-content);justify-content:center;gap:18px; }
  .hero-trust span { justify-content:center;border-right:0; }
}
@media (max-width:650px) {
  .hero { padding-bottom:58px; }
  .hero-trust { display:flex;justify-content:flex-start;gap:18px;width:100%;padding-top:16px;overflow-x:auto;scrollbar-width:none; }
  .hero-trust::-webkit-scrollbar { display:none; }
  .hero-trust span { flex:0 0 auto; }
}

/* Skip below-the-fold layout and paint work until sections approach the viewport. */
.template-section { content-visibility:auto;contain-intrinsic-size:auto 900px; }
.how-section { content-visibility:auto;contain-intrinsic-size:auto 520px; }
.faq-section { content-visibility:auto;contain-intrinsic-size:auto 780px; }
footer { content-visibility:auto;contain-intrinsic-size:auto 120px; }