@font-face {
  font-family: "Concept Latin";
  src: url("fonts/Figtree-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Concept Arabic";
  src: url("fonts/NotoSansArabic-wght.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
:root {
  --bg: #16110e;
  --surface: #201915;
  --line: #473a2f;
  --line2: #8f7d69;
  --text: #f5ecdc;
  --muted: #c4b39d;
  --accent: #c9e16b;
  --on-accent: #1b2208;
  --focus: #fff3d1;
  --ff: "Concept Latin", "Concept Arabic", system-ui, sans-serif;
}
/* Nshoof preview shell. Logical properties only; the one forced left-to-right box is the computer canvas (.fit), shown at its drawn size and panned. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: var(--ff); font-size: 16px; line-height: 1.5;
  display: flex; flex-direction: column; block-size: 100vh; block-size: 100dvh; overflow: hidden;
  padding-block-start: env(safe-area-inset-top);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.top { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-block-end: 1px solid var(--line); }
.badge { flex: 1; min-inline-size: 0; margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.view { flex: 1; min-block-size: 0; position: relative; }
.hint { flex: none; margin: 0; padding: 4px 12px; border-block-end: 1px solid var(--line); font-size: 13px; line-height: 1.4; text-align: center; color: var(--muted); }

.pill {
  min-inline-size: 44px; min-block-size: 44px; padding-inline: 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: transparent; color: var(--text); font: inherit; font-size: 15px;
}
.pill.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.pill.big { min-block-size: 52px; padding-inline: 40px; font-size: 17px; }
.pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.top .pill { flex: none; font-size: 14px; }

.intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.intro h1 { margin: 0; font-size: 40px; line-height: 1.2; }
.intro p { margin: 0; max-inline-size: 22em; color: var(--muted); }
.mark { border-radius: 22%; }

.stage { position: absolute; inset: 0; background: var(--bg); }
#fitbox { position: absolute; inset: 0; }
#frame { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 100%; border: 0; background: var(--bg); }
.stage.fit { overflow: auto; direction: ltr; overscroll-behavior: contain; }
.stage.fit #fitbox { position: relative; inset: auto; }
.stage.fit #frame { transform-origin: 0 0; }

.bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 12px; padding-block-end: max(8px, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); }
.bar #back { justify-self: start; }
.bar #next { justify-self: end; }

.toast { position: absolute; inset-inline: 16px; inset-block-end: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line2); font-size: 14px; text-align: center; opacity: 0; pointer-events: none; transition: opacity 160ms; }
.toast.on { opacity: 1; }

dialog { color: var(--text); background: var(--surface); border: 1px solid var(--line2); border-radius: 16px; padding: 16px; max-inline-size: 92vw; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.jumpgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-block-end: 12px; }
.jumpgrid .pill { padding-inline: 0; }
.jumpgrid .pill[aria-current="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
dialog > #jumpclose { inline-size: 100%; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }