:root{
  --terracotta:#C4653A; --gold:#D4A574; --cream:#F5E6D3; --sage:#8B9A7D;
  --taupe:#A89080; --charcoal:#3D2C29; --ink:#2A1D1B; --ink-light:#F2E5D3;
  --ink-soft:rgba(242,229,211,.72); --autumn-red:#9E3B2E; --moss:#5F6B52;
  --bronze:#B5793F; --bark:#7C6A5E; --ember:#E8B770; --paper:#FBF3E8;
  --rule:rgba(212,165,116,.25);
  --shell-1:#241816; --shell-2:#3A2A25;
  --font-display:Fraunces,Georgia,"Times New Roman",serif;
  --font-body:Karla,"Segoe UI",system-ui,-apple-system,sans-serif;
  --round:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--shell-1); color:var(--ink-light);
  font:16px/1.45 var(--font-body);
  display:flex; flex-direction:column; min-height:100dvh; height:100dvh; overflow:hidden;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.1; margin:0; }
a{ color:var(--ember); }
button{ font:inherit; }
code{ font-size:.92em; }
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip{ position:absolute; left:.5rem; top:-4rem; z-index:100; padding:.7rem 1rem;
  background:var(--cream); color:var(--ink); border-radius:10px; font-weight:600; }
.skip:focus{ top:.5rem; }

:focus-visible{ outline:3px solid var(--ember); outline-offset:2px; }


.bar{
  position:relative; z-index:5; flex:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .75rem;
  padding:calc(.5rem + env(safe-area-inset-top,0px)) .8rem .5rem;
  background:linear-gradient(180deg,var(--shell-2),var(--shell-1));
  border-bottom:1px solid var(--rule);
}
.bar__brand{ flex:1 1 auto; min-width:0; }
.bar__title{ font-size:1.25rem; font-weight:800; color:var(--cream); letter-spacing:.01em; }
.bar__sub{ margin:0; font-size:.78rem; color:var(--ink-soft); }
.bar__tiles{ display:flex; gap:.4rem; list-style:none; margin:0; padding:0; order:3; flex:1 1 100%; }
.tile{ display:flex; flex-direction:column; padding:.3rem .6rem; border-radius:10px;
  background:rgba(232,183,112,.10); border:1px solid var(--rule); min-width:0; }
