:root{
  --bg:#0b0b0b; --text:#d6d0c6; --muted:#b8b2a7; --frame:rgba(255,255,255,.14);
  --nav:rgba(255,255,255,.28); --nav-hover:rgba(255,255,255,.58);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.site-header{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 28px;
  background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.12), rgba(0,0,0,0));
  z-index:80; pointer-events:none;
}
.site-header a,.site-header .counter{pointer-events:auto}

.site-branding{display:flex;align-items:center;gap:12px;pointer-events:auto}
.home-links{display:flex;align-items:center;gap:10px}
.house-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;opacity:.96;transition:opacity .15s ease, transform .15s ease}
.house-link:hover{opacity:1;transform:translateY(-1px)}
.house-link svg{display:block;width:100%;height:100%}
.house-link.primary .roof,.house-link.primary .body,.house-link.primary .door{fill:#fff;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.house-link.secondary .roof,.house-link.secondary .body{fill:#000;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.house-link.secondary .door{fill:#fff;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.gallery-house-link{
position:fixed;
  top:80px;
  left:50%;
  transform:translateX(-50%);
  z-index:96;
  display:none;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:auto;
  height:30px;
  opacity:.96;
  transition:opacity .15s ease, transform .15s ease;
  text-decoration:none;
}

.gallery-house-link:hover{
  opacity:1;
  transform:translateX(-50%) translateY(-1px);
}

