:root {
  --paper:#f7f3e9;
  --ink:#181818;
  --yellow:#f3d65e;
  --pink:#f0a6bd;
  --blue:#9fc9df;
  --green:#a9d69d;
  --cream:#fffaf0;
  --line:2px solid var(--ink);
  --shadow:5px 5px 0 var(--ink);
  --display:ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); }
a { color:inherit; text-decoration:none; }
button, textarea, input { font:inherit; color:inherit; }
header {
  height:74px; padding:0 clamp(18px,5vw,70px); display:flex; justify-content:space-between; align-items:center;
  border-bottom:var(--line); background:rgba(247,243,233,.92); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10;
}
.logo { display:flex; align-items:center; gap:10px; font:800 15px/1 var(--display); letter-spacing:.03em; }
.face { display:grid; place-items:center; width:39px; height:30px; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); transform:rotate(-4deg); font-size:12px; }
.face.small { display:inline-grid; width:34px; height:26px; margin-right:7px; }
nav { display:flex; gap:26px; font-size:13px; font-weight:700; }
nav a:hover { text-decoration:underline 2px; text-underline-offset:4px; }

main { overflow:hidden; }
.hero {
  min-height:680px; border-bottom:var(--line); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:90px 24px 80px;
  background:
    linear-gradient(rgba(24,24,24,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,24,24,.055) 1px,transparent 1px);
  background-size:38px 38px;
}
.hero::after {
  content:""; position:absolute; width:250px; height:250px; border:2px solid var(--ink); border-radius:50%;
  right:-95px; bottom:-80px; background:var(--pink);
}
.hero-sticker {
  position:absolute; top:60px; right:10%; border:var(--line); background:var(--blue); padding:10px 13px;
  font:900 12px/1 var(--display); transform:rotate(7deg); box-shadow:3px 3px 0 var(--ink);
}
.kicker { margin:0 0 20px; font-size:14px; font-weight:800; }
h1 { font:900 clamp(64px,10vw,150px)/.86 var(--display); letter-spacing:-.075em; margin:0; }
h1 span { display:inline-block; color:var(--ink); -webkit-text-stroke:2px var(--ink); text-shadow:5px 5px 0 var(--yellow); }
.sub { max-width:620px; font-size:17px; line-height:1.7; margin:30px 0 27px; }
.go-button { border:var(--line); background:var(--cream); padding:13px 18px; border-radius:999px; font-weight:800; box-shadow:3px 3px 0 var(--ink); }
.go-button:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.doodle { position:absolute; font:900 46px/1 var(--display); }
.d1 { left:8%; top:36%; transform:rotate(-20deg); }
.d2 { right:12%; top:33%; color:#d34f71; }
.d3 { left:15%; bottom:12%; transform:rotate(8deg); }

.tools { padding:clamp(70px,8vw,118px) clamp(18px,5vw,70px); max-width:1480px; margin:auto; }
.section-title { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:36px; }
.section-title > div { display:flex; align-items:center; gap:18px; }
.section-title span { width:44px; height:44px; display:grid; place-items:center; border:var(--line); border-radius:50%; font-weight:900; }
h2 { font:900 clamp(38px,5vw,68px)/1 var(--display); letter-spacing:-.045em; margin:0; }
.section-title p { margin:0; max-width:340px; line-height:1.6; }

.tool-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.tool-card {
  min-height:310px; border:var(--line); border-radius:24px; padding:28px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:.15s ease;
}
.tool-card:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.yellow { background:var(--yellow); }
.pink { background:var(--pink); }
.blue { background:var(--blue); }
.green { background:var(--green); }
.tool-top { display:flex; justify-content:space-between; align-items:center; }
.tool-top > span { font-size:34px; }
.tool-top small { border:1.5px solid var(--ink); border-radius:999px; padding:6px 9px; font-weight:900; }
.tool-card h3 { font:900 38px/1.05 var(--display); letter-spacing:-.04em; margin:56px 0 10px; }
.tool-card p { max-width:440px; margin:0; line-height:1.55; }
.tool-card button {
  margin-top:auto; align-self:flex-start; border:0; background:transparent; padding:14px 0 0;
  border-bottom:2px solid var(--ink); font-weight:900; cursor:pointer;
}

.today { border-top:var(--line); border-bottom:var(--line); background:var(--ink); color:var(--paper); }
.marquee { overflow:hidden; white-space:nowrap; border-bottom:2px solid var(--paper); padding:13px 0; font:900 13px/1 var(--display); letter-spacing:.08em; }
.marquee span { display:inline-block; animation:marquee 18s linear infinite; }
@keyframes marquee { to { transform:translateX(-50%); } }
.today-inner { min-height:480px; max-width:1050px; margin:auto; padding:75px 28px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.tiny { font:800 11px/1 var(--display); letter-spacing:.14em; opacity:.6; }
blockquote { font:800 clamp(35px,5.5vw,72px)/1.15 var(--display); letter-spacing:-.045em; margin:26px 0 38px; }
.today button { border:2px solid var(--paper); border-radius:999px; background:transparent; color:var(--paper); padding:11px 16px; font-weight:800; cursor:pointer; }

footer { min-height:120px; padding:0 clamp(18px,5vw,70px); display:flex; align-items:center; justify-content:space-between; gap:20px; font-weight:800; }
footer > div { display:flex; align-items:center; }
footer p { font-size:13px; }
footer a { text-decoration:underline 2px; text-underline-offset:3px; }

dialog {
  width:min(620px,calc(100vw - 28px)); border:var(--line); border-radius:24px; box-shadow:9px 9px 0 var(--ink);
  background:var(--cream); padding:0; color:var(--ink);
}
dialog::backdrop { background:rgba(24,24,24,.62); backdrop-filter:blur(3px); }
.close { position:absolute; top:17px; right:19px; border:var(--line); background:var(--paper); width:37px; height:37px; border-radius:50%; cursor:pointer; font-size:21px; line-height:1; }
.dialog-body { padding:50px 32px 32px; }
.dialog-body .emoji { font-size:44px; }
.dialog-body h3 { font:900 42px/1 var(--display); letter-spacing:-.04em; margin:18px 0 14px; }
.dialog-body p { line-height:1.65; }
.dialog-body textarea, .dialog-body input {
  width:100%; border:var(--line); background:#fff; border-radius:13px; padding:14px; outline:none;
}
.dialog-body textarea { min-height:130px; resize:vertical; }
.dialog-action { border:var(--line); background:var(--yellow); padding:12px 16px; border-radius:999px; box-shadow:3px 3px 0 var(--ink); cursor:pointer; font-weight:900; margin-top:13px; }
.result-box { min-height:88px; display:grid; place-items:center; border:var(--line); border-radius:16px; margin-top:18px; padding:20px; text-align:center; font:900 27px/1.25 var(--display); background:#fff; }
.hint { font-size:12px; opacity:.65; }

@media (max-width:760px) {
  nav a:not(:last-child) { display:none; }
  .hero { min-height:620px; }
  .hero-sticker { right:4%; top:40px; }
  h1 { font-size:clamp(64px,20vw,110px); }
  .d1 { display:none; }
  .section-title { display:block; }
  .section-title p { margin-top:15px; }
  .tool-grid { grid-template-columns:1fr; }
  .tool-card { min-height:280px; }
  footer { flex-direction:column; justify-content:center; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}