:root {
  --paper: #f5f1e8;
  --paper-2: #ece6d9;
  --ink: #1a1712;
  --soft: #6b6457;
  --faint: #a59d8e;
  --gold: #a8854f;
  --line: #ddd5c4;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.9; -webkit-font-smoothing: antialiased; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .34 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.stage { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem clamp(1.25rem, 5vw, 3.5rem); }
.top a { text-decoration: none; color: var(--ink); }
.mono-seal { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--gold); transition: box-shadow 300ms, transform 300ms var(--ease); }
.mono-seal .mark { width: 24px; height: 24px; color: var(--ink); }
.mono-seal:hover { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 5px rgba(168, 133, 79, 0.1); transform: translateY(-2px); }
.top-end { display: flex; align-items: center; gap: 0.6rem; }
.xbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 250ms, color 250ms, box-shadow 250ms; }
.xbtn:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.lang { display: flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); direction: ltr; }
.lang a { min-width: 38px; height: 34px; padding: 0 0.7rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 500; color: var(--soft); transition: background-color 250ms, color 250ms; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="page"] { background: var(--ink); color: var(--paper); }

.seal { align-self: center; justify-self: center; display: grid; justify-items: center; text-align: center; padding: 0 1.25rem 4vh; width: 100%; }
.sig { width: min(680px, 88vw); height: auto; overflow: visible; }
.sig path { fill: var(--ink); }
.rule { width: 72px; height: 1px; background: var(--gold); margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.latin { margin-top: 1.4rem; font-weight: 500; font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.95rem); letter-spacing: 0.42em; text-transform: uppercase; color: var(--soft); direction: ltr; padding-inline-start: 0.42em; }
.en .latin { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); letter-spacing: 0.32em; color: var(--ink); }
.role { margin-top: 1.1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 0.9rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: #3c372e; }
.role .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.role a { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; padding: 0.2rem 0.7rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 250ms, background-color 250ms; }
.role a:hover { box-shadow: inset 0 0 0 1px var(--gold); background: rgba(168, 133, 79, 0.06); }
.role a img { height: 16px; width: auto; display: block; }

.down { justify-self: center; margin-bottom: 2rem; color: var(--faint); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.2em; display: grid; justify-items: center; gap: 0.6rem; }
.down span { width: 1px; height: 40px; background: var(--gold); transform-origin: top; animation: drop 2.4s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.more { width: min(1060px, 100% - 2.5rem); margin-inline: auto; padding-block: clamp(3.5rem, 9vh, 6rem) 3rem; display: grid; grid-template-columns: minmax(0, 1fr); }
.bio { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); line-height: 1.95; }
.bio em { font-style: normal; color: var(--gold); }
.points { margin-top: 2rem; display: grid; gap: 1.15rem; }
.points li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline; }
.points b { font-family: var(--mono); font-weight: 500; font-size: 0.78rem; color: var(--gold); }
.points h3 { font-weight: 600; font-size: 1.0625rem; }
.points p { color: var(--soft); font-size: 0.95rem; line-height: 1.75; }
.points a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }

.offers { margin-top: clamp(2.5rem, 6vw, 3.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 3.5rem); }
.offer small { display: block; font-family: var(--mono); color: var(--gold); font-size: 0.75rem; letter-spacing: 0.15em; margin-bottom: 0.7rem; }
.offer h3 { font-weight: 600; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.4; }
.offer p { margin-top: 0.6rem; color: var(--soft); }

.craft { margin-top: clamp(3.5rem, 8vw, 5rem); padding-top: clamp(2.5rem, 6vw, 3.5rem); border-top: 1px solid var(--line); }
.craft-head { display: grid; gap: 0.35rem; margin-bottom: 2rem; }
.craft-head h2 { font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.craft-head p { color: var(--soft); font-size: 0.95rem; }
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }

