:root{
  --pink:#ec1e7b;
  --pink-mid:#ff5fa2;
  --pink-soft:#ffd9e7;
  --pink-pale:#fff0f5;
  --ink:#16131a;
  --paper:#fbf9f7;
  --line:#16131a;
  --muted:#5f555a;
  --faint:#8a8490;
  --grid:rgba(22,19,26,.07);
}
*{box-sizing:border-box}
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  color:var(--ink);
  font-family:"Noto Sans JP","Archivo",sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit}

.hero,main,.foot{width:min(960px,calc(100% - 36px));margin:0 auto}

/* ---------- HERO ---------- */
.hero{padding:56px 0 28px}
.hero-inner{position:relative}
.hero-eyebrow{
  font-family:"Space Mono",monospace;font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--pink);
  display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;
}
.en-stamp{
  font-family:"Archivo Black",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,2.8rem);line-height:.9;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:10px;
}
.en-stamp em{font-style:normal;-webkit-text-stroke:1.6px var(--ink);color:transparent}
h1{
  font-family:"Noto Sans JP",sans-serif;font-weight:900;
  font-size:clamp(28px,6vw,46px);line-height:1.2;letter-spacing:-.01em;
  margin:0 0 14px;
}
h1 .mark{color:var(--pink)}
.lead{max-width:680px;color:var(--muted);margin:0;font-size:1rem}
.hero-daisy{
  position:absolute;right:0;top:-10px;font-size:5rem;color:var(--pink-soft);
  transform:rotate(12deg);line-height:1;user-select:none;
}

/* ---------- FORM ---------- */
.sheet{display:grid;gap:22px;margin-top:28px}
.card,.result{
  position:relative;border:2px solid var(--ink);border-radius:6px;
  background:#fff;box-shadow:6px 6px 0 var(--pink);padding:30px 26px;
}
.card:nth-child(odd){transform:rotate(-0.5deg)}
.card:nth-child(even){transform:rotate(0.5deg)}

.step{
  display:inline-grid;place-items:center;min-width:44px;height:34px;padding:0 10px;
  border:2px solid var(--ink);border-radius:4px;background:var(--ink);color:#fff;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:.9rem;letter-spacing:.04em;
  transform:rotate(-3deg);box-shadow:3px 3px 0 var(--pink);
}
.step-en{
  display:inline-block;margin-left:10px;font-family:"Space Mono",monospace;font-weight:700;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);
  vertical-align:middle;
}
h2{
  font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:1.3rem;
  margin:14px 0 4px;letter-spacing:.01em;
}
.field-note{
  font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.03em;
  color:var(--faint);margin:18px 0 8px;
}

label{display:grid;gap:8px;margin-top:16px;font-weight:700;font-size:.95rem}
input,textarea{
  width:100%;border:2px solid var(--line);border-radius:5px;background:#fff;
  color:var(--ink);padding:12px 13px;outline:none;transition:box-shadow .15s,border-color .15s;
}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:#b3acb0}
input:focus,textarea:focus{
  border-color:var(--pink);box-shadow:3px 3px 0 var(--pink);
}

/* choice + palette */
.choice-grid,.palette-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px;
}
.choice-grid label{
  grid-template-columns:auto 1fr;align-items:center;margin-top:0;
  border:2px solid var(--line);border-radius:5px;background:#fff;
  padding:11px 13px;color:var(--ink);font-weight:700;font-size:.9rem;
  cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;
}
.choice-grid label:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--pink)}
.choice-grid input{accent-color:var(--pink);width:18px;height:18px}
.choice-grid label:has(input:checked){background:var(--pink-pale);box-shadow:3px 3px 0 var(--pink)}

.palette-card{
  position:relative;display:grid;min-height:96px;align-content:end;
  border:2px solid var(--line);border-radius:5px;padding:10px;margin-top:0;
  cursor:pointer;overflow:hidden;transition:transform .12s,box-shadow .12s;
}
.palette-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.palette-card input{accent-color:var(--pink);width:18px;height:18px}
.palette-card:has(input:checked){box-shadow:4px 4px 0 var(--pink)}
.palette-card span{
  border:1.5px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.9);
  padding:5px 10px;font-size:13px;font-weight:800;justify-self:start;
}
.palette-pink{background:linear-gradient(135deg,#fff6f8,#ff9bc0)}
.palette-beige{background:linear-gradient(135deg,#fffdf8,#d8c0a2)}
.palette-blue{background:linear-gradient(135deg,#fbfdff,#9dc7d8)}
.palette-green{background:linear-gradient(135deg,#fbfff9,#9abf9c)}
.palette-mono{background:linear-gradient(135deg,#f9f7f6,#2d2929)}
.palette-mono span{background:rgba(255,255,255,.92)}
.palette-lavender{background:linear-gradient(135deg,#fffaff,#b9a0c9)}

/* ---------- RESULT ---------- */
.result{
  display:grid;gap:16px;margin:26px 0 40px;
  background:var(--ink);color:#fff;box-shadow:10px 10px 0 var(--pink);
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:26px 26px;background-color:var(--ink);
  transform:rotate(-0.5deg);
}
.result-en{margin-left:0;color:var(--pink-mid)}
.result h2{margin:0;color:#fff}
.result p{margin:0;color:#cfc7d4;font-size:.92rem}
#summary-output{
  background:#fffdfc;color:var(--ink);border:2px solid #000;border-radius:5px;
  font-family:"Space Mono",monospace;font-size:.84rem;line-height:1.7;
}
#summary-output:focus{box-shadow:3px 3px 0 var(--pink-mid);border-color:var(--pink-mid)}

.primary-button,.secondary-button{
  min-height:52px;border:2px solid var(--ink);border-radius:5px;
  padding:13px 22px;cursor:pointer;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1rem;letter-spacing:.01em;
  transition:transform .15s,box-shadow .15s;
}
.primary-button{background:var(--pink);color:#fff;box-shadow:5px 5px 0 #fff;justify-self:start}
.primary-button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #fff}
.secondary-button{background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--pink);justify-self:start}
.secondary-button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--pink)}

/* ---------- FOOTER ---------- */
.foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding:28px 0 48px;margin-top:8px;
}
.foot-name{font-family:"Archivo",sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.foot-mono{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}

:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}

@media (max-width:720px){
  .choice-grid,.palette-grid{grid-template-columns:1fr}
  .card,.result{transform:none}
  .hero-daisy{font-size:3.4rem;top:-4px}
  .primary-button,.secondary-button{width:100%;justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .card,.result{transform:none}
}