:root {
  --paper: #ebe8df;
  --paper-2: #f7f4ec;
  --ink: #171816;
  --muted: #797b74;
  --line: rgba(23, 24, 22, 0.14);
  --coral: #ff654d;
  --lime: #c7f15b;
  --blue: #2855ed;
  --shadow: 0 24px 70px rgba(25, 27, 24, 0.18);
  font-family: "Manrope", "Aptos", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

html[data-theme="dark"] {
  --paper: #141512;
  --paper-2: #1d1f1b;
  --ink: #f2f0e8;
  --muted: #a7aaa0;
  --line: rgba(242,240,232,.16);
  --shadow: 0 24px 70px rgba(0,0,0,.42);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow: hidden; background: var(--paper); }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .22; z-index: 100; mix-blend-mode: multiply; 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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"); }
.app-shell { height: 100vh; position: relative; overflow: hidden; }
.topbar { height: 74px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); position: relative; z-index: 30; background: rgba(235,232,223,.88); backdrop-filter: blur(18px); }
html[data-theme="dark"] .topbar { background: rgba(20,21,18,.9); }
html[data-theme="dark"] .nearby-panel,
html[data-theme="dark"] .profile-view { background: var(--paper-2); }
html[data-theme="dark"] .pulse-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .feed-card,
html[data-theme="dark"] .modal { background: #20221e; }
html[data-theme="dark"] .coral-card,
html[data-theme="dark"] .feed-card.feature { background: #c94d3b; }
html[data-theme="dark"] .mapbox-map,
html[data-theme="dark"] .mapbox-fallback { filter: invert(.9) hue-rotate(180deg) brightness(.58) saturate(.65); }
html[data-theme="dark"] .noise { opacity: .1; }
html[data-theme="dark"] .live-pill,
html[data-theme="dark"] .location-chip,
html[data-theme="dark"] .mode-switch,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .round-button,
html[data-theme="dark"] .map-caption,
html[data-theme="dark"] .note-preview,
html[data-theme="dark"] .city-reveal { background:#20221e; color:#f2f0e8; border-color:rgba(255,255,255,.22); }
html[data-theme="dark"] .person span,
html[data-theme="dark"] .composer-body,
html[data-theme="dark"] .google-button,
html[data-theme="dark"] .input-label input,
html[data-theme="dark"] .emoji-picker button,
html[data-theme="dark"] .map-actions,
html[data-theme="dark"] .poll-builder input,
html[data-theme="dark"] .photo-caption-input { background:#2a2d27; color:#f2f0e8; }
html[data-theme="dark"] .paper,
html[data-theme="dark"] .doodle-draw,
html[data-theme="dark"] .note-media img,
html[data-theme="dark"] .feed-media-preview { background:#e8e3d6; color:#171816; }
html[data-theme="dark"] .paper,
html[data-theme="dark"] .badge-card,
html[data-theme="dark"] .audio-player,
html[data-theme="dark"] .unlock-button,
html[data-theme="dark"] .identity-preview,
html[data-theme="dark"] .note-pin.lime { color:#171816; }
html[data-theme="dark"] .paper p { color:#171816; }
html[data-theme="dark"] .trail-pin { background:#2a2d27; }
html[data-theme="dark"] .place-tag { background:rgba(255,255,255,.09); }
html[data-theme="dark"] .photo-caption,
html[data-theme="dark"] .feed-card.visual .feed-card-head { background:#20221e; }
html[data-theme="dark"] .pulse-card.photo-card { background:#20221e; }
html[data-theme="dark"] .settings-card button:hover { background:rgba(255,255,255,.07); }
html[data-theme="dark"] .city-reveal small { color:#b3b6ac; }
html[data-theme="dark"] .mode-switch { background:#20221e; border-color:rgba(255,255,255,.22); }
html[data-theme="dark"] .mode-button { color:#d4d7cf; }
html[data-theme="dark"] .mode-button.is-active { background:#f2f0e8; color:#171816; box-shadow:0 0 0 1px rgba(255,255,255,.35); }
html[data-theme="dark"] .mode-button:nth-child(2).is-active { background:var(--coral); color:#171816; }
html[data-theme="dark"] .mode-button small { opacity:.72; }
html[data-theme="dark"] .place-button { background:#f2f0e8; color:#171816; border:1px solid rgba(255,255,255,.35); box-shadow:0 12px 35px rgba(0,0,0,.5); }
html[data-theme="dark"] .place-button span { color:#3153c9; }
html[data-theme="dark"] .mapbox-status,
html[data-theme="dark"] .photo-picker { background:#242620; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -1px; }
.brand-mark, .onboarding-logo { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50% 50% 48% 52% / 53% 44% 56% 47%; color: var(--paper-2); background: var(--ink); font-family: Georgia, serif; font-style: italic; font-size: 24px; transform: rotate(-6deg); }
.brand-dot { color: var(--coral); }
.live-pill { justify-self: center; border: 1px solid var(--line); background: rgba(247,244,236,.75); border-radius: 99px; padding: 9px 14px; font: 500 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .5px; }
.live-dot { width: 7px; height: 7px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,101,77,.13); animation: blink 1.7s infinite; }
.view { display: none; position: absolute; inset: 74px 0 0; padding-bottom: 76px; overflow: auto; }
.view.is-active { display: block; animation: view-in .35s ease both; }
.map-view.is-active { display: grid; grid-template-columns: minmax(0, 1fr) 365px; overflow: hidden; }
.map-stage { position: relative; overflow: hidden; cursor: grab; isolation: isolate; background: #deddd4; }
.map-stage:active { cursor: grabbing; }
.map-location-loader { position:absolute; inset:0; z-index:45; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:28px; text-align:center; background:var(--paper); opacity:1; visibility:visible; transition:opacity .55s ease,visibility .55s ease; }
.map-location-loader b { font-size:18px; letter-spacing:-.5px; }
.map-location-loader small { max-width:310px; color:var(--muted); font-size:10px; line-height:1.55; }
.map-location-loader button { margin-top:5px; padding:10px 14px; border:1px solid var(--ink); border-radius:9px; background:var(--lime); box-shadow:3px 3px 0 var(--ink); font-size:9px; font-weight:800; }
.map-loading-ring { width:47px; height:47px; margin-bottom:6px; border:4px solid rgba(40,85,237,.16); border-top-color:var(--blue); border-right-color:var(--coral); border-radius:50%; animation:map-loading-spin .8s linear infinite; }
.map-location-loader.has-error .map-loading-ring { animation:none; border-color:var(--coral); }
.map-stage.map-location-ready .map-location-loader { opacity:0; visibility:hidden; pointer-events:none; }
.mapbox-fallback { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.96); opacity: 0; transition: opacity .25s; }
.map-stage.mapbox-static-ready .mapbox-fallback { opacity: 1; }
.map-stage.mapbox-ready .mapbox-fallback { opacity: 0; }
.mapbox-map { position: absolute; inset: 0; z-index: 2; opacity:0; transition:opacity .55s ease; }
.map-stage.map-location-ready .mapbox-map { opacity:1; }
.city-reveal { position:relative; z-index:1; justify-self:end; display:flex; align-items:center; gap:10px; min-width:190px; min-height:52px; padding:7px 13px 7px 8px; border:1px solid transparent; border-radius:14px; background:transparent; color:var(--ink); overflow:hidden; opacity:0; visibility:hidden; transform:translateY(12px); }
.city-reveal[hidden] { display:none !important; }
.city-reveal.is-visible { opacity:1; visibility:visible; animation:city-rise .48s cubic-bezier(.2,.9,.25,1) forwards; }
.city-reveal:after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.72) 50%,transparent 70%); transform:translateX(-130%); }
.city-reveal.is-scrambling:after { animation:city-scan .65s linear infinite; }
.city-locator { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--coral); }
.city-locator svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.city-copy { min-width:0; text-align:left; }
.city-reveal small,.city-reveal b { display:block; }
.city-reveal small { margin-bottom:2px; font:500 7px "DM Mono",monospace; letter-spacing:1.4px; color:var(--muted); }
.city-reveal b { overflow:hidden; text-overflow:ellipsis; font:800 14px "DM Mono",monospace; text-transform:uppercase; white-space:nowrap; letter-spacing:.4px; }
.city-reveal.is-resolved { animation:city-resolve .48s cubic-bezier(.2,1.4,.4,1); }
.map-canvas { position: absolute; z-index: 3; width: 125%; height: 125%; left: -12.5%; top: -12.5%; transition: transform .4s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.map-canvas.is-dragging { transition: none; }
.city-map { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.85); }
.map-stage.mapbox-ready .map-canvas { inset: 0; width: 100%; height: 100%; left: 0; top: 0; }
.map-stage.mapbox-static-ready .city-map,
.map-stage.mapbox-ready .city-map { display: none; }
.map-stage.mapbox-ready .radius-ring { width: auto; height: auto; aspect-ratio: auto; top: 88px; border: 0; background: none; }
.map-stage.mapbox-ready .radius-ring span { top: 0; }
.map-stage.mapbox-ready .note-pin,
.map-stage.mapbox-ready .walker { pointer-events: auto; }
.mapboxgl-marker.note-pin { left: 0; top: 0; z-index:8 !important; transition: none !important; }
.mapboxgl-marker.note-pin:hover { filter: brightness(1.04); }
.mapboxgl-marker.walker { left: 0; top: 0; animation: none !important; transition: none !important; }
.mapboxgl-marker.user-location { position:absolute; left:0; top:0; z-index:2147483000 !important; transition:none !important; }
.mapboxgl-ctrl-bottom-left { bottom: 76px; }
.mapboxgl-ctrl-bottom-right { bottom: 76px; }
.mapboxgl-ctrl-attrib { font: 400 9px "DM Mono", monospace; background: rgba(247,244,236,.78) !important; }
.radius-ring { position: absolute; top: 50%; left: 50%; width: min(67vw, 690px); aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px dashed rgba(40,85,237,.52); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(40,85,237,.025) 63%, rgba(41,42,40,.13) 64%); }
.radius-ring span { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); background: var(--blue); color: white; padding: 7px 10px; border-radius: 99px; font: 500 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .7px; white-space: nowrap; }
.post-ring { display: none; width: min(35vw, 340px); border-color: rgba(255,101,77,.75); background: radial-gradient(circle, rgba(255,101,77,.03) 63%, rgba(41,42,40,.16) 64%); }
.post-ring span { background: var(--coral); }
body.post-mode .read-ring { display: none; }
body.post-mode .post-ring { display: block; }
.note-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); display: flex; align-items: center; gap: 5px; min-width: 48px; height: 38px; padding: 4px 7px; border-radius: 20px 20px 20px 5px; border: 2px solid var(--paper-2); background: var(--coral); box-shadow: 0 6px 14px rgba(23,24,22,.2); transition: filter .15s; z-index: 4; }
.note-pin:hover { transform: translate(-50%,-58%) scale(1.08); }
.pin-avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.78); font-size: 13px; }
.pin-count { font: 700 10px "DM Mono", monospace; }
.note-pin.ink { background: var(--ink); color: white; }
.note-pin.lime { background: var(--lime); }
.note-pin.photo { width: 49px; height: 49px; padding: 3px; border-radius: 50% 50% 50% 8px; }
.mini-photo { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(#7a82b7 0 35%, #f68662 36% 57%, #252f3d 58%); }
.note-pin.photo .pin-count { position: absolute; right: -17px; top: -9px; background: var(--paper-2); color: var(--ink); border-radius: 20px; padding: 3px 5px; }
.note-pin.locked { min-width: 34px; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #a9aaa4; color: #696a66; filter: grayscale(1); opacity: .72; }
.note-pin.locked svg { width: 18px; }
.walker { position: absolute; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--ink); z-index: 3; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.walker:before, .walker:after { content:""; position:absolute; inset:-4px; z-index:-1; border:2px solid var(--blue); border-radius:50%; opacity:0; animation:user-pulse 2.8s ease-out infinite; }
.walker:after { animation-delay:1.4s; }
.walker span { font-size: 18px; }
.walker i, .person i { position: absolute; right: 0; bottom: 1px; width: 9px; height: 9px; background: #53cf72; border: 2px solid var(--paper-2); border-radius: 50%; }
.walker em { position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%); padding:3px 6px; border:1px solid var(--ink); border-radius:5px; background:var(--paper-2); color:var(--ink); box-shadow:2px 2px 0 var(--ink); font:normal 700 7px "DM Mono", monospace; letter-spacing:.8px; white-space:nowrap; }
.walker.is-high-fived,.person.is-high-fived { filter:saturate(.5); opacity:.72; cursor:default; }
.walker.is-high-fived:after { content:"✓"; z-index:4; inset:auto -4px -4px auto; width:16px; height:16px; display:grid; place-items:center; border:2px solid white; border-radius:50%; background:#53cf72; color:#171816; opacity:1; animation:none; font:800 8px "DM Mono",monospace; }
.walker-one { left: 53%; top: 66%; }
.walker-two { left: 33%; top: 35%; }
.user-location { display:none; position:relative; z-index:2147483000; width:62px; height:62px; padding:0; border:0; border-radius:50%; background:transparent; pointer-events:auto; cursor:pointer; overflow:visible; filter:drop-shadow(0 5px 10px rgba(40,85,237,.25)); }
.user-location.has-fix { display: block; }
.user-location span { position:absolute; z-index:2; left:50%; top:50%; display:block; width:36px; height:36px; border-radius:50%; background:var(--blue); border:6px solid white; box-shadow:0 4px 16px rgba(40,85,237,.58); transform:translate(-50%,-50%); }
.user-location span:after { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; background:white; transform:translate(-50%,-50%); }
.user-location i { position:absolute; inset:0; border:3px solid rgba(40,85,237,.44); border-radius:50%; animation:location-wave 2s infinite; }
.user-location em { position:absolute; z-index:3; left:50%; top:calc(100% + 2px); transform:translateX(-50%); padding:4px 8px; border:2px solid white; border-radius:99px; background:var(--blue); color:white; box-shadow:0 3px 0 rgba(23,24,22,.85); font:normal 800 8px "DM Mono",monospace; letter-spacing:1px; white-space:nowrap; }
.self-speech { position:absolute; z-index:5; left:50%; bottom:calc(100% + 12px); width:max-content; max-width:190px; padding:9px 12px; border:1px solid var(--ink); border-radius:12px 12px 12px 3px; background:var(--paper-2); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font:700 10px/1.35 Manrope,sans-serif; white-space:normal; opacity:0; visibility:hidden; transform:translate(-50%,8px) scale(.82); transform-origin:50% 100%; pointer-events:none; }
.self-speech:after { content:""; position:absolute; left:50%; top:100%; width:10px; height:10px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--paper-2); transform:translate(-50%,-5px) rotate(45deg); }
.self-speech.is-speaking { visibility:visible; animation:self-speech-pop 2.35s cubic-bezier(.2,.9,.25,1) both; }
.user-location.is-tapped span { animation:self-core-shake .42s ease; }
.user-location.is-tapped em { animation:self-label-shake .42s ease; }
.drop-pin { display: none; position: absolute; left: 50%; top: 49%; z-index: 15; transform: translate(-50%,-100%); transform-origin: center bottom; pointer-events: none; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.drop-head { width: 48px; height: 48px; display: grid; place-items: center; color: white; background: var(--coral); border: 4px solid var(--paper-2); border-radius: 50% 50% 50% 7px; font-size: 28px; box-shadow: 0 8px 20px rgba(255,101,77,.35); transform: rotate(-45deg); }
.drop-head::first-letter { transform: rotate(45deg); }
.drop-shadow { width: 28px; height: 8px; margin: 18px auto 0; border-radius: 50%; background: rgba(0,0,0,.22); filter: blur(3px); }
body.post-mode .drop-pin { display: block; }
body.post-mode .drop-pin.is-lifted { transform: translate(-50%,-190%) scale(1.09); transition-duration: .16s; }
body.post-mode .drop-pin.is-lifted .drop-shadow { transform: scale(.52); opacity: .42; }
body.post-mode .drop-pin.is-slamming { animation: pin-slam .42s cubic-bezier(.2,.9,.25,1); }
.drop-shadow { transition: transform .18s, opacity .18s; }
body.post-mode .user-location { opacity:1; }
.mode-switch { position: absolute; z-index: 20; top: 22px; left: 50%; transform: translateX(-50%); display: flex; padding: 4px; border: 1px solid rgba(23,24,22,.12); border-radius: 16px; background: rgba(247,244,236,.91); box-shadow: 0 10px 30px rgba(23,24,22,.12); backdrop-filter: blur(15px); }
.mode-button { min-width: 128px; display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 12px; background: transparent; border-radius: 12px; }
.mode-button.is-active { background: var(--ink); color: white; }
.mode-button:nth-child(2).is-active { background: var(--coral); color: var(--ink); }
.mode-icon { font-size: 20px; }
.mode-button b, .mode-button small { display: block; }
.mode-button b { font-size: 12px; }
.mode-button small { opacity: .58; font: 400 8px "DM Mono", monospace; text-transform: uppercase; margin-top: 2px; }
.map-actions { position:absolute; right:20px; bottom:108px; z-index:18; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(23,24,22,.2); border-radius:10px; background:rgba(247,244,236,.96); box-shadow:0 5px 15px rgba(0,0,0,.22); backdrop-filter:blur(10px); }
.round-button, .icon-button { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(247,244,236,.9); box-shadow:0 8px 20px rgba(0,0,0,.1); font-size:22px; }
.map-actions .round-button { width:44px; height:44px; border-radius:0; background:transparent; box-shadow:none; color:var(--ink); font:500 25px/1 Arial,sans-serif; transition:background .15s, transform .15s; }
.map-actions .round-button + .round-button { border-top:1px solid rgba(23,24,22,.16); }
.map-actions .round-button:hover { background:rgba(23,24,22,.07); }
.map-actions .round-button:active { background:rgba(23,24,22,.12); transform:scale(.94); }
.map-actions .locate-control { border-top:2px solid rgba(23,24,22,.22) !important; }
.round-button svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
html[data-theme="dark"] .map-actions { background:rgba(32,34,30,.96); border-color:rgba(255,255,255,.24); }
html[data-theme="dark"] .map-actions .round-button { color:#f2f0e8; }
html[data-theme="dark"] .map-actions .round-button + .round-button { border-color:rgba(255,255,255,.18); }
html[data-theme="dark"] .map-actions .locate-control { border-color:rgba(255,255,255,.26) !important; }
html[data-theme="dark"] .map-actions .round-button:hover { background:rgba(255,255,255,.1); }
.map-caption { position: absolute; left: 20px; bottom: 22px; z-index: 12; padding: 9px 12px; border-radius: 8px; background: rgba(247,244,236,.84); backdrop-filter: blur(10px); font: 500 9px "DM Mono", monospace; letter-spacing: .4px; }
.pulse-mark { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--coral); }
.place-button { display: none; position: absolute; left: 50%; bottom: 28px; z-index: 20; transform: translateX(-50%); background: var(--ink); color: white; padding: 14px 18px; border-radius: 99px; font-size: 12px; font-weight: 800; box-shadow: 0 12px 35px rgba(0,0,0,.25); }
.place-button span { color: var(--lime); padding-left: 12px; }
body.post-mode .place-button { display: block; }
body.post-mode .map-caption { display: none; }
.nearby-panel { overflow-y: auto; border-left: 1px solid var(--line); background: var(--paper-2); padding: 24px 22px 105px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.eyebrow { display: block; font: 500 9px "DM Mono", monospace; letter-spacing: 1.3px; color: var(--muted); margin-bottom: 7px; }
.panel-heading h2, .page-head h1, .profile-hero h1 { margin: 0; font-size: 29px; letter-spacing: -1.5px; }
.icon-button { width: 34px; height: 34px; box-shadow: none; border: 1px solid var(--line); font-size: 13px; }
.people-strip { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; background: transparent; font-size: 17px; }
.person span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: white; }
.person b { font-size: 8px; font-weight: 700; }
.person.more span { font: 600 10px "DM Mono", monospace; background: var(--ink); color: white; }
.pulse-card { border: 1px solid var(--line); border-radius: 15px; padding: 14px; margin-bottom: 12px; background: #fffdf7; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.pulse-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(23,24,22,.08); }
.coral-card { background: var(--coral); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.card-top, .feed-card-head, .identity { display: flex; align-items: center; }
.card-top { gap: 9px; }
.avatar-bubble { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); border: 1px solid rgba(23,24,22,.18); }
.card-top div { display: flex; flex-direction: column; }
.card-top b, .identity b { font-size: 11px; }
.card-top small, .identity small { font: 400 8px "DM Mono", monospace; opacity: .62; }
.trend { margin-left: auto; font: 700 10px "DM Mono", monospace; }
.pulse-card > p { font-size: 14px; line-height: 1.42; font-weight: 700; margin: 16px 0 20px; }
.card-footer { display: flex; justify-content: space-between; font: 500 8px "DM Mono", monospace; text-transform: uppercase; }
.photo-card { padding: 0; overflow: hidden; }
.photo-block, .feed-photo { min-height: 135px; position: relative; display: flex; align-items: flex-end; padding: 12px; overflow: hidden; background: linear-gradient(175deg,#4f67a0 0 35%,#ee8c70 36% 55%,#8b5549 56% 58%,#17232b 59%); }
.photo-block:after, .feed-photo:after { content:""; position:absolute; left:0; right:0; bottom:0; height:42%; opacity:.7; background: repeating-linear-gradient(88deg, transparent 0 35px, #111a20 36px 47px); clip-path: polygon(0 80%,12% 40%,25% 65%,36% 15%,46% 66%,56% 34%,68% 72%,79% 20%,91% 62%,100% 38%,100% 100%,0 100%); }
.sun-orb { position: absolute; width: 35px; height: 35px; border-radius: 50%; background: #ffd277; top: 45%; left: 33%; box-shadow: 0 0 30px #ffb05f; }
.photo-block span, .feed-photo span { position: relative; z-index: 2; color: white; font: 500 8px "DM Mono", monospace; }
.photo-caption { display: flex; justify-content: space-between; padding: 14px; }
.photo-caption b { font-size: 10px; }
.photo-caption p { margin: 4px 0 0; font-size: 11px; }
.photo-caption > span { font: 700 10px "DM Mono", monospace; }
.see-feed { width: 100%; display: flex; justify-content: space-between; padding: 15px 2px; background: transparent; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 800; }
.bottom-nav { position: fixed; z-index: 40; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(23,24,22,.16); border-radius: 22px; background: rgba(247,244,236,.91); backdrop-filter: blur(20px); box-shadow: 0 12px 38px rgba(23,24,22,.18); }
.nav-button { width: 80px; height: 54px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; border-radius: 17px; background: transparent; color: #777970; }
.nav-button svg { width: 20px; }
.nav-button span { font-size: 8px; font-weight: 800; }
.nav-button.is-active { background: var(--ink); color: white; }
.nav-button.map-button.is-active { background: var(--coral); color: var(--ink); }
.note-preview { position: absolute; z-index: 25; width: 335px; left: 50%; top: 50%; transform: translate(-50%, -42%); border: 1px solid var(--ink); border-radius: 16px; padding: 17px; background: var(--paper-2); box-shadow: 6px 6px 0 var(--ink), var(--shadow); opacity: 0; visibility: hidden; transition: .25s ease; }
.note-preview.is-open { opacity: 1; visibility: visible; transform: translate(-50%,-50%); }
.note-preview.from-bookmark:before { content:"SAVED · VIEWABLE ANYWHERE"; display:block; margin:-2px 76px 12px 0; color:var(--coral); font:700 8px "DM Mono",monospace; letter-spacing:.8px; }
.close-button { position: absolute; top: 11px; right: 11px; width: 30px; height: 30px; z-index: 5; display: grid; place-items: center; border-radius: 50%; background: rgba(23,24,22,.08); font-size: 21px; }
.note-delete-button { margin-left:auto; padding:6px 9px; color:var(--coral); }
.note-delete-button + .bookmark { margin-left:0; }
.note-delete-button:hover { background:rgba(255,101,77,.13); border-color:var(--coral); }
.note-delete-button svg,.trail-delete svg { width:17px; height:17px; }
.note-meta { display: flex; align-items: center; gap: 9px; padding-right: 26px; }
.note-meta > div { display: flex; flex-direction: column; }
.profile-name { padding: 0; background: none; text-align: left; font-size: 11px; font-weight: 800; }
.note-meta div span { font: 400 8px "DM Mono", monospace; color: var(--muted); }
.translate-button { margin-left: auto; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: transparent; font: 600 8px "DM Mono", monospace; }
.note-copy { margin: 18px 0 12px; font-size: 17px; font-weight: 700; line-height: 1.42; letter-spacing: -.3px; }
.note-media:empty { display:none; }
.note-media { margin:12px 0; }
.note-media img { display:block; width:100%; max-height:240px; object-fit:cover; border:1px solid var(--ink); border-radius:10px; background:#fffdf7; }
.note-media img.doodle { object-fit:contain; }
.note-media audio { width:100%; }
.note-media .feed-poll-options { margin:0; }
.note-place { font-size: 9px; color: var(--muted); }
.note-stats { display: flex; align-items: center; gap: 6px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.vote, .stat-button, .feed-actions button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: transparent; font: 600 10px "DM Mono", monospace; }
.vote.up.is-voted, .vote.up:hover { background: var(--lime); border-color: var(--ink); }
.vote.is-voted { background: var(--coral); border-color: var(--ink); }
.bookmark { margin-left: auto; padding:6px 9px; }
.bookmark svg,.feed-bookmark svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; }
.bookmark.is-bookmarked,.feed-bookmark.is-bookmarked { background:var(--ink); color:var(--coral); }
.bookmark.is-bookmarked svg,.feed-bookmark.is-bookmarked svg { fill:currentColor; }

/* Feed */
.feed-view, .profile-view { background: var(--paper); padding: 52px max(5vw, 28px) 120px; }
.page-head { max-width: 1080px; margin: 0 auto 30px; display: flex; justify-content: space-between; align-items: end; }
.page-head h1, .profile-hero h1 { font-size: clamp(42px, 7vw, 82px); line-height: .95; letter-spacing: -5px; }
.new-post { background: var(--coral); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 13px 18px; border-radius: 10px; font-size: 11px; font-weight: 800; }
.feed-filters { max-width: 1080px; margin: 0 auto 24px; display: flex; gap: 7px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.filter { padding: 9px 14px; border-radius: 99px; background: transparent; font: 600 10px "DM Mono", monospace; }
.filter.is-active { background: var(--ink); color: white; }
.feed-grid { max-width: 1080px; margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.feed-card { display: flex; flex-direction: column; min-height: 310px; padding: 20px; border: 1px solid var(--ink); border-radius: 18px; background: var(--paper-2); box-shadow: 4px 4px 0 var(--ink); transition: transform .3s, opacity .3s; }
.feed-card:hover { transform: translateY(-3px) rotate(-.2deg); }
.feed-card-head { justify-content: space-between; }
.feed-card-head > button { background: transparent; }
.owned-card-delete { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:var(--muted); }
.owned-card-delete:hover { background:rgba(255,101,77,.13); color:var(--coral); }
.owned-card-delete svg { width:16px; }
.identity { gap: 9px; }
.identity div { display: flex; flex-direction: column; }
.big-quote { margin: 28px 0 14px; font-size: clamp(24px,3vw,36px); line-height: 1.15; letter-spacing: -1.4px; font-weight: 800; }
.medium-quote { font-size: 23px; font-weight: 800; letter-spacing: -.8px; }
.feed-card.feature { background: var(--coral); }
.place-tag { align-self: flex-start; margin: 16px 0; padding: 7px 10px; border-radius: 99px; background: rgba(255,255,255,.4); font: 600 9px "DM Mono", monospace; }
.feed-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(23,24,22,.15); }
.feed-actions .push-right { margin-left: auto; }
.feed-card.visual { padding: 0; overflow: hidden; }
.feed-photo { min-height: 205px; border-bottom: 1px solid var(--ink); }
.feed-card.visual .feed-card-head, .feed-card.visual > p, .feed-card.visual .feed-actions { margin-left: 20px; margin-right: 20px; }
.feed-card.visual .feed-card-head { margin-top: 17px; }
.feed-card.visual .feed-actions { margin-bottom: 20px; }
.type-label { margin: 28px 0 5px; font: 600 9px "DM Mono", monospace; color: var(--muted); }
.poll-option { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 11px 12px; margin-top: 7px; border: 1px solid var(--line); border-radius: 9px; background: transparent; font-size: 10px; }
.poll-option span, .poll-option b { position: relative; z-index: 2; }
.poll-option i { position: absolute; inset: 0 auto 0 0; background: rgba(199,241,91,.55); }
.audio-player { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px; margin: 18px 0; border: 1px solid var(--ink); border-radius: 10px; background: var(--lime); }
.play { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 9px; }
.waveform { flex: 1; letter-spacing: 2px; overflow: hidden; white-space: nowrap; }

/* Profile */
.profile-view { background: var(--paper-2); }
.profile-hero { position:relative; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.profile-avatar { position: relative; width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font-size: 46px; }
.online-ring { position: absolute; right: 5px; bottom: 8px; width: 19px; height: 19px; border: 4px solid var(--paper-2); background: #54d77b; border-radius: 50%; }
.profile-hero h1 { font-size: clamp(38px,5vw,62px); letter-spacing: -3px; }
.profile-hero p { margin: 8px 0; font-size: 14px; }
.profile-meta { display: flex; gap: 15px; font: 500 9px "DM Mono", monospace; text-transform: uppercase; color: var(--muted); }
.edit-profile { align-self: start; padding: 11px 15px; border-radius: 9px; border: 1px solid var(--ink); background: transparent; font-size: 10px; font-weight: 800; }
.profile-actions { align-self:start; display:flex; gap:8px; }
.language-button { min-width:45px; height:39px; padding:0 9px; border:1px solid var(--ink); border-radius:9px; background:transparent; font:800 11px "DM Mono",monospace; }
.profile-settings-button { width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:9px; background:var(--ink); color:var(--paper-2); }
.profile-settings-button svg { width:18px; }
.profile-settings-button:hover { transform:rotate(18deg); }
.profile-settings-popover { position:absolute; z-index:25; right:0; top:50px; width:min(92vw,390px); padding:15px; border:1px solid var(--ink); border-radius:16px; background:var(--paper-2); box-shadow:6px 6px 0 var(--ink),var(--shadow); opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top right; transition:.2s ease; }
.profile-settings-popover.is-open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.settings-popover-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.settings-popover-head h3 { margin:0; font-size:22px; letter-spacing:-.8px; }
.settings-popover-head button { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--line); font-size:20px; }
.language-popover { position:absolute; z-index:26; right:47px; top:50px; width:190px; padding:7px; border:1px solid var(--ink); border-radius:12px; background:var(--paper-2); box-shadow:4px 4px 0 var(--ink),var(--shadow); opacity:0; visibility:hidden; transform:translateY(-7px); transition:.18s; }
.language-popover.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.language-popover button { width:100%; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:7px; padding:9px; border-radius:8px; background:transparent; text-align:left; }
.language-popover button:hover,.language-popover button.is-active { background:var(--line); }
.language-popover button b { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper-2); }
.language-popover button span { font-size:10px; font-weight:700; }
.language-popover button i { visibility:hidden; font-style:normal; color:var(--blue); }
.language-popover button.is-active i { visibility:visible; }
.profile-stats { max-width: 1080px; margin: 0 auto 35px; display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); }
.profile-stats div { padding: 22px 0; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); }
.profile-stats div:last-child { border-right: 0; }
.profile-stats b { font-size: 24px; letter-spacing: -1px; }
.profile-stats b.is-counting { color:var(--blue); animation:points-total-pulse .45s ease alternate infinite; }
.profile-stats span { font: 500 8px "DM Mono", monospace; text-transform: uppercase; color: var(--muted); }
.profile-layout { max-width: 1080px; margin: auto; display: grid; grid-template-columns: 1.7fr 1fr; gap: 45px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.section-title h2 { font-size: 22px; }
.section-title button { padding: 7px 10px; background: transparent; font: 600 9px "DM Mono", monospace; border-radius: 99px; }
.section-title button.is-active { background: var(--ink); color: white; }
.trail-item { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; padding: 18px 0; border-top: 1px solid var(--line); }
.trail-pin { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50% 50% 50% 8px; background: var(--paper); }
.trail-item small { font: 500 8px "DM Mono", monospace; color: var(--muted); }
.trail-item p { font-size: 14px; font-weight: 700; margin: 7px 0 10px; }
.trail-item div div { font: 500 9px "DM Mono", monospace; }
.trail-actions { display:flex; align-items:center; gap:8px; align-self:center; }
.trail-map-button { display:flex; align-items:center; gap:6px; padding:9px 11px; border:1px solid var(--ink); border-radius:99px; background:var(--ink); color:var(--paper-2); white-space:nowrap; font:700 8px "DM Mono",monospace; text-transform:uppercase; }
.trail-map-button span { color:var(--lime); font-size:13px; line-height:0; }
.trail-map-button:hover { transform:translateY(-2px); box-shadow:0 4px 0 rgba(0,0,0,.14); }
.trail-delete { width:31px; height:31px; display:grid; place-items:center; align-self:center; border-radius:50%; background:transparent; color:var(--muted); }
.trail-delete:hover { background:rgba(255,101,77,.13); color:var(--coral); }
.bookmark-item { cursor:pointer; border-top:1px solid var(--line); padding:16px 0; }
.bookmark-item:hover { transform:translateX(3px); }
.bookmark-item-head { display:flex; align-items:center; gap:10px; }
.bookmark-item-head .avatar-bubble { width:32px; height:32px; }
.bookmark-item-head div { display:flex; flex-direction:column; }
.bookmark-item-head b { font-size:10px; }
.bookmark-item-head small { font:400 8px "DM Mono",monospace; color:var(--muted); }
.bookmark-item p { margin:10px 0 8px; font-size:14px; font-weight:700; }
.bookmark-item-footer { display:flex; justify-content:space-between; font:500 8px "DM Mono",monospace; color:var(--muted); text-transform:uppercase; }
.empty-bookmarks { padding:38px 20px; border:1px dashed var(--line); border-radius:13px; text-align:center; color:var(--muted); }
.empty-bookmarks svg { width:28px; margin-bottom:8px; }
.badge-card { display: flex; gap: 14px; padding: 20px; margin-bottom: 15px; background: var(--lime); border: 1px solid var(--ink); border-radius: 15px; box-shadow: 4px 4px 0 var(--ink); }
.badge-icon { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 24px; }
.badge-card h3 { margin: 0 0 3px; }
.badge-card p, .badge-card small { margin: 0; font-size: 9px; }
.highfive-list-button { width:100%; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; padding:14px 15px; border:1px solid var(--ink); border-radius:12px; background:var(--paper); box-shadow:3px 3px 0 var(--ink); text-align:left; font-size:10px; font-weight:800; }
.highfive-list-button b { min-width:24px; padding:4px 7px; border-radius:99px; background:var(--coral); color:#171816; text-align:center; font:800 8px "DM Mono",monospace; }
.highfive-list-button i { font-style:normal; font-size:20px; transition:transform .2s; }
.highfive-list-button[aria-expanded="true"] i { transform:rotate(90deg); }
.highfive-people-list { margin-top:9px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.highfive-person { display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); }
.highfive-person:last-child { border-bottom:0; }
.highfive-person span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--paper-2); border:1px solid var(--ink); }
.highfive-person div { display:flex; flex-direction:column; }
.highfive-person b { font-size:10px; }
.highfive-person small { color:var(--muted); font:500 7px "DM Mono",monospace; text-transform:uppercase; }
.highfive-empty { padding:18px; color:var(--muted); text-align:center; font-size:9px; }
.badge-progress { height: 4px; margin: 12px 0 5px; background: rgba(23,24,22,.2); border-radius: 99px; }
.badge-progress i { display: block; width: 68%; height: 100%; background: var(--ink); }
.settings-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.settings-card button { width: 100%; display: grid; grid-template-columns: 25px 1fr auto auto; align-items: center; text-align: left; padding: 14px; border-bottom: 1px solid var(--line); background: transparent; font-size: 10px; }
.settings-card button:last-child { border: 0; }
.settings-card button:hover { background: rgba(255,255,255,.6); }
.settings-card em { font: normal 8px "DM Mono", monospace; color: var(--muted); }
.settings-card b { font-size: 17px; }
.theme-switch { width: 34px; height: 19px; position: relative; border: 1px solid var(--line); border-radius: 99px; background: rgba(121,123,116,.28); }
.theme-switch i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper-2); box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .25s, background .25s; }
#themeToggle[aria-checked="true"] .theme-switch { background: var(--blue); }
#themeToggle[aria-checked="true"] .theme-switch i { transform: translateX(15px); background: white; }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(18,19,17,.55); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: .25s; }
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal { position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%,-46%) scale(.96); width: min(92vw, 550px); padding: 27px; border-radius: 20px; border: 1px solid var(--ink); background: var(--paper-2); box-shadow: 8px 8px 0 var(--ink), var(--shadow); opacity: 0; visibility: hidden; transition: .25s ease; }
.modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.modal h2 { margin: 4px 0 6px; font-size: 34px; letter-spacing: -1.7px; line-height: 1.04; }
.modal-handle { display: none; }
.composer-place { font: 500 9px "DM Mono", monospace; color: var(--muted); }
.media-types { display: flex; justify-content: space-between; gap: 7px; margin: 23px 0 14px; }
.media-types button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 5px; background: transparent; border: 1px solid var(--line); border-radius: 10px; font-size: 8px; font-weight: 700; }
.media-types button span { font-size: 17px; }
.media-types button.is-active { background: var(--ink); color: white; border-color: var(--ink); }
.composer-body { position: relative; min-height: 160px; border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.composer-body textarea { width: 100%; height: 160px; padding: 16px; border: 0; outline: 0; resize: none; background: transparent; font-size: 15px; line-height: 1.5; }
.char-count { position: absolute; right: 11px; bottom: 9px; font: 500 8px "DM Mono", monospace; color: var(--muted); }
.composer-state { min-height: 160px; display: grid; place-items: center; text-align: center; padding: 20px; }
.composer-state span { display: block; font-size: 35px; margin-bottom: 10px; }
.composer-state b { display: block; }
.composer-state small { color: var(--muted); }
.media-panel { min-height:160px; padding:14px; }
.voice-recorder { min-height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.record-button { width:62px; height:62px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; background:var(--coral); box-shadow:4px 4px 0 var(--ink); font-size:21px; }
.record-button.is-recording { animation:record-pulse 1s infinite; background:var(--ink); color:white; }
.record-time { font:700 11px "DM Mono", monospace; }
.voice-preview { width:100%; }
.voice-preview audio { width:100%; height:38px; }
.doodle-tools { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.doodle-tools span { font:600 8px "DM Mono", monospace; color:var(--muted); }
.doodle-tools button { padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:transparent; font-size:8px; }
.doodle-draw { width:100%; height:190px; border:1px solid rgba(40,85,237,.18); background:#fffdf7; }
.doodle-draw .drag-draw-surface path { stroke-width:5; }
.poll-builder { display:grid; gap:8px; }
.poll-builder input, .photo-caption-input { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:var(--paper-2); outline:0; font-size:11px; }
.poll-builder .poll-question { font-size:14px; font-weight:700; }
.photo-picker { position:relative; min-height:190px; display:grid; place-items:center; overflow:hidden; border:1px dashed var(--line); border-radius:10px; background:rgba(121,123,116,.07); }
.photo-picker input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.photo-picker img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-picker div { text-align:center; pointer-events:none; }
.photo-picker div span { display:block; font-size:30px; margin-bottom:7px; }
.photo-caption-input { margin-top:9px; }
.feed-media-preview { width:100%; max-height:260px; margin:16px 0; object-fit:cover; border:1px solid var(--ink); border-radius:10px; background:#fffdf7; }
.feed-doodle { object-fit:contain; }
.feed-poll-options { display:grid; gap:7px; margin:12px 0; }
.feed-poll-options button { display:flex; justify-content:space-between; padding:10px; border:1px solid var(--line); border-radius:8px; background:transparent; font-size:10px; }
.feed-poll-options button.is-voted { border-color:var(--ink); background:var(--lime); color:#171816; }
.feed-voice { width:100%; margin:15px 0; }
.composer-footer { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; }
.composer-footer label { font-size: 9px; font-weight: 700; }
.post-note-button, .unlock-button, .next-button, .sign-button { padding: 12px 16px; border-radius: 9px; background: var(--coral); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 10px; font-weight: 800; }
.post-note-button span, .next-button span { margin-left: 12px; }
.unlock-modal { text-align: center; max-width: 410px; padding: 38px; }
.unlock-orbit { width: 95px; height: 95px; display: grid; place-items: center; margin: 0 auto 21px; border: 1px dashed var(--coral); border-radius: 50%; }
.unlock-orbit span { width: 51px; height: 51px; display: grid; place-items: center; background: var(--coral); border-radius: 50%; font-size: 24px; }
.unlock-modal p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.price-row { display: flex; justify-content: space-between; margin: 22px 0 12px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price-row span { font-size: 11px; }
.price-row b { font: 700 12px "DM Mono", monospace; }
.unlock-button { width: 100%; background: var(--lime); padding: 14px; }
.unlock-modal > small { display: block; margin-top: 13px; font-size: 8px; color: var(--muted); }
.location-modal { text-align: center; max-width: 420px; padding: 38px; }
.location-modal > .location-orbit { margin: 0 auto 20px; }
.location-modal > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.permission-state { display: flex; align-items: center; gap: 11px; margin: 20px 0 13px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; text-align: left; background: rgba(255,255,255,.04); }
.permission-state > span { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #e6a72f; box-shadow: 0 0 0 5px rgba(230,167,47,.13); }
.permission-state b, .permission-state small { display: block; }
.permission-state b { font-size: 10px; }
.permission-state small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.permission-state.is-granted > span { background: #47c96b; box-shadow: 0 0 0 5px rgba(71,201,107,.13); }
.permission-state.is-denied > span { background: var(--coral); box-shadow: 0 0 0 5px rgba(255,101,77,.13); }
.location-modal > small { display: block; margin-top: 12px; color: var(--muted); font-size: 8px; }
.account-modal { max-width:440px; }
.account-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:15px 0; border-top:1px solid var(--line); }
.account-row b,.account-row small { display:block; }
.account-row b { font-size:11px; }
.account-row small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.45; }
.danger-zone { margin-top:16px; padding:17px; border:1px solid rgba(255,101,77,.55); border-radius:12px; background:rgba(255,101,77,.06); }
.danger-zone > b { display:block; font-size:14px; }
.danger-zone p { color:var(--muted); font-size:10px; line-height:1.55; }
.danger-zone button,.danger-button { padding:11px 14px; border:1px solid #9f2d20; border-radius:8px; background:var(--coral); color:#171816; font-size:10px; font-weight:800; }
.confirm-modal { max-width:400px; text-align:center; }
.confirm-icon { width:61px; height:61px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:rgba(255,101,77,.13); color:var(--coral); }
.confirm-icon svg { width:27px; }
.confirm-modal > p { color:var(--muted); font-size:11px; line-height:1.55; }
.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:22px; }
.confirm-actions button { padding:12px; border:1px solid var(--line); border-radius:8px; background:transparent; font-size:10px; font-weight:800; }
.confirm-actions .danger-button { background:var(--coral); border-color:#9f2d20; }
.highfive-toast { position: fixed; z-index: 55; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 12px; max-width: 430px; padding: 11px 12px; border: 1px solid var(--ink); border-radius: 15px; background: var(--lime); box-shadow: 5px 5px 0 var(--ink); opacity:0; visibility:hidden; transform:translateY(24px); transition:opacity .22s ease,transform .22s ease,visibility .22s; }
.highfive-toast[hidden] { display:none !important; }
.highfive-toast.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.walker-avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: white; }
.highfive-toast div b { font-size: 11px; }
.highfive-toast div p { font-size: 9px; margin: 2px 0; }
.highfive-toast > button { background: var(--ink); color: white; padding: 10px 12px; border-radius: 9px; font-size: 9px; font-weight: 800; }
.highfive-toast .toast-close { padding: 4px; background: transparent; color: var(--ink); font-size: 18px; }
.onboarding { width:min(calc(100vw - 18px),800px); max-width:800px; min-height:650px; max-height:calc(100vh - 18px); padding:18px; overflow-y:auto; overflow-x:hidden; background:var(--paper); }
.onboarding.is-required > .close-button { display: none; }
.onboarding-step { display: none; min-height: 470px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
.onboarding-step.is-active { display: flex; animation: view-in .4s ease; }
.onboarding-logo { width: 64px; height: 64px; font-size: 42px; margin-bottom: 28px; }
.onboarding-step h2 { font-size: 39px; margin: 8px 0 13px; }
.onboarding-step > p { max-width: 360px; color: var(--muted); line-height: 1.6; font-size: 12px; }
.google-button { width: min(100%, 340px); margin-top: 25px; padding: 14px; border: 1px solid var(--ink); border-radius: 10px; background: white; box-shadow: 4px 4px 0 var(--ink); font-size: 11px; font-weight: 800; }
.google-button span { font-size: 16px; margin-right: 10px; color: #4285f4; }
.onboarding-step > small { max-width: 340px; margin-top: 17px; color: var(--muted); font-size: 8px; }
.location-orbit { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 22px; border: 1px dashed var(--blue); border-radius: 50%; background: rgba(40,85,237,.07); color: var(--blue); font-size: 28px; }
.location-step .next-button { margin-top: 20px; }
.text-button { margin-top: 13px; padding: 7px; background: transparent; color: var(--muted); font-size: 9px; text-decoration: underline; }
.location-step.is-locating .location-orbit { animation: location-wave 1.3s infinite alternate; }
.input-label { width: min(100%,340px); margin: 22px 0 12px; text-align: left; font: 600 9px "DM Mono", monospace; color: var(--muted); }
.input-label input { width: 100%; display: block; margin-top: 6px; padding: 13px; border: 1px solid var(--ink); border-radius: 9px; background: white; font-size: 15px; font-weight: 700; outline: 0; }
.input-label input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40,85,237,.1); }
.identity-preview { width: 68px; height: 68px; display: grid; place-items: center; margin: 12px 0 -8px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); box-shadow: 4px 4px 0 var(--ink); font-size: 31px; transition: transform .2s; }
.identity-preview.is-changing { transform: rotate(-8deg) scale(1.12); }
.picker-label { width: min(100%,340px); margin: 2px 0 8px; text-align: left; font: 600 9px "DM Mono", monospace; color: var(--muted); }
.emoji-picker { display: flex; gap: 8px; margin-bottom: 25px; }
.emoji-picker button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 18px; }
.emoji-picker button.is-active { border-color: var(--ink); background: var(--lime); box-shadow: 2px 2px 0 var(--ink); }
.username-error { min-height: 13px; margin: -14px 0 10px !important; color: var(--coral) !important; }
.promise-step { justify-content:flex-start; padding:12px 8px 8px; }
.promise-heading { width:min(100%,650px); margin:0 auto 13px; text-align:left; }
.promise-heading .eyebrow { margin:0 0 5px; letter-spacing:2px; }
.promise-heading h2 { margin:0; font-size:clamp(36px,6vw,56px); letter-spacing:-3px; line-height:.96; }
.promise-heading p { margin:8px 0 0; color:var(--muted); font:500 9px "DM Mono",monospace; }
.paper-roll { position:relative; width:min(100%,650px); margin:0 auto 14px; transform-origin:top center; opacity:0; clip-path:inset(0 0 100% 0 round 3px); }
.paper-roll:before { content:""; position:absolute; z-index:8; left:-8px; right:-8px; top:-6px; height:17px; border-radius:99px; background:linear-gradient(#f8f4e9,#d8d1c0); border:1px solid rgba(23,24,22,.22); box-shadow:0 5px 9px rgba(0,0,0,.17); }
.promise-step.is-active .paper-roll { animation:promise-unroll 1.05s .12s cubic-bezier(.2,.82,.2,1) forwards; }
.paper { position:relative; width:100%; padding:31px 34px 25px; color:#171816; background:#fffdf5; border:1px solid rgba(23,24,22,.18); box-shadow:0 14px 28px rgba(0,0,0,.16); overflow:hidden; }
.paper:before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(32,30,24,.055) 31px); }
.paper:after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -12px 18px rgba(64,53,32,.045); }
.paper-masthead { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid rgba(23,24,22,.17); color:#747066; font:600 8px "DM Mono",monospace; letter-spacing:1.2px; }
.paper-emoji { font-size:18px; transform:rotate(8deg); }
.promise-copy { position:relative; z-index:2; max-width:530px; margin:18px auto 17px; font-family:Georgia,serif; font-size:clamp(18px,2.5vw,24px); line-height:1.48; text-align:center; pointer-events:none; }
.signature-stage { position:relative; z-index:2; padding:9px 10px 8px; border:1px solid rgba(23,24,22,.28); border-radius:3px; background:rgba(255,255,255,.5); }
.signature-stage-head,.signature-footer { display:flex; justify-content:space-between; align-items:center; color:#7d776c; font:600 7px "DM Mono",monospace; letter-spacing:.7px; text-transform:uppercase; }
.signature-stage-head { height:22px; padding:0 4px; border-bottom:1px solid rgba(23,24,22,.12); }
.signature-draw { width:100%; height:178px; border:0; border-radius:0; background:transparent; }
.signature-draw:after { content:""; position:absolute; left:5%; right:5%; bottom:27px; border-bottom:1px solid rgba(23,24,22,.24); pointer-events:none; }
.signature-draw .drag-draw-hint { top:48%; color:rgba(118,108,91,.52); font-size:8px; letter-spacing:.4px; white-space:nowrap; }
.signature-clear { position:relative; z-index:5; padding:3px 0 3px 10px; color:#e95c38; font-size:7px; }
.signature-footer { padding:5px 4px 0; }
.signature-footer span:first-child { color:#e95c38; text-transform:none; }
.pen-flourish { position:absolute; z-index:4; right:18px; top:48%; width:56px; height:16px; pointer-events:none; transform:rotate(-34deg); }
.paper.has-signature .pen-flourish { opacity:0; transform:translate(18px,-12px) rotate(-20deg); transition:.3s ease; }
.pen-flourish span { position:absolute; inset:3px 8px 3px 0; border-radius:8px 2px 2px 8px; background:linear-gradient(90deg,#452c6e,#ff654d); box-shadow:2px 2px 0 rgba(23,24,22,.2); }
.pen-flourish i { position:absolute; right:0; top:5px; width:0; height:0; border-top:3px solid transparent; border-bottom:3px solid transparent; border-left:9px solid #222; }
.drag-draw { position:relative; overflow:hidden; border-radius:9px; background:rgba(40,85,237,.035); touch-action:none; cursor:crosshair; user-select:none; }
.drag-draw-surface { display:block; width:100%; height:100%; }
.drag-draw-surface path { fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.drag-draw-surface .draw-start { fill:#fffdf7; stroke:#ff6045; stroke-width:2; vector-effect:non-scaling-stroke; }
.drag-draw-surface .draw-end { fill:#ffad3d; stroke:#fffdf7; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.drag-draw-hint { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(40,85,237,.4); font:600 9px "DM Mono",monospace; pointer-events:none; }
.drag-draw.has-strokes .drag-draw-hint { display:none; }
.drag-draw.is-locked { cursor:default; }
.draw-clear { padding:4px 7px; border:0; background:transparent; color:var(--muted); font:600 7px "DM Mono",monospace; text-decoration:underline; }
.stamp { position:absolute; z-index:7; right:48px; bottom:54px; width:92px; height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:4px double #e94f34; border-radius:50%; color:#e94f34; font-family:"DM Mono",monospace; transform:rotate(-12deg) scale(2.6); opacity:0; pointer-events:none; }
.stamp:after { content:""; position:absolute; inset:6px; border:1px solid currentColor; border-radius:50%; }
.stamp small { font-size:6px; letter-spacing:1px; }
.stamp b { font-size:10px; line-height:1; }
.stamp.is-stamped { animation:stamp-slam .58s cubic-bezier(.16,1.7,.3,1) forwards; }
.paper.has-stamp { animation: paper-impact .35s ease; }
.stamp-burst { position:absolute; z-index:6; right:92px; bottom:99px; pointer-events:none; }
.stamp-burst i { position: absolute; width: 4px; height: 20px; border-radius: 99px; background: var(--coral); opacity: 0; transform-origin: 2px 45px; }
.stamp-burst.is-bursting i { animation: burst .55s ease-out forwards; }
.stamp-burst i:nth-child(2) { transform: rotate(60deg); }
.stamp-burst i:nth-child(3) { transform: rotate(120deg); }
.stamp-burst i:nth-child(4) { transform: rotate(180deg); }
.stamp-burst i:nth-child(5) { transform: rotate(240deg); }
.stamp-burst i:nth-child(6) { transform: rotate(300deg); }
.stamp-burst i:nth-child(1) { --angle: 0deg; }
.stamp-burst i:nth-child(2) { --angle: 60deg; }
.stamp-burst i:nth-child(3) { --angle: 120deg; }
.stamp-burst i:nth-child(4) { --angle: 180deg; }
.stamp-burst i:nth-child(5) { --angle: 240deg; }
.stamp-burst i:nth-child(6) { --angle: 300deg; }
.sign-button { background:var(--blue); color:white; box-shadow:3px 3px 0 var(--ink); }
.sign-button span { margin-left: 8px; }
.promise-actions { min-height:48px; display:flex; justify-content:center; align-items:center; gap:13px; }
.promise-status { color:var(--muted); font:500 8px "DM Mono",monospace; }
.promise-status.is-sealed { color:#287d43; font-weight:700; }
.hidden { display: none !important; }
.toast { position: fixed; left: 50%; bottom: 95px; z-index: 90; transform: translate(-50%, 30px); padding: 11px 15px; border-radius: 99px; background: var(--ink); color: white; font-size: 10px; opacity: 0; visibility: hidden; transition: .3s; }
.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.drop-success-marker { position:fixed; z-index:2147483646; inset:0; display:grid; place-items:center; pointer-events:none; overflow:hidden; }
.drop-success-marker:before { content:""; position:absolute; left:50%; top:50%; width:76px; height:76px; border-radius:50%; background:var(--lime); border:7px solid white; box-shadow:0 0 0 4px var(--ink),0 16px 45px rgba(0,0,0,.3); transform:translate(-50%,-50%); animation:success-core 1s cubic-bezier(.2,1.7,.4,1) both; }
.drop-success-marker:after { content:""; position:absolute; left:50%; top:50%; width:92px; height:92px; border:6px solid var(--lime); border-radius:50%; transform:translate(-50%,-50%); animation:success-ring 1.65s ease-out .08s both; }
.drop-success-burst { position:absolute; left:50%; top:50%; width:0; height:0; }
.drop-success-burst i { position:absolute; left:-3px; top:-108px; width:6px; height:52px; border-radius:99px; background:var(--coral); transform-origin:3px 108px; animation:success-ray 1.35s cubic-bezier(.2,.8,.2,1) both; }
.drop-success-burst i:nth-child(2) { transform:rotate(45deg); background:var(--lime); }
.drop-success-burst i:nth-child(3) { transform:rotate(90deg); }
.drop-success-burst i:nth-child(4) { transform:rotate(135deg); background:var(--lime); }
.drop-success-burst i:nth-child(5) { transform:rotate(180deg); }
.drop-success-burst i:nth-child(6) { transform:rotate(225deg); background:var(--lime); }
.drop-success-burst i:nth-child(7) { transform:rotate(270deg); }
.drop-success-burst i:nth-child(8) { transform:rotate(315deg); background:var(--lime); }
.drop-success-label { position:absolute; left:50%; top:calc(50% - 112px); transform:translateX(-50%); display:flex; align-items:center; gap:11px; padding:13px 18px; border:2px solid var(--ink); border-radius:13px; background:var(--lime); color:#171816; box-shadow:7px 7px 0 var(--ink); font:800 12px "DM Mono",monospace; letter-spacing:.5px; white-space:nowrap; animation:success-label 2.55s ease both; }
.drop-success-label b { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#171816; color:white; font-size:16px; }
.points-pop { position:absolute; left:50%; top:calc(50% + 61px); transform:translateX(-50%); display:flex; align-items:baseline; gap:5px; color:var(--lime); text-shadow:0 4px 0 #171816,2px 0 0 #171816,-2px 0 0 #171816; font:800 46px "DM Mono",monospace; white-space:nowrap; animation:points-pop 2.6s ease both; }
.points-pop small { font-size:12px; letter-spacing:1.5px; }
.map-stage.is-drop-celebrating { animation:map-impact .55s cubic-bezier(.2,.8,.2,1); }
.app-shell.is-impact { animation:map-impact .55s cubic-bezier(.2,.8,.2,1); }

@keyframes blink { 50% { opacity:.35; } }
@keyframes view-in { from { opacity:0; transform:translateY(8px); } }
@keyframes location-wave { from { transform:scale(.6); opacity:1; } to { transform:scale(1.5); opacity:0; } }
@keyframes map-loading-spin { to { transform:rotate(360deg); } }
@keyframes pin-hover { to { transform:rotate(-45deg) translate(7px,-7px); } }
@keyframes pin-slam { 0% { transform:translate(-50%,-190%) scale(1.09); } 62% { transform:translate(-50%,-86%) scale(.94,1.08); } 80% { transform:translate(-50%,-108%) scale(1.03,.98); } 100% { transform:translate(-50%,-100%) scale(1); } }
@keyframes user-pulse { 0% { transform:scale(.75); opacity:.55; } 75%,100% { transform:scale(2); opacity:0; } }
@keyframes self-core-shake { 0%,100% { transform:translate(-50%,-50%) rotate(0); } 22% { transform:translate(calc(-50% - 4px),-50%) rotate(-7deg); } 45% { transform:translate(calc(-50% + 4px),-50%) rotate(7deg); } 68% { transform:translate(calc(-50% - 2px),-50%) rotate(-3deg); } }
@keyframes self-label-shake { 0%,100% { transform:translateX(-50%) rotate(0); } 22% { transform:translateX(calc(-50% - 3px)) rotate(-4deg); } 45% { transform:translateX(calc(-50% + 3px)) rotate(4deg); } 68% { transform:translateX(calc(-50% - 1px)) rotate(-2deg); } }
@keyframes self-speech-pop { 0% { opacity:0; transform:translate(-50%,8px) scale(.82); } 12%,78% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-5px) scale(.96); } }
@keyframes record-pulse { 50% { transform:scale(1.08); box-shadow:0 0 0 12px rgba(255,101,77,.12),4px 4px 0 var(--ink); } }
@keyframes city-scan { to { transform:translateX(130%); } }
@keyframes city-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes city-resolve { 0% { transform:scale(.93); } 65% { transform:scale(1.04); } }
@keyframes success-core { 0% { opacity:0; transform:translate(-50%,-50%) scale(0) rotate(-18deg); } 58% { opacity:1; transform:translate(-50%,-50%) scale(1.42) rotate(8deg); } 78% { transform:translate(-50%,-50%) scale(.92) rotate(-3deg); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes success-ring { 0% { opacity:.9; transform:translate(-50%,-50%) scale(.5); } 100% { opacity:0; transform:translate(-50%,-50%) scale(4.2); } }
@keyframes success-ray { 0% { opacity:0; scale:.2; } 26% { opacity:1; scale:1.18; } 100% { opacity:0; scale:1.55; } }
@keyframes success-label { 0% { opacity:0; transform:translate(-50%,22px) rotate(-3deg) scale(.78); } 16%,76% { opacity:1; transform:translate(-50%,0) rotate(0) scale(1); } 100% { opacity:0; transform:translate(-50%,-15px) scale(1.04); } }
@keyframes points-pop { 0% { opacity:0; transform:translate(-50%,18px) scale(.45); } 22%,76% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-24px) scale(1.16); } }
@keyframes map-impact { 0%,100% { transform:translate(0); } 14% { transform:translate(-7px,4px) rotate(-.25deg); } 30% { transform:translate(6px,-5px) rotate(.2deg); } 46% { transform:translate(-4px,-2px); } 64% { transform:translate(3px,3px); } 82% { transform:translate(-1px,1px); } }
@keyframes points-total-pulse { to { transform:scale(1.08); } }
@keyframes promise-unroll { 0% { opacity:0; clip-path:inset(0 0 100% 0 round 3px); transform:translateY(-14px) scaleY(.35); } 68% { opacity:1; clip-path:inset(0 0 0 0 round 3px); transform:translateY(0) scaleY(1.018); } 100% { opacity:1; clip-path:inset(0 0 0 0 round 3px); transform:translateY(0) scaleY(1); } }
@keyframes stamp-slam { 0% { opacity:0; transform:rotate(-12deg) scale(2.6); } 55% { opacity:.9; transform:rotate(-12deg) scale(.86); } 78% { opacity:.78; transform:rotate(-12deg) scale(1.08); } 100% { opacity:.82; transform:rotate(-12deg) scale(1); } }
@keyframes paper-impact { 25% { transform:rotate(-.4deg) scale(.975); } 60% { transform:rotate(.2deg) scale(1.006); } }
@keyframes burst { 0% { opacity:1; transform:rotate(var(--angle,0deg)) translateY(0) scaleY(.2); } 100% { opacity:0; transform:rotate(var(--angle,0deg)) translateY(-28px) scaleY(1); } }

@media (max-width: 900px) {
  .map-view.is-active { grid-template-columns: 1fr; }
  .nearby-panel { display: none; }
  .radius-ring { width: min(95vw,690px); }
  .post-ring { width: min(58vw,340px); }
  .feed-grid { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; gap: 25px; }
}

@media (max-width: 600px) {
  .topbar { height: 62px; padding: 0 14px; grid-template-columns: 1fr auto; }
  .live-pill { display: none; }
  .brand { font-size: 18px; }
  .brand-mark { width: 30px; height: 30px; font-size: 21px; }
  .view { inset-top: 62px; inset: 62px 0 0; }
  .mode-switch { top: 12px; }
  .mode-button { min-width: 112px; padding: 7px 10px; }
  .map-actions { right:12px; bottom:108px; }
  .city-reveal { min-width:0; min-height:44px; gap:8px; padding:5px 2px 5px 7px; }
  .city-locator { width:30px; height:30px; }
  .city-locator svg { width:15px; }
  .city-reveal small { font-size:6px; letter-spacing:1px; }
  .city-reveal b { max-width:105px; font-size:12px; }
  .map-caption { left: 10px; bottom: 18px; }
  .note-preview { width: calc(100% - 24px); top: auto; bottom: 17px; transform: translate(-50%,40px); box-shadow: 4px 4px 0 var(--ink); }
  .note-preview.is-open { transform: translate(-50%,0); }
  .bottom-nav { bottom: 9px; }
  .nav-button { width: 70px; height: 50px; }
  .feed-view, .profile-view { padding: 35px 16px 110px; }
  .page-head { align-items: flex-start; }
  .page-head h1 { font-size: 50px; letter-spacing: -3px; }
  .new-post { padding: 10px; }
  .feed-filters { overflow-x: auto; }
  .feed-card { min-height: 290px; padding: 17px; }
  .big-quote { font-size: 27px; }
  .profile-hero { grid-template-columns: auto 1fr; gap: 15px; }
  .profile-avatar { width: 75px; height: 75px; font-size: 30px; }
  .profile-hero h1 { font-size: 35px; letter-spacing: -2px; }
  .profile-hero p { font-size: 10px; }
  .profile-actions { grid-column:1/-1; width:100%; }
  .edit-profile { flex:1; }
  .profile-settings-popover { top:100%; right:0; }
  .language-popover { top:100%; right:47px; }
  .trail-item { grid-template-columns:auto 1fr; }
  .trail-actions { grid-column:2; justify-content:flex-start; }
  .profile-stats b { font-size: 19px; }
  .modal { width: calc(100% - 20px); padding: 22px; }
  .composer { top: auto; bottom: 0; width: 100%; border-radius: 22px 22px 0 0; transform: translate(-50%,100%); box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
  .composer.is-open { transform: translate(-50%,0); }
  .modal-handle { display: block; width: 38px; height: 4px; margin: -11px auto 15px; background: var(--line); border-radius: 99px; }
  .media-types button { font-size: 7px; }
  .highfive-toast { left: 10px; right: 10px; bottom: 80px; }
  .highfive-toast div { flex: 1; }
  .onboarding { width:calc(100vw - 12px); min-height:95vh; padding:16px 10px; }
  .onboarding-step h2 { font-size: 32px; }
  .promise-step { padding:10px 0 8px; }
  .promise-heading { padding:0 7px; }
  .promise-heading h2 { font-size:38px; letter-spacing:-2px; }
  .paper-roll { width:100%; }
  .paper { padding:25px 16px 18px; }
  .promise-copy { margin:14px auto; font-size:17px; line-height:1.42; }
  .signature-stage { padding:7px 7px 6px; }
  .signature-draw { height:190px; }
  .signature-draw .drag-draw-hint { max-width:80%; white-space:normal; line-height:1.5; }
  .stamp { right:25px; bottom:45px; }
  .stamp-burst { right:69px; bottom:90px; }
  .promise-actions { flex-wrap:wrap; gap:8px 12px; }
  .promise-status { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}