.paper { position: relative; }
.sketch { display: block; width: 100%; height: auto; }
.sketch .pen { fill: none; stroke: #33312c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sketch .hand path { fill: #2f4a7a; stroke: #2f4a7a; stroke-width: 0.6; }
.sketch .hand.box path { fill: #33312c; stroke: #33312c; }
.sketch .hand.small path { fill: #6a7a99; stroke: #6a7a99; }
.sketch .flow circle { fill: #19c3b5; opacity: 0; transition: opacity 600ms; }
.sketch .flow circle.back { fill: #a8854f; }
.paper.real .flow circle { opacity: 1; }
.sketch .pentip { fill: #2f4a7a; opacity: 0; transition: opacity 300ms; }
.paper.writing .pentip { opacity: 1; }
.sketch .chip-ok { opacity: 0; transition: opacity 400ms; }
.sketch .chip-bad { transition: opacity 400ms; }
.paper.renewed .chip-ok { opacity: 1; }
.paper.renewed .chip-bad { opacity: 0; }
.sketch .row.target { transition: fill 300ms; }
.paper.pressed .row.target { fill: #2c2c28; }
.sketch .toast { opacity: 0; transform: translateY(-14px); transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
.paper.renewed .toast { opacity: 1; transform: none; }
.sketch .toast-t { fill: #052b17; font-size: 8.5px; font-weight: 600; }
.sketch .finger { opacity: 0; transition: transform 700ms cubic-bezier(0.45, 0, 0.2, 1), opacity 300ms; }
.paper.pointing .finger { opacity: 1; }
.sketch .finger .tap { opacity: 0; transform-box: fill-box; transform-origin: center; }
.paper.tap .finger .tap { animation: tap 450ms ease-out; }
@keyframes tap { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
.sketch .ui { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 8.5px; fill: #ece6d9; }
.sketch .ui.strong { font-size: 10px; font-weight: 600; }
.sketch .ui.dim { fill: #8a857b; font-size: 7.5px; }
.sketch .ui.chip { font-size: 7px; font-weight: 600; }
.sketch .ui.btn { fill: #141413; font-size: 9.5px; font-weight: 600; }
.sketch .real { opacity: 0; }
.paper.real .real { opacity: 1; }

.shell { border-radius: 14px; background: #171511; color: #ece6d9; overflow: hidden; direction: ltr; box-shadow: 0 30px 60px -36px rgba(26, 23, 18, 0.55); }
.shell-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; background: #1f1c17; font-family: var(--mono); font-size: 0.72rem; color: #7d7568; }
.shell-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3a352d; }
.shell-bar b { font-weight: 400; margin-inline: auto; }
.shell-bar button { border: 0; background: transparent; color: #a59d8e; font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; width: 30px; height: 26px; display: grid; place-items: center; border-radius: 7px; transition: color 200ms, background-color 200ms; }
.shell-bar button:hover { color: #fff; background: #2a261f; }
.shell-body { padding: 1rem 1.15rem 1.25rem; height: 22rem; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; font-family: var(--mono); font-size: 0.8rem; line-height: 1.85; white-space: pre-wrap; word-break: break-word; }
.shell-body::-webkit-scrollbar { display: none; }
.shell-body .p { color: #d6b47c; }
.shell-body .out { color: #b9b1a3; }
.shell-body .hi { color: #f3ecdd; }
.shell-body .ok { color: #9fd3a8; }
.caret { display: inline-block; width: 0.55em; height: 1.05em; background: #d6b47c; vertical-align: -0.15em; margin-inline-start: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

footer { width: min(1060px, 100% - 2.5rem); margin-inline: auto; padding-block: 1.75rem 2.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--faint); font-size: 0.8125rem; }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .paper .pen { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-opacity: 0; }
  .paper.draw .pen { animation: pen 0.45s cubic-bezier(0.5, 0, 0.3, 1) forwards; animation-delay: var(--t); }
  .paper .hand path { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-opacity: 0; }
  .paper.draw .hand path { animation: pen 0.26s linear forwards, ink 0.45s ease forwards; animation-delay: var(--t), calc(var(--t) + 220ms); }
  .paper .real { opacity: 0; transform: translateY(14px) scale(0.94); transition: opacity 1000ms var(--ease), transform 1400ms cubic-bezier(0.2, 0.9, 0.25, 1.15), filter 1400ms var(--ease); }
  .paper.real .real { opacity: 1; transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 18px 18px rgba(26, 23, 18, 0.35)); }
  .paper .ink { transition: opacity 900ms var(--ease); }
  .paper.real .ink { opacity: 1; }
  .js .sig { clip-path: inset(0 0 0 100%); opacity: 0; filter: blur(6px); animation: reveal 1.8s cubic-bezier(0.65, 0, 0.25, 1) 0.25s forwards; }
  .js .rule { transform: scaleX(0); animation: grow 900ms var(--ease) 1.7s forwards; }
  .js .top { opacity: 0; animation: up 900ms var(--ease) 2.3s forwards; }
  .js .latin, .js .role, .js .down { opacity: 0; transform: translateY(10px); animation: up 1000ms var(--ease) forwards; }
  .js .latin { animation-delay: 1.9s; }
  .js .role { animation-delay: 2.1s; }
  .js .down { animation-delay: 2.6s; }
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--d, 0) * 100ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }
}
@keyframes reveal { 40% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; filter: blur(0); } }
@keyframes grow { to { transform: none; } }
@keyframes pen { from { stroke-dashoffset: 1; stroke-opacity: 1; } to { stroke-dashoffset: 0; stroke-opacity: 1; } }
@keyframes ink { to { fill-opacity: 1; } }
@keyframes up { to { opacity: 1; transform: none; } }
@keyframes ln-in { to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .offers, .craft-grid { grid-template-columns: minmax(0, 1fr); }
  .shell-body { height: 25rem; font-size: 0.74rem; }
  .latin { letter-spacing: 0.3em; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }