/* MAGI: the story. Night indigo, parchment and gold. One type system, three jobs:
   Amiri (Naskh-born serif) speaks: every title and every line, set large and tight, one voice.
   Zen Antique is the manga's own hand: the Japanese titles down the side, as Ohtaka's title pages set them.
   Reem Kufi only labels: small, tracked capitals, in gold. Nothing mixes voices inside a title. */
.magi_wrap {
  --magi-night: #04060d;
  --magi-ink: #f1e8d6;
  --magi-dim: rgba(241, 232, 214, 0.62);
  --magi-gold: #e3b66b;
  --magi-gold-2: #f7dca6;
  --magi-kufi: 'Magi Kufi', 'Reem Kufi', system-ui, sans-serif;
  --magi-naskh: 'Magi Naskh', 'Amiri', Georgia, serif;
  --magi-jp: 'Magi Mincho', 'Zen Antique', serif;
  --magi-pad: clamp(20px, 2.6vw, 40px);
  --magi-col: clamp(28px, 6vw, 112px);
  --magi-low: clamp(84px, 11vh, 124px);
  position: relative; background: var(--magi-night); color: var(--magi-ink);
}
.magi_wrap .magi_contain { position: relative; height: 100vh; height: 100svh; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.magi_wrap .magi_world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.magi_wrap :focus-visible { outline: 1px solid var(--magi-gold-2); outline-offset: 6px; border-radius: 4px; }
.magi_wrap .magi_label { font: 500 11px/1.2 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-gold); }

/* ---- the beats ---- */
.magi_wrap .magi_layers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.magi_wrap .magi_layers::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: -1; background: linear-gradient(to top, rgba(4, 6, 13, 0.66), rgba(4, 6, 13, 0)); }
.magi_wrap .magi_layers::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: var(--magi-plate, 0); background: radial-gradient(40% 62% at 18% 60%, rgba(4, 6, 13, 0.82), rgba(4, 6, 13, 0) 74%); pointer-events: none; }
.magi_wrap .magi_layer { position: absolute; visibility: hidden; opacity: 0; }

