/* Generated from the v7 design canvas, then hand-tuned. One rule per
   distinct style the design used; the comment above each names where it
   is applied. */

/* <div> Skip to content O Olexify Kitsumi Rook , Paper , Scissor */
.o-page-1 { position: relative; background: var(--bg-0a0812); color: var(--inkece8f2); font-family: 'EB Garamond', Georgia, serif; overflow-x: hidden; font-size: 18px; line-height: 1.6; }

.o-page-2 { position: absolute; pointer-events: none; }

.o-page-3 { position: fixed; inset: 0; z-index: 43; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }

.o-page-4 { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }

.o-page-5 { position: fixed; inset: 0; z-index: 44; pointer-events: none; background: radial-gradient(135% 105% at 50% 44%, transparent 62%, var(--bg05040a4d) 90%, var(--bg05040a99) 100%); }

/* <a> Skip to content */
.o-page-6 { position: fixed; left: 50%; top: -60px; z-index: 95; transform: translateX(-50%); background: var(--gold); color: var(--ink-on-gold); padding: 12px 20px; border-radius: 0 0 12px 12px; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.o-page-6:focus-visible { top: 0; }

/* <header> O Olexify Kitsumi Rook , Paper , Scissors Work About Con */
.o-page-7 { position: fixed; top: 0; left: 0; right: 0; z-index: 70; transition: padding .3s ease, background .3s ease, border-color .3s ease; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 28px; background: linear-gradient(var(--bg0a0812f5), var(--bg0a0812c0) 70%, var(--bg0a081200)); border-bottom: 1px solid var(--lineffffff0d); }

/* <a> O Olexify */
.o-siteheader-1 { display: flex; align-items: center; gap: 12px; color: inherit; }

/* <span> O */
.o-siteheader-2 { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid #c9982f66; background: linear-gradient(var(--bg1c1533), var(--bg100e1c)); font-family: 'UnifrakturMaguntia', serif; font-size: 24px; line-height: 1; color: var(--gold-ink-lit); animation: markPulse 6s ease-in-out infinite; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.o-siteheader-2:hover { transform: rotate(-8deg) scale(1.12); border-color: var(--gold-lit); box-shadow: 0 0 22px #c9982f66; }

/* <span> Olexify */
.o-siteheader-3 { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--inkece8f2); }

/* <nav> Kitsumi Rook , Paper , Scissors Work About Contact Get K */
.o-siteheader-4 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; white-space: nowrap; }

.o-siteheader-5 { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2a2442); background: none; color: var(--inkc4bfd2); cursor: pointer; margin-right: 6px; transition: color .25s, border-color .25s, transform .3s; }
.o-siteheader-5:hover { color: var(--gold-ink-lit); border-color: var(--gold); transform: rotate(20deg); }

.o-siteheader-6 { width: 15px; height: 15px; }

/* <a> Kitsumi */
.nav-link { font-size: 16px; color: var(--inkc4bfd2); padding: 8px 12px 6px; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.nav-link:hover { color: var(--gold-ink-lit); }

/* <a> Rook , Paper , Scissors */
.o-siteheader-7 { font-size: 16px; color: var(--gold-ink-lit); padding: 8px 12px 6px; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.o-siteheader-7:hover { color: var(--inkfff0c4); }

/* <a> Get Kitsumi */
.header-cta { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; background: var(--gold); color: var(--ink-on-gold); padding: 11px 18px; margin-left: 8px; font-weight: 600; border-radius: 999px; }
.sect-kicker:hover { background: var(--gold-lit); }

/* <section> Digital workshop · Ukraine Build · learn · repeat ✦ Stil */
.o-top-1 { position: relative; min-height: min(104vh, 1020px); padding: clamp(104px, 13vh, 132px) 0 clamp(92px, 13vh, 164px); overflow: hidden; background: radial-gradient(90% 62% at 50% 4%, var(--bg241a3f) 0%, var(--bg120e22) 46%, var(--bg-0a0812) 78%); }

/* Centred on the hero. The canvas offset this with `left: 62%` and a
   margin-left of min(-1050px, -93vw) — but min() picks the *more* negative of
   the two, i.e. half of 2100px even when the element is only 186vw wide, so
   the glow drifted left of centre at most widths. translateX(-50%) centres it
   against its own width whatever that resolves to. */
.o-top-2 { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min(2100px, 186vw); height: 126%; pointer-events: none; background: radial-gradient(66% 82% at 50% 96%, var(--washffcf6b4d), #c9982f33 34%, #8d1c2c1a 56%, transparent 76%); animation: lamp 10s ease-in-out infinite; }

/* the inner, brighter core of the same lamp — centred the same way */
.o-top-3 { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min(1560px, 126vw); height: 86%; pointer-events: none; background: radial-gradient(62% 88% at 50% 96%, var(--washfff0c447), var(--washffcf6b26) 42%, transparent 74%); filter: blur(18px); }

/* <div> Digital workshop · Ukraine Build · learn · repeat ✦ Stil */
.o-top-4 { position: relative; z-index: 30; max-width: 1240px; margin: 0 auto; padding: 0 clamp(28px, 40vw - 270px, 210px); box-sizing: border-box; }

/* <div> Digital workshop · Ukraine Build · learn · repeat ✦ Stil */
.o-top-5 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .18em; color: var(--inkb6b0c6); text-transform: uppercase; border-bottom: 1px solid var(--lineffffff1a); padding-bottom: 14px; }

/* <span> ✦ Still awake */
.o-top-6 { color: var(--gold-ink-lit); }

/* <button> ✦ */
.o-top-7 { position: relative; background: none; border: 0; padding: 0 4px 0 0; cursor: pointer; color: var(--gold-ink); font-size: 13px; line-height: 1; transition: color .3s, text-shadow .3s; }
.o-top-7:hover { color: var(--gold-ink-lit); text-shadow: 0 0 14px var(--gold-lit); }
/* a 13px glyph is too small to hit with a thumb; the hit area reaches past it */
.o-top-7::after { content: ''; position: absolute; inset: -14px; }

/* <div> Become stronger — become bolder Olexify 2026 I make soft */
.o-top-8 { text-align: center; margin-top: clamp(28px, 9vh, 96px); }

/* <div> Become stronger — become bolder */
.o-heroinner-1 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-ink-lit); margin-bottom: 20px; }

/* <h1> Olexify */
.o-heroinner-2 { font-family: 'UnifrakturMaguntia', serif; font-weight: 400; font-size: clamp(66px, 13vw, 200px); line-height: .88; margin: 0; color: var(--inkece8f2); text-shadow: 0 0 90px var(--halo-000), 0 0 30px #c9982f55; }

/* <div> 2026 */
.o-heroinner-3 { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 22px auto 0; max-width: 700px; }

.o-heroinner-4 { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold)); }

/* <span> 2026 */
.o-heroinner-5 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .24em; color: var(--gold-ink); }

.o-heroinner-6 { height: 1px; flex: 1; background: linear-gradient(90deg, var(--gold), transparent); }

/* <p> I make software that teaches you something while you’re  */
.o-heroinner-7 { font-size: 22px; line-height: 1.55; color: var(--inkd6d0e2); max-width: 640px; margin: 26px auto 0; text-wrap: pretty; }

/* <strong> Kitsumi */
.o-heroinner-8 { color: var(--inkece8f2); font-weight: 600; }

/* <div> Get Kitsumi Watch on YouTube Play Rook, Paper, Scissors */
.o-heroinner-9 { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* <a> Get Kitsumi */
.o-heroinner-10 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; background: var(--gold); color: var(--ink-on-gold); padding: 15px 26px; border-radius: 10px; }
.o-heroinner-10:hover { background: var(--gold-lit); }

/* <a> Watch on YouTube */
.o-heroinner-11 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line66607f); background: var(--bg0a0812cc); color: var(--inkece8f2); padding: 15px 26px; border-radius: 10px; }
.o-heroinner-11:hover { border-color: var(--gold); color: var(--gold-ink-lit); }

