:root{--ivory:#f4f1e8;--card:#fbf9f3;--card-hover:#fffefb;--ink:#1f1d1a;--text:#5c5749;--muted:#8a8474;--placeholder:#b3ac99;--line:#e4decf;--clay:#cc785c;--f1:#ffc24b;--f1b:#ffa030;--f2:#ff7a18;--f2b:#f2551f;--f3:#e8442a;--flame:linear-gradient(90deg, var(--f1) 0%, var(--f2) 52%, var(--f3) 100%);--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--serif:"Fraunces", Georgia, "Times New Roman", serif;--mono:"Space Mono", ui-monospace, "SF Mono", Consolas, monospace;--shell:440px;--page:1140px;--gutter:clamp(20px, 4vw, 40px);--r-sm:8px;--r-md:11px;--r-lg:14px;--r-xl:18px;--r-2xl:20px;--shadow-card:0 1px 2px #1f1d1a0a;--shadow-pop:0 30px 60px -22px #1f1d1a73, 0 0 0 1px #0000000a;--shadow-flame:0 14px 26px -6px #e8442a80;--focus-ring:0 0 0 3px #ff7a1826}.hbf-logo{align-items:center;gap:12px;display:inline-flex}.hbf-glyph{background:var(--flame);color:#fff;border-radius:var(--r-md);place-items:center;display:grid;box-shadow:0 6px 18px #e8442a47}.hbf-glyph--sm{width:38px;height:38px}.hbf-glyph--lg{border-radius:var(--r-2xl);width:66px;height:66px;box-shadow:0 14px 30px -8px #e8442a73}.hbf-logo__name{font-family:var(--serif);letter-spacing:-.02em;font-size:22px;font-weight:600;line-height:1}.hbf-logo__sub{font-family:var(--mono);color:var(--muted);letter-spacing:.04em;margin-top:4px;font-size:11px;display:block}.btn{border-radius:var(--r-lg);cursor:pointer;border:0;justify-content:center;align-items:center;gap:8px;height:54px;padding:0 22px;font-size:15.5px;font-weight:600;text-decoration:none;transition:transform .12s,background .2s,opacity .2s;display:inline-flex}.btn:active{transform:scale(.985)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--block{width:100%}.btn--sm{height:44px;font-size:14px}.btn--primary{background:var(--ink);color:var(--ivory)}.btn--primary:not(:disabled):hover{background:#000}.btn--ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}.btn--ghost:not(:disabled):hover{border-color:var(--clay)}.btn__arrow{transition:transform .2s}.btn:not(:disabled):hover .btn__arrow{transform:translate(3px)}.icon-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-md);cursor:pointer;place-items:center;width:38px;height:38px;transition:border-color .2s,color .2s;display:grid}.icon-btn--plain{background:0 0;border:0}.icon-btn:hover{border-color:var(--clay)}.field{text-align:left;display:block}.field__label{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 2px;font-size:10.5px;display:block}.input{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);align-items:center;gap:10px;height:52px;padding:0 14px;transition:border-color .2s,box-shadow .2s;display:flex}.input:focus-within{border-color:var(--f2);box-shadow:var(--focus-ring)}.input__icon{color:var(--muted);flex:none}.input input{min-width:0;color:var(--ink);background:0 0;border:0;outline:0;flex:1;font-size:15px}.input input::placeholder{color:var(--placeholder)}.input--search{border-radius:var(--r-lg);height:46px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:14px}.badge{font-family:var(--mono);color:var(--f3);border-radius:var(--r-sm);background:#e8442a1a;align-items:center;padding:3px 8px;font-size:12px;font-weight:700;display:inline-flex}.tabs{border-bottom:1px solid var(--line);gap:22px;display:flex}.tab{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 0 11px;font-size:14px;font-weight:500;position:relative}.tab--on{color:var(--ink);font-weight:600}.tab--on:after{content:"";background:var(--flame);border-radius:3px 3px 0 0;height:3px;position:absolute;bottom:-1px;left:0;right:0}.segmented{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);gap:2px;padding:3px;display:inline-flex}.segmented button{border-radius:var(--r-sm);width:32px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.segmented button.on{background:var(--ink);color:var(--ivory)}.heatbar{flex:1;gap:2px;display:flex}.heatbar i{background:#eae3d3;border-radius:2px;flex:1;height:7px}.heat-label{font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-size:10.5px;font-weight:700}.fab{border-radius:var(--r-2xl);background:var(--flame);color:#fff;cursor:pointer;width:58px;height:58px;box-shadow:var(--shadow-flame);border:0;place-items:center;transition:transform .15s;display:grid}.fab:hover{transform:translateY(-2px)rotate(90deg)}.alert{text-align:left;color:var(--f3);border-radius:var(--r-md);background:#e8442a14;border:1px solid #e8442a33;padding:10px 12px;font-size:13.5px}.trail__cover{border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--ivory);height:150px;margin:-14px -14px 12px;position:relative;overflow:hidden}.trail__cover img{object-fit:cover;width:100%;height:100%;display:block}.trail__photo-empty{color:#fff;background:var(--flame);place-items:center;width:100%;height:100%;display:grid}.trail__thumb-row{align-items:flex-start;gap:12px;display:flex}.trail__thumb{aspect-ratio:1;border-radius:var(--r-md);background:var(--ivory);flex:0 0 84px;width:84px;height:84px;overflow:hidden}.trail__thumb img{object-fit:cover;width:100%;height:100%;display:block}.trail__main{flex:1;min-width:0}.trail--thumb .trail__stats{margin-top:10px}.trail--thumb .trail__heat{margin-top:12px}.trail__name{letter-spacing:-.01em;font-size:16.5px;line-height:1.15}.trail__loc{color:var(--muted);align-items:center;gap:4px;margin-top:4px;font-size:12px;display:flex}.trail__top{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.trail__added{font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex:none;padding-top:2px;font-size:10px}.trail__added--float{border-radius:var(--r-sm);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#1f1d1a6b;padding:5px 9px;position:absolute;top:10px;right:10px}.trail__stats{font-family:var(--mono);color:var(--text);gap:14px;margin-top:12px;font-size:11.5px;display:flex}.trail__stats b{color:var(--ink);font-weight:700}.trail__stats .k{color:var(--muted);margin-left:2px}.trail__heat{margin-top:12px}.login,.add-trail,.showcase,.center-page{width:100%;max-width:var(--shell);margin-inline:auto}.login{flex-direction:column;flex:1;justify-content:center;gap:26px;padding:32px 26px;display:flex}.login__intro{flex-direction:column;align-items:flex-start;gap:14px;display:flex}.login__title{letter-spacing:-.025em;margin-top:8px;font-size:34px;line-height:1.02}.login__title span{color:var(--clay);display:block}.login__tag{color:var(--text);max-width:260px;font-size:14.5px;line-height:1.5}.login__form{flex-direction:column;gap:12px;display:flex}.login__signup{text-align:center;color:var(--muted);margin-top:6px;font-size:13.5px}.home-bar{z-index:20;background:color-mix(in srgb, var(--ivory) 84%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block-end:1px solid var(--line);position:sticky;top:0}.home-bar__inner{width:min(100%, var(--page));padding:13px var(--gutter);flex-wrap:wrap;align-items:center;gap:12px;margin-inline:auto;display:flex}.home-bar__search{flex:100%;order:3}.home-bar__actions{align-items:center;gap:10px;margin-inline-start:auto;display:flex}.home-bar__new{display:none}.home{width:min(100%, var(--page));padding:clamp(20px, 3vw, 34px) var(--gutter) 104px;flex:1;margin-inline:auto}.home__masthead{flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-block-end:clamp(16px,2.4vw,26px);display:flex}.home__title{align-items:baseline;gap:9px;font-size:clamp(27px,3.4vw,40px);display:flex}.home__title .badge{transform:translateY(-3px)}.home__meta{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:11.5px}.trail-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(12px,1.6vw,20px);display:grid}.trail-grid .trail{flex-direction:column;display:flex}.trail-grid .trail__heat{margin-top:auto;padding-top:12px}.trail-grid .trail__name{text-wrap:balance}.trail-link{color:inherit;text-decoration:none;display:flex}.trail-link .trail{flex:1;transition:border-color .2s,box-shadow .2s}.trail-link:hover .trail{border-color:var(--clay);box-shadow:var(--shadow-pop)}.home__note{color:var(--muted);text-align:center;margin-top:8px;font-size:13.5px}.home__empty{text-align:center;color:var(--f2);flex-direction:column;align-items:center;gap:6px;margin-top:clamp(40px,8vh,80px);display:flex}.home__empty p{font-family:var(--serif);color:var(--ink);margin-top:4px;font-size:clamp(18px,2.2vw,22px)}.home__empty .home__note{font-family:var(--sans);color:var(--muted);max-width:280px;margin-top:0;font-size:13.5px}.app-fab{z-index:25;position:fixed;inset-block-end:max(24px, env(safe-area-inset-bottom));inset-inline-end:20px}@media (width>=900px){.home-bar__search{flex:0 340px;order:0;margin-inline-start:auto}.home-bar__new{display:inline-flex}.app-fab{display:none}}.add-trail{padding:clamp(24px, 4vh, 48px) var(--gutter);flex-direction:column;flex:1;justify-content:center;gap:clamp(20px,3vw,28px);display:flex}.add-trail__head{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.add-trail__title{margin-block-start:8px;font-size:clamp(27px,3vw,32px)}.add-trail__lead{color:var(--text);max-width:280px;font-size:14.5px;line-height:1.5}.add-trail__form{flex-direction:column;gap:20px;display:flex}.add-trail__group{border:0}.add-trail__where{color:var(--muted);font-size:13.5px}.add-trail__where b{color:var(--ink);font-weight:600}.add-trail__hint{color:var(--muted);margin-top:10px;font-size:13px;line-height:1.45}.dropzone{border:1px dashed var(--line);background:var(--card);min-height:104px;color:var(--muted);text-align:center;cursor:pointer;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:18px;font-size:14px;transition:border-color .2s,color .2s;display:flex}.dropzone:hover{border-color:var(--clay)}.dropzone--on{border-style:solid;border-color:var(--f3);color:var(--ink);font-weight:500}.dropzone span{overflow-wrap:anywhere}.dropzone input{display:none}.add-trail__rename{margin-top:16px}.sources{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;gap:14px;margin:12px 0 0 2px;font-size:10.5px;display:flex}.sources__item{color:var(--placeholder);transition:color .2s}.sources__item--on{color:var(--f3);text-shadow:0 0 18px #e8442a59;font-weight:700}.add-trail__scan{background:var(--line);border-radius:2px;height:2px;margin-top:14px;overflow:hidden}.add-trail__scan:after{content:"";background:var(--flame);border-radius:2px;width:38%;height:100%;animation:1.1s ease-in-out infinite scan;display:block}@keyframes scan{0%{transform:translate(-40%)}to{transform:translate(205%)}}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:500;transition:border-color .2s,background .2s,color .2s}.chip:hover{border-color:var(--clay)}.chip--on{background:var(--ink);border-color:var(--ink);color:var(--ivory);font-weight:600}.add-trail__done{flex-direction:column;gap:14px;display:flex}.add-trail__stamp{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--f3);align-items:center;gap:6px;font-size:11px;display:flex}.add-trail__actions{gap:10px;margin-top:4px;display:flex}.add-trail__actions .btn{flex:1;padding:0 14px;font-size:14.5px}.trail-page{width:100%;max-width:var(--shell);flex:1;margin-inline:auto;padding-block-end:60px}.trail-page__hero{background:var(--ivory);border-radius:0 0 var(--r-2xl) var(--r-2xl);height:clamp(200px,34vh,300px);position:relative;overflow:hidden}.trail-page__hero img{object-fit:cover;width:100%;height:100%;display:block}.trail-page__back{color:var(--ink);background:color-mix(in srgb, var(--card) 88%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:0;position:absolute;top:14px;left:14px}.trail-page__body{padding:22px var(--gutter) 0;flex-direction:column;gap:22px;display:flex}.trail-page__title{letter-spacing:-.02em;text-wrap:balance;font-size:clamp(25px,3vw,30px);line-height:1.1}.trail-page__head .trail__loc{margin-top:8px}.trail-page__desc{color:var(--text);font-size:14.5px;line-height:1.55}.trail-page__block{flex-direction:column;gap:10px;display:flex}.trail-page__stats{background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);grid-template-columns:repeat(2,1fr);gap:1px;display:grid;overflow:hidden}.stat{background:var(--card);flex-direction:column;gap:5px;padding:14px 16px;display:flex}.stat__label{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:10.5px}.stat__value{font-family:var(--mono);color:var(--ink);font-size:19px;font-weight:700}.stat__unit{color:var(--muted);margin-left:4px;font-size:11.5px;font-weight:400}.trail-page__actions{flex-direction:column;gap:10px;display:flex}.trail-page__dir{gap:10px;display:flex}.trail-page__dir .btn{flex:1;padding:0 12px;font-size:14.5px}.trail-embed{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--ivory);overflow:hidden}.trail-embed iframe{width:100%;height:min(var(--embed-h,400px), 70vh);border:0;display:block}.trail-embed__credit{color:var(--muted);font-size:11px;line-height:16px}.trail-embed__credit a{color:inherit;text-decoration:underline}@media (width>=640px){.trail-page{max-width:600px}.trail-page__stats{grid-template-columns:repeat(4,1fr)}}@media (width>=1000px){.trail-page{max-width:var(--page);padding:clamp(24px, 4vh, 44px) var(--gutter) 80px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;gap:clamp(28px,4vw,56px);display:grid}.trail-page__hero{border-radius:var(--r-2xl);height:min(72vh,560px);position:sticky;top:clamp(24px,4vh,44px)}.trail-page__body{gap:26px;padding:0}}.showcase{text-align:left;flex:1;padding:28px 22px 80px}.showcase__lead{color:var(--text);margin-top:8px;font-size:14px}.showcase__section{border-top:1px solid var(--line);margin-top:34px;padding-top:20px}.showcase__section>h2{font-size:13px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:700}.showcase__row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.showcase__stack{flex-direction:column;gap:12px;display:flex}.swatch-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;display:grid}.swatch{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}.swatch__chip{height:48px}.swatch__meta{font-family:var(--mono);color:var(--muted);padding:6px 8px;font-size:10px;line-height:1.4}.swatch__meta b{color:var(--ink);font-size:11px;display:block}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;display:grid}.icon-cell{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--muted);font-family:var(--mono);flex-direction:column;align-items:center;gap:6px;padding:12px 4px;font-size:9.5px;display:flex}.icon-cell svg{color:var(--ink)}.type-sample{flex-direction:column;gap:10px;display:flex}.type-sample small{font-family:var(--mono);color:var(--muted);font-size:10px}.center-page{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:40px;display:flex}@view-transition{navigation:auto}::view-transition-old(root){animation:.2s ease-out both fade-out}::view-transition-new(root){animation:.2s ease-in both fade-in}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background:var(--ivory);min-height:100svh;color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background-image:radial-gradient(1200px 600px at 85% -10%,#ff7a180f,#0000 60%),radial-gradient(900px 500px at 5% 110%,#cc785c0d,#0000 60%);background-attachment:fixed}#root{flex-direction:column;width:100%;min-height:100svh;display:flex}h1,h2,h3{font-family:var(--serif);letter-spacing:-.02em;color:var(--ink);font-weight:600;line-height:1.1}a{color:var(--clay);font-weight:600;text-decoration:none}input,button{font-family:inherit}:focus-visible{outline:2px solid var(--f2);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}