/* the title card: the Japanese down the side, the Night above, the title, one line under a hairline */
.magi_wrap .magi_layer.is-card {
  left: var(--magi-col); bottom: var(--magi-low); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto;
  column-gap: clamp(20px, 2.2vw, 36px); align-items: end;
}
.magi_wrap .magi_card_jt {
  grid-column: 1; grid-row: 1 / span 3; align-self: end; margin: 0; writing-mode: vertical-rl;
  font: 400 clamp(44px, 4.8vw, 80px)/1 var(--magi-jp); letter-spacing: 0.04em; color: var(--magi-ink);
  text-shadow: 0 0 40px rgba(4, 6, 13, 0.8);
}
.magi_wrap .magi_card_no { grid-column: 2; grid-row: 1; display: flex; gap: 14px; align-items: baseline; margin: 0 0 18px; }
.magi_wrap .magi_card_ja { font: 400 17px/1 var(--magi-jp); color: var(--magi-gold-2); }
.magi_wrap .magi_card_en { font: 500 11px/1 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-gold); }
.magi_wrap .magi_card_t {
  grid-column: 2; grid-row: 2; margin: 0; max-width: 9.5em;
  font: 400 clamp(40px, 4.6vw, 80px)/1 var(--magi-naskh); letter-spacing: -0.018em; color: var(--magi-ink);
  text-shadow: 0 2px 30px rgba(4, 6, 13, 0.7);
}
.magi_wrap .magi_card_line {
  grid-column: 2; grid-row: 3; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(227, 182, 107, 0.4); max-width: 32ch;
  font: 400 clamp(17px, 1.2vw, 19px)/1.5 var(--magi-naskh); color: rgba(241, 232, 214, 0.88); text-shadow: 0 1px 14px rgba(4, 6, 13, 0.85);
  opacity: 0; transform: translateY(10px); transition: opacity 1s ease 0.35s, transform 1.2s cubic-bezier(0.2, 0.7, 0.1, 1) 0.35s;
}
.magi_wrap .magi_layer.is-on .magi_card_line { opacity: 1; transform: none; }
.magi_wrap .magi_word { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.magi_wrap .magi_char { display: inline-block; }

/* the hero: the title is in the sky (the Rukh write it); the name sits low on the left, the facts low right */
.magi_wrap .magi_layer.is-hero { inset: 0; }
.magi_wrap .magi_hero_t { position: absolute; left: var(--magi-col); bottom: var(--magi-low); margin: 0; font: 400 clamp(48px, 6.4vw, 120px)/0.92 var(--magi-naskh); letter-spacing: -0.025em; text-shadow: 0 2px 40px rgba(4, 6, 13, 0.75); }
.magi_wrap .magi_hero_l { display: block; }
.magi_wrap .magi_hero_l.is-2 { padding-left: 1.15em; }
.magi_wrap .magi_hero_meta { position: absolute; right: var(--magi-col); bottom: calc(var(--magi-low) + 6px); margin: 0; display: grid; gap: 18px; text-align: right; }
.magi_wrap .magi_hero_row { padding-top: 10px; border-top: 1px solid rgba(227, 182, 107, 0.36); }
.magi_wrap .magi_hero_dd { margin: 6px 0 0; font: 400 19px/1.25 var(--magi-naskh); color: var(--magi-ink); }
.magi_wrap .magi_hero_scroll { position: absolute; left: 50%; bottom: calc(var(--magi-pad) - 4px); margin: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.magi_wrap .magi_hero_scroll_line { width: 1px; height: 38px; background: linear-gradient(to bottom, transparent, var(--magi-gold)); transform-origin: top; animation: magi-drip 2.4s cubic-bezier(0.6, 0, 0.2, 1) infinite; }
@keyframes magi-drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* the home of souls: Baba's words are the card */
.magi_wrap .magi_layer.is-flow { right: var(--magi-col); bottom: var(--magi-low); display: grid; grid-template-columns: auto auto; column-gap: clamp(20px, 2.2vw, 36px); align-items: start; max-width: min(46vw, 760px); }
.magi_wrap .magi_flow_jt { grid-column: 1; grid-row: 1 / span 3; margin: 0; writing-mode: vertical-rl; font: 400 clamp(44px, 4.8vw, 80px)/1 var(--magi-jp); letter-spacing: 0.04em; }
.magi_wrap .magi_layer.is-flow .magi_card_no { grid-row: 1; }
.magi_wrap .magi_flow_q { grid-column: 2; grid-row: 2; position: relative; margin: 0; padding: 0; border: 0; quotes: none; }   /* the VE's base blockquote has a grey rule: not ours */
.magi_wrap .magi_flow_mark { display: block; height: 0.44em; margin: 0 0 0.06em -0.07em; overflow: hidden; font: 400 clamp(150px, 13vw, 240px)/0.8 var(--magi-naskh); color: var(--magi-gold); text-shadow: 0 0 40px rgba(227, 182, 107, 0.35); }
.magi_wrap .magi_flow_a { margin: 0; font: 400 clamp(40px, 4.4vw, 76px)/1.02 var(--magi-naskh); letter-spacing: -0.018em; text-shadow: 0 2px 30px rgba(4, 6, 13, 0.8); }
.magi_wrap .magi_flow_b { margin: 18px 0 0; max-width: 22ch; font: 400 clamp(22px, 1.9vw, 32px)/1.25 var(--magi-naskh); color: rgba(241, 232, 214, 0.86); text-shadow: 0 2px 20px rgba(4, 6, 13, 0.8); }
.magi_wrap .magi_flow_by { grid-column: 2; grid-row: 3; margin: 22px 0 0; padding-top: 12px; border-top: 1px solid rgba(227, 182, 107, 0.4); font: 500 11px/1.3 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-gold); }
.magi_wrap .magi_flow_word { display: inline-block; opacity: 0.12; transition: opacity 0.9s ease, filter 0.9s ease; filter: blur(3px); }
.magi_wrap .magi_flow_word.is-lit { opacity: 1; filter: none; }

/* a soul let go, with its name */
.magi_wrap .magi_soul { position: absolute; left: 0; top: 0; width: 44px; height: 31px; margin: -15px 0 0 -22px; z-index: 3; color: #fff6e0; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 236, 196, 1)) drop-shadow(0 0 22px rgba(255, 210, 140, 0.9)); }
.magi_wrap .magi_soul_trail { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; z-index: 2; border-radius: 50%; background: #fff3d8; box-shadow: 0 0 12px 3px rgba(255, 214, 150, 0.8); pointer-events: none; }
.magi_wrap .magi_soul_name { position: absolute; left: 0; top: 0; z-index: 3; margin: 0; pointer-events: none; white-space: nowrap; font: 400 clamp(20px, 1.7vw, 28px)/1 var(--magi-naskh); color: #fff3d8; text-shadow: 0 0 18px rgba(255, 214, 150, 0.9), 0 0 2px rgba(4, 6, 13, 0.9); }
.magi_wrap .magi_soul_name span { display: inline-block; }

/* ---- chrome ---- */
.magi_wrap .magi_mark { position: absolute; top: var(--magi-pad); left: var(--magi-pad); z-index: 6; display: flex; align-items: baseline; gap: 12px; color: var(--magi-ink); text-decoration: none; transition: opacity 0.4s ease; }
.magi_wrap .magi_mark_ja { font: 400 28px/1 var(--magi-jp); color: var(--magi-gold-2); }
.magi_wrap .magi_mark_en { font: 500 11px/1 var(--magi-kufi); letter-spacing: 0.24em; text-transform: uppercase; }
.magi_wrap .magi_mark, .magi_wrap .magi_card_no, .magi_wrap .magi_ctl { text-shadow: 0 0 16px rgba(4, 6, 13, 0.85), 0 0 4px rgba(4, 6, 13, 0.6); }
.magi_wrap.is-paper .magi_mark, .magi_wrap.is-paper .magi_ctl { text-shadow: none; }

.magi_wrap .magi_vessel { position: absolute; top: calc(var(--magi-pad) - 6px); right: var(--magi-pad); z-index: 6; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--magi-gold); }
.magi_wrap .magi_vessel_seal { display: block; width: 46px; height: 46px; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); }
.magi_wrap .magi_vessel_seal svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(227, 182, 107, 0.5)); }
.magi_wrap .magi_vessel:hover .magi_vessel_seal, .magi_wrap .magi_vessel:focus-visible .magi_vessel_seal { transform: scale(1.12); }
.magi_wrap .magi_vessel_now { order: -1; font: 400 17px/1 var(--magi-jp); color: var(--magi-ink); }

.magi_wrap .magi_index { position: absolute; inset: 0; z-index: 9; background: rgba(4, 6, 13, 0.94); backdrop-filter: blur(8px); }
.magi_wrap .magi_index[hidden] { display: none; }
.magi_wrap .magi_index_seal { position: absolute; left: 50%; top: 50%; width: min(66vh, 74vw); aspect-ratio: 1; transform: translate(-50%, -50%); color: rgba(227, 182, 107, 0.55); }
.magi_wrap .magi_index_seal svg { width: 100%; height: 100%; overflow: visible; }
.magi_wrap .magi_index_list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.magi_wrap .magi_index_item { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.magi_wrap .magi_index_link { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px; color: var(--magi-ink); text-decoration: none; text-align: center; }
.magi_wrap .magi_index_dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(247, 220, 166, 0.7); transition: background 0.3s ease, box-shadow 0.3s ease; }
.magi_wrap .magi_index_link:hover .magi_index_dot, .magi_wrap .magi_index_link:focus-visible .magi_index_dot, .magi_wrap .magi_index_link.is-now .magi_index_dot { background: var(--c); box-shadow: 0 0 18px 4px var(--c); border-color: transparent; }
.magi_wrap .magi_index_ja { font: 400 20px/1 var(--magi-jp); }
.magi_wrap .magi_index_en { font: 500 10px/1.2 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-gold); white-space: nowrap; }
.magi_wrap .magi_index_core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--magi-gold-2); text-decoration: none; }
.magi_wrap .magi_index_core_ja { font: 400 40px/1 var(--magi-jp); }
.magi_wrap .magi_index_core_en { font: 500 11px/1 var(--magi-kufi); letter-spacing: 0.24em; text-transform: uppercase; }
.magi_wrap .magi_index_close { position: absolute; top: var(--magi-pad); right: var(--magi-pad); padding: 8px 0; border: 0; background: none; cursor: pointer; font: 500 11px/1 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-ink); }

.magi_wrap .magi_controls { position: absolute; right: var(--magi-pad); bottom: var(--magi-pad); z-index: 6; display: flex; gap: 24px; align-items: center; }
.magi_wrap .magi_ctl { display: inline-flex; align-items: baseline; gap: 9px; padding: 6px 0; border: 0; background: none; cursor: pointer; font: 500 10px/1 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-dim); transition: color 0.3s ease; }
.magi_wrap .magi_ctl_ja { font: 400 16px/1 var(--magi-jp); letter-spacing: 0; color: var(--magi-gold); }
.magi_wrap .magi_ctl:hover, .magi_wrap .magi_ctl:focus-visible, .magi_wrap .magi_ctl[aria-pressed='true'] { color: var(--magi-ink); }
.magi_wrap .magi_gpu { position: absolute; right: 0; bottom: calc(100% + 10px); width: max-content; max-width: min(360px, 80vw); margin: 0; font: 400 15px/1.35 var(--magi-naskh); color: var(--magi-dim); text-align: right; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.magi_wrap .magi_gpu.is-on { opacity: 1; }

.magi_wrap .magi_hint { position: absolute; left: 0; top: 0; z-index: 5; margin: 0; font: 500 10px/1 var(--magi-kufi); letter-spacing: 0.22em; text-transform: uppercase; color: var(--magi-gold-2); white-space: nowrap; opacity: 0; transition: opacity 0.6s ease; text-shadow: 0 0 14px rgba(4, 6, 13, 0.95), 0 0 3px rgba(4, 6, 13, 0.9); pointer-events: none; }
.magi_wrap .magi_hint.is-on { opacity: 1; }

.magi_wrap .magi_points { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 4; }
.magi_wrap .magi_point { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 120px; margin-left: -60px; font: 500 10px/1 var(--magi-kufi); letter-spacing: 0.18em; text-transform: uppercase; color: var(--magi-ink); opacity: 0; transition: opacity 0.6s ease; }
.magi_wrap .magi_point_dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(247, 220, 166, 0.7); transition: background 0.4s ease, box-shadow 0.4s ease; }
.magi_wrap .magi_point.is-show { opacity: 1; }
.magi_wrap .magi_point.is-lit .magi_point_dot { background: var(--c); box-shadow: 0 0 16px 4px var(--c); border-color: transparent; }
.magi_wrap .magi_point_name { opacity: 0; transition: opacity 0.5s ease; text-shadow: 0 0 10px rgba(4, 6, 13, 0.9); text-align: center; }
.magi_wrap .magi_point_name em { display: block; margin-top: 4px; font: 400 14px/1 var(--magi-naskh); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--magi-dim); }
.magi_wrap .magi_point.is-lit .magi_point_name { opacity: 1; }

.magi_wrap .magi_holdring { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 8; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.magi_wrap .magi_holdring.is-on { opacity: 1; }
.magi_wrap .magi_holdring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.magi_wrap .magi_holdring_track { fill: none; stroke: rgba(247, 220, 166, 0.2); stroke-width: 1.5; }
.magi_wrap .magi_holdring_fill { fill: none; stroke: var(--magi-gold-2); stroke-width: 2; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; filter: drop-shadow(0 0 4px rgba(255, 220, 160, 0.9)); }

/* a Night off the shelf */
.magi_wrap .magi_page { position: absolute; inset: 0; z-index: 8; display: grid; grid-template-columns: auto minmax(0, 26rem); gap: clamp(28px, 3.4vw, 56px); align-content: center; justify-content: center; align-items: center; background: rgba(4, 6, 13, 0.82); backdrop-filter: blur(6px); }
.magi_wrap .magi_page[hidden] { display: none; }
.magi_wrap .magi_page_img { width: min(30vw, 58vh * 0.7); aspect-ratio: 240 / 340; background-color: #f4efe6; background-repeat: no-repeat; border: 3px solid #f4efe6; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(227, 182, 107, 0.4); }
.magi_wrap .magi_page_text { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: start; }
.magi_wrap .magi_page_jt { grid-column: 1; grid-row: 1 / span 6; margin: 0; writing-mode: vertical-rl; font: 400 clamp(34px, 3.4vw, 54px)/1 var(--magi-jp); letter-spacing: 0.04em; }
.magi_wrap .magi_page_no { grid-column: 2; margin: 4px 0 14px; display: flex; gap: 12px; align-items: baseline; }
.magi_wrap .magi_page_ja { font: 400 18px/1 var(--magi-jp); color: var(--magi-gold-2); }
.magi_wrap .magi_page_en { font: 500 11px/1 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-gold); }
.magi_wrap .magi_page_t { grid-column: 2; margin: 0 0 12px; font: 400 clamp(32px, 3vw, 50px)/1.02 var(--magi-naskh); letter-spacing: -0.015em; color: var(--magi-ink); }
.magi_wrap .magi_page_arc { grid-column: 2; margin: 0 0 18px; font: 400 18px/1.4 var(--magi-naskh); color: var(--magi-dim); }
.magi_wrap .magi_page_credit { grid-column: 2; margin: 0 0 24px; font: 400 13px/1.35 var(--magi-naskh); color: var(--magi-dim); }
.magi_wrap .magi_page_close { grid-column: 2; justify-self: start; padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--magi-gold); background: none; cursor: pointer; font: 500 11px/1 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-ink); }

.magi_wrap .magi_cursor { position: fixed; left: 0; top: 0; z-index: 9; width: 40px; height: 28px; margin: -14px 0 0 -20px; pointer-events: none; color: #fff4dc; opacity: 0; transition: opacity 0.4s ease; }
.magi_wrap .magi_cursor.is-on { opacity: 1; }
.magi_wrap .magi_cursor * { pointer-events: none; }
.magi_wrap .magi_cursor svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 226, 170, 0.95)); }
.magi_wrap .magi_cursor_bird { fill: currentColor; }

/* ---- the magic circle (loader) ---- */
.magi_wrap .magi_loader { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, #0b0a12 0%, #030407 70%); transition: opacity 1.4s ease, visibility 1.4s; user-select: none; -webkit-user-select: none; }
.magi_wrap .magi_loader.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.magi_wrap .magi_loader.is-gone * { pointer-events: none !important; }
.magi_wrap .magi_circle { position: relative; width: min(74vh, 88vw); aspect-ratio: 1; }
.magi_wrap .magi_circle_svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--magi-gold-2); }
.magi_wrap .magi_circle_hair { fill: none; stroke: rgba(247, 220, 166, 0.42); stroke-width: 1; }
.magi_wrap .magi_circle_hair.is-faint { stroke: rgba(247, 220, 166, 0.16); }
.magi_wrap .magi_circle_lat { font: 500 21px/1 var(--magi-kufi); letter-spacing: 0.38em; fill: rgba(247, 220, 166, 0.78); }
.magi_wrap .magi_circle_jp { font: 400 27px/1 var(--magi-jp); letter-spacing: 0.3em; fill: rgba(241, 232, 214, 0.55); }
.magi_wrap .magi_circle_tick { stroke: rgba(247, 220, 166, 0.2); stroke-width: 2; transition: stroke 0.4s ease; }
.magi_wrap .magi_circle_tick.is-long { stroke-width: 3; }
.magi_wrap .magi_circle_tick.is-on { stroke: #ffe7b8; filter: drop-shadow(0 0 4px rgba(255, 214, 150, 0.9)); }
.magi_wrap .magi_circle_seal { color: #fff1cf; filter: drop-shadow(0 0 6px rgba(255, 214, 150, 0.9)); }
.magi_wrap .magi_circle_fill { fill: none; stroke: #fff1cf; stroke-width: 3; stroke-dasharray: 2978; stroke-dashoffset: 2978; transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgba(255, 214, 150, 1)); }
.magi_wrap .magi_circle_core {
  position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--core, 1)); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0; border: 1px solid rgba(247, 220, 166, 0.45);
  background: radial-gradient(circle, rgba(255, 220, 160, calc(0.04 + var(--glow, 0) * 0.5)) 0%, rgba(4, 6, 13, 0.92) 70%); cursor: pointer; color: var(--magi-ink);
  opacity: 0; pointer-events: none; transition: opacity 0.8s ease, border-color 0.3s ease; touch-action: none; -webkit-touch-callout: none;
}
.magi_wrap .magi_circle_core:hover, .magi_wrap .magi_circle_core:focus-visible { border-color: var(--magi-gold-2); }
.magi_wrap .magi_circle_core_ja { font: 400 clamp(26px, 3vh, 34px)/1 var(--magi-jp); letter-spacing: 0.1em; color: var(--magi-gold-2); }
.magi_wrap .magi_circle_core_en { font: 500 10px/1 var(--magi-kufi); letter-spacing: 0.24em; text-transform: uppercase; }
.magi_wrap .magi_loader_count { position: absolute; left: var(--magi-pad); top: var(--magi-pad); margin: 0; display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.magi_wrap .magi_loader_k { font: 500 11px/1 var(--magi-kufi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magi-gold); }
.magi_wrap .magi_loader_n { min-width: 2ch; text-align: right; font: 400 28px/1 var(--magi-naskh); color: var(--magi-ink); }
.magi_wrap .magi_loader_of { font: 400 16px/1 var(--magi-naskh); color: var(--magi-dim); }
.magi_wrap .magi_summon_quiet { position: absolute; right: var(--magi-pad); top: calc(var(--magi-pad) + 4px); padding: 4px 0; border: 0; border-bottom: 1px solid rgba(227, 182, 107, 0.4); background: none; cursor: pointer; font: 500 10px/1 var(--magi-kufi); letter-spacing: 0.22em; text-transform: uppercase; color: var(--magi-dim); opacity: 0; transition: opacity 0.8s ease 0.3s, color 0.3s ease; pointer-events: none; }
.magi_wrap .magi_loader.is-ready .magi_circle_core, .magi_wrap .magi_loader.is-ready .magi_summon_quiet { opacity: 1; pointer-events: auto; }
.magi_wrap .magi_summon_quiet:hover { color: var(--magi-gold-2); }
.magi_wrap .magi_summon_credit { position: absolute; bottom: var(--magi-pad); left: 50%; transform: translateX(-50%); width: min(90vw, 560px); margin: 0; text-align: center; font: 400 15px/1.35 var(--magi-naskh); color: var(--magi-dim); }

/* through the homage the corner chrome sits on its own band: what scrolls under it fades out first */
.magi_wrap.is-chrome::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 88px; background: linear-gradient(to bottom, var(--magi-band, #04060d) 55%, transparent); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.magi_wrap.is-chrome.is-homage::before { opacity: 1; }
.magi_wrap.is-chrome.is-paper-top { --magi-band: #f1ece1; }
/* on the homage's paper the chrome is inked */
.magi_wrap.is-paper .magi_mark_en, .magi_wrap.is-paper .magi_vessel_now, .magi_wrap.is-paper .magi_ctl { color: #121010; }
.magi_wrap.is-paper .magi_mark_ja, .magi_wrap.is-paper .magi_ctl_ja, .magi_wrap.is-paper .magi_vessel { color: #a8742c; }
.magi_wrap.is-paper .magi_cursor { color: #a8742c; }
.magi_wrap.is-paper .magi_cursor svg { filter: none; }
.magi_wrap.is-paper .magi_controls { opacity: 0; pointer-events: none; }
/* the paper pages scroll under the corner: words there would sit on words, so only the seal stays */
.magi_wrap.is-paper .magi_mark, .magi_wrap.is-paper .magi_vessel_now { opacity: 0; pointer-events: none; }

/* ---- tablet ---- */
@media (max-width: 1100px) {
  .magi_wrap .magi_layer.is-flow { max-width: 62vw; }
}
/* ---- phone: designed, not shrunk ---- */
@media (max-width: 767px) {
  .magi_wrap .magi_layers::after { background: radial-gradient(95% 42% at 45% 74%, rgba(4, 6, 13, 0.85), rgba(4, 6, 13, 0) 75%); }
  .magi_wrap .magi_point { flex-direction: column-reverse; }   /* a lit point names itself above, clear of the card below */
  .magi_wrap .magi_layers::before { height: 72%; background: linear-gradient(to top, rgba(4, 6, 13, 0.8), rgba(4, 6, 13, 0.55) 45%, rgba(4, 6, 13, 0)); }
  .magi_wrap { --magi-pad: 16px; --magi-col: 18px; --magi-low: 84px; }
  .magi_wrap .magi_layer.is-card { left: var(--magi-col); right: 16px; column-gap: 14px; }
  .magi_wrap .magi_card_jt, .magi_wrap .magi_flow_jt { font-size: 36px; }
  .magi_wrap .magi_card_t { font-size: clamp(34px, 10vw, 46px); }
  .magi_wrap .magi_card_line { font-size: 16px; max-width: none; margin-top: 16px; }
  /* the river has the sky: Baba's words sit low, over the dark of the sand */
  .magi_wrap .magi_layer.is-flow { left: var(--magi-col); right: 16px; top: auto; bottom: 70px; max-width: none; column-gap: 14px; }
  .magi_wrap .magi_layer.is-flow::before { content: ''; position: absolute; inset: -60px -40px -80px; z-index: -1; background: radial-gradient(80% 70% at 30% 70%, rgba(4, 6, 13, 0.82), rgba(4, 6, 13, 0) 100%); }
  .magi_wrap .magi_flow_mark { font-size: 110px; }
  .magi_wrap .magi_flow_a { font-size: 34px; }
  .magi_wrap .magi_flow_b { font-size: 20px; }
  .magi_wrap .magi_hero_t { bottom: 168px; font-size: clamp(44px, 13vw, 56px); }
  .magi_wrap .magi_hero_meta { right: auto; left: var(--magi-col); bottom: 60px; text-align: left; grid-auto-flow: column; gap: 20px; }
  .magi_wrap .magi_hero_dd { font-size: 16px; }
  .magi_wrap .magi_hero_scroll { display: none; }
  .magi_wrap .magi_vessel_now { display: none; }
  .magi_wrap .magi_controls { gap: 14px; }
  .magi_wrap .magi_page { grid-template-columns: 1fr; justify-items: center; padding: 70px 20px 30px; align-content: start; overflow: auto; }
  .magi_wrap .magi_page_img { width: min(62vw, 40vh * 0.7); }
  .magi_wrap .magi_point { width: 90px; margin-left: -45px; font-size: 9px; }
  .magi_wrap .magi_index_ja { font-size: 16px; }
  .magi_wrap .magi_circle { width: min(92vw, 62vh); }
  .magi_wrap .magi_circle_core { width: 34%; }
  .magi_wrap .magi_loader_count { top: auto; bottom: 64px; left: 50%; transform: translateX(-50%); }
  .magi_wrap .magi_summon_credit { font-size: 13px; }
  .magi_wrap.is-paper .magi_controls, .magi_wrap.is-homage .magi_controls { opacity: 0; pointer-events: none; }
}
@media (hover: none) { .magi_wrap .magi_cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .magi_wrap .magi_hero_scroll_line { animation: none; } .magi_wrap .magi_card_line { transition: none; } }
/* a short phone: the seal's lowest point falls where the card's kicker sits, so the seal goes without it */
@media (max-width: 767px) and (max-height: 780px) {
  .magi_wrap .magi_layer[data-beat="3"] .magi_card_no { display: none; }
}