/* ==========================================================================
   studios-entry.css — the Studios index.

   Two surfaces in one component:

     .se-index   the light, editorial SELECTION surface. Introduction, a bento
                 of five doors, and a shelf of recent work. This is the page.
     .se-work    a Studio's WORKING habitat. Editorial rooms (Research, Design)
                 sit on warm paper via `.se--editorial`; other interiors still
                 use the dark shell until they migrate.

   The index is warm ivory, editorial serif, generous whitespace, monochrome
   linework — Orcheum's own translation of clarity-first product design. Orange
   is rationed: one focal point per diagram, and the entry affordance on hover.
   Nothing else emits. That is what keeps the accent meaning something.

   Motion law is inherited (Constitution 5.1–5.4). Diagrams draw themselves
   once, on arrival; hover advances a single line. The opening plays once per
   session. Everything is legible with motion off.
   ========================================================================== */

.se {
  /* Canvas + inks — the warm editorial system (DESIGN.md §3–4). */
  --se-bg: var(--color-background, #fbf7ef);
  --se-ink: var(--color-foreground, #24252d);
  --se-ink-2: var(--color-text-secondary, #7c746f);
  --se-ink-3: #a49b93;
  --se-para: var(--color-paragraph, #566273);
  --se-hair: rgba(36, 37, 45, 0.1);
  --se-hair-soft: rgba(36, 37, 45, 0.06);
  --se-paper: #ffffff;
  --se-paper-warm: #fdfaf3;
  --se-orange: #fc9b4c;

  --se-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --se-sans: var(--font-sans, "Geist", system-ui, sans-serif);

  /* The working shell — the Studio's dark habitat. */
  --se-room-ink: #1e1e19;

  --se-accent: #fc9b4c;               /* set by JS to the entered Studio's hue */
  --se-hue: #3d5a74;                  /* per-cell, overridden inline */

  --se-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --se-ease-soft: cubic-bezier(0.2, 0.6, 0.2, 1);
  --se-shell: min(1120px, 100%);

  position: relative;
  display: block;
  width: 100%;
  min-height: 100%;
  color: var(--se-ink);
  font-family: var(--se-sans);
  background: var(--se-bg);
}

.se *,
.se *::before,
.se *::after { box-sizing: border-box; }

/* ══ THE INDEX ══════════════════════════════════════════════════════════════ */
.se-index {
  width: var(--se-shell);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 44px) clamp(48px, 7vh, 88px);
}

.se.is-working .se-index { display: none; }

/* ── 1 · Introduction ─────────────────────────────────────────────────────── */
.se-intro {
  max-width: 40rem;
  margin-bottom: clamp(32px, 5vh, 56px);
}

.se-intro__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--se-ink-2);
}

.se-intro__title {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  font-family: var(--se-serif);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--se-ink);
}

/* The one orange note in the introduction: a small sun, set like a period.
   The center that holds, punctuating the word. */
.se-intro__dot {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-left: 0.12em;
  border-radius: 50%;
  background: var(--se-orange);
  vertical-align: baseline;
  transform: translateY(-0.04em);
}

.se-intro__lede {
  margin: 0 0 12px;
  font-family: var(--se-serif);
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.35;
  color: var(--se-ink);
}

.se-intro__sub {
  margin: 0;
  max-width: 34rem;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--se-para);
}

/* ── 2 · Studio bento ─────────────────────────────────────────────────────── */
.se-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(40px, 6vh, 68px);
}

/* Two anchors on top (the two open Studios earn compositional weight, not a
   badge); the remaining three read across the bottom. Down the grid the five
   promises tell one sentence. */
.se-cell--research     { grid-column: 1 / 4; grid-row: 1 / 3; }
.se-cell--design       { grid-column: 4 / 7; grid-row: 1 / 3; }
.se-cell--architecture { grid-column: 1 / 3; grid-row: 3; }
.se-cell--code         { grid-column: 3 / 5; grid-row: 3; }
.se-cell--motion       { grid-column: 5 / 7; grid-row: 3; }

.se-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(18px, 1.8vw, 26px);
  border: 1px solid var(--se-hair);
  border-radius: 18px;
  background: var(--se-paper-warm);
  color: var(--se-ink);
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition: border-color 0.4s var(--se-ease), background 0.4s var(--se-ease),
    box-shadow 0.4s var(--se-ease), transform 0.4s var(--se-ease);
}

/* A hairline of the Studio's own hue along the top edge — the only place the
   per-Studio colour appears on an idle cell, and it stays quiet. */
.se-cell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: color-mix(in srgb, var(--se-hue) 55%, transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: opacity 0.45s var(--se-ease), transform 0.55s var(--se-ease);
}

