:root{
  --void:#07050a;
  --crypt:#120a0f;
  --space:#050307;
  --ink:#f4ebe8;
  --dim:#a8959a;
  --neon:#ff2b3d;
  --rose:#ff4fc8;
  --neon-core:#ffe2e5;
  --on-neon:#16040a;
  --line:rgba(255,43,61,.28);
  --display:"Grenze Gotisch", Georgia, "Times New Roman", serif;
  --body:"Literata", Georgia, "Times New Roman", serif;
  --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='140'%3E%3Ccircle cx='21.4' cy='88.2' r='.55' fill='%23ffffff' fill-opacity='.7'/%3E%3Ccircle cx='57.9' cy='12.6' r='.45' fill='%23ffffff' fill-opacity='.5'/%3E%3Ccircle cx='96.1' cy='104.3' r='.7' fill='%23ffd9e8' fill-opacity='.8'/%3E%3Ccircle cx='140.3' cy='40.8' r='.35' fill='%23ffffff' fill-opacity='.6'/%3E%3Ccircle cx='171.8' cy='121.5' r='.55' fill='%23ffffff' fill-opacity='.45'/%3E%3Ccircle cx='203.2' cy='22.9' r='.9' fill='%23ffffff' fill-opacity='.85'/%3E%3Ccircle cx='236.6' cy='77.1' r='.45' fill='%23ffd9e8' fill-opacity='.6'/%3E%3Ccircle cx='12.3' cy='31.7' r='.7' fill='%23ffffff' fill-opacity='.4'/%3E%3Ccircle cx='79.5' cy='58.4' r='.35' fill='%23ffffff' fill-opacity='.75'/%3E%3Ccircle cx='118.7' cy='9.2' r='.55' fill='%23ffffff' fill-opacity='.55'/%3E%3Ccircle cx='156.4' cy='93.6' r='.45' fill='%23ffd9e8' fill-opacity='.7'/%3E%3Ccircle cx='188.9' cy='66.3' r='.35' fill='%23ffffff' fill-opacity='.5'/%3E%3Ccircle cx='222.1' cy='130.4' r='.7' fill='%23ffffff' fill-opacity='.65'/%3E%3Ccircle cx='248.8' cy='48.7' r='.55' fill='%23ffffff' fill-opacity='.35'/%3E%3Ccircle cx='38.6' cy='118.9' r='.9' fill='%23ffffff' fill-opacity='.8'/%3E%3Ccircle cx='66.2' cy='135.1' r='.35' fill='%23ffd9e8' fill-opacity='.5'/%3E%3Ccircle cx='104.9' cy='75.8' r='.45' fill='%23ffffff' fill-opacity='.6'/%3E%3Ccircle cx='132.5' cy='112.2' r='.55' fill='%23ffffff' fill-opacity='.4'/%3E%3Ccircle cx='165.7' cy='17.4' r='.7' fill='%23ffffff' fill-opacity='.7'/%3E%3Ccircle cx='197.3' cy='99.8' r='.35' fill='%23ffffff' fill-opacity='.55'/%3E%3Ccircle cx='230.4' cy='6.5' r='.45' fill='%23ffd9e8' fill-opacity='.65'/%3E%3Ccircle cx='8.9' cy='64.1' r='.55' fill='%23ffffff' fill-opacity='.45'/%3E%3Ccircle cx='47.2' cy='46.3' r='.35' fill='%23ffffff' fill-opacity='.8'/%3E%3Ccircle cx='88.4' cy='27.6' r='.9' fill='%23ffffff' fill-opacity='.5'/%3E%3Ccircle cx='126.8' cy='128.7' r='.45' fill='%23ffffff' fill-opacity='.7'/%3E%3Ccircle cx='178.1' cy='52.9' r='.55' fill='%23ffd9e8' fill-opacity='.4'/%3E%3Ccircle cx='214.6' cy='85.3' r='.35' fill='%23ffffff' fill-opacity='.6'/%3E%3Ccircle cx='252.3' cy='109.6' r='.7' fill='%23ffffff' fill-opacity='.75'/%3E%3Ccircle cx='150.2' cy='70.1' r='2.6' fill='%23ff4fc8' fill-opacity='.16'/%3E%3Ccircle cx='150.2' cy='70.1' r='1.1' fill='%23ffffff' fill-opacity='.95'/%3E%3Ccircle cx='60.8' cy='101.4' r='2.6' fill='%23ff4fc8' fill-opacity='.16'/%3E%3Ccircle cx='60.8' cy='101.4' r='1.1' fill='%23ffffff' fill-opacity='.95'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:var(--void); color:var(--ink);
  font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:calc(14px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-bottom, 0px));
  position:relative; overflow-x:hidden;
}
.cosmos{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--void)}
#sky{position:absolute; inset:0; width:100%; height:100%}
#galaxy{position:absolute; left:0; top:0; transform:scaleY(.8) rotate(0deg); animation:spin 110s linear infinite; will-change:transform; opacity:.75}
@keyframes spin{to{transform:scaleY(.8) rotate(360deg)}}
.tw{position:absolute; width:2px; height:2px; border-radius:50%; background:var(--neon-core); box-shadow:0 0 6px 1px rgba(255,79,200,.7); opacity:.15; animation:tw 3s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.95}}
.eye{position:absolute; left:var(--x); top:var(--y); width:var(--s); aspect-ratio:1; opacity:var(--o); animation:drift var(--fd, 7s) ease-in-out infinite alternate}
.reading .eye{opacity:calc(var(--o) * .5)}
.eye b{display:block; width:100%; height:100%; transform:rotate(var(--r)); filter:brightness(.85)}
.eye i{display:block; width:100%; height:100%; background:url("/img/eye.webp") center/contain no-repeat; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); animation:blink var(--bd, 4s) ease-in-out var(--bl, 0s) infinite}
@keyframes drift{from{transform:translate3d(0,-9px,0)} to{transform:translate3d(0,9px,0)}}
@keyframes blink{0%, 93%, 100%{transform:scaleY(1)} 95.5%{transform:scaleY(.07)}}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:1; background:radial-gradient(ellipse 85% 75% at 50% 35%, transparent 40%, rgba(7,5,10,.6) 100%)}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.07; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.wrap{position:relative; z-index:2; max-width:680px; margin:0 auto}
.page{display:flex; flex-direction:column; gap:40px}

