/* ORBYTHS / Gothic arcade launch, 23 October 2026.
   Original logo and model portraits; generated environment is concept art.
   Motion is short, user-initiated or explicitly enabled in the 3D viewer. */
:root{--ink:#080713;--deep:#151123;--cream:#fff1da;--muted:#c2b8d1;--acid:#d6ff78;--gold:#d6ff78;--lavender:#c89aff;--line:#bb92ef30}
body{background:var(--ink)}
main{overflow:clip}
.section-wrap{width:min(1280px,calc(100% - 100px))}
.site-header{height:88px;background:#090813;z-index:5;border-bottom:1px solid #b89ad526}
.site-header .wordmark{font-size:1.25rem;gap:7px}
.site-header .wordmark img{width:57px;height:57px}
.site-header .wordmark-dot{color:#fba15e;font-size:.9rem}
.site-header nav{gap:28px}
.site-header nav a{position:relative;color:#e6daf5}
.site-header nav a:after{content:'';position:absolute;bottom:5px;left:0;width:0;height:2px;background:var(--acid);transition:width .2s}
.site-header nav a:hover:after{width:100%}
.site-header>.text-button{border:1px solid var(--line);border-radius:8px;padding:9px 16px;color:var(--cream)}
.eyebrow{color:var(--lavender)}
.button{background:var(--acid);border-color:var(--acid);box-shadow:0 5px 0 #718f32,0 9px 35px #b5ef3914;color:#14111b;border-radius:8px 20px 8px 20px}
.button:hover{box-shadow:0 8px 0 #718f32,0 14px 40px #b5ef3928}
.hero{min-height:790px;max-width:none;grid-template-columns:1fr 1fr;padding:63px max(5%,calc((100vw - 1280px)/2)) 80px;gap:0;isolation:isolate}
.cinematic-world{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;z-index:-4;opacity:.96}
.hero-grain{z-index:-3;background:linear-gradient(90deg,#080713b8 0%,#08071344 42%,transparent 70%),linear-gradient(0deg,#080713 0%,#08071300 33%,#08071322 80%,#08071355)}
.hero-content{max-width:680px;text-shadow:0 3px 20px #080713}
.hero-content .eyebrow{font-size:.62rem;color:#d9bfed;letter-spacing:.12em;margin-bottom:21px}
.status-dot{background:#fc9959;box-shadow:0 0 16px #f77c6666}
.hero h1{font-size:clamp(5.2rem,8.2vw,8rem);line-height:.82;letter-spacing:-.065em;margin-bottom:29px}
.hero h1 small{display:block;color:var(--cream);font:italic 500 clamp(1.7rem,3vw,3rem)/1.25 Georgia,serif;letter-spacing:-.04em;margin-bottom:20px}
.hero h1>span{color:var(--cream);display:block;transform:rotate(-3deg);transform-origin:left bottom}
.hero h1 em{font-family:var(--display);font-style:normal;font-weight:900;color:var(--acid);letter-spacing:-.08em;display:inline-block;text-shadow:4px 6px 0 #263a16,0 10px 30px #0006}
.hero-copy{color:#e1d8e9;font-size:1rem;line-height:1.65;margin:0 0 24px}
.hero-actions{gap:14px}
.hero-actions .round-link{font-size:.75rem;border-radius:9px;min-width:92px;min-height:57px;background:#17102470;backdrop-filter:blur(8px);border-color:#dfc8fb55}
.hero-actions .round-link:hover{transform:translateY(-3px);background:#21162b}
.release-note{border-color:#d6ff7890;gap:2px;margin-top:26px}
.release-note>span{font-size:.95rem}
.release-note small{font-size:.65rem;color:#c8b5d7}
.hero-promise{font-size:.71rem;margin-top:18px}
.hero-art{min-height:600px;margin:0;align-items:flex-start;padding-top:10px}
.hero-logo{width:min(90%,430px);max-width:430px;transform:rotate(7deg);filter:drop-shadow(0 20px 16px #0009);animation:brand-settle .9s ease-out both;z-index:3}
.hero-originals{position:absolute;bottom:0;left:-17%;right:-8%;height:340px;z-index:2;pointer-events:none}
.hero-model{position:absolute;object-fit:contain;mix-blend-mode:screen;filter:brightness(.9) saturate(1.05);width:350px;height:350px;mask-image:radial-gradient(ellipse 42% 42% at 50% 50%,#000 71%,transparent 100%)}
.hero-model-a{left:0;bottom:-5px;transform:rotate(-17deg);width:370px;height:370px;z-index:2}
.hero-model-b{right:-8px;bottom:18px;transform:rotate(19deg);width:310px;height:310px}
.hand-note{top:25px;right:-2%;color:#edc6ff;font-size:.95rem;z-index:4;text-shadow:0 3px 8px #000;transform:rotate(9deg)}
.chaos-stamp{top:auto;left:auto;bottom:37%;right:0;width:83px;height:93px;border:0;outline:0;border-radius:0;background:#ff985d;color:#241024;clip-path:polygon(50% 0,63% 13%,83% 4%,84% 26%,100% 33%,87% 50%,100% 70%,78% 73%,76% 96%,55% 86%,40% 100%,31% 80%,9% 86%,17% 62%,0 50%,18% 35%,12% 14%,35% 19%);transform:rotate(12deg);font-size:.64rem}
.chaos-stamp strong{font-size:1.5rem}
.hero-art .art-caption{bottom:-26px;font-size:.47rem;letter-spacing:.11em;color:#bca5cf}
.hero-foot{bottom:14px;font-size:.55rem;letter-spacing:.1em;color:#c7b4dc}
.hero-foot a{color:#d6c9e3}
.chaos-strip{margin:0;position:relative;background:#d6ff78;color:#1b1225;border:0;padding:20px 4%;font-size:clamp(1.5rem,3vw,2.9rem);transform:rotate(-1.5deg);width:102%;left:-1%;box-shadow:0 10px 45px #0008;z-index:2}
.chaos-strip i{color:#8046ad}
.modes{padding-top:110px}
.section-heading>p{color:#bfb2ce}
.section-heading h2 em{color:#ca9de8}
.pipe-feature{min-height:590px;border-color:#d19beb66;border-radius:18px 80px 18px 18px;box-shadow:0 25px 80px #0005}
.pipe-feature>img{opacity:.94}
.pipe-shade{background:linear-gradient(90deg,#100b1aeb 0%,#100b1aaf 34%,#100b1a00 75%),linear-gradient(0deg,#100b1a80,transparent 50%)}
.pipe-copy{padding:57px}
.pipe-copy h3{font-size:clamp(5rem,8vw,7.8rem);transform:rotate(-4deg);transform-origin:left center}
.pipe-copy h3 em{font-family:var(--display);font-style:normal;font-weight:900;text-shadow:3px 5px #32613a}
.pipe-copy p{font-size:.96rem;color:#e0d2e9}
.mode-chip{background:#160f22aa;color:#e1ffaf;border-color:#d6ff7877}
.tag-row span{font-size:.66rem;backdrop-filter:blur(6px)}
.image-disclaimer{font-size:.55rem;letter-spacing:.05em;background:#080713bd;padding:6px 8px;border-radius:4px;color:#d8cbdf}
.power-row{padding-block:33px 40px}
.power-row img{width:114px;height:114px;filter:drop-shadow(0 7px 11px #0008)}
.power-row li>span{font-size:.68rem;color:#f8eada}
.power-row small{font-size:.7rem}
.mode-grid{gap:21px}
.mode-card{border-color:#c49af132;background:linear-gradient(150deg,#2e163566,#140e22 65%);border-radius:14px 40px 14px 14px;padding:24px 26px 30px}
.arena-card{box-shadow:inset 0 2px #fb79a7}
.draw-card{box-shadow:inset 0 2px #b7a0ff}
.cut-card{box-shadow:inset 0 2px #d6ff78}
.mode-card .eyebrow{font-size:.59rem;line-height:1.7}
.mode-card h3{font-size:2rem;letter-spacing:-.045em}
.mode-card>p:last-child{font-size:.84rem;color:#c5b8d0;line-height:1.8}
.versus{font-style:italic;color:#ffab69;text-shadow:3px 4px #291535}
.sandbox-note{padding:35px 0 0}
.mode-note{font-size:.75rem;color:#b0a3bf;line-height:1.8}
.roster{background:radial-gradient(ellipse at 25% 47%,#7e32ad21,transparent 60%);padding-block:90px 100px}
.character-stage{gap:65px}
.character-art{background:radial-gradient(ellipse,#8a4eaf32,transparent 65%)}
.character-number{color:#ac79d216;font-style:italic;font-size:10rem}
.character-story h3 em{color:#d4a8ee}
.character-picker{gap:9px}
.character-picker button{background:#171023;border:1px solid #bda0d81a;padding:8px 3px 12px;border-radius:10px}
.character-picker button.is-selected{background:#4c285f55;border-color:#d6ff7890;color:var(--acid);box-shadow:0 0 23px #bc6bf512}
.originals{position:relative;padding-block:90px 105px}
.originals:before{content:'';position:absolute;inset:0 -100vw;z-index:-1;background:linear-gradient(180deg,#100a1e,#0a0713);pointer-events:none}
.viewer-layout{grid-template-columns:1.15fr .85fr;gap:65px}
.viewer-stage{min-height:590px;border-radius:190px 190px 22px 22px;background:radial-gradient(ellipse at 50% 48%,#6d2ca94d,transparent 62%),linear-gradient(140deg,#211330,#080611);border:1px solid #af71f652;box-shadow:inset 0 0 65px #17091f77,0 35px 75px #0005}
.viewer-stage:before{content:'';position:absolute;inset:12px;border:1px solid #b880e61c;border-radius:180px 180px 15px 15px;pointer-events:none}
.viewer-label{top:44px;color:#d9b4f1;letter-spacing:.12em;font-size:.58rem}
#model-poster{width:355px;margin-top:70px;filter:brightness(.82) saturate(1.12)}
#model-host{height:410px;margin-top:43px}
#model-status{font-size:.73rem;max-width:420px;color:#c8b6d8}
.viewer-tools{margin-bottom:24px}
.viewer-tools button{background:#2b1a3dbb;border-color:#bc92db40;border-radius:8px;min-height:44px}
.viewer-tools .viewer-motion-toggle[aria-pressed=true]{color:var(--acid);border-color:#d6ff7866}
.viewer-description h3{font-size:clamp(2.7rem,4vw,4rem);line-height:1}
.model-picker button{border-color:#ae8bc34d;color:#c7b7d6;background:#1c1128;font-size:.77rem}
.model-picker button.is-selected{border-color:var(--acid);color:var(--acid);background:#d6ff780c}
.viewer-description>.small-note{font-size:.75rem}
.world-section{min-height:570px;border-color:#b58ac633}
.world-section>img{opacity:.72}
.world-section:after{background:linear-gradient(90deg,#0c0715ed 6%,#0c07159c 44%,#0c071520),linear-gradient(#08071355,transparent,#08071366)}
.world-content h2 em{color:#e0b3ee}
.earned-section{padding-block:110px}
.launch-ticket{border-color:#b590dc77;border-radius:18px 50px 18px 18px;background:radial-gradient(ellipse at 50% 24%,#7c3ebf7d,transparent 55%),#20122f;transform:rotate(3deg);box-shadow:11px 15px 0 #05040a,0 0 90px #a33df41a}
.ticket-status{font-size:.59rem}
.coming-callout{padding:115px 0 90px;background:radial-gradient(ellipse at center,#873ab320,transparent 65%)}
.coming-callout h2{font-size:clamp(3rem,6vw,6rem)}
.coming-callout h2 em{color:var(--acid)}
.site-footer{padding-block:35px 40px;gap:20px}
.site-footer>small{font-size:.64rem}
.legal-page{line-height:1.8}
.legal-page .eyebrow{color:var(--acid)}
@keyframes brand-settle{from{opacity:0;transform:translateY(12px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(7deg)}}
@media(min-width:1600px){.hero{min-height:840px}.hero-logo{width:430px}.hero-art{min-height:625px}.hero-originals{left:-12%;right:-5%;bottom:0}}
@media(max-width:1100px){.section-wrap{width:calc(100% - 64px)}.site-header nav{gap:20px}.hero{min-height:720px;padding:55px 4% 75px}.hero h1{font-size:7.7vw}.hero-art{min-height:540px}.hero-logo{width:90%;margin-top:20px}.hero-originals{height:290px;left:-15%;right:-10%}.hero-model-a{width:310px;height:310px;left:-3%}.hero-model-b{width:255px;height:255px}.hand-note{right:2%;top:0}.chaos-stamp{right:-2%;bottom:35%}.hero-art .art-caption{font-size:.44rem}.viewer-layout{gap:35px}.mode-card{padding-inline:22px}.mode-card h3{font-size:1.8rem}.power-row img{width:95px;height:95px}.power-row li>span{font-size:.62rem}.power-row small{font-size:.65rem}}
@media(max-width:760px){
 .section-wrap{width:calc(100% - 40px)}
 .site-header{height:76px;padding-inline:18px;gap:10px}
 .site-header .wordmark{font-size:1.05rem}.site-header .wordmark img{width:43px;height:43px}
 .site-header>.text-button{font-size:.69rem;padding:8px 12px}
 .site-header nav{display:none}
 .hero{display:block;padding:36px 24px 55px;min-height:0}
 .cinematic-world{object-position:70% bottom;opacity:.84}
 .hero-grain{background:linear-gradient(180deg,#080713a8 0%,#080713c2 25%,#08071330 68%,#080713 100%),linear-gradient(90deg,#08071366,transparent)}
 .hero-content{max-width:510px;margin:auto}
 .hero-content .eyebrow{font-size:.56rem;letter-spacing:.1em;margin-bottom:18px}
 .hero h1{font-size:clamp(5rem,20vw,7rem);line-height:.82;margin-bottom:27px}
 .hero h1 small{font-size:1.75rem;margin-bottom:19px}
 .hero-copy{font-size:.9rem;margin-bottom:21px}
 .hero-actions .button{min-height:53px;font-size:.79rem;padding-inline:18px;gap:18px}
 .hero-actions .round-link{min-height:53px;min-width:80px;font-size:.7rem}
 .release-note{margin-top:24px}
 .release-note>span{font-size:.89rem}
 .hero-promise{font-size:.67rem;margin-top:15px}
 .hero-art{min-height:405px;max-width:480px;margin:22px auto 0;padding-top:0}
 .hero-logo{width:285px;max-width:74%;height:auto;margin:0;filter:drop-shadow(0 10px 10px #0008)}
 .hero-originals{left:-8%;right:-8%;bottom:-13px;height:220px}
 .hero-model-a{width:245px;height:245px;left:-2%;bottom:-4px}
 .hero-model-b{width:205px;height:205px;right:0;bottom:12px}
 .hand-note{font-size:.78rem;right:0;top:12px}
 .chaos-stamp{width:70px;height:80px;right:0;bottom:36%;font-size:.54rem}
 .chaos-stamp strong{font-size:1.2rem}
 .hero-art .art-caption{bottom:-30px;font-size:.44rem}
 .hero-foot{bottom:2px;left:24px;right:24px;font-size:.48rem}
 .hero-foot a{margin:auto}
 .chaos-strip{font-size:1.5rem;padding-block:17px;gap:25px;justify-content:center}
 .modes{padding-top:70px;padding-bottom:60px}
 .section-heading h2{font-size:2.75rem}
 .section-heading>p{font-size:.86rem}
 .pipe-feature{min-height:560px;border-radius:14px 50px 14px 14px}
 .pipe-copy{padding:31px 25px}
 .pipe-copy h3{font-size:6rem;margin-block:35px 30px}
 .pipe-copy p{max-width:275px;font-size:.9rem}
 .pipe-shade{background:linear-gradient(90deg,#100b1ae6,#100b1a55 85%),linear-gradient(0deg,#100b1a70,transparent 60%)}
 .tag-row span{font-size:.61rem}
 .image-disclaimer{left:16px;right:16px;font-size:.48rem;text-align:center;padding:6px 4px}
 .power-row{padding-block:28px 35px}
 .power-row img{width:95px;height:95px}
 .power-row li>span{font-size:.6rem}
 .power-row small{font-size:.65rem}
 .mode-grid{gap:20px}
 .mode-card{padding:23px 26px 29px;border-radius:12px 40px 12px 12px}
 .mode-card h3{font-size:2.35rem}
 .mode-card .eyebrow{font-size:.56rem}
 .mode-card>p:last-child{font-size:.88rem}
 .mode-note{font-size:.71rem}
 .roster{padding-block:65px 70px}
 .character-stage{gap:26px}
 .character-picker{gap:6px}
 .character-picker .pick-name{font-size:.56rem}
 .originals{padding-block:65px 75px}
 .viewer-layout{grid-template-columns:1fr;gap:32px}
 .viewer-stage{min-height:530px;border-radius:155px 155px 18px 18px;margin-top:0}
 .viewer-stage:before{border-radius:147px 147px 13px 13px;inset:8px}
 .viewer-label{font-size:.48rem;top:37px}
 #model-poster{width:290px;margin-top:65px}
 #model-host{height:340px;margin-top:48px}
 #model-status{font-size:.69rem;max-width:270px}
 .viewer-description h3{font-size:3rem}
 .viewer-tools{gap:6px;margin-inline:17px}
 .viewer-tools button{font-size:.69rem}
 .world-section{min-height:500px;padding-block:80px}
 .world-content h2{font-size:2.9rem}
 .earned-section{padding-block:70px;gap:45px}
 .earned-copy h2{font-size:2.8rem}
 .launch-ticket{transform:rotate(1.5deg);max-width:355px}
 .coming-callout{padding:75px 0}
 .coming-callout h2{font-size:2.85rem}
 .site-footer{gap:18px 25px;padding-bottom:35px}
}
@media(max-width:380px){.section-wrap{width:calc(100% - 32px)}.hero{padding-inline:20px}.hero h1{font-size:20vw}.hero h1 small{font-size:1.5rem}.hero-actions{gap:10px}.hero-actions .button{padding-inline:14px;font-size:.72rem}.hero-actions .round-link{min-width:70px}.hero-art{min-height:365px}.hero-logo{width:255px}.hero-model-a{width:215px;height:215px}.hero-model-b{width:180px;height:180px}.hero-originals{bottom:-15px}.hand-note{font-size:.68rem}.chaos-stamp{width:60px;height:70px}.section-heading h2{font-size:2.4rem}.pipe-copy{padding-inline:21px}.pipe-copy h3{font-size:5.2rem}.mode-card{padding-inline:22px}.mode-card h3{font-size:2.05rem}.power-row img{width:80px;height:80px}.power-row li>span{font-size:.54rem}.power-row small{font-size:.6rem}.character-picker .pick-name{font-size:.49rem}.viewer-description h3{font-size:2.5rem}.viewer-label{font-size:.43rem}.viewer-tools button{padding-inline:9px}.coming-callout h2{font-size:2.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}