.se-cell:hover,
.se-cell:focus-visible {
  border-color: color-mix(in srgb, var(--se-hue) 34%, var(--se-hair));
  background: var(--se-paper);
  box-shadow: 0 1px 0 var(--se-hair-soft), 0 18px 40px -28px rgba(36, 37, 45, 0.4);
  transform: translateY(-2px);
  outline: none;
}
.se-cell:hover::before,
.se-cell:focus-visible::before { opacity: 1; transform: scaleX(1); }

.se-cell:focus-visible {
  box-shadow: 0 0 0 2px var(--se-bg), 0 0 0 4px color-mix(in srgb, var(--se-hue) 60%, transparent);
}

/* The figure sits at the top of an anchor cell and fills the width; on the
   small cells it is a quieter mark tucked to one side. */
.se-cell__frame {
  display: block;
  margin-bottom: auto;
  color: var(--se-ink);
}
.se-cell__frame .se-fig,
.se-cell__frame .sm { display: block; width: 100%; height: auto; }

.se-cell--research .se-fig,
.se-cell--research .sm,
.se-cell--design .se-fig,
.se-cell--design .sm { max-height: 168px; }

/* Small cells: a horizontal split — text on the left, a compact mark held to
   the right — so the diagram never runs under the name or the state pill. */
.se-cell--architecture,
.se-cell--code,
.se-cell--motion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  column-gap: 14px;
}
.se-cell--architecture .se-cell__frame,
.se-cell--code .se-cell__frame,
.se-cell--motion .se-cell__frame {
  grid-column: 2;
  grid-row: 1;
  width: 104px;
  max-width: 104px;
  margin: 0;
  opacity: 0.9;
  pointer-events: none;
}
.se-cell--architecture .se-cell__body,
.se-cell--code .se-cell__body,
.se-cell--motion .se-cell__body { grid-column: 1; grid-row: 1; }

.se-cell__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: clamp(16px, 2vw, 22px);
}
.se-cell--architecture .se-cell__body,
.se-cell--code .se-cell__body,
.se-cell--motion .se-cell__body { margin-top: 0; }

.se-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.se-cell__numeral {
  font-family: var(--se-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--se-ink-3);
  letter-spacing: 0.02em;
}

.se-cell__state {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--se-ink-3);
  padding: 3px 8px;
  border: 1px solid var(--se-hair);
  border-radius: 999px;
  line-height: 1;
}
.se-cell__state.is-open {
  color: color-mix(in srgb, var(--se-hue) 72%, var(--se-ink));
  border-color: color-mix(in srgb, var(--se-hue) 30%, var(--se-hair));
}

.se-cell__name {
  font-family: var(--se-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.se-cell__line {
  font-size: 14px;
  line-height: 1.5;
  color: var(--se-para);
  max-width: 26rem;
}
.se-cell--architecture .se-cell__line,
.se-cell--code .se-cell__line,
.se-cell--motion .se-cell__line { font-size: 13px; max-width: 18rem; }

.se-cell__enter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--se-ink);
}
.se-cell__arrow {
  width: 15px;
  height: 15px;
  transition: transform 0.4s var(--se-ease), color 0.3s var(--se-ease);
}
.se-cell:hover .se-cell__enter,
.se-cell:focus-visible .se-cell__enter { color: var(--se-orange); }
.se-cell:hover .se-cell__arrow,
.se-cell:focus-visible .se-cell__arrow {
  transform: translateX(4px);
  color: var(--se-orange);
}

/* ── 3 · Recent work ──────────────────────────────────────────────────────── */
.se-recent { padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--se-hair); }

.se-recent__head { margin-bottom: 18px; }
.se-recent__title {
  margin: 0;
  font-family: var(--se-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--se-ink);
}

.se-recent__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px;
}

.se-recent__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  border: 1px solid var(--se-hair);
  border-radius: 14px;
  background: var(--se-paper-warm);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.35s var(--se-ease), background 0.35s var(--se-ease),
    transform 0.35s var(--se-ease), box-shadow 0.35s var(--se-ease);
}
.se-recent__card:hover,
.se-recent__card:focus-visible {
  border-color: color-mix(in srgb, var(--se-hue) 34%, var(--se-hair));
  background: var(--se-paper);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -26px rgba(36, 37, 45, 0.45);
  outline: none;
}
.se-recent__card:focus-visible {
  box-shadow: 0 0 0 2px var(--se-bg), 0 0 0 4px color-mix(in srgb, var(--se-hue) 55%, transparent);
}

