@font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Black.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --ink:#000; --tile:#121418; --tile-hi:#1C1F25; --rule:#2A2E35; --paper:#F4F1EA; --dim:#A3A8AE; --amber:#FFB000; --down:#FF4D4D; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); font-family: Vazirmatn, Tahoma, sans-serif; }
body { background-image: radial-gradient(var(--tile-hi) 1px, transparent 1.2px); background-size: 14px 14px; min-height: 100vh; }
.sheet { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.top { display: flex; justify-content: space-between; border-top: 4px solid var(--amber); padding-top: 12px; }
.stamp { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); direction: ltr; unicode-bidi: isolate; }
.stamp.dim { color: var(--dim); }
.hero { border: 1px solid var(--rule); background: var(--ink); padding: 28px 24px; margin-top: 20px; }
h1 { margin: 0 0 8px; font-weight: 900; font-size: clamp(28px, 6vw, 40px); }
.lead { margin: 0; color: var(--dim); line-height: 1.8; }
.flaps { display: flex; gap: 6px; direction: ltr; margin-top: 22px; }
.flaps b { display: grid; place-items: center; width: 52px; height: 72px; font: 900 44px/1 Vazirmatn, sans-serif; color: var(--amber);
  background: linear-gradient(var(--tile-hi) 50%, var(--tile) 50%); position: relative; animation: flip .5s cubic-bezier(.3,1.4,.5,1) both; }
.flaps b:nth-child(even) { width: 20px; background: none; color: var(--dim); }
.flaps b::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--ink); }
.flaps b:nth-child(even)::after { display: none; }
.flaps b:nth-child(2) { animation-delay: .08s } .flaps b:nth-child(3) { animation-delay: .16s }
.flaps b:nth-child(4) { animation-delay: .24s } .flaps b:nth-child(5) { animation-delay: .32s }
@keyframes flip { from { transform: perspective(200px) rotateX(90deg); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .flaps b { animation: none } }
.install { margin: 20px 0; }
.btn-amber { width: 100%; padding: 18px; border: 0; border-radius: 0; background: var(--amber); color: var(--ink); font: 900 20px Vazirmatn, sans-serif; cursor: pointer; }
.btn-amber:hover { filter: brightness(1.08); }
.btn-amber:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.note { display: block; border: 1px solid var(--rule); padding: 16px; line-height: 1.9; background: var(--tile); }
.note.bad { border-color: var(--down); }
.note .stamp { display: block; color: var(--down); margin-bottom: 4px; }
.steps { list-style: none; padding: 0; margin: 0; border: 1px solid var(--rule); }
.steps li { display: flex; gap: 16px; padding: 18px; border-top: 1px solid var(--rule); background: var(--ink); line-height: 1.9; }
.steps li:first-child { border-top: 0; }
.steps .n { font: 700 22px "JetBrains Mono", monospace; color: var(--amber); min-width: 36px; }
.steps b { display: block; font-weight: 800; }
.foot { color: var(--dim); line-height: 1.9; margin-top: 18px; }