.tile__k{ font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); }
.tile__v{ font-family:var(--font-display); font-size:1.1rem; color:var(--ember); line-height:1.15; }
.tile__v--sm{ font-size:.9rem; }
.bar__hq{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.45rem .85rem;
  border-radius:999px; background:var(--cream); color:var(--ink); font-weight:600;
  text-decoration:none; font-size:.9rem; white-space:nowrap;
}
.bar__hq:hover{ background:#fff4e4; }
@media (max-width:759px){
  .bar__title{ font-size:1.1rem; }
  .bar__hq{ font-size:.8rem; padding:.35rem .7rem; gap:.4rem; }
  .tile{ flex-direction:row; align-items:baseline; gap:.45rem; padding:.25rem .6rem; }
  .tile__v{ font-size:1rem; } .tile__v--sm{ font-size:.82rem; }
}
.bar__hq-light{ width:.6rem; height:.6rem; border-radius:50%; background:#E0A43A;
  box-shadow:0 0 0 3px rgba(224,164,58,.25), 0 0 10px #E0A43A; }
.bar__stale{
  order:4; flex:1 1 100%; margin:0; padding:.45rem .7rem; border-radius:10px;
  background:#5A3F2C; color:var(--cream); font-size:.86rem; font-weight:600;
  border:1px solid rgba(232,183,112,.6);
}
@media (min-width:760px){
  .bar{ flex-wrap:nowrap; padding-left:1.2rem; padding-right:1.2rem; }
  .bar__tiles{ order:0; flex:0 0 auto; }
  .bar__stale{ position:absolute; left:50%; top:100%; transform:translate(-50%,.4rem);
    width:auto; max-width:90vw; box-shadow:0 10px 30px -12px #000; }
}


.stage{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:#3b4a35; }
.stage__canvas{ position:absolute; inset:0; touch-action:none; }
.stage__canvas canvas{ display:block; }
.stage__canvas:focus-visible{ outline:2px solid rgba(232,183,112,.5); outline-offset:-3px; }
.stage__loading{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); color:var(--cream); font-size:1.1rem; background:var(--shell-1); }

.prompt{
  position:absolute; left:50%; bottom:calc(4.6rem + var(--safe-b)); transform:translateX(-50%);
  display:flex; align-items:center; gap:.55rem; min-height:48px; max-width:calc(100% - 2rem);
  padding:.55rem 1.1rem .55rem .6rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--cream); color:var(--ink); font-weight:600; font-size:1rem;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7); z-index:3;
}
.prompt__key{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .45rem;
  border-radius:6px; background:var(--charcoal); color:var(--ember); }
@media (hover:none){ .prompt__key{ display:none; } .prompt{ padding-left:1.1rem; } }

.controls{
  position:absolute; right:.6rem; bottom:calc(.6rem + var(--safe-b)); z-index:3;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; max-width:calc(100% - 1.2rem);
}
.ctl{
  min-width:44px; min-height:44px; padding:0 .7rem; border-radius:12px; cursor:pointer;
  border:1px solid rgba(245,230,211,.28); background:rgba(36,24,22,.82); color:var(--cream);
  font-size:1.05rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ctl--wide{ font-size:.86rem; font-weight:600; }
.ctl[aria-pressed="true"], .ctl[aria-expanded="true"]{ background:var(--cream); color:var(--ink); }
.ctl:hover{ border-color:var(--ember); }

@media (hover:none) and (max-width:620px){
  .ctl[data-ch-zoom="in"], .ctl[data-ch-zoom="out"]{ display:none; }
}

.hint{
  position:absolute; left:.6rem; top:.6rem; z-index:3; max-width:min(22rem,calc(100% - 1.2rem));
  display:flex; gap:.6rem; align-items:center; padding:.6rem .7rem .6rem .9rem; border-radius:12px;
  background:rgba(36,24,22,.88); border:1px solid var(--rule); font-size:.9rem;
}
.hint p{ margin:0; }
.hint__ok{ flex:none; min-height:40px; padding:0 .8rem; border-radius:10px; border:0;
  background:var(--cream); color:var(--ink); font-weight:600; cursor:pointer; }

.legend{
  position:absolute; right:.6rem; bottom:calc(4rem + var(--safe-b)); z-index:4;
  width:min(24rem,calc(100% - 1.2rem)); max-height:calc(100% - 5rem); overflow:auto;
  padding:1rem 1.1rem; border-radius:var(--round); background:var(--paper); color:var(--ink);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.8);
}
.legend h2{ font-size:1.1rem; color:var(--charcoal); }
.legend__lede{ margin:.35rem 0 .6rem; font-size:.88rem; color:rgba(42,29,27,.75); }
.legend__levels{ list-style:none; margin:0 0 .6rem; padding:0; display:grid; gap:.3rem; }
.legend__levels li{ display:grid; grid-template-columns:2rem 1fr; gap:.5rem; align-items:start; font-size:.86rem; }
.legend__levels b{ color:var(--charcoal); }
.legend__two{ margin:.35rem 0; font-size:.86rem; }

.lv-dot{ display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%;
  font-family:var(--font-display); font-weight:800; font-size:.85rem; color:var(--ink); }
.lv-0{ background:#E9DDCB; } .lv-1{ background:#E6CFA6; } .lv-2{ background:#DDB57C; }
.lv-3{ background:#C9A25F; color:#FBF3E8; } .lv-4{ background:#A9803F; color:#FBF3E8; } .lv-5{ background:#7A5A2A; color:#FBF3E8; }

.stage-chip{ display:inline-block; padding:.12rem .5rem; border-radius:999px; font-size:.76rem;
  font-weight:600; letter-spacing:.02em; margin-right:.25rem; }
.stage-chip--running{ background:#E6CC8E; color:#3D2C29; }
.stage-chip--construction{ background:repeating-linear-gradient(135deg,#F1D27A 0 8px,#3D2C29 8px 12px); color:#2A1D1B;
  text-shadow:0 0 3px #F1D27A, 0 0 3px #F1D27A; }
.stage-chip--soon{ background:#D9CBB6; color:#3D2C29; }
.stage-chip--landmark{ background:#CFD5C4; color:#2E3A2A; }
.stage-chip--sample{ background:#E9DDCB; color:#5B4638; font-weight:500; }

.link-btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 .9rem; border-radius:999px;
  border:1px solid rgba(61,44,41,.3); background:transparent; color:inherit; cursor:pointer;
  font-weight:600; font-size:.9rem; text-decoration:none; }
.link-btn:hover{ border-color:var(--terracotta); }
.link-btn--solid{ background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); }
.link-btn--solid:hover{ background:#4c3833; }
.link-btn[aria-disabled="true"]{ opacity:.55; cursor:default; }


.sheet{ position:fixed; inset:0; z-index:20; }
.sheet__scrim{ position:absolute; inset:0; background:rgba(20,12,10,.25); }
.sheet__panel{
  position:absolute; left:0; right:0; bottom:0; max-height:62dvh; overflow:auto;
  padding:1.1rem 1.1rem calc(1.3rem + var(--safe-b));
  background:var(--paper); color:var(--ink); border-radius:18px 18px 0 0;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.8);
  animation:sheet-up .28s ease-out;
}
.sheet__panel:focus{ outline:none; }
@media (min-width:760px){
  .sheet__scrim{ background:transparent; }
  .sheet__panel{ left:auto; top:0; bottom:0; width:min(27rem,92vw); max-height:none;
    border-radius:18px 0 0 18px; animation-name:sheet-in; padding-top:1.4rem; }
}
@keyframes sheet-up{ from{ transform:translateY(30px); opacity:0; } }
@keyframes sheet-in{ from{ transform:translateX(30px); opacity:0; } }
.sheet__close{
  position:absolute; right:.6rem; top:.6rem; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(61,44,41,.08); color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer;
}
.sheet__close:hover{ background:rgba(61,44,41,.16); }

.pl-head{ display:flex; gap:.8rem; align-items:flex-end; padding-right:2.6rem; }
.pl-face{ flex:none; width:72px; height:96px; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,var(--hue,#C4653A),#2A1D1B); position:relative; }
.pl-face img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.pl-kicker{ margin:0 0 .15rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(42,29,27,.6); }
.sheet h2, .overlay h2{ color:var(--charcoal); }
.pl-title{ font-size:1.45rem; font-weight:800; }
.pl-who{ margin:.2rem 0 0; font-size:.9rem; color:rgba(42,29,27,.75); }
.pl-sec{ margin-top:1rem; }
.pl-sec h3{ font-size:.95rem; color:var(--charcoal); margin-bottom:.35rem; }
.pl-sec p{ margin:.25rem 0; }
.pl-sec ul{ margin:.2rem 0; padding-left:1.1rem; }
.pl-status{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin-top:.8rem; }
.verb{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:600;
  padding:.14rem .55rem; border-radius:999px; background:rgba(61,44,41,.08); }
.verb::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--hue,#C4653A); }
.verb--dim::before{ opacity:.45; }
.pips{ display:flex; gap:.3rem; margin:.35rem 0; }
.pips i{ flex:1; height:.5rem; border-radius:999px; background:rgba(61,44,41,.12); }
.pips i.on{ background:linear-gradient(90deg,#D9B06A,#B5793F); }
.pl-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.pl-note{ font-size:.84rem; color:rgba(42,29,27,.66); }
.mailbox{ display:flex; gap:.6rem; align-items:center; margin-top:1rem; padding:.6rem .75rem;
  border-radius:12px; background:rgba(61,44,41,.06); font-size:.86rem; }
.mailbox__icon{ flex:none; width:1.9rem; height:1.9rem; border-radius:6px 6px 3px 3px;
  background:#9E3B2E; box-shadow:inset 0 -6px 0 rgba(0,0,0,.18); }

.mono{ display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  background:var(--hue,#C4653A); color:var(--hue-ink,#F5E6D3); font-family:var(--font-display);
  font-weight:800; font-size:.95rem; flex:none; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08); }
.mono--sm{ width:1.6rem; height:1.6rem; font-size:.78rem; }
.mono--lg{ width:3.2rem; height:3.2rem; font-size:1.4rem; }

.rules{ margin:.3rem 0; padding-left:1.2rem; }
.rules li{ margin:.25rem 0; }


.shelf{ display:flex; gap:.45rem; align-items:flex-end; min-height:6.2rem; padding:.5rem .6rem 0;
  border-bottom:8px solid #7C5A3E; border-radius:6px 6px 0 0; background:rgba(61,44,41,.06); overflow-x:auto; }
.book{ position:relative; flex:none; width:4.2rem; height:5.6rem; border-radius:3px 6px 6px 3px; padding:.4rem .35rem;
  color:#FBF3E8; font-size:.68rem; line-height:1.2; box-shadow:inset 4px 0 0 rgba(0,0,0,.18), 0 4px 8px -4px rgba(0,0,0,.5); }
.book b{ display:block; font-family:var(--font-display); font-size:.74rem; }
.book__mark{ position:absolute; right:.4rem; top:-4px; width:.55rem; height:1.3rem; background:#E8B770;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%); box-shadow:0 0 10px #E8B770; }
.shelf__empty{ font-size:.84rem; color:rgba(42,29,27,.6); margin:auto 0 .6rem; }


.notes{ list-style:none; padding:0; margin:.3rem 0; display:grid; gap:.45rem; }
.notes li{ padding:.55rem .7rem; border-radius:6px; background:#FFF8EA; box-shadow:0 2px 6px -3px rgba(0,0,0,.35);
  font-size:.9rem; transform:rotate(-.4deg); }
.notes li:nth-child(even){ transform:rotate(.5deg); }
.notes small{ display:block; color:rgba(42,29,27,.6); font-size:.74rem; margin-top:.15rem; }


.poster{ margin-top:.8rem; padding:1rem; border-radius:10px; color:#FBF3E8; text-align:center;
  background:radial-gradient(circle at 50% 20%,#7A4A2E,#2A1D1B 75%); border:3px solid #D4A574; }
.poster__kicker{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); }
.poster h3{ font-size:1.5rem; color:#FBF3E8; margin:.3rem 0; }
.poster p{ font-size:.92rem; margin:.4rem auto 0; max-width:32ch; }


.overlay{ position:fixed; inset:0; z-index:30; background:rgba(20,12,10,.55); display:flex; justify-content:center; }
.overlay__panel{ width:100%; max-width:52rem; height:100%; overflow:auto; background:var(--paper); color:var(--ink);
  padding:calc(1rem + env(safe-area-inset-top,0px)) 1rem calc(2rem + var(--safe-b)); position:relative; }
.overlay__panel:focus{ outline:none; }
@media (min-width:760px){ .overlay{ padding:2rem 1rem; } .overlay__panel{ height:auto; max-height:100%; border-radius:18px; padding:1.5rem 1.8rem 2rem; } }
.overlay__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-right:3rem; }
.overlay__head h2{ font-size:1.6rem; font-weight:800; }
.overlay__lede{ margin:.5rem 0 0; font-size:.98rem; }
.overlay__note{ margin:.3rem 0 0; font-size:.86rem; color:rgba(42,29,27,.66); }
.overlay__tools{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0 .4rem; }
.overlay .footnote{ font-size:.8rem; color:rgba(42,29,27,.6); margin-top:1.6rem; }

.lst-group{ margin-top:1.3rem; }
.lst-group > h3{ font-size:1.05rem; color:var(--charcoal); border-bottom:1px solid rgba(61,44,41,.15); padding-bottom:.3rem; }
.lst{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.5rem; }
@media (min-width:620px){ .lst{ grid-template-columns:1fr 1fr; } }
.lst li{ display:flex; gap:.65rem; align-items:center; padding:.6rem .7rem; border-radius:12px; background:#FFF8EA;
  border:1px solid rgba(61,44,41,.08); }
.lst__txt{ flex:1; min-width:0; }
.lst__txt b{ display:block; font-family:var(--font-display); font-size:1rem; color:var(--charcoal); }
.lst__txt span{ display:block; font-size:.8rem; color:rgba(42,29,27,.7); }
.lst__btns{ display:flex; flex-direction:column; gap:.3rem; }
.lst__btns button{ min-height:44px; min-width:44px; padding:0 .7rem; border-radius:10px; border:1px solid rgba(61,44,41,.2);
  background:#fff; color:var(--ink); font-size:.8rem; font-weight:600; cursor:pointer; }
.lst__btns button:hover{ border-color:var(--terracotta); }
.lst__icon{ flex:none; width:2rem; height:2rem; border-radius:8px; display:grid; place-items:center;
  background:var(--hue,#A89080); color:#FBF3E8; font-family:var(--font-display); font-weight:800; }


.mm-wrap{ overflow-x:auto; margin-top:1rem; -webkit-overflow-scrolling:touch; }
.mm{ border-collapse:separate; border-spacing:0; min-width:40rem; width:100%; font-size:.88rem; }
.mm th, .mm td{ padding:.45rem .4rem; border-bottom:1px solid rgba(61,44,41,.1); text-align:center; }
.mm thead th{ font-family:var(--font-display); font-size:.82rem; color:var(--charcoal); vertical-align:bottom; }
.mm thead th small{ display:block; font-family:var(--font-body); font-weight:400; font-size:.7rem; color:rgba(42,29,27,.6); }
.mm tbody th{ text-align:left; font-weight:600; color:var(--charcoal); white-space:nowrap; }
.mm td.lvcol-0{ background:rgba(233,221,203,.35); } .mm td.lvcol-1{ background:rgba(230,207,166,.25); }
.mm td.lvcol-2{ background:rgba(221,181,124,.2); } .mm td.lvcol-3{ background:rgba(201,162,95,.16); }
.mm td.lvcol-4{ background:rgba(169,128,63,.13); } .mm td.lvcol-5{ background:rgba(122,90,42,.12); }
.mm__who{ display:flex; align-items:center; gap:.4rem; }
.mm__dot{ display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--hue,#A89080); color:var(--hue-ink,#FBF3E8); font-family:var(--font-display); font-weight:800;
  font-size:.8rem; box-shadow:0 0 0 3px rgba(212,165,116,.35); }
.mm__dot--none{ background:#E9DDCB; color:#5B4638; }

.noscript{ padding:2rem; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before{ animation:none !important; transition:none !important; }

.pl-kpi{background:#FBF6EE;border:1px solid #E7DDCF;border-radius:10px;padding:10px 12px;color:#2A1D1B;font-size:14px;line-height:1.4}
.pl-kpi b{display:block;font-weight:600;margin-bottom:4px;color:#2A1D1B}
.pl-kpi span{color:#3D2C29}
.demo-preview{background:#FBF6EE;border-bottom:1px solid #E7DDCF;color:#2A1D1B;padding:10px 16px;margin:0;font:500 14px/1.4 Karla,system-ui,sans-serif;text-align:center}
.demo-preview a{color:#8B4518}