/* =========================================================================
   Clickable model of the control panel (/how-it-works only).
   Colours are sampled from the app's own screenshots. Sizes are written in
   --u, one pixel of the app at a 1280px-wide window, so the whole model
   scales with its container like a screenshot would, and switches to a
   stacked, full-size layout when the container is too narrow to read.
   ========================================================================= */

.sim-hints{
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: -12px 0 clamp(26px, 3.4vw, 40px);
}
.sim-hints li{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-2); font-size: .92rem;
}
.sim-hints .icon{ width: 1.05em; height: 1.05em; color: var(--blue-2); }

.sim-wrap{ container-type: inline-size; }
.sim-wrap:not(.is-live) .app-frame{ margin: 0; }

.sim{
  /* the app's palette */
  --s-side:   #0d1526;
  --s-panel:  #111c31;
  --s-main:   #070d1a;
  --s-line:   #1d2c46;
  --s-field:  #17243c;
  --s-sel:    #162a4e;
  --s-on:     #122445;
  --s-deep:   #0d1d3a;
  --s-accent: #2f80ff;
  --s-text:   #eaf1ff;
  --s-text-2: #9bb0d0;
  --s-text-3: #64789a;
  --s-blue:   #7db0ff;
  --s-green:  #35d07f;
  --s-red:    #e5484d;
  --u: clamp(.74px, calc(100cqw / 1280), 1.08px);

  position: relative;
  display: grid;
  grid-template-columns: calc(192 * var(--u)) calc(236 * var(--u)) minmax(0, 1fr) calc(298 * var(--u));
  grid-template-rows: calc(24 * var(--u)) calc(58 * var(--u)) minmax(0, 1fr);
  grid-template-areas:
    "bar  bar   bar  bar"
    "top  top   top  top"
    "side panel main look";
  height: calc(772 * var(--u));
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--s-main);
  box-shadow: var(--sh-lg);
  color: var(--s-text);
  font-family: "Segoe UI", "Inter", system-ui, sans-serif;
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.sim:focus{ outline: none; }
.sim:focus-visible{ outline: 2px solid var(--blue-2); outline-offset: 3px; }
.sim :focus-visible{ outline: 2px solid var(--blue-2); outline-offset: 1px; }
.sim button, .sim input, .sim select{ font: inherit; color: inherit; }
.sim button{ cursor: pointer; }
.sim [hidden]{ display: none !important; }
.sim-ico{
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.sim-tri{ width: .72em; height: .72em; fill: currentColor; flex: none; }

/* ---- window chrome ---- */
.sim-menubar{
  grid-area: bar;
  display: flex; align-items: center; gap: calc(16 * var(--u));
  padding: 0 calc(8 * var(--u));
  background: #1f1f1f; color: #e8e8e8;
  font-size: calc(12 * var(--u));
}
.sim-top{
  grid-area: top;
  display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u));
  padding: 0 calc(16 * var(--u));
  background: var(--s-side);
  border-bottom: 1px solid var(--s-line);
}
.sim-brand{
  display: inline-flex; align-items: center; gap: calc(12 * var(--u));
  font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: -.01em;
}
.sim-brand img{ width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.sim-pills{ display: flex; align-items: center; gap: calc(8 * var(--u)); }
.sim-pill{
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(32 * var(--u));
  padding: 0 calc(13 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(6 * var(--u));
  background: var(--s-field);
  font-size: calc(12.5 * var(--u)); white-space: nowrap;
}
.sim-pill .is-doc{ width: .95em; height: .95em; color: var(--s-text-3); }
.sim-pill .is-chev{ width: .9em; height: .9em; color: var(--s-text-3); }
.sim-pill-icon{ padding: 0 calc(9 * var(--u)); color: var(--s-text-2); }
.sim-clock span{ color: var(--s-text-2); }
.sim-clock b{ font-weight: 600; }
.sim-dot{ width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--s-text-3); }
.sim-dot.is-on{ background: var(--s-green); }

/* ---- sidebar ---- */
.sim-side{
  grid-area: side;
  display: flex; flex-direction: column;
  padding: calc(10 * var(--u));
  background: var(--s-side);
  border-right: 1px solid var(--s-line);
  min-height: 0;
}
.sim-navs{ display: grid; gap: calc(4 * var(--u)); }
.sim-nav{
  display: flex; align-items: center; gap: calc(12 * var(--u));
  width: 100%; height: calc(42 * var(--u));
  padding: 0 calc(13 * var(--u));
  border-radius: calc(8 * var(--u));
  color: var(--s-text-2);
  font-size: calc(14 * var(--u)); font-weight: 600;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.sim-nav span{ flex: 1; text-align: left; }
.sim-nav em{
  display: grid; place-items: center;
  min-width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(6 * var(--u));
  border-radius: 999px;
  background: var(--s-line); color: var(--s-text-2);
  font-style: normal; font-size: calc(11 * var(--u)); font-weight: 600;
}
.sim-nav:hover{ background: rgba(18,36,69,.6); color: var(--s-text); }
.sim-nav.is-active{ background: var(--s-on); color: var(--s-blue); }
.sim-nav.is-active em{ background: #173567; color: var(--s-blue); }
.sim-nav-saved .sim-ico{ color: var(--s-red); }
.sim-daily{
  margin-top: auto;
  padding: 0 calc(12 * var(--u));
  color: var(--s-text-2);
  font-size: calc(12 * var(--u)); line-height: 1.5;
}
.sim-daily span{ display: block; margin-top: calc(4 * var(--u)); color: var(--s-text-3); }
.sim-version{
  margin-top: calc(12 * var(--u));
  padding: 0 calc(12 * var(--u));
  color: var(--s-text-3); font-size: calc(10.5 * var(--u));
}

/* ---- the middle panel ---- */
.sim-panel{
  grid-area: panel;
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
  min-height: 0; min-width: 0;
  overflow-x: hidden; overflow-y: auto;
  padding: calc(16 * var(--u));
  background: var(--s-panel);
  border-right: 1px solid var(--s-line);
  scrollbar-width: thin; scrollbar-color: var(--s-line) transparent;
}
/* a scrolling column: its fields keep their height instead of squeezing */
.sim-panel > *{ flex-shrink: 0; }
.sim-h{ margin: 0 0 calc(2 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.sim-lab{ display: block; margin: calc(4 * var(--u)) 0 calc(-4 * var(--u)); color: var(--s-text-3); font-size: calc(11.5 * var(--u)); }
.sim-pair{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(8 * var(--u)); }
.sim-go{ grid-template-columns: minmax(0, 1fr) auto; }
.sim-cv label{ display: grid; gap: calc(8 * var(--u)); }
.sim-field{
  width: 100%; min-width: 0; height: calc(36 * var(--u));
  padding: 0 calc(11 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(6 * var(--u));
  background: var(--s-field);
  font-size: calc(12.5 * var(--u));
  -webkit-appearance: none; appearance: none;
}
select.sim-field{
  padding-right: calc(28 * var(--u));
  background-image: linear-gradient(45deg, transparent 50%, var(--s-text-2) 50%), linear-gradient(135deg, var(--s-text-2) 50%, transparent 50%);
  background-position: calc(100% - 15 * var(--u)) 52%, calc(100% - 10 * var(--u)) 52%;
  background-size: calc(5 * var(--u)) calc(5 * var(--u));
  background-repeat: no-repeat;
}
.sim-field::placeholder{ color: var(--s-text-3); }
.sim-field:disabled{ opacity: .45; }
.sim-btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(36 * var(--u)); padding: 0 calc(12 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(6 * var(--u));
  background: var(--s-field); color: var(--s-text-2);
  font-size: calc(12.5 * var(--u));
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.sim-btn:hover{ background: #1c2c49; color: var(--s-text); }
.sim-list{ display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(4 * var(--u)); }
.sim-item{
  display: flex; align-items: center; gap: calc(8 * var(--u));
  width: 100%; min-height: calc(42 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-left: calc(3 * var(--u)) solid transparent;
  border-radius: calc(6 * var(--u));
  font-size: calc(13 * var(--u));
  text-align: left;
  transition: background-color .18s var(--ease);
}
.sim-item span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-item:hover{ background: rgba(22,42,78,.5); }
.sim-item.is-active{ border-left-color: var(--s-accent); background: var(--s-sel); color: var(--s-blue); font-weight: 600; }
.sim-tools{ display: inline-flex; gap: calc(12 * var(--u)); color: var(--s-text-3); }
.sim-tools .sim-ico{ width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.sim-empty{ color: var(--s-text-3); font-size: calc(12 * var(--u)); }
.sim-trs{ display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(4 * var(--u)); }
.sim-tr{
  display: flex; align-items: center; gap: calc(10 * var(--u));
  min-height: calc(38 * var(--u)); padding: 0 calc(12 * var(--u));
  border-left: calc(3 * var(--u)) solid transparent; border-radius: calc(6 * var(--u));
  font-size: calc(12.5 * var(--u)); cursor: pointer;
}
.sim-tr span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-tr input{ width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none; margin: 0; }
.sim-tr.is-active{ border-left-color: var(--s-accent); background: var(--s-sel); font-weight: 600; }
.sim-bookhead{ display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.sim-bookhead .sim-field{ width: 55%; }
.sim-toggle{
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(8 * var(--u));
  background: var(--s-field);
}
.sim-toggle b{ display: block; font-size: calc(13 * var(--u)); font-weight: 600; }
.sim-toggle span{ color: var(--s-green); font-size: calc(11.5 * var(--u)); font-weight: 600; }
.sim-switch{
  position: relative; flex: none;
  width: calc(44 * var(--u)); height: calc(24 * var(--u));
  border-radius: 999px; background: #22314d;
  transition: background-color .2s var(--ease);
}
.sim-switch::after{
  content: ""; position: absolute; top: calc(3 * var(--u)); left: calc(3 * var(--u));
  width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: #fff;
  transition: transform .2s var(--ease);
}
.sim-switch[aria-checked="true"]{ background: #22a45d; }
.sim-switch[aria-checked="true"]::after{ transform: translateX(calc(20 * var(--u))); }
.sim-panel:has(.sim-switch[aria-checked="false"]) .sim-toggle span{ color: var(--s-text-3); }

/* ---- the middle: output, controls, content ---- */
.sim-main{
  grid-area: main;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  padding: calc(16 * var(--u)) calc(22 * var(--u));
}
.sim-frame{
  position: relative; flex: none;
  aspect-ratio: 1.93;
  border: 1px solid #2c4166; border-radius: calc(8 * var(--u));
  background: repeating-conic-gradient(#151b27 0% 25%, #1c2331 0% 50%) 0 0 / calc(20 * var(--u)) calc(20 * var(--u));
  overflow: hidden;
}
.sim-output{
  position: absolute; inset: 0 2%;
  container-type: size;
  display: grid;
  overflow: hidden;
}
/* Transparent looks show the checkerboard, as the app does */
.sim-output.is-transparent{
  background: repeating-conic-gradient(#20242c 0% 25%, #2a2f38 0% 50%) 0 0 / 3.6cqw 3.6cqw;
}
.sim-slide{
  display: grid; align-content: center; justify-items: center; gap: 2.2cqh;
  /* the top always clears the LIVE OUTPUT pill, which keeps its size on a phone */
  padding: max(14cqh, 36px) 8cqw 5cqh;
  text-align: center;
  transition: opacity .16s var(--ease);
}
.sim-slide[data-pos="top"]{ align-content: start; }
.sim-slide[data-pos="bottom"]{ align-content: end; }
.sim-slide.is-switching{ opacity: 0; }
.sim-ref{
  color: #c748b2;
  font-family: Consolas, "Courier New", monospace;
  font-size: 2.1cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.sim-text{
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5cqw; line-height: 1.32;
  text-wrap: balance;
  text-shadow: 0 .2cqw 1.2cqw rgba(0,0,0,.55);
}
.sim-text.is-bold{ font-weight: 700; font-size: 4.8cqw; }
/* on a phone-sized output, long passages come down a step so they fit */
@container (max-width: 420px){
  .sim-text{ font-size: 4.4cqw; }
  .sim-text.is-bold{ font-size: 4.2cqw; }
}
.sim-black{ position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.sim-output.is-black .sim-black{ opacity: 1; }
.sim-output:fullscreen{ inset: auto; }
.sim-live{
  position: absolute; top: calc(10 * var(--u)); left: calc(10 * var(--u));
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  padding: calc(5 * var(--u)) calc(11 * var(--u));
  border-radius: 999px;
  background: rgba(9,12,20,.88);
  font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sim-live i{ width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--s-red); }

.sim-controls{
  display: grid; grid-template-columns: 1fr 1fr auto auto; gap: calc(8 * var(--u));
  margin-top: calc(12 * var(--u));
}
.sim-ctl{
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(8 * var(--u));
  background: var(--s-field);
  font-size: calc(13 * var(--u)); font-weight: 600;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.sim-ctl:hover:not(:disabled){ background: #1c2c49; }
.sim-ctl:active:not(:disabled){ background: #203458; }
.sim-ctl:disabled{ cursor: default; background: var(--s-side); border-color: var(--s-panel); color: #565d6a; }
.sim-ctl[aria-pressed="true"]{ background: var(--s-on); border-color: var(--s-accent); color: var(--s-blue); }
.sim-status{
  display: flex; gap: calc(16 * var(--u));
  margin: calc(10 * var(--u)) 0 calc(12 * var(--u));
  color: var(--s-text-3); font-size: calc(11.5 * var(--u));
}
.sim-status span{ font-variant-numeric: tabular-nums; }
.sim-deck{
  flex: 1; min-height: 0; overflow-y: auto;
  padding-right: calc(4 * var(--u));
  scrollbar-width: thin; scrollbar-color: var(--s-line) transparent;
}
.sim-deck-title{ margin: 0 0 calc(10 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.sim-slides{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(9 * var(--u)); }
.sim-card{
  min-height: calc(76 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(8 * var(--u));
  background: var(--s-panel);
  font-size: calc(12.5 * var(--u)); text-align: left;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.sim-verses{ display: grid; gap: calc(8 * var(--u)); }
.sim-verse{
  display: flex; align-items: flex-start; gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(8 * var(--u));
  background: var(--s-panel);
  font-size: calc(12.5 * var(--u)); text-align: left;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.sim-verse b{
  display: grid; place-items: center; flex: none;
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--s-sel); color: var(--s-text-2);
  font-size: calc(11 * var(--u)); font-weight: 600;
}
.sim-verse span{ padding-top: calc(2 * var(--u)); }
.sim-card:hover, .sim-verse:hover{ border-color: #2c4166; }
.sim-card.is-active, .sim-verse.is-active{ border-color: var(--s-accent); background: var(--s-deep); }
.sim-verse.is-active b{ background: var(--s-accent); color: #fff; }
.sim-empty-center{ padding-top: calc(60 * var(--u)); text-align: center; }
.sim-empty-wide{ padding: calc(20 * var(--u)) 0; }

/* ---- Look of the output ---- */
.sim-look{
  grid-area: look;
  min-height: 0; min-width: 0;
  overflow-x: hidden; overflow-y: auto;
  padding: calc(14 * var(--u));
  background: var(--s-panel);
  border-left: 1px solid var(--s-line);
  scrollbar-width: thin; scrollbar-color: var(--s-line) transparent;
}
.sim-look .sim-h{ margin-bottom: calc(12 * var(--u)); }
.sim-lookcard{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--u));
  padding: calc(10 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(8 * var(--u));
  background: var(--s-side);
}
.sim-tabs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); }
.sim-tabs button{
  height: calc(32 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(6 * var(--u));
  background: var(--s-field); color: var(--s-text-2);
  font-size: calc(12 * var(--u));
}
.sim-tabs button.is-active{ background: var(--s-accent); border-color: var(--s-accent); color: #fff; font-weight: 600; }
.sim-check{
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding-bottom: calc(12 * var(--u));
  border-bottom: 1px solid var(--s-line);
  color: var(--s-text-2); font-size: calc(11.5 * var(--u)); cursor: pointer;
}
.sim-check input{ width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0; flex: none; }
.sim-types{ display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.sim-types button{
  height: calc(30 * var(--u)); padding: 0 calc(9 * var(--u));
  border: 1px solid transparent; border-radius: calc(6 * var(--u));
  color: var(--s-text-3); font-size: calc(11.5 * var(--u));
}
.sim-types button.is-active{ background: var(--s-on); border-color: #24508f; color: var(--s-blue); font-weight: 600; }
.sim-swatches{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.sim-sw{
  position: relative;
  display: grid; overflow: hidden;
  border: 1px solid var(--s-line); border-radius: calc(7 * var(--u));
  background: var(--s-field);
  cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.sim-sw:hover{ border-color: #2c4166; transform: translateY(-1px); }
.sim-sw-art{ height: calc(44 * var(--u)); }
.sim-sw-art.is-checker{ background: repeating-conic-gradient(#2a303b 0% 25%, #202530 0% 50%) 0 0 / calc(12 * var(--u)) calc(12 * var(--u)); }
.sim-sw-art.is-rainbow{ background: conic-gradient(from 200deg at 50% 60%, #ff5f6d, #ffc371, #b6f07a, #4ac7ff, #9b6bff, #f15bd4, #ff5f6d); }
.sim-sw-name{
  padding: calc(5 * var(--u)) calc(4 * var(--u));
  color: var(--s-text-2); font-size: calc(10.5 * var(--u));
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sim-sw.is-active{ border-color: var(--s-accent); box-shadow: inset 0 0 0 1px var(--s-accent); }
.sim-sw.is-active .sim-sw-name{ color: var(--s-blue); font-weight: 600; }
.sim-sw input[type="color"]{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sim-sw:focus-within{ outline: 2px solid var(--blue-2); outline-offset: 1px; }
.sim-look .sim-lab{ margin: 0 0 calc(-4 * var(--u)); }
.sim-custom{
  display: grid; gap: calc(10 * var(--u));
  padding: calc(12 * var(--u));
  border: 1px solid var(--s-line); border-radius: calc(8 * var(--u));
  background: var(--s-panel);
  color: var(--s-text-2); font-size: calc(11.5 * var(--u));
}
.sim-custom p{ color: var(--s-text); font-size: calc(12 * var(--u)); }
.sim-custom-row{ display: flex; align-items: center; gap: calc(10 * var(--u)); }
.sim-custom input[type="color"]{
  width: calc(42 * var(--u)); height: calc(22 * var(--u)); padding: 0;
  border: 1px solid #3a4a66; border-radius: calc(3 * var(--u)); background: none; cursor: pointer;
}
.sim-custom input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; }
.sim-custom input[type="color"]::-webkit-color-swatch{ border: 0; border-radius: calc(2 * var(--u)); }
.sim-custom input[type="color"]::-moz-color-swatch{ border: 0; }
.sim-custom input[type="range"]{ flex: 1; min-width: 0; accent-color: var(--s-accent); }
.sim-custom output{ min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.sim-custom-bar{ height: calc(26 * var(--u)); border: 1px solid var(--s-line); border-radius: calc(6 * var(--u)); }
.sim-custom-bar.is-active{ border-color: var(--s-accent); }

/* ---- the honest note ---- */
.sim-toast{
  position: absolute; left: 50%; bottom: calc(18 * var(--u)); z-index: 5;
  max-width: 80%;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border: 1px solid #2c4166; border-radius: calc(8 * var(--u));
  background: rgba(13,21,38,.97);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.8);
  color: var(--s-text); font-size: calc(12.5 * var(--u));
  text-align: center;
  opacity: 0; transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.sim-toast.is-shown{ opacity: 1; transform: translate(-50%, 0); }

/* ---- narrow containers: the same model, stacked at full size ---- */
@container (max-width: 980px){
  .sim{
    --u: 1px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "top" "side" "main" "panel" "look";
    height: auto;
  }
  .sim-menubar{ display: none; }
  .sim-top{ min-height: 54px; }
  .sim-pills .sim-pill:not(.sim-clock){ display: none; }
  .sim-side{
    padding: 8px;
    border-right: 0; border-bottom: 1px solid var(--s-line);
  }
  .sim-navs{
    display: flex; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
  }
  .sim-navs::-webkit-scrollbar{ display: none; }
  .sim-nav{ width: auto; flex: none; height: 44px; }
  .sim-daily, .sim-version{ display: none; }
  .sim-main{ padding: 14px; }
  .sim-controls{ grid-template-columns: 1fr 1fr; }
  .sim-deck{ max-height: 360px; }
  .sim-slides{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sim-panel{ border-right: 0; border-top: 1px solid var(--s-line); overflow: visible; }
  .sim-look{ border-left: 0; border-top: 1px solid var(--s-line); overflow: visible; }
  .sim-swatches{ grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .sim-tabs button, .sim-types button{ min-height: 40px; }
}

@media (prefers-reduced-motion: reduce){
  .sim *, .sim *::before, .sim *::after{ transition: none !important; }
}

/* ---- computers get the model; phones and tablets get the tour ----
   Below 1060px the model's full layout no longer fits, and stacked it stops
   looking like the app. There the section shows the app's menus in turn (the
   same five screenshots as the home hero), with copy to match. */
.on-narrow{ display: none; }
.app-tour{ max-width: 1000px; margin: 0 auto; }
.app-tour .app-title{ color: var(--text-2); }
@media (max-width: 1059px){
  .on-wide{ display: none !important; }
  .on-narrow{ display: revert; }
}