/* UCS estate viewer — embeddable.

   Every class is namespaced ev__*. Generic names are not an option here: the
   panel used to carry .foot, .rows and .eyebrow, and dropped into the V2 page
   it inherited the site footer's near-black background and the site's heading
   type. A module that borrows the host's class names is not a module. */
  /* tokens live on the root element, not on :root — the host page has its own
     --gold and must not inherit ours */
  .ev{
    --bg:#14171e;
    --ink:var(--gold);            /* architecture */
    --gold:#efb52e;           /* the one active system */
    --alarm:#e0332c;          /* reserved: intrusion only, never selection */
    --text:#f4f2ee; --muted:rgba(244,242,238,.56);
  }
  .ev{position:relative;overflow:hidden;background:var(--bg);color:var(--text);
      font-family:"Noto Sans TC","PingFang TC",Arial,sans-serif;
      -webkit-font-smoothing:antialiased;isolation:isolate}
  /* setSize(w,h,false) does not write CSS size, and a canvas is a replaced
     element: width:auto resolves to the drawing buffer, not the viewport. */
  .ev__gl{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab}
  .ev__gl:active{cursor:grabbing}

  .ev__panel{position:absolute;left:0;top:0;bottom:0;width:430px;z-index:3;
         padding:78px 0 34px 90px;box-sizing:border-box;
         display:flex;flex-direction:column;pointer-events:none}
  .ev__panel > *{pointer-events:auto}
  /* The drawing runs behind the copy — the fit only reserves a band for the
     points it is given, and trees, walls and coverage spill past it. A scrim
     keeps the text legible without shrinking the model. */
  .ev__panel::before{content:"";position:absolute;inset:0 -90px 0 0;z-index:-1;
     pointer-events:none;
     background:linear-gradient(90deg, var(--bg) 0%, var(--bg) 58%, rgba(43,42,41,0) 100%)}
  .ev__eyebrow{font:11px/1 ui-monospace,monospace;letter-spacing:.22em;color:var(--muted);
           text-transform:uppercase}
  .ev__title{font-size:31px;font-weight:500;line-height:1.28;margin:16px 0 12px;letter-spacing:.01em}
  .ev__lede{font-size:14px;line-height:1.78;color:var(--muted);margin:0 34px 30px 0}

  /* Tabs on a hairline, not three filled pills: the rest of this site is
     built from rules and gold underlines, and a rounded grey capsule reads as
     somebody else's component library. */
  .ev__layers{display:flex;gap:clamp(20px,3vw,44px);margin:56px 0 4px;
      border-block-end:1px solid rgba(244,242,238,.14)}
  .ev__layers button{flex:1;text-align:left;background:none;cursor:pointer;border:0;
      border-block-end:2px solid transparent;margin-block-end:-1px;
      padding:0 0 15px;color:var(--muted);font-family:inherit;line-height:1.35;
      transition:color .18s, border-color .18s}
  .ev__layers button b{display:block;font:11px/1 ui-monospace,monospace;letter-spacing:.22em;
      font-weight:400;margin-bottom:9px;color:inherit;opacity:.72}
  .ev__layers button span{font-size:15px;letter-spacing:.01em}
  .ev__layers button:hover{color:var(--text)}
  .ev__layers button.on{color:var(--text);border-block-end-color:var(--gold)}
  .ev__layers button.on b{color:var(--gold);opacity:1}

  .ev__rows{list-style:none;margin:0;padding:0;border-top:1px solid rgba(201,184,150,.14)}
  .ev__row{display:flex;align-items:center;gap:14px;padding:15px 8px 15px 0;cursor:pointer;
       border-bottom:1px solid rgba(201,184,150,.14);
       transition:color .18s, background .18s}
  .ev__row .ev__dot{width:6px;height:6px;border-radius:50%;flex:none;
            background:rgba(201,184,150,.3);transition:background .22s, box-shadow .22s}
  .ev__row .ev__zh{font-size:15.5px;letter-spacing:.02em}
  .ev__row .ev__n{display:none}
  /* Hover is UI feedback only. It must not arm anything on the model. */
  .ev__row:hover{color:#fff;background:rgba(201,184,150,.05)}
  .ev__row:hover .ev__dot{background:rgba(201,184,150,.62)}
  .ev__row.on{color:var(--gold)}
  .ev__row.on .ev__dot{background:var(--gold);box-shadow:0 0 9px rgba(255,183,0,.75)}
  .ev__row.on .ev__n{color:rgba(255,183,0,.6)}

  /* The trigger is an item in the same list, not a pill from another design.
     Its only difference from a system row is the mono tag and, once running,
     the alarm colour. */
  .ev__sim{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;
     padding:15px 8px 15px 0;background:none;border:0;
     border-bottom:1px solid rgba(201,184,150,.14);
     color:#e0716a;font-family:inherit;font-size:15.5px;letter-spacing:.02em;
     text-align:left;cursor:pointer;position:relative;overflow:hidden;
     transition:color .18s, background .18s}
  .ev__sim::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
     background:rgba(224,51,44,.5);transition:background .22s, box-shadow .22s}
  .ev__sim::after{content:"";margin-left:auto}
  .ev__sim:hover{color:#ff8f88;background:rgba(224,51,44,.08)}
  .ev__sim:hover::before{background:var(--alarm)}
  /* the sequence's own clock, running along the item's baseline */
  .ev__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--alarm);
     transform:scaleX(0);transform-origin:left;pointer-events:none}
  .ev__sim.running{color:var(--alarm)}
  .ev__sim.running::before{background:var(--alarm);box-shadow:0 0 9px rgba(224,51,44,.7)}
  .ev__sim.running::after{content:""}

  /* Dead UI when nothing is running: the rail only exists during a sequence. */
  .ev__stages{display:none;gap:0;list-style:none;margin:16px 0 0;padding:0}
  .ev__stages.is-on{display:flex}
  .ev__stages li{flex:1;position:relative;padding:10px 10px 0 0;
     font-size:12px;letter-spacing:.04em;
     color:rgba(244,242,238,.34);transition:color .25s}
  .ev__stages li::before{content:"";position:absolute;left:0;right:10px;top:0;height:1px;
     background:rgba(201,184,150,.14);transition:background .25s}
  .ev__stages li.on{color:var(--alarm)}
  .ev__stages li.on::before{background:var(--alarm)}
  .ev__stages li.done{color:rgba(201,184,150,.5)}
  .ev__stages li.done::before{background:rgba(201,184,150,.34)}

  .ev__zoom{position:absolute;right:22px;bottom:22px;z-index:3;display:flex;gap:6px;opacity:.55;transition:opacity .2s}
  .ev:hover .ev__zoom{opacity:1}
  .ev__zoom button{width:30px;height:30px;border-radius:50%;cursor:pointer;background:none;
     border:1px solid rgba(201,184,150,.28);color:var(--muted);font:15px/1 ui-monospace,monospace;
     transition:.18s}
  .ev__zoom button:hover{color:var(--text);border-color:rgba(244,242,238,.55)}

  /* L1 borrows the row exactly — same hairlines, same dot, same mono tag — and
     adds prose in the lede's type. A bespoke heading block made the core layer
     look like it came from a different panel. */
  .ev__note{display:none}
  .ev__note.is-on{display:block}
  .ev__note .ev__hold{margin:18px 34px 0 0;font-size:13.5px;line-height:1.78;
     color:var(--muted)}
  .ev__note .ev__hold--dim{margin-top:12px;font-size:12.5px;
     color:rgba(201,184,150,.42)}

  .ev__hint{margin-top:auto;font-size:13px;line-height:1.7;color:var(--muted);letter-spacing:.01em}

  /* L1 is deliberately contentless: no specification, no position, no trigger
     logic. Not hidden with CSS — there is nothing here to hide. */
  .ev__core{position:absolute;inset:0;display:none;place-items:end center;z-index:2;pointer-events:none}
  .ev__core.is-on{display:grid}
  .ev__core .ev__txt{margin:0 0 62px 430px;text-align:center;max-width:460px}
  .ev__core .ev__txt p{font-size:13.5px;line-height:1.9;color:var(--muted)}

  /* the host page's language switch drives this too — same contract as V2 */
  html:not([lang="en"]) .ev [data-en]{display:none !important}
  html[lang="en"] .ev [data-zh]{display:none !important}

  /* Not a mobile design — a guard, so a narrow frame degrades instead of
     burying the drawing under a 430px panel. */
  @media (max-width: 900px){
    .ev__panel{position:relative;width:100%;height:auto;padding:34px 26px 22px;
       background:linear-gradient(180deg, var(--bg) 78%, rgba(43,42,41,0));}
    .ev__panel::before{display:none}
    .ev__lede{margin-inline-end:0}
    .ev__zoom{bottom:14px;right:14px}
  }