@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --bg: #08090d; --ink: #f5f2e9; --muted: #9b9aa1; --line: rgba(255,255,255,.14); --serif: Georgia, 'Noto Serif TC', serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -3; background: radial-gradient(circle at 75% 12%, rgba(95, 63, 151, .2), transparent 30%), radial-gradient(circle at 11% 70%, rgba(0, 132, 150, .12), transparent 28%), linear-gradient(130deg,#08090d 0%,#101018 58%,#0b0b10 100%); }
.noise { position: fixed; inset: 0; z-index: 10; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.orb { position: fixed; z-index: -1; width: 34vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }.orb::after { content:''; position:absolute; inset: 14%; border: 1px solid rgba(255,255,255,.06); border-radius:50%; }.orb-one { top: 6vh; right: -17vw; }.orb-two { bottom: 10vh; left: -28vw; }
.page-shell { width: min(1180px, calc(100% - 64px)); margin: auto; }.site-header { min-height: 106px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--line); }.brand { display:flex; align-items:center; gap:13px; color:var(--ink); text-decoration:none; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.55); border-radius:50%; font: 500 17px 'DM Mono', monospace; }.brand-name, .brand-caption { display:block; }.brand-name { font-size:14px; letter-spacing:.1em; }.brand-caption, .status, .eyebrow, .portal-type, .portal-url, .site-footer, .hero-card-top, .hero-card-bottom, .section-note { font: 10px 'DM Mono', monospace; letter-spacing:.13em; }.brand-caption { margin-top:4px; color:var(--muted); font-size:8px; }.status { color:var(--muted); }.status-dot { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:#b9f34e; box-shadow:0 0 14px #b9f34e; }
.hero { min-height: 600px; display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:40px; padding: 74px 4vw 84px; position:relative; }.hero::before { content:'K'; position:absolute; left:-.08em; top:-.22em; color:rgba(255,255,255,.026); font:700 clamp(260px,35vw,520px) var(--serif); line-height:1; pointer-events:none; }.hero-copy { position:relative; z-index:1; max-width:640px; }.eyebrow { display:flex; align-items:center; gap:13px; color:#b9f34e; }.eyebrow span { color:#fff; }.hero h1 { margin:26px 0 24px; font-size:clamp(3.25rem,7.2vw,7.4rem); line-height:.9; letter-spacing:-.075em; font-weight:500; }.hero h1 em { color:#b9f34e; font-family:var(--serif); font-weight:400; letter-spacing:-.06em; }.hero-lede { width:min(420px,100%); margin:0; color:#aaa9b0; line-height:1.75; font-size:15px; }.scroll-cue { display:flex; align-items:center; gap:13px; margin-top:54px; color:var(--ink); text-decoration:none; font:11px 'DM Mono', monospace; letter-spacing:.1em; }.scroll-line { width:60px; height:1px; background:#b9f34e; }
.hero-card-wrap { position:relative; display:grid; place-items:center; height:480px; perspective:1000px; }.hero-card { position:relative; width:min(300px,70vw); aspect-ratio: 2 / 3; border:1px solid rgba(255,255,255,.4); border-radius:16px; overflow:hidden; background: radial-gradient(circle at 64% 25%,#372b5e 0,#151622 39%,#0e1017 100%); box-shadow: 0 28px 80px rgba(0,0,0,.58), inset 0 0 50px rgba(176,113,255,.14); transform-style:preserve-3d; transition:transform .15s ease-out; }.hero-card-grid { position:absolute; inset:0; opacity:.35; background:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:23px 23px; mask-image:linear-gradient(transparent,black 30%,black 72%,transparent); }.hero-card::after { content:''; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.26); border-radius:10px; pointer-events:none; }.card-glow { position:absolute; width:170%; aspect-ratio:1; left:-35%; top:20%; background:radial-gradient(circle,rgba(179,244,92,.28),transparent 60%); filter:blur(20px); }.hero-card-top,.hero-card-bottom { position:absolute; left:25px; right:25px; display:flex; justify-content:space-between; color:rgba(255,255,255,.66); z-index:2; }.hero-card-top { top:23px; }.hero-card-bottom { bottom:23px; color:#b9f34e; }.hero-card-center { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; z-index:2; transform:translateZ(32px); }.cave-symbol { position:relative; width:100px; height:125px; margin-bottom:25px; border-radius:50% 50% 48% 48%; background:linear-gradient(160deg,#d9ff85,#73a9ff 52%,#eb80cf); clip-path:polygon(50% 0,90% 14%,100% 55%,82% 100%,18% 100%,0 55%,10% 14%); box-shadow: 0 0 45px rgba(177,244,98,.36); }.cave-symbol::after { content:''; position:absolute; left:29px; right:29px; top:36px; bottom:0; background:#151622; clip-path:polygon(50% 0,100% 100%,0 100%); }.cave-symbol span { position:absolute; width:14px; height:14px; top:30px; right:18px; border-radius:50%; background:white; filter:blur(1px); }.hero-card-label { color:#b9f34e; font:10px 'DM Mono',monospace; letter-spacing:.18em; }.hero-card strong { margin:5px 0 4px; font:500 55px 'Space Grotesk',sans-serif; letter-spacing:-.11em; }.hero-card small { color:rgba(255,255,255,.58); font:8px 'DM Mono',monospace; letter-spacing:.1em; }.holo-sheen { position:absolute; inset:-100%; opacity:.15; pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.7) 47%,rgba(190,255,90,.55) 50%,transparent 56%); transform:translateX(-20%) rotate(10deg); transition:transform .35s ease; mix-blend-mode:screen; }.hero-card:hover .holo-sheen, .portal-card:hover .holo-sheen { transform:translateX(30%) rotate(10deg); }.orbit { position:absolute; border:1px solid rgba(185,243,78,.24); border-radius:50%; transform:rotate(-30deg); }.orbit-a { width:410px; height:155px; }.orbit-b { width:480px; height:220px; transform:rotate(55deg); border-color:rgba(144,115,255,.17); }
.portal-section { padding: 32px 0 100px; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:30px; }.section-heading h2 { margin:16px 0 0; font:400 clamp(2rem,4vw,3.4rem) var(--serif); letter-spacing:-.04em; }.section-note { margin:0; color:var(--muted); line-height:1.8; text-align:right; }.portal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.portal-card { position:relative; min-height:360px; display:flex; flex-direction:column; padding:22px; overflow:hidden; border:1px solid rgba(255,255,255,.23); border-radius:13px; color:var(--ink); text-decoration:none; isolation:isolate; transform-style:preserve-3d; transition:transform .15s ease-out, border-color .2s ease, box-shadow .2s ease; box-shadow:0 16px 40px rgba(0,0,0,.28); }.portal-card::before { content:''; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 80% 10%,var(--wash),transparent 48%),linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.015) 42%,rgba(0,0,0,.35)); }.portal-card::after { content:''; position:absolute; inset:10px; z-index:-1; border:1px solid rgba(255,255,255,.16); border-radius:7px; pointer-events:none; }.tone-mint { --accent:#b9f34e; --wash:rgba(162,239,75,.2); }.tone-acid { --accent:#f5f078; --wash:rgba(243,238,113,.2); }.tone-sky { --accent:#78e1ff; --wash:rgba(85,203,239,.2); }.tone-orange { --accent:#ffad64; --wash:rgba(255,144,66,.2); }.tone-violet { --accent:#d1a5ff; --wash:rgba(172,105,255,.2); }.portal-card:hover { border-color:var(--accent); box-shadow:0 22px 50px rgba(0,0,0,.48),0 0 25px color-mix(in srgb,var(--accent),transparent 85%); }.portal-number { color:var(--accent); font:11px 'DM Mono',monospace; letter-spacing:.1em; }.portal-icon { position:absolute; top:18px; right:20px; color:var(--accent); font-size:25px; }.portal-content { margin-top:auto; transform:translateZ(24px); }.portal-type { color:var(--accent); font-size:9px; }.portal-content h3 { margin:10px 0 12px; font:400 29px var(--serif); }.portal-content p:not(.portal-type) { min-height:52px; margin:0; color:#acaab1; font-size:13px; line-height:1.65; }.portal-url { display:flex; justify-content:space-between; margin-top:27px; padding-top:15px; border-top:1px solid rgba(255,255,255,.17); color:#e8e7df; font-size:9px; }.portal-url b { color:var(--accent); font-size:16px; font-weight:400; line-height:8px; }.portal-wide { grid-column:span 2; min-height:260px; }.portal-wide .portal-content { max-width:500px; }.new-badge { position:absolute; top:20px; right:52px; padding:5px 8px; border:1px solid var(--accent); color:var(--accent); font:8px 'DM Mono',monospace; letter-spacing:.1em; }
.site-footer { display:flex; justify-content:space-between; padding:24px 0 30px; border-top:1px solid var(--line); color:#777680; font-size:9px; }.site-footer strong { color:#d4d2ca; font-weight:400; }.site-footer i { color:#b9f34e; font-style:normal; margin:0 6px; }
@media (max-width: 850px) { .page-shell { width:min(100% - 36px, 620px); }.hero { grid-template-columns:1fr; padding:65px 0 40px; }.hero-card-wrap { height:420px; }.portal-grid { grid-template-columns:repeat(2,1fr); }.portal-wide { grid-column:span 2; }.site-footer { gap:14px; flex-direction:column; } }
@media (max-width: 520px) { .site-header { min-height:84px; }.status { font-size:0; }.status-dot { margin:0; }.hero h1 { font-size:clamp(3rem,16vw,4.4rem); }.hero-lede { font-size:14px; }.hero-card-wrap { height:370px; }.hero-card { width:230px; }.orbit-a { width:310px; }.orbit-b { width:350px; }.section-heading { align-items:start; flex-direction:column; gap:18px; }.section-note { text-align:left; }.portal-grid { grid-template-columns:1fr; }.portal-card, .portal-wide { grid-column:span 1; min-height:315px; }.portal-wide { min-height:340px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.portal-card, .hero-card { transition:none; } }

/* Archive-card direction: the reference uses a quiet dot grid, hard-edged cards and a shared blue night field. */
body::before { background: radial-gradient(circle at 86% 14%, rgba(66, 128, 176, .2), transparent 32%), linear-gradient(135deg,#07111b 0%,#0d2234 58%,#102d43 100%); }
body::after { content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.42; background-image:radial-gradient(rgba(171,211,239,.48) .8px, transparent .8px); background-size:10px 10px; mask-image:linear-gradient(110deg, #000 0%, rgba(0,0,0,.86) 55%, transparent 100%); }
.page-shell { width:min(1370px, calc(100% - 92px)); }
.site-header { border-bottom-color:rgba(161,203,230,.22); }
.hero { min-height:340px; grid-template-columns:1fr 1fr; align-items:end; gap:60px; padding:64px 0 40px; }
.hero::before { content:none; }
.hero h1 { margin:22px 0 0; font-size:clamp(5.2rem, 12vw, 11.5rem); line-height:.78; letter-spacing:-.11em; }
.hero h1 em { color:#eef5ff; font-family:'Space Grotesk',sans-serif; font-style:normal; font-weight:600; }
.hero-lede { align-self:end; max-width:430px; margin:0 0 17px; color:#9cc9e8; font-size:15px; line-height:1.9; }
.portal-section { padding-top:24px; }
.section-heading { align-items:end; margin-bottom:36px; }
.section-heading h2 { color:#edf5ff; font-family:'Space Grotesk',sans-serif; font-size:clamp(1.45rem, 2.6vw, 2.6rem); font-weight:500; letter-spacing:-.055em; }
.section-note { color:#78a5c6; }
.portal-grid { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:18px; }
.portal-card, .portal-wide { min-height:390px; padding:0 16px 18px; border:1px solid rgba(130,181,216,.3); border-radius:0; background:#0d1d2b; box-shadow:none; }
.portal-card::before { background:linear-gradient(155deg,rgba(116,178,218,.15),rgba(12,29,44,.05) 47%,rgba(3,11,19,.7)); }
.portal-card::after { inset:0; border:0; border-radius:0; border-top:1px solid rgba(188,222,245,.18); }
.portal-card:hover { border-color:var(--accent); box-shadow:0 18px 40px rgba(1,8,14,.35); }
.portal-art { position:relative; height:182px; margin:0 -16px 17px; overflow:hidden; border-bottom:1px solid rgba(188,222,245,.2); isolation:isolate; }
.portal-art::before, .portal-art::after { content:''; position:absolute; pointer-events:none; }
.portal-art::before { inset:0; background:linear-gradient(145deg,rgba(255,255,255,.22),transparent 38%,rgba(0,0,0,.38)); mix-blend-mode:screen; }
.portal-art::after { width:150%; height:2px; top:52%; left:-20%; background:var(--accent); opacity:.55; transform:rotate(-25deg); box-shadow:0 0 24px var(--accent); }
.portal-art span { position:absolute; left:16px; bottom:12px; z-index:1; color:rgba(245,250,255,.86); font:10px 'DM Mono',monospace; letter-spacing:.18em; text-shadow:0 1px 12px #000; }
.art-im { background:radial-gradient(circle at 72% 35%,#d8ff6d 0 4%,transparent 5%), radial-gradient(circle at 34% 62%,#8ee7ff 0 3%,transparent 4%), linear-gradient(135deg,#104a66 0 34%,#0c1b3b 35% 58%,#8ec72a 59% 63%,#162c22 64%); }
.art-im::before { background-image:linear-gradient(35deg,transparent 42%,rgba(255,255,255,.65) 43% 44%,transparent 45%),linear-gradient(-35deg,transparent 42%,rgba(184,239,255,.6) 43% 44%,transparent 45%); background-size:45px 45px; }
.art-note { background:radial-gradient(circle at 22% 24%,#ffdb60 0 4%,transparent 5%), linear-gradient(150deg,#d5902a,#f0c067 42%,#5c9eac 43% 46%,#183f58 47% 100%); }
.art-note::before { inset:16px 22px 0; border:1px solid rgba(255,255,255,.42); transform:rotate(-7deg); box-shadow:16px 10px 0 rgba(10,37,55,.36), 32px 20px 0 rgba(10,37,55,.25); }
.art-life { background:radial-gradient(circle at 70% 20%,#ffe890 0 5%,transparent 6%), linear-gradient(135deg,#224e40 0 27%,#74a74a 28% 53%,#e8b35d 54% 62%,#315873 63%); }
.art-life::before { inset:0; background:repeating-linear-gradient(112deg,transparent 0 19px,rgba(255,255,255,.2) 20px 21px); transform:skewX(-20deg); }
.art-project { background:radial-gradient(circle at 72% 42%,#ffcf72 0 3%,transparent 4%), linear-gradient(125deg,#8b4f2d,#ed9d3d 34%,#294f6c 35% 68%,#bdd765 69%); }
.art-project::before { inset:22px; border:1px solid rgba(255,255,255,.45); transform:rotate(17deg); box-shadow:-24px 18px 0 rgba(14,39,55,.35), 20px -12px 0 rgba(255,224,112,.2); }
.art-nexa { background:radial-gradient(circle at 55% 52%,#ecceff 0 2%,transparent 3%), linear-gradient(135deg,#271c59,#5f39a8 38%,#151e50 39% 65%,#50b4d3 66%); }
.art-nexa::before { inset:28px; border:1px solid rgba(214,191,255,.75); transform:rotate(45deg); box-shadow:0 0 30px rgba(185,126,255,.65), inset 0 0 25px rgba(182,236,255,.25); }
.portal-number { position:relative; z-index:1; color:var(--accent); font-size:10px; }
.portal-icon { top:204px; right:16px; z-index:1; font-size:22px; }
.portal-content { position:relative; z-index:1; transform:none; }
.portal-type { margin-top:12px; color:var(--accent); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.portal-content h3 { margin:8px 0 10px; color:#f0f6ff; font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:500; letter-spacing:-.045em; }
.portal-content p:not(.portal-type) { min-height:68px; color:#86afd0; font-size:12px; line-height:1.55; }
.portal-url { margin-top:16px; padding-top:12px; color:#b6d6ed; font-size:8px; }
.portal-url b { color:#ffc74e; }
.holo-sheen { z-index:3; opacity:.08; }
.site-footer { border-top-color:rgba(161,203,230,.22); color:#6794b6; }
.site-footer strong { color:#a5cae5; }
@media (max-width: 1100px) { .portal-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }.portal-card, .portal-wide { min-height:380px; } }
@media (max-width: 850px) { .page-shell { width:min(100% - 36px, 680px); }.hero { grid-template-columns:1fr; min-height:310px; gap:26px; padding-top:52px; }.hero-lede { margin:0; }.portal-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }.portal-card, .portal-wide { grid-column:span 1; } }
@media (max-width: 520px) { .hero { padding-top:42px; }.hero h1 { font-size:clamp(5rem, 27vw, 8rem); }.portal-grid { grid-template-columns:1fr; }.portal-card, .portal-wide { min-height:370px; }.portal-art { height:195px; }.portal-icon { top:218px; } }

/* Compact homepage direction: keep the identity quiet and let the four cards carry the page. */
.hero { min-height:240px; padding-top:34px; padding-bottom:22px; gap:28px; }
.hero h1 { margin-top:14px; font-size:clamp(4.8rem, 9vw, 8.8rem); }
.hero-lede { margin-bottom:8px; max-width:390px; font-size:14px; line-height:1.7; }
.portal-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .portal-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hero { min-height:220px; padding-top:30px; }.hero h1 { font-size:clamp(4.6rem, 25vw, 7rem); }.portal-grid { grid-template-columns:1fr; } }

/* Supplied reference images become the card faces; the foil layer remains interactive above them. */
.portal-art { background:#122a40; }
.portal-art img { position:absolute; inset:0; z-index:-1; width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.86) contrast(1.05) brightness(.82); transition:transform .35s ease, filter .35s ease; }
.portal-card:hover .portal-art img { transform:scale(1.045); filter:saturate(1) contrast(1.08) brightness(.9); }
.art-im img { object-position:58% 40%; }
.art-note img { object-position:center 48%; }
.art-life img { object-position:center 62%; }
.art-project img { object-position:center 50%; }
.art-nexa img { object-position:center 48%; }

/* Standalone Holo Card pages: the homepage is the index, each card gets its own reveal page. */
.card-page { min-height:100vh; background:#07111b; }
.card-page::before { background:radial-gradient(circle at 76% 15%, rgba(64,133,186,.24), transparent 34%), linear-gradient(135deg,#06101a 0%,#0b2235 62%,#102d42 100%); }
.card-page-shell { width:min(960px, calc(100% - 44px)); min-height:100vh; margin:auto; padding:34px 0 54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.card-back { align-self:flex-start; color:#9bc3df; font:10px 'DM Mono',monospace; letter-spacing:.14em; text-decoration:none; transition:color .2s ease; }
.card-back:hover { color:#f3c84b; }
.holo-card { position:relative; width:min(640px,100%); aspect-ratio:1.18 / 1.45; overflow:hidden; border:2px solid #d9a83f; background:#0d1d2b; box-shadow:0 28px 80px rgba(0,0,0,.5), 0 0 24px rgba(246,190,66,.32), inset 0 0 25px rgba(246,190,66,.16); transform-style:preserve-3d; transition:transform .15s ease-out, border-color .25s ease, box-shadow .25s ease; isolation:isolate; }
.holo-card:hover { border-color:#ffe28a; box-shadow:0 32px 90px rgba(0,0,0,.58), 0 0 48px rgba(246,190,66,.46), inset 0 0 30px rgba(246,190,66,.2); }
.holo-card::before { content:''; position:absolute; inset:13px; border:1px solid rgba(255,220,116,.8); z-index:4; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(117,75,17,.46); }
.holo-card-art { position:absolute; inset:0; overflow:hidden; }
.holo-card-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,13,22,.05) 38%,rgba(5,14,24,.87) 86%,#081521 100%); }
.holo-card-art img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.92) contrast(1.08) brightness(.82); transform:translate3d(var(--art-x,0px),var(--art-y,0px),-14px) scale(1.07); transition:transform .18s ease-out, filter .5s ease; }
.holo-card:hover .holo-card-art img { transform:scale(1.035); filter:saturate(1.05) contrast(1.1) brightness(.92); }
.holo-card-art span { position:absolute; top:29px; left:31px; z-index:2; color:#e8f4ff; font:10px 'DM Mono',monospace; letter-spacing:.16em; text-shadow:0 2px 14px #000; }
.holo-card-rarity { position:absolute; top:28px; right:30px; z-index:6; color:#ffe18a; font:10px 'DM Mono',monospace; letter-spacing:.16em; text-shadow:0 0 12px rgba(255,198,66,.85); }
.holo-card-foil { position:absolute; inset:-45%; z-index:3; pointer-events:none; opacity:.3; mix-blend-mode:screen; background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,221,104,.6) 48%,rgba(93,219,255,.56) 52%,rgba(207,123,255,.32) 55%,transparent 62%); transform:translate3d(calc((var(--pointer-x,50%) - 50%) * .45),calc((var(--pointer-y,50%) - 50%) * .45),0) rotate(10deg); transition:transform .18s ease-out; }
.holo-card-glow { position:absolute; width:70%; aspect-ratio:1; left:15%; top:18%; z-index:1; border-radius:50%; pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--accent),transparent 62%),transparent 68%); filter:blur(28px); opacity:.55; mix-blend-mode:screen; }
.holo-card-copy { position:absolute; left:32px; right:32px; bottom:92px; z-index:5; transform:translate3d(var(--front-x,0px),var(--front-y,0px),42px); }
.holo-card-copy .portal-type { color:var(--accent); }
.holo-card-copy h1 { margin:10px 0 14px; color:#f5f8ff; font:500 clamp(2.4rem,7vw,5.4rem) 'Space Grotesk',sans-serif; letter-spacing:-.08em; }
.holo-card-copy p:not(.portal-type) { max-width:420px; margin:0; color:#b4d0e5; font-size:14px; line-height:1.75; }
.holo-card-copy .holo-card-detail { margin-top:10px; color:#d5e8f5; font-size:12px; line-height:1.6; }
.holo-card-meta { position:absolute; left:32px; right:32px; bottom:31px; z-index:5; display:flex; justify-content:space-between; padding-top:14px; border-top:1px solid rgba(255,220,116,.45); color:#f7df9d; font:9px 'DM Mono',monospace; letter-spacing:.13em; transform:translateZ(24px); }
.visit-site { display:flex; justify-content:space-between; align-items:center; width:min(640px,100%); padding:17px 20px; border:1px solid rgba(188,222,245,.3); color:#e8f4ff; background:rgba(12,32,48,.72); font:11px 'DM Mono',monospace; letter-spacing:.1em; text-decoration:none; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.visit-site span { color:#f3c84b; font-size:19px; }
.visit-site:hover { border-color:var(--accent); color:var(--accent); background:rgba(18,50,72,.9); }
@media (max-width:520px) { .card-page-shell { width:min(100% - 28px, 640px); padding:22px 0 32px; gap:20px; }.holo-card-copy { left:24px; right:24px; bottom:78px; }.holo-card-copy h1 { font-size:clamp(2.5rem,15vw,4rem); }.holo-card-copy p:not(.portal-type) { font-size:13px; }.holo-card-meta { left:24px; right:24px; bottom:24px; font-size:8px; }.holo-card-art span { left:24px; top:24px; font-size:8px; }.holo-card-rarity { right:24px; top:24px; font-size:8px; }.holo-card::before { inset:10px; } }