/* Shared base for the section simulations (see assets/js/sim/kit.js).
   .sim keeps the aspect ratio of its point canvas; .cv is that canvas, scaled by --k.
   Tokens below are the app's own (measured from Islora's renders; see mac.css for the island itself). */
/* overflow-x: clip keeps the unscaled canvas from widening the page; content below the canvas (phone controls) still shows. */
.sim { position: relative; width: 100%; overflow-x: clip; }
.sim::before { content: ""; display: block; padding-top: calc(var(--ratio, .42) * 100%); }
.sim > .cv {
  --ui: "Avenir Next", "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --k: 1;
  /* glass panel, as the open island and Islora's panels (Sıvı cam) */
  --glass-bg: linear-gradient(180deg, rgba(118,121,127,.86) 0%, rgba(98,102,109,.88) 26%, rgba(80,84,91,.9) 55%, rgba(71,75,83,.92) 100%);
  --glass-edge: inset 0 0 0 .7px rgba(255,255,255,.10);
  --glass-shadow: 0 30px 70px rgba(0,0,0,.45);
  /* widget tile inside a panel */
  --tile-bg: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  --tile-edge: inset 0 0 0 .7px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
  --ink: #fff; --ink-2: rgba(255,255,255,.72); --ink-3: rgba(255,255,255,.5);
  --accent: #5aa2ff; --green: #6be087; --red: #ff5b4d; --orange: #ffb35c;
  position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--k));
  font-family: var(--ui); color: var(--ink); -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none; overflow: hidden; border-radius: 22px; isolation: isolate;
}
.sim > .cv * { box-sizing: border-box; }
.sim > .cv button { font: inherit; color: inherit; }
/* a Mac desktop backdrop, for simulations drawn on a screen */
.sim > .cv.desk, .sim .desk { background: #1b2340 url('/assets/img/wallpaper.jpg') center / cover no-repeat; }
/* hint chip shown on the canvas until the visitor tries the thing */
.sim .try {
  position: absolute; z-index: 40; left: 50%; transform: translateX(-50%); bottom: 22px;
  padding: 9px 16px; border-radius: 20px; font-size: 15px; font-weight: 600; white-space: nowrap;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14); transition: opacity .4s ease;
}
.sim .try kbd { font: 700 13px/1 var(--ui); padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.16); }
.sim .try.gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sim > .cv *, .sim > .cv *::before, .sim > .cv *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }