/* Shared motion for both character editions. */
body{--glow:#c09aff;--glow-alt:#70e7ea;isolation:isolate}
body:not(.cute-edition){--glow:#f0b976;--glow-alt:#b29bff}
body::before{content:"";position:fixed;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(ellipse at 88% 8%,color-mix(in srgb,var(--glow) 13%,transparent),transparent 42%),radial-gradient(ellipse at 8% 76%,color-mix(in srgb,var(--glow-alt) 6%,transparent),transparent 34%)}
.reading-progress{position:fixed;z-index:20;top:0;left:0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--glow-alt));pointer-events:none;box-shadow:0 0 14px var(--glow)}
header{position:relative;overflow:hidden}
.hero-orbit{position:absolute;width:520px;height:520px;right:3%;top:-105px;border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);border-radius:50%;pointer-events:none;z-index:-1;animation:orbit-turn 35s linear infinite}
.hero-orbit::before,.hero-orbit::after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--accent) 11%,transparent);border-radius:50%;inset:45px;transform:rotateX(58deg) rotateZ(35deg)}
.hero-orbit::after{inset:95px;transform:rotateY(55deg) rotateZ(-30deg);box-shadow:0 0 90px color-mix(in srgb,var(--glow) 9%,transparent)}
.eyebrow{font-size:13px}.intro{font-size:16px}
.motion-on header h1{animation:hero-arrive .85s cubic-bezier(.2,.8,.2,1) both}
.motion-on header .intro,.motion-on .stats{animation:hero-arrive .85s .12s cubic-bezier(.2,.8,.2,1) both}
.entry-active header h1,.entry-active header .intro,.entry-active .stats{animation-play-state:paused}
.stats b{display:inline-block;font-variant-numeric:tabular-nums;min-width:1.25em}
.version-switch{gap:12px}
.motion-button{font-size:14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;background:#222329;line-height:1.4}
.random-button{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
.random-button .random-icon{font-size:18px;display:inline-block;transition:transform .4s}
.random-button:hover .random-icon{transform:rotate(100deg)}
.quiet-button{border-color:transparent;color:var(--muted);background:transparent;padding-inline:9px}
.motion-button:disabled{opacity:.45;cursor:default}
.card{position:relative;transform:perspective(1100px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .3s ease,border-color .3s,box-shadow .3s,opacity .55s;transform-style:preserve-3d}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(480px circle at var(--spot-x,50%) var(--spot-y,25%),color-mix(in srgb,var(--glow) 14%,transparent),transparent 65%);transition:opacity .3s}
.card:hover,.card:focus-within{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));box-shadow:0 14px 40px #0003}
.card:hover::after{opacity:1}
.motion-on .card.reveal-pending{opacity:0;transform:translateY(28px) scale(.985)}
.motion-on .card.reveal-pending:focus-within{opacity:1;transform:none}
.visual{transition:filter .3s}.visual:hover{filter:brightness(1.035)}
button,.collections a,.links a{transition:background-color .2s,color .2s,border-color .2s,transform .2s;position:relative}
button{overflow:hidden}button:active:not(:disabled){transform:scale(.97)}
.quote-copy{width:100%;display:block;text-align:left;line-height:1.75;border:0;color:inherit;background:transparent;padding:3px 35px 3px 0;font-size:16px;border-radius:0}
.quote-copy:hover,.quote-copy:focus-visible{background:transparent;color:var(--accent)}
.copy-mark{position:absolute;right:0;top:7px;color:var(--accent);font-size:12px;opacity:0;transition:opacity .2s;line-height:1.7}
.quote-copy:hover .copy-mark,.quote-copy:focus-visible .copy-mark{opacity:1}
.quote-copy.copied{color:var(--glow-alt)}
.quote-copy.copied .copy-mark{opacity:1;color:var(--glow-alt)}
.tap-ring{position:absolute;display:block;pointer-events:none;border:1px solid currentColor;border-radius:50%;width:24px;height:24px;margin:-12px;background:currentColor;opacity:.17;animation:tap-wave .6s ease-out both;z-index:3}
.sources a:hover,.links a:hover,.collections a:hover{color:var(--accent);text-decoration-thickness:2px}
.source[open] summary{color:var(--accent)}
.source[open] p,.source[open] .sources{animation:detail-arrive .22s ease-out}
#viewer[open]{animation:viewer-arrive .25s cubic-bezier(.2,.8,.2,1)}
#viewer::backdrop{animation:backdrop-arrive .25s ease-out}
#viewer{max-height:96vh;max-height:96dvh}
#viewer .dialogbody{overflow:hidden;touch-action:pan-y pinch-zoom}
#viewer .dialogbody.image-arriving{animation:image-arrive .28s ease-out}
.dialoghint{color:var(--muted);font-size:12px;padding:0 25px 18px;margin:0}
.gallery-toast{position:fixed;z-index:100;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#eeeaf7;color:#25222c;padding:12px 21px;border:1px solid #ffffff70;border-radius:8px;font-size:14px;box-shadow:0 10px 45px #0007;transition:transform .22s,opacity .22s;max-width:calc(100% - 32px);text-align:center}
.gallery-toast.shown{opacity:1;transform:translate(-50%,0)}
dialog.entrance{inset:0;margin:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;background:#101015;color:#fff;overflow:hidden;box-shadow:none}
dialog.entrance::backdrop{background:#101015;backdrop-filter:none}
.entrance-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate;overflow:hidden}
.entrance-stage::before{content:"";position:absolute;z-index:-1;inset:-30%;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--glow) 25%,transparent),transparent 42%);animation:entry-aura 1.6s ease-out both}
.entry-ring{position:absolute;width:min(70vw,620px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);border-radius:50%;box-shadow:0 0 55px color-mix(in srgb,var(--glow) 10%,transparent),inset 0 0 45px color-mix(in srgb,var(--glow) 8%,transparent);animation:ring-enter 1.6s cubic-bezier(.12,.7,.2,1) both;z-index:-1}
.entry-ring:nth-child(2){width:min(90vw,820px);border-style:dashed;border-color:color-mix(in srgb,var(--glow-alt) 22%,transparent);animation-delay:.08s;transform:rotate(-15deg)}
.entry-ring:nth-child(3){width:min(48vw,420px);border-color:color-mix(in srgb,var(--glow-alt) 35%,transparent);animation-delay:.16s}
.entry-kicker{font:500 14px ui-monospace,monospace;letter-spacing:.36em;color:var(--accent);margin:0 0 20px;animation:entry-words .65s .18s both}
.entry-title{font:650 clamp(44px,10vw,128px)/1.05 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.07em;white-space:nowrap;margin:0;animation:entry-words .85s .12s cubic-bezier(.16,.8,.2,1) both}
.entry-title span{display:inline-block;color:var(--accent);font-weight:350;margin:0 .1em}
.entry-meta{font-size:14px;letter-spacing:.12em;color:#b9b6c6;margin:24px 0 0;animation:entry-words .7s .3s both}
.entry-types{display:flex;gap:14px;margin:32px 0 0;font:500 13px ui-monospace,monospace;letter-spacing:.06em;color:#d4cede;animation:entry-words .65s .4s both}
.entry-types span{padding:8px 12px;border:1px solid #716b854d;border-radius:3px;background:#ffffff03}
.entry-scan{position:absolute;inset:50% 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--glow-alt),transparent);box-shadow:0 0 22px var(--glow-alt);animation:entry-scan 1.5s ease-in-out both;pointer-events:none}
.skip-entry{position:absolute;right:32px;bottom:30px;min-height:44px;font-size:14px;letter-spacing:.05em;border-color:#ffffff35;color:#c5c0d0;padding:10px 18px}
.entrance.is-leaving{animation:entry-exit .6s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none}
.entrance.is-leaving::backdrop{animation:entry-exit .6s cubic-bezier(.7,0,.2,1) forwards}
.motion-off .hero-orbit{display:none}
.motion-off .card{transform:none!important}.motion-off .card::after{display:none}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-off .card.reveal-pending{opacity:1;transform:none}
html.motion-quiet{scroll-behavior:auto}
.tab-inactive .hero-orbit{animation-play-state:paused}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes hero-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes tap-wave{to{transform:scale(14);opacity:0}}
@keyframes detail-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes viewer-arrive{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes backdrop-arrive{from{background:#0000}to{background:#000d}}
@keyframes image-arrive{from{opacity:.45;transform:translateX(var(--slide-from,16px))}to{opacity:1;transform:none}}
@keyframes entry-aura{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes ring-enter{from{opacity:0;transform:scale(.35) rotate(-40deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes entry-words{from{opacity:0;filter:blur(10px);transform:translateY(18px) scale(.96)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes entry-scan{0%{opacity:0;transform:translateY(180px) scaleX(.2)}35%{opacity:.7}100%{opacity:0;transform:translateY(-180px) scaleX(1)}}
@keyframes entry-exit{to{opacity:0;transform:scale(1.06);filter:blur(5px)}}
@media(hover:none){.copy-mark{opacity:.65}.card:hover::after{opacity:0}.hero-orbit{width:360px;height:360px;right:-200px;top:-20px}.card{transform:none!important}}
@media(max-width:700px){.version-switch{gap:8px}.motion-button{padding:10px 12px}.quiet-button{padding-inline:7px}.entry-types{gap:8px}.entry-types span{padding:7px 9px}.entry-kicker{letter-spacing:.2em;font-size:12px}.entry-meta{font-size:13px}.skip-entry{right:18px;bottom:24px}.entry-ring{width:105vw}.entry-ring:nth-child(2){width:135vw}.entry-ring:nth-child(3){width:72vw}.hero-orbit{opacity:.5}.dialoghint{font-size:12px;padding:0 16px 15px}}
@media(max-width:700px){#search{font-size:16px}}
@media(max-width:420px){.entry-title{font-size:clamp(30px,11vw,64px)}.dialogbar{flex-wrap:wrap}.dialogbar strong{flex-basis:100%;min-width:0}.dialogbuttons{max-width:none;width:100%;justify-content:flex-end;flex-wrap:wrap}.dialogbuttons button{flex:1 1 82px}.entry-types{gap:5px}.entry-types span{padding:6px 7px}}
@media(prefers-reduced-motion:reduce){body:not(.motion-on) *,body:not(.motion-on) *::before,body:not(.motion-on) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}