.se-recent__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--se-ink-2);
}
.se-recent__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--se-hue);
}

.se-recent__card-title {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--se-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.se-recent__card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--se-ink-3);
  margin-top: auto;
}
.se-recent__meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.se-recent__continue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--se-ink-2);
  transition: color 0.3s var(--se-ease);
}
.se-recent__continue svg { width: 14px; height: 14px; transition: transform 0.35s var(--se-ease); }
.se-recent__card:hover .se-recent__continue,
.se-recent__card:focus-visible .se-recent__continue { color: var(--se-orange); }
.se-recent__card:hover .se-recent__continue svg,
.se-recent__card:focus-visible .se-recent__continue svg { transform: translateX(3px); }

/* Honest empty state — considered, not filler. */
.se-recent__empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px dashed var(--se-hair);
  border-radius: 14px;
  background: color-mix(in srgb, var(--se-paper-warm) 60%, transparent);
}
.se-recent__empty-mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--se-hair);
  position: relative;
}
.se-recent__empty-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--se-orange) 55%, transparent);
}
.se-recent__empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--se-ink-2);
  max-width: 34rem;
}

/* ══ THE SIGNATURES ═════════════════════════════════════════════════════════
   Drawn by StudioMarks (marks/studio-marks.css). Kept here: lit colour bridge
   into the cell's orange, and a few legacy class aliases. */
.se-fig__lit { color: var(--se-orange); }
.sm-lit, .se-fig__lit { color: var(--se-orange); }

/* Legacy aliases — StudioMarks still stamps se-draw / se-tile / se-line. */
.se-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.se--js.is-entered .se-cell .se-draw {
  animation: se-draw 1s var(--se-ease) forwards;
  animation-delay: calc(0.12s * var(--i, 0) + 0.2s);
}
@keyframes se-draw { to { stroke-dashoffset: 0; } }

.se-tile, .se-line {
  opacity: 0;
  transform: translateY(4px);
}
.se--js.is-entered .se-cell .se-tile,
.se--js.is-entered .se-cell .se-line {
  animation: se-settle 0.6s var(--se-ease) forwards;
  animation-delay: calc(0.07s * var(--i, 0) + 0.24s);
}
@keyframes se-settle {
  to { opacity: var(--se-op, 1); transform: translateY(0); }
}
.se-fig__ink .se-tile { --se-op: 0.16; }
.se-tile--lit { --se-op: 0.85; }
.se-fig__ink .se-line { --se-op: 0.26; }
.se-line--lit { --se-op: 1; }

.se-fig__travel {
  offset-path: path("M24 116 C 78 116, 92 34, 176 34");
  offset-distance: 0%;
  offset-rotate: 0deg;
}
.se--js.is-entered .se-cell--motion .se-fig__travel {
  animation: se-travel 1.5s var(--se-ease) 0.4s;
}
.se-cell--motion:hover .se-fig__travel { animation: se-travel 1.3s var(--se-ease); }
@keyframes se-travel {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.se-fig__pulse { transform-box: fill-box; transform-origin: center; }
.se-cell:hover .se-fig__pulse { animation: se-pulse 1.6s var(--se-ease-soft); }
@keyframes se-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.se-fig__caret { opacity: 0; }
.se-cell--code:hover .se-fig__caret { animation: se-blink 1s steps(1) 3; }
@keyframes se-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ══ ARRIVAL ════════════════════════════════════════════════════════════════
   Intro reads, cells settle, recent shelf resolves. Plays once per session. */
.se--js .se-intro > *,
.se--js .se-cell,
.se--js .se-recent {
  opacity: 0;
  transform: translateY(10px);
}
.se--js.is-entered .se-intro > * {
  animation: se-rise 0.7s var(--se-ease) forwards;
}
.se--js.is-entered .se-intro__eyebrow { animation-delay: 0.02s; }
.se--js.is-entered .se-intro__title { animation-delay: 0.08s; }
.se--js.is-entered .se-intro__lede { animation-delay: 0.16s; }
.se--js.is-entered .se-intro__sub { animation-delay: 0.22s; }

.se--js.is-entered .se-cell {
  animation: se-rise 0.7s var(--se-ease) forwards;
  animation-delay: calc(0.08s * var(--i, 0) + 0.28s);
}
.se--js.is-entered .se-recent {
  animation: se-rise 0.7s var(--se-ease) forwards;
  animation-delay: 0.7s;
}
@keyframes se-rise { to { opacity: 1; transform: translateY(0); } }

/* ══ THE WORKING SHELL ══════════════════════════════════════════════════════
   The Studio's dark habitat. Hidden until a Studio is entered. */
.se-work {
  display: none;
  flex-direction: column;
  width: min(1120px, 100%);
  min-height: calc(100vh - 120px);
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 26px) clamp(16px, 3vw, 34px) clamp(18px, 3vh, 30px);
}
.se.is-working .se-work { display: flex; }