/* <div> ▶ Loading Olexify.exe... [OK] Building projects [OK] Mak */
.o-heroinner-12 { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: clamp(44px, 7vh, 84px) auto 0; max-width: 980px; align-items: stretch; }

/* <div> ▶ Loading Olexify.exe... [OK] Building projects [OK] Mak */
.o-heroinner-13 { flex: 1; min-width: 300px; max-width: 430px; box-sizing: border-box; display: grid; gap: 6px; align-content: center; text-align: left; border: 1px solid var(--line2a2442); background: var(--bg0e0c18e6); padding: 13px 18px; border-radius: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.38; color: var(--inkb8b2c6); }

/* <span> [OK] */
.o-heroinner-14 { color: var(--ink4ea36a); }

/* <span> [WARN] */
.o-heroinner-15 { color: var(--inkd4a03a); }

/* <span> _ */
.o-heroinner-16 { color: var(--gold-ink-lit); animation: blink 1.1s step-end infinite; }

/* <div> Kitsumi in three words Watch · Hover · Understand. Study */
.o-heroinner-17 { flex: 1; min-width: 260px; max-width: 430px; box-sizing: border-box; align-content: center; text-align: left; border: 1px solid var(--line2a2442); background: var(--bg0e0c18e6); padding: 13px 18px; border-radius: 16px; display: grid; gap: 7px; align-content: center; }

/* <div> Kitsumi in three words */
.o-heroinner-18 { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink8e88a2); }

/* <div> Watch · Hover · Understand. */
.o-heroinner-19 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: .06em; color: var(--inkece8f2); }

/* <span> Watch */
.o-heroinner-20 { white-space: nowrap; }

/* <span> · */
.o-heroinner-21 { color: var(--gold-ink); }

/* <div> Study using the original subtitles. Free on Firefox and  */
.o-heroinner-22 { font-size: 15px; line-height: 1.45; color: var(--inkb6b0c6); }

/* <div> Flagship Rook, Paper, Scissors! plays free at rookpapers */
.o-heroinner-23 { font-size: 15px; line-height: 1.45; color: var(--inkb6b0c6); border-top: 1px solid var(--line2a2442); padding-top: 8px; }

/* <span> Flagship */
.o-heroinner-24 { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-on-gold); background: var(--gold); border-radius: 999px; padding: 3px 9px; margin-right: 8px; }

/* <div> Scroll ↓ */
.o-top-9 { position: absolute; left: 28px; bottom: 26px; z-index: 30; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink8e88a2); }

/* <div> Turn watching into learning ✦ 46 languages ✦ No accounts */
.o-top-10 { position: relative; z-index: 30; overflow: hidden; border-top: 1px solid var(--line2a2442); border-bottom: 1px solid var(--line2a2442); background: linear-gradient(90deg, var(--gold), var(--gold-lit) 50%, var(--gold)); padding: 18px 0; cursor: grab; touch-action: none; user-select: none; }

.o-top-11 { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 50% 50%, var(--washfff3d64d), transparent 70%); }

/* <div> Turn watching into learning ✦ 46 languages ✦ No accounts */
.o-top-12 { }

/* <div> Turn watching into learning ✦ 46 languages ✦ No accounts */
.o-top-13 { display: flex; width: max-content; animation: kMarquee 42s linear infinite; }
.o-top-13:hover { animation-play-state: paused; }

/* <div> Turn watching into learning ✦ 46 languages ✦ No accounts */
/* 600 to match the weight Cinzel carries everywhere else on the page — at 14px
   over a gold ribbon, 400 read thin */
.o-top-14 { display: flex; align-items: center; gap: 34px; padding-right: 34px; font-family: 'Cinzel', serif; font-weight: 600; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-on-gold); white-space: nowrap; }

/* <span> ✦ */
.o-top-15 { color: var(--ink6b4f13); }

/* <section> I Kitsumi Turn watching into learning Interactive subtit */
.o-top-16 { position: relative; padding: clamp(52px, 7vw, 96px) 28px clamp(44px, 6vw, 84px); max-width: 1240px; margin: 0 auto; }