.gallery-house-link span{
  display:block;
  width:24px;
  height:11px;
  background:#fff;
  border:1px solid #fff;
  box-sizing:border-box;
}
.site-mark{color:#d8d2c8;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.counter{color:rgba(255,255,255,.6);font-size:.9rem}
.home{min-height:100vh;display:grid;place-items:center;text-align:center;padding:32px}
.home-inner{max-width:1100px;transform:translateY(-2vh)}
.home h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.2vw,3.3rem);line-height:1.06;letter-spacing:.01em;color:#000;animation:titleFade 1.6s ease forwards}
.home .subtitle{margin:14px 0 0;font-size:.88rem;letter-spacing:.04em;color:#000;animation:subFade 1.6s ease forwards;animation-delay:.18s}
.arrow-link{display:inline-block;margin-top:30px;color:#fff;text-decoration:none;font-size:2rem;line-height:1;opacity:0;animation:arrowFade 1.6s ease forwards, pulse 2.8s ease-in-out infinite;animation-delay:.55s, 2.3s}
@keyframes titleFade{from{color:#000;opacity:0}to{color:var(--text);opacity:1}}
@keyframes subFade{from{color:#000;opacity:0}to{color:var(--muted);opacity:1}}
@keyframes arrowFade{from{opacity:0;transform:translateY(8px)}to{opacity:.88;transform:translateY(0)}}
@keyframes pulse{0%{transform:translateY(0)}50%{transform:translateY(5px)}100%{transform:translateY(0)}}

.viewer{position:relative;min-height:100vh;width:100vw;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;padding:72px 24px 30px}
.gallery-toggle{width:30px;height:30px;display:grid;grid-template-columns:repeat(3,8px);grid-template-rows:repeat(3,8px);gap:3px;align-content:center;justify-content:center;margin:0 0 16px;padding:0;border:0;background:transparent;box-shadow:none;appearance:none;-webkit-appearance:none;cursor:pointer;align-self:end}
.gallery-toggle span{display:block;width:8px;height:8px;background:#fff;opacity:1;transition:opacity .15s ease;border:0;box-shadow:none}
.gallery-toggle:hover span{opacity:1}
.image-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.figure-frame{padding:0;margin:0;background:transparent;box-shadow:none;border:0;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.figure-frame img{display:block;vertical-align:top;width:auto;height:auto;max-width:min(88vw,1200px);max-height:68vh;background:transparent;border:1px solid #fff;box-shadow:none}
.main-image.is-fading-out{opacity:0;transition:opacity .18s ease}
.main-image.is-fading-in{opacity:0;animation:imageFade .45s ease forwards}
@keyframes imageFade{from{opacity:0}to{opacity:1}}
.edge-nav{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
  color:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.42);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 4px 18px rgba(0,0,0,.28);
  transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease;
  z-index:95;
}
.edge-nav:hover{
  color:#fff;
  border-color:rgba(255,255,255,.42);
  background:rgba(0,0,0,.62);
}
.edge-nav.prev{left:max(18px, calc(env(safe-area-inset-left) + 18px))}
.edge-nav.next{right:max(18px, calc(env(safe-area-inset-right) + 18px))}
.caption{text-align:center;color:var(--muted);font-size:.95rem;line-height:1.5;margin-top:14px;max-width:42ch;min-height:1.4em;text-wrap:pretty}
.caption.is-empty{min-height:.4em}
.qr{margin-top:14px;min-height:56px;display:flex;align-items:center;justify-content:center;opacity:0;animation:qrFade .8s ease forwards;animation-delay:.25s}
.qr.is-hidden{visibility:hidden;opacity:0;pointer-events:none}
.qr img{width:56px;height:56px}
@keyframes qrFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.gallery-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;z-index:100;opacity:0}
.gallery-modal.is-open{display:block;animation:galleryFade .22s ease forwards}
@keyframes galleryFade{from{opacity:0}to{opacity:1}}
.gallery-inner{position:absolute;inset:88px 40px 40px;overflow:auto;scroll-behavior:smooth}
.gallery-modal .gallery-header{position:fixed;top:0;left:0;right:0;z-index:110;padding:18px 28px;height:auto;background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.12), rgba(0,0,0,0));overflow:visible;pointer-events:none;}
.gallery-modal .gallery-header a,.gallery-modal .gallery-header .counter{pointer-events:auto;}
.gallery-modal .gallery-inner{top:242px;left:40px;right:40px;bottom:40px;}
@media (max-width:780px){.gallery-modal .gallery-header{padding:16px 18px;height:auto}.gallery-modal .gallery-inner{top:178px;left:14px;right:14px;bottom:14px;}}

.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;align-items:start}
.thumb-grid a{display:flex;align-items:center;justify-content:center;min-height:120px;border:1px solid rgba(255,255,255,.08);padding:6px;background:rgba(255,255,255,.03);transition:border-color .12s ease,background .12s ease,transform .12s ease}
.thumb-grid a:hover{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.thumb-grid a.is-current{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.10);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.thumb-grid img{display:block;vertical-align:top;width:auto;height:auto;max-width:100%;max-height:108px;aspect-ratio:auto;object-fit:contain;background:transparent;border:1px solid #fff;box-shadow:none}
.thumb-index{display:none}
.fullscreen-toggle{position:fixed;bottom:18px;right:18px;z-index:90;width:40px;height:40px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.68);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}
.fullscreen-toggle:hover{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.08)}
@media (max-width:1100px){.home h1{white-space:normal;font-size:clamp(2.2rem,8vw,3.4rem);line-height:1.02}.home .subtitle{font-size:.92rem}}
@media (max-width:780px){.site-header{padding:16px 18px}.site-mark,.counter{font-size:.82rem}.viewer{padding:68px 14px 22px}.gallery-toggle{width:30px;height:30px;grid-template-columns:repeat(3,8px);grid-template-rows:repeat(3,8px);gap:2px;margin-bottom:14px}.figure-frame img{max-width:92vw;max-height:58vh}.edge-nav{width:50px;height:50px;font-size:26px}.edge-nav.prev{left:max(10px, calc(env(safe-area-inset-left) + 10px))}.edge-nav.next{right:max(10px, calc(env(safe-area-inset-right) + 10px))}.caption{font-size:.86rem;max-width:32ch}.gallery-inner{inset:84px 14px 14px}.thumb-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.thumb-grid a{min-height:92px}.thumb-grid img{max-height:80px}.fullscreen-toggle{bottom:14px;right:14px}}


.chat-body{overflow:hidden;background:#070707;color:#f2eee8}
.chat-header{background:linear-gradient(to bottom, rgba(0,0,0,.86), rgba(0,0,0,.18), rgba(0,0,0,0))}
.chat-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:84px 16px 24px}
.chat-panel{width:min(760px,100%);display:grid;grid-template-rows:auto 1fr auto auto;min-height:min(86vh,920px);max-height:calc(100vh - 108px);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);backdrop-filter:blur(4px)}
.chat-intro{padding:26px 22px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center}
.chat-opening{margin:0;font-family:var(--serif);font-size:clamp(1.15rem,2.3vw,1.7rem);line-height:1.2;color:#f5f0e8;text-align:center}
.chat-work{margin:10px 0 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.chat-stream{padding:18px 16px 8px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.chat-msg{display:flex;flex-direction:column;max-width:88%}
.chat-msg.user{align-self:flex-end;align-items:flex-end}
.chat-msg.assistant{align-self:flex-start;align-items:flex-start}
.chat-bubble{padding:14px 16px;border-radius:18px;line-height:1.5;font-size:1rem;white-space:pre-wrap}
.chat-msg.user .chat-bubble{background:#f4f0ea;color:#111;border-bottom-right-radius:6px}
.chat-msg.assistant .chat-bubble{background:rgba(255,255,255,.06);color:#f2eee8;border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:6px}
.chat-msg-actions{margin-top:6px}
.speak-btn,
#micButton,
#chatForm button[type="submit"] {
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  padding:0;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.speak-btn:hover,
#micButton:hover,
#chatForm button[type="submit"]:hover {
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}
.chat-composer{padding:12px 14px 10px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.chat-composer textarea{width:100%;resize:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#f2eee8;border-radius:18px;padding:14px 16px;min-height:54px;max-height:220px;font:inherit;line-height:1.4}
.chat-composer textarea:focus{outline:none;border-color:rgba(255,255,255,.32)}
.chat-actions{display:flex;gap:10px;align-items:center}
.icon-btn,.send-btn{height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font:inherit}
.speak-btn{
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
}
.icon-btn{width:48px;font-size:1.05rem}
.icon-btn.is-listening{background:#fff;color:#111}
.send-btn{padding:0 18px;letter-spacing:.04em}
.icon-btn:hover,.send-btn:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24)}
.chat-help{margin:0;padding:0 18px 18px;font-size:.82rem;color:rgba(255,255,255,.54)}
.chat-image-card{margin-top:16px;display:grid;gap:10px;justify-items:center}
.chat-image-card img{max-width:min(560px,100%);max-height:385px;object-fit:contain;border:1px solid rgba(255,255,255,.12);background:#000;}
.chat-image-caption{margin:0;max-width:34ch;text-align:center;font-size:.88rem;line-height:1.45;color:rgba(255,255,255,.62);text-wrap:pretty}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.is-typing{display:flex;gap:6px;align-items:center;min-width:58px}
.is-typing span{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.62);animation:typingBounce 1s infinite ease-in-out}
.is-typing span:nth-child(2){animation-delay:.14s}.is-typing span:nth-child(3){animation-delay:.28s}
@keyframes typingBounce{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
@media (max-width:780px){.chat-shell{padding:78px 0 0}.chat-panel{min-height:calc(100vh - 78px);max-height:none;border-left:0;border-right:0;border-bottom:0}.chat-intro{padding:22px 18px 10px}.chat-stream{padding:16px 12px 8px}.chat-msg{max-width:94%}.chat-composer{padding:12px}.chat-opening{font-size:1.25rem}}

.gallery-modal.is-open .gallery-house-link{display:inline-flex}
.counter{display:none}
.chat-exit {
  display: inline-block;
  border: 1px solid #fff;
  padding: 6px 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}
.chat-exit.under-image {
  margin: 12px auto 0;
}
/* FORCE: chat icons */
.speak-btn,
.icon-btn,
.send-btn,
#micButton,
#chatForm button,
.chat-actions button {
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1.15rem !important;
  line-height:1 !important;
  cursor:pointer !important;
  text-align:center !important;
}

.speak-btn:hover,
.icon-btn:hover,
.send-btn:hover,
#micButton:hover,
#chatForm button:hover,
.chat-actions button:hover {
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.32) !important;
}

/* Chat icons: inline SVG replacement for emoji icons. Keeps existing 48px button footprint. */
.chat-icon {
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}

.speak-btn .chat-icon,
#micButton .chat-icon {
  width:22px !important;
  height:22px !important;
}

#micButton.is-listening .chat-icon {
  stroke:currentColor;
}
.intro-speak-btn{
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.intro-speak-btn svg{
  width:22px;
  height:22px;
}
.chat-opening{
  text-align:center;
}

.intro-speak-btn{
  display:inline-flex;
  vertical-align:middle;
  margin-left:10px;
}