:root { --ink:#173647; --ink-soft:#345668; --cream:#fff9ee; --leaf:#48a978; --leaf-dark:#267452; --petal:#ff709e; --sun:#ffd66b; --line:#d9eadf; --card:#ffffff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(165deg,#e3f6e9 0%,#fff9ee 45%,#fbe3ed 100%); color:var(--ink); font-family:"DM Sans",system-ui,sans-serif; }
button { font:inherit; }
.app { width:min(720px,100%); min-height:100svh; margin:0 auto; padding:20px 16px 32px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; }
.brand-flower { display:grid; place-items:center; width:36px; height:36px; border-radius:50% 48% 50% 48%; color:#fff; background:var(--petal); box-shadow:0 5px 0 #e85588; transform:rotate(-8deg); }
.overview-link { border:1px solid #bce3c9; border-radius:999px; padding:7px 10px; color:var(--leaf-dark); background:#effbf2; font-size:12px; font-weight:700; cursor:pointer; }
.hero { position:relative; overflow:hidden; padding:26px 24px; border-radius:28px; background:var(--ink); color:#fff; box-shadow:0 18px 34px rgba(24,57,72,.19); }
.hero::after { content:"✦  ✿  ✦"; position:absolute; right:-8px; top:12px; color:rgba(255,255,255,.13); font-size:52px; letter-spacing:14px; transform:rotate(16deg); }
.eyebrow { margin:0 0 7px; color:#9ce2bb; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { font-family:Fraunces,Georgia,serif; }
h1 { position:relative; z-index:1; max-width:480px; margin:0; font-size:clamp(32px,8vw,52px); line-height:.96; letter-spacing:-.04em; }
.hero p { position:relative; z-index:1; margin:14px 0 0; color:#c6dfd7; font-size:15px; }
.library-hero { padding-bottom:28px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.stat { padding:12px 9px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(255,255,255,.07); text-align:center; }
.stat strong { display:block; font-size:17px; }.stat span { color:#b7d0c9; font-size:11px; }
.map-card { margin:20px 0; overflow:hidden; border:1px solid #d1e8d8; border-radius:24px; background:#eff8ed; box-shadow:0 10px 24px rgba(42,94,70,.08); }
.map-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px 0; }.map-head strong { font-size:14px; }.map-head span { color:var(--leaf-dark); font-size:12px; font-weight:700; }
.overview-map { height:300px; margin-top:12px; }.flower-pin-wrap { background:transparent; border:0; }.flower-pin { display:grid; place-items:center; width:32px; height:32px; border:3px solid #fff; border-radius:50% 48% 50% 48%; color:#fff; background:var(--petal); box-shadow:0 3px 0 #dc4f80,0 4px 10px rgba(74,31,47,.24); font-size:20px; font-weight:800; transform:rotate(-8deg); }
.flower-stops { margin:20px 0; overflow:hidden; border:1px solid #d1e8d8; border-radius:18px; background:#fff; box-shadow:0 7px 18px rgba(42,94,70,.07); }.flower-stops summary { display:flex; justify-content:space-between; gap:12px; padding:13px 15px; color:var(--ink); cursor:pointer; font-size:13px; font-weight:800; list-style:none; }.flower-stops summary::-webkit-details-marker { display:none; }.flower-stops summary span:last-child { color:var(--leaf-dark); font-size:12px; }.flower-stops[open] summary { border-bottom:1px solid var(--line); }.flower-stops ol { display:grid; gap:0; max-height:330px; margin:0; padding:0; overflow:auto; list-style:none; }.flower-stops li { display:grid; grid-template-columns:25px 1fr; gap:9px; align-items:center; padding:10px 15px; border-bottom:1px solid #edf4ee; font-size:13px; }.flower-stops li:last-child { border-bottom:0; }.flower-stops li span { display:grid; place-items:center; width:23px; height:23px; border-radius:9px; background:#dcf4e5; color:var(--leaf-dark); font-size:11px; font-weight:800; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; margin:26px 4px 11px; }.section-head h2 { margin:0; font-size:25px; letter-spacing:-.03em; }.section-head span { color:var(--ink-soft); font-size:12px; }
.quest-library { display:grid; gap:10px; }.quest-card { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; padding:13px; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--ink); text-decoration:none; box-shadow:0 4px 0 rgba(23,54,71,.03); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }.quest-card:hover,.quest-card:focus-visible { transform:translateY(-2px); border-color:#80cda0; box-shadow:0 10px 18px rgba(42,94,70,.10); outline:none; }.quest-card-flower { display:grid; place-items:center; width:38px; height:38px; border:3px solid #fff; border-radius:50% 48% 50% 48%; background:var(--petal); color:#fff; box-shadow:0 3px 0 #e85588; font-size:21px; font-weight:800; transform:rotate(-8deg); }.quest-card-copy strong { display:block; font-size:14px; line-height:1.3; }.quest-card-copy small { color:var(--ink-soft); font-size:12px; }.quest-card-arrow { color:var(--leaf-dark); font-size:20px; font-weight:800; }.library-empty { margin:28px 4px; color:var(--ink-soft); }
.steps { display:grid; gap:10px; }.step { width:100%; display:grid; grid-template-columns:38px 1fr auto; gap:11px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--ink); text-align:left; box-shadow:0 4px 0 rgba(23,54,71,.03); cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }.step:hover,.step:focus-visible,.step.active { transform:translateY(-2px); border-color:#80cda0; box-shadow:0 10px 18px rgba(42,94,70,.10); outline:none; }.step-number { display:grid; place-items:center; width:36px; height:36px; border-radius:14px; color:var(--leaf-dark); background:#dcf4e5; font-weight:800; }.step-copy strong { display:block; font-size:14px; line-height:1.3; }.step-copy small { color:var(--ink-soft); font-size:12px; }.step-distance { color:var(--ink-soft); font-size:12px; white-space:nowrap; }
.step-page { min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; }.step-map-wrap { position:relative; min-height:320px; margin:20px 0; overflow:hidden; border:1px solid #cce6d5; border-radius:28px; background:#dff2e5; box-shadow:0 10px 22px rgba(42,94,70,.12); }.step-map { position:absolute; inset:0; }.leaflet-control-attribution { font-size:9px !important; }.step-nav { display:flex; justify-content:space-between; gap:9px; }.nav-button { padding:11px 14px; border:1px solid #bce3c9; border-radius:12px; color:var(--leaf-dark); background:#effbf2; font-weight:700; cursor:pointer; }.nav-button.primary { border-color:var(--petal); color:#fff; background:var(--petal); }.nav-button:disabled { opacity:.45; cursor:not-allowed; }
.footer { margin-top:25px; color:var(--ink-soft); font-size:12px; text-align:center; }.footer button { border:0; color:var(--leaf-dark); background:transparent; font-weight:700; text-decoration:underline; cursor:pointer; }
@media (min-width:700px) { .app { padding:32px 24px 48px; }.overview-map { height:380px; }.steps { grid-template-columns:1fr 1fr; } }