.o-kitsumi-1 { position: absolute; right: -6%; top: 4%; width: 46%; height: 60%; pointer-events: none; background: radial-gradient(closest-side, #c9982f14, transparent 72%); }

.o-kitsumi-2 { position: absolute; left: -18px; top: 22%; height: min(58vh, 540px); width: clamp(96px, 34vw - 150px, 220px); z-index: 0; opacity: .95; pointer-events: none; overflow: visible; transform-origin: left bottom; }

.o-vineleft-1 { transform-box: fill-box; transform-origin: 50% 88%; animation: sway 11.7s ease-in-out 1.9s infinite; pointer-events: auto; transition: filter .35s; }
.o-vineleft-1:hover { filter: brightness(1.3) drop-shadow(0 0 14px #c9455aaa); }

.o-vineleft-2 { transform-box: fill-box; transform-origin: 50% 88%; animation: sway 14.4s ease-in-out 3.8s infinite; pointer-events: auto; transition: filter .35s; }
.o-vineleft-2:hover { filter: brightness(1.3) drop-shadow(0 0 14px #c9455aaa); }

.o-vineleft-3 { transform-box: fill-box; transform-origin: 50% 88%; animation: sway 17.1s ease-in-out 5.7s infinite; pointer-events: auto; transition: filter .35s; }
.o-vineleft-3:hover { filter: brightness(1.3) drop-shadow(0 0 14px #c9455aaa); }

.o-vineleft-4 { cursor: pointer; pointer-events: auto; }

.o-vineleft-5 { transform-box: fill-box; transform-origin: 50% 88%; animation: sway 10.8s ease-in-out 0.6s infinite; pointer-events: auto; transition: filter .35s; }
.o-vineleft-5:hover { filter: brightness(1.3) drop-shadow(0 0 14px #c9455aaa); }

.o-vineleft-6 { transform-box: fill-box; transform-origin: 50% 88%; animation: sway 13.5s ease-in-out 2.5s infinite; pointer-events: auto; transition: filter .35s; }
.o-vineleft-6:hover { filter: brightness(1.3) drop-shadow(0 0 14px #c9455aaa); }

.o-kitsumi-3 { position: absolute; right: -10px; top: -30px; width: clamp(96px, 34vw - 200px, 210px); pointer-events: none; opacity: .9; overflow: visible; transform: scaleX(-1); }

.o-kitsumi-4 { transform-box: fill-box; transform-origin: 50% 88%; animation: sway 16.2s ease-in-out 4.4s infinite; pointer-events: auto; transition: filter .35s; }
.o-kitsumi-4:hover { filter: brightness(1.3) drop-shadow(0 0 14px #c9455aaa); }

.o-kitsumi-5 { transform-box: fill-box; transform-origin: 50% 88%; animation: sway 9.9s ease-in-out 6.3s infinite; pointer-events: auto; transition: filter .35s; }
.o-kitsumi-5:hover { filter: brightness(1.3) drop-shadow(0 0 14px #c9455aaa); }

.o-kitsumi-6 { transform-box: fill-box; transform-origin: 50% 88%; animation: sway 12.6s ease-in-out 1.2s infinite; pointer-events: auto; transition: filter .35s; }
.o-kitsumi-6:hover { filter: brightness(1.3) drop-shadow(0 0 14px #c9455aaa); }

/* <div> I Kitsumi Turn watching into learning Interactive subtit */
.o-kitsumi-7 { position: relative; z-index: 2; }

/* <div> I Kitsumi */
.sect-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

/* <span> I */
.sect-numeral { flex-shrink: 0; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid #c9982f66; border-radius: 50%; font-family: 'Cinzel', serif; font-size: 12px; color: var(--gold-ink-lit); }

/* <span> Kitsumi */
.sect-kicker { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .2em; color: var(--ink8e88a2); text-transform: uppercase; }

.o-kitsumi-9 { height: 1px; flex: 1; background: linear-gradient(90deg, #c9982f88, var(--lineffffff14) 30%, transparent); }

/* <div> Turn watching into learning Interactive subtitles, dicti */
.o-kitsumi-10 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(26px, 4vw, 44px); align-items: center; margin-bottom: clamp(26px, 4vw, 48px); }

/* <h2> Turn watching into learning */
.o-kitsumi-11 { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.05; margin: 0 0 22px; text-wrap: pretty; }

/* <p> Interactive subtitles, dictionaries, study tools and fla */
.o-kitsumi-12 { font-size: 20px; line-height: 1.6; color: var(--inkd6d0e2); margin: 0 0 14px; text-wrap: pretty; }

/* <p> No accounts. No telemetry. Your study data never leaves  */
.o-kitsumi-13 { font-size: 18px; color: var(--inkb6b0c6); margin: 0 0 26px; }

/* <div> Firefox Chrome kitsumi.org ↗ */
.o-kitsumi-14 { display: flex; flex-wrap: wrap; gap: 10px; }

/* <a> Firefox */
.o-kitsumi-15 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; background: var(--gold); color: var(--ink-on-gold); padding: 13px 20px; border-radius: 10px; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s; }
.o-kitsumi-15:hover { background: var(--gold-lit); transform: translateY(-3px); box-shadow: 0 16px 40px #c9982f3d; }

/* <a> kitsumi.org ↗ */
.o-kitsumi-16 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line66607f); color: var(--inkece8f2); padding: 13px 20px; border-radius: 10px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s; }
.o-kitsumi-16:hover { border-color: var(--gold); color: var(--gold-ink-lit); transform: translateY(-3px); }

/* <div> kitsumi · study mode 12:04 / 23:40 約束は 守る まもる · N4 · com */
.o-kitsumi-17 { position: relative; max-width: 480px; width: 100%; margin: 0 auto; }

/* <div> kitsumi · study mode 12:04 / 23:40 約束は 守る まもる · N4 · com */
.o-kitsumi-18 { position: relative; border: 1px solid var(--line2a2442); border-radius: 16px; overflow: hidden; background: linear-gradient(var(--bg15121f), var(--bg08070f)); aspect-ratio: 16 / 9; box-shadow: 0 30px 70px var(--shadow-000); transform-style: preserve-3d; transition: transform .18s ease-out, border-color .35s, box-shadow .35s; }
.o-kitsumi-18:hover { border-color: var(--gold); box-shadow: 0 38px 90px var(--shadow-000); }

.o-kitsumi-19 { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 18%, #c9982f14, transparent 72%); }

.o-kitsumi-20 { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: var(--glow, 0); transition: opacity .35s; background: radial-gradient(240px 200px at var(--mx, 50%) var(--my, 50%), #c9982f26, transparent 70%); }

.o-kitsumi-21 { position: absolute; left: -30%; top: -20%; width: 40%; height: 140%; pointer-events: none; transform: rotate(14deg); background: linear-gradient(90deg, transparent, var(--washffd98a0f) 50%, transparent); animation: frameSweep 9s ease-in-out 2s infinite; }

/* <div> kitsumi · study mode */
.o-kitsumi-22 { position: absolute; top: 12px; left: 14px; display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--ink726d85); }

.o-kitsumi-23 { width: 6px; height: 6px; border-radius: 50%; background: #c9455a; animation: recBlink 2.6s ease-in-out infinite; }

/* <div> 12:04 / 23:40 */
.o-kitsumi-24 { position: absolute; top: 12px; right: 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--ink-4a4463); }

.o-kitsumi-25 { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line211c33); }

.o-kitsumi-26 { position: absolute; left: 0; top: 0; bottom: 0; width: 86%; transform-origin: left; transform: scaleX(.593); background: linear-gradient(90deg, var(--gold), var(--gold-lit)); animation: playhead 23s linear infinite; }

/* <div> 約束は 守る まもる · N4 · common to keep (a promise); to protect */
.o-kitsumi-27 { position: absolute; left: 6%; right: 6%; bottom: 9%; text-align: center; }

/* <div> 約束は 守る まもる · N4 · common to keep (a promise); to protect */
.o-kitsumi-28 { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.45; color: var(--inkece8f2); text-shadow: 0 2px 6px var(--halo-000); }

/* <span> 約束は */
.o-kitsumi-29 { transition: color .3s; }
.o-kitsumi-29:hover { color: var(--gold-ink-lit); }

/* <span> 守る まもる · N4 · common to keep (a promise); to protect → a */
.o-kitsumi-30 { position: relative; color: var(--gold-ink-lit); border-bottom: 2px solid var(--gold-lit); cursor: default; animation: wordGlow 5s ease-in-out infinite; transition: text-shadow .3s; }
.o-kitsumi-30:hover { text-shadow: 0 0 18px #e8b84b88; }

/* <span> まもる · N4 · common to keep (a promise); to protect → add  */
.o-kitsumi-31 { position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%); white-space: nowrap; background: var(--bg0e0c18f2); border: 1px solid var(--gold); border-radius: 10px; padding: 8px 12px; font-size: 12px; line-height: 1.45; text-align: left; color: var(--inkded8e6); box-shadow: 0 12px 32px var(--shadow-000); animation: tipFloat 6s ease-in-out infinite; transition: border-color .3s, box-shadow .3s; }
.o-kitsumi-31:hover { border-color: var(--gold-lit); box-shadow: 0 16px 40px var(--shadow-000), 0 0 24px #c9982f3d; }

/* <span> まもる · N4 · common */
.o-kitsumi-32 { color: var(--gold-ink-lit); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; }

/* <span> → add to Anki */
.o-kitsumi-33 { color: var(--ink8e88a2); font-size: 11px; }

/* <div> 01 Watch Anime, YouTube, Netflix, local files. Whatever  */
.o-kitsumi-34 { position: relative; border: 1px solid var(--line2a2442); border-radius: 18px; background: linear-gradient(var(--bg181430), var(--bg100d1c)); margin-bottom: clamp(26px, 3.5vw, 44px); overflow: hidden; transform-style: preserve-3d; transition: transform .14s ease-out, border-color .35s; }
.o-kitsumi-34:hover { border-color: #c9982f88; }

.o-kitsumi-35 { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--glow, 0); transition: opacity .4s; background: radial-gradient(380px 260px at var(--mx, 50%) var(--my, 50%), #c9982f1f, transparent 70%); }

/* <div> 01 Watch Anime, YouTube, Netflix, local files. Whatever  */
.o-kitsumi-36 { margin-top: -1px; }

/* <div> 01 Watch Anime, YouTube, Netflix, local files. Whatever  */
.o-kitsumi-37 { position: relative; display: grid; grid-template-columns: 68px minmax(0, 200px) minmax(0, 1fr); align-items: baseline; gap: 6px 18px; padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px); border-top: 1px solid var(--line211c33); transition: background .3s, padding-left .35s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .o-kitsumi-37:hover { background: var(--bg17131f); padding-left: clamp(26px, 3.2vw, 34px); } }

.o-kitsumi-38 { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--gold), #8d1c2c); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.o-kitsumi-38:hover { transform: scaleY(1); }

/* <div> 01 */
.o-kitsumi-39 { display: flex; align-items: center; gap: 10px; }

/* <span> 01 */
.o-kitsumi-40 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .12em; color: var(--gold-ink-lit); }

.o-kitsumi-41 { width: 18px; height: 1px; background: #c9982f66; }

/* <h3> Watch */
.card-title { font-family: 'Cinzel', serif; font-weight: 600; font-size: 20px; margin: 0; color: var(--inkece8f2); }

/* <p> Anime, YouTube, Netflix, local files. Whatever you were  */
.o-kitsumi-42 { font-size: 17px; line-height: 1.5; color: var(--inkb6b0c6); margin: 0; }

/* <div> 01 · Subtitles 字幕 · あなたの Your subtitles, your rules. Pul */
.o-kitsumi-43 { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: clamp(26px, 3.5vw, 44px); }

/* <div> 01 · Subtitles 字幕 · あなたの Your subtitles, your rules. Pul */
.o-kitsumi-44 { flex: 1 1 calc(66% - 18px); min-width: 260px; box-sizing: border-box; position: relative; overflow: hidden; border: 1px solid var(--line2a2442); border-radius: 18px; background: linear-gradient(var(--bg181430), var(--bg100d1c)); padding: clamp(20px, 2.6vw, 26px) clamp(18px, 2.4vw, 24px) clamp(22px, 2.8vw, 28px); transform-style: preserve-3d; transition: transform .18s ease-out, border-color .35s; }
.o-kitsumi-44:hover { border-color: var(--gold); }

.panel-glow { position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0); transition: opacity .35s; background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 50%), #c9982f2b, transparent 70%); }

.o-kitsumi-45 { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--gold), #8d1c2c); opacity: var(--glow, 0); transition: opacity .35s; }

/* <div> 01 · Subtitles 字幕 · あなたの Your subtitles, your rules. Pul */
.o-kitsumi-46 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 34%); gap: 26px; align-items: center; }

/* <div> 01 · Subtitles */
.o-kitsumi-47 { display: flex; align-items: baseline; gap: 10px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink8e88a2); margin-bottom: 14px; }

/* <span> · */
.o-kitsumi-48 { color: var(--ink-4a4463); }

/* <div> 字幕 · あなたの */
.o-kitsumi-49 { font-size: 20px; line-height: 1.4; color: var(--ink726d85); margin-bottom: 12px; }

/* <h3> Your subtitles, your rules. */
.o-kitsumi-50 { font-family: 'Cinzel', serif; font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0 0 10px; color: var(--inkece8f2); }

/* <p> Pull them from the player or load your own .srt, .vtt or */
.card-note { font-size: 17px; line-height: 1.55; color: var(--inkb6b0c6); margin: 0; }

.o-kitsumi-51 { display: grid; gap: 8px; padding: 16px 14px; border: 1px solid var(--line211c33); border-radius: 12px; background: var(--bg-0a0812); animation: subsTilt 15s ease-in-out infinite; transform-origin: 50% 60%; }

.o-kitsumi-52 { height: 8px; width: 92%; transform-origin: left; transform: scaleX(.804); border-radius: 999px; background: var(--line2a2442); animation: barPulseB 6.5s ease-in-out infinite; }

.o-kitsumi-53 { height: 8px; width: 82%; transform-origin: left; transform: scaleX(.707); border-radius: 999px; background: #c9982f88; animation: barPulse 4.5s ease-in-out infinite; }

.o-kitsumi-54 { height: 8px; width: 92%; transform-origin: left; transform: scaleX(.587); border-radius: 999px; background: var(--line2a2442); animation: barPulseB 8s ease-in-out 1.2s infinite; }

.o-kitsumi-55 { display: flex; gap: 6px; margin-top: 6px; }

.o-kitsumi-56 { flex: 1; height: 20px; border-radius: 6px; border: 1px solid var(--line2a2442); animation: swatchLift 9s ease-in-out infinite; }

.o-kitsumi-57 { flex: 1; height: 20px; border-radius: 6px; border: 1px solid var(--line2a2442); animation: swatchLift 9s ease-in-out 3s infinite; }

.o-kitsumi-58 { flex: 1; height: 20px; border-radius: 6px; border: 1px solid var(--line2a2442); animation: swatchLift 9s ease-in-out 6s infinite; }

/* <div> 02 · Search 検索 · すぐに The subtitle hunt, without the side */
.o-kitsumi-59 { flex: 1 1 calc(34% - 18px); min-width: 260px; box-sizing: border-box; position: relative; overflow: hidden; border: 1px solid var(--line2a2442); border-radius: 18px; background: linear-gradient(var(--bg181430), var(--bg100d1c)); padding: clamp(20px, 2.6vw, 26px) clamp(18px, 2.4vw, 24px) clamp(22px, 2.8vw, 28px); transform-style: preserve-3d; transition: transform .18s ease-out, border-color .35s; }
.o-kitsumi-59:hover { border-color: var(--gold); }

/* <div> 02 · Search 検索 · すぐに The subtitle hunt, without the side */
.o-kitsumi-60 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }

.o-kitsumi-61 { position: relative; height: 118px; }

.o-kitsumi-62 { position: absolute; left: 8%; top: 16px; right: 14%; bottom: 0; border: 1px solid var(--line211c33); border-radius: 10px; background: var(--bg-0a0812); animation: floatBack 11s ease-in-out infinite; }

.o-kitsumi-63 { position: absolute; left: 14%; top: 8px; right: 8%; bottom: 8px; border: 1px solid var(--line2a2442); border-radius: 10px; background: var(--bg100d1a); animation: floatMid 8.5s ease-in-out .8s infinite; }

.o-kitsumi-64 { position: absolute; left: 10%; top: 0; right: 10%; bottom: 16px; border: 1px solid #c9982f66; border-radius: 10px; background: linear-gradient(var(--bg16121f), var(--bg0c0a14)); display: grid; align-content: center; gap: 7px; padding: 0 14px; animation: floatTop 6.5s ease-in-out infinite; }

.o-kitsumi-65 { height: 7px; width: 82%; transform-origin: left; transform: scaleX(.707); border-radius: 999px; background: #c9982f88; animation: barPulse 5.5s ease-in-out infinite; }

.o-kitsumi-66 { height: 6px; width: 92%; transform-origin: left; transform: scaleX(.957); border-radius: 999px; background: var(--line2a2442); animation: barPulseB 7.5s ease-in-out .6s infinite; }

.o-kitsumi-67 { height: 6px; width: 92%; transform-origin: left; transform: scaleX(.87); border-radius: 999px; background: var(--line2a2442); animation: barPulseB 9s ease-in-out 2s infinite; }

/* <div> 05 · Reader 読解 · 画面外 The same lookups, off the player. A */
.o-kitsumi-68 { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: stretch; }

/* <div> 05 · Reader 読解 · 画面外 The same lookups, off the player. A */
.o-kitsumi-69 { min-width: 0; box-sizing: border-box; position: relative; overflow: hidden; border: 1px solid var(--line2a2442); border-radius: 18px; background: linear-gradient(var(--bg181430), var(--bg100d1c)); padding: clamp(20px, 2.6vw, 26px) clamp(18px, 2.4vw, 24px) clamp(22px, 2.8vw, 28px); transform-style: preserve-3d; transition: transform .18s ease-out, border-color .35s; }
.o-kitsumi-69:hover { border-color: var(--gold); }

/* <div> 06 · Sync 同期 · 次話へ Set the offset once. Offsets from 10  */
.o-kitsumi-70 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 40%); gap: 20px; align-items: center; }

/* <div> kitsumi.log [WARN] “Just one more episode” [WARN] Watchi */
.o-kitsumi-71 { position: relative; overflow: hidden; border: 1px solid var(--line211c33); border-radius: 10px; background: var(--bg-0a0812); padding: 12px 13px; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.75; color: var(--inkb6b0c6); animation: logFloat 13s ease-in-out infinite; transform-origin: 60% 50%; }

.o-kitsumi-72 { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, #c9982f14 45%, transparent); animation: sheen 7s ease-in-out 1.5s infinite; }

/* <div> kitsumi.log */
.o-kitsumi-73 { position: relative; color: var(--gold-ink-lit); }

/* <div> [WARN] “Just one more episode” */
.o-kitsumi-74 { animation: logLine 6s ease-in-out infinite; }

/* <div> [WARN] Watching for 6 hours */
.o-kitsumi-75 { animation: logLine 7.5s ease-in-out 1.2s infinite; }

/* <div> [OK] Knows 1,200 new words _ */
.o-kitsumi-76 { animation: logLine 9s ease-in-out 2.4s infinite; }

/* <section> II Rook, Paper, Scissors! Flagship Chess, until the rule */
.o-top-17 { position: relative; margin: 0 0 clamp(44px, 6vw, 88px); padding: clamp(52px, 7vw, 88px) 28px clamp(48px, 6vw, 84px); background: linear-gradient(var(--bg0f0b1c), var(--bg1b1132) 46%, var(--bg0c0914)); border-top: 1px solid var(--line2a2442); border-bottom: 1px solid var(--line2a2442); overflow: hidden; }

.o-rps-1 { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(45deg, var(--lineffffff05) 25%, transparent 25%, transparent 75%, var(--lineffffff05) 75%), linear-gradient(45deg, var(--lineffffff05) 25%, transparent 25%, transparent 75%, var(--lineffffff05) 75%); background-size: 120px 120px; background-position: 0 0, 60px 60px; }

.o-rps-2 { position: absolute; left: 50%; top: -10%; width: min(900px, 90vw); height: 60%; margin-left: min(-450px, -45vw); pointer-events: none; background: radial-gradient(closest-side, #c9982f1f, transparent 72%); }

/* <div> II Rook, Paper, Scissors! Flagship Chess, until the rule */
.o-rps-3 { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }

/* <div> II Rook, Paper, Scissors! Flagship */
.o-rps-4 { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

/* <span> Flagship */
.o-rps-5 { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--ink-on-gold); background: var(--gold); border-radius: 999px; padding: 5px 12px; animation: flagPulse 4.5s ease-in-out infinite; transition: transform .3s; }
.o-rps-5:hover { transform: scale(1.08); }

.o-rps-6 { height: 1px; flex: 1; background: linear-gradient(90deg, #c9982f66, var(--lineffffff14) 30%, transparent); }

/* <div> Chess, until the rules fight back Online chess with a tw */
.o-rps-7 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(26px, 4vw, 48px); align-items: center; margin-bottom: clamp(28px, 4vw, 50px); }

/* <h2> Chess, until the rules fight back */
.o-rps-8 { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(40px, 6.2vw, 92px); line-height: 1; margin: 0 0 24px; text-wrap: pretty; }

/* <p> Online chess with a twist the board never agreed to. Pie */
.o-rps-9 { font-size: 22px; line-height: 1.55; color: var(--inke4dfee); margin: 0 0 16px; max-width: 560px; text-wrap: pretty; }

/* <p> The biggest thing I am building. It plays in the browser */
.o-rps-10 { font-size: 18px; line-height: 1.6; color: var(--inkb6b0c6); margin: 0 0 30px; max-width: 520px; }

/* <div> Play now rookpaperscissors.com ↗ No install, no account. */
.o-rps-11 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* <a> Play now */
.o-rps-12 { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; background: var(--gold); color: var(--ink-on-gold); padding: 17px 32px; border-radius: 12px; box-shadow: 0 18px 50px #c9982f33; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s; }
.o-rps-12:hover { background: var(--gold-lit); transform: translateY(-3px) scale(1.03); box-shadow: 0 26px 70px #c9982f5c; }

/* <a> rookpaperscissors.com ↗ */
.o-rps-13 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line66607f); color: var(--inkece8f2); padding: 16px 26px; border-radius: 12px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s; }
.o-rps-13:hover { border-color: var(--gold); color: var(--gold-ink-lit); transform: translateY(-3px); }

/* <span> No install, no account. */
.o-rps-14 { font-size: 16px; color: var(--ink8e88a2); }

/* <div> rook takes scissors ✕ Rook beats Scissors beats Paper be */
.o-rps-15 { position: relative; max-width: 620px; width: 100%; margin: 0 auto; }

/* <div> rook takes scissors ✕ */
.o-rps-16 { position: relative; border: 1px solid #c9982f4d; border-radius: 20px; overflow: hidden; background: var(--bg0b0914); aspect-ratio: 16 / 10; box-shadow: 0 40px 110px var(--shadow-000); transform-style: preserve-3d; transition: transform .18s ease-out, border-color .35s, box-shadow .35s; }
.o-rps-16:hover { border-color: var(--gold-lit); box-shadow: 0 50px 130px var(--shadow-000); }

.o-rps-17 { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: var(--glow, 0); transition: opacity .35s; background: radial-gradient(280px 280px at var(--mx, 50%) var(--my, 50%), #c9982f2b, transparent 70%); }

.o-rps-18 { position: absolute; inset: 0; background-image: linear-gradient(45deg, var(--bg16121f) 25%, transparent 25%, transparent 75%, var(--bg16121f) 75%), linear-gradient(45deg, var(--bg16121f) 25%, transparent 25%, transparent 75%, var(--bg16121f) 75%); background-size: 64px 64px; background-position: 0 0, 32px 32px; opacity: .9; }

.o-rps-19 { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 26%, #c9982f1f, transparent 72%); }

.o-rps-20 { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; pointer-events: none; background: linear-gradient(90deg, transparent, #c9982f14 45%, transparent); animation: sheen 9s ease-in-out 2s infinite; }

.o-rps-21 { position: absolute; left: 22%; top: 34%; width: 64px; height: 64px; border: 1px solid #c9982f4d; border-radius: 4px; animation: squareBlink 5s ease-in-out infinite; }

.o-rps-22 { position: absolute; right: 26%; bottom: 28%; width: 64px; height: 64px; border: 1px solid #8d1c2c66; border-radius: 4px; animation: squareBlink 7s ease-in-out 2.4s infinite; }

/* <div> rook takes scissors */
.o-rps-23 { position: absolute; top: 14px; left: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--ink726d85); }

/* <div> ✕ */
.o-rps-24 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 26px; }

.o-rps-25 { width: 54px; height: auto; filter: drop-shadow(0 8px 18px #000); animation: pieceStep 6s ease-in-out infinite; transform-origin: 50% 90%; }

/* <span> ✕ */
.o-rps-26 { font-family: 'Cinzel', serif; font-size: 24px; color: var(--gold-ink); animation: clash 6s ease-in-out infinite; }

.o-rps-27 { width: 48px; height: auto; opacity: .5; animation: pieceFall 6s ease-in-out infinite; transform-origin: 50% 90%; }

/* <div> Rook beats Scissors beats Paper beats Rook */
.o-rps-28 { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--inkb6b0c6); }

/* <span> Rook */
.o-rps-29 { border: 1px solid var(--line2a2442); border-radius: 999px; padding: 8px 14px; color: var(--inkece8f2); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s; animation: pillGlow 9s ease-in-out 4.5s infinite; }
.o-rps-29:hover { transform: translateY(-3px) scale(1.06); border-color: var(--gold); color: var(--gold-ink-lit); }

/* <span> Scissors */
.o-rps-30 { border: 1px solid var(--line2a2442); border-radius: 999px; padding: 8px 14px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s; animation: pillGlow 9s ease-in-out 3s infinite; }
.o-rps-30:hover { transform: translateY(-3px) scale(1.06); border-color: var(--gold); color: var(--gold-ink-lit); }

/* <span> Paper */
.o-rps-31 { border: 1px solid var(--line2a2442); border-radius: 999px; padding: 8px 14px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s; animation: pillGlow 9s ease-in-out 6s infinite; }
.o-rps-31:hover { transform: translateY(-3px) scale(1.06); border-color: var(--gold); color: var(--gold-ink-lit); }

/* <div> 01 The moves you know Openings, forks, pins, endgames. N */
.o-rps-32 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 18px; }

/* <div> 01 The moves you know Openings, forks, pins, endgames. N */
.o-rps-33 { position: relative; overflow: hidden; border: 1px solid var(--line2a2442); border-radius: 18px; background: linear-gradient(var(--bg141020), var(--bg0d0b16)); padding: 28px 26px; transform-style: preserve-3d; transition: transform .18s ease-out, border-color .35s; }
.o-rps-33:hover { border-color: var(--gold); }

/* <div> 01 The moves you know Openings, forks, pins, endgames. N */
.o-rps-34 { position: relative; }

/* <div> 01 */
.o-rps-35 { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink-lit); margin-bottom: 14px; }

/* <h3> The moves you know */
.o-rps-36 { font-family: 'Cinzel', serif; font-weight: 600; font-size: 21px; line-height: 1.25; margin: 0 0 10px; }

.o-rps-37 { display: block; position: relative; width: clamp(90px, 34vw - 200px, 200px); aspect-ratio: 200 / 180; margin: 26px 0 0 auto; pointer-events: none; opacity: .9; }

.o-rps-38 { position: absolute; left: -25.00%; top: -27.78%; width: 150.00%; height: auto; display: block; }

/* <section> III Work Work A slice of what I’ve shipped. Most product */
.o-top-18 { position: relative; padding: 0 28px clamp(44px, 6vw, 88px); max-width: 1240px; margin: 0 auto; }

/* <div> Work A slice of what I’ve shipped. Most product work sta */
.o-work-1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 40px); align-items: end; margin-bottom: clamp(24px, 3.5vw, 42px); }

/* <h2> Work */
.o-work-2 { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.05; margin: 0; }

/* <p> A slice of what I’ve shipped. Most product work stays pr */
.o-work-3 { font-size: 19px; line-height: 1.6; color: var(--inkb6b0c6); margin: 0; text-wrap: pretty; }

/* <div> Browser extension Shipped Kitsumi Interactive subtitles, */
.o-work-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 22px; }

/* <a> Browser extension Shipped Kitsumi Interactive subtitles, */
.o-work-5 { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--line2a2442); background: linear-gradient(var(--bg191333), var(--bg110e1d)); padding: clamp(20px, 2.6vw, 28px) clamp(18px, 2.4vw, 26px); color: var(--inkece8f2); transition: transform .18s ease-out, border-color .3s; border-radius: 18px; }
.o-work-5:hover { border-color: var(--gold); }

.o-work-6 { position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0); transition: opacity .35s; background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 50%), #c9982f2e, transparent 70%); }

/* <div> Browser extension Shipped */
.card-meta { position: relative; display: flex; justify-content: space-between; gap: 12px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink8e88a2); margin-bottom: 22px; }

/* <h3> Kitsumi */
.o-work-7 { font-family: 'Cinzel', serif; font-weight: 600; font-size: 23px; margin: 0 0 10px; }

/* <p> Interactive subtitles, dictionaries, study tools and Ank */
.o-work-8 { font-size: 17px; line-height: 1.55; color: var(--inkb6b0c6); margin: 0 0 18px; }

/* <span> kitsumi.org ↗ */
.o-work-9 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink-lit); }

.o-about-1 { position: absolute; left: -8%; top: 0; width: 44%; height: 70%; pointer-events: none; background: radial-gradient(closest-side, #8d1c2c1a, transparent 72%); }

.o-about-2 { position: absolute; left: -12px; bottom: 40px; width: clamp(0px, 34vw - 200px, 205px); aspect-ratio: 200 / 220; pointer-events: none; opacity: .9; }

.o-about-3 { position: absolute; left: -25.00%; top: -22.73%; width: 150.00%; height: auto; display: block; }

/* <div> IV About */
.o-about-4 { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }

.o-about-5 { height: 1px; flex: 1; background: linear-gradient(90deg, #b3264c88, var(--lineffffff14) 30%, transparent); }

/* <div> Who’s behind this D eveloper, builder of oddly specific  */
.o-about-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 4.5vw, 56px); align-items: center; }

.o-about-7 { position: relative; max-width: 420px; padding: 14px; cursor: grab; touch-action: none; transition: filter .35s; }
.o-about-7:hover { filter: brightness(1.06) drop-shadow(0 0 26px #c9982f3d); }

.o-portrait-1 { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: conic-gradient(#c9982f00, #c9982f55 12%, #c9982f00 26%, #c9982f00 60%, #c9982f33 74%, #c9982f00 88%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); animation: ringSpin 26s linear infinite; }

.o-portrait-2 { position: absolute; inset: 0; border: 1px solid #c9982f66; border-radius: 50%; pointer-events: none; }

.o-portrait-3 { position: relative; border-radius: 50%; overflow: hidden; border: 1px solid var(--line2a2442); box-shadow: 0 40px 100px var(--shadow-000); }

.o-portrait-4 { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* <h2> Who’s behind this */
.o-about-8 { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; margin: 0 0 22px; }

/* <p> D eveloper, builder of oddly specific utilities, languag */
.o-about-9 { font-size: 19px; line-height: 1.7; color: var(--inkd6d0e2); margin: 0 0 26px; text-wrap: pretty; }

/* <span> D */
.o-about-10 { float: left; font-family: 'UnifrakturMaguntia', serif; font-size: 62px; line-height: .8; color: var(--gold-ink-lit); margin: 4px 12px 0 0; cursor: pointer; animation: markPulse 7s ease-in-out infinite; transition: text-shadow .3s, transform .4s; }
.o-about-10:hover { text-shadow: 0 0 22px var(--gold-lit); transform: rotate(-4deg) scale(1.08); }

/* <div> Enjoys Building computers Games & strange experiments Yo */
.o-about-11 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }

/* <div> Enjoys */
.o-about-12 { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink-lit); margin-bottom: 12px; }

/* <div> Building computers Games & strange experiments YouTube r */
.o-about-13 { display: grid; gap: 6px; font-size: 17px; color: var(--inkb8b2c6); }

/* <div> Python C++ Unreal Engine React TypeScript Vite Docker No */
.o-about-14 { display: flex; flex-wrap: wrap; gap: 8px; }

/* <span> Python */
.tag { font-size: 15px; border: 1px solid var(--line66607f); color: var(--inkded8e6); padding: 6px 13px; border-radius: 999px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s, box-shadow .3s; }
.tag:hover { transform: translateY(-3px) scale(1.05); border-color: var(--gold); color: var(--gold-ink-lit); box-shadow: 0 8px 22px var(--shadow00000066); }

/* <div> Currently learning Japanese. The kanji war rages on. */
.o-about-15 { font-size: 16px; color: var(--inkb6b0c6); margin-top: 14px; font-style: italic; }

.o-support-1 { height: 1px; flex: 1; background: linear-gradient(90deg, var(--ink4c9a6a88), var(--lineffffff14) 30%, transparent); }

/* <div> Support development Everything I make is free. Support p */
.o-support-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 40px); align-items: end; margin-bottom: clamp(22px, 3vw, 38px); }

/* <div> Most helpful Ko-fi A coffee, no strings The fastest and  */
.o-support-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }

/* <a> Most helpful Ko-fi A coffee, no strings The fastest and  */
.o-support-4 { position: relative; overflow: hidden; display: block; border: 1px solid var(--gold); background: linear-gradient(var(--bg1c1533), var(--bg100e1c)); padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 28px); color: var(--inkece8f2); box-shadow: 0 30px 80px var(--shadow-000); border-radius: 20px; transition: transform .18s ease-out, box-shadow .3s; }
.o-support-4:hover { box-shadow: 0 40px 100px var(--shadow-000); }

.o-support-5 { position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0); transition: opacity .35s; background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%), #e8b84b33, transparent 70%); }

/* <div> Most helpful */
.o-support-6 { position: absolute; top: 18px; right: 20px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-on-gold); background: var(--gold); padding: 5px 12px; font-weight: 600; border-radius: 999px; }

/* <div> Ko-fi */
.o-support-7 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.o-support-8 { width: 22px; height: 22px; flex-shrink: 0; }

/* <span> Ko-fi */
.o-support-9 { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink-lit); }

/* <div> A coffee, no strings */
.o-support-10 { font-family: 'Cinzel', serif; font-weight: 600; font-size: 26px; margin-bottom: 8px; }

/* <p> The fastest and most helpful way to say thanks. Goes str */
.o-support-11 { font-size: 17px; color: var(--inkb8b2c6); margin: 0; }

/* <a> Patreon · monthly Keep the lights on Predictable funding */
.o-support-12 { position: relative; overflow: hidden; display: block; border: 1px solid var(--line2a2442); background: var(--bg151129); padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 28px); color: var(--inkece8f2); border-radius: 20px; transition: transform .18s ease-out, border-color .3s; }
.o-support-12:hover { border-color: var(--gold); }

.o-support-13 { position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0); transition: opacity .35s; background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%), #c9982f2e, transparent 70%); }

/* <span> Patreon · monthly */
.o-support-14 { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink8e88a2); }

/* <section> VI FAQ Questions people actually ask Kitsumi Rook, Paper */
.o-top-19 { position: relative; padding: 0 28px clamp(44px, 6vw, 88px); max-width: 900px; margin: 0 auto; }

.o-faq-1 { position: absolute; right: -66px; top: 12%; height: min(52vh, 480px); width: clamp(0px, 34vw - 200px, 170px); pointer-events: none; }

.o-vineright-1 { position: absolute; left: -25.00%; top: -7.86%; width: 150.00%; height: auto; display: block; }

.o-faq-2 { height: 1px; flex: 1; background: linear-gradient(90deg, var(--ink7a5cc488), var(--lineffffff14) 30%, transparent); }

/* <h2> Questions people actually ask */
.o-faq-3 { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; margin: 0 0 26px; }

/* <div> Kitsumi Rook, Paper, Scissors The medieval game YouTube */
.o-faq-4 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2.6vw, 30px); }

/* <button> Kitsumi */
.o-faq-5 { position: relative; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .1em; background: var(--bg100e1c); border: 1px solid var(--line2a2442); color: var(--inkb6b0c6); padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: color .25s, border-color .25s, background .25s; }
.o-faq-5:hover { border-color: var(--gold); color: var(--gold-ink-lit); }

.o-faq-6 { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--gold); background: var(--bg1c1533); box-shadow: 0 0 22px #c9982f33; }

/* <div> Is Kitsumi free? − Yes. No accounts, no subscriptions, n */
.o-faq-7 { position: relative; overflow: hidden; border: 1px solid var(--line211c33); border-radius: 20px; background: linear-gradient(var(--bg120f20), var(--bg0c0a14)); padding: 4px clamp(16px, 2.4vw, 26px); transform-style: preserve-3d; }

.o-faq-8 { position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0); transition: opacity .4s; background: radial-gradient(420px 300px at var(--mx, 50%) var(--my, 50%), #c9982f1f, transparent 70%); }

/* <div> Is Kitsumi free? − Yes. No accounts, no subscriptions, n */
.faq-item { position: relative; border-top: 1px solid var(--line2a2442); }

/* <button> Is Kitsumi free? − */
.faq-q { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: none; border: 0; cursor: pointer; padding: 22px 10px; text-align: left; color: var(--inkece8f2); font-family: 'Cinzel', serif; font-size: 19px; font-weight: 600; border-radius: 12px; transition: color .25s, background .25s, padding-left .25s; }
.faq-q:hover { color: var(--gold-ink-lit); }
/* on touch a tap leaves :hover stuck, so the row would stay shifted */
@media (hover: hover) { .faq-q:hover { background: var(--lineffffff08); padding-left: 18px; } }

/* <span> − */
.o-faq-9 { flex-shrink: 0; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #c9982f4d; color: var(--gold-ink); font-size: 18px; line-height: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s; }
.o-faq-9:hover { border-color: var(--gold-lit); color: var(--gold-ink-lit); }

/* <p> Yes. No accounts, no subscriptions, no tracking, no tele */
.faq-a { font-size: 18px; line-height: 1.65; color: var(--inkb8b2c6); margin: 0 0 24px; padding: 0 48px 0 10px; max-width: 680px; animation: answerIn .45s cubic-bezier(.2,.8,.2,1); }

.o-faq-10 { border-top: 1px solid var(--line2a2442); }

/* <section> VII Contact Say hello Ideas, collaborations, controlled  */
.o-top-20 { position: relative; padding: 0 28px clamp(48px, 6vw, 96px); max-width: 1240px; margin: 0 auto; }

/* <div> Say hello Ideas, collaborations, controlled chaos. Email */
.o-contact-1 { position: relative; overflow: hidden; border: 1px solid var(--gold); background: linear-gradient(var(--bg1c1533), var(--bg100e1c)); border-radius: 26px; transform-style: preserve-3d; padding: clamp(30px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(22px, 3vw, 40px); align-items: center; box-shadow: 0 30px 90px var(--shadow-000); transition: border-color .35s, box-shadow .35s; }
.o-contact-1:hover { border-color: var(--gold-lit); box-shadow: 0 40px 110px var(--shadow-000); }

.o-contact-2 { position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0); transition: opacity .4s; background: radial-gradient(460px 340px at var(--mx, 50%) var(--my, 50%), #c9982f26, transparent 70%); }

.o-contact-3 { position: absolute; left: -14%; top: -30%; width: 46%; height: 160%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--washffd98a12) 45%, transparent); animation: sheen 14s ease-in-out 3s infinite; }

/* <h2> Say hello */
.o-contact-4 { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; margin: 0 0 14px; }

/* <p> Ideas, collaborations, controlled chaos. Email is the su */
.o-contact-5 { font-size: 19px; line-height: 1.6; color: var(--inkb8b2c6); margin: 0 0 26px; max-width: 480px; text-wrap: pretty; }

/* <a> olexifyyy@gmail.com */
.o-contact-6 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; background: var(--gold); color: var(--ink-on-gold); padding: 15px 24px; border-radius: 10px; box-shadow: 0 14px 40px #c9982f2b; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s; }
.o-contact-6:hover { background: var(--gold-lit); transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 60px #c9982f52; }

/* <a> Join the Discord */
.o-contact-7 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line66607f); color: var(--inkece8f2); padding: 15px 24px; border-radius: 10px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s; }
.o-contact-7:hover { border-color: var(--gold); color: var(--gold-ink-lit); transform: translateY(-3px); }

/* <button> Copy address */
.o-contact-8 { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; background: none; border: 1px solid var(--line66607f); color: var(--inkece8f2); padding: 15px 24px; border-radius: 10px; cursor: pointer; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s; }
.o-contact-8:hover { border-color: var(--gold); color: var(--gold-ink-lit); transform: translateY(-3px); }

/* <div> YouTube @Olexify ↗ Twitch Olexifyyy ↗ X @Olexifyyy ↗ Ins */
.o-contact-9 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 18px; }

/* <a> YouTube @Olexify ↗ */
.o-contact-10 { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line2a2442); padding: 11px 4px; border-radius: 8px; color: var(--inkece8f2); transition: color .25s, border-color .25s, padding-left .3s cubic-bezier(.2,.8,.2,1), background .25s; }
.o-contact-10:hover { color: var(--gold-ink-lit); border-color: var(--gold); }
@media (hover: hover) { .o-contact-10:hover { padding-left: 14px; background: var(--lineffffff08); } }

/* <span> @Olexify ↗ */
.o-contact-11 { display: inline-flex; align-items: baseline; gap: 8px; color: var(--inkb6b0c6); font-size: 16px; transition: color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.o-contact-11:hover { color: var(--inkded8e6); transform: translateX(-2px); }

/* <span> ↗ */
.o-contact-12 { color: var(--gold-ink); font-size: 13px; }

/* <footer> Olexify Software that teaches you something while you’re */
.o-page-8 { position: relative; z-index: 50; border-top: 1px solid var(--line2a2442); background: var(--bg0e0c18); padding: clamp(36px, 5vw, 58px) 28px 28px; border-radius: 32px 32px 0 0; margin-top: 20px; box-shadow: 0 -30px 80px var(--shadow00000066); }

.o-page-9 { position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #c9982f88, transparent); }

.o-page-10 { position: absolute; inset: 0; border-radius: 32px 32px 0 0; overflow: hidden; pointer-events: none; }

.o-page-11 { position: absolute; left: 20%; right: 20%; top: 0; height: 120px; background: radial-gradient(50% 100% at 50% 0%, #c9982f1f, transparent 72%); }

.o-page-12 { position: absolute; left: -10%; bottom: -40%; width: 56%; height: 90%; background: radial-gradient(50% 60% at 30% 100%, #c9982f17, transparent 70%); filter: blur(24px); animation: lamp 13s ease-in-out infinite; }

.o-page-13 { position: absolute; right: -12%; bottom: -46%; width: 60%; height: 100%; background: radial-gradient(50% 60% at 70% 100%, #8d1c2c1c, transparent 70%); filter: blur(26px); animation: lamp 17s ease-in-out 4s infinite; }

.o-page-14 { position: absolute; left: -14%; top: -30%; width: 34%; height: 160%; transform: rotate(16deg); background: linear-gradient(90deg, transparent, var(--washffd98a08) 50%, transparent); animation: sheen 18s ease-in-out 5s infinite; }

.o-page-15 { position: absolute; right: 0; top: -46px; width: clamp(0px, 34vw - 190px, 230px); aspect-ratio: 240 / 120; pointer-events: none; opacity: .85; }

.o-page-16 { position: absolute; left: -20.83%; top: -41.67%; width: 141.67%; height: auto; display: block; }

/* <div> Olexify Software that teaches you something while you’re */
.o-page-17 { position: relative; max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }

/* <div> Olexify Software that teaches you something while you’re */
.o-page-18 { position: relative; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }

/* <div> Olexify */
.o-page-19 { font-family: 'UnifrakturMaguntia', serif; font-size: 34px; line-height: 1; color: var(--gold-ink-lit); animation: markPulse 8s ease-in-out infinite; transition: transform .4s; }
.o-page-19:hover { transform: rotate(-2deg) scale(1.04); }

/* <p> Software that teaches you something while you’re doing s */
.o-page-20 { font-size: 16px; line-height: 1.5; color: var(--inkb6b0c6); margin: 0; max-width: 280px; }

/* <nav> Kitsumi ✦ Rook, Paper, Scissors ✦ Work ✦ About ✦ Support */
.o-page-21 { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }

/* <a> Kitsumi */
.o-page-22 { position: relative; font-size: 16px; color: var(--inkded8e6); padding: 4px 0; transition: color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.o-page-22:hover { color: var(--gold-ink-lit); transform: translateY(-2px); }

.o-page-23 { position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.o-page-23:hover { transform: scaleX(1); }

/* <span> ✦ */
.o-page-24 { color: var(--ink-4a4463); font-size: 12px; }

/* <div> © 2026 Olexify While alive: build() learn() olexifyyy@gm */
.o-page-25 { position: relative; max-width: 1240px; margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line2a2442); padding-top: 18px; font-size: 15px; color: var(--inkb6b0c6); }

/* <span> While alive: build() learn() */
.o-page-26 { font-family: 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }

/* <a> olexifyyy@gmail.com */
.o-page-27 { color: var(--inkb6b0c6); }

/* <section> Keep going */
.o-page-28 { position: relative; height: clamp(560px, 96vh, 1000px); overflow: hidden; background: linear-gradient(var(--bg0e0c18), var(--bg-0a0812) 38%, var(--bg07050e) 72%, var(--bg05040a)); }

.o-page-29 { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, var(--bg1a1030), transparent 70%); }

.o-page-30 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCW 26.0s linear 0s infinite; }

.o-page-31 { position: absolute; transform: translate(120px, -45px); width: 8px; height: 10px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #6e1424, #3a060c); opacity: 0.40; box-shadow: 0 0 10px #b3121f2b; }

.o-page-32 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCCW 33.3s linear -2.4s infinite; }

.o-page-33 { position: absolute; transform: translate(167px, -14px); width: 13px; height: 17px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #a8283a, #3a060c); opacity: 0.54; box-shadow: 0 0 10px #b3121f2b; }

.o-page-34 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCW 40.6s linear -4.8s infinite; }

.o-page-35 { position: absolute; transform: translate(214px, 17px); width: 9px; height: 12px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #c9455a, #3a060c); opacity: 0.68; box-shadow: 0 0 10px #b3121f2b; }

.o-page-36 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCCW 47.9s linear -7.2s infinite; }

.o-page-37 { position: absolute; transform: translate(261px, -42px); width: 14px; height: 18px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #8d1c2c, #3a060c); opacity: 0.82; box-shadow: 0 0 10px #b3121f2b; }

.o-page-38 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCW 55.2s linear -9.6s infinite; }

.o-page-39 { position: absolute; transform: translate(308px, -11px); width: 10px; height: 13px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #6e1424, #3a060c); opacity: 0.40; box-shadow: 0 0 10px #b3121f2b; }

.o-page-40 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCCW 28.5s linear -12s infinite; }

.o-page-41 { position: absolute; transform: translate(355px, 20px); width: 15px; height: 20px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #a8283a, #3a060c); opacity: 0.54; box-shadow: 0 0 10px #b3121f2b; }

.o-page-42 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCW 35.8s linear -14.4s infinite; }

.o-page-43 { position: absolute; transform: translate(402px, -39px); width: 11px; height: 14px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #c9455a, #3a060c); opacity: 0.68; box-shadow: 0 0 10px #b3121f2b; }

.o-page-44 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCCW 43.1s linear -16.8s infinite; }

.o-page-45 { position: absolute; transform: translate(149px, -8px); width: 16px; height: 21px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #8d1c2c, #3a060c); opacity: 0.82; box-shadow: 0 0 10px #b3121f2b; }

.o-page-46 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCW 50.4s linear -19.2s infinite; }

.o-page-47 { position: absolute; transform: translate(196px, 23px); width: 12px; height: 16px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #6e1424, #3a060c); opacity: 0.40; box-shadow: 0 0 10px #b3121f2b; }

.o-page-48 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCCW 57.7s linear -21.6s infinite; }

.o-page-49 { position: absolute; transform: translate(243px, -36px); width: 8px; height: 10px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #a8283a, #3a060c); opacity: 0.54; box-shadow: 0 0 10px #b3121f2b; }

.o-page-50 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCW 31.0s linear -24s infinite; }

.o-page-51 { position: absolute; transform: translate(290px, -5px); width: 13px; height: 17px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #c9455a, #3a060c); opacity: 0.68; box-shadow: 0 0 10px #b3121f2b; }

.o-page-52 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCCW 38.3s linear -26.4s infinite; }

.o-page-53 { position: absolute; transform: translate(337px, 26px); width: 9px; height: 12px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #8d1c2c, #3a060c); opacity: 0.82; box-shadow: 0 0 10px #b3121f2b; }

.o-page-54 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCW 45.6s linear -28.8s infinite; }

.o-page-55 { position: absolute; transform: translate(384px, -33px); width: 14px; height: 18px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #6e1424, #3a060c); opacity: 0.40; box-shadow: 0 0 10px #b3121f2b; }

.o-page-56 { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; animation: orbitCCW 52.9s linear -31.2s infinite; }

.o-page-57 { position: absolute; transform: translate(131px, -2px); width: 10px; height: 13px; border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%; background: linear-gradient(150deg, #a8283a, #3a060c); opacity: 0.54; box-shadow: 0 0 10px #b3121f2b; }

/* the descent rose. min() took the more negative value here too, so it hung
   left of centre; and it is driven by initDescentBloom, so it keeps its own
   transform origin */
.o-page-58 { position: absolute; left: 50%; top: 22%; width: min(600px, 70vw); aspect-ratio: 620 / 460; transform: translateX(-50%); transform-origin: 50% 38%; pointer-events: none; opacity: .95; will-change: transform; }

.o-page-59 { position: absolute; left: -11.29%; top: -15.22%; width: 122.58%; height: auto; display: block; }

/* <div> Keep going */
.o-page-60 { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-4a4463); }

.o-page-61 { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, var(--bg05040a)); }