/*
 * Carrier — experimental research platform.
 * Copyright (c) 2026 Jiahao Yang. All rights reserved.
 * Non-commercial academic use only; see LICENSE. Commercial use requires a licence.
 */

/*
 * The front page's 3D town hero (public/assets/js/town/hero-town.js), scoped
 * under .town-hero so it cannot collide with index.css. Variables carry a
 * --th- prefix for the same reason.
 */

.town-hero {
    --th-ink: #16161a; --th-ink-2: #585e6a; --th-ink-3: #8b8f96;
    --th-paper: #f9f9fb; --th-card: #fdfcff; --th-inset: #f3f2f7;
    --th-line: rgba(22,22,26,0.08); --th-line-2: rgba(22,22,26,0.14);
    --th-purple: #7f5af0; --th-purple-ink: #6b47d6; --th-amber: #d97706; --th-amber-ink: #b45309; --th-green: #1a9a65;
    --th-sky: oklch(95.5% 0.03 295);
    --th-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  }
  .town-hero, .town-hero * { box-sizing: border-box; }
  .town-hero [hidden] { display: none !important; }
  .town-hero { margin: 0; background: var(--th-paper); color: var(--th-ink); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
  body.town-expanded { overflow: hidden; }
  .town-hero a { color: var(--th-purple-ink); text-decoration: none; }
  .town-hero h1, .town-hero h3 { font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; margin: 0; }
  .town-hero p { margin: 0; }

  
  
  

  /* ── The hero is the town: the canvas fills it and the copy sits in the open sky on the left ── */
  .town-hero { position: relative; height: clamp(680px, 100svh, 920px); overflow: hidden; background: radial-gradient(58% 72% at 67% 48%, var(--th-sky) 0%, oklch(97.4% 0.014 295) 52%, var(--th-paper) 100%); }
  .town-hero.expanded { position: fixed; inset: 0; z-index: 50; height: 100vh; height: 100dvh; }
  /* Full screen is the scene alone: no headline copy, no fade behind it */
  .town-hero.expanded .copy, .town-hero.expanded .veil { display: none; }
  .town-hero .stage { position: absolute; inset: 0; outline: none; touch-action: pan-y; }
  .town-hero .stage canvas { display: block; width: 100%; height: 100%; outline: none; }
  .town-hero .stage.grab canvas { cursor: grab; }
  .town-hero .stage.point canvas { cursor: pointer; }
  .town-hero .stage:focus-visible { box-shadow: inset 0 0 0 2px var(--th-purple); }
  .town-hero .stage-fallback { position: absolute; inset: 0; display: none; place-items: center; padding: 24px; text-align: center; color: var(--th-ink-3); font-size: 13px; }
  .town-hero .stage.failed .stage-fallback { display: grid; }
  /* Fades the far-left corner of the island so the headline always reads cleanly. */
  .town-hero .veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--th-paper) 0%, color-mix(in oklch, var(--th-paper) 88%, transparent) 24%, color-mix(in oklch, var(--th-paper) 0%, transparent) 42%); transition: opacity 0.5s var(--th-ease-out); }

  .town-hero .copy { position: absolute; z-index: 2; top: 50%; left: max(28px, calc((100% - 1360px) / 2)); width: min(470px, 36%); transform: translateY(-50%); pointer-events: none; transition: opacity 0.45s var(--th-ease-out), transform 0.6s var(--th-ease-out); }
  .town-hero .copy a, .town-hero .copy button { pointer-events: auto; }
  .town-hero.panel-open .copy, .town-hero.driving .copy { opacity: 0; transform: translate(-48px, -50%); }
  .town-hero.panel-open .copy a, .town-hero.panel-open .copy button, .town-hero.driving .copy a, .town-hero.driving .copy button { pointer-events: none; }
  .town-hero.panel-open .veil, .town-hero.driving .veil { opacity: 0; }

  .town-hero .eyebrow { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: var(--th-green); }
  .town-hero .badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 50px; background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.2); color: var(--th-amber); font-size: 11px; font-weight: 600; }
  .town-hero h1 { font-size: clamp(34px, 3.2vw, 52px); line-height: 1.06; font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; }
  .town-hero .sub { margin-top: 20px; font-size: 16.5px; line-height: 1.7; color: var(--th-ink-2); text-wrap: pretty; }
  .town-hero .cast { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; font-size: 13px; color: var(--th-ink-2); }
  .town-hero .cast > span { display: inline-flex; align-items: center; gap: 7px; }
  .town-hero .av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 8px; font-weight: 700; color: #fff; flex: 0 0 auto; }
  .town-hero .h { background: var(--th-purple); } .town-hero .ai { background: var(--th-amber); } .town-hero .b { background: var(--th-green); } .town-hero .you { background: #ff8a5b; }
  .town-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .town-hero .cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border-radius: 60px; background: var(--th-purple); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 0 30px rgba(127,90,240,0.25), 0 8px 20px rgba(127,90,240,0.2); }
  .town-hero .ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 60px; border: 1px solid var(--th-line-2); background: color-mix(in oklch, var(--th-paper) 70%, transparent); color: var(--th-ink); font-weight: 600; font-size: 15px; }
  .town-hero .ghost i { width: 8px; height: 8px; border-radius: 50%; background: var(--th-green); box-shadow: 0 0 0 4px rgba(26,154,101,0.18); }


  /* The caption strip at the foot of the scene: the selected setting, its key idea, and the way in */
  .town-hero .caption { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 50px; background: color-mix(in oklch, var(--th-card) 90%, transparent); border: 1px solid var(--th-line); box-shadow: 0 8px 20px -12px rgba(52,36,110,0.3); font-size: 13px; color: var(--th-ink-2); white-space: nowrap; }
  .town-hero .caption i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .town-hero .caption b { color: var(--th-ink); font-weight: 600; }
  .town-hero .caption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .town-hero .caption button { flex: none; border: 0; background: none; color: var(--th-ink-2); font: 600 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; border-radius: 50px; }
  .town-hero .caption .cap-nav { width: 26px; height: 26px; font-size: 15px; line-height: 1; }
  .town-hero .caption .cap-nav:hover, .town-hero .caption .cap-close:hover { background: var(--th-inset); color: var(--th-ink); }
  .town-hero .caption .cap-walk { padding: 5px 12px; color: var(--th-purple-ink); }
  .town-hero .caption .cap-walk:hover { background: #f4f0ff; }
  .town-hero .caption .cap-close { width: 26px; height: 26px; font-size: 15px; line-height: 1; color: var(--th-ink-3); }
  .town-hero .caption button:focus-visible { outline: 2px solid var(--th-purple); outline-offset: 1px; }
  /* A workshop bench's channel reads like a coding-agent terminal session */
  .town-hero .panel.term .panel-body { gap: 6px; background: #15161e; font: 12.5px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; color: #d8d6e6; }
  .town-hero .tl { white-space: pre-wrap; overflow-wrap: anywhere; animation: th-fade 0.3s var(--th-ease-out); }
  .town-hero .tl .pr { color: #b8a6f8; }
  .town-hero .tl.you .pr { color: #ff8a5b; }
  .town-hero .tl .nm { color: #8b8fa6; margin-right: 6px; }
  .town-hero .tl .dot { color: #f2a93b; }
  .town-hero .tl .out { color: #8b8fa6; }
  .town-hero .tl .add { color: #6ee7b7; }
  .town-hero .tl .del { color: #ff8fa3; }
  .town-hero .tl .cmd { color: #6ee7b7; }
  .town-hero .panel.term .typing { background: #15161e; color: #8b8fa6; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-style: normal; }
  .town-hero .panel.term .panel-input { background: #15161e; border-top-color: rgba(255,255,255,0.08); }
  .town-hero .panel.term .panel-input input { background: #1e2130; border-color: rgba(255,255,255,0.12); color: #e6e6ea; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
  .town-hero .walkin { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 50px; border: 1px solid var(--th-purple); background: none; color: var(--th-purple-ink); font: 600 12.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
  .town-hero .walkin:hover { background: #f4f0ff; }
  .town-hero .walkin:focus-visible { outline: 2px solid var(--th-purple); outline-offset: 2px; }

  .town-hero .tools { position: absolute; z-index: 4; top: 20px; right: max(28px, calc((100% - 1400px) / 2)); display: flex; gap: 8px; }
  .town-hero .tool { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 50px; border: 1px solid var(--th-line-2); background: color-mix(in oklch, var(--th-card) 88%, transparent); color: var(--th-ink); font: 600 12.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
  .town-hero .tool:hover { border-color: var(--th-purple); }
  .town-hero .tool:focus-visible { outline: 2px solid var(--th-purple); outline-offset: 2px; }
  .town-hero .tool kbd, .town-hero .hint kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--th-line-2); border-bottom-width: 2px; border-radius: 4px; background: #fff; font: 600 10.5px/16px ui-monospace, Menlo, monospace; text-align: center; color: var(--th-ink); }
  .town-hero .hint { position: absolute; z-index: 1; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 6px 14px; border-radius: 50px; background: color-mix(in oklch, var(--th-card) 88%, transparent); border: 1px solid var(--th-line); font-size: 12px; color: var(--th-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

  /* ── The panel you get by walking up to something: a table's chat, a bench's channel, the feed, the assistant ── */
  .town-hero .panel { position: absolute; z-index: 3; top: 72px; bottom: 28px; right: max(28px, calc((100% - 1400px) / 2)); width: 390px; display: flex; flex-direction: column; background: var(--th-card); border: 1px solid var(--th-line); border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(52,36,110,0.3); overflow: hidden; animation: th-panel-in 0.4s var(--th-ease-out); }
  @keyframes th-panel-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  .town-hero .panel-head { position: relative; padding: 16px 18px 14px; border-bottom: 1px solid var(--th-line); }
  .town-hero .panel-kicker { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--th-purple-ink); }
  .town-hero .panel-kicker i { width: 8px; height: 8px; border-radius: 2px; }
  .town-hero .panel h3 { margin-top: 5px; padding-right: 30px; font-size: 16.5px; line-height: 1.3; letter-spacing: -0.01em; }
  .town-hero .panel-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--th-line-2); background: none; color: var(--th-ink-2); font-size: 16px; line-height: 1; cursor: pointer; }
  .town-hero .panel-close:hover { border-color: var(--th-purple); color: var(--th-ink); }
  .town-hero .panel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
  .town-hero .cond { padding: 3px 9px; border-radius: 50px; background: #fff4e0; color: var(--th-amber-ink); font-size: 11px; font-weight: 600; }
  .town-hero .member { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 50px; background: var(--th-inset); font-size: 11px; color: var(--th-ink-2); }
  .town-hero .member .av { width: 18px; height: 18px; font-size: 7px; }
  .town-hero .note { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--th-ink-3); }
  .town-hero .progress { height: 6px; margin-top: 10px; border-radius: 3px; background: var(--th-inset); overflow: hidden; }
  .town-hero .progress i { display: block; height: 100%; border-radius: 3px; background: var(--th-green); transition: width 0.6s var(--th-ease-out); }
  .town-hero .panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: #f8f7fc; }
  .town-hero .msg { flex: none; display: flex; gap: 8px; align-items: flex-start; max-width: 92%; animation: th-fade 0.3s var(--th-ease-out); }
  .town-hero .msg .av { width: 26px; height: 26px; font-size: 8.5px; }
  .town-hero .who { margin-bottom: 3px; font-size: 11px; color: var(--th-ink-3); }
  .town-hero .who em { margin-left: 4px; font-style: normal; color: var(--th-amber-ink); }
  .town-hero .bubble { padding: 8px 11px; border-radius: 4px 14px 14px 14px; background: #fff; border: 1px solid var(--th-line); font-size: 13px; line-height: 1.45; color: var(--th-ink); overflow-wrap: anywhere; }
  .town-hero .msg.from-ai .bubble { background: #fff8ec; border-color: rgba(217,119,6,0.16); }
  .town-hero .msg.from-b .bubble { background: #effaf5; border-color: rgba(26,154,101,0.16); }
  .town-hero .msg.from-you { align-self: flex-end; flex-direction: row-reverse; }
  .town-hero .msg.from-you .who { text-align: right; }
  .town-hero .msg.from-you .bubble { background: var(--th-purple); border-color: transparent; color: #fff; border-radius: 14px 4px 14px 14px; }
  .town-hero .msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .town-hero .msg-actions button { padding: 5px 11px; border-radius: 50px; border: 1px solid var(--th-purple); background: #fff; color: var(--th-purple-ink); font: 600 12px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
  .town-hero .msg-actions button:hover { background: #f4f0ff; }
  .town-hero .typing { min-height: 18px; padding: 0 16px 6px; background: #f8f7fc; font-size: 11.5px; font-style: italic; color: var(--th-ink-3); }
  .town-hero .panel-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--th-line); background: var(--th-card); }
  .town-hero .panel-input input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 50px; border: 1px solid var(--th-line-2); background: #fff; color: var(--th-ink); font: 13px 'Plus Jakarta Sans', sans-serif; outline: none; }
  .town-hero .panel-input input:focus { border-color: var(--th-purple); }
  .town-hero .panel-input button { padding: 0 16px; border-radius: 50px; border: 0; background: var(--th-purple); color: #fff; font: 600 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
  /* The feed, styled after Carrier's social segment */
  .town-hero .post { flex: none; background: #fff; border: 1px solid var(--th-line); border-radius: 14px; overflow: hidden; }
  /* Only a post that has just arrived fades in; the feed re-renders as likes tick, and replaying the fade on every post read as blinking */
  .town-hero :is(.post, .rpost, .fpost).is-new { animation: th-fade 0.3s var(--th-ease-out); }
  /* "N comments": picks that post as the one your comment goes to */
  .town-hero .comment-on { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  .town-hero .comment-on:hover { text-decoration: underline; }
  .town-hero :is(.post, .rpost, .fpost).is-target { box-shadow: 0 0 0 2px var(--th-purple); }
  .town-hero .post-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; }
  .town-hero .post-head b { font-weight: 600; }
  .town-hero .post-head small { margin-left: auto; color: var(--th-ink-3); font-size: 11px; }
  .town-hero .post-img { position: relative; height: 110px; overflow: hidden; }
  .town-hero .post-img::before { content: ''; position: absolute; left: 12%; bottom: -30px; width: 46%; height: 110px; background: rgba(255,255,255,0.45); transform: rotate(45deg); }
  .town-hero .post-img::after { content: ''; position: absolute; right: 16%; top: 20px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.75); }
  .town-hero .post-cap { padding: 9px 12px 4px; font-size: 13px; line-height: 1.45; }
  .town-hero .post-actions { display: flex; align-items: center; gap: 14px; padding: 4px 12px 8px; font-size: 12px; color: var(--th-ink-2); }
  .town-hero .like { padding: 0; border: 0; background: none; color: var(--th-ink-2); font: 600 12px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
  .town-hero .like.on { color: #ef5b7b; }
  .town-hero .comments { display: grid; gap: 5px; padding: 0 12px 11px; font-size: 12px; line-height: 1.4; color: var(--th-ink-2); }
  .town-hero .comments b { color: var(--th-ink); font-weight: 600; }
  .town-hero .comments em { font-style: normal; color: var(--th-amber-ink); font-size: 10.5px; }
  /* Reddit-style forum */
  .town-hero .rpost { flex: none; display: grid; grid-template-columns: 38px minmax(0, 1fr); background: #fff; border: 1px solid var(--th-line); border-radius: 10px; overflow: hidden; }
  .town-hero .rvote { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; background: #f6f7f8; font: 700 12px 'Plus Jakarta Sans', sans-serif; color: #1c1c1c; }
  .town-hero .rvote button { width: 24px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: #878a8c; font-size: 13px; line-height: 1; cursor: pointer; }
  .town-hero .rvote button.on { color: #ff4500; }
  .town-hero .rbody { padding: 8px 12px 10px; min-width: 0; }
  .town-hero .rmeta { font-size: 11px; color: #787c7e; }
  .town-hero .rmeta b { color: #1c1c1c; font-weight: 700; }
  .town-hero .rtitle { margin-top: 3px; font: 600 14.5px/1.35 'Plus Jakarta Sans', sans-serif; color: #1c1c1c; }
  .town-hero .rflair { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 50px; background: #e9f5fd; color: #0079d3; font-size: 10.5px; font-weight: 700; vertical-align: 2px; }
  .town-hero .ractions { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #878a8c; }
  .town-hero .rthread { margin-top: 8px; display: grid; gap: 6px; font-size: 12px; line-height: 1.45; color: #1c1c1c; }
  .town-hero .rthread div { padding-left: 10px; border-left: 2px solid #edeff1; }
  .town-hero .rthread div.deep { margin-left: 12px; }
  .town-hero .rthread b { font-size: 11px; color: #787c7e; }
  /* Facebook-style timeline */
  .town-hero .fpost { flex: none; background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.12); overflow: hidden; }
  .town-hero .fhead { display: flex; align-items: center; gap: 9px; padding: 11px 12px 6px; }
  .town-hero .fhead .av { width: 32px; height: 32px; font-size: 9px; }
  .town-hero .fhead b { display: block; font-size: 13.5px; color: #050505; }
  .town-hero .fhead small { display: block; font-size: 11.5px; color: #65676b; }
  .town-hero .ftext { padding: 2px 12px 10px; font-size: 13.5px; line-height: 1.45; color: #050505; }
  .town-hero .fimg { height: 120px; }
  .town-hero .fcounts { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 12px; color: #65676b; border-bottom: 1px solid #ced0d4; }
  .town-hero .fcounts i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; border-radius: 50%; background: #1877f2; color: #fff; font-style: normal; font-size: 9px; vertical-align: -3px; }
  .town-hero .fbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .town-hero .fbar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; border: 0; background: none; color: #65676b; font: 600 12.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
  .town-hero .fbar button.on { color: #1877f2; }
  .town-hero .fcomments { display: grid; gap: 6px; padding: 8px 12px 11px; }
  .town-hero .fcomments div { justify-self: start; max-width: 92%; padding: 6px 10px; border-radius: 14px; background: #f0f2f5; font-size: 12.5px; line-height: 1.4; color: #050505; }
  .town-hero .fcomments b { display: block; font-size: 11.5px; }
  .town-hero .panel.fb .panel-body { background: #f0f2f5; }
  .town-hero .panel.rd .panel-body { background: #dae0e6; }
  .town-hero .tag { padding: 1px 7px; border-radius: 50px; background: var(--th-inset); font-size: 10.5px; color: var(--th-ink-3); }

  .town-hero .leaving { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(246,244,251,0.94); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--th-ease-out); }
  .town-hero .leaving span { padding: 10px 20px; border-radius: 50px; background: var(--th-ink); color: #fff; font: 700 14px 'Space Grotesk', sans-serif; }
  .town-hero.leaving-town .leaving { opacity: 1; pointer-events: auto; }
  .town-hero .fade { animation: th-fade 0.4s var(--th-ease-out); }
  @keyframes th-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    .town-hero .fade, .town-hero .msg, .town-hero .post, .town-hero .rpost, .town-hero .fpost, .town-hero .panel { animation: none !important; }
    .town-hero .copy, .town-hero .veil { transition: none; }
  }

  @media (max-width: 1280px) and (min-width: 1000px) {
    .town-hero .panel { width: 350px; }
  }

  /* Narrow screens: copy first, then the town. Panels become a bottom sheet. */
  @media (max-width: 999px) {
    .town-hero { display: flex; flex-direction: column; height: auto; overflow: visible; padding: 40px 20px 28px; background: var(--th-paper); }
    .town-hero .copy { order: 1; position: static; width: auto; max-width: 620px; transform: none; pointer-events: auto; }
    .town-hero .stage { order: 2; position: relative; inset: auto; height: clamp(360px, 92vw, 580px); margin-top: 28px; border-radius: 24px; background: radial-gradient(90% 80% at 50% 45%, var(--th-sky) 0%, oklch(97.4% 0.014 295) 60%, var(--th-paper) 100%); }
    .town-hero.panel-open .copy, .town-hero.driving .copy { opacity: 1; transform: none; }
    .town-hero.panel-open .copy a, .town-hero.panel-open .copy button, .town-hero.driving .copy a, .town-hero.driving .copy button { pointer-events: auto; }
    .town-hero .veil { display: none; }
    .town-hero .tools { position: absolute; top: 12px; right: 12px; }
    .town-hero .hint { bottom: 12px; }
    .town-hero .panel { position: fixed; z-index: 60; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(60vh, 520px); border-radius: 20px 20px 0 0; }
    .town-hero.expanded { padding: 0; overflow: hidden; }
    .town-hero.expanded .copy { display: none; }
    .town-hero.expanded .stage { flex: 1; height: auto; margin: 0; border-radius: 0; }
    .town-hero.expanded .hint { display: none; }
  }