/* The Rassam site: the program's own violet, on its dark ground. One sheet for every page. */
:root {
  --bg: #0B0812; --panel: #15101F; --raised: #1E1730; --line: #2C2245; --edge: #3A2E5E;
  --text: #F2EDFB; --soft: #D0C6E8; --dim: #A79CC6; --faint: #7C6FA0;
  --accent: #A855F7; --accent-2: #6FA3F7; --pale: #D8C4FF; --ok: #5FD08D; --bad: #F08A8A;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --spring: cubic-bezier(0.3, 1.5, 0.5, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 'Segoe UI', system-ui, -apple-system, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.08; }
p { margin: 0; color: var(--soft); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }

/* ---------------- one page into the next ---------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.32s var(--ease) both leave; }
::view-transition-new(root) { animation: 0.5s var(--ease) both arrive; }
@keyframes leave { to { opacity: 0; transform: scale(0.985) translateY(-10px); filter: blur(6px); } }
@keyframes arrive { from { opacity: 0; transform: scale(1.015) translateY(14px); filter: blur(8px); } }
nav.top .brand img { view-transition-name: mark; }      /* (the one in the bar: a name is carried over by one thing only) */
nav.top { view-transition-name: bar; }
/* (a curtain for browsers that do not carry one page into the next themselves) */
.curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: linear-gradient(120deg, #1B1338, #3B1C6E 55%, #A855F7); transform: translateY(101%); transition: transform 0.42s var(--ease); }
.curtain.down { transform: none; }

/* ---------------- the bar ---------------- */
nav.top { position: fixed; top: 14px; left: 50%; z-index: 50; translate: -50% 0; display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 14px; border-radius: 18px;
          background: color-mix(in srgb, var(--panel), transparent 22%); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid color-mix(in srgb, var(--text), transparent 90%);
          box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45); transition: padding 0.3s var(--ease), background 0.3s; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-right: 14px; }
.brand img { width: 28px; height: 28px; border-radius: 8px; transition: transform 0.4s var(--spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.1); }
nav.top a.link { padding: 7px 12px; border-radius: 11px; color: var(--soft); font-size: 14.5px; transition: background 0.2s, color 0.2s; }
nav.top a.link:hover, nav.top a.link.on { background: color-mix(in srgb, var(--accent), transparent 82%); color: var(--text); }

/* ---------------- buttons ---------------- */
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border-radius: 14px; font-weight: 650; overflow: hidden;
          background: color-mix(in srgb, var(--pale), transparent 86%); border: 1px solid color-mix(in srgb, var(--pale), transparent 76%); transition: background 0.2s, box-shadow 0.3s; }
.button:hover { background: color-mix(in srgb, var(--pale), transparent 76%); }
.button.main { background: linear-gradient(120deg, var(--accent), #7C6CFF); border-color: transparent; color: #fff; box-shadow: 0 12px 34px color-mix(in srgb, var(--accent), transparent 55%); }
.button.main:hover { box-shadow: 0 16px 44px color-mix(in srgb, var(--accent), transparent 35%); }
.button.main::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.6s var(--ease); }
.button.main:hover::after { left: 130%; }
.button.small { height: 36px; padding: 0 15px; border-radius: 11px; font-size: 14px; }
.button:disabled, .button[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }

/* ---------------- the first screen ---------------- */
.hero { position: relative; min-height: 100vh; display: grid; align-items: center; padding: 130px 0 90px; overflow: hidden; }
.hero canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 10px; border-radius: 20px; font-size: 13px; font-weight: 650; color: var(--pale);
           background: color-mix(in srgb, var(--accent), transparent 84%); border: 1px solid color-mix(in srgb, var(--accent), transparent 68%); }
.spark { display: inline-block; width: 12px; height: 12px; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.hero h1 { font-size: clamp(44px, 6.4vw, 84px); font-weight: 800; margin: 20px 0 18px; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }   /* (room under the line for the tails of g and y, which the clip would cut) */
.hero h1 .line > span { display: inline-block; transform: translateY(110%); animation: rise 0.9s var(--ease) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.1s; }
.hero h1 .line:nth-child(3) > span { animation-delay: 0.2s; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--pale), var(--accent) 45%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 7s ease-in-out infinite alternate; }
@keyframes rise { to { transform: none; } }
@keyframes sheen { to { background-position: 100% 0; } }
.hero p.lead { font-size: 19px; max-width: 540px; opacity: 0; animation: fade 0.9s 0.35s var(--ease) forwards; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; opacity: 0; animation: fade 0.9s 0.5s var(--ease) forwards; }
.small-print { margin-top: 16px; font-size: 13px; color: var(--faint); opacity: 0; animation: fade 0.9s 0.65s var(--ease) forwards; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The program, as a small stage: its window put together from layers that fly in, tilting to the pointer. */
.stage { position: relative; perspective: 1400px; opacity: 0; animation: fade 1.1s 0.3s var(--ease) forwards; }
.window { position: relative; aspect-ratio: 16 / 11; border-radius: 18px; background: linear-gradient(180deg, #191329, #110D1C); border: 1px solid var(--edge); transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(7deg);
          box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 90px color-mix(in srgb, var(--accent), transparent 78%); transition: transform 0.25s ease-out; }
.window .bar { position: absolute; inset: 0 0 auto 0; height: 9%; display: flex; align-items: center; gap: 6px; padding: 0 3.5%; border-bottom: 1px solid var(--line); }
.window .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--edge); }
.window .tools { position: absolute; left: 0; top: 9%; bottom: 0; width: 7%; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 7%; padding: 12% 22%; }
.window .tools i { aspect-ratio: 1; border-radius: 5px; background: var(--raised); }
.window .tools i:nth-child(2) { background: var(--pale); }
.window .side { position: absolute; right: 0; top: 9%; bottom: 0; width: 24%; border-left: 1px solid var(--line); padding: 4% 3%; display: grid; align-content: start; gap: 5%; }
.window .side i { height: 9px; border-radius: 5px; background: var(--raised); }
.window .side i.row { height: 26px; border-radius: 7px; background: var(--raised); display: block; }
.window .side i.row.on { background: color-mix(in srgb, var(--accent), transparent 62%); }
.canvas { position: absolute; left: 12%; right: 29%; top: 20%; bottom: 14%; border-radius: 6px; transform-style: preserve-3d;
          background: repeating-conic-gradient(#221B36 0 25%, #1A1429 0 50%) 0 0 / 22px 22px; }
.canvas .layer { position: absolute; inset: 0; border-radius: 6px; opacity: 0; animation: layer 1s var(--ease) forwards; }
.canvas .l1 { background: linear-gradient(135deg, #2B1B66, #6B2A7A 60%, #F0834F); animation-delay: 0.7s; transform: translateZ(18px); }
.canvas .l2 { inset: 46% 0 0 0; background: radial-gradient(120% 140% at 30% 120%, rgba(124, 108, 255, 0.85), transparent 60%), radial-gradient(100% 120% at 80% 130%, rgba(168, 85, 247, 0.8), transparent 60%); animation-delay: 0.95s; transform: translateZ(40px); }
.canvas .l3 { inset: 22% 30% 34% 30%; border-radius: 22%; background: linear-gradient(140deg, #B79BFF, #6FA3F7); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); animation-delay: 1.2s; transform: translateZ(70px); }
.canvas .l4 { inset: auto 12% 12% 12%; height: 9%; border-radius: 6px; background: rgba(255, 255, 255, 0.9); animation-delay: 1.4s; transform: translateZ(96px); }
@keyframes layer { from { opacity: 0; translate: 0 -60px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: none; } }
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 13px; font-size: 13px; font-weight: 650; background: color-mix(in srgb, var(--panel), transparent 12%); backdrop-filter: blur(10px); border: 1px solid var(--edge);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); animation: float 6s ease-in-out infinite; }
.chip.one { left: -6%; top: 16%; }
.chip.two { right: -4%; bottom: 20%; animation-delay: -2s; }
.chip.three { left: 10%; bottom: -5%; animation-delay: -4s; }
.chip b { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
@keyframes float { 50% { transform: translateY(-10px); } }

/* ---------------- sections ---------------- */
section { position: relative; padding: 120px 0; }
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
h2 { font-size: clamp(32px, 4.2vw, 54px); font-weight: 780; margin: 12px 0 16px; }
.sub { font-size: 18px; max-width: 620px; }

/* The things it does: cards that tilt to the pointer, each with a small moving picture of its own. */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 54px; }
.card { position: relative; grid-column: span 4; min-height: 300px; padding: 26px; border-radius: 22px; background: linear-gradient(180deg, var(--raised), var(--panel)); border: 1px solid var(--line); overflow: hidden; transform-style: preserve-3d;
        transition: transform 0.2s ease-out, border-color 0.3s; }
.card.wide { grid-column: span 8; }
.card:hover { border-color: var(--edge); }
.card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none; background: radial-gradient(360px 260px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent), transparent 80%), transparent 70%); }
.card:hover::before { opacity: 1; }
.card h3 { font-size: 22px; font-weight: 720; margin-bottom: 8px; position: relative; }
.card p { font-size: 15px; position: relative; max-width: 420px; }
.card .art { position: absolute; inset: auto 0 0 0; height: 56%; pointer-events: none; }
.card canvas.art { inset: 0; width: 100%; height: 100%; }      /* (the whole card: what it draws stands in the card's own middle) */
/* (pixel art: a sprite drawn a pixel at a time) */
.pixels { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: 148px; position: absolute; right: 26px; bottom: 26px; }
.pixels i { aspect-ratio: 1; border-radius: 3px; background: var(--c, transparent); transform: scale(0); }
.card.seen .pixels i { animation: pop 0.4s var(--spring) forwards; animation-delay: calc(var(--n) * 22ms + 200ms); }
@keyframes pop { to { transform: none; } }
/* (animation: frames in a strip, the playhead passing over them) */
.strip { position: absolute; left: 26px; right: 26px; bottom: 30px; display: flex; gap: 8px; }
.strip i { flex: 1; aspect-ratio: 1; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); display: grid; place-items: center; }
.strip i::after { content: ''; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--accent-2); transform: translateY(var(--y)) scale(var(--s, 1)); }
.strip::after { content: ''; position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--pale); border-radius: 2px; box-shadow: 0 0 14px var(--accent); animation: play 3s linear infinite; }
@keyframes play { from { left: 0; } to { left: 100%; } }
/* (the compositor: nodes, and light running along their wires) */
.nodes { position: absolute; inset: auto 0 0 0; height: 62%; width: 100%; }
.nodes path { fill: none; stroke: var(--edge); stroke-width: 2; }
.nodes path.flow { stroke: var(--accent); stroke-dasharray: 10 16; animation: flow 1.6s linear infinite; }
.nodes rect { fill: var(--raised); stroke: var(--edge); }
.nodes rect.cap { fill: color-mix(in srgb, var(--accent), var(--raised) 60%); stroke: none; }
.nodes circle { fill: var(--pale); }
@keyframes flow { to { stroke-dashoffset: -52; } }
/* (plugins: badges that drift) */
.badges { position: absolute; right: 22px; bottom: 22px; left: 22px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.badges i { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(140deg, color-mix(in srgb, var(--c), #fff 22%), color-mix(in srgb, var(--c), #000 26%)); box-shadow: 0 10px 24px color-mix(in srgb, var(--c), transparent 62%); animation: float 5s ease-in-out infinite; animation-delay: calc(var(--n) * -0.8s); }

/* What it writes: a row of kinds of file. */
.kinds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.kinds span { padding: 9px 16px; border-radius: 12px; font-weight: 650; font-size: 14.5px; background: var(--panel); border: 1px solid var(--line); transition: transform 0.3s var(--spring), border-color 0.2s, color 0.2s; }
.kinds span:hover { transform: translateY(-4px) rotate(-2deg); border-color: var(--accent); color: var(--pale); }

/* The last word. */
.closing { text-align: center; padding: 130px 0 150px; overflow: hidden; }
.closing::before { content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent), transparent 74%), transparent); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.15); opacity: 0.7; } }
.closing > * { position: relative; }
.closing .actions { justify-content: center; opacity: 1; animation: none; }
footer { border-top: 1px solid var(--line); padding: 30px 0 44px; color: var(--faint); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
footer a:hover { color: var(--text); }

/* ---------------- signing in, and buying ---------------- */
.page { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 120px 0 70px; overflow: hidden; }
.page canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.sheet { position: relative; z-index: 2; width: min(440px, calc(100% - 40px)); padding: 32px; border-radius: 24px; background: color-mix(in srgb, var(--panel), transparent 10%); backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--edge);
         box-shadow: 0 40px 110px rgba(0, 0, 0, 0.55); animation: fade 0.8s var(--ease) both; }
