/* Ruhiu Studio — placeholder site.
   Palette from DESIGN/RUHIU STUDIO/LOGOS (abstract mark + gradient). Fonts: OFL only (see /assets/fonts/LICENSES).
   EB Garamond is subset by source/subset-fonts.sh with true small caps kept: labels are Garamond small caps
   (Kevin, 2026-10-01: the mono labels read too clinical). */

@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/EBGaramond-sc.woff") format("woff"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/EBGaramond-Italic-sc.woff") format("woff"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Grenze Gotisch"; src: url("/assets/fonts/GrenzeGotisch-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #0a0908;
  --ink-2: #14120f;
  --line: rgba(253, 240, 213, .16);
  --cream: #fdf0d5;
  --cream-2: rgba(253, 240, 213, .7);
  --cream-3: rgba(253, 240, 213, .46);
  --red: #c1121f;
  --rose: #d04a4d;
  --blue: #669bbc;
  --spectrum: linear-gradient(180deg, #fdf0d5 10%, #d04a4d 47%, #669bbc 79%);
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --black: "Grenze Gotisch", "EB Garamond", serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 36rem;
  --wide: min(1240px, calc(100vw - 2 * var(--gutter) - 12px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font: 400 1.1875rem/1.5 var(--serif); font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--cream-3); text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--cream); text-decoration-color: var(--rose); }
:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--red); color: var(--cream); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── type roles: small caps for every label, caption and control ── */
.sc, .label, .bar-nav, .hero-status, .flip-ctrl, .plate figcaption, .index .k, .index .s,
.practice span, .pill, .lightbox figcaption, .lb-btn, .morph-cap, .about-cv span {
  font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: .07em; font-variant-numeric: lining-nums;
}
.label { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; color: var(--cream-2); margin: 0 0 1.25rem; }
.blackletter { font: 600 clamp(2.75rem, 7vw, 5rem)/.95 var(--black); letter-spacing: -.005em; margin: 0; text-transform: lowercase; }
.caption { font-size: 1.1875rem; line-height: 1.45; color: var(--cream-2); max-width: 34rem; margin: 1.1rem auto 0; } /* long captions read better in plain Garamond; small caps stay for short labels */

/* ── the spectrum: the brand gradient as a hairline at the right edge ── */
.spectrum { position: fixed; top: 0; right: 0; width: 6px; height: 100vh; height: 100dvh; background: var(--spectrum); z-index: 30; opacity: .9; }

/* ── spinning dots (the abstract mark, set in motion) ── */
.dots { position: relative; display: inline-block; width: 44px; height: 40px; animation: turn 2.4s cubic-bezier(.6, 0, .4, 1) infinite; }
.dots i { position: absolute; width: 18px; height: 18px; border-radius: 50%; }
.dots i:nth-child(1) { left: 13px; top: 0; background: var(--cream); }
.dots i:nth-child(2) { left: 0; top: 21px; background: var(--red); }
.dots i:nth-child(3) { left: 26px; top: 21px; background: var(--blue); }
@keyframes turn { to { transform: rotate(360deg); } }
.dots-inline { width: 15px; height: 14px; vertical-align: -1px; margin-right: .7em; animation-duration: 3.2s; }
.dots-inline i { width: 6px; height: 6px; }
.dots-inline i:nth-child(1) { left: 4.5px; top: 0; }
.dots-inline i:nth-child(2) { left: 0; top: 7.5px; }
.dots-inline i:nth-child(3) { left: 9px; top: 7.5px; }

.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--ink); transition: opacity .6s ease, visibility 0s linear .6s; }
.is-ready .loader { opacity: 0; visibility: hidden; }

