/* Study55 PRODUCTS: two tools, two surfaces, one hierarchy (product → action → proof).
   STUDIO — warm black-lacquer surface lit in gold from the upper left: product name and
   EXPLORE STUDIO first, the genuine public template outputs as proof (never above their
   480px source). HUB — slate/violet surface: four parallel features, no connector or
   implied order. No invented UI, data or metrics. Native scrollbars stay visible. */
.s55-studio,.s55-studio *,.s55-hub,.s55-hub *{box-sizing:border-box}
.s55-kicker{margin:0 0 8px;font:600 11px/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:.14em}
.s55-hub-description .s55-line,.s55-studio-description .s55-line{display:inline-block}

/* ---------- STUDIO ---------- */
.s55-studio{
  display:grid;
  grid-template-columns:minmax(250px,330px) minmax(0,724px);
  justify-content:space-between;
  align-items:center;
  gap:32px clamp(28px,3.4vw,48px);
  min-width:0;
  margin:14px 0 0;
  padding:30px clamp(22px,2.6vw,34px);
  color:#f4f2ed;
  background:
    radial-gradient(110% 120% at 0% 0%,rgba(216,182,106,.16),rgba(216,182,106,0) 52%),
    linear-gradient(180deg,#14120e,#0b0a08);
  box-shadow:inset 0 1px 0 rgba(232,207,122,.28);
}
.s55-studio .s55-kicker{color:#e8cf7a}
.s55-studio-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.s55-studio h3{display:flex;align-items:center;gap:12px;margin:0;color:#f7f1e2;font:600 clamp(32px,3.2vw,42px)/1.02 'Barlow Condensed',Arial,sans-serif;letter-spacing:.02em;white-space:nowrap}
.s55-studio h3 img{display:block;width:44px;height:44px;flex:none;object-fit:contain}
.s55-studio-description{margin:14px 0 22px;color:#d8d2c4;overflow-wrap:anywhere;font:500 13px/1.75 'Zen Kaku Gothic New','Yu Gothic',sans-serif}
.s55-studio-link{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 16px 0 20px;background:#d8b66a;color:#15130f;text-decoration:none;font:600 16px/1 'Barlow Condensed',Arial,sans-serif;letter-spacing:.1em;transition:background-color .2s ease}
.s55-studio-link svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
.s55-studio-link:hover{background:#ecd08e}
.s55-studio-link:focus-visible{outline:2px solid #e8cf7a;outline-offset:4px}

/* Genuine outputs laid on the lacquer: lead at its 480px source, two at half size. */
.s55-studio-sheet{display:grid;grid-template-columns:minmax(0,480px) minmax(0,232px);gap:12px;align-items:start;min-width:0;margin:0}
.s55-studio-more{display:grid;gap:9px;min-width:0}
.s55-output{min-width:0;margin:0;box-shadow:0 14px 26px rgba(0,0,0,.45)}
.s55-output img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}

/* All STUDIO examples share one static composition; no decorative scroll unfold. */

/* ---------- HUB ---------- */
.s55-hub{
  display:grid;
  grid-template-columns:minmax(250px,330px) minmax(0,1fr);
  align-items:center;
  gap:22px clamp(28px,3.4vw,48px);
  min-width:0;
  margin-top:18px;
  padding:26px clamp(22px,2.6vw,34px);
  background:#1a222e;
  color:#eeeaf4;
}
.s55-hub .s55-kicker{color:#bfb0ed}
.s55-hub-head{display:grid;justify-items:start;min-width:0}
.s55-hub h3{display:flex;align-items:center;gap:10px;margin:0;font:600 clamp(30px,3vw,38px)/1.04 'Barlow Condensed',Arial,sans-serif;letter-spacing:.01em;white-space:nowrap}
.s55-hub h3 img{display:block;width:42px;height:42px;flex:none;object-fit:contain}
.s55-hub-description{margin:12px 0 16px;color:#d4d0dd;font:500 13px/1.7 'Zen Kaku Gothic New','Yu Gothic',sans-serif}
.s55-hub-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;background:#c9b8ec;color:#17202a;text-decoration:none;white-space:nowrap;font:600 16px/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:.04em}
.s55-hub-link svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
.s55-hub-link:hover{background:#e5d8ff}
.s55-hub-link:focus-visible{outline:2px solid #e5d8ff;outline-offset:4px}
/* Four parallel features (same weight, no sequence). Plain text + icon, no tile
   background: they are not links, so they must not look like buttons. */
.s55-hub-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:0;padding:0;list-style:none}
.s55-hub-features li{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;min-width:0}
.s55-hub-features .ui-icon{grid-row:1/3;width:28px;height:28px;color:#cbbdf3}
.s55-feature-name{color:#f3f0f8;font:700 15px/1.3 'Zen Kaku Gothic New','Yu Gothic',sans-serif}
.s55-feature-sub{color:#b2abc3;font:500 12px/1.5 'Zen Kaku Gothic New','Yu Gothic',sans-serif}

/* ---------- Narrow ---------- */
@media (max-width:1050px){
  .s55-studio{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .s55-hub{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .s55-studio{gap:20px;padding:22px 18px}
  .s55-studio h3{font-size:clamp(30px,9vw,37px)}
  .s55-studio h3 img{width:38px;height:38px}
  .s55-studio-description{margin:10px 0 16px;font-size:12px;line-height:1.65}
  /* One lead output, the other two in a native horizontal scroller (visible scrollbar). */
  .s55-studio-sheet{display:block}
  .s55-output-lead{max-width:480px}
  .s55-studio-more{
    display:flex;
    gap:10px;
    margin-top:10px;
    padding-bottom:6px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:#8a7445 #1b1a17;
  }
  .s55-studio-more .s55-output{flex:0 0 min(62%,240px);scroll-snap-align:start}
  .s55-hub{padding:20px 18px}
  .s55-hub h3{font-size:clamp(30px,9vw,37px)}
  /* Compact two-column group down to 320: icon above name, subtitle may wrap to 2 lines. */
  .s55-hub-features{gap:14px 16px}
  .s55-hub-features li{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:2px;align-items:start}
  .s55-hub-features .ui-icon{grid-row:auto;width:22px;height:22px;margin-bottom:4px}
  .s55-feature-name{font-size:14px}
  .s55-feature-sub{font-size:11.5px;line-height:1.45}
}
@media (max-width:360px){.s55-studio h3,.s55-hub h3{font-size:28px}}