a{color:var(--neon-core)}
a:focus-visible, button:focus-visible{outline:2px solid var(--neon-core); outline-offset:3px}
.shadowed{text-shadow:0 0 3px var(--void), 0 0 14px var(--void)}

.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0}
.brand{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.55rem; line-height:1; color:var(--neon-core); text-shadow:0 0 2px #fff, 0 0 8px var(--neon), 0 0 20px var(--neon); padding:8px 0}
.brand .hornset{position:relative; display:inline-block; width:1em; height:1em}
.brand .hornset i{position:absolute; bottom:38%; width:.55em; height:.72em}
.brand .hornset i:first-child{left:0}
.brand .hornset i:last-child{right:0; transform:scaleX(-1)}
.brand .hornset svg{display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:var(--rose); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px var(--rose))}
.nav{display:flex; gap:4px}
.nav a, .nav button{font-family:var(--display); font-weight:500; font-size:1.08rem; color:var(--ink); text-decoration:none; padding:10px 10px; min-height:44px; display:inline-flex; align-items:center; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent}
.nav a[aria-current]{color:var(--neon)}
.nav a:active, .nav button:active{color:var(--neon-core)}

.hero{text-align:center; padding:26px 0 6px}
.hero h1{position:relative; display:inline-block; margin:0 0 10px; font-family:var(--display); font-weight:700; font-size:clamp(2.8rem, 13vw, 4rem); line-height:.92; letter-spacing:.015em; color:var(--neon-core); text-shadow:0 0 2px #fff, 0 0 8px var(--neon), 0 0 20px var(--neon), 0 0 46px rgba(255,43,61,.7); text-wrap:balance; animation:buzz 6s linear infinite}
.horn{position:absolute; bottom:72%; width:.6em; height:.78em; pointer-events:none; animation:buzz-horn 7.3s linear 1s infinite}
.horn-l{left:16%}
.horn-r{right:16%; transform:scaleX(-1)}
.horn svg{width:100%; height:100%; overflow:visible; fill:none; stroke:var(--rose); stroke-width:3.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px var(--rose)) drop-shadow(0 0 14px rgba(255,79,200,.7))}
@keyframes buzz{0%{opacity:.2} 1.5%{opacity:1} 2.5%{opacity:.35} 3.5%{opacity:1} 8%{opacity:1} 8.6%{opacity:.22} 9.6%{opacity:1} 10.4%{opacity:.3} 11.4%{opacity:1} 50%{opacity:1} 50.8%{opacity:.5} 51.6%{opacity:1} 78%{opacity:1} 78.6%{opacity:.18} 80.4%{opacity:.18} 81.2%{opacity:1} 82%{opacity:.4} 82.8%, 100%{opacity:1}}
@keyframes buzz-horn{0%, 30%{opacity:1} 30.8%{opacity:.25} 31.8%{opacity:1} 64%{opacity:1} 64.6%{opacity:.2} 66%{opacity:.2} 66.8%{opacity:1} 100%{opacity:1}}
.tagline{margin:0 auto 10px; font-family:var(--display); font-weight:500; font-size:1.45rem; line-height:1.2; color:var(--ink); max-width:22ch; text-wrap:balance}
.intro{margin:0 auto 22px; color:var(--dim); font-size:1.05rem; max-width:40ch; text-wrap:pretty}
.cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:.02em; text-decoration:none; cursor:pointer; border:0; border-radius:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform .12s, box-shadow .12s}
.btn-neon{color:var(--on-neon); background:var(--neon); transform:rotate(-.8deg); box-shadow:inset 0 1px 0 rgba(255,214,228,.5), 1px 1px 0 #8a1020, 2px 2px 0 #6b1424, 3px 3px 0 #4f0e1c, 4px 4px 0 #350912, 6px 8px 10px rgba(0,0,0,.7)}
.btn-neon:active{transform:rotate(-.8deg) translate(3px, 3px); box-shadow:inset 0 1px 0 rgba(255,214,228,.5), 1px 1px 0 #8a1020, 2px 3px 5px rgba(0,0,0,.7)}
.btn-ghost{color:var(--neon-core); background:#140709; transform:rotate(.8deg); box-shadow:inset 0 1px 0 rgba(255,214,228,.3), 1px 1px 0 #6b1424, 2px 2px 0 #571020, 3px 3px 0 #450c19, 4px 4px 0 #360913, 6px 8px 10px rgba(0,0,0,.7)}
.btn-ghost:active{transform:rotate(.8deg) translate(3px, 3px); box-shadow:inset 0 1px 0 rgba(255,214,228,.3), 1px 1px 0 #6b1424, 2px 3px 5px rgba(0,0,0,.7)}

.section{display:flex; flex-direction:column; gap:16px}
.label{margin:0; display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:700; font-size:1.32rem; line-height:1.1; letter-spacing:.02em; color:var(--neon-core); text-shadow:0 0 3px var(--void), 0 0 10px rgba(255,43,61,.55), 0 0 18px var(--void)}
.label::after{content:""; flex:1; height:1px; background:var(--line)}
.label.has-bolt::after{display:none}
.bolt{flex:1; min-width:40px; height:34px; position:relative; overflow:hidden; animation:bolt-buzz 4.7s linear infinite}
.bolt canvas{position:absolute; left:0; top:0; display:block; animation:bolt .72s steps(8) infinite; will-change:transform}
@keyframes bolt{to{transform:translateY(-100%)}}
@keyframes bolt-buzz{0%, 41%{opacity:1} 42%{opacity:.35} 43.5%{opacity:1} 77%{opacity:1} 78%{opacity:.55} 79%, 100%{opacity:1}}

.cards{display:grid; gap:18px}
.card{position:relative; isolation:isolate; display:block; color:var(--ink); text-decoration:none; padding:18px 18px 16px; transform:rotate(var(--rot, 0deg)); transition:transform .15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.card:active{transform:rotate(var(--rot, 0deg)) translate(calc(var(--ux) * 5px), calc(var(--uy) * 5px))}
.shape{position:absolute; inset:0; z-index:-1; pointer-events:none; filter:drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #6b1424) drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #571020) drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #450c19) drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #360913) drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #29070e) drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #1d040a) drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #130306) drop-shadow(calc(var(--ux) * 5px) calc(var(--uy) * 9px) 10px rgba(0,0,0,.75))}
.card:active .shape, .tap:active .shape{filter:drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #6b1424) drop-shadow(calc(var(--ux) * 1px) calc(var(--uy) * 1px) 0 #450c19) drop-shadow(calc(var(--ux) * 2px) calc(var(--uy) * 3px) 4px rgba(0,0,0,.7))}
.shape::before, .shape::after{content:""; position:absolute; clip-path:var(--shape, none)}
.shape::before{inset:0; background:linear-gradient(to bottom, rgba(255,214,228,.5), rgba(255,214,228,.06) 38%, rgba(0,0,0,.65))}
.shape::after{inset:var(--bw, 1.5px); background-color:var(--space); background-image:linear-gradient(to bottom, rgba(255,235,240,.09), transparent 40%, rgba(0,0,0,.4)), var(--stars), radial-gradient(120% 160% at 0% 0%, rgba(255,43,61,var(--nr, .16)), transparent 55%), radial-gradient(90% 140% at 100% 100%, rgba(255,79,200,.1), transparent 60%); background-size:100% 100%, 260px 140px, 100% 100%, 100% 100%; background-position:0 0, var(--sp, 0 0), 0 0, 0 0; background-repeat:no-repeat, repeat, no-repeat, no-repeat}
.s-ticket{--ux:-1; --uy:1; --rot:-.6deg; --shape:polygon(0 7px, 36% 0, 100% 4px, 100% calc(50% - 8px), calc(100% - 9px) 50%, 100% calc(50% + 8px), calc(100% - 2px) 100%, 58% calc(100% - 5px), 3px 100%)}
.s-bite{--ux:1; --uy:1; --rot:.5deg; --shape:polygon(3px 2px, calc(100% - 36px) 0, calc(100% - 31px) 8px, calc(100% - 22px) 13px, calc(100% - 12px) 10px, calc(100% - 7px) 3px, 100% 6px, calc(100% - 4px) 100%, 0 calc(100% - 4px))}
.s-tear{--ux:0; --uy:1; --rot:-.4deg; --shape:polygon(0 0, 100% 6px, calc(100% - 6px) 100%, 34% 100%, 31% calc(100% - 6px), 28% calc(100% - 1px), 25% calc(100% - 7px), 21% calc(100% - 2px), 18% calc(100% - 6px), 15% 100%, 3px calc(100% - 3px))}
.s-cut{--ux:1; --uy:-1; --rot:.6deg; --shape:polygon(16px 0, calc(100% - 3px) 2px, 100% calc(100% - 18px), calc(100% - 24px) 100%, 2px calc(100% - 2px), 0 14px)}
.s-torn{--ux:-1; --uy:1; --rot:-.5deg; --shape:polygon(6px 0, 100% 4px, calc(100% - 3px) 100%, 5px calc(100% - 2px), 0 86%, 6px 72%, 1px 58%, 7px 44%, 2px 30%, 6px 16%)}
.s-note{--ux:-1; --uy:1; --rot:0deg; --shape:polygon(4px 6px, 42% 0, 100% 5px, calc(100% - 5px) 100%, 55% calc(100% - 6px), 0 calc(100% - 2px))}

.meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-family:var(--display); font-size:.98rem; color:var(--dim); letter-spacing:.02em}
.tag{color:var(--neon); text-shadow:0 0 8px rgba(255,43,61,.6)}
.card h3{margin:6px 0 8px; font-family:var(--display); font-weight:700; font-size:1.6rem; line-height:1.05; color:var(--neon-core); text-wrap:balance}
.card p{margin:0; color:var(--dim); font-size:1rem; line-height:1.5; text-wrap:pretty}
.card .more{display:inline-block; margin-top:12px; font-family:var(--display); font-size:1.1rem; color:var(--neon)}

.quote{text-align:center; padding:6px 4px 0}
.quote blockquote{margin:10px auto 8px; max-width:32ch; font-family:var(--display); font-weight:500; font-size:1.5rem; line-height:1.3; color:var(--ink); text-wrap:balance}
.quote figcaption{font-family:var(--display); font-size:1.05rem; letter-spacing:.04em; color:var(--neon)}

.grimoire{position:relative; isolation:isolate; display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:center; padding:20px 18px 20px 14px; --nr:.3}
.grimoire .bust{position:relative; width:62px; margin:-18px 0 -8px -10px; transform:rotate(-6deg)}
.grimoire .bust img{display:block; width:100%; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.bhorn{position:absolute; z-index:1; width:13px; height:17px; pointer-events:none; transform-origin:50% 100%; animation:sprout .7s cubic-bezier(.3,1.6,.5,1) 1.2s both, buzz-horn 7.3s linear 2s infinite}
.bhorn-l{left:15px; top:-6px}
.bhorn-r{left:31px; top:-7px}
.bhorn svg{display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:var(--rose); stroke-width:4.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px var(--rose))}
.bhorn-r svg{transform:scaleX(-1)}
@keyframes sprout{from{transform:scale(0)} to{transform:scale(1)}}
.grimoire h3{margin:0 0 4px; font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1.05; color:var(--neon-core); text-shadow:0 0 12px rgba(255,43,61,.6)}
.grimoire p{margin:0 0 12px; color:var(--dim); font-size:1rem; line-height:1.45; text-wrap:pretty}

.social{display:flex; flex-wrap:wrap; gap:10px}
.social a{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:6px 14px 6px 8px; color:var(--ink); text-decoration:none; font-family:var(--display); font-size:1.15rem; -webkit-tap-highlight-color:transparent}
.social img{display:block; width:34px; height:34px; object-fit:contain}
.contact{position:relative; isolation:isolate; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px; cursor:pointer; -webkit-tap-highlight-color:transparent}
.hand{display:block; width:66px; margin-left:-18px; transform:rotate(-7deg); transform-origin:30% 60%}
.hand img{display:block; width:100%; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); animation:poke 3.6s ease-in-out 1.5s infinite}
@keyframes poke{0%, 78%, 100%{transform:translateX(0)} 83%{transform:translateX(6px)} 87%{transform:translateX(0)} 91%{transform:translateX(6px)} 95%{transform:translateX(0)}}
.txt{min-width:0; display:flex; flex-direction:column; gap:1px}
.txt strong{font-family:var(--display); font-weight:700; font-size:1.3rem; line-height:1.15}
.txt a{display:inline-block; padding-block:11px; margin-block:-11px; color:var(--ink); font-family:var(--display); font-weight:500; font-size:1.08rem; text-decoration:none; overflow-wrap:anywhere; -webkit-tap-highlight-color:transparent}
.copy{display:grid; place-items:center; width:44px; height:44px; padding:0; background:#140709; color:var(--neon); border:0; border-radius:0; cursor:pointer; transform:rotate(2.5deg); box-shadow:inset 0 1px 0 rgba(255,214,228,.35), 1px 1px 0 #6b1424, 2px 2px 0 #571020, 3px 3px 0 #450c19, 4px 4px 0 #360913, 5px 5px 0 #29070e, 7px 9px 10px rgba(0,0,0,.7); transition:transform .12s, box-shadow .12s, background .2s, color .2s; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.copy:active, .copy.done{transform:rotate(2.5deg) translate(3px, 3px); box-shadow:inset 0 1px 0 rgba(255,214,228,.35), 1px 1px 0 #6b1424, 2px 2px 0 #450c19, 3px 4px 5px rgba(0,0,0,.7)}
.copy.done{background:var(--neon); color:var(--on-neon)}
.copy svg{grid-area:1/1; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.copy .i-copy{filter:drop-shadow(0 0 4px rgba(255,43,61,.7))}
.copy .i-check{display:none; stroke-width:2.6}
.copy.done .i-copy{display:none}
.copy.done .i-check{display:block}

footer{display:flex; flex-direction:column; gap:18px; padding-top:10px}
.foot{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-family:var(--display); font-size:1rem; color:var(--dim)}
.foot .eq{color:var(--neon); letter-spacing:.06em; font-size:1.05rem}
.foot a{color:var(--dim)}

.article{display:flex; flex-direction:column; gap:14px}
.article header{display:flex; flex-direction:column; gap:12px; text-align:left; padding-top:10px}
.article h1{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(2.1rem, 9vw, 3rem); line-height:1; color:var(--neon-core); text-shadow:0 0 2px #fff, 0 0 10px var(--neon), 0 0 24px rgba(255,43,61,.6); text-wrap:balance}
.chapo{margin:0; font-size:1.18rem; line-height:1.5; color:var(--ink); font-style:italic; text-wrap:pretty}
.prose{max-width:62ch}
.prose p{margin:0 0 1.1em; font-size:1.06rem; line-height:1.7; text-wrap:pretty}
.prose h2{margin:1.6em 0 .5em; font-family:var(--display); font-weight:700; font-size:1.7rem; line-height:1.1; color:var(--neon-core); text-shadow:0 0 10px rgba(255,43,61,.5); text-wrap:balance}
.prose blockquote{margin:1.4em 0; padding:14px 18px; border-left:3px solid var(--neon); background:rgba(255,43,61,.06); font-family:var(--display); font-weight:500; font-size:1.35rem; line-height:1.3; color:var(--ink)}
.prose blockquote p{margin:0; font-size:inherit; line-height:inherit}
.prose blockquote cite{display:block; margin-top:8px; font-style:normal; font-size:1rem; color:var(--neon)}
.prose em{color:var(--neon-core)}
.prose strong{color:var(--neon-core); font-weight:600}
.prose ul, .prose ol{padding-left:1.2em; margin:0 0 1.1em}
.prose li{margin:0 0 .4em; line-height:1.6}
.prose a{color:var(--neon-core); text-decoration-color:var(--neon); text-underline-offset:3px}
.end{display:flex; flex-direction:column; gap:14px; padding:22px 18px; position:relative; isolation:isolate; --nr:.3}
.end h3{margin:0; font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1.05; color:var(--neon-core); text-shadow:0 0 12px rgba(255,43,61,.6)}
.end p{margin:0; color:var(--dim); font-size:1rem; line-height:1.45}
.pager{display:grid; gap:12px}
.pager a{display:flex; flex-direction:column; gap:4px; padding:14px 16px; text-decoration:none; color:var(--ink); border:1px solid var(--line); min-height:44px}
.pager small{font-family:var(--display); font-size:.95rem; color:var(--dim)}
.pager strong{font-family:var(--display); font-size:1.2rem; line-height:1.1; color:var(--neon-core)}

.modal{position:fixed; inset:0; z-index:7; overflow:hidden}
.modal[hidden]{display:none}
.modal-bg{position:absolute; inset:0; background:rgba(3,2,5,.74); opacity:0; transition:opacity .35s}
.modal.open .modal-bg{opacity:1}
.modal.closing .modal-bg{opacity:0; transition-delay:.2s}
.rise{position:absolute; left:50%; top:40%; width:min(330px, 88vw); transform:translate(-50%, 80vh) rotate(-6deg); will-change:transform}
.modal.open .rise{animation:rise-in 1s cubic-bezier(.2,.85,.3,1) forwards}
.modal.closing .rise{animation:rise-out .55s cubic-bezier(.55,0,.85,.35) forwards}
@keyframes rise-in{0%{transform:translate(-50%, 80vh) rotate(-6deg)} 62%{transform:translate(-50%, -57%) rotate(2.5deg)} 82%{transform:translate(-50%, -47%) rotate(-1deg)} 100%{transform:translate(-50%, -50%) rotate(0deg)}}
@keyframes rise-out{to{transform:translate(-50%, 85vh) rotate(6deg)}}
.nl-top, .nl-bottom{position:absolute; z-index:2; pointer-events:none; left:50%; width:177px; aspect-ratio:366/180; background:url("/img/grip.webp") center/contain no-repeat}
.nl-top{top:0; transform:translate(-50%, -78%) scaleY(-1); filter:drop-shadow(0 -6px 10px rgba(0,0,0,.6))}
.nl-bottom{bottom:0; transform:translate(-50%, 78%); filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.nl{position:relative; z-index:1; isolation:isolate; --ux:-1; --uy:1; --rot:0deg; --nr:.3; padding:34px 20px 22px; margin:0}
.nl-close{position:absolute; top:2px; right:2px; width:44px; height:44px; z-index:2; background:none; border:0; color:var(--neon); font:400 30px/1 var(--body); cursor:pointer; -webkit-tap-highlight-color:transparent}
.nl-close:active{color:var(--neon-core)}
.nl-title{margin:0 36px 8px 0; position:relative; font-family:var(--display); font-weight:700; font-size:2rem; line-height:1; color:var(--neon-core); text-shadow:0 0 2px #fff, 0 0 10px var(--neon), 0 0 24px var(--neon); text-wrap:balance}
.nl-sub{margin:0 0 16px; color:var(--dim); font-size:1.05rem; line-height:1.35; text-wrap:pretty}
.nl-row{display:flex; flex-direction:column; gap:10px}
.nl-row input{width:100%; min-height:48px; padding:0 14px; font:400 17px/1 var(--body); color:var(--ink); background:rgba(5,3,7,.85); border:1px solid var(--line); border-radius:0; transform:rotate(-.6deg); -webkit-appearance:none; appearance:none}
.nl-row input::placeholder{color:rgba(168,149,154,.7)}
.nl-row input:focus{outline:none; border-color:var(--neon); box-shadow:0 0 14px rgba(255,43,61,.4)}
.nl-go{min-height:48px; padding:0 18px; cursor:pointer; font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:.02em; color:var(--on-neon); background:var(--neon); border:0; border-radius:0; transform:rotate(.8deg); box-shadow:inset 0 1px 0 rgba(255,214,228,.5), 1px 1px 0 #8a1020, 2px 2px 0 #6b1424, 3px 3px 0 #4f0e1c, 4px 4px 0 #350912, 6px 8px 10px rgba(0,0,0,.7); transition:transform .12s, box-shadow .12s; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.nl-go:active{transform:rotate(.8deg) translate(3px, 3px); box-shadow:inset 0 1px 0 rgba(255,214,228,.5), 1px 1px 0 #8a1020, 2px 3px 5px rgba(0,0,0,.7)}
.nl-go[disabled]{opacity:.6; cursor:default}
.nl-legal{margin:12px 0 0; font-size:.86rem; line-height:1.35; color:var(--dim)}
.nl-msg{margin:10px 0 0; min-height:1.2em; font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--neon-core); text-shadow:0 0 8px rgba(255,43,61,.6)}
.nl-msg.err{color:#ff9fae}
.hp{position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; opacity:0}
html.locked, html.locked body{overflow:hidden}

.grab{position:fixed; left:50%; bottom:0; z-index:6; width:min(250px, 64vw); pointer-events:none; transform:translate(-50%, 104%)}
.grab.show{animation:grab 2.7s cubic-bezier(.25,.8,.3,1) forwards}
@keyframes grab{0%{transform:translate(-50%, 104%)} 24%{transform:translate(-50%, 0)} 30%{transform:translate(-50%, 2.5%)} 72%{transform:translate(-50%, 0)} 100%{transform:translate(-50%, 104%)}}
.grab-hands{display:block; width:100%; aspect-ratio:314/580; background:url("/img/hands.webp") center/contain no-repeat; filter:drop-shadow(0 -4px 26px rgba(255,43,61,.55))}
.grab-msg{position:absolute; left:44%; top:0; transform:translate(-50%, -100%) scale(.2); opacity:0; display:flex; flex-direction:column; align-items:center; gap:3px; white-space:nowrap; padding-bottom:4px}
.grab.show .grab-msg{animation:grab-msg 2.7s ease-out forwards}
@keyframes grab-msg{0%, 18%{opacity:0; transform:translate(-50%, -100%) scale(.2)} 30%{opacity:1; transform:translate(-50%, -100%) scale(1.1)} 36%, 100%{opacity:1; transform:translate(-50%, -100%) scale(1)}}
.grab-title{font-family:var(--display); font-weight:700; font-size:2.6rem; line-height:1; color:var(--neon-core); text-shadow:0 0 2px #fff, 0 0 10px var(--neon), 0 0 26px var(--neon)}
.grab-mail{font-family:var(--display); font-weight:500; font-size:1rem; color:var(--ink); background:rgba(5,3,7,.9); padding:4px 10px; border:1px solid var(--neon); transform:rotate(-2deg)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (min-width: 560px){
  .cards{grid-template-columns:1fr 1fr}
  .cards .card:first-child{grid-column:1 / -1}
  .pager{grid-template-columns:1fr 1fr}
  body{padding-top:calc(24px + env(safe-area-inset-top, 0px))}
}
@media (hover: hover) and (pointer: fine){
  .nav a:hover, .nav button:hover{color:var(--neon-core)}
  .card:hover .shape::before{background:linear-gradient(to bottom, rgba(255,214,228,.8), rgba(255,214,228,.12) 38%, rgba(0,0,0,.65))}
  .copy:hover{color:var(--neon-core)}
  .pager a:hover{border-color:var(--neon)}
}
@media (prefers-reduced-motion: reduce){
  .hero h1, .horn, #galaxy, .tw, .eye, .eye i, .hand img, .bhorn, .bolt, .bolt canvas{animation:none}
  .card, .copy, .btn, .contact, .modal-bg{transition:none}
  .grab.show{animation:none; transform:translate(-50%, 0)}
  .grab.show .grab-msg{animation:none; opacity:1; transform:translate(-50%, -100%) scale(1)}
  .modal.open .rise{animation:none; transform:translate(-50%, -50%)}
  .modal.closing .rise{animation:none; transform:translate(-50%, 85vh)}
  html{scroll-behavior:auto}
}