/* When a Studio holds the screen, the whole surface is its dark habitat — bar,
   stage, and dock read as one lit room, and the night-styled composer belongs.
   The stage sits a shade lighter than the shell so it reads as a lifted panel. */
.se.is-working { background: #191915; }

/* EDITORIAL INTERIORS sit on warm paper instead — the same material as Home and
   the Studios index. Research is the first room migrated into this language;
   the dark habitat above is the fallback the other interiors still use. */
.se.is-working.se--editorial { background: var(--se-bg); }

.se-work__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 4px;
}

.se-work__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s var(--se-ease), color 0.3s var(--se-ease), border-color 0.3s var(--se-ease);
}
.se-work__back:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
}
.se-work__back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--se-room-ink), 0 0 0 4px var(--se-accent);
}
.se-work__back-icon { width: 16px; height: 16px; }

.se-work__id {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.se-work__name {
  font-family: var(--se-serif);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
}
.se-work__state {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.se-work__state.is-open { color: var(--se-accent); border-color: color-mix(in srgb, var(--se-accent) 45%, transparent); }

/* The dark room the interiors were built for. */
.se-work__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 380px;
  border-radius: 28px;
  background: var(--se-room-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: clip;
  padding: clamp(20px, 3vw, 40px);
  /* A flex column so the mounted interior gets a DEFINITE height from
     flex-grow. The interiors declare `height: 100%`, which only resolves
     against a definite containing block — a bare flex item is not one, so the
     interior collapsed to zero. `height: auto` here lets flex-grow size it. */
  display: flex;
  flex-direction: column;
}
.se-work__stage > * { flex: 1 1 auto; min-width: 0; min-height: 0; height: auto; }

.se-work__dock {
  position: relative;
  z-index: 2;
  margin-top: clamp(8px, 1.2vh, 12px);
}

/* Studios use the same universal Composer. The host owns only its placement
   and maximum width; internal geometry and material stay canonical. */
.se-work__dock .oc-composer {
  max-width: 514px;
  margin: 0 auto;
}

/* Active conversation — the ready page is gone and the same shared composer
   becomes the permanent bottom instrument. The Studio renderer owns the only
   scrollable work region between the compact header and composer. */
.se.is-conversation {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.se.is-conversation .se-work {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.se.is-conversation .se-work__bar {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.se.is-conversation .se-work__promise { display: none; }

.se.is-conversation .se-work__stage {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.se.is-conversation .se-work__dock {
  flex: 0 0 auto;
  margin: clamp(8px, 1.2vh, 12px) 0 0;
}

/* ══ EDITORIAL WORKING SHELL ════════════════════════════════════════════════
   Research on warm paper. The bar becomes a masthead (serif name + promise),
   the stage a lifted sheet, and the composer keeps its own Home light. Only
   the presentation changes; the interior's states are the Studio's own. */
.se--editorial .se-work {
  width: min(1180px, 100%);
}
.se--editorial .se-work__bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-bottom: clamp(14px, 2.4vh, 22px);
  margin-bottom: clamp(6px, 1.4vh, 14px);
  border-bottom: 1px solid var(--se-hair);
}
/* Back becomes a quiet ink link ahead of the masthead. */
.se--editorial .se-work__back {
  order: -1;
  border-color: var(--se-hair);
  background: var(--se-paper-warm);
  color: var(--se-ink-2);
}
.se--editorial .se-work__back:hover {
  background: var(--se-paper);
  color: var(--se-ink);
  border-color: color-mix(in srgb, var(--se-ink) 22%, var(--se-hair));
}
.se--editorial .se-work__back:focus-visible {
  box-shadow: 0 0 0 2px var(--se-bg), 0 0 0 4px color-mix(in srgb, var(--se-ink) 40%, transparent);
}
.se--editorial .se-work__name {
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--se-ink);
}
.se--editorial .se-work__state {
  color: var(--se-ink-3);
  border-color: var(--se-hair);
}
.se--editorial .se-work__state.is-open {
  color: color-mix(in srgb, var(--se-hue, #3d5a74) 72%, var(--se-ink));
  border-color: color-mix(in srgb, var(--se-hue, #3d5a74) 30%, var(--se-hair));
}
/* The promise: the masthead's second line, only in the editorial theme. */
.se-work__promise { display: none; }
.se--editorial .se-work__promise {
  display: block;
  flex-basis: 100%;
  margin: 2px 0 0;
  padding-left: calc(84px + 14px); /* clears the back pill so it aligns to the name */
  font-family: var(--se-serif);
  font-size: clamp(15px, 1.8vw, 18px);
  font-style: italic;
  line-height: 1.4;
  color: var(--se-ink-2);
}
/* The stage: a lifted warm sheet, not a dark room. */
.se--editorial .se-work__stage {
  background: var(--se-paper-warm);
  border: 1px solid var(--se-hair);
  border-radius: 22px;
  box-shadow: 0 1px 2px var(--se-hair-soft), 0 24px 60px -40px rgba(36, 37, 45, 0.4);
  padding: clamp(20px, 3vw, 44px);
}

.se.is-conversation.se--editorial .se-work__stage {
  min-height: 0;
  overflow: hidden;
}

/* ══ RESEARCH — ONE STAGE GEOMETRY FOR EVERY STATE ══════════════════════════
   The room's frame must not move because its CONTENT state moved. Before this
   block the shell had two different frames:

     ready          no `height`; `min-height: calc(100vh - 120px)` sized it,
                    which left the bottom ~120px of the room deliberately
                    empty — that reserve is the air the composer stands in.
     conversation   `height: 100%`, which handed the whole reserve to the
                    stage. The sheet grew 171px, the composer dropped 120px to
                    27px off the fold, and `.se-work__bar { margin-bottom: 0 }`
                    closed the last of the air under the masthead rule, so the
                    sheet came to rest ON the line.

   One bounded box instead. The shell is exactly the room's height in every
   state; the bar and the dock are fixed bands with the reserve expressed as
   the dock's own bottom gap, where it cannot be reassigned; the stage is the
   only thing that flexes, and it clips. Long findings scroll INSIDE the
   interior (research-studio.css `.rs-scroll` / `.rs-open`, both `inset: 0`
   scrollers), so no report can lengthen the page or move the instrument.

   Scoped by `data-studio` — Design and the dark rooms keep the shell they
   were built against. */
.se-work[data-studio="research"] {
  /* The ready state's 120px reserve, made explicit and state-independent.
     `min()` rather than a bare 120px so a short laptop gives the reading
     surface the room back; it is the same value in every state, so it can
     never be the reason a state grows. */
  --se-research-reserve: min(40px, 4.5vh);
  /* The clear space under the masthead rule. Taken from the editorial bar's
     own ready-state margin so the sheet sits off the line by the same amount
     it always did. */
  --se-research-gap: clamp(6px, 1.4vh, 14px);
}

/* The shell can only be `height: 100%` if the room is a DEFINITE box. `.se`
   has `min-height: 100%`, which gives it a used height but not a definite one,
   so the percentage fell back to auto and the shell kept sizing itself from
   its content. `:has()` holds this to the Research room. */
.se.is-working:has(.se-work[data-studio="research"]) {
  height: 100%;
  min-height: 0;
}

.se-work[data-studio="research"],
.se.is-conversation .se-work[data-studio="research"] {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* The masthead band. `is-conversation` zeroed this margin; restoring it is
   what keeps the sheet from touching the rule. */
.se-work[data-studio="research"] .se-work__bar,
.se.is-conversation .se-work[data-studio="research"] .se-work__bar {
  flex: 0 0 auto;
  margin-bottom: var(--se-research-gap);
}

/* The only elastic band, and it clips. `min-height: 0` is what lets it shrink
   below its content instead of pushing the dock down the page. */
.se-work[data-studio="research"] .se-work__stage,
.se.is-conversation .se-work[data-studio="research"] .se-work__stage {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* The instrument, and the reserve beneath it. */
.se-work[data-studio="research"] .se-work__dock,
.se.is-conversation .se-work[data-studio="research"] .se-work__dock {
  flex: 0 0 auto;
  margin: clamp(8px, 1.2vh, 12px) 0 var(--se-research-reserve);
}

/* Research's approved ready composition contains the same canonical Composer
   inside its main card. The empty dock gives its space back until submission;
   the conversation state restores the dock and the existing workspace. */
.se-work[data-studio="research"]:not(.is-conversation) .se-work__dock:empty {
  display: none;
}

.se-work[data-studio="research"]:not(.is-conversation) .se-work__stage {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ══ DESIGN — ONE STAGE GEOMETRY FOR EVERY STATE ════════════════════════════
   The same bounded-box rule Research got, for the same reason and by the same
   means — written separately rather than shared so neither room can move the
   other by accident.

   Design needs it more sharply than Research does. Its ready state carries an
   invitation, a device frame, three starters AND recent work; left to size
   itself from content the shell grew, and the composer — the one instrument
   the whole room exists to serve — was pushed below the fold. The room is the
   room's height in every state instead: the masthead and the dock are fixed
   bands, and the stage is the only thing that flexes, and it clips. The
   interior scrolls INSIDE itself (design-studio.css: `.ds-ready` and
   `.ds-panel__scroll` are the scrollers), so no result can lengthen the page.

   The reserve under the composer is smaller than Research's: a screen wants
   the height a reading measure does not. */
.se-work[data-studio="design"] {
  --se-design-reserve: min(40px, 4.5vh);
  --se-design-gap: clamp(6px, 1.4vh, 14px);
}
.se-work[data-studio="architecture"] {
  --se-design-reserve: min(40px, 4.5vh);
  --se-design-gap: clamp(6px, 1.4vh, 14px);
}
.se-work[data-studio="code"] {
  --se-design-reserve: min(40px, 4.5vh);
  --se-design-gap: clamp(6px, 1.4vh, 14px);
}
.se-work[data-studio="motion"] {
  --se-design-reserve: min(40px, 4.5vh);
  --se-design-gap: clamp(6px, 1.4vh, 14px);
}

/* A percentage height only resolves against a DEFINITE box, and `.se` has
   `min-height: 100%` — a used height, not a definite one. `:has()` makes the
   shell definite for this room only. */
.se.is-working:has(.se-work[data-studio="design"]),
.se.is-working:has(.se-work[data-studio="architecture"]),
.se.is-working:has(.se-work[data-studio="code"]),
.se.is-working:has(.se-work[data-studio="motion"]) {
  height: 100%;
  min-height: 0;
}

.se-work[data-studio="design"],
.se.is-conversation .se-work[data-studio="design"],
.se-work[data-studio="architecture"],
.se.is-conversation .se-work[data-studio="architecture"],
.se-work[data-studio="code"],
.se.is-conversation .se-work[data-studio="code"],
.se-work[data-studio="motion"],
.se.is-conversation .se-work[data-studio="motion"] {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.se-work[data-studio="design"] .se-work__bar,
.se.is-conversation .se-work[data-studio="design"] .se-work__bar,
.se-work[data-studio="architecture"] .se-work__bar,
.se.is-conversation .se-work[data-studio="architecture"] .se-work__bar,
.se-work[data-studio="code"] .se-work__bar,
.se.is-conversation .se-work[data-studio="code"] .se-work__bar,
.se-work[data-studio="motion"] .se-work__bar,
.se.is-conversation .se-work[data-studio="motion"] .se-work__bar {
  flex: 0 0 auto;
  margin-bottom: var(--se-design-gap);
}

.se-work[data-studio="design"] .se-work__stage,
.se.is-conversation .se-work[data-studio="design"] .se-work__stage,
.se-work[data-studio="architecture"] .se-work__stage,
.se.is-conversation .se-work[data-studio="architecture"] .se-work__stage,
.se-work[data-studio="code"] .se-work__stage,
.se.is-conversation .se-work[data-studio="code"] .se-work__stage,
.se-work[data-studio="motion"] .se-work__stage,
.se.is-conversation .se-work[data-studio="motion"] .se-work__stage {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.se-work[data-studio="design"] .se-work__dock,
.se.is-conversation .se-work[data-studio="design"] .se-work__dock,
.se-work[data-studio="architecture"] .se-work__dock,
.se.is-conversation .se-work[data-studio="architecture"] .se-work__dock,
.se-work[data-studio="code"] .se-work__dock,
.se.is-conversation .se-work[data-studio="code"] .se-work__dock,
.se-work[data-studio="motion"] .se-work__dock,
.se.is-conversation .se-work[data-studio="motion"] .se-work__dock {
  flex: 0 0 auto;
  margin: clamp(8px, 1.2vh, 12px) 0 var(--se-design-reserve);
}

/* Research outcome: FULL VIEWPORT — Figma 698:5968.
   Canvas owns the full Studios surface while the canonical Composer remains
   the shell's single instance, placed over the conversation column. */
.se.is-research-outcome,
.se.is-working.is-research-outcome,
.se.is-conversation.is-research-outcome {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #faf9f6 !important;
}
.se.is-research-outcome .se-work[data-studio="research"],
.se.is-conversation.is-research-outcome .se-work[data-studio="research"] {
  position: relative;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.se.is-research-outcome .se-work[data-studio="research"] .se-work__bar,
.se.is-research-outcome .se-work[data-studio="research"] .se-work__promise {
  display: none !important;
}
.se.is-research-outcome .se-work[data-studio="research"] .se-work__stage,
.se.is-conversation.is-research-outcome .se-work[data-studio="research"] .se-work__stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #faf9f6 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.se.is-research-outcome .se-work[data-studio="research"] .se-work__dock,
.se.is-conversation.is-research-outcome .se-work[data-studio="research"] .se-work__dock {
  position: absolute;
  left: 17px;
  bottom: 27px;
  width: 356px;
  z-index: 6;
  margin: 0 !important;
  padding: 0 18px 16px;
  box-sizing: border-box;
  pointer-events: none;
}
.se.is-research-outcome .se-work[data-studio="research"] .se-work__dock .oc-composer {
  width: 100%;
  max-width: none !important;
  min-height: 119px;
  margin: 0;
  pointer-events: auto;
}

/* Design outcome: FULL VIEWPORT — Figma 668:7456 / 680:3486.
   Bypasses the editorial card, masthead, and centred 1180px work shell. */
.se.is-design-outcome,
.se.is-working.is-design-outcome,
.se.is-conversation.is-design-outcome {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fbf7ef !important;
  overflow: hidden !important;
}
.se.is-design-outcome .se-work[data-studio="design"],
.se.is-conversation.is-design-outcome .se-work[data-studio="design"] {
  position: relative;
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}
.se.is-design-outcome .se-work[data-studio="design"] .se-work__bar,
.se.is-design-outcome .se-work[data-studio="design"] .se-work__promise {
  display: none !important;
}
.se.is-design-outcome .se-work[data-studio="design"] .se-work__stage,
.se.is-conversation.is-design-outcome .se-work[data-studio="design"] .se-work__stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fbf7ef !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.se.is-design-outcome .se-work[data-studio="design"] .se-work__dock,
.se.is-conversation.is-design-outcome .se-work[data-studio="design"] .se-work__dock {
  position: absolute;
  /* Align with `.ds[data-outcome="1"]` inset so the composer sits inside the card. */
  left: 28px;
  bottom: 28px;
  width: min(389px, 34vw);
  z-index: 6;
  margin: 0 !important;
  padding: 0 18px 16px;
  box-sizing: border-box;
  pointer-events: none;
}
.se.is-design-outcome .se-work[data-studio="design"] .se-work__dock .oc-composer {
  max-width: none !important;
  width: 100%;
  margin: 0;
  min-height: 119px;
  pointer-events: auto;
}
@media (max-width: 860px) {
  .se.is-research-outcome .se-work[data-studio="research"] .se-work__dock {
    position: static;
    width: 100%;
    padding: 8px 12px 12px;
  }
  .se.is-design-outcome .se-work[data-studio="design"] .se-work__dock {
    position: static;
    width: 100%;
    padding: 8px 12px 12px;
  }
}

/* Design's approved ready composition contains the canonical Composer inside
   its main card, matching Research's shared entry convention. */
.se-work[data-studio="design"]:not(.is-conversation) .se-work__dock:empty,
.se-work[data-studio="architecture"]:not(.is-conversation) .se-work__dock:empty,
.se-work[data-studio="code"]:not(.is-conversation) .se-work__dock:empty,
.se-work[data-studio="motion"]:not(.is-conversation) .se-work__dock:empty {
  display: none;
}

.se-work[data-studio="design"]:not(.is-conversation) .se-work__stage,
.se-work[data-studio="architecture"]:not(.is-conversation) .se-work__stage,
.se-work[data-studio="code"]:not(.is-conversation) .se-work__stage,
.se-work[data-studio="motion"]:not(.is-conversation) .se-work__stage {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 720px) {
  .se--editorial .se-work__promise { padding-left: 0; }
  .se-work {
    min-height: calc(100vh - 88px);
    padding-inline: 14px;
  }
  .se.is-design-outcome .se-work[data-studio="design"],
  .se.is-conversation.is-design-outcome .se-work[data-studio="design"] {
    min-height: 0 !important;
    padding-inline: 0 !important;
  }
  .se--editorial .se-work__stage { min-height: 360px; }
  /* On a phone the room is short and the composer belongs at the foot of it;
     a desktop-sized reserve would be taken straight out of the reading
     surface. Still one value for every state. */
  .se-work[data-studio="research"] { --se-research-reserve: 0px; }
  .se-work[data-studio="design"] { --se-design-reserve: 0px; }
  .se-work[data-studio="architecture"] { --se-design-reserve: 0px; }
  .se-work[data-studio="code"] { --se-design-reserve: 0px; }
  .se-work[data-studio="motion"] { --se-design-reserve: 0px; }
}

@media (max-width: 480px) {
  /* Reserve the app-level Share/Account corner and keep the Studio name from
     colliding with it. "Open" is descriptive metadata, not a control. */
  .se--editorial .se-work__bar { padding-right: 92px; }
  .se--editorial .se-work__state { display: none; }
  .se--editorial .se-work__name { font-size: 20px; }
}

/* ── The honest preview panel ──────────────────────────────────────────────
   Shown when a not-yet-open Studio is entered. Truth after commitment. */
.se-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 5vw, 60px);
  max-width: 34rem;
}
.se-preview__mark {
  width: 168px;
  max-width: 60%;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.72);
}
.se-preview__mark .se-fig { width: 100%; height: auto; }
/* The preview mark lives outside a cell, so the cell-scoped draw/settle
   animations never fire for it — render it in its finished state. */
.se-preview__mark .se-tile,
.se-preview__mark .se-line { opacity: var(--se-op, 1); transform: none; animation: none; }
.se-preview__mark .se-draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.se-preview__mark .se-fig__travel { offset-distance: 100%; }
.se-preview__mark .se-fig__caret { opacity: 1; }
.se-preview__kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--se-accent);
}
.se-preview__head {
  margin: 0;
  font-family: var(--se-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);
}
.se-preview__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.se-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.se-preview__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: var(--se-accent);
  color: #211a12;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.3s var(--se-ease), transform 0.3s var(--se-ease);
}
.se-preview__go svg { width: 15px; height: 15px; }
.se-preview__go:hover { filter: brightness(1.06); transform: translateY(-1px); }
.se-preview__go:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--se-room-ink), 0 0 0 4px var(--se-accent); }
.se-preview__back {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s var(--se-ease), color 0.3s var(--se-ease), border-color 0.3s var(--se-ease);
}
.se-preview__back:hover { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.26); }
.se-preview__back:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--se-room-ink), 0 0 0 4px var(--se-accent); }

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════════ */

/* Tablet — recompose, do not merely shrink. Two anchors keep the top; the
   three smaller Studios wrap to a legible pair + one wide cell. */
@media (max-width: 900px) {
  .se-bento { grid-template-columns: repeat(2, 1fr); }
  .se-cell--research     { grid-column: 1 / 2; grid-row: 1; }
  .se-cell--design       { grid-column: 2 / 3; grid-row: 1; }
  .se-cell--architecture { grid-column: 1 / 2; grid-row: 2; }
  .se-cell--code         { grid-column: 2 / 3; grid-row: 2; }
  .se-cell--motion       { grid-column: 1 / 3; grid-row: 3; }
  .se-cell--research .se-fig,
  .se-cell--design .se-fig { max-height: 150px; }
}

/* Mobile — one column. The two anchors stay tall and figure-led; the three
   smaller Studios become compact horizontal rows (mark beside the text) so
   the page is never five identical giant cards. */
@media (max-width: 620px) {
  .se-bento { grid-template-columns: 1fr; gap: 10px; }
  .se-cell--research,
  .se-cell--design,
  .se-cell--architecture,
  .se-cell--code,
  .se-cell--motion { grid-column: 1; grid-row: auto; }

  .se-cell--architecture,
  .se-cell--code,
  .se-cell--motion {
    grid-template-columns: minmax(0, 1fr) 84px;
    column-gap: 16px;
    padding: 16px 18px;
  }
  .se-cell--architecture .se-cell__frame,
  .se-cell--code .se-cell__frame,
  .se-cell--motion .se-cell__frame { width: 84px; max-width: 84px; }

  .se-work__stage { padding: 16px; border-radius: 20px; }
  .se-recent__list { grid-template-columns: 1fr; }
}

/* ══ REDUCED MOTION ═════════════════════════════════════════════════════════
   Everything must read with motion off: land in the final state, no travel,
   no draw, no rise. */
@media (prefers-reduced-motion: reduce) {
  .se--js .se-intro > *,
  .se--js .se-cell,
  .se--js .se-recent { opacity: 1; transform: none; animation: none; }
  /* Tiles and lines land at their AUTHORED opacity, not full — otherwise the
     layered figures collapse into solid blocks with motion off. */
  .se-tile,
  .se-line { opacity: var(--se-op, 1); transform: none; animation: none; }
  .se-draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .se-fig__travel { offset-distance: 100%; animation: none; }
  .se-fig__caret { opacity: 1; animation: none; }
  .se-cell,
  .se-recent__card,
  .se-cell__arrow,
  .se-recent__continue svg { transition: none; }
  .se-cell:hover,
  .se-cell:focus-visible,
  .se-recent__card:hover,
  .se-recent__card:focus-visible { transform: none; }
}