:root{--bg: #eef1f6;--paper: #ffffff;--ink: #101d38;--ink-soft: #5b6780;--line: #d7dde8;--beacon: #1f4fd8;--beacon-soft: #e6ecfc;--ok: #0e7a4d;--warn: #b45309;--warn-bg: #fdf4e3;--danger: #b3261e;--danger-bg: #fdecea;--ring-track: #e3e8f1;--radius-card: 14px;--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font-body);color:var(--ink);background-color:var(--bg);background-image:radial-gradient(circle,#c9d2e2 1px,transparent 1px);background-size:26px 26px;line-height:1.5}.mono{font-family:var(--font-mono);font-size:.78rem}.ok{color:var(--ok)}.warn{color:var(--warn)}.danger{color:var(--danger)}.shell{max-width:1060px;margin:0 auto;padding:0 20px 64px}.header{display:flex;align-items:center;justify-content:space-between;padding:22px 0 18px}.header-brand{display:flex;align-items:center;gap:12px}.header-brand h1{font-family:var(--font-display);font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin:0}.header-pulse{width:14px;height:14px;border-radius:50%;background:var(--beacon);box-shadow:0 0 #1f4fd873;animation:pulse 2.2s ease-out infinite}@keyframes pulse{0%{box-shadow:0 0 #1f4fd873}70%{box-shadow:0 0 0 16px #1f4fd800}to{box-shadow:0 0 #1f4fd800}}@media (prefers-reduced-motion: reduce){.header-pulse{animation:none}}.header-coords{color:var(--ink-soft);display:flex;gap:10px;align-items:center}.header-mode{padding:2px 8px;border-radius:999px;font-weight:500;background:var(--beacon-soft);color:var(--beacon)}.header-mode.gps{background:#e2f5ec;color:var(--ok)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.layout-side{display:flex;flex-direction:column;gap:18px}@media (max-width: 860px){.layout{grid-template-columns:1fr}.layout-side{order:-1}}.composer,.post,.demo-panel,.rules-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px 18px}.composer{margin-bottom:20px;transition:border-color .3s ease}.composer-whistle{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}.composer-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.composer-name{font-family:var(--font-display);font-weight:500;font-size:.95rem;border:none;border-bottom:1px dashed var(--line);padding:2px 0;width:140px;background:transparent;color:var(--ink)}.composer-name:focus{outline:none;border-bottom-color:var(--beacon)}.composer-hint{color:var(--ink-soft)}.composer-text{width:100%;margin-top:10px;border:none;resize:vertical;font-family:var(--font-body);font-size:1rem;color:var(--ink);background:transparent}.composer-text:focus{outline:none}.composer-actions{display:flex;align-items:center;gap:12px;margin-top:8px}.composer-count{margin-left:auto;color:var(--ink-soft)}.btn-primary{font-family:var(--font-display);font-weight:500;font-size:.92rem;background:var(--beacon);color:#fff;border:none;padding:9px 20px;border-radius:999px;cursor:pointer}.btn-primary:hover:not(:disabled){background:#1a43b8}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-primary:focus-visible,.chip:focus-visible,.dpad-btn:focus-visible,.vote-btn:focus-visible,.post-comment-toggle:focus-visible{outline:2px solid var(--beacon);outline-offset:2px}.chip{font-family:var(--font-mono);font-size:.75rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:6px 12px;border-radius:999px;cursor:pointer}.chip:hover:not(:disabled){border-color:var(--beacon);color:var(--beacon)}.chip:disabled{opacity:.4;cursor:not-allowed}.chip-on{background:#e2f5ec;border-color:var(--ok);color:var(--ok)}.chip-on-danger{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}.feed{display:flex;flex-direction:column;gap:14px}.feed-status,.feed-hidden{color:var(--ink-soft);text-align:center;padding:12px}.feed-empty{background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius-card);padding:32px 24px;text-align:center;color:var(--ink-soft)}.feed-empty-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 6px}.post{display:flex;gap:14px;animation:rise .3s ease}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1}}@media (prefers-reduced-motion: reduce){.post{animation:none}}.post-whistle{border-color:var(--danger);background:var(--danger-bg)}.post-buffer{border-style:dashed;border-color:var(--warn);opacity:.92}.post-side{flex-shrink:0;padding-top:2px}.range-ring-label{font-family:var(--font-mono);font-size:11px;font-weight:500}.post-main{min-width:0;flex:1}.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--ink-soft);font-size:.85rem}.post-author{font-family:var(--font-display);color:var(--ink);font-size:.95rem}.post-dot{opacity:.5}.badge-whistle{font-family:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--danger);border:1px solid var(--danger);padding:1px 8px;border-radius:999px}.post-text{margin:6px 0 8px;overflow-wrap:break-word}.post-buffer-note{margin:0 0 8px;font-size:.8rem;color:var(--warn)}.post-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.vote-btn{display:inline-flex;align-items:center;gap:4px;border:none;background:none;padding:0;cursor:pointer;font-family:var(--font-mono);font-size:.85rem;font-weight:600;color:var(--ink-soft)}.vote-arrow-icon{display:block}.vote-btn:hover:not(:disabled){color:var(--ink)}.vote-up.voted{color:#ff4500}.vote-down.voted{color:#7193ff}.vote-btn:disabled{opacity:.4;cursor:not-allowed}.post-comment-toggle{font-family:var(--font-mono);font-size:.85rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:4px 12px;border-radius:999px;cursor:pointer}.post-comment-toggle:hover{border-color:var(--beacon);color:var(--beacon)}.post-locked{color:var(--ink-soft)}.post-comments{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}.comment-status{padding:4px 0}.comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.comment-list .comment-list{margin-top:8px}.comment{border-left:2px solid var(--line);padding-left:10px}.comment-author{font-family:var(--font-display);font-size:.88rem;color:var(--ink)}.comment-text{margin:2px 0 4px;font-size:.9rem;overflow-wrap:break-word}.comment-reply-toggle{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:0}.comment-reply-toggle:hover{color:var(--beacon)}.comment-form{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-width:420px}.comment-name{font-family:var(--font-body);font-size:.85rem;border:none;border-bottom:1px dashed var(--line);padding:2px 0;background:transparent;color:var(--ink)}.comment-name:focus{outline:none;border-bottom-color:var(--beacon)}.comment-text-input{font-family:var(--font-body);font-size:.9rem;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px;resize:vertical}.comment-text-input:focus{outline:none;border-color:var(--beacon)}.comment-form .btn-primary{align-self:flex-start;padding:6px 16px;font-size:.85rem}.demo-panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.demo-panel h2,.rules-card h2{font-family:var(--font-display);font-size:1rem;font-weight:700;margin:0}.demo-panel-sub{color:var(--ink-soft);margin:10px 0}.demo-gps-error{color:var(--danger);font-size:.8rem;margin:8px 0 0}.demo-dpad{display:grid;grid-template-areas:". n ." "w . e" ". s .";gap:6px;justify-content:center;margin:12px 0}.dpad-btn{font-family:var(--font-mono);font-size:.72rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:8px 10px;border-radius:8px;cursor:pointer;min-width:72px}.dpad-btn:hover:not(:disabled){border-color:var(--beacon);color:var(--beacon)}.dpad-btn:disabled{opacity:.4;cursor:not-allowed}.dpad-n{grid-area:n}.dpad-s{grid-area:s}.dpad-w{grid-area:w}.dpad-e{grid-area:e}.demo-presets{display:flex;flex-wrap:wrap;gap:6px}.rules-card ul{list-style:none;padding:0;margin:10px 0}.rules-card li{padding:4px 0;font-size:.88rem}.rules-card li .mono{margin-right:6px}.rules-card p{font-size:.82rem;color:var(--ink-soft);margin:8px 0 0}