html{scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Outfit,sans-serif}.font-heading{font-family:'Space Mono',monospace}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.site-header{position:fixed;top:0;left:0;width:100%;z-index:50;background:rgba(11,15,26,.85);backdrop-filter:blur(12px)}.nav-wrap{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:18px 24px}.brand{font-family:'Space Mono',monospace;font-weight:700;color:var(--accent);letter-spacing:.12em}.custom-logo{max-height:54px;width:auto}.nav-menu{list-style:none;display:flex;gap:30px;margin:0;padding:0;font-size:14px}.nav-menu a{position:relative}.nav-menu a:after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--accent);transition:.3s}.nav-menu a:hover:after{width:100%}.glow-line{height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.4}.hero-section{position:relative;min-height:100vh;padding:110px 24px 60px;display:flex;align-items:center;justify-content:center;overflow:hidden}.star-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}.star{position:absolute;border-radius:50%;background:rgba(255,255,255,.65);animation:twinkle var(--dur) ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.2;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}.ring{position:absolute;border:1px solid var(--accent);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.ring-one{width:500px;height:500px;opacity:.1}.ring-two{width:700px;height:700px;opacity:.05}.hero-content{position:relative;z-index:2;text-align:center;max-width:820px}.kicker{font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}.hero-content h1{font-size:clamp(2.4rem,6vw,5rem);line-height:1.05;color:#fff;margin:0 0 24px}.hero-subtitle{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.7;opacity:.8;max-width:650px;margin:0 auto 34px}.button{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:6px;background:var(--accent);color:var(--bg);font-weight:700;border:0}.button svg{width:17px;height:17px}.section-wrap{max-width:1180px;margin:auto;padding:88px 24px}.top-space{padding-top:140px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center;margin-top:58px}.two-col h2,.section-title h2,.section-title h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;color:#fff;margin:0 0 24px}.two-col p{line-height:1.75;opacity:.85}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.feature-card,.blog-card,.podcast-card{background:var(--surface);border:1px solid rgba(62,207,207,.10);border-radius:14px;overflow:hidden;transition:transform .3s,box-shadow .3s}.feature-card{padding:26px}.feature-card:hover,.blog-card:hover,.podcast-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.25)}.feature-card svg{width:34px;height:34px;color:var(--accent);margin-bottom:16px}.feature-card h3{color:#fff;margin:0 0 8px}.feature-card p{font-size:14px;margin:0;opacity:.7}.section-title{text-align:center;margin:58px 0 50px}.card-grid{display:grid;gap:26px}.card-grid.three{grid-template-columns:repeat(3,1fr)}.card-grid.two{grid-template-columns:repeat(2,1fr)}.card-media,.podcast-media{height:220px;background:linear-gradient(135deg,var(--accent2),var(--accent));position:relative;overflow:hidden}.podcast-media{height:260px}.card-media img,.podcast-media img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:transform .4s}.blog-card:hover img,.podcast-card:hover img{transform:scale(1.04)}.placeholder-media{width:100%;height:100%;background:radial-gradient(circle at 40% 30%,var(--accent),var(--accent2) 45%,var(--surface))}.card-body{padding:24px}.card-body.big{padding:30px}.meta-line{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;color:var(--accent);opacity:.75;text-transform:uppercase;margin-bottom:16px}.card-body h3{font-size:19px;color:#fff;margin:0 0 12px}.card-body p{font-size:15px;line-height:1.65;opacity:.72}.read-more{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:13px;font-weight:700}.read-more svg{width:15px}.pill-row{display:flex;gap:10px;margin-bottom:16px}.pill-row span{font-size:12px;background:rgba(62,207,207,.1);color:var(--accent);padding:5px 9px;border-radius:999px;font-weight:700}.play-button{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center}.play-button svg{width:30px;height:30px;margin-left:3px}.site-footer{padding:50px 24px}.footer-inner{max-width:1180px;margin:34px auto 0;text-align:center}.footer-inner h4{color:#fff;margin:0 0 8px}.footer-inner p{opacity:.6;font-size:13px}.social-row{display:flex;gap:14px;justify-content:center;margin-top:24px}.social-row a{width:44px;height:44px;border-radius:10px;background:var(--surface);border:1px solid rgba(62,207,207,.1);display:flex;align-items:center;justify-content:center;color:var(--accent)}.social-row svg{width:20px}.single-main{max-width:900px;margin:auto;padding-left:24px;padding-right:24px}.single-article{padding-bottom:90px}.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);margin-bottom:28px}.single-article h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.08;color:#fff;margin:0 0 26px}.single-image{border-radius:18px;overflow:hidden;margin:0 0 34px}.single-image img{width:100%}.content-body{font-size:18px;line-height:1.85;opacity:.88}.content-body a{color:var(--accent);text-decoration:underline}.pagination{margin-top:42px}.screen-reader-text{position:absolute;left:-9999px}@media(max-width:900px){.two-col,.card-grid.three,.card-grid.two{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr 1fr}.nav-menu{gap:16px;font-size:13px}.nav-wrap{align-items:flex-start}}@media(max-width:620px){.nav-wrap{flex-direction:column;gap:14px}.nav-menu{flex-wrap:wrap}.feature-grid{grid-template-columns:1fr}.hero-section{padding-top:145px}.section-wrap{padding:70px 18px}.card-media,.podcast-media{height:190px}} .shop-home .section-title p:not(.kicker){max-width:720px;margin:12px auto 0;opacity:.75;line-height:1.7}.pix-callout{margin:24px auto 0;max-width:720px;padding:16px 18px;border:1px solid rgba(62,207,207,.18);border-radius:14px;background:rgba(62,207,207,.07);display:flex;gap:10px;align-items:center;justify-content:center;text-align:center}.pix-callout svg{width:20px;color:var(--accent);flex:none}.premium-panel{background:radial-gradient(circle at 20% 10%,rgba(62,207,207,.18),transparent 34%),linear-gradient(135deg,rgba(19,25,40,.96),rgba(11,15,26,.96));border:1px solid rgba(62,207,207,.16);border-radius:28px;padding:54px;box-shadow:0 24px 80px rgba(0,0,0,.28)}.premium-panel h2{font-size:clamp(2rem,4vw,3.2rem);color:#fff;margin:0 0 18px}.premium-panel p:not(.kicker){max-width:760px;line-height:1.75;opacity:.78}.premium-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.button.ghost{background:transparent;color:var(--accent);border:1px solid rgba(62,207,207,.35)}.center-card{text-align:center;max-width:640px;margin:auto}.s42-shop .woocommerce-products-header__title,.s42-shop .product_title{font-family:'Space Mono',monospace;color:#fff}.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:38px 0;padding:0}.woocommerce ul.products li.product{width:auto!important;float:none!important;margin:0!important;background:var(--surface);border:1px solid rgba(62,207,207,.1);border-radius:16px;overflow:hidden;padding:0 0 22px!important;position:relative}.woocommerce ul.products li.product a img{margin:0 0 18px!important;width:100%;height:260px;object-fit:cover;background:linear-gradient(135deg,var(--accent2),var(--accent))}.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:'Space Mono',monospace;color:#fff;font-size:18px;padding:0 20px!important}.woocommerce ul.products li.product .price{color:var(--accent)!important;font-weight:700;padding:0 20px}.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{background:var(--accent)!important;color:var(--bg)!important;border-radius:8px!important;font-weight:800!important}.woocommerce ul.products li.product .button{margin-left:20px}.woocommerce span.onsale,.s42-badge{background:var(--accent)!important;color:var(--bg)!important;border-radius:999px!important;min-height:auto!important;line-height:1!important;padding:8px 10px!important;font-weight:800!important}.s42-badge{position:absolute;top:12px;left:12px;z-index:2;font-size:12px}.woocommerce div.product{color:var(--text)}.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--accent);font-size:1.5rem}.woocommerce .quantity .qty{background:var(--surface);color:var(--text);border:1px solid rgba(62,207,207,.22);border-radius:8px;padding:8px}.woocommerce-cart table.cart,.woocommerce-checkout table.shop_table{background:var(--surface);border-radius:16px;overflow:hidden}.woocommerce table.shop_table{border-color:rgba(62,207,207,.16)}.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{background:#0f1524;color:var(--text);border:1px solid rgba(62,207,207,.18);border-radius:8px;padding:12px}.elementor-page .site-header{z-index:99}@media(max-width:900px){.woocommerce ul.products{grid-template-columns:1fr 1fr}.premium-panel{padding:34px}}@media(max-width:620px){.woocommerce ul.products{grid-template-columns:1fr}.premium-actions{flex-direction:column}.premium-actions .button{justify-content:center}} .post-summary-card{border-radius:18px;display:flex;flex-direction:column;height:100%}
.post-square-media{height:auto;aspect-ratio:1/1;border-radius:16px;margin:14px 14px 0;background:linear-gradient(135deg,var(--accent2),var(--accent))}
.post-square-media img,.post-square-media .placeholder-media{width:100%;height:100%;object-fit:cover;border-radius:16px}
.post-summary-body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 22px}
.post-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.post-chip{display:inline-flex;align-items:center;min-height:28px;padding:6px 10px;border-radius:999px;background:rgba(62,207,207,.08);border:1px solid rgba(62,207,207,.14);color:rgba(232,241,242,.78);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.post-chip-category{background:rgba(62,207,207,.16);color:var(--accent);border-color:rgba(62,207,207,.28)}
.post-chip-category:hover{background:var(--accent);color:var(--bg)}
.post-summary-body h3{margin-bottom:0}
.post-summary{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-summary-body .read-more{margin-top:auto;padding-top:4px}
@media(max-width:620px){.post-square-media{margin:12px 12px 0;border-radius:14px}.post-square-media img,.post-square-media .placeholder-media{border-radius:14px}.post-summary-body{padding:16px 18px 20px}} .s42-pagination{margin:54px auto 0;display:flex;justify-content:center;align-items:center;width:100%}
.s42-pagination ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0;padding:0}
.s42-pagination li{margin:0;padding:0}
.s42-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:999px;background:rgba(62,207,207,.08);border:1px solid rgba(62,207,207,.18);color:var(--text);font-weight:800;font-size:13px;letter-spacing:.03em;transition:transform .2s,background .2s,color .2s,border-color .2s}
.s42-pagination .page-numbers:hover{transform:translateY(-2px);background:rgba(62,207,207,.16);border-color:rgba(62,207,207,.36);color:#fff}
.s42-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.s42-pagination .page-numbers.prev,.s42-pagination .page-numbers.next{min-width:118px}
@media(max-width:620px){.s42-pagination .page-numbers{min-width:38px;height:38px;padding:0 12px}.s42-pagination .page-numbers.prev,.s42-pagination .page-numbers.next{min-width:auto}} .footer-menu{list-style:none;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:18px 0 0;padding:0;font-size:13px;opacity:.6}
.footer-menu a:hover{color:var(--accent)} .s42-breadcrumb{max-width:1180px;margin:0 auto;padding:14px 24px 0;font-size:13px;opacity:.55}
.s42-breadcrumb ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0}
.s42-breadcrumb li+li::before{content:'›';margin-right:8px}
.s42-breadcrumb a{color:var(--accent)} .s42-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:30px;border-top:1px solid rgba(62,207,207,.1)}
.s42-tag{font-size:12px;background:rgba(62,207,207,.08);color:var(--accent);padding:6px 14px;border-radius:999px;border:1px solid rgba(62,207,207,.2);transition:background .2s}
.s42-tag:hover{background:rgba(62,207,207,.18)} .footer-nav{margin-top:20px}
.footer-menu,.footer-menu li{list-style:none!important;margin:0;padding:0}
.footer-menu{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13px}
.footer-menu li::marker{display:none}
.footer-menu a{opacity:.55;transition:opacity .2s,color .2s}
.footer-menu a:hover{opacity:1;color:var(--accent)} .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:auto;height:auto;background:var(--accent);color:var(--bg);padding:12px 22px;border-radius:8px;font-weight:700;z-index:9999} .nav-actions{display:flex;align-items:center;gap:12px}
.search-toggle{
background:none;border:1px solid rgba(62,207,207,.18);cursor:pointer;
color:var(--accent);padding:7px 10px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
transition:background .2s,border-color .2s
}
.search-toggle:hover{background:rgba(62,207,207,.1);border-color:rgba(62,207,207,.4)}
.search-toggle svg{width:18px;height:18px} .search-overlay{
position:fixed;inset:0;z-index:300;
background:rgba(7,10,18,.97);
backdrop-filter:blur(20px);
display:flex;align-items:center;justify-content:center;
padding:24px;
}
.search-overlay[hidden]{display:none} .search-overlay:not([hidden]){animation:searchIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes searchIn{
from{opacity:0;transform:scale(.97)}
to{opacity:1;transform:scale(1)}
} .search-overlay-inner{
width:100%;max-width:680px;
position:relative;
text-align:center;
} .search-kicker{
font-size:11px;letter-spacing:.4em;text-transform:uppercase;
color:var(--accent);opacity:.7;margin:0 0 28px;
} .search-field-wrap{
display:flex;align-items:center;
background:rgba(19,25,40,.9);
border:1px solid rgba(62,207,207,.35);
border-radius:14px;
box-shadow:0 0 40px rgba(62,207,207,.08),inset 0 1px 0 rgba(62,207,207,.06);
overflow:hidden;
transition:border-color .2s,box-shadow .2s;
}
.search-field-wrap:focus-within{
border-color:rgba(62,207,207,.7);
box-shadow:0 0 50px rgba(62,207,207,.15),inset 0 1px 0 rgba(62,207,207,.1);
}
.search-icon-inline{
width:20px;height:20px;
color:var(--accent);opacity:.5;
flex:none;margin-left:22px;
}
.search-form-overlay input[type="search"]{
flex:1;background:none;border:none;outline:none;
color:#e8edf5;
font-family:Outfit,sans-serif;font-size:1.25rem;font-weight:400;
padding:20px 16px;
caret-color:var(--accent);
}
.search-form-overlay input[type="search"]::placeholder{
color:rgba(212,218,230,.28);
} .search-form-overlay input[type="search"]::-webkit-search-cancel-button{display:none}
.search-submit-btn{
background:var(--accent);border:none;cursor:pointer;
color:var(--bg);
padding:14px 20px;margin:6px 8px;
border-radius:9px;
display:flex;align-items:center;justify-content:center;
transition:background .2s,transform .15s;
flex:none;
}
.search-submit-btn:hover{background:#5ef0f0;transform:scale(1.05)}
.search-submit-btn svg{width:20px;height:20px} .search-hint{
margin:16px 0 0;
font-size:12px;
color:rgba(212,218,230,.3);
letter-spacing:.04em;
}
.search-hint kbd{
display:inline-block;
background:rgba(62,207,207,.08);
border:1px solid rgba(62,207,207,.2);
border-radius:5px;
padding:1px 7px;
font-family:'Space Mono',monospace;
font-size:11px;
color:var(--accent);
} .search-close{
position:absolute;top:-52px;right:0;
background:rgba(19,25,40,.8);
border:1px solid rgba(62,207,207,.15);
border-radius:9px;
cursor:pointer;
color:rgba(212,218,230,.5);
padding:7px;
display:flex;align-items:center;justify-content:center;
transition:color .2s,border-color .2s,background .2s;
}
.search-close:hover{color:var(--accent);border-color:rgba(62,207,207,.4);background:rgba(62,207,207,.08)}
.search-close svg{width:20px;height:20px} @media(max-width:620px){
.search-form-overlay input[type="search"]{font-size:1.05rem;padding:16px 12px}
.search-submit-btn{padding:11px 14px}
} body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(62,207,207,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(62,207,207,.028) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 120% 100% at 50% 0%, black 40%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 0%, black 40%, transparent 100%);
} .site-header, main, footer { position: relative; z-index: 1; } .hero-section::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(0,0,0,.13) 3px,
rgba(0,0,0,.13) 4px
);
} .hero-content { z-index: 3; }
.star-field, .ring { z-index: 0; } .brand::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
margin-right: 10px;
vertical-align: middle;
box-shadow: 0 0 6px var(--accent);
animation: signal-pulse 2s ease-in-out infinite;
}
@keyframes signal-pulse {
0%, 100% { opacity: 1;   box-shadow: 0 0 6px var(--accent); }
50%       { opacity: .35; box-shadow: 0 0 14px var(--accent); }
}  .blog-card, .podcast-card, .feature-card {
border-radius: 0 !important;
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
border: 1px solid rgba(62,207,207,.15) !important;
position: relative;
overflow: visible !important; } .blog-card::before, .podcast-card::before, .feature-card::before {
content: '';
position: absolute;
inset: -1px;
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
background: linear-gradient(
135deg,
rgba(62,207,207,0) 0%,
rgba(62,207,207,.6) 50%,
rgba(62,207,207,0) 100%
);
background-size: 200% 200%;
background-position: 200% 200%;
opacity: 0;
transition: opacity .3s, background-position .5s;
z-index: 0;
pointer-events: none;
}
.blog-card:hover::before,
.podcast-card:hover::before,
.feature-card:hover::before {
opacity: 1;
background-position: 0% 0%;
} .blog-card::after, .podcast-card::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 19px;
height: 19px;
background: var(--accent);
clip-path: polygon(100% 0, 100% 100%, 0 0);
opacity: .5;
z-index: 2;
pointer-events: none;
transition: opacity .3s;
}
.blog-card:hover::after, .podcast-card:hover::after { opacity: 1; } .blog-card > *, .podcast-card > *, .feature-card > * { position: relative; z-index: 1; } .card-media, .podcast-media {
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
} .blog-card:hover, .podcast-card:hover, .feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 20px rgba(62,207,207,.08);
} .button.hero-button {
border-radius: 0 !important;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
background: transparent !important;
color: var(--accent) !important;
border: 1px solid rgba(62,207,207,.5) !important;
letter-spacing: .1em;
text-transform: uppercase;
font-size: 13px;
position: relative;
overflow: hidden;
transition: color .3s, border-color .3s;
}
.button.hero-button::before {
content: '';
position: absolute;
inset: 0;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s cubic-bezier(.4,0,.2,1);
z-index: 0;
}
.button.hero-button:hover::before { transform: scaleX(1); }
.button.hero-button:hover { color: var(--bg) !important; border-color: var(--accent) !important; }
.button.hero-button > * { position: relative; z-index: 1; } .hero-section::before {
content: 'LAT 42.0°N  ·  LON 0.0°E  ·  ALT ∞';
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
font-family: 'Space Mono', monospace;
font-size: 10px;
letter-spacing: .25em;
color: var(--accent);
opacity: .3;
z-index: 3;
white-space: nowrap;
pointer-events: none;
} .s42-pagination { margin-top: 54px; display: flex; justify-content: center; }
.s42-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
font-family: 'Space Mono', monospace; font-size: 13px;
color: var(--accent);
border: 1px solid rgba(62,207,207,.2);
clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
background: transparent;
transition: background .2s, color .2s;
text-decoration: none; margin: 0 3px;
}
.s42-pagination .page-numbers.current,
.s42-pagination .page-numbers:hover {
background: var(--accent);
color: var(--bg);
}
.s42-pagination .page-numbers.prev,
.s42-pagination .page-numbers.next { width: auto; padding: 0 16px; clip-path: none; border-radius: 0; } .sponsor-card {
position: relative;
background: linear-gradient(135deg, rgba(19,25,40,.98), rgba(11,15,26,.98));
border: 1px solid rgba(62,207,207,.3) !important;
display: flex;
flex-direction: column;
overflow: visible !important;
} .sponsor-badge {
position: absolute;
top: -1px; left: -1px;
display: flex; align-items: center; gap: 6px;
background: var(--accent);
color: var(--bg);
font-family: 'Space Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
padding: 5px 12px 5px 10px;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
z-index: 4;
}
.sponsor-badge svg { width: 11px; height: 11px; }
.sponsor-inner {
display: flex;
flex-direction: column;
flex: 1;
padding-top: 32px; } .sponsor-logo-wrap {
padding: 24px 24px 0;
display: flex; align-items: center; justify-content: center;
min-height: 80px;
}
.sponsor-logo {
max-height: 60px;
max-width: 160px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .85;
}
.sponsor-logo-placeholder {
width: 60px; height: 60px;
border-radius: 0;
border: 1px solid rgba(62,207,207,.25);
display: flex; align-items: center; justify-content: center;
color: var(--accent);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: rgba(62,207,207,.06);
margin: 20px auto 0;
}
.sponsor-logo-placeholder svg { width: 28px; height: 28px; } .sponsor-eyebrow {
font-size: 9px !important;
letter-spacing: .3em !important;
text-transform: uppercase;
color: var(--accent) !important;
opacity: .6;
margin-bottom: 8px !important;
} .sponsor-link {
color: var(--accent) !important;
font-size: 12px !important;
font-weight: 700;
margin-top: 4px;
display: inline-flex; align-items: center; gap: 5px;
}
.sponsor-link svg { width: 13px; height: 13px; } .sponsor-card:hover {
box-shadow: 0 0 30px rgba(62,207,207,.12), 0 12px 40px rgba(0,0,0,.3);
transform: translateY(-3px);
} .missao-banner {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px 60px;
position: relative;
}
.missao-banner-inner {
display: flex;
align-items: center;
gap: 32px;
padding: 28px 36px;
background: linear-gradient(
100deg,
rgba(19,25,40,.95) 0%,
rgba(11,22,30,.97) 60%,
rgba(19,25,40,.95) 100%
);
border: 1px solid rgba(62,207,207,.22);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
position: relative;
z-index: 1;
} .missao-banner-inner::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 60px,
rgba(62,207,207,.015) 60px,
rgba(62,207,207,.015) 61px
);
pointer-events: none;
} .missao-signal {
display: flex;
align-items: center;
gap: 10px;
flex: none;
white-space: nowrap;
}
.missao-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
animation: signal-pulse 2s ease-in-out infinite;
flex: none;
}
.missao-kicker {
font-size: 9px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--accent);
opacity: .7;
} .missao-signal::after {
content: '';
display: block;
width: 1px;
height: 36px;
background: rgba(62,207,207,.2);
margin-left: 16px;
} .missao-content {
flex: 1;
display: flex;
align-items: center;
gap: 20px;
}
.missao-logo {
max-height: 36px;
max-width: 120px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .8;
flex: none;
}
.missao-name {
font-size: 16px;
font-weight: 700;
color: #fff;
flex: none;
}
.missao-text {
font-size: 13px;
line-height: 1.55;
opacity: .65;
} .missao-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
border: 1px solid rgba(62,207,207,.4);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
background: rgba(62,207,207,.04);
white-space: nowrap;
flex: none;
transition: background .2s, border-color .2s;
text-decoration: none;
}
.missao-btn:hover {
background: rgba(62,207,207,.12);
border-color: rgba(62,207,207,.7);
}
.missao-btn svg { width: 14px; height: 14px; } .missao-corners { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mc {
position: absolute;
width: 10px; height: 10px;
border-color: var(--accent);
border-style: solid;
opacity: .5;
}
.mc.tl { top: 0;    left: 0;   border-width: 1px 0 0 1px; }
.mc.tr { top: 0;    right: 0;  border-width: 1px 1px 0 0; }
.mc.bl { bottom: 0; left: 0;   border-width: 0 0 1px 1px; }
.mc.br { bottom: 0; right: 0;  border-width: 0 1px 1px 0; } @media (max-width: 768px) {
.missao-banner-inner {
flex-direction: column;
text-align: center;
gap: 18px;
padding: 22px 20px;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.missao-signal::after { display: none; }
.missao-signal { justify-content: center; }
.missao-content { flex-direction: column; gap: 10px; }
.missao-text { text-align: center; }
} .s42-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 48px;
padding-top: 36px;
border-top: 1px solid rgba(62,207,207,.1);
}
.s42-post-nav-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 20px;
background: rgba(19,25,40,.7);
border: 1px solid rgba(62,207,207,.12);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
text-decoration: none;
transition: border-color .2s, background .2s;
}
.s42-post-nav-item:hover {
border-color: rgba(62,207,207,.4);
background: rgba(62,207,207,.05);
}
.s42-post-nav-item.next { text-align: right; }
.s42-nav-label {
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent);
opacity: .7;
display: flex;
align-items: center;
gap: 6px;
}
.s42-post-nav-item.next .s42-nav-label { justify-content: flex-end; }
.s42-nav-label svg { width: 13px; height: 13px; }
.s42-nav-title {
font-family: 'Space Mono', monospace;
font-size: 12px;
color: #fff;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .s42-comments-wrap {
max-width: 780px;
margin: 60px auto 0;
padding: 0 24px;
position: relative;
} .s42-comments-header {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 36px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(62,207,207,.1);
position: relative;
}
.s42-comments-signal {
position: absolute;
top: 0; right: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
animation: signal-pulse 2s ease-in-out infinite;
}
.s42-comments-title {
font-size: 22px;
color: #fff;
margin: 0;
} .s42-comment-list {
list-style: none;
padding: 0;
margin: 0 0 48px;
display: flex;
flex-direction: column;
gap: 2px;
}
.s42-comment-list .children {
list-style: none;
padding: 0;
margin: 2px 0 0 32px;
display: flex;
flex-direction: column;
gap: 2px;
} .s42-comment {
position: relative;
}
.s42-comment-inner {
display: flex;
gap: 16px;
padding: 20px;
background: rgba(19,25,40,.6);
border: 1px solid rgba(62,207,207,.08);
border-left: 2px solid rgba(62,207,207,.25);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
transition: border-color .2s, background .2s;
margin-bottom: 8px;
}
.s42-comment-inner:hover {
border-color: rgba(62,207,207,.2);
border-left-color: var(--accent);
background: rgba(19,25,40,.85);
} .s42-comment-avatar { flex: none; }
.s42-avatar {
width: 44px !important;
height: 44px !important;
border-radius: 0 !important;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
border: 1px solid rgba(62,207,207,.2) !important;
filter: grayscale(20%);
} .s42-comment-body { flex: 1; min-width: 0; }
.s42-comment-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.s42-comment-author {
font-size: 13px;
font-weight: 700;
color: var(--accent);
letter-spacing: .06em;
}
.s42-comment-time {
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--text);
opacity: .4;
letter-spacing: .04em;
}
.s42-comment-pending {
font-family: 'Space Mono', monospace;
font-size: 9px;
background: rgba(255,180,0,.1);
color: #ffb400;
border: 1px solid rgba(255,180,0,.2);
padding: 2px 8px;
letter-spacing: .08em;
}
.s42-comment-text {
font-size: 14px;
line-height: 1.7;
color: var(--text);
opacity: .85;
}
.s42-comment-text p { margin-bottom: 8px; }
.s42-comment-text p:last-child { margin-bottom: 0; } .s42-comment-actions {
display: flex;
gap: 14px;
margin-top: 10px;
}
.s42-comment-actions a,
.s42-comment-actions .comment-reply-link,
.s42-comment-actions .comment-edit-link {
font-family: 'Space Mono', monospace;
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
opacity: .5;
display: flex;
align-items: center;
gap: 5px;
text-decoration: none;
transition: opacity .2s;
}
.s42-comment-actions a:hover,
.s42-comment-actions .comment-reply-link:hover { opacity: 1; }
.s42-comment-actions svg { width: 13px; height: 13px; } .s42-no-comments {
text-align: center;
padding: 40px 20px;
border: 1px dashed rgba(62,207,207,.15);
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
margin-bottom: 48px;
color: var(--text);
opacity: .5;
}
.s42-no-comments svg { width: 32px; height: 32px; color: var(--accent); margin-bottom: 12px; }
.s42-no-comments p.font-heading { font-size: 16px; color: #fff; margin-bottom: 6px; opacity: 1; } .s42-comments-closed {
text-align: center;
font-size: 13px;
color: var(--accent);
opacity: .4;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 0;
}
.s42-comments-closed svg { width: 15px; height: 15px; } .s42-comment-respond {
padding: 28px;
background: rgba(19,25,40,.7);
border: 1px solid rgba(62,207,207,.18);
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
position: relative;
} .s42-comment-respond::after {
content: '';
position: absolute;
top: -1px; right: -1px;
width: 19px; height: 19px;
background: var(--accent);
clip-path: polygon(100% 0, 100% 100%, 0 0);
opacity: .4;
}
.s42-form-header {
margin-bottom: 24px;
display: flex;
flex-direction: column;
gap: 4px;
}
.s42-form-header .kicker {
font-size: 9px;
letter-spacing: .35em;
}
.s42-form-header .font-heading:last-child {
font-size: 20px;
color: #fff;
} .s42-fields-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.s42-field-wrap { display: flex; flex-direction: column; gap: 7px; }
.s42-field-wrap.full { grid-column: 1 / -1; margin-bottom: 14px; } .s42-label {
font-family: 'Space Mono', monospace;
font-size: 10px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
opacity: .7;
}
.s42-label span { color: var(--accent); opacity: 1; } .s42-input {
background: rgba(11,15,26,.8);
border: 1px solid rgba(62,207,207,.18);
border-radius: 0;
color: var(--text);
font-family: 'Outfit', sans-serif;
font-size: 14px;
padding: 12px 16px;
outline: none;
width: 100%;
transition: border-color .2s, box-shadow .2s;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
resize: vertical;
caret-color: var(--accent);
}
.s42-input:focus {
border-color: rgba(62,207,207,.55);
box-shadow: 0 0 20px rgba(62,207,207,.08);
}
.s42-input::placeholder { opacity: .3; } .s42-cookies { margin-bottom: 20px; }
.s42-checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: var(--text);
opacity: .55;
cursor: pointer;
}
.s42-checkbox-label input { accent-color: var(--accent); margin-top: 2px; flex: none; } .s42-submit-row {
display: flex;
align-items: center;
justify-content: flex-end;
} .s42-submit-btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 26px;
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--bg);
background: var(--accent);
border: none;
cursor: pointer;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
transition: background .2s, transform .15s;
position: relative;
overflow: hidden;
}
.s42-submit-btn::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,.15);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.s42-submit-btn:hover::before { transform: scaleX(1); }
.s42-submit-btn:hover { transform: translateY(-1px); }
.s42-submit-btn svg { width: 15px; height: 15px; } .s42-comment-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 36px;
}
.s42-comment-pagination .page-numbers {
font-family: 'Space Mono', monospace;
font-size: 12px;
color: var(--accent);
padding: 6px 14px;
border: 1px solid rgba(62,207,207,.2);
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
text-decoration: none;
transition: background .2s;
}
.s42-comment-pagination .page-numbers.current,
.s42-comment-pagination .page-numbers:hover {
background: var(--accent);
color: var(--bg);
} @media (max-width: 640px) {
.s42-comments-wrap { padding: 0 16px; }
.s42-fields-row { grid-template-columns: 1fr; }
.s42-comment-respond { padding: 20px 16px; }
.s42-post-nav { grid-template-columns: 1fr; }
.s42-comment-list .children { margin-left: 16px; }
}  .s42-newsletter {
position: relative;
padding: 0 24px 60px;
max-width: 1180px;
margin: 0 auto;
}
.s42-newsletter--footer {
padding: 48px 32px 0;
border-bottom: 1px solid rgba(62,207,207,.08);
margin-bottom: 36px;
max-width: 100%;
}
.s42-nl-inner {
position: relative;
display: flex;
align-items: center;
gap: 40px;
padding: 40px 48px;
background: linear-gradient(
120deg,
rgba(11,15,26,.98) 0%,
rgba(19,30,40,.97) 50%,
rgba(11,15,26,.98) 100%
);
border: 1px solid rgba(62,207,207,.2);
clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
overflow: hidden;
} .s42-nl-inner::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(0,0,0,.06) 3px,
rgba(0,0,0,.06) 4px
);
pointer-events: none;
} .s42-nl-inner::after {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(62,207,207,.06) 0%, transparent 70%);
pointer-events: none;
} .s42-nl-deco {
position: relative;
flex: none;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.s42-nl-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(62,207,207,.2);
animation: nl-ring-pulse 3s ease-in-out infinite;
}
.s42-nl-ring--1 { width: 60px;  height: 60px;  animation-delay: 0s; }
.s42-nl-ring--2 { width: 80px;  height: 80px;  animation-delay: .6s; opacity: .5; }
@keyframes nl-ring-pulse {
0%, 100% { transform: scale(1);    opacity: .3; }
50%       { transform: scale(1.08); opacity: .7; }
}
.s42-nl-icon {
width: 28px; height: 28px;
color: var(--accent);
filter: drop-shadow(0 0 6px var(--accent));
position: relative; z-index: 1;
} .s42-nl-content { flex: 1; position: relative; z-index: 1; }
.s42-nl-kicker {
display: flex !important;
align-items: center;
gap: 9px;
font-size: 9px !important;
letter-spacing: .35em !important;
color: var(--accent) !important;
opacity: .75;
margin-bottom: 10px !important;
}
.s42-nl-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px var(--accent);
animation: signal-pulse 2s ease-in-out infinite;
flex: none;
}
.s42-nl-title {
font-size: clamp(18px, 2.5vw, 26px);
color: #fff;
margin-bottom: 8px;
line-height: 1.15;
}
.s42-nl-subtitle {
font-size: 13px;
line-height: 1.65;
opacity: .6;
margin-bottom: 24px;
max-width: 560px;
} .s42-nl-input-row {
display: flex;
align-items: center;
background: rgba(11,15,26,.9);
border: 1px solid rgba(62,207,207,.25);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
max-width: 540px;
}
.s42-nl-input-row:focus-within {
border-color: rgba(62,207,207,.6);
box-shadow: 0 0 30px rgba(62,207,207,.08);
}
.s42-nl-input-icon {
width: 17px; height: 17px;
color: var(--accent);
opacity: .45;
flex: none;
margin-left: 18px;
}
.s42-nl-input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--text);
font-family: 'Outfit', sans-serif;
font-size: 14px;
padding: 14px 16px;
caret-color: var(--accent);
}
.s42-nl-input::placeholder { opacity: .3; } .s42-nl-input::-webkit-search-cancel-button { display: none; } .s42-nl-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
background: var(--accent);
border: none;
cursor: pointer;
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bg);
flex: none;
position: relative;
transition: background .2s;
white-space: nowrap;
}
.s42-nl-btn:hover { background: #5ef0f0; }
.s42-nl-btn-text, .s42-nl-btn-icon { transition: opacity .2s; }
.s42-nl-btn-icon { width: 15px; height: 15px; }
.s42-nl-btn-loading {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
}
.s42-nl-btn-loading svg {
width: 18px; height: 18px;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } } .s42-nl-btn--loading .s42-nl-btn-text,
.s42-nl-btn--loading .s42-nl-btn-icon { opacity: 0; }
.s42-nl-btn--loading .s42-nl-btn-loading { display: flex; } .s42-nl-privacy {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
opacity: .35;
margin-top: 12px;
}
.s42-nl-privacy svg { width: 13px; height: 13px; color: var(--accent); flex: none; } .s42-nl-feedback { margin-top: 14px; }
.s42-nl-success,
.s42-nl-error {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
font-family: 'Space Mono', monospace;
font-size: 12px;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.s42-nl-success {
background: rgba(62,207,207,.08);
border: 1px solid rgba(62,207,207,.25);
color: var(--accent);
}
.s42-nl-success svg { width: 18px; height: 18px; flex: none; }
.s42-nl-error {
background: rgba(255,80,80,.06);
border: 1px solid rgba(255,80,80,.2);
color: #ff6060;
}
.s42-nl-error svg { width: 18px; height: 18px; flex: none; } .s42-nl--success .s42-nl-inner {
border-color: rgba(62,207,207,.5);
box-shadow: 0 0 40px rgba(62,207,207,.07);
} .s42-nl-corners { position: absolute; inset: 0; pointer-events: none; }
.nlc {
position: absolute;
width: 12px; height: 12px;
border-color: var(--accent);
border-style: solid;
opacity: .4;
}
.nlc--tl { top: 0;    left: 0;   border-width: 1.5px 0 0 1.5px; }
.nlc--tr { top: 0;    right: 0;  border-width: 1.5px 1.5px 0 0; }
.nlc--bl { bottom: 0; left: 0;   border-width: 0 0 1.5px 1.5px; }
.nlc--br { bottom: 0; right: 0;  border-width: 0 1.5px 1.5px 0; } .s42-newsletter--footer .s42-nl-inner {
flex-direction: column;
text-align: center;
gap: 24px;
padding: 36px 32px;
clip-path: none;
border-left: none;
border-right: none;
border-radius: 0;
background: transparent;
border: none;
border-top: 1px solid rgba(62,207,207,.08);
}
.s42-newsletter--footer .s42-nl-deco { display: none; }
.s42-newsletter--footer .s42-nl-subtitle { margin: 0 auto 20px; }
.s42-newsletter--footer .s42-nl-input-row { max-width: 480px; margin: 0 auto; }
.s42-newsletter--footer .s42-nl-privacy { justify-content: center; }
.s42-newsletter--footer .s42-nl-feedback { text-align: left; max-width: 480px; margin: 14px auto 0; }
.s42-newsletter--footer .s42-nl-corners { display: none; } @media (max-width: 768px) {
.s42-nl-inner {
flex-direction: column;
gap: 24px;
padding: 28px 20px;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
text-align: center;
}
.s42-nl-deco { display: none; }
.s42-nl-subtitle { max-width: 100%; }
.s42-nl-input-row { max-width: 100%; }
.s42-nl-btn {
padding: 14px 16px;
font-size: 9px;
}
.s42-nl-btn-text { display: none; }
.s42-nl-kicker { justify-content: center; }
.s42-nl-privacy { justify-content: center; }
} .s42-reactions {
position: relative;
margin: 48px 0 0;
padding: 32px;
background: rgba(19,25,40,.7);
border: 1px solid rgba(62,207,207,.15);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
} .s42-reactions::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
0deg, transparent, transparent 3px,
rgba(0,0,0,.07) 3px, rgba(0,0,0,.07) 4px
);
pointer-events: none;
} .s42-reactions-header {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 24px;
position: relative;
}
.s42-reactions-signal {
position: absolute;
top: 4px; right: 0;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
animation: signal-pulse 2s ease-in-out infinite;
}
.s42-reactions-kicker {
font-size: 9px;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--accent);
opacity: .65;
}
.s42-reactions-label {
font-size: 15px;
color: #fff;
font-family: 'Space Mono', monospace;
} .s42-reactions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative; z-index: 1;
} .s42-reaction-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 18px 12px 14px;
background: rgba(11,15,26,.8);
border: 1px solid rgba(62,207,207,.1);
cursor: pointer;
position: relative;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
transition: border-color .2s, background .2s, transform .15s;
text-align: center;
}
.s42-reaction-btn:hover:not(:disabled) {
border-color: rgba(62,207,207,.35);
background: rgba(62,207,207,.05);
transform: translateY(-2px);
}
.s42-reaction-btn:disabled:not(.s42-reaction-btn--active) {
opacity: .35;
cursor: not-allowed;
} .s42-reaction-btn::after {
content: '';
position: absolute;
top: -1px; right: -1px;
width: 11px; height: 11px;
background: rgba(62,207,207,.2);
clip-path: polygon(100% 0, 100% 100%, 0 0);
transition: background .2s;
}
.s42-reaction-btn:hover:not(:disabled)::after { background: rgba(62,207,207,.5); } .s42-reaction-emoji {
font-size: 28px;
line-height: 1;
transition: transform .2s;
filter: drop-shadow(0 0 4px rgba(62,207,207,.0));
}
.s42-reaction-btn:hover:not(:disabled) .s42-reaction-emoji {
transform: scale(1.2) translateY(-2px);
filter: drop-shadow(0 0 8px rgba(62,207,207,.3));
} .s42-reaction-label {
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
opacity: .7;
line-height: 1.3;
}
.s42-reaction-desc {
font-size: 11px;
color: var(--text);
opacity: .45;
} .s42-reaction-bar {
width: 100%;
height: 2px;
background: rgba(62,207,207,.08);
border-radius: 0;
overflow: hidden;
margin-top: 4px;
}
.s42-reaction-fill {
display: block;
height: 100%;
background: var(--accent);
transition: width .6s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 6px var(--accent);
min-width: 0;
} .s42-reaction-count {
font-family: 'Space Mono', monospace;
font-size: 13px;
font-weight: 700;
color: #fff;
} .s42-reaction-mine {
font-size: 8px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
background: rgba(62,207,207,.1);
border: 1px solid rgba(62,207,207,.25);
padding: 2px 8px;
} .s42-reaction-btn--active {
border-color: rgba(62,207,207,.4) !important;
background: rgba(62,207,207,.07) !important;
}
.s42-reaction-btn--active::after { background: var(--accent) !important; opacity: .7; }
.s42-reaction-btn--active .s42-reaction-label { opacity: 1; }
.s42-reaction-btn--active .s42-reaction-emoji {
filter: drop-shadow(0 0 10px rgba(62,207,207,.5));
} @keyframes reaction-pulse {
0%   { transform: scale(1); }
30%  { transform: scale(1.06) translateY(-3px); }
60%  { transform: scale(.98); }
100% { transform: scale(1); }
}
.s42-reaction-btn--pulse { animation: reaction-pulse .5s ease; } .s42-reactions-total {
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(62,207,207,.08);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
opacity: .55;
position: relative; z-index: 1;
}
.s42-reactions-total svg { width: 14px; height: 14px; }
.s42-total-num { font-size: 15px; font-weight: 700; color: #fff; opacity: 1; } .s42-reaction-burst {
position: absolute;
pointer-events: none;
z-index: 10;
}
.s42-particle {
position: absolute;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px var(--accent);
transform: translate(-50%, -50%);
animation: particle-fly .65s ease-out forwards;
}
@keyframes particle-fly {
0%   { transform: translate(-50%,-50%) rotate(var(--angle)) translateX(0)     scale(1);   opacity: 1; }
100% { transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--dist)) scale(0); opacity: 0; }
} @media (max-width: 640px) {
.s42-reactions-grid {
grid-template-columns: repeat(2, 1fr);
}
.s42-reactions { padding: 22px 16px; }
.s42-reaction-emoji { font-size: 24px; }
} .s42-reactions {
margin: 48px 0 0;
padding: 32px;
background: rgba(19,25,40,.7);
border: 1px solid rgba(62,207,207,.15);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
position: relative;
overflow: hidden;
} .s42-reactions::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 80px,
rgba(62,207,207,.012) 80px,
rgba(62,207,207,.012) 81px
);
pointer-events: none;
} .s42-reactions-header {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 24px;
position: relative;
}
.s42-reactions-signal {
position: absolute;
top: 4px; right: 0;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
animation: signal-pulse 2s ease-in-out infinite;
}
.s42-reactions-kicker {
font-size: 9px !important;
letter-spacing: .35em !important;
color: var(--accent) !important;
opacity: .65;
margin-bottom: 0 !important;
}
.s42-reactions-subtitle {
font-size: 13px;
opacity: .45;
} .s42-reactions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
z-index: 1;
} .s42-reaction-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 12px 16px;
background: rgba(11,15,26,.8);
border: 1px solid rgba(62,207,207,.12);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
cursor: pointer;
overflow: hidden;
transition: border-color .25s, background .25s, transform .2s;
outline: none;
text-align: center;
}
.s42-reaction-btn:not(:disabled):hover {
border-color: rgba(62,207,207,.4);
background: rgba(62,207,207,.06);
transform: translateY(-2px);
}
.s42-reaction-btn:not(:disabled):focus-visible {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(62,207,207,.3);
} .s42-reaction-emoji {
font-size: 28px;
line-height: 1;
display: block;
transition: transform .3s cubic-bezier(.34,1.56,.64,1);
filter: drop-shadow(0 0 0px transparent);
}
.s42-reaction-btn:not(:disabled):hover .s42-reaction-emoji {
transform: scale(1.2) translateY(-2px);
filter: drop-shadow(0 0 8px rgba(62,207,207,.4));
} .s42-reaction-label {
font-size: 9px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
opacity: .6;
line-height: 1.3;
transition: opacity .2s;
}
.s42-reaction-btn:hover .s42-reaction-label { opacity: 1; } .s42-reaction-count {
font-family: 'Space Mono', monospace;
font-size: 13px;
font-weight: 700;
color: #fff;
transition: color .2s, transform .3s;
}
.s42-reaction-btn:hover .s42-reaction-count { color: var(--accent); } .s42-reaction-btn--voted {
border-color: rgba(62,207,207,.35) !important;
background: rgba(62,207,207,.07) !important;
cursor: default;
}
.s42-reaction-btn--voted .s42-reaction-emoji {
filter: drop-shadow(0 0 6px rgba(62,207,207,.5));
transform: scale(1.1);
}
.s42-reaction-btn--voted .s42-reaction-label { opacity: 1; color: var(--accent); }
.s42-reaction-btn--voted .s42-reaction-count { color: var(--accent); } .s42-reaction-btn--animating .s42-reaction-emoji {
animation: reaction-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes reaction-pop {
0%   { transform: scale(1); }
40%  { transform: scale(1.5) translateY(-6px) rotate(-8deg); filter: drop-shadow(0 0 12px rgba(62,207,207,.7)); }
70%  { transform: scale(.9) translateY(2px); }
100% { transform: scale(1.1); }
} .s42-reaction-ripple {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(62,207,207,.15) 0%, transparent 70%);
opacity: 0;
pointer-events: none;
}
.s42-reaction-btn--animating .s42-reaction-ripple {
animation: ripple-out .5s ease-out forwards;
}
@keyframes ripple-out {
from { opacity: 1; transform: scale(.5); }
to   { opacity: 0; transform: scale(2); }
} .s42-reaction-btn--voted::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 10px; height: 10px;
background: var(--accent);
clip-path: polygon(100% 0, 100% 100%, 0 0);
opacity: .6;
} .s42-reactions-feedback {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 12px 16px;
background: rgba(62,207,207,.07);
border: 1px solid rgba(62,207,207,.22);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: .05em;
color: var(--accent);
animation: feedbackIn .3s ease;
}
@keyframes feedbackIn {
from { opacity: 0; transform: translateY(4px); }
to   { opacity: 1; transform: translateY(0); }
}
.s42-reactions-feedback svg { width: 16px; height: 16px; flex: none; } @media (max-width: 640px) {
.s42-reactions { padding: 22px 16px; }
.s42-reactions-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.s42-reaction-btn { padding: 16px 10px 14px; }
.s42-reaction-emoji { font-size: 24px; }
.s42-reaction-label { font-size: 8px; }
} .s42-reactions {
margin: 48px 0 0;
padding: 32px;
background: rgba(19,25,40,.6);
border: 1px solid rgba(62,207,207,.1);
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
position: relative;
} .s42-reactions::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 80px,
rgba(62,207,207,.015) 80px,
rgba(62,207,207,.015) 81px
);
pointer-events: none;
} .s42-reactions-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.s42-reactions-signal {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
animation: signal-pulse 2s ease-in-out infinite;
flex: none;
}
.s42-reactions-header .kicker {
font-size: 9px !important;
letter-spacing: .35em !important;
color: var(--accent) !important;
opacity: .65;
margin: 0 !important;
} .s42-reactions-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
position: relative;
z-index: 1;
} .s42-reaction-btn {
position: relative;
display: flex;
align-items: center;
gap: 9px;
padding: 12px 20px;
background: rgba(11,15,26,.8);
border: 1px solid rgba(62,207,207,.15);
cursor: pointer;
color: var(--text);
clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
transition:
background .2s,
border-color .2s,
transform .15s,
box-shadow .2s;
overflow: visible;
user-select: none;
}
.s42-reaction-btn:hover {
background: rgba(19,30,40,.95);
border-color: rgba(var(--r-color), .5);
border-color: color-mix(in srgb, var(--r-color) 50%, transparent);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 16px color-mix(in srgb, var(--r-color) 10%, transparent);
} .s42-reaction-btn:hover { border-color: rgba(62,207,207,.4); } .s42-reaction-icon {
display: flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
color: var(--r-color);
transition: transform .2s, filter .2s;
}
.s42-reaction-icon svg { width: 18px; height: 18px; }
.s42-reaction-btn:hover .s42-reaction-icon {
transform: scale(1.15);
filter: drop-shadow(0 0 6px var(--r-color));
} .s42-reaction-label {
font-family: 'Space Mono', monospace;
font-size: 10px;
letter-spacing: .08em;
color: var(--text);
opacity: .7;
transition: opacity .2s, color .2s;
}
.s42-reaction-count {
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
color: var(--r-color);
min-width: 16px;
text-align: right;
opacity: .85;
transition: transform .2s;
} .s42-reaction-btn--voted {
background: color-mix(in srgb, var(--r-color) 8%, rgba(11,15,26,.9));
border-color: color-mix(in srgb, var(--r-color) 40%, transparent) !important;
} .s42-reaction-btn--voted { background: rgba(62,207,207,.07); border-color: rgba(62,207,207,.35) !important; }
.s42-reaction-btn--voted .s42-reaction-label {
color: var(--r-color);
opacity: 1;
}
.s42-reaction-btn--voted .s42-reaction-icon {
filter: drop-shadow(0 0 5px var(--r-color));
} .s42-reaction-btn--voted::after {
content: '';
position: absolute;
top: -1px; right: -1px;
width: 10px; height: 10px;
background: var(--r-color);
clip-path: polygon(100% 0, 100% 100%, 0 0);
opacity: .7;
} @keyframes count-pop {
0%   { transform: scale(1); }
40%  { transform: scale(1.4); }
70%  { transform: scale(.9); }
100% { transform: scale(1); }
}
.s42-reaction-btn--voted .s42-reaction-count {
animation: count-pop .35s cubic-bezier(.34,1.56,.64,1);
} .s42-reaction-burst {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible;
}
.s42-burst-particle {
--i: 0;
position: absolute;
top: 50%; left: 50%;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--r-color);
opacity: 0;
transform: translate(-50%, -50%);
}
.s42-burst-particle.s42-burst-active {
animation: burst-out .5s cubic-bezier(.22,1,.36,1) forwards;
animation-delay: calc(var(--i) * 30ms);
}
@keyframes burst-out {
0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% {
opacity: 0;
transform:
translate(
calc(-50% + cos(calc(var(--i) * 60deg)) * 28px),
calc(-50% + sin(calc(var(--i) * 60deg)) * 28px)
)
scale(0);
}
} .s42-reactions-note {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
opacity: .28;
margin-top: 18px;
position: relative;
z-index: 1;
}
.s42-reactions-note svg { width: 13px; height: 13px; flex: none; } @media (max-width: 580px) {
.s42-reactions { padding: 20px 16px; }
.s42-reactions-grid { gap: 8px; }
.s42-reaction-btn { padding: 10px 14px; gap: 7px; }
.s42-reaction-label { display: none; }
.s42-reaction-count { min-width: 0; }
}