@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";
@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css";
:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#000;--fg:#fff;--muted:#ffffff8c;--faint:#ffffff52;--hair:#ffffff1a;--hair-strong:#fff3;--pad:clamp(20px, 5vw, 90px);--mx:50vw;--my:40vh;--ease:cubic-bezier(.16, 1, .3, 1);--font-sans:"Space Grotesk", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"Space Grotesk", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;overflow:hidden}img{max-width:100%;display:block}::selection{color:#000;background:#fff}button{cursor:pointer;color:inherit;background:0 0;border:none;padding:0;font-family:inherit}.bg-grid,.bg-glow,.bg-spotlight,.bg-grain{pointer-events:none;z-index:0;position:fixed;inset:0}.bg-grid{background-image:linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);opacity:.45;background-size:64px 64px;-webkit-mask-image:radial-gradient(95% 75% at 50% 40%,#000 0%,#0000 80%);mask-image:radial-gradient(95% 75% at 50% 40%,#000 0%,#0000 80%)}.bg-glow{background:radial-gradient(55% 45% at 50% 0,#ffffff12,#0000 70%)}.bg-spotlight{background:radial-gradient(440px circle at var(--mx) var(--my), #ffffff0e, transparent 65%);transition:background .12s linear}.bg-grain{z-index:60;opacity:.05;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.topbar{z-index:50;padding:20px var(--pad);justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.brand{letter-spacing:.02em;align-items:center;gap:10px;font-size:.92rem;font-weight:600;display:flex}.brand img{object-fit:contain;width:26px;height:26px}.nav{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;gap:28px;font-size:.72rem;display:flex}.nav button,.nav a{color:var(--muted);text-decoration:none;transition:color .2s}.nav button:hover,.nav a:hover{color:var(--fg)}.nav-contact{padding-left:28px;position:relative}.nav-contact:before{content:"";background:var(--hair-strong);width:1px;height:12px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.lang{font-family:var(--font-mono);letter-spacing:.14em;align-items:center;gap:8px;font-size:.72rem;display:flex}.lang span{color:var(--faint)}.lang button{color:var(--faint);transition:color .2s}.lang button.active,.lang button:hover{color:var(--fg)}.stage.is-booting .ring,.stage.is-booting .caption,.stage.is-booting .topbar,.stage.is-booting .foot{visibility:hidden}.stage.is-booting .bg-stars,.stage.is-booting .bg-ambient{opacity:0}.bg-stars,.bg-ambient{transition:opacity .8s}.core-noise{opacity:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0;-webkit-mask:url(/offthereal-logo.png) 50%/contain no-repeat;mask:url(/offthereal-logo.png) 50%/contain no-repeat}.stage.is-booting .core-noise{animation:.95s step-end both boot-noise}.stage.is-booting .core img{animation:.95s step-end both boot-logo}@keyframes boot-noise{0%{opacity:.95;background-position:0 0}10%{background-position:-40px 20px}20%{opacity:.85;background-position:30px -50px}35%{opacity:.7;background-position:-70px 10px}50%{opacity:.5;background-position:20px 60px}65%{opacity:.32;background-position:-10px -30px}80%{opacity:.15;background-position:50px 0}to{opacity:0}}@keyframes boot-logo{0%{opacity:.45;filter:drop-shadow(6px 0 #ff2d55)drop-shadow(-6px 0 #00e5ff);transform:translate(-6px)}12%{opacity:.8;transform:translate(5px)}24%{opacity:.35;transform:translate(-3px)}40%{opacity:1;filter:drop-shadow(3px 0 #ff2d55)drop-shadow(-3px 0 #00e5ff);transform:translate(2px)}55%{transform:translate(-1px)}70%{filter:drop-shadow(1px 0 #ff2d55)drop-shadow(-1px 0 #00e5ff);transform:none}to{opacity:1;filter:none;transform:none}}.bg-ambient{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bg-ambient img{object-fit:cover;filter:blur(12px)saturate(1.5)brightness(.4);opacity:0;width:20%;max-width:none;height:20%;transition:opacity 1.2s;position:absolute;top:40%;left:40%;transform:scale(6.5)}.bg-ambient img.is-on{opacity:.85}.bg-ambient:after{content:"";background:radial-gradient(70% 60% at 50% 42%,#0000,#000 85%);position:absolute;inset:0}.card-pop{aspect-ratio:16/9;backface-visibility:hidden;width:160%;animation:pop-out .7s var(--ease) .6s both;pointer-events:none;position:absolute;top:36%;left:-30%;transform:translateY(-50%)translateZ(90px)}.card-loading{font:600 10px/1 var(--font-mono);letter-spacing:.3em;color:#ffffffd9;background:#00000073;border-radius:10px;place-content:center;justify-items:center;gap:10px;animation:1.2s ease-in-out infinite card-blink;display:grid;position:absolute;inset:0}.card-loading:before{content:"";border:2px solid #fff3;border-top-color:#fff;border-radius:50%;width:34px;height:34px;animation:.8s linear infinite card-spin}@keyframes card-blink{50%{color:#fff6}}@keyframes card-spin{to{transform:rotate(360deg)}}.card-mute{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;cursor:pointer;background:#0000008c;border:1px solid #ffffff4d;border-radius:50%;place-items:center;width:34px;height:34px;transition:background .2s;display:grid;position:absolute;bottom:10px;right:10px}.card-mute:hover,.card-mute:focus-visible{background:#000c;outline:none}.card-mute svg{fill:none;stroke:#fff;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.card-mute svg path:first-child{fill:#fff}.card-pop-title{font-size:calc(var(--w) * .1);text-shadow:0 10px 24px #000000e6,0 0 2px #000c;backface-visibility:hidden;pointer-events:none;animation:title-out .7s var(--ease) .7s both;flex-direction:column;gap:4px;font-weight:700;line-height:1.1;display:flex;position:absolute;bottom:7%;left:8%;right:8%;transform:translateZ(55px)}.card-pop-title small{letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-size:.5em;font-weight:500}.card-pop-title.is-closing{animation:title-in .45s var(--ease) both}@keyframes title-out{0%{opacity:0;transform:translateZ(0)}}@keyframes title-in{to{opacity:0;transform:translateZ(0)}}.card .card-title{transition:opacity .3s}.card.is-up .card-title{opacity:0}.card-pop.is-closing{animation:pop-in .45s var(--ease) both}@keyframes pop-in{to{opacity:0;transform:translateY(-50%)translateZ(0)scale(.7)}}@keyframes pop-out{0%{opacity:0;transform:translateY(-50%)translateZ(0)scale(.7)}}.card-video{object-fit:cover;outline-offset:-1px;filter:url(#backlight);background:#000;border-radius:10px;outline:1px solid #ffffff40;width:100%;height:100%;display:block}.fx-defs{width:0;height:0;position:absolute}.stage.is-glitching .scene,.stage.is-glitching .caption{animation:.45s step-end both fx-glitch}@keyframes fx-glitch{0%{clip-path:inset(8% 0 62%);filter:drop-shadow(6px 0 #ff2d55)drop-shadow(-6px 0 #00e5ff);transform:translate(-18px)}12%{clip-path:inset(48% 0 22%);transform:translate(14px)}24%{clip-path:inset(0 0 78%);filter:drop-shadow(-5px 0 #ff2d55)drop-shadow(5px 0 #00e5ff);transform:translate(-8px)}36%{clip-path:inset(70% 0 4%);transform:translate(22px)}48%{clip-path:inset(30% 0 40%);filter:drop-shadow(3px 0 #ff2d55)drop-shadow(-3px 0 #00e5ff);transform:translate(-12px)}60%{clip-path:inset(0);transform:translate(6px)}74%{filter:drop-shadow(2px 0 #ff2d55)drop-shadow(-2px 0 #00e5ff);transform:translate(-3px)}to{clip-path:none;filter:none;transform:none}}.fx-glitch{z-index:55;pointer-events:none;opacity:0;mix-blend-mode:difference;background:linear-gradient(#0000 0 18%,#fff 18% 19.5%,#0000 19.5% 47%,#fff 47% 51%,#0000 51% 73%,#fff 73% 73.6%,#0000 73.6%),repeating-linear-gradient(0deg,#ffffff14 0 1px,#0000 1px 3px);position:fixed;inset:0}.stage.is-glitching .fx-glitch{animation:.45s step-end both fx-bars}@keyframes fx-bars{0%{opacity:1;background-position:0 0,0 0;transform:translate(0)}20%{background-position:0 -120px,0 2px;transform:translate(-12px)}40%{background-position:0 260px,0 0;transform:translate(10px)}60%{opacity:.6;background-position:0 -40px,0 1px;transform:none}80%{opacity:.25}to{opacity:0}}.stage{isolation:isolate;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.scene{z-index:1;perspective:2200px;touch-action:none;cursor:grab;place-items:center;display:grid;position:absolute;inset:0}.scene:active{cursor:grabbing}.scene-3d,.ring{width:0;height:0;transform-style:preserve-3d;position:relative}.scene-3d{translate:0 -11vh}.ring{position:absolute}.core{filter:drop-shadow(0 0 60px #ffffff2e);pointer-events:none;width:min(360px,46vw,40vh);margin:0;position:absolute;transform:translate(-50%,calc(-50% - min(70px,8vh)))}.card{--w:calc(var(--r,400px) * var(--cardk,.36));--rx:0deg;--ry:0deg;width:var(--w);aspect-ratio:2/3;left:calc(var(--w) / -2);top:calc(var(--w) * -.75);transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--r,400px));transform-style:preserve-3d;font:inherit;color:var(--fg);text-align:left;position:absolute}.card:focus-visible{outline:none}.card-tilt{transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease);position:absolute;inset:0}.card.is-lift .card-tilt{transform:translateY(-20%) translateZ(50px) rotateX(calc(var(--tilt,-20deg) * -1)) rotateX(var(--rx)) rotateY(var(--ry));transition-duration:.7s}.card.is-up{--rx:7deg;--ry:-14deg;--px:.3;--py:-.25;--gx:78%;--gy:15%}.card.is-up .card-tilt{transform:translateY(-24%) translateZ(60px) rotateX(calc(var(--tilt,-20deg) * -1)) rotateX(var(--rx)) rotateY(var(--ry));transition-duration:.7s}.card-tilt:hover{transition-duration:.12s}.card-face,.card-back{backface-visibility:hidden;border:1px solid var(--hair-strong);background:#0c0c0c;border-radius:14px;transition:border-color .4s,box-shadow .4s;position:absolute;inset:0;overflow:hidden;box-shadow:0 30px 60px -20px #000000e6}.card-art{object-fit:cover;pointer-events:none;width:100%;height:100%;scale:1.08;translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -16px);transition:translate .5s var(--ease)}.card-blank{height:100%;font-size:calc(var(--w) * .34);color:#ffffff0f;background:radial-gradient(circle at 30% 20%,#222,#050505 70%);place-items:center;font-weight:700;display:grid;position:relative;overflow:hidden}.card-tape{padding:calc(var(--w) * .045) 0;transition:transform .5s var(--ease), box-shadow .5s var(--ease);backface-visibility:hidden;pointer-events:none;background:repeating-linear-gradient(-45deg, #111 0 8px, #f5c400 8px 16px) top / 100% calc(var(--w) * .025) no-repeat, repeating-linear-gradient(-45deg, #111 0 8px, #f5c400 8px 16px) bottom / 100% calc(var(--w) * .025) no-repeat, #f5c400;color:#111;font-size:calc(var(--w) * .06);letter-spacing:.12em;text-transform:uppercase;white-space:pre;justify-content:center;font-weight:700;line-height:1;display:flex;position:absolute;top:34%;left:-8%;right:-8%;overflow:hidden;transform:translateZ(1px)rotate(-9deg)scaleX(.8);box-shadow:0 2px 6px #00000080}.tape-run,.card.is-up .tape-still{display:none}.card.is-up .tape-run{animation:16s linear infinite tape-run;display:block}@keyframes tape-run{to{transform:translate(-50%)}}.card-tilt:hover .card-tape,.card.is-lift .card-tape,.card.is-up .card-tape{transform:translateZ(40px)rotate(-9deg);box-shadow:0 14px 28px #000000b3}.card-glare{background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), #ffffff38, transparent 55%), linear-gradient(to top, #000000d9, transparent 60%);mix-blend-mode:normal;opacity:.9;position:absolute;inset:0}.card-no,.card-title{pointer-events:none;text-shadow:0 4px 14px #000c;translate:calc(var(--px,0) * 14px) calc(var(--py,0) * 14px);transition:translate .5s var(--ease);position:absolute}.card-no{font-size:calc(var(--w) * .09);letter-spacing:.2em;font-weight:600;top:10px;left:14px}.card-title{font-size:calc(var(--w) * .085);flex-direction:column;gap:4px;font-weight:600;line-height:1.15;display:flex;bottom:12px;left:14px;right:14px}.card-title small{letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-size:.62em;font-weight:500}.card-back{place-items:center;display:grid;transform:rotateY(180deg)}.card-back-art{object-fit:cover;filter:blur(10px)brightness(.4)saturate(1.4);width:calc(100% + 24px);height:calc(100% + 24px);position:absolute;inset:-12px}.card-back:after{content:"";mix-blend-mode:color-dodge;animation:holo-drift 6s ease-in-out calc(var(--i) * -.7s) infinite alternate;background:linear-gradient(115deg,#0000 20%,#ff009638 34%,#00ffe638 46%,#ffe6002e 58%,#7850ff33 70%,#0000 82%) 0 0/300% 300%,radial-gradient(at 50% 45%,#0000 30%,#0009);position:absolute;inset:0}@keyframes holo-drift{0%{background-position:0 0,0 0}to{background-position:100% 100%,0 0}}.card-back-frame{z-index:1;border:1px solid #ffffff38;border-radius:8px;position:absolute;inset:7%}.card-back-logo{z-index:1;filter:drop-shadow(0 0 18px #ffffff40);width:52%;position:relative}.card-back-no,.card-back-label{z-index:1;text-align:center;font-size:calc(var(--w) * .055);letter-spacing:.3em;color:#fff9;padding-left:.3em;position:absolute;left:0;right:0}.card-back-no{top:11%}.card-back-label{font-size:calc(var(--w) * .045);text-transform:uppercase;bottom:11%}.card.is-main .card-face{border-color:#ffffff8c;box-shadow:0 0 0 1px #ffffff26,0 30px 80px -10px #ffffff1f}.card:focus-visible .card-face{border-color:#fff}.caption{z-index:2;text-align:center;pointer-events:none;width:min(640px,100% - 32px);position:absolute;bottom:clamp(48px,7vh,80px);left:50%;translate:-50%}.caption-meta{letter-spacing:.24em;text-transform:uppercase;color:var(--muted);justify-content:center;align-items:center;gap:18px;margin:0;font-size:.68rem;display:flex}.caption h2{letter-spacing:-.01em;margin:10px 0 14px;font-size:clamp(1.2rem,2.6vw,1.8rem);font-weight:600}.caption-release{letter-spacing:.12em;color:var(--fg);align-items:center;gap:7px;font-weight:500;display:inline-flex}.caption-release i{background:var(--fg);border-radius:50%;width:6px;height:6px;position:relative}.caption-release i:after{content:"";background:var(--fg);border-radius:50%;animation:1.8s ease-out infinite release-pulse;position:absolute;inset:0}@keyframes release-pulse{to{opacity:0;transform:scale(3)}}.caption h2 a{pointer-events:auto;color:inherit;text-underline-offset:6px;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:text-decoration-color .2s}.caption h2 a:hover{text-decoration-color:currentColor}.caption-links{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;min-height:34px;display:flex}.caption-links a{pointer-events:auto;border:1px solid var(--hair-strong);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);white-space:nowrap;border-radius:999px;padding:8px 16px;font-size:.72rem;text-decoration:none;transition:background .2s,color .2s,border-color .2s}.caption-links a:hover{background:var(--fg);color:var(--bg)}.caption-links a.is-primary{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:600}.caption-links a.is-primary:hover{color:var(--fg);background:0 0}.caption-links a.is-ghost{color:#ffffffb3;background:0 0;border-color:#0000}.caption-links a.is-ghost:hover,.caption-links a.is-ghost:focus-visible{border-color:var(--hair);color:var(--fg);background:#ffffff0f}.caption-links a:focus-visible{outline:2px solid var(--fg);outline-offset:3px}.foot{z-index:2;left:var(--pad);right:var(--pad);letter-spacing:.14em;color:var(--faint);pointer-events:none;justify-content:space-between;gap:16px;font-size:.66rem;display:flex;position:absolute;bottom:20px}@media (max-width:720px){.brand span{display:none}.stage{--cardk:.5}.scene-3d{translate:0 -1vh}.caption{bottom:calc(60px + env(safe-area-inset-bottom))}.caption-meta{letter-spacing:.12em;white-space:nowrap;gap:10px;font-size:.58rem}.caption-release{letter-spacing:.06em}.caption-links{gap:6px}.caption-links a{letter-spacing:.06em;white-space:nowrap;padding:7px 10px;font-size:.6rem}.foot{padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);letter-spacing:.04em;text-align:center;white-space:nowrap;flex-direction:column;align-items:center;gap:2px;font-size:.54rem;line-height:1.4;bottom:0;left:0;right:0}.nav{gap:16px}}.bg-stars{z-index:0;pointer-events:none;animation:420s linear infinite stars-turn;position:fixed;top:45%;left:50%}.bg-stars i{width:1px;height:1px;animation:stars-twinkle calc(3s + var(--i) * 2s) ease-in-out calc(var(--i) * -1.3s) infinite alternate;border-radius:50%;position:absolute}@keyframes stars-turn{to{rotate:360deg}}@keyframes stars-twinkle{0%{opacity:.35}to{opacity:1}}.card-face:after{content:"";z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,#0000004d 0 1px,#0000 1px 3px);transition:opacity .4s;position:absolute;inset:0}.card.is-up .card-face:after{opacity:0;transition-delay:.6s}.card.is-up .card-face{animation:.5s step-end .15s both card-glitch}@keyframes card-glitch{0%{clip-path:inset(10% 0 55%);filter:drop-shadow(5px 0 #ff2d55)drop-shadow(-5px 0 #00e5ff);translate:-8px}15%{clip-path:inset(45% 0 20%);translate:7px}30%{clip-path:inset(0 0 70%);filter:drop-shadow(-4px 0 #ff2d55)drop-shadow(4px 0 #00e5ff);translate:-4px}45%{clip-path:inset(65% 0 5%);translate:5px}60%{clip-path:none;filter:drop-shadow(2px 0 #ff2d55)drop-shadow(-2px 0 #00e5ff);translate:-2px}80%,to{clip-path:none;filter:none;translate:none}}@media (prefers-reduced-motion:reduce){.card.is-up .tape-run,.caption-release i:after,.card.is-up .card-face,.bg-stars,.bg-stars i{animation:none}}.burst{z-index:3;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}@media (max-width:720px),(pointer:coarse){.bg-grain{display:none}.card-video{filter:none}.card-mute{-webkit-backdrop-filter:none;backdrop-filter:none;background:#000000b3}.bg-stars,.bg-stars i{animation:none}.card-back:after{mix-blend-mode:normal;opacity:.6;animation:none}.card-back-art{filter:blur(6px)brightness(.4)saturate(1.4)}}