/* ── top bar (after teenage engineering's index row) ── */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 12px calc(var(--gutter) + 6px) 12px var(--gutter); background: rgba(10, 9, 8, .82);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--line); }
.bar-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.bar-mark img { width: 62px; height: auto; }
.bar-mark .bar-dots { width: auto; height: 35px; } /* same height as the wordmark (62 × 35) */
.bar-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1.5rem; font-size: 1.0625rem; line-height: 1; }
.bar-nav a { text-decoration: none; color: var(--cream-2); padding: 6px 0; }
.bar-nav a:hover, .bar-nav a[aria-current] { color: var(--cream); }
.bar-nav b { font-weight: 500; color: var(--rose); margin-right: .45em; }
.label .num, .foot-label .num { font-weight: 500; color: var(--rose); } /* section numerals in the nav's red */

/* ── pills (buttons and download links) ── */
.pill { display: inline-flex; align-items: center; gap: .4em; font-size: 1.0625rem; line-height: 1; color: var(--cream); text-decoration: none;
  background: none; border: 1px solid var(--cream-3); border-radius: 999px; padding: .62em 1.15em .72em; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.pill:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ── hero: under construction ── */
.hero { min-height: calc(100svh - 62px); display: grid; place-content: center; justify-items: center; text-align: center; padding: 8vh var(--gutter) 10vh; }
.hero-temple { width: clamp(84px, 9vw, 112px); margin-bottom: 2.4rem; opacity: .95; }
.hero-title { font: 600 clamp(2.2rem, 5.6vw, 4.4rem)/.95 var(--black); margin: 0; letter-spacing: -.01em; }
.hero-sub { font: italic 400 clamp(1.25rem, 2.4vw, 1.6rem)/1.35 var(--serif); color: var(--cream-2); margin: 1.1rem 0 0; }
.hero-status { font-size: 1.0625rem; margin: 1.6rem 0 0; color: var(--cream-3); }
.hero-actions { margin: 2rem 0 0; }

/* ── section rule: a plain hairline ── */
.rule { height: 0; margin: 0 auto; border: 0; border-top: 1px solid var(--line); width: var(--wide); }

/* ── about (after lauriparonen.com: one justified column, an illuminated initial) ── */
.about { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(4.5rem, 12vw, 9rem) var(--gutter); }
.lede { margin: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; font-size: clamp(1.125rem, 2.2vw, 1.3125rem); line-height: 1.45; }
.initial { float: left; width: 1.32em; height: 1.32em; padding-top: .04em; margin: .1em .17em 0 0; display: grid; place-items: center;
  font: 500 3.1em/1 var(--serif); color: var(--cream); /* Grenze's R read as "IR" */ position: relative; isolation: isolate;
  border: 1px solid var(--cream-3); outline: 1px solid var(--cream-3); outline-offset: 3px; }
.initial::before { content: ""; position: absolute; inset: 6px; z-index: -1; background:
  radial-gradient(circle at 50% 50%, rgba(102, 155, 188, .55) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
  linear-gradient(160deg, rgba(193, 18, 31, .9), rgba(208, 74, 77, .55) 55%, rgba(102, 155, 188, .7)); }
.motto { margin: 2.5rem 0 0; padding: 0 0 0 1.25rem; border-left: 2px solid; border-image: var(--spectrum) 1;
  font: italic 400 1.1875rem/1.45 var(--serif); color: var(--cream-2); }
.practice { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.practice li { display: grid; grid-template-columns: 13.5rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; color: var(--cream-2); align-items: baseline; }
.practice span { font-size: 1.0625rem; font-weight: 500; color: var(--cream); }
.label-sub { margin-top: 4rem; }
.cases { padding-top: clamp(3.5rem, 9vw, 6rem); padding-bottom: clamp(3.5rem, 9vw, 6rem); }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index li { display: grid; grid-template-columns: 2.75rem 1fr auto; grid-template-areas: "n t s" "n k s"; column-gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.index b { grid-area: n; font: 500 1.25rem/1 var(--black); color: var(--rose); }
.index .t { grid-area: t; font-size: 1.1875rem; line-height: 1.3; }
.index .t a { text-decoration-color: var(--rose); }
.index .k { grid-area: k; font-size: .9375rem; line-height: 1.6; color: var(--cream-3); }
.index .s { grid-area: s; font-size: .9375rem; line-height: 1; color: var(--blue); white-space: nowrap; }
.index .s a { color: var(--cream); }
.about-cv { margin: 2.25rem 0 0; font-size: 1.125rem; }
.about-cv span { color: var(--cream-3); margin-left: .5em; font-size: .9375rem; }

/* ── section heads ── */
.sec-head { text-align: center; padding: 0 var(--gutter); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.quad, .gallery, .lab-link { padding: clamp(4.5rem, 11vw, 8rem) 0; }

/* ── the flip book ── */
.flip { --w: min(780px, calc(100vw - 2 * var(--gutter) - 12px), max(320px, calc((100svh - 300px) * 1.56))); width: var(--w); margin: 0 auto; }
.flip-stage { position: relative; width: 100%; aspect-ratio: 1.56; perspective: 2200px; outline: none; touch-action: pan-y; cursor: pointer; }
.flip-stage:focus-visible { outline: 1px solid var(--blue); outline-offset: 10px; }
.flip-cards, .flip-stack { position: absolute; inset: 0; }
.flip-stack::before, .flip-stack::after { content: ""; position: absolute; inset: 0; background: #e9e3d6; border-radius: 2px; transition: transform .5s ease; }
.flip-stack::before { transform: translate(5px, 5px); opacity: .22; }
.flip-stack::after { transform: translate(10px, 10px); opacity: .1; }
.card { position: absolute; inset: 0; margin: 0; background: #f4f1ea center / cover no-repeat; border-radius: 2px; transform-origin: 0 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 18px 40px -18px rgba(0,0,0,.9); will-change: transform; }
.card img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.flip-hit { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; padding: 0; cursor: pointer; z-index: 5; }
.flip-hit-prev { left: 0; cursor: w-resize; }
.flip-hit-next { right: 0; cursor: e-resize; }
.flip-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.1rem; margin-top: 2.1rem; font-size: 1.0625rem; }
.flip-count { margin: 0; min-width: 5.5em; text-align: center; color: var(--cream-2); font-variant-numeric: lining-nums tabular-nums; }
.flip-count .n { color: var(--cream); }
.flip-btn { appearance: none; background: none; color: var(--cream); border: 1px solid var(--line); border-radius: 999px; font: inherit; letter-spacing: inherit; font-variant-caps: inherit; padding: .5em 1em .58em; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.flip-btn:hover { border-color: var(--cream-2); }
.flip-riffle[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.flip-lucky { border-color: var(--cream-3); }
.flip-lucky.is-rolling { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.flip-scrub { display: block; width: 100%; margin: 1.6rem 0 0; appearance: none; -webkit-appearance: none; height: 18px; background: transparent; cursor: pointer; }
.flip-scrub::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
.flip-scrub::-moz-range-track { height: 1px; background: var(--line); }
.flip-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5.5px; border-radius: 50%; background: var(--cream); border: 0; }
.flip-scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--cream); border: 0; }

/* ── plates (catalog) ── */
.plates { width: var(--wide); margin: 0 auto; columns: 3 300px; column-gap: clamp(16px, 2.4vw, 32px); }
.plate { break-inside: avoid; margin: 0 0 clamp(28px, 4vw, 44px); }
.plate[hidden] { display: none; }
.plate button { display: block; width: 100%; padding: 0; border: 0; background: var(--ink-2); cursor: zoom-in; overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.plate.tilting button { transition: transform .12s linear; }
.plate img { width: 100%; transition: filter .6s; filter: saturate(.92); }
.plate:hover img { filter: saturate(1.04); }
.plate.is-lifting button { visibility: hidden; }
.plate figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; font-size: .9375rem; line-height: 1.3; color: var(--cream-2); }
.plate figcaption b { font-weight: 500; color: var(--rose); }
.plate.arrive { animation: arrive .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(22px); } }
.more-wrap { text-align: center; margin: 1rem 0 0; }

/* ── lightbox, and the shards that assemble into it ── */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 9, 8, .99); color: var(--cream); overflow: hidden; }
.lightbox::backdrop { background: rgba(10, 9, 8, .7); }
.lightbox[open] { display: grid; place-items: center; animation: fade .16s ease; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.lightbox img { max-width: calc(100vw - 2 * var(--gutter) - 96px); max-height: calc(100dvh - 140px); width: auto; object-fit: contain; transition: opacity .25s; }
.lightbox img.is-hidden { opacity: 0; transition: none; }
.lightbox figcaption { font-size: 1rem; color: var(--cream-2); }
.lb-btn { position: absolute; z-index: 3; appearance: none; background: none; border: 1px solid var(--line); color: var(--cream); border-radius: 999px; font-size: 1.0625rem; padding: .5em 1em .58em; cursor: pointer; }
.lb-btn:hover { border-color: var(--cream-2); }
.lb-prev { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.lb-next { right: calc(var(--gutter) + 6px); top: 50%; transform: translateY(-50%); }
.lb-close { top: var(--gutter); right: calc(var(--gutter) + 6px); }
.shards { position: fixed; z-index: 2; pointer-events: none; perspective: 1400px; }
.shard { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; will-change: transform; backface-visibility: hidden; }
@keyframes fade { from { opacity: 0; } }

/* ── form studies: trace and morph ── */
.morph { width: min(980px, calc(100vw - 2 * var(--gutter) - 12px)); margin: 0 auto; }
.morph-stage { position: relative; aspect-ratio: 1.52; background: #f5f2ea; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
.morph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; }
.morph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trace { fill: none; stroke: url(#gold); stroke-width: .55; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* the SVG is drawn at the stage's own 1.52 proportion (viewBox 152×100): a non-scaling stroke would break pathLength into dashes */
.morph-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.morph-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.morph-thumbs::-webkit-scrollbar { display: none; }
.morph-thumbs button { flex: 0 0 auto; width: 84px; aspect-ratio: 1.52; padding: 0; border: 0; background: #f5f2ea center / cover; cursor: pointer; opacity: .5; outline: 1px solid transparent; outline-offset: 3px; transition: opacity .3s, outline-color .3s; }
.morph-thumbs button:hover { opacity: .85; }
.morph-thumbs button[aria-current="true"] { opacity: 1; outline-color: var(--cream-2); }
.morph-play { flex: 0 0 auto; font-size: 1.0625rem; font-variant-caps: all-small-caps; letter-spacing: .07em; }
.morph-cap { margin: 1rem 0 0; font-size: 1rem; color: var(--cream-2); min-height: 1.5em; }

/* ── learning lab teaser ── */
.lab-link { text-align: center; padding-left: var(--gutter); padding-right: var(--gutter); }
.lab-link h2 a { text-decoration: none; }
.lab-link h2 a:hover { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lab-link .pill { margin-top: 2rem; }

/* ── footer: correspondence, all lowercase, brand marks in white on outlined pills ── */
.foot { border-top: 1px solid var(--line); padding: clamp(4rem, 10vw, 7rem) var(--gutter) 3rem; text-align: center; font-variant-caps: normal; }
.foot-dots { margin: 0 auto 2rem; width: 46px; }
.foot-label { font-size: 1.125rem; color: var(--cream-2); margin: 0 0 1.4rem; }
.links { list-style: none; margin: 0 auto 3rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; max-width: 40rem; }
.links a { display: inline-flex; align-items: center; gap: .55em; color: #fff; text-decoration: none; font-size: 1.125rem; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .82); border-radius: 999px; padding: .55em 1.05em .62em .85em; transition: background .25s, color .25s; }
.links a:hover { background: #fff; color: var(--ink); }
.links svg { width: 1.05em; height: 1.05em; flex: none; }
.love { font-size: 1.1875rem; color: var(--cream); margin: 0 0 .8rem; }
.heart { display: inline-block; color: var(--red); margin: 0 .12em; animation: beat 4.5s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes beat { 0%, 76%, 100% { transform: scale(1); } 80% { transform: scale(1.24); } 84% { transform: scale(1); } 88% { transform: scale(1.16); } 92% { transform: scale(1); } }
.colophon { font-size: .9375rem; color: var(--cream-3); margin: 0; }
.echo .trace { stroke-width: .22; opacity: .6; }

/* ── learning lab page ── */
.lab-hero { padding: clamp(5rem, 14vw, 10rem) var(--gutter) clamp(3rem, 8vw, 5rem); text-align: center; }
.lab-hero .blackletter { font-size: clamp(3.25rem, 10vw, 7rem); }
.lab-list { max-width: calc(46rem + 2 * var(--gutter)); margin: 0 auto; padding: clamp(3.5rem, 9vw, 6rem) var(--gutter) clamp(5rem, 12vw, 8rem); }
.lab-list .index .t i { color: var(--cream-2); }
.lab-note { font-size: 1.0625rem; color: var(--cream-2); margin: 2.5rem 0 0; text-align: center; }
.lab-feature { display: block; margin: 0 0 2.5rem; text-decoration: none; border: 1px solid var(--line); }
.lab-feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lab-feature span { display: flex; justify-content: space-between; padding: .7rem 1rem .8rem; font-variant-caps: all-small-caps; letter-spacing: .07em; font-size: 1.0625rem; }

/* ── reveals ── */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── small screens ── */
@media (max-width: 760px) {
  .bar { flex-direction: column; align-items: stretch; gap: .3rem; padding-top: 10px; padding-bottom: 4px; }
  .bar-mark img { width: 52px; }
  .bar-mark .bar-dots { width: auto; height: 29px; }
  .bar-nav { flex-wrap: nowrap; justify-content: flex-start; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; margin-right: -6px; padding-right: 12px; }
  .bar-nav::-webkit-scrollbar { display: none; }
  .bar-nav a { white-space: nowrap; }
  .hero { min-height: calc(100svh - 86px); }
  .lede { text-align: left; }
  .practice li { grid-template-columns: 1fr; gap: .1rem; }
  .index li { grid-template-columns: 2.25rem 1fr; grid-template-areas: "n t" "n k" "n s"; }
  .index .s { margin-top: .35rem; }
  .flip-ctrl { gap: .55rem; }
  .lb-prev, .lb-next { top: auto; bottom: var(--gutter); transform: none; }
  .lightbox img { max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100dvh - 180px); }
  .morph-ctrl { flex-direction: column; align-items: stretch; }
  .morph-thumbs button { width: 64px; }
  .morph-play { align-self: center; }
  .spectrum { width: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dots, .heart { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .plate button { transition: none; }
}
.lab-feature em { font-style: normal; color: var(--cream-2); }
.lab-feature:hover em { color: var(--cream); }

/* ── the trainer window (learning-lab/prototrak): near full screen, the site's bar above it ── */
.sim-page { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); } /* minmax: the one-line nav would otherwise widen the grid past the phone */
.sim-bar { position: relative; }
.sim-left { display: flex; align-items: center; gap: 1rem; }
.sim-back { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--cream-3); border-radius: 50%; color: var(--cream); transition: background .25s, color .25s; }
.sim-back:hover { background: var(--cream); color: var(--ink); }
.sim-back svg { width: 18px; height: 18px; }
.sim-frame { position: relative; margin: 10px calc(10px + 6px) 10px 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #e8ecef; min-height: 0; }
.sim-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.sim-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.1rem; background: var(--ink); transition: opacity .7s ease, visibility 0s linear .7s; }
.sim-loading p { margin: 0; font-size: 1.0625rem; color: var(--cream-2); font-variant-caps: all-small-caps; letter-spacing: .07em; }
.sim-frame.is-ready .sim-loading { opacity: 0; visibility: hidden; }
.sim-full { font-size: .9375rem; padding: .4em .9em .48em; } /* in the bar, so it never covers the trainer's own controls */
@media (max-width: 760px) { .sim-full { display: none; } }
.sim-frame:fullscreen { margin: 0; border: 0; border-radius: 0; }
@media (max-width: 760px) { .sim-frame { margin: 6px 10px 6px 6px; border-radius: 10px; } .sim-back { width: 32px; height: 32px; } }