@font-face{
  font-family:"Manrope";
  src:url("../../../open-runtime/3ae11c49db0455a3cc33e37d380f20fdb8c7f8b41dc07625c177e3d87a9d6ae6/Manrope.ttf") format("truetype");
  font-weight:200 800;
  font-display:swap;
}

:root{
  --oat:#EDE8DE;        /* oat white wall */
  --lime:#E4DCCB;       /* light limewash */
  --sage:#6F7D5E;       /* sage green accent */
  --sage-deep:#55634A;
  --ink:#292420;        /* warm ink */
  --ink-soft:rgba(41,36,32,.62);
  --hair:rgba(41,36,32,.16);
  --brass:#B08A44;
  --paper:rgba(245,241,233,.66);
  --ease:cubic-bezier(.22,.7,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Manrope",system-ui,sans-serif;
  color:var(--ink);
  background:var(--oat);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- ambient room (CSS daylight, always quietly moving) ---------- */
.room{position:fixed;inset:0;z-index:0;overflow:hidden}
.room-wall{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, #F6F1E6 0%, var(--oat) 46%, #E7E0D0 100%);
}
.sun-band{
  position:absolute;left:52%;top:-18%;width:34vw;height:150vh;
  background:linear-gradient(178deg, rgba(255,241,209,.55), rgba(255,238,200,.18) 55%, rgba(255,238,200,0) 90%);
  transform:rotate(14deg);transform-origin:top center;
  filter:blur(18px);
  mix-blend-mode:multiply;opacity:.8;
  animation:sundrift 26s var(--ease) infinite alternate;
}
.sun-band-b{
  left:60%;width:16vw;opacity:.5;filter:blur(30px);
  animation-duration:34s;animation-delay:-8s;
}
@keyframes sundrift{
  0%{transform:rotate(14deg) translateX(-2.5vw)}
  100%{transform:rotate(11.5deg) translateX(2vw)}
}
.curtain{
  position:absolute;top:-6%;width:9vw;height:118vh;
  background:linear-gradient(90deg, rgba(250,246,236,.0) 0%, rgba(250,246,236,.55) 22%, rgba(244,238,224,.35) 55%, rgba(250,246,236,0) 100%);
  filter:blur(4px);transform-origin:top center;
}
.curtain-left{left:8%;animation:sway 17s ease-in-out infinite alternate}
.curtain-right{left:20%;opacity:.5;animation:sway 21s ease-in-out infinite alternate-reverse;animation-delay:-5s}
@keyframes sway{
  0%{transform:skewX(0deg)}
  100%{transform:skewX(2.4deg)}
}
.leafshadow{
  position:absolute;border-radius:50% 45% 55% 50%;
  background:radial-gradient(closest-side, rgba(87,99,74,.16), rgba(87,99,74,0) 72%);
  filter:blur(14px);
  animation:leafdrift 30s ease-in-out infinite alternate;
}
.leafshadow-a{left:56%;top:16%;width:26vw;height:22vw}
.leafshadow-b{left:70%;top:44%;width:18vw;height:15vw;animation-duration:38s;animation-delay:-14s;opacity:.7}
@keyframes leafdrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-3vw,2.4vw) scale(1.12)}
}
.floorline{
  position:absolute;left:0;right:0;bottom:19%;
  height:34%;
  background:linear-gradient(180deg, rgba(214,203,180,0) 0%, rgba(210,198,173,.5) 60%, rgba(198,185,158,.75) 100%);
}

/* ---------- stage ---------- */
#stage{
  position:fixed;inset:0;z-index:1;
  width:100%;height:100%;
  display:block;touch-action:none;cursor:grab;
}
#stage:active{cursor:grabbing}

/* ---------- chrome ---------- */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 40px 0;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:9px;height:9px;border-radius:50%;background:var(--sage)}
.brand-name{font-weight:600;letter-spacing:.34em;font-size:13px;text-transform:uppercase}
.lang{display:flex;border:1px solid var(--hair);border-radius:999px;background:var(--paper);backdrop-filter:blur(6px)}
.lang-btn{
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;
  border:0;background:none;color:var(--ink-soft);
  padding:7px 15px;cursor:pointer;border-radius:999px;
}
.lang-btn.is-active{background:var(--ink);color:var(--oat)}
.lang-btn:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

.titleblock{
  position:fixed;left:40px;top:110px;z-index:2;max-width:360px;
  pointer-events:none;
}
.titleblock::before{
  content:"";position:absolute;inset:-26px -34px -18px -34px;z-index:-1;
  border-radius:26px;
  background:radial-gradient(closest-side, rgba(245,241,233,.58), rgba(245,241,233,0));
  filter:blur(2px);
}
.display{
  font-weight:200;font-size:clamp(40px,4.7vw,66px);
  line-height:1.06;letter-spacing:.015em;color:var(--ink);
  word-break:keep-all; /* CJK headline never breaks mid-word: no orphaned last glyph */
}
.kicker{
  margin-top:14px;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sage-deep);
}
.lede{
  margin-top:22px;font-size:14px;line-height:1.75;color:var(--ink-soft);
  max-width:34ch;
  max-height:240px;overflow:hidden;
  transition:max-height .45s var(--ease),opacity .45s var(--ease),margin .45s var(--ease);
}
/* exploded state: collapse the long lede so the parts get the space */
body.is-exploded .lede{max-height:0;opacity:0;margin-top:0}

/* ---------- controls ---------- */
.controls{
  position:fixed;right:40px;top:110px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
}
.ctl{
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.03em;
  color:var(--ink);cursor:pointer;
  border:1px solid var(--hair);border-radius:999px;
  background:var(--paper);backdrop-filter:blur(6px);
  padding:11px 20px;min-width:132px;text-align:center;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.ctl:hover{border-color:var(--sage)}
.ctl:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.ctl:active{transform:scale(.97)}
.ctl[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:#F5F2E8}
.ctl-primary{min-width:156px;padding:13px 22px;font-size:14px}

.status{
  position:fixed;right:40px;top:338px;z-index:3;
  font-size:12px;color:var(--ink-soft);letter-spacing:.04em;
  border-left:2px solid var(--sage);padding-left:10px;
}

/* ---------- exploded legend ---------- */
.legend{
  position:fixed;right:40px;bottom:132px;z-index:3;width:250px;
  background:var(--paper);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:14px;
  padding:16px 18px 14px;
  opacity:0;transform:translateX(14px);pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.legend.is-open{opacity:1;transform:none}
.legend-title{
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage-deep);margin-bottom:10px;
}
.legend-list{list-style:none}
.legend-list li{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--ink-soft);
  padding:5.5px 0;border-top:1px solid var(--hair);
}
.legend-list li i{
  width:8px;height:8px;border-radius:2px;flex:none;
}

/* ---------- dimension callouts ---------- */
.dims{position:fixed;left:40px;bottom:118px;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:9px}
.dim{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-soft);letter-spacing:.05em}
.dim i{display:block;width:26px;height:1px;background:var(--hair);position:relative}
.dim i::after{content:"";position:absolute;top:-2.5px;width:1px;height:6px;background:var(--hair)}
.dim i:first-child::after{left:0}
.dim i:last-child::after{right:0}

/* ---------- material strip ---------- */
.samples{
  position:fixed;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:center;gap:clamp(18px,4vw,56px);
  padding:16px 40px 22px;
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(240,235,225,.35), rgba(240,235,225,.72));
  backdrop-filter:blur(7px);
}
.sample{display:flex;align-items:center;gap:11px}
.sw{width:30px;height:30px;border-radius:50%;flex:none;box-shadow:inset 0 -4px 8px rgba(41,36,32,.14), 0 1px 2px rgba(41,36,32,.12)}
.sw-oak{background:radial-gradient(circle at 34% 30%, #A0846A, #6E5138 70%)}
.sw-wool{background:radial-gradient(circle at 34% 30%, #F1ECE1, #D9D2C2 72%)}
.sw-brass{background:radial-gradient(circle at 34% 30%, #E4C383, #A57F3B 70%)}
.sw-leather{background:radial-gradient(circle at 34% 30%, #B57F55, #7A4E30 72%)}
.sample b{display:block;font-size:12.5px;font-weight:600}
.sample small{display:block;font-size:10.5px;color:var(--ink-soft);margin-top:2px}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .masthead{padding:16px 18px 0}
  .titleblock{left:18px;top:64px;max-width:260px}
  .titleblock::before{inset:-18px -22px -12px -22px}
  .display{font-size:34px}
  .lede{display:none}
  .kicker{margin-top:8px;font-size:10.5px}
  .controls{
    top:auto;right:0;left:0;bottom:64px;
    flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;
    padding:0 12px;
  }
  .ctl{min-width:0;padding:10px 15px;font-size:12px}
  .ctl-primary{min-width:0;padding:11px 18px}
  .status{display:none}
  .dims{left:18px;bottom:auto;top:190px;gap:6px}
  .legend{
    right:12px;left:12px;width:auto;bottom:178px;padding:12px 14px;
  }
  .legend-list{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .legend-list li{font-size:11.5px;padding:4.5px 0}
  .samples{gap:14px;padding:12px 14px 14px;justify-content:flex-start;overflow-x:auto}
  .sample small{display:none}
  .sample{gap:8px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .sun-band,.curtain,.leafshadow{animation-duration:120s}
}