/* SPICE maker (/spice/): pick an effect, write, preview, share */
:root {
  --bg: #fff8f1;
  --panel: #ffffff;
  --ink: #2b1d1a;
  --muted: #7a6a63;
  --line: #f0e2d6;
  --chili: #e8412c;
  --chili-dark: #c22f1c;
  --saffron: #ffb020;
  --soft: #fff0e4;
  --focus: #3e7bfa;
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1412; --panel: #241c19; --ink: #f6ece6; --muted: #b9a79f; --line: #3a2e29;
    --soft: #2e2320; --chili: #ff5a43; --chili-dark: #e8412c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.7; }
a { color: var(--chili); }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* hero */
.hero { background: radial-gradient(120% 140% at 10% 0%, #ffd9c2 0%, #ffb59c 35%, #e8412c 100%); color: #fff; overflow: hidden; position: relative; }
.hero .bar { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 6px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 900; font-size: 22px; letter-spacing: .14em; }
.logo svg { width: 30px; height: 30px; }
.lang { display: flex; background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 3px; }
.lang button { border: 0; background: none; color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; }
.lang button[aria-pressed="true"] { background: #fff; color: var(--chili); }
.hero .body { padding-top: 18px; padding-bottom: 34px; position: relative; z-index: 1; }
.hero h1 { margin: 0; font-size: clamp(28px, 6.4vw, 52px); line-height: 1.3; font-weight: 900; text-shadow: 0 2px 14px rgba(120, 20, 0, .25); }
.hero .sub { margin: 8px 0 0; font-weight: 700; letter-spacing: .04em; opacity: .95; font-size: clamp(13px, 2.4vw, 16px); }
.hero .sub b { font-weight: 900; }
.hero .lead { margin: 14px 0 0; max-width: 36em; font-size: 15px; opacity: .95; }
.hero .deco { position: absolute; right: -10px; bottom: -18px; font-size: clamp(80px, 16vw, 150px); opacity: .25; transform: rotate(-12deg); pointer-events: none; user-select: none; }

/* layout: preview beside the form on wide screens, between "write" and "send" on phones */
.maker { display: grid; gap: 20px; padding-top: 24px; padding-bottom: 32px; grid-template-columns: 1fr; grid-template-areas: "pick" "write" "preview" "send"; }
@media (min-width: 900px) {
  .maker { grid-template-columns: 1fr 340px; grid-template-areas: "pick preview" "write preview" "send preview"; gap: 22px 32px; align-items: start; }
  .preview { position: sticky; top: 16px; }
}
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 20px; min-width: 0; }
.step h2 { margin: 0 0 14px; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chili); color: #fff; font-size: 15px; flex: none; }
#pick { grid-area: pick; } #write { grid-area: write; } .preview { grid-area: preview; } #send { grid-area: send; }

/* wizard: on phones one step per screen, with a step bar on top and back/next at the bottom */
.steps, .wizbar { display: none; }
@media (max-width: 899px) {
  .maker { padding-bottom: 96px; gap: 14px; grid-template-areas: "steps" "pick" "write" "preview" "send"; }
  /* on the last screen the share buttons come first */
  .maker[data-step="3"] { grid-template-areas: "steps" "send" "preview"; }
  .steps { grid-area: steps; }
  .steps {
    display: flex; position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: 10px 16px; gap: 6px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .steps button {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none;
    padding: 6px 4px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer;
  }
  .steps .num { width: 24px; height: 24px; font-size: 13px; background: var(--line); color: var(--muted); }
  .steps button[aria-current="step"] { background: var(--soft); color: var(--ink); }
  .steps button[aria-current="step"] .num, .steps button.done .num { background: var(--chili); color: #fff; }
  .maker[data-step="1"] #write, .maker[data-step="1"] .preview, .maker[data-step="1"] #send,
  .maker[data-step="2"] #pick, .maker[data-step="2"] #send,
  .maker[data-step="3"] #pick, .maker[data-step="3"] #write { display: none; }
  /* only the first screen needs the introduction */
  body:not(.step1) .hero .body, body:not(.step1) .hero .deco, body:not(.step1) .how { display: none; }
  .wizbar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line);
  }
  .wizbar button { border: 0; border-radius: 14px; padding: 14px 12px; font-size: 16px; font-weight: 900; cursor: pointer; min-height: 52px; }
  .wizbar .back { flex: 0 0 auto; background: var(--soft); color: var(--ink); padding-left: 18px; padding-right: 18px; }
  .wizbar .next { flex: 1; background: var(--chili); color: #fff; }
  .wizbar [hidden] { display: none; }
}

/* effect picker */
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 12px 5px 14px; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tabs small { font-size: 11px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--soft); color: var(--muted); line-height: 18px; }
.tabs button[aria-pressed="true"] small { background: rgba(255, 255, 255, .22); color: inherit; }
/* phones: one scrollable row instead of wrapping */
@media (max-width: 899px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 12px; padding: 0 18px 4px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.fx {
  position: relative; text-align: left; border: 2px solid var(--line); background: var(--panel); border-radius: 16px; padding: 12px 12px 10px;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.fx:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(80, 30, 10, .08); }
.fx[aria-pressed="true"] { border-color: var(--c, var(--chili)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--chili)) 22%, transparent); }
.fx .emo { font-size: 34px; line-height: 1.2; }
.fx .nm { font-weight: 900; font-size: 16px; }
.fx .ds { font-size: 12px; color: var(--muted); line-height: 1.5; }
.fx .badge { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; background: var(--saffron); color: #3a2200; }
.fx .badge.later { background: var(--soft); color: var(--chili); border: 1px solid var(--chili); }
.fx .when { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.fx.soon { cursor: default; opacity: .5; border-style: dashed; }
.fx.soon:hover { transform: none; box-shadow: none; }

/* form */
.field { display: block; margin-bottom: 14px; }
.field > span { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.field small { color: var(--muted); font-weight: 500; }
.field input[type="text"], .field textarea {
  width: 100%; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); font-size: 16px; outline: none;
}
.field input[type="text"]:focus, .field textarea:focus { border-color: var(--chili); }
.field textarea { resize: vertical; min-height: 104px; line-height: 1.6; }
.field input[type="range"] { width: 100%; accent-color: var(--chili); }
.check { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 9px 12px; border-radius: 12px; background: var(--soft);
  font-size: 14px; font-weight: 700; cursor: pointer; }
.check[hidden] { display: none; }
.check input { width: 18px; height: 18px; accent-color: var(--chili); margin: 0; flex: none; }
.warn { margin: 0; font-size: 13px; color: var(--chili-dark); font-weight: 700; }
.hintline { margin: -6px 0 12px; font-size: 12px; color: var(--muted); }

/* preview */
.preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phone {
  width: min(300px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 36px; padding: 10px; background: #1d1412;
  box-shadow: 0 20px 50px rgba(60, 20, 10, .25), inset 0 0 0 2px #3a2a25;
}
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 27px; background: #000; display: block; }
.preview .cap { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }

/* send */
.share { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.share a, .share button {
  display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 13px 10px;
  font-weight: 900; font-size: 15px; text-decoration: none; cursor: pointer; color: #fff; min-height: 50px;
}
.share .native { background: var(--chili); }
.share .line { background: #06c755; }
.share .x { background: #111; }
.share .copy { background: var(--soft); color: var(--ink); border: 2px solid var(--line); }
.url { display: flex; gap: 8px; margin: 12px 0 0; }
.url input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); font-size: 12px; color: var(--muted); }
.tip { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: .25s; pointer-events: none;
  background: var(--ink); color: var(--panel); padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* how it works */
.how { padding-bottom: 40px; }
.how h2 { font-size: 20px; margin: 8px 0 12px; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.how li { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.how li b { display: block; font-size: 16px; }
.how li span { font-size: 14px; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 18px 0 28px; font-size: 13px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }

/* Editorial gallery: quiet surfaces let each celebration carry the colour. */
:root { --bg:#f7f5f0; --panel:#fffefa; --ink:#282923; --muted:#737268; --line:#e5e3d9; --soft:#eeede5; --chili:#c94330; --chili-dark:#a52f20; }
.wrap { max-width:1200px; padding-left:28px; padding-right:28px; }
.hero { background:#f0eee4; color:var(--ink); border-bottom:1px solid var(--line); }
.hero .bar { padding-top:24px; padding-bottom:20px; position:relative; z-index:2; }
.logo { color:var(--chili); font-size:25px; letter-spacing:.18em; }
.logo svg { background:var(--chili); border-radius:10px; width:36px; height:36px; padding:3px; }
.lang { background:#e4e2d6; }
.lang button { color:#66665b; padding:7px 14px; }
.lang button[aria-pressed="true"] { color:#a83223; box-shadow:0 2px 8px #2829230b; }
.hero .body { padding-top:26px; padding-bottom:48px; }
.eyebrow { color:var(--chili); font:700 11px/1.6 system-ui,sans-serif; letter-spacing:.2em; margin:0 0 20px; }
.hero h1 { max-width:680px; font-size:clamp(30px,4vw,48px); line-height:1.5; letter-spacing:.025em; text-shadow:none; text-wrap:balance; }
.hero .sub { font-size:11px; letter-spacing:.07em; color:var(--muted); margin-top:16px; }
.hero .lead { max-width:570px; font-size:14px; line-height:1.9; color:#5f6157; margin-top:16px; }
.hero-art { position:absolute; width:340px; height:300px; left:calc(50% + 230px); top:100px; pointer-events:none; }
.art-card { width:180px; padding:9px 9px 12px; background:#fffefa; border:1px solid #fff; border-radius:12px; box-shadow:0 18px 40px #41382024; position:absolute; }
.art-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.art-card span { display:block; text-align:center; font:italic 19px/1.8 Georgia,serif; margin-top:5px; color:#3c3b31; }
.art-back { top:4px; left:0; transform:rotate(-13deg); }
.art-front { top:40px; left:130px; transform:rotate(10deg); }
.art-spark { position:absolute; top:-20px; right:20px; color:var(--chili); font-size:48px; }
.maker { padding-top:36px; gap:24px 40px; }
.step { padding:24px; border-radius:20px; box-shadow:0 4px 18px #38342204; }
.step h2 { font-size:20px; margin-bottom:22px; letter-spacing:.02em; }
.num { background:var(--soft); color:var(--chili); width:30px; height:30px; font-family:system-ui,sans-serif; font-size:13px; }
.tabs { gap:6px; margin-bottom:20px; }
.tabs button { font-size:12px; padding:8px 11px; border-color:transparent; background:var(--soft); }
.tabs button[aria-pressed="true"] { background:#364639; border-color:#364639; color:#fff; }
.grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.fx { padding:0 0 14px; gap:4px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--panel); }
.fx .thumb { display:block; width:100%; aspect-ratio:1.35; object-fit:cover; }
.fx .emo { display:none; }
.fx.soon .emo { display:block; padding:18px 12px; }
.fx .nm { margin:7px 12px 0; font-size:14px; }
.fx .ds { margin:0 12px; font-size:11px; }
.fx .when { margin:3px 12px 0; font-size:10px; }
.fx .badge { top:8px; right:8px; background:#fff5d5; color:#67441a; font-size:10px; box-shadow:0 2px 8px #0002; }
.fx .badge.later { background:#fffefa; color:#a43c2b; border:0; }
.fx[aria-pressed="true"] { border-color:var(--chili); box-shadow:0 0 0 2px var(--chili); }
.fx:hover { transform:translateY(-3px); box-shadow:0 8px 22px #38342218; }
.preview { padding:24px 12px; background:#eeede5; border:1px solid var(--line); border-radius:26px; gap:18px; }
.preview-label { font:700 10px/1.4 system-ui,sans-serif; letter-spacing:.22em; color:var(--muted); margin:0; }
.phone { width:min(276px,76vw); padding:8px; border-radius:32px; background:#343730; box-shadow:0 18px 32px #363c3726,inset 0 0 0 1px #ffffff3a; }
.phone iframe { border-radius:25px; }
.preview .cap { font-size:11px; max-width:240px; line-height:1.9; }
.preview .cap a { display:inline-block; }
.field input[type="text"], .field textarea, .field select { border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:12px 14px; }
.field select { width:100%; font:inherit; color:var(--ink); }
.how { padding-top:20px; padding-bottom:60px; }
.how h2 { margin-bottom:24px; }
.how li { background:transparent; border:0; border-left:2px solid var(--line); border-radius:0; padding:4px 22px; }
.how li b { font-size:15px; margin-bottom:10px; }
.how li span { font-size:13px; }
.share [hidden] { display:none; }
@media (min-width:900px) { .maker { grid-template-columns:minmax(0,1fr) 338px; } .preview { top:24px; } }
@media (max-width:1100px) and (min-width:900px) { .hero-art { left:auto; right:32px; transform:scale(.8); transform-origin:right center; } .hero h1 { max-width:580px; } .hero .lead { max-width:510px; } }
@media (max-width:899px) {
  .wrap { padding-left:18px; padding-right:18px; }
  .hero .bar { padding-top:16px; padding-bottom:12px; }
  .hero .body { padding-top:22px; padding-bottom:30px; }
  .hero h1 { max-width:620px; font-size:clamp(28px,6vw,38px); }
  .hero-art { display:none; }
  .hero .sub { font-size:9px; }
  .hero .lead { font-size:12px; }
  .eyebrow { font-size:9px; margin-bottom:12px; }
  .maker { padding-top:0; gap:18px; }
  .steps { margin:0 -18px; padding:12px 18px; }
  .step { padding:20px 16px; border-radius:16px; }
  .step h2 { font-size:18px; margin-bottom:18px; }
  .tabs { margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .preview { padding:20px 12px; }
  .wizbar { box-shadow:0 -6px 25px #38342208; }
  .wizbar .next { border-radius:12px; }
}
@media (prefers-color-scheme:dark) {
  :root { --bg:#191d1a; --panel:#222823; --ink:#f0f1e9; --muted:#b0b7ab; --line:#3a443a; --soft:#303a31; --chili:#f2866b; --chili-dark:#ff9a80; }
  .hero { background:#242e26; }
  .hero .lead { color:#c2cbbb; }
  .lang { background:#364237; }
  .lang button { color:#d5dbd0; }
  .preview { background:#232c24; }
  .tabs button[aria-pressed="true"] { background:#d6e0c6; color:#263327; }
  .wizbar .next, .share .native { color:#281e18; }
}
@media (prefers-reduced-motion:reduce) { .fx, .toast { transition:none; } .fx:hover { transform:none; } }
.hero h1 { white-space:pre-line; text-wrap:initial; }
.fx .thumb { aspect-ratio:1; }

/* every effect as a plain list of links (also what search engines follow) */
.all-effects { padding-bottom: 32px; }
.all-effects h2 { font-size: 20px; margin: 8px 0 4px; }
.all-effects h3 { font-size: 15px; margin: 16px 0 6px; color: var(--muted); }
.all-effects ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.all-effects li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.all-effects a { font-weight: 900; text-decoration: none; color: var(--ink); }
.all-effects a:hover { color: var(--chili); }
.all-effects small { font-size: 11px; color: var(--muted); font-weight: 700; }
.all-effects li > span { flex-basis: 100%; font-size: 12px; color: var(--muted); }
@media (max-width: 899px) { body:not(.step1) .all-effects { display: none; } }