:root{color-scheme:light;--paper:#fbf6e4;--ink:#18482f;--green:#236b55;--sky:#087bb5;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a54620;outline-offset:4px}
.hero{min-height:clamp(560px,56vw,760px);color:#fffdf0;background:linear-gradient(180deg,#00334f48,transparent 70%),var(--sky) url('./assets/meadow.jpg') center 55% / cover no-repeat;position:relative}
nav{max-width:1360px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(16px,4vw,54px);gap:12px}.brand{font-weight:900;font-size:clamp(15px,2.2vw,27px);white-space:nowrap;text-shadow:0 2px 12px #163844}.brand::before{content:'❧';margin-right:.35em}.nav-links{display:flex;gap:clamp(12px,3vw,40px);padding:9px clamp(12px,2.5vw,28px);border:1px solid #fff6;border-radius:40px;background:#155167ac;white-space:nowrap;font-size:clamp(13px,1.5vw,17px)}
.intro{text-align:center;max-width:720px;margin:clamp(24px,4vw,56px) auto 0;padding:0 16px;text-shadow:0 2px 12px #123d60}.domain{font-weight:800;letter-spacing:.13em;margin:0 0 8px}.intro h1{margin:0;font-family:"Hiragino Maru Gothic ProN","PingFang SC",sans-serif;font-size:clamp(45px,8vw,112px);font-weight:950;line-height:1.06;letter-spacing:-.055em}.intro p:not(.domain){font-size:clamp(15px,2vw,20px);margin:16px 0 20px}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:999px;background:#fff8de;color:#18482f;font-weight:800;padding:11px 22px;min-height:44px;text-shadow:none}.pill.secondary{background:#185d55e8;border-color:#fff4;color:#fffdf0}
main{position:relative;margin-top:-44px;border-radius:50% 50% 0 0 / 39px 39px 0 0;background:var(--paper);padding:27px clamp(16px,4vw,54px) 20px}.section{max-width:1150px;margin:auto;padding:14px 0 24px;scroll-margin-top:12px}h2{margin:0 0 20px;font-size:clamp(25px,4vw,39px);font-weight:900;letter-spacing:-.04em}#tools h2{text-align:center}#tools h2::before,#tools h2::after{content:'❧';font-size:.65em;margin:0 .55em;color:#72943b}.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.tile{display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left;align-items:center;gap:10px;color:inherit;background:#fffaf0;border:1px solid #e9dfc5;border-radius:21px;padding:12px;transition:transform .18s ease}.tile:hover{transform:translateY(-3px)}.tile-art{display:grid;place-items:center;grid-column:span 2;min-height:125px;border-radius:14px;font-size:64px;color:#fffdf2;text-shadow:0 2px 2px #0003;background:radial-gradient(ellipse at 25% 15%,#98bd69,transparent 65%),#548950}.text .tile-art{background:radial-gradient(ellipse at 75% 25%,#efcb76,transparent 65%),#c18d40}.keepsake .tile-art{background:radial-gradient(ellipse at 20% 10%,#a1cee2,transparent 65%),#327b9c}.tile strong{display:block;font-size:21px}.tile small{display:block;margin-top:4px;color:#3d5747;font-size:13px}.note{border-top:1px solid #dbd7bd;padding-top:24px}.note h2{font-size:27px;margin-bottom:8px}.note p{line-height:1.7;margin:0}footer{max-width:1150px;margin:auto;padding:18px clamp(16px,4vw,54px) 28px;display:flex;gap:12px;justify-content:space-between;font-size:13px}footer a{text-decoration:underline;text-underline-offset:3px}
dialog{border:1px solid #e2d9b9;border-radius:23px;background:var(--paper);color:var(--ink);width:min(490px,calc(100% - 32px));padding:22px}dialog::backdrop{background:#16382fb0}.dialog-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.close{min-width:44px;min-height:44px;border:1px solid #d1dbc4;background:#fffaf0;color:inherit;border-radius:50%;font-size:26px;line-height:1}label{display:grid;gap:5px;margin:12px 0;font-weight:700}input,textarea{width:100%;min-width:0;background:#fffdf6;border:1px solid #aab69c;border-radius:8px;padding:10px;color:#213e31}textarea{resize:vertical}output{display:block;font-weight:800;margin-top:18px}dialog .actions{justify-content:start}dialog .pill{background:#e1ebd5}
@media(max-width:620px){.hero{min-height:580px;background-position:42% 52%}.intro{margin-top:35px}.tools{grid-template-columns:1fr;gap:9px}.tile{grid-template-columns:72px minmax(0,1fr) auto;gap:12px;padding:8px 13px 8px 8px}.tile-art{grid-column:auto;min-height:60px;font-size:34px}.tile strong{font-size:18px}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}