.sheet h1 { font-size: 30px; font-weight: 780; }
.sheet > p { margin: 8px 0 22px; font-size: 15px; }
.switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 13px; background: #0A0711; margin-bottom: 20px; }
.switch button { position: relative; z-index: 1; height: 38px; border-radius: 10px; font-weight: 650; color: var(--dim); transition: color 0.25s; }
.switch button.on { color: var(--text); }
.switch::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: color-mix(in srgb, var(--accent), transparent 68%); transition: transform 0.4s var(--spring); }
.switch.second::before { transform: translateX(100%); }
label.field { display: block; margin-bottom: 14px; }
label.field span { display: block; font-size: 13px; font-weight: 600; color: var(--dim); margin-bottom: 6px; }
label.field input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; font: inherit; color: var(--text); background: #0A0711; border: 1px solid var(--line); outline: 0; transition: border-color 0.2s, box-shadow 0.2s; }
label.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent), transparent 80%); }
.sheet .button { width: 100%; margin-top: 6px; }
.said { min-height: 22px; margin-top: 12px; font-size: 14px; color: var(--dim); }
.said.bad { color: var(--bad); }
.said.ok { color: var(--ok); }
.note { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; color: var(--soft); background: color-mix(in srgb, var(--accent-2), transparent 88%); border: 1px solid color-mix(in srgb, var(--accent-2), transparent 70%); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: turn 0.7s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

.plans { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(900px, calc(100% - 40px)); margin-top: 36px; }
.plan { position: relative; padding: 30px; border-radius: 24px; background: color-mix(in srgb, var(--panel), transparent 8%); backdrop-filter: blur(18px); border: 1px solid var(--line); transition: transform 0.25s ease-out, border-color 0.3s; transform-style: preserve-3d; }
.plan.pro { border-color: transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, conic-gradient(from var(--turn, 0deg), var(--accent), var(--accent-2), var(--pale), var(--accent)) border-box; border: 1.5px solid transparent; animation: around 6s linear infinite; }
@property --turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes around { to { --turn: 360deg; } }
.plan h3 { font-size: 24px; font-weight: 760; }
.plan .price { margin: 10px 0 18px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--dim); letter-spacing: 0; margin-left: 6px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--soft); opacity: 0; transform: translateX(-10px); animation: fade-in 0.5s var(--ease) forwards; animation-delay: calc(var(--n) * 60ms + 300ms); }
.plan li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: color-mix(in srgb, var(--accent), transparent 70%) center / 10px no-repeat
                   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@keyframes fade-in { to { opacity: 1; transform: none; } }
.plan .button { width: 100%; }
.tag { position: absolute; top: 18px; right: 18px; padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--accent), #7C6CFF); }
.head { position: relative; z-index: 2; text-align: center; width: min(700px, calc(100% - 40px)); }
.head h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 800; }
.head p { margin-top: 12px; font-size: 18px; }
.page.tall { place-items: start center; align-content: start; }
.who { position: relative; z-index: 2; margin-top: 18px; font-size: 14px; color: var(--dim); text-align: center; }
.who a { color: var(--pale); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .stage { order: -1; max-width: 520px; margin: 0 auto; }
  .card, .card.wide { grid-column: span 12; }
  .plans { grid-template-columns: 1fr; }
  nav.top a.link.less, nav.top .button.editor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .hero h1 .line > span { transform: none; }
  html { scroll-behavior: auto; }
}

/* ================================================================ the quieter parts
   Between the lively sections the page breathes: plain figures, steps on a line, questions under thin rules. No
   boxes, no glow: type, space and one hairline. */
.wrap.narrow { width: min(820px, calc(100% - 48px)); }

.figures { display: grid; grid-template-columns: repeat(4, 1fr); padding: 54px 0 62px; }
.figures div { padding: 0 26px; border-left: 1px solid var(--line); }
.figures div:first-child { border-left: 0; padding-left: 0; }
.figures strong { display: block; font-size: clamp(38px, 5vw, 60px); font-weight: 780; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.figures span { display: block; margin-top: 10px; color: var(--dim); font-size: 15px; }

section.clean { padding: 130px 0; }
section.clean + section.clean { padding-top: 40px; }
.steps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: step; }
.steps li { position: relative; padding: 34px 34px 0 0; border-top: 1px solid var(--line); }
.steps li::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--accent); transition: width 0.9s var(--ease) 0.2s; }
.steps li.seen::before { width: 100%; }
.steps i { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
.steps h3 { font-size: 26px; font-weight: 740; margin: 14px 0 10px; }
.steps p { font-size: 15.5px; max-width: 300px; }

section.split .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; color: var(--soft); font-size: 15.5px; }
.ticks li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; border: 1.5px solid var(--accent); background: center / 10px no-repeat
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5.2' fill='none' stroke='%23D8C4FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
pre.code { margin: 0; padding: 26px 28px; border-radius: 18px; background: #0A0711; border: 1px solid var(--line); font: 14px/1.75 'Cascadia Code', Consolas, ui-monospace, monospace; color: var(--soft); overflow-x: auto; }
pre.code .c { color: var(--faint); } pre.code .k { color: #C79BFF; } pre.code .s { color: #9FE0B4; } pre.code .n { color: #F7C56B; } pre.code .t { color: #8FC2FF; } pre.code .f { color: #8FC2FF; }

.asked { margin-top: 44px; border-top: 1px solid var(--line); }
.asked details { border-bottom: 1px solid var(--line); }
.asked summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 19px; font-weight: 650; cursor: pointer; list-style: none; transition: color 0.2s; }
.asked summary::-webkit-details-marker { display: none; }
.asked summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); transform: rotate(45deg); transition: transform 0.35s var(--spring), border-color 0.2s; margin-right: 6px; }
.asked details[open] summary::after { transform: rotate(-135deg); border-color: var(--accent); }
.asked summary:hover { color: var(--pale); }
.asked details p { padding: 0 60px 26px 0; font-size: 16px; animation: fade 0.45s var(--ease); }

footer { padding: 64px 0 40px; }
footer .wrap.cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; align-items: start; justify-content: initial; }
footer .cols p { margin-top: 12px; font-size: 14.5px; color: var(--dim); max-width: 280px; }
footer h4 { margin: 4px 0 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
footer .cols a:not(.brand) { display: block; padding: 5px 0; color: var(--soft); font-size: 15px; }
footer .cols a.brand { color: var(--text); margin: 0; }
footer .wrap.fine { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; }

/* (a little more air and restraint in the lively parts, too) */
.card { border-radius: 24px; padding: 30px; }
.card h3 { font-size: 23px; }
.grid { gap: 18px; margin-top: 60px; }
.sub { color: var(--dim); }

@media (max-width: 900px) {
  .figures { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .figures div:nth-child(3) { border-left: 0; padding-left: 0; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  section.split .wrap { grid-template-columns: 1fr; gap: 40px; }
  footer .wrap.cols { grid-template-columns: 1fr 1fr; }
}

.kinds span.more { background: none; border-style: dashed; color: var(--dim); font-weight: 500; }
.kinds span.more:hover { transform: none; color: var(--pale); }

/* The plugins: each a picture of what it makes, its badge and a few lines. */
.plugins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 60px; }
.plugin { position: relative; border-radius: 24px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transform-style: preserve-3d; transition: transform 0.2s ease-out, border-color 0.3s, box-shadow 0.3s; }
.plugin:hover { border-color: var(--edge); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.plugin .shot { aspect-ratio: 16 / 9; overflow: hidden; background: #0A0711; }
.plugin .shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.plugin:hover .shot img { transform: scale(1.06); }
.plugin .about { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 22px 24px 26px; }
.plugin .badge { width: 46px; height: 46px; border-radius: 13px; margin-top: -46px; background: linear-gradient(140deg, color-mix(in srgb, var(--c), #fff 22%), color-mix(in srgb, var(--c), #000 26%));
                 box-shadow: 0 10px 26px color-mix(in srgb, var(--c), transparent 55%), 0 0 0 4px var(--panel); }
.plugin .about > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plugin h3 { font-size: 21px; font-weight: 740; }
.plugin .where { padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; color: var(--dim); border: 1px solid var(--line); white-space: nowrap; }
.plugin .where.in { color: var(--pale); border-color: color-mix(in srgb, var(--accent), transparent 55%); background: color-mix(in srgb, var(--accent), transparent 86%); }
.plugin p { grid-column: 1 / -1; margin-top: 6px; font-size: 14.5px; color: var(--dim); }
@media (max-width: 900px) { .plugins { grid-template-columns: 1fr; } }

section[id], header[id] { scroll-margin-top: 70px; }

/* ================================================================ signing in, and pricing: the fuller pages */
/* Signing in: what the account is for at one side, the form at the other. */
.page.door { grid-template-columns: minmax(0, 1fr) auto; gap: 70px; place-items: center; padding-inline: max(24px, calc((100% - 1060px) / 2)); }
.why { position: relative; z-index: 2; justify-self: start; max-width: 480px; animation: fade 0.8s var(--ease) both; }
.why h1 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; margin: 20px 0 30px; }
.gains { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.gains li { display: flex; gap: 14px; align-items: flex-start; opacity: 0; animation: fade 0.7s var(--ease) forwards; }
.gains li:nth-child(1) { animation-delay: 0.15s; } .gains li:nth-child(2) { animation-delay: 0.25s; } .gains li:nth-child(3) { animation-delay: 0.35s; } .gains li:nth-child(4) { animation-delay: 0.45s; }
.gains i { flex: none; width: 34px; height: 34px; border-radius: 10px; margin-top: 2px; background: linear-gradient(140deg, color-mix(in srgb, var(--c), #fff 22%), color-mix(in srgb, var(--c), #000 26%)); box-shadow: 0 8px 20px color-mix(in srgb, var(--c), transparent 62%); }
.gains strong { display: block; font-size: 16px; font-weight: 680; }
.gains span { color: var(--dim); font-size: 14.5px; }
.page.door .sheet { width: 420px; max-width: 100%; }
.secret { position: relative; display: block !important; margin: 0 !important; }
.secret input { padding-right: 64px !important; }
.secret button { position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; font-weight: 650; color: var(--dim); transition: color 0.2s, background 0.2s; }
.secret button:hover { color: var(--text); background: color-mix(in srgb, var(--accent), transparent 82%); }
.strength { display: flex; align-items: center; gap: 5px; margin: -4px 0 14px; }
.strength i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background 0.3s; }
.strength span { flex: none; width: 70px; text-align: right; font-size: 12px; color: var(--dim); }
.strength[data-score='1'] i:nth-child(-n+1) { background: var(--bad); }
.strength[data-score='2'] i:nth-child(-n+2) { background: #E8B454; }
.strength[data-score='3'] i:nth-child(-n+3) { background: #9AD06A; }
.strength[data-score='4'] i:nth-child(-n+4) { background: var(--ok); }

/* Pricing: under the two plans, everything side by side under thin rules; then a few answers. */
.plan { border-radius: 26px; padding: 32px; }
.plan .price { font-size: 40px; }
.compare { position: relative; z-index: 2; width: min(900px, calc(100% - 40px)); padding: 110px 0 30px; }
.compare h2 { text-align: center; margin-bottom: 40px; }
.table h4 { margin: 34px 0 4px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.table .row { display: grid; grid-template-columns: 1fr 90px 90px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--soft); transition: background 0.2s; }
.table .row:hover:not(.top-row) { background: color-mix(in srgb, var(--accent), transparent 94%); }
.table .row.top-row { position: sticky; top: 70px; z-index: 1; border-bottom-color: var(--edge); font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--bg), transparent 12%); backdrop-filter: blur(10px); }
.table .row.top-row span:not(:first-child) { text-align: center; }
.table .row i { justify-self: center; width: 20px; height: 20px; border-radius: 50%; }
.table .row i:not(.yes) { width: 10px; height: 2px; border-radius: 1px; background: var(--edge); }
.table .row i.yes { background: color-mix(in srgb, var(--accent), transparent 70%) center / 11px no-repeat
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.asked.wide { position: relative; z-index: 2; width: min(900px, calc(100% - 40px)); padding: 30px 0 60px; margin-top: 30px; }
.page.tall { padding-bottom: 40px; }
@media (max-width: 900px) {
  .page.door { grid-template-columns: 1fr; gap: 34px; }
  .why { justify-self: center; }
  .table .row { grid-template-columns: 1fr 56px 56px; font-size: 14.5px; }
}

.strength[hidden] { display: none; }
label.field[hidden], .switch[hidden] { display: none; }
/* The ways from one step of signing in to another, under the button. */
.ways { margin-top: 4px; font-size: 13.5px; color: var(--dim); text-align: center; }
.ways:empty { display: none; }
.ways a { color: var(--soft); text-decoration: underline; }
.ways a:hover { color: var(--text); }

/* What it does: each card says its kind in a small label, then a line of its own, a few words more, and a few bits. */
.card .label { position: relative; display: inline-block; margin-bottom: 14px; padding: 3px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pale);
               background: color-mix(in srgb, var(--accent), transparent 86%); border: 1px solid color-mix(in srgb, var(--accent), transparent 70%); }
.card h3 { font-size: 24px; margin-bottom: 10px; }
.card p { color: var(--dim); max-width: 400px; }
.card.wide p { max-width: 440px; }
.bits { position: relative; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; max-width: 420px; }
.bits li { padding: 4px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--soft); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.card { min-height: 330px; }
.card .art.stroke { height: 46%; width: 100%; }
.stroke path { fill: none; stroke: url(#ink); stroke: var(--pale); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.stroke path.thin { stroke: var(--accent-2); stroke-width: 4; opacity: 0.8; }
.card.seen .stroke path { animation: ink 1.6s var(--ease) 0.3s forwards; }
.card.seen .stroke path.thin { animation-delay: 1.1s; }
@keyframes ink { to { stroke-dashoffset: 0; } }
.card .strip { left: auto; right: 30px; width: min(46%, 340px); bottom: 34px; }
.card.wide .nodes { height: 58%; }

/* (in a wide card the words keep to the left, and its picture to the right: neither lies on the other) */
.card.wide p, .card.wide .bits { max-width: 42%; }
.card.wide .nodes { left: auto; right: 0; width: 56%; height: 70%; }
.card.wide svg.art { left: auto; right: 0; width: 52%; height: 78%; }
@media (max-width: 900px) { .card.wide p, .card.wide .bits { max-width: none; } .card.wide .nodes, .card.wide svg.art { width: 100%; height: 50%; opacity: 0.5; } }

.card.wide .nodes { width: 52%; height: 100%; inset: 0 18px 0 auto; }

/* A wide card is two columns: its words in the first, its picture in the second. The picture has a place of its own,
   so it cannot lie on the words at any width (it was laid over the card before, and did). */
.card.wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 28px; align-content: start; }
.card.wide > .label, .card.wide > h3, .card.wide > p, .card.wide > .bits { grid-column: 1; max-width: none; }
.card.wide > .label { justify-self: start; }
.card.wide > .art, .card.wide > .nodes, .card.wide > .strip { grid-column: 2; grid-row: 1 / span 8; position: relative; inset: auto; left: auto; right: auto; bottom: auto; width: 100%; height: 100%; min-height: 200px; align-self: stretch; }
.card.wide > .strip { height: auto; min-height: 0; align-self: center; }
.card.wide > svg.art { margin: -30px -30px -30px 0; width: calc(100% + 30px); height: calc(100% + 60px); }      /* (the layers run off the card's corner) */
@media (max-width: 900px) {
  .card.wide { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .card.wide > .art, .card.wide > .nodes, .card.wide > .strip { grid-column: 1; grid-row: auto; height: 170px; min-height: 0; opacity: 1; }
  .card.wide > .strip { height: auto; }
  .card.wide > svg.art { margin: 0 -30px -30px; width: calc(100% + 60px); height: 170px; }
}

/* (a wide card's rows: its label, its line, its words, and its bits, which take what room is left. Its picture runs
   beside all four and stands in the middle of the card's own height, not at the top of the words) */
.card.wide { grid-template-rows: auto auto auto 1fr; align-content: stretch; }
.card.wide > .bits { align-self: start; }
.card.wide > .art, .card.wide > .nodes, .card.wide > .strip { grid-row: 1 / -1; align-self: center; }
.card.wide > .nodes { height: auto; aspect-ratio: 590 / 180; min-height: 0; inset: auto; }
.card.wide > svg.art { align-self: stretch; }

/* (the plugins' pictures: a card that is flat, so that its picture is drawn in every browser. A card kept in 3D with its
   overflow hidden and a filter on its way in is one some browsers leave blank) */
.plugin { transform-style: flat; }
.plugin .shot img { height: 100%; aspect-ratio: 16 / 9; }

/* ================================================================ the bar, finer
   A lit hairline for its edge; a highlight that glides from link to link; the account and the way to the program set
   apart by a thin rule; and nothing in it ever breaks onto a second line. */
nav.top { gap: 4px; padding: 6px 6px 6px 12px; border: 0; border-radius: 20px; white-space: nowrap; max-width: calc(100% - 20px);
          background: color-mix(in srgb, var(--panel), transparent 26%); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--accent), transparent 92%); }
nav.top::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
                  background: linear-gradient(120deg, color-mix(in srgb, var(--pale), transparent 45%), color-mix(in srgb, var(--text), transparent 88%) 30%, color-mix(in srgb, var(--text), transparent 90%) 70%, color-mix(in srgb, var(--accent-2), transparent 50%));
                  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
nav.top .brand { margin-right: 6px; }
nav.top .brand img { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.16); }
nav.top .links { position: relative; display: flex; gap: 2px; }
nav.top .glide { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 11px; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--accent), transparent 80%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 72%) inset;
                 transition: transform 0.38s var(--ease), width 0.38s var(--ease), opacity 0.25s; }
nav.top .glide.shown { opacity: 1; }
nav.top a.link { position: relative; font-weight: 550; }
nav.top .links a.link, nav.top .links a.link:hover, nav.top .links a.link.on { background: none; }      /* (the highlight is the one that glides) */
nav.top .rule { flex: none; width: 1px; height: 20px; margin: 0 6px; background: color-mix(in srgb, var(--text), transparent 86%); }
nav.top a.account { display: inline-flex; align-items: center; gap: 7px; padding-left: 9px; }
nav.top a.account svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
nav.top a.account span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
nav.top a.account .face { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: normal 700 11.5px/1 inherit; font-family: inherit; color: #fff; background: linear-gradient(140deg, #C084FC, var(--accent) 50%, #6D5CF0); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
nav.top .button.small { gap: 7px; border-radius: 13px; }
.button.editor svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }      /* ("Open in browser": shown to whoever is signed in) */
nav.top .button.small svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { nav.top .rule { margin: 0 3px; } }
@media (max-width: 460px) {
  nav.top { padding-left: 7px; }
  nav.top .rule { display: none; }
  nav.top a.link { padding: 7px 9px; }
  nav.top a.account .face + span { display: none; }      /* (signed in: the round with its letter is enough) */
}

/* ================================================================ signing in: the sheet, finer
   Each step (signing in, a new account, the code from a mail, a forgotten password) has a badge of its own, a way
   back at the top, drawings in its fields, and what went wrong said in a box of its own above the button. */
.sheet svg, .gains svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gains i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; }
.gains svg { width: 20px; height: 20px; }
/* One card of two halves: what the account is for, on the program's violet with its dunes and stars; and the form. */
.page.door { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 104px 24px 40px; }
.gate { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); width: min(1020px, 100%); min-height: 610px; border-radius: 30px; overflow: hidden;
        background: color-mix(in srgb, var(--panel), transparent 6%); backdrop-filter: blur(22px) saturate(1.3);
        box-shadow: 0 50px 130px rgba(0, 0, 0, 0.6), 0 0 110px color-mix(in srgb, var(--accent), transparent 86%); animation: fade 0.8s var(--ease) both; }
/* (its edge: a hairline that is lit at two corners) */
.gate::before { content: ''; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
                background: linear-gradient(150deg, color-mix(in srgb, var(--pale), transparent 25%), var(--edge) 32%, var(--line) 68%, color-mix(in srgb, var(--accent-2), transparent 35%));
                -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.gate .why { justify-self: stretch; max-width: none; display: flex; flex-direction: column; justify-content: center; padding: 48px 46px 150px; overflow: hidden; animation: none;
             background: radial-gradient(70% 50% at 18% 0%, rgba(216, 196, 255, 0.28), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(111, 163, 247, 0.3), transparent 70%), linear-gradient(155deg, #2A1A57, #45208A 52%, #7C3AED); }
.gate .why > * { position: relative; }
.gate .why h1 { font-size: clamp(30px, 3.3vw, 40px); margin: 0 0 28px; }
.gate .gains { gap: 16px; }
.gate .gains span { color: color-mix(in srgb, var(--pale), #fff 30%); opacity: 0.85; }
.gate .gains i { box-shadow: 0 8px 20px rgba(10, 4, 30, 0.35), 0 1px 0 rgba(255, 255, 255, 0.3) inset; }
.mascot { align-self: flex-start; width: 68px; height: 68px; margin-bottom: 22px; border-radius: 20px; box-shadow: 0 16px 36px rgba(10, 4, 30, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.28); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.gate .why > .spark { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: #fff; }
.dunes { position: absolute !important; inset: auto 0 0 0; width: 100%; height: 150px; }
.dunes path { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dunes path:last-child { fill: #120D1C; stroke: none; }
.page.door .sheet { display: flex; flex-direction: column; justify-content: center; width: auto; padding: 46px 44px; border: 0; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none; animation: none; }
.sheet .back { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin: -6px 0 18px -5px; font-size: 13.5px; font-weight: 600; color: var(--dim); transition: color 0.2s, gap 0.25s var(--ease); }
.sheet .back:hover { color: var(--text); gap: 8px; }
.sheet .back svg { width: 16px; height: 16px; }
.crest { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: linear-gradient(140deg, #C084FC, var(--accent) 45%, #6D5CF0);
         box-shadow: 0 12px 30px color-mix(in srgb, var(--accent), transparent 55%), 0 1px 0 rgba(255, 255, 255, 0.35) inset; }
.badge svg { width: 24px; height: 24px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); transition: background 0.3s; }
.dots[data-at='1'] i:first-child, .dots[data-at='2'] i { background: var(--accent); }
.sheet .back[hidden], .dots[hidden], .forgot[hidden], .sheet .caps[hidden] { display: none; }

label.field { position: relative; margin-bottom: 16px; }
label.field input { height: 48px; padding-left: 44px; }
/* (a field's sign: over its left end, and not a part of it, so a field the browser fills in keeps it) */
label.field::after { content: ''; position: absolute; left: 14px; bottom: 15px; width: 18px; height: 18px; background: var(--sign, none) center / contain no-repeat; pointer-events: none; }
label.field[data-for='code']::after { content: none; }
label.field[data-for='username'] { --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A79CC6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M15.6 8.4v5.1a2.45 2.45 0 0 0 4.9 0V12a8.5 8.5 0 1 0-3.4 6.8'/%3E%3C/svg%3E"); }
label.field input::placeholder { color: var(--faint); opacity: 0.7; }
label.field input:hover:not(:focus) { border-color: var(--edge); }
label.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 100px #120D1E inset; }
label.field input:-webkit-autofill:focus { box-shadow: 0 0 0 100px #120D1E inset, 0 0 0 4px color-mix(in srgb, var(--accent), transparent 80%); }
label.field[data-for='email'] { --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A79CC6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='3'/%3E%3Cpath d='M4.5 8l7.5 5.5L19.5 8'/%3E%3C/svg%3E"); }
label.field.invalid input, label.field.invalid input:focus { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad), transparent 82%); }
.sheet .taken { margin: -8px 0 16px; font-size: 13.5px; color: var(--bad); animation: fade 0.3s var(--ease) both; }
.sheet .taken[hidden] { display: none; }
.sheet .taken a { color: var(--text); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
label.field[data-for='display'] { --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A79CC6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 19.5a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
label.field[data-for='password'] { --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A79CC6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
/* (the code from a mail: large, evenly spaced, in the middle) */
label.field[data-for='code'] input { height: 58px; padding: 0 14px; text-align: center; font: 650 24px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.32em; text-indent: 0.32em; }
.forgot { position: absolute; top: 0; right: 0; font-size: 13px; font-weight: 600; color: var(--pale); }
.forgot:hover { text-decoration: underline; text-underline-offset: 3px; }
.secret { font-size: 16px !important; font-weight: 400 !important; }      /* (what is typed in it is as large as in the other fields, not as small as their labels) */
.secret input { padding-right: 50px !important; }
.secret button { top: 7px; right: 7px; display: grid; place-items: center; width: 34px; padding: 0; }
.secret button svg { width: 18px; height: 18px; }
.secret .struck { opacity: 0; transition: opacity 0.2s; }
.secret button.seen { color: var(--pale); }
.secret button.seen .struck { opacity: 1; }
.sheet .caps { margin: -8px 0 14px; font-size: 12.5px; font-weight: 600; color: #E8B454; }
.sheet .strength { margin: -6px 0 16px; }

/* (what is said: nothing, until there is something to say) */
.sheet .said { min-height: 0; margin: 0 0 14px; padding: 10px 12px 10px 38px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; border: 1px solid; background-position: 12px 11px; background-size: 17px; background-repeat: no-repeat; animation: fade 0.35s var(--ease) both; }
.sheet .said:empty { display: none; }
.sheet .said.bad { color: #FFC9C9; border-color: color-mix(in srgb, var(--bad), transparent 68%); background-color: color-mix(in srgb, var(--bad), transparent 88%);
                   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F08A8A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.1'/%3E%3C/svg%3E"); }
.sheet .said.ok { color: #C9F5DB; border-color: color-mix(in srgb, var(--ok), transparent 68%); background-color: color-mix(in srgb, var(--ok), transparent 88%);
                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FD08D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16 9.5'/%3E%3C/svg%3E"); }
.sheet .button { height: 48px; margin-top: 2px; }
.sheet .ways { margin: 16px 0 0; }
.sheet .ways a { color: var(--pale); text-underline-offset: 3px; }
.sheet .note { margin: 16px 0 0; }
.sheet .kept { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
.sheet .kept svg { flex: none; width: 14px; height: 14px; }

/* (from one step to the next: what changed comes in anew, a little after one another) */
.sheet.turned > :is(.crest, h1, [data-lead], label.field, .button, .ways) { animation: step 0.42s var(--ease) both; }
.sheet.turned > label.field { animation-delay: 0.05s; }
.sheet.turned > :is(.button, .ways) { animation-delay: 0.1s; }
.sheet.turned .badge { animation: pop-in 0.5s var(--spring) both; }
@keyframes step { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop-in { from { transform: scale(0.6) rotate(-12deg); } }

@media (max-width: 900px) {
  /* (on a narrow screen the form comes first: what the account is for is read under it) */
  .page.door { padding: 112px 16px 40px; }
  .gate { grid-template-columns: minmax(0, 1fr); width: min(480px, 100%); min-height: 0; border-radius: 26px; }
  .page.door .sheet { order: -1; padding: 30px 24px; }
  .gate .why { padding: 34px 26px 120px; }
  .dunes { height: 100px; }
}

/* ================================================================ the first page, finer
   Nothing on it follows the scrolling: every part is there from the start. What moves is what the pointer moves, and
   a few things that move by themselves. */
::selection { background: color-mix(in srgb, var(--accent), transparent 55%); color: #fff; }
:focus-visible { outline: 2px solid var(--pale); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--edge) var(--bg); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* (the first screen: a word above the line, the icon itself on the program's canvas, a softer way down into the page) */
.hero { padding: 150px 0 110px; }
.hero .eyebrow { opacity: 0; animation: fade 0.9s 0.05s var(--ease) forwards; }
/* (the name above the line: in both its letters, and what it means, each set apart by a thin rule) */
.hero .eyebrow.name { gap: 12px; padding: 9px 20px 9px 14px; border-radius: 999px; font-size: 15.5px; line-height: 1.2; color: var(--soft); background: color-mix(in srgb, var(--panel), transparent 35%); backdrop-filter: blur(12px);
                      border-color: color-mix(in srgb, var(--pale), transparent 72%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; }
.hero .eyebrow.name .spark { width: 14px; height: 14px; color: var(--pale); }
.hero .eyebrow.name b { font-weight: 720; color: var(--text); letter-spacing: 0.01em; }
.hero .eyebrow.name b[lang='ar'] { font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1; color: var(--pale); }
.hero .eyebrow.name .sep { flex: none; width: 1px; height: 15px; background: color-mix(in srgb, var(--pale), transparent 65%); }
.hero .eyebrow.name span { font-weight: 550; }
[dir='rtl'] .hero .eyebrow.name { padding: 9px 14px 9px 20px; }
@media (max-width: 460px) { .hero .eyebrow.name { gap: 9px; padding-inline: 12px 16px; font-size: 14px; } .hero .eyebrow.name b[lang='ar'] { font-size: 16px; } }
.hero h1 { margin: 22px 0 20px; }
.hero p.lead { color: var(--soft); line-height: 1.65; }
.hero::after { height: 38%; }
.canvas .l3 { inset: 16% 28% 30% 28%; border-radius: 22%; background: none; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14); overflow: hidden; }
.canvas .l3 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.window { box-shadow: 0 60px 140px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 0 120px color-mix(in srgb, var(--accent), transparent 72%); }
.window::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, 0.09), transparent 32%); }

/* What it makes, at a glance: a row that stands still. */
.makes { padding: 30px 0; border-block: 1px solid color-mix(in srgb, var(--line), transparent 30%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent), transparent 95%), transparent); }
.makes .wrap { display: flex; align-items: center; gap: 22px; }
.makes .wrap > span { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.makes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.makes li { padding: 7px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--soft); background: color-mix(in srgb, var(--pale), transparent 93%); border: 1px solid var(--line); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.makes li:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent), transparent 45%); background: color-mix(in srgb, var(--accent), transparent 86%); }

/* (the parts of the page: a soft light behind each heading, a little less air between them) */
section { padding: 110px 0; }
section > .wrap > .kicker { display: inline-flex; align-items: center; gap: 10px; }
section > .wrap > .kicker::before { content: ''; width: 22px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
section:not(.clean):not(.closing)::before { content: ''; position: absolute; left: 50%; top: 40px; width: min(900px, 90%); height: 340px; translate: -50% 0; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent), transparent 90%), transparent); }
section > .wrap { position: relative; }

/* (the cards: an edge that lights where the pointer is, and a lift) */
.card, .plugin, .tier { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; }
.card:hover { border-color: color-mix(in srgb, var(--accent), transparent 55%); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.card .label { letter-spacing: 0.1em; }
.plugin:hover { border-color: color-mix(in srgb, var(--accent), transparent 55%); }

/* (the three steps: each a card of its own, its number large and faint behind it) */
.steps { gap: 18px; margin-top: 54px; }
.steps li { padding: 30px 28px 32px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--raised), transparent 30%), transparent); overflow: hidden; }
.steps li::before { left: 28px; top: 0; width: 44px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: none; }
.steps li.seen::before { width: 44px; }
.steps i { position: absolute; right: 18px; top: 2px; font-size: 84px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: color-mix(in srgb, var(--pale), transparent 90%); }
.steps h3 { margin-top: 6px; }
.steps p { max-width: none; color: var(--dim); }

/* The two versions, in short. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 50px; }
.tier { position: relative; padding: 30px; border-radius: 24px; background: linear-gradient(180deg, var(--raised), var(--panel)); border: 1px solid var(--line); }
.tier.pro { border: 1.5px solid transparent; background: linear-gradient(180deg, var(--raised), var(--panel)) padding-box, linear-gradient(140deg, var(--accent), var(--accent-2) 60%, var(--pale)) border-box; }
.tier h3 { font-size: 24px; font-weight: 760; }
.tier .cost { margin: 8px 0 20px; font-size: 22px; font-weight: 750; color: var(--text); }
.tier .cost small { font-size: 14px; font-weight: 500; color: var(--dim); margin-left: 4px; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tier li { display: flex; gap: 10px; font-size: 15px; color: var(--soft); }
.tier li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: color-mix(in srgb, var(--accent), transparent 70%) center / 10px no-repeat
                   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#plans a.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 650; color: var(--pale); transition: gap 0.25s var(--ease), color 0.2s; }
#plans a.more:hover { gap: 13px; color: var(--text); }
#plans a.more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* (what it writes: larger, and in the accent's two colors under the pointer) */
.kinds span { padding: 11px 18px; border-radius: 14px; font-size: 15px; background: linear-gradient(180deg, var(--raised), var(--panel)); }

/* (the questions: each in a row of its own that lights when open) */
.asked { border-top: 0; display: grid; gap: 10px; }
.asked details { border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; background: color-mix(in srgb, var(--panel), transparent 40%); transition: border-color 0.25s, background 0.25s; }
.asked details[open] { border-color: color-mix(in srgb, var(--accent), transparent 55%); background: color-mix(in srgb, var(--raised), transparent 20%); }
.asked summary { padding: 20px 0; font-size: 17.5px; }
.asked details p { padding: 0 40px 22px 0; color: var(--dim); }

/* (the last word: the icon over it, on a plate of its own light) */
.closing { padding: 120px 24px 140px; }
.closing .mascot { display: block; margin: 0 auto 22px; width: 84px; height: 84px; border-radius: 24px; }
.closing .sub { color: var(--soft); }
footer { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel), transparent 40%)); }
footer .cols a:not(.brand) { transition: color 0.2s, translate 0.25s var(--ease); }
footer .cols a:not(.brand):hover { translate: 3px 0; }

@media (max-width: 900px) {
  .hero { padding: 120px 0 80px; }
  .stage { width: 100%; }      /* (in one column it had no width of its own, and shrank to nothing) */
  section { padding: 84px 0; }
  .makes .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pair { grid-template-columns: 1fr; }
  .steps { gap: 14px; }
}

/* ================================================================ getting it
   On the pricing page, above the two versions: the icon, what is on offer, the button that fetches the installer, and
   (once it is pressed) what to do with what was fetched. */
.get { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center; width: min(900px, calc(100% - 40px)); margin-top: 40px; padding: 34px 36px; border-radius: 26px;
       background: linear-gradient(140deg, color-mix(in srgb, var(--accent), transparent 82%), color-mix(in srgb, var(--panel), transparent 6%) 55%); backdrop-filter: blur(18px); border: 1px solid color-mix(in srgb, var(--accent), transparent 60%);
       box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); scroll-margin-top: 90px; }
.get::before { content: none; }
.get > img { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 18px 40px rgba(10, 4, 30, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.22); }
.get h2 { margin: 0 0 6px; font-size: 28px; }
.get .words > p { color: var(--dim); font-size: 15px; }
.get .actions { margin-top: 18px; opacity: 1; animation: none; }
.get .button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.get .button[hidden] { display: none; }
.get .words > p.fine { margin-top: 16px; font-size: 13.5px; color: var(--faint); max-width: 620px; }
.get .after { margin: 18px 0 0; padding: 16px 18px 16px 38px; border-radius: 14px; display: grid; gap: 8px; font-size: 14.5px; color: var(--soft); background: color-mix(in srgb, var(--ok), transparent 90%); border: 1px solid color-mix(in srgb, var(--ok), transparent 65%); animation: fade 0.4s var(--ease) both; }
.get .after[hidden] { display: none; }
.get .after strong { color: var(--text); font-weight: 650; }
@media (max-width: 700px) { .get { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; } .get > img { width: 72px; height: 72px; border-radius: 20px; } }

/* ================================================================ pricing, set right
   The two versions' buttons stand on one line, however long each list is; and everything side by side has a ground of
   its own, so the sky does not run behind its words. */
.plan { display: flex; flex-direction: column; }
.plan ul { flex: 1; }
.plan .button { margin-top: auto; }
.compare .table { padding: 6px 28px 14px; border-radius: 24px; background: color-mix(in srgb, var(--panel), transparent 4%); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.compare .table .row:last-child { border-bottom: 0; }
.compare .table .row.top-row { top: 70px; margin: 0 -28px; padding: 16px 28px; border-radius: 24px 24px 0 0; background: color-mix(in srgb, var(--raised), transparent 4%); }
.compare .table .row:hover:not(.top-row) { margin: 0 -12px; padding-inline: 12px; border-radius: 10px; }
@media (max-width: 900px) { .compare .table { padding: 4px 16px 10px; } .compare .table .row.top-row { margin: 0 -16px; padding: 14px 16px; } }

/* ================================================================ the download page
   Getting it has a page of its own: the panel with the button, then what it needs and what comes with it, in three. */
.facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(900px, calc(100% - 40px)); margin-top: 18px; }
.facts article { padding: 24px 24px 26px; border-radius: 22px; background: color-mix(in srgb, var(--panel), transparent 6%); backdrop-filter: blur(18px); border: 1px solid var(--line); }
.facts h3 { font-size: 17px; font-weight: 720; margin-bottom: 12px; }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.facts li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.facts li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.facts strong { color: var(--soft); font-weight: 650; }
nav.top .button.here { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pale), transparent 40%), 0 12px 34px color-mix(in srgb, var(--accent), transparent 55%); }      /* (the page it leads to is the one in sight) */
@media (max-width: 900px) { .facts { grid-template-columns: 1fr; } }

/* ================================================================ languages (see i18n.js)
   The bar's switch to the other language; and, for a language written from the right (Arabic), what does not turn
   round by itself: what is placed by its left or right edge, the spacing of letters that Latin headings have and Arabic
   must not, and the things that stay as they are in any language (the program's window, code, what is typed). */
nav.top a.tongue { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; }
nav.top a.tongue svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { nav.top a.tongue span { display: none; } }

[lang='ar'] body { font-family: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, system-ui, sans-serif; line-height: 1.8; }
[dir='rtl'] :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.3; }
[dir='rtl'] :is(.kicker, .label, .eyebrow, h4, .tag, .makes .wrap > span, .steps i, .plan .price, .figures strong) { letter-spacing: 0; }
[dir='rtl'] .hero h1 { line-height: 1.25; }
[dir='rtl'] .hero h1 .line { padding-block: 0.12em 0.3em; margin-bottom: -0.3em; }      /* (room for the marks above and below the letters) */
[dir='rtl'] :is(.stage, pre.code, .nodes, .strip, .pixels, .dots, .strength) { direction: ltr; }
[dir='rtl'] pre.code { text-align: left; }
[dir='rtl'] :is(input[type='email'], input[type='password'], input[name='code']) { direction: ltr; text-align: left; }
[dir='rtl'] input[name='code'] { text-align: center; }

[dir='rtl'] nav.top { padding: 6px 12px 6px 6px; }
[dir='rtl'] nav.top .brand { margin-right: 0; margin-left: 6px; }
[dir='rtl'] .pixels { right: auto; left: 26px; }
[dir='rtl'] .tag { right: auto; left: 18px; }
[dir='rtl'] .card.wide > svg.art { margin: -30px 0 -30px -30px; transform: scaleX(-1); }
[dir='rtl'] .card .strip { right: auto; }
[dir='rtl'] .steps li::before { left: auto; right: 28px; }
[dir='rtl'] .steps i { right: auto; left: 18px; }
[dir='rtl'] .asked summary::after { margin-right: 0; margin-left: 6px; }
[dir='rtl'] .asked details p { padding: 0 0 22px 40px; }
[dir='rtl'] #plans a.more svg, [dir='rtl'] .sheet .back svg { transform: scaleX(-1); }
[dir='rtl'] .facts li { padding-left: 0; padding-right: 16px; }
[dir='rtl'] .facts li::before { left: auto; right: 0; }
[dir='rtl'] .get .after { padding: 16px 38px 16px 18px; }
[dir='rtl'] .plan .price small, [dir='rtl'] .tier .cost small { margin-left: 0; margin-right: 6px; }
[dir='rtl'] .forgot { right: auto; left: 0; }
[dir='rtl'] .switch::before { left: auto; right: 4px; }
[dir='rtl'] .switch.second::before { transform: translateX(-100%); }
[dir='rtl'] .sheet .said { padding: 10px 38px 10px 12px; background-position: calc(100% - 12px) 11px; }
[dir='rtl'] .sheet .back { margin: -6px -5px 18px 0; }
[dir='rtl'] .strength span { text-align: left; }
[dir='rtl'] .dunes { transform: scaleX(-1); }
[dir='rtl'] footer .cols a:not(.brand):hover { translate: -3px 0; }
[dir='rtl'] .button.main::after { left: auto; right: -70%; transform: skewX(20deg); transition: right 0.6s var(--ease); }
[dir='rtl'] .button.main:hover::after { left: auto; right: 130%; }

/* ================================================================ the plugins, from the program's store (plugins.js)
   Each card is made from the store's catalog. On the first page a card says a few lines; on the store's own page, all
   of it, with its kind, its version and what it is written in. */
.plugin .about p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.plugin.whole .about p { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.plugin .bits { grid-column: 1 / -1; margin-top: 12px; max-width: none; }
.plugin:not(.whole) .bits { display: none; }
.plugin .shot img { object-fit: cover; }
.plugin .shot img[src$='.svg'] { object-fit: contain; }
#plugins a.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 650; color: var(--pale); transition: gap 0.25s var(--ease), color 0.2s; }
#plugins a.more:hover { gap: 13px; color: var(--text); }
#plugins a.more[hidden] { display: none; }
#plugins a.more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir='rtl'] #plugins a.more svg { transform: scaleX(-1); }
.plugins.store { position: relative; z-index: 2; width: min(1160px, calc(100% - 40px)); margin-top: 40px; }
.plugins.store .plugin { background: color-mix(in srgb, var(--panel), transparent 4%); backdrop-filter: blur(18px); scroll-margin-top: 90px; }
.plugins.store > .who { grid-column: 1 / -1; }
.plugins.store > .who[hidden] { display: none; }
@media (max-width: 1100px) and (min-width: 901px) { .plugins.store { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ the switches (see site.js)
   What the dashboard turns off: a button that waits, the line said at the top of every page, and the whole site closed. */
.button.paused { opacity: 0.55; pointer-events: none; box-shadow: none; }
.notice { position: fixed; z-index: 49; top: 76px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; max-width: min(720px, calc(100% - 32px)); padding: 8px 8px 8px 16px; border-radius: 14px; font-size: 14.5px; color: var(--text);
          background: color-mix(in srgb, var(--raised), transparent 6%); border: 1px solid color-mix(in srgb, var(--accent), transparent 55%); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); animation: fade 0.5s var(--ease) both; }
.notice span { overflow-wrap: anywhere; }
.notice button { flex: none; width: 28px; height: 28px; border-radius: 9px; color: var(--dim); font-size: 13px; transition: background 0.2s, color 0.2s; }
.notice button:hover { background: color-mix(in srgb, var(--text), transparent 88%); color: var(--text); }
.closed { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; text-align: center; background: radial-gradient(700px 420px at 50% 30%, color-mix(in srgb, var(--accent), transparent 78%), transparent 70%), var(--bg); }
.closed img { border-radius: 24px; box-shadow: 0 18px 50px rgba(10, 4, 30, 0.6); }
.closed h1 { margin: 22px 0 10px; font-size: clamp(30px, 5vw, 46px); font-weight: 800; }
.closed p { max-width: 460px; margin: 0 auto; font-size: 17px; }
.closed p.why { margin-top: 14px; color: var(--pale); font-weight: 600; }
.closed p.why:empty { display: none; }
html.shut { overflow: hidden; }

/* The language being changed: the page is seen to be going while it is fetched in the other one (see i18n.js). */
html.turning { cursor: progress; }
html.turning body { opacity: 0.4; pointer-events: none; transition: opacity 0.15s; }

/* ================================================================ the bar, drawn anew
   The mark and the name at one end, the pages in the middle, and at the other end the language (a menu to choose
   from), the account and the download. In a narrow window the pages go into a menu of their own. (Sides are named by
   where the reading starts and ends, so a language written from the right needs no rules of its own.) */
nav.top, [dir='rtl'] nav.top { top: 12px; width: min(1180px, calc(100% - 24px)); max-width: none; gap: 8px; padding: 8px 9px; padding-inline-start: 14px; border-radius: 20px; white-space: nowrap;
          background: color-mix(in srgb, #120D1E, transparent 18%); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 18px 50px rgba(4, 2, 12, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05) inset; }
nav.top .brand, [dir='rtl'] nav.top .brand { flex: 1 1 0; min-width: 0; margin: 0; gap: 11px; }
nav.top .brand img { width: 32px; height: 32px; border-radius: 10px; }
nav.top .brand b { font-size: 17px; font-weight: 760; letter-spacing: -0.015em; }
nav.top .links { flex: none; gap: 2px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, #000, transparent 72%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text), transparent 93%) inset; }
nav.top .links a.link { padding: 6px 15px; border-radius: 10px; font-size: 14.5px; font-weight: 580; }
nav.top .links a.link.on { color: var(--text); }
nav.top .glide { top: 4px; bottom: 4px; border-radius: 10px; background: color-mix(in srgb, var(--accent), transparent 72%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 60%) inset, 0 6px 18px color-mix(in srgb, var(--accent), transparent 78%); }
nav.top .tools { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
nav.top .tool { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px; border-radius: 12px; color: var(--soft); font-size: 14.5px; font-weight: 580; transition: background 0.2s, color 0.2s; }
nav.top .tool:hover, nav.top .drop.open .tool { background: color-mix(in srgb, var(--text), transparent 91%); color: var(--text); }
nav.top .tool svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
nav.top .tool .chevron { width: 14px; height: 14px; margin-inline-start: -2px; color: var(--faint); transition: transform 0.25s var(--ease); }
nav.top .drop.open .chevron { transform: rotate(180deg); }
nav.top :is(.tool, .menu :is(a, button), a.account):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
nav.top a.account, [dir='rtl'] nav.top a.account { height: 38px; padding: 0 12px; border-radius: 12px; }
nav.top a.account .face { width: 24px; height: 24px; }
nav.top .button.small { height: 38px; padding: 0 16px; border-radius: 12px; }

/* A menu of the bar: under its button, by the end of it. */
nav.top .drop { position: relative; }
nav.top .menu { position: absolute; top: calc(100% + 12px); inset-inline-end: 0; z-index: 2; min-width: 228px; padding: 7px; border-radius: 18px; display: grid; gap: 2px; white-space: normal;
                background: color-mix(in srgb, #171126, transparent 4%); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid var(--edge); box-shadow: 0 26px 70px rgba(4, 2, 12, 0.65);
                opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top; transition: opacity 0.18s, transform 0.22s var(--ease), visibility 0s 0.22s; }
nav.top .drop.open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s, transform 0.22s var(--ease); }
nav.top .menu::before { content: ''; position: absolute; top: -6px; inset-inline-end: 22px; width: 11px; height: 11px; rotate: 45deg; background: #171126; border: 1px solid var(--edge); border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
nav.top .menu p { margin: 0; padding: 7px 11px 6px; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; color: var(--faint); }
nav.top .menu :is(a, button) { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 11px; border-radius: 12px; color: var(--soft); font-size: 15px; text-align: start; transition: background 0.18s, color 0.18s; }
nav.top .menu :is(a, button):hover { background: color-mix(in srgb, var(--text), transparent 92%); color: var(--text); }
nav.top .menu :is(a, button).on { background: color-mix(in srgb, var(--accent), transparent 82%); color: var(--text); }
nav.top .menu button i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font: normal 700 11.5px/1 inherit; letter-spacing: 0.04em; color: var(--pale); background: color-mix(in srgb, var(--accent), transparent 82%); border: 1px solid color-mix(in srgb, var(--accent), transparent 70%); }
nav.top .menu button.on i { color: #fff; background: linear-gradient(135deg, var(--accent), #7C6CFF); border-color: transparent; }
nav.top .menu button span { flex: 1; display: grid; line-height: 1.25; }
nav.top .menu button b { font-size: 15px; font-weight: 650; color: var(--text); }
nav.top .menu button small { font-size: 12.5px; color: var(--dim); }
nav.top .menu .tick { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--pale); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
nav.top .menu button.on .tick { opacity: 1; }
[lang='ar'] nav.top .menu p, [dir='rtl'] nav.top .brand b { letter-spacing: 0; }

/* (the pages' own menu is for a narrow window only) */
nav.top .drop.pages { display: none; }
@media (max-width: 880px) {
  nav.top .links { display: none; }
  nav.top .drop.pages { display: block; }
  nav.top .brand { flex: 1 1 auto; }
  nav.top .tools { flex: none; }
}
@media (max-width: 620px) {
  nav.top, [dir='rtl'] nav.top { gap: 4px; padding: 7px; padding-inline-start: 10px; }
  nav.top .tools { gap: 2px; }
  nav.top .tongues .tool span, nav.top .tongues .tool .chevron, nav.top .brand b { display: none; }
  nav.top .tool, nav.top a.account, [dir='rtl'] nav.top a.account { padding: 0 9px; }
  nav.top .button.small { padding: 0 13px; }
  /* (a menu is as wide as the bar, under it: there is no room for it under its own button) */
  nav.top .drop { position: static; }
  nav.top .menu { inset-inline: 0; min-width: 0; }
  nav.top .menu::before { display: none; }
}
@media (max-width: 380px) { nav.top .button.small svg { display: none; } }

/* Buying turned off: a dark cover over the Pro card, which says so (see purchase.html). */
.covered { position: relative; overflow: hidden; }
.unsold { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 28px; border-radius: inherit; text-align: center;
          background: rgba(6, 4, 11, 0.86); backdrop-filter: blur(5px); animation: fade 0.4s var(--ease) both; }
.unsold[hidden] { display: none; }
.unsold i { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; color: var(--pale); background: color-mix(in srgb, var(--accent), transparent 78%); border: 1px solid color-mix(in srgb, var(--accent), transparent 55%); }
.unsold svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.unsold strong { font-size: 20px; font-weight: 750; letter-spacing: -0.01em; color: var(--text); }
.unsold span { max-width: 300px; font-size: 15px; color: var(--soft); }

/* The credit at the foot of a page that has no more to say there: whose Rassam is, and the ways on. */
footer.credit { padding: 22px 0 26px; }
footer.credit .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; font-size: 13.5px; color: var(--faint); }
footer.credit nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer.credit a { color: var(--dim); transition: color 0.2s; }
footer.credit a:hover { color: var(--text); }
@media (max-width: 620px) { footer.credit .wrap { justify-content: center; text-align: center; } }

/* A picture in the round where the first letter of a name would be (the bar's; see profile.html for the profile's). */
nav.top a.account .face { overflow: hidden; }
nav.top a.account .face img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A plugin's sign on its badge: the program's own drawing of it. */
.plugin .badge { display: grid; place-items: center; color: #fff; }
.plugin .badge svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

/* "Open in browser" in the bar (shown to whoever is signed in): a quiet button before the filled one, so that the bar
   still ends with Download. Where the bar is short of room it is its sign alone. */
nav.top .button.editor { gap: 7px; padding: 0 13px; font-weight: 600; color: var(--soft); background: none; border: 1px solid color-mix(in srgb, var(--text), transparent 86%); box-shadow: none; }
nav.top .button.editor:hover { color: var(--text); background: color-mix(in srgb, var(--text), transparent 92%); border-color: color-mix(in srgb, var(--accent), transparent 45%); }
nav.top .button.editor { flex: none; }
nav.top .button.editor svg { flex: none; width: 16px; height: 16px; stroke-width: 1.9; }
.button.editor[hidden] { display: none !important; }      /* (in the bar and on the pages: put away is put away, whatever a button is laid out as) */
@media (max-width: 1180px) { nav.top .button.editor { flex: none; width: 38px; min-width: 38px; padding: 0; } nav.top .button.editor span { display: none; } }
@media (max-width: 620px) { nav.top .button.editor { display: none; } }


/* The bar's pages stand at its start, after the name, with a soft rule between the two; what is the visitor's own
   (the language, the account, the download) is at its end. */
nav.top .brand, [dir='rtl'] nav.top .brand { flex: none; }
nav.top .links { flex: none; margin-inline-start: 14px; padding: 0; padding-inline-start: 14px; border-radius: 0; background: none; box-shadow: none; border-inline-start: 1px solid color-mix(in srgb, var(--text), transparent 86%); }
nav.top .glide { top: 0; bottom: 0; }
nav.top .tools { flex: 1 1 auto; }
@media (max-width: 880px) { nav.top .brand, [dir='rtl'] nav.top .brand { flex: 1 1 auto; } nav.top .tools { flex: none; } }

/* The bar's name: the program's name as its own logo (assets/wordmark.svg), and the way home. */
nav.top, [dir='rtl'] nav.top { padding-inline-start: 8px; }
nav.top .brand, [dir='rtl'] nav.top .brand { height: 38px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; background: none; }
nav.top .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
nav.top .brand img.wordmark { display: block; width: auto; height: 24px; border-radius: 0; box-shadow: none; view-transition-name: none; }
nav.top .brand img.wordmark, nav.top .brand:hover img.wordmark { transform: none; transition: none; }      /* (it stays as it is under the pointer: no tilt) */
@media (max-width: 480px) { nav.top .brand img.wordmark { height: 20px; } }

/* A narrow window: the name keeps its room (the buttons beside it give way, never it), the languages are in the menu
   of pages, and nothing is offered to download. */
nav.top .brand, [dir='rtl'] nav.top .brand { flex: 0 0 auto; min-width: max-content; }
nav.top .tools { min-width: 0; }
nav.top .menu p.said { margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--text), transparent 90%); padding-top: 12px; }
@media (max-width: 880px) {
  nav.top .drop.tongues { display: none; }
  nav.top .tools { flex: 1 1 auto; justify-content: flex-end; }
}
@media (max-width: 620px) { nav.top .tools > .button.main.small { display: none; } }
/* A phone or a tablet, however wide: the program is not for it. */
.handheld .button.editor { display: none !important; }      /* (nor is the program in the browser) */
.handheld nav.top .tools > .button.main.small, .handheld footer a[href='download.html'] { display: none; }
.desk { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 14px; font-size: 14.5px; font-weight: 600; color: var(--dim); border: 1px dashed color-mix(in srgb, var(--text), transparent 78%); }

/* A field that was left with something in it that cannot be right, or with nothing (login.html weighs it then): red at
   its edge, in its letters and over its name. */
label.field.wrong input, label.field.wrong input:focus { border-color: var(--bad); color: #FFB4B4; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad), transparent 84%); }
label.field.wrong input:-webkit-autofill { -webkit-text-fill-color: #FFB4B4; }
label.field.wrong > span:first-child { color: var(--bad); }
label.field.wrong::after { filter: brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(1200%) hue-rotate(310deg) brightness(101%); }
label.field input { transition: border-color 0.2s, box-shadow 0.2s, color 0.2s; }
.sheet .hint { margin: -9px 2px 12px; font-size: 13px; line-height: 1.4; color: var(--bad); animation: hint 0.18s ease-out; }
@keyframes hint { from { opacity: 0; transform: translateY(-3px); } }

/* The bar, laid out anew: the name at its start, the pages in its very middle as one set of buttons (a pill that holds
   them, the one in sight lit, the light gliding to whichever is pointed at), and what is the visitor's own at its end.
   No rule stands between the name and the pages any more: the room between them says it. */
nav.top, [dir='rtl'] nav.top { padding: 7px 8px; gap: 10px; border-radius: 22px; background: color-mix(in srgb, #100B1C, transparent 18%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text), transparent 91%) inset, 0 18px 50px rgba(0, 0, 0, 0.45); }
nav.top .brand, [dir='rtl'] nav.top .brand { padding: 0 12px 0 10px; }
nav.top .links { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 4px; gap: 2px; border: 0; border-radius: 15px;
                 background: color-mix(in srgb, #000, transparent 62%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text), transparent 92%) inset; }
[dir='rtl'] nav.top .links { translate: 50% -50%; left: auto; right: 50%; }
nav.top .links a.link { padding: 7px 17px; border-radius: 11px; font-size: 14.5px; font-weight: 600; color: var(--dim); transition: color 0.2s; }
nav.top .links a.link:hover, nav.top .links a.link.on { color: var(--text); }
nav.top .glide { top: 4px; bottom: 4px; border-radius: 11px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 62%), color-mix(in srgb, var(--accent), transparent 76%));
                 box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 52%) inset, 0 6px 20px color-mix(in srgb, var(--accent), transparent 72%); }
nav.top .tools { margin-inline-start: auto; gap: 4px; }
nav.top .tool, nav.top a.account, [dir='rtl'] nav.top a.account { border-radius: 13px; }
nav.top a.account { background: color-mix(in srgb, var(--text), transparent 94%); }
nav.top a.account:hover { background: color-mix(in srgb, var(--text), transparent 89%); }
nav.top .button.small { border-radius: 14px; }
/* (where the middle has no room for the pages beside what stands at the ends, they go into the menu) */
@media (max-width: 1080px) {
  nav.top .links { display: none; }
  nav.top .drop.pages { display: block; }
}