:root{
  --black:#000000;
  --bone:#d8cfc5;
  --bone-soft:#b9aea4;
  --ash:#81746b;
  --ash-dim:#5b4f49;
  --blood:#6a110c;
  --red:#b92f20;
  --red-hot:#e15838;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:var(--bone)}
html{background:#000}
body{
  min-height:100vh;
  overflow:hidden;
  background:#000;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.stage{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;background:#000;}
.art{position:absolute;inset:-2%;z-index:-20;background:url("sytry-bg.webp") 50% 50% / cover no-repeat;transform:scale(1.02);filter:brightness(.86) contrast(1.055) saturate(.92);will-change:transform,filter;}
.vignette{position:absolute;inset:0;z-index:40;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 0 48%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.72) 100%),linear-gradient(90deg,rgba(0,0,0,.31) 0%,transparent 29%,transparent 73%,rgba(0,0,0,.20) 100%),linear-gradient(180deg,rgba(0,0,0,.12),transparent 25%,transparent 72%,rgba(0,0,0,.28));}
.texture{position:absolute;inset:-14%;z-index:41;pointer-events:none;opacity:.06;background-image:radial-gradient(circle,rgba(255,255,255,.10) 0 .5px,transparent .75px),radial-gradient(circle,rgba(255,255,255,.035) 0 .4px,transparent .65px);background-size:5px 5px,8px 8px;background-position:0 0,3px 2px;mix-blend-mode:soft-light;animation:grain 10s steps(8) infinite;}
.scan{position:absolute;inset:0;z-index:39;pointer-events:none;opacity:.03;background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 5px);mix-blend-mode:soft-light;}
.fog{position:absolute;left:-9%;right:-9%;bottom:-8%;height:34%;z-index:-5;pointer-events:none;background:radial-gradient(ellipse at 26% 70%,rgba(147,128,116,.052),transparent 39%),radial-gradient(ellipse at 73% 69%,rgba(147,128,116,.045),transparent 41%),radial-gradient(ellipse at 50% 80%,rgba(185,47,32,.044),transparent 45%);filter:blur(28px);animation:fogDrift 22s ease-in-out infinite;}
.red-glow{position:absolute;left:50%;top:78%;width:460px;height:110px;transform:translate(-50%,-50%);z-index:-8;border-radius:50%;background:radial-gradient(ellipse,rgba(225,88,56,.20),rgba(185,47,32,.09) 35%,transparent 72%);filter:blur(22px);opacity:.48;animation:glowPulse 9s ease-in-out infinite;}
.beam{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);z-index:-7;background:linear-gradient(180deg,transparent 0 8%,rgba(225,88,56,.46) 18%,rgba(185,47,32,.22) 43%,rgba(185,47,32,.11) 74%,transparent 100%);box-shadow:0 0 8px rgba(225,88,56,.22);opacity:.26;animation:beamPulse 8.2s ease-in-out infinite;}
.pit-aura{position:absolute;left:50%;top:74.35vh;width:clamp(300px, 36vw, 620px);height:clamp(90px, 14vh, 160px);transform:translateX(-50%);z-index:4;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 50% 48%, rgba(225,88,56,.18) 0 12%, rgba(185,47,32,.10) 28%, rgba(106,17,12,.05) 44%, transparent 74%),radial-gradient(ellipse at 50% 52%, rgba(255,255,255,.02), transparent 46%);filter:blur(10px);opacity:.64;animation:pitPulse 7.2s ease-in-out infinite;}
.pit-smoke{position:absolute;left:50%;top:62vh;width:clamp(200px, 24vw, 440px);height:clamp(160px, 24vh, 300px);transform:translateX(-50%);z-index:3;pointer-events:none;background:radial-gradient(ellipse at 30% 70%, rgba(225,88,56,.07), transparent 40%),radial-gradient(ellipse at 70% 76%, rgba(225,88,56,.06), transparent 36%),radial-gradient(ellipse at 50% 86%, rgba(145,119,107,.07), transparent 48%);filter:blur(28px);opacity:.50;animation:smokeRise 12s ease-in-out infinite;}
#embers{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;opacity:.58;}
.content{position:absolute;left:clamp(34px,7vw,132px);bottom:clamp(68px,10vh,118px);z-index:12;width:min(550px,40vw);text-align:left;text-shadow:0 3px 20px rgba(0,0,0,.98);animation:copyIn 1.2s cubic-bezier(.2,.7,.2,1) both;}
.eyebrow{margin:0 0 13px;color:rgba(216,207,197,.45);font:600 9px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.34em;text-transform:uppercase;}
.brand{margin:0;color:var(--bone);font-family:"Bodoni MT","Bodoni 72",Didot,"Times New Roman",serif;font-size:clamp(66px,7.2vw,126px);line-height:.78;font-weight:400;letter-spacing:.015em;text-transform:none;text-shadow:0 3px 0 rgba(0,0,0,.75),0 18px 45px rgba(0,0,0,.72),0 0 34px rgba(106,17,12,.08);}
.brand::after{content:"";display:block;width:min(310px,72%);height:1px;margin-top:24px;background:linear-gradient(90deg,rgba(225,88,56,.72),rgba(185,47,32,.25) 42%,transparent 100%);box-shadow:0 0 14px rgba(106,17,12,.20);}
.state-row{display:flex;align-items:center;gap:14px;margin-top:17px;}
.code{margin:0;color:var(--red);font:500 clamp(13px,1.18vw,17px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.20em;white-space:nowrap;}
.state-rule{width:34px;height:1px;flex:0 0 auto;background:rgba(216,207,197,.18);}
.status{margin:0;color:var(--bone-soft);font:500 clamp(10px,.87vw,13px)/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.26em;text-transform:uppercase;}
.message{max-width:440px;margin:13px 0 0;color:#897b72;font:400 clamp(10px,.76vw,12px)/1.75 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase;}
.spectre{position:absolute;right:clamp(28px,5.8vw,110px);bottom:clamp(50px,7.5vh,86px);z-index:11;color:transparent;-webkit-text-stroke:1px rgba(185,47,32,.19);text-stroke:1px rgba(185,47,32,.19);font-family:"Bodoni MT","Bodoni 72",Didot,"Times New Roman",serif;font-size:clamp(108px,15vw,270px);font-weight:400;line-height:.72;letter-spacing:-.035em;opacity:.42;text-shadow:0 0 26px rgba(106,17,12,.10);pointer-events:none;user-select:none;animation:spectreIn 1.55s .15s cubic-bezier(.2,.7,.2,1) both;}
.corner{position:fixed;top:24px;z-index:50;color:rgba(216,207,197,.23);font:8px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.30em;text-transform:uppercase;}
.corner.left{left:28px}.corner.right{right:28px;text-align:right}
.footer-mark{position:fixed;left:50%;bottom:19px;width:1px;height:28px;transform:translateX(-50%);z-index:50;background:linear-gradient(180deg,transparent,rgba(225,88,56,.68));box-shadow:0 0 9px rgba(185,47,32,.24);opacity:.55;}
.monolith-live{position:absolute;left:50%;top:16.4vh;width:clamp(108px,10.0vw,198px);height:clamp(258px,45.8vh,606px);transform:translateX(-50%);z-index:6;pointer-events:none;animation:monolithFloat 10.8s ease-in-out infinite;}
.monolith-side{position:absolute;top:1%;bottom:1%;width:8px;opacity:.18;filter:blur(2px);}
.sheen-left{left:8%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.045) 18%,rgba(255,255,255,.02) 48%,transparent 84%);}
.sheen-right{right:8%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.028) 16%,rgba(255,255,255,.012) 42%,transparent 80%);}
.seam-core,.seam-bloom,.seam-glint,.filament,.halo,.reflection-trace{position:absolute;left:50%;pointer-events:none;}
.seam-core{top:0;bottom:0;width:1px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(225,88,56,0) 0%,rgba(225,88,56,.42) 9%,rgba(185,47,32,.18) 21%,rgba(225,88,56,.68) 52%,rgba(185,47,32,.18) 76%,rgba(225,88,56,.34) 91%,rgba(225,88,56,0) 100%);box-shadow:0 0 4px rgba(225,88,56,.36);opacity:.72;animation:seamFlicker 5.8s ease-in-out infinite;}
.seam-bloom{top:8%;bottom:8%;width:6px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(225,88,56,.16) 18%,rgba(225,88,56,.12) 48%,rgba(185,47,32,.10) 76%,transparent);filter:blur(5px);opacity:.5;animation:bloomPulse 6.6s ease-in-out infinite;}
.seam-glint{top:-14%;width:16px;height:74px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(225,88,56,0),rgba(255,215,196,.42) 44%,rgba(225,88,56,.7) 65%,rgba(225,88,56,0));filter:blur(3px);opacity:.65;animation:glintDrop 6.2s linear infinite;}
.glint-2{width:10px;height:48px;opacity:.28;animation-duration:8.6s;animation-delay:-4s;filter:blur(5px);}
.filament{top:-12%;width:1px;height:124%;opacity:0;}
.f1{transform:translateX(-5px);}
.f2{transform:translateX(4px);}
.f3{transform:translateX(0px);}
.halo{border-radius:50%;opacity:0;filter:blur(10px);} 
.halo-top{top:11%;width:26px;height:26px;transform:translateX(-50%);}
.halo-mid{top:48%;width:34px;height:48px;transform:translateX(-50%);}
.reflection-trace{bottom:-18vh;width:50px;height:24vh;transform:translateX(-50%);background:linear-gradient(180deg,rgba(225,88,56,.22),rgba(185,47,32,.08) 30%,transparent 88%);filter:blur(10px);opacity:.18;animation:reflectionPulse 5.2s ease-in-out infinite;}
@keyframes grain{0%{transform:translate3d(-2%,-1%,0)}25%{transform:translate3d(1%,2%,0)}50%{transform:translate3d(2%,-2%,0)}75%{transform:translate3d(-1%,1%,0)}100%{transform:translate3d(-2%,-1%,0)}}
@keyframes fogDrift{0%,100%{transform:translate3d(-1.2%,0,0)}50%{transform:translate3d(1.2%,-1%,0)}}
@keyframes glowPulse{0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.98)}50%{opacity:.58;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes beamPulse{0%,100%{opacity:.13}50%{opacity:.30}}
@keyframes pitPulse{0%,100%{opacity:.48;transform:translateX(-50%) scale(1)}50%{opacity:.74;transform:translateX(-50%) scale(1.045)}}
@keyframes smokeRise{0%,100%{opacity:.26;transform:translateX(-50%) translateY(12px) scale(.95)}50%{opacity:.54;transform:translateX(-50%) translateY(-14px) scale(1.03)}}
@keyframes monolithFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
@keyframes seamFlicker{0%,100%{opacity:.58}50%{opacity:.86}68%{opacity:.72}}
@keyframes bloomPulse{0%,100%{opacity:.28}50%{opacity:.56}}
@keyframes glintDrop{0%{transform:translate(-50%,-14%)}100%{transform:translate(-50%,126%)}}
@keyframes reflectionPulse{0%,100%{opacity:.12;transform:translateX(-50%) scaleY(.9)}50%{opacity:.26;transform:translateX(-50%) scaleY(1.06)}}
@keyframes copyIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
@keyframes spectreIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:.42;transform:translateY(0)}}
@media (max-width:980px){.content{width:min(560px,50vw);}}
@media (max-width:780px){.art{inset:-8%;background-position:center center}.monolith-live{top:18vh;width:21vw;height:40vh}.pit-aura{top:72vh;width:76vw;height:12vh}.pit-smoke{top:59vh;width:58vw;height:22vh}.content{left:20px;right:20px;bottom:72px;width:auto}.brand{font-size:clamp(48px,13vw,88px)}.spectre{right:18px;bottom:24px;font-size:clamp(84px,28vw,180px);opacity:.28}.corner{top:16px;font-size:8px}.corner.left{left:16px}.corner.right{right:16px}.message{max-width:100%}}

/* PREMIUM / SUBTLE: keep the monolith almost untouched. */
.f1,.f2,.f3{display:none;}
.halo-top,.halo-mid{display:none;}
.monolith-side{opacity:.12;}
.seam-core{width:1px; box-shadow:0 0 3px rgba(225,88,56,.32);} 
.seam-bloom{width:4px; opacity:.28; filter:blur(6px);} 
.seam-glint{height:62px; width:12px; opacity:.42; filter:blur(4px);} 
.glint-2{display:none;}
.pit-aura{opacity:.58;}
.pit-smoke{opacity:.40;}
#embers{opacity:.50;}

@media (prefers-reduced-motion:reduce){.texture,.fog,.red-glow,.beam,.pit-aura,.pit-smoke,.monolith-live,.seam-core,.seam-bloom,.seam-glint,.filament,.halo,.reflection-trace,.spectre,.content{animation:none!important}}