:root { --paper:#f7f0eb; --ink:#26201d; --muted:#897a72; --line:#d9ccc3; --rose:#df8277; --serif:"Songti SC","STSong","SimSun",serif; --hand:"Kaiti SC","STKaiti","KaiTi",cursive; --mono:"SFMono-Regular","Menlo","Consolas",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.2; z-index:9; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.tool-header, main { width:min(1120px,calc(100% - 84px)); margin:auto; }
.tool-header { height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand img { width:45px; height:31px; }
.brand > span { display:grid; gap:2px; }
.brand b { font-size:17px; letter-spacing:3px; }
.brand small { color:var(--muted); font:7px var(--mono); letter-spacing:1.8px; }
.tool-header nav { display:flex; gap:26px; }
.tool-header nav a { color:var(--ink); font-size:13px; text-decoration:none; }
.eyebrow { margin:0 0 18px; color:var(--muted); font:10px var(--mono); letter-spacing:1.4px; }
.tool-hero { min-height:455px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:60px; border-bottom:1px solid var(--line); }
.tool-hero h1 { margin:0; font-size:49px; line-height:1.5; font-weight:500; letter-spacing:-2px; }
.tool-hero h1 em { display:block; color:var(--rose); font:normal 56px/1.45 var(--hand); letter-spacing:1px; }
.hero-copy { max-width:620px; margin:22px 0; color:var(--muted); font-size:15px; line-height:1.9; }
.privacy-note { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.privacy-note span { color:var(--rose); font-size:21px; }
.hero-mark { width:185px; height:185px; display:grid; place-content:center; text-align:center; border:1px solid var(--rose); border-radius:50%; transform:rotate(7deg); }
.hero-mark span { color:var(--rose); font:500 55px/1 var(--serif); }
.hero-mark small { margin-top:9px; color:var(--muted); font:9px/1.5 var(--mono); letter-spacing:2px; }
.maker { display:grid; grid-template-columns:minmax(0, .82fr) minmax(360px, 1.18fr); gap:56px; padding:92px 0 118px; }
.maker-form { align-self:start; padding:34px; border:1px solid var(--line); background:#f3e8e1; }
.maker-form h2, .milestones h2, .seo-copy h2 { margin:0 0 30px; font-size:28px; }
.maker-form label { display:block; margin:16px 0; font-size:13px; }
.maker-form input[type="text"], .maker-form input[type="date"], .maker-form input:not([type]) { display:block; width:100%; margin-top:8px; padding:11px 2px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:15px var(--serif); outline:none; }
.maker-form input:focus { border-color:var(--rose); }
.name-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.maker-form fieldset { margin:24px 0 0; padding:0; border:0; }
.maker-form legend { margin-bottom:12px; font-size:13px; }
.swatch { display:inline-flex !important; align-items:center; margin:0 8px 0 0 !important; cursor:pointer; }
.swatch input { position:absolute; opacity:0; }
.swatch span { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid transparent; font-size:11px; }
.swatch span::before { content:""; width:15px; height:15px; border-radius:50%; background:#e8c4bd; }
.swatch.sage span::before { background:#aeb9a2; }
.swatch.night span::before { background:#383e4d; }
.swatch input:checked + span { border-color:var(--ink); }
.primary { width:100%; margin-top:27px; padding:14px 18px; border:0; background:var(--ink); color:var(--paper); font:14px var(--serif); cursor:pointer; }
.primary span { margin-left:10px; }
.form-status { min-height:18px; margin:11px 0 0; color:#a95e57; font-size:12px; }
.result { min-width:0; }
.card-frame { max-width:520px; margin:auto; padding:18px; background:#e9ddd5; box-shadow:0 25px 60px #4533291a; }
#anniversaryCanvas { display:block; width:100%; height:auto; background:#ead6cd; }
.result-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:17px; }
.result-actions button { padding:11px 8px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:12px var(--serif); cursor:pointer; }
.result-actions button:first-child { background:var(--ink); color:var(--paper); }
.result > p { color:var(--muted); font-size:11px; line-height:1.7; text-align:center; }
.milestones { padding:0 0 112px; }
.milestone-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.milestone-card { min-height:190px; padding:25px; }
.milestone-card + .milestone-card { border-left:1px solid var(--line); }
.milestone-card span { color:var(--rose); font:10px var(--mono); }
.milestone-card strong { display:block; margin:30px 0 9px; font-size:29px; font-weight:500; }
.milestone-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.seo-copy { padding:80px 0 120px; border-top:1px solid var(--line); }
.seo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:45px; }
.seo-grid article { padding:25px 0; border-top:2px solid var(--rose); }
.seo-grid h3 { margin:0 0 13px; font-size:17px; }
.seo-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.continue-link { display:inline-block; margin-top:45px; padding-bottom:5px; border-bottom:1px solid var(--rose); color:var(--rose); font-size:14px; text-decoration:none; }
.continue-link span { margin-left:9px; }
.back-to-top { position:fixed; z-index:20; right:max(18px,calc((100vw - 1120px)/2)); bottom:22px; width:46px; height:46px; display:grid; place-content:center; border:1px solid #6a585044; border-radius:50%; background:#f7f0ebeb; color:var(--ink); text-decoration:none; }
.back-to-top span { font:18px/1 var(--serif); text-align:center; }
.back-to-top small { font:6px/1 var(--mono); letter-spacing:1px; }
footer { display:flex; justify-content:center; align-items:center; gap:28px; padding:25px; background:#342b27; color:#d9c8bd; text-align:center; font:10px var(--mono); letter-spacing:1.5px; }
footer > div { display:grid; gap:7px; }
footer small { color:#a8968d; font:9px/1.5 var(--serif); letter-spacing:.3px; }
footer nav { display:flex; gap:15px; }
footer a { color:#d9c8bd; text-decoration:none; border-bottom:1px solid #74655e; }
@media (max-width:800px) {
  .tool-header, main { width:min(100% - 44px,1120px); }
  .tool-header { height:76px; }
  .tool-header nav a:last-child { display:none; }
  .tool-hero { min-height:510px; grid-template-columns:1fr; gap:0; padding:66px 0 46px; }
  .tool-hero h1 { font-size:36px; }
  .tool-hero h1 em { font-size:43px; }
  .hero-mark { width:112px; height:112px; justify-self:end; }
  .hero-mark span { font-size:35px; }
  .maker { grid-template-columns:1fr; gap:34px; padding:64px 0 86px; }
  .maker-form { padding:27px 22px; }
  .name-row { grid-template-columns:1fr; gap:0; }
  .card-frame { padding:10px; }
  .result-actions { grid-template-columns:1fr 1fr; }
  .result-actions button:last-child { grid-column:1/-1; }
  .milestone-grid { grid-template-columns:1fr 1fr; }
  .milestone-card:nth-child(3) { border-left:0; }
  .milestone-card:nth-child(n+3) { border-top:1px solid var(--line); }
  .seo-grid { grid-template-columns:1fr; }
  .seo-copy { padding:65px 0 90px; }
  footer { flex-direction:column; gap:12px; padding:27px 22px; }
}