:root {
  --black: #050505;
  --white: #f7f7f3;
  --signal: #fc5130;
  --pad: clamp(18px, 2.4vw, 40px);
  --ease: cubic-bezier(.22,.72,.18,1);
  --mx: 50%;
  --my: 50%;
  --shift-x: 0px;
  --shift-y: 0px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--black); color: var(--white); overflow-x: hidden; }
body { margin: 0; min-width: 320px; background: var(--black); color: var(--white); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 500; letter-spacing: -.018em; -webkit-font-smoothing: antialiased; }
body.legal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 10px 14px; background: var(--white); color: var(--black); transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: none; }

.site-header { position: fixed; z-index: 30; inset: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 58px; padding: 14px var(--pad); color: var(--white); mix-blend-mode: difference; pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }
.brand { display: inline-flex; align-items: baseline; gap: .36em; font-size: 19px; font-weight: 750; line-height: 1; letter-spacing: -.075em; }
.brand i { color: var(--signal); font-style: normal; font-weight: 400; }
.site-header p { justify-self: center; margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.language { display: flex; gap: 2px; }
.lang { min-width: 31px; min-height: 31px; padding: 5px; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .42; font-size: 9px; line-height: 1; letter-spacing: .08em; }
.lang:is(:hover,:focus-visible), .lang.is-active { opacity: 1; }

.hub { min-height: calc(100svh - 45px); }
.worlds { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 45px); overflow: hidden; isolation: isolate; }
.world { position: relative; flex: 1 1 50%; min-height: 50svh; overflow: hidden; transition: flex-grow .8s var(--ease), background-color .7s var(--ease); }
.world--ot { background: #111; color: var(--white); }
.world--kt { background: var(--white); color: var(--black); }
.world::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease); }
.world--ot::before { background: radial-gradient(circle at var(--mx) var(--my), #211e1a 0, #171513 34%, transparent 70%); }
.world--kt::before { background: radial-gradient(circle at var(--mx) var(--my), #fff 0, #ecebe6 38%, transparent 72%); }
.world-link { position: relative; z-index: 4; display: grid; grid-template-rows: auto 1fr auto; width: 100%; height: 100%; min-height: 50svh; padding: max(64px, calc(env(safe-area-inset-top) + 54px)) var(--pad) 23px; outline-offset: -4px; }
.world-number { align-self: start; font-size: 10px; line-height: 1; letter-spacing: .13em; }
.monogram { align-self: center; justify-self: center; position: relative; z-index: 2; font-size: clamp(8.5rem, 40vw, 18rem); font-weight: 800; line-height: .7; letter-spacing: -.115em; color: transparent; -webkit-text-stroke: clamp(1px, .13vw, 2px) currentColor; transform: translate3d(var(--shift-x), var(--shift-y), 0); transition: color .55s ease, transform .22s linear, opacity .4s ease; }
.world-meta { align-self: end; display: flex; align-items: end; justify-content: space-between; gap: 24px; font-size: 10px; line-height: 1.38; letter-spacing: .1em; }
.world-action { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.world-action i { color: var(--signal); font-size: 16px; font-style: normal; transition: transform .35s var(--ease); }
.world-link:is(:hover,:focus-visible) .world-action i { transform: translate(3px,-3px); }

.world-visual { position: absolute; z-index: 1; inset: 10% 3%; width: 94%; height: 80%; object-fit: cover; pointer-events: none; opacity: .86; transform: scale(1.02); transition: opacity .55s ease, transform 1.1s var(--ease), filter .55s ease; }
.world--ot .world-visual { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Ctext x='50' y='49' text-anchor='middle' font-family='Arial,sans-serif' font-size='61' font-weight='800' letter-spacing='-8' fill='white'%3EOT%3C/text%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Ctext x='50' y='49' text-anchor='middle' font-family='Arial,sans-serif' font-size='61' font-weight='800' letter-spacing='-8' fill='white'%3EOT%3C/text%3E%3C/svg%3E") center/contain no-repeat; }
.world--kt .world-visual { filter: grayscale(1) contrast(1.14); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Ctext x='50' y='49' text-anchor='middle' font-family='Arial,sans-serif' font-size='61' font-weight='800' letter-spacing='-8' fill='white'%3EKT%3C/text%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Ctext x='50' y='49' text-anchor='middle' font-family='Arial,sans-serif' font-size='61' font-weight='800' letter-spacing='-8' fill='white'%3EKT%3C/text%3E%3C/svg%3E") center/contain no-repeat; }
.world:has(.world-link:is(:hover,:focus-visible))::before { opacity: .72; }
.world:has(.world-link:is(:hover,:focus-visible)) .world-visual { opacity: 1; transform: scale(1.042); }
.grain { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }

.axis { position: absolute; z-index: 8; left: var(--pad); right: var(--pad); top: 50%; display: grid; grid-template-columns:auto 1fr auto; align-items: center; gap: 12px; color: var(--signal); transform: translateY(-50%); pointer-events: none; transition: left .8s var(--ease), top .8s var(--ease); }
.axis span { padding: 0 4px; background: var(--black); font-size: 9px; line-height: 1; letter-spacing: .15em; }
.axis span:first-child { background: #111; }
.axis span:last-child { background: var(--white); }
.axis i { display: block; height: 1px; background: var(--signal); transform-origin: center; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 45px; padding: 0 var(--pad); border-top: 1px solid #262626; background: var(--black); color: #bdbdbd; font-size: 9px; line-height: 1; letter-spacing: .12em; }
.site-footer span:nth-child(2) { justify-self: center; }
.site-footer button { justify-self: end; padding: 10px 0; border: 0; background: transparent; color: inherit; cursor: pointer; letter-spacing: inherit; }
.site-footer button:hover { color: var(--white); }

.cursor { display: none; position: fixed; z-index: 90; top: 0; left: 0; width: 58px; height: 58px; border-radius: 50%; background: var(--white); color: var(--black); place-items: center; pointer-events: none; transform: translate3d(-100px,-100px,0); mix-blend-mode: difference; will-change: transform; }
.cursor span { font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.has-fine-pointer .world-link { cursor: none; }
.has-fine-pointer .cursor { display: grid; }


.legal { width: min(900px, calc(100% - 28px)); max-height: calc(100svh - 28px); padding: 0; border: 0; background: var(--white); color: var(--black); }
.legal::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(10px); }
.legal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--pad); border-bottom: 1px solid #cfcfca; font-size: 10px; letter-spacing: .12em; }
.legal-head button { min-width: 70px; min-height: 40px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 10px; letter-spacing: .12em; }
.legal-head .legal-close { display: grid; place-items: center; min-width: 44px; width: 44px; min-height: 44px; height: 44px; margin: -8px -10px -8px 0; border-radius: 50%; color: var(--signal); transition: background-color .42s ease; }
.legal-close-icon { position: relative; display: block; width: 20px; height: 20px; transition: transform .58s var(--ease); }
.legal-close-icon i { position: absolute; top: 50%; left: 50%; display: block; width: 21px; height: 1.5px; border-radius: 2px; background: currentColor; transform-origin: center; }
.legal-close-icon i:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.legal-close-icon i:last-child { transform: translate(-50%,-50%) rotate(-45deg); }
.legal-close:is(:hover,:focus-visible) { background: rgba(252,81,48,.1); }
.legal-close:is(:hover,:focus-visible) .legal-close-icon { transform: rotate(90deg); }
.legal-close:focus-visible { outline: 1px solid var(--signal); outline-offset: 2px; }
.legal-close:active .legal-close-icon { transform: rotate(90deg) scale(.92); }
.legal-grid { display: grid; gap: 45px; padding: clamp(32px,6vw,80px) var(--pad); }
.legal h2 { margin: 0; font-size: clamp(64px,14vw,160px); line-height: .75; letter-spacing: -.09em; }
.legal p { max-width: 470px; margin: 0 0 22px; font-size: 16px; line-height: 1.45; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.noscript { position: fixed; z-index: 120; inset: auto 10px 10px; margin: 0; padding: 10px; background: var(--signal); color: #000; font-size: 13px; }

@media (min-width: 781px) {
  .hub { min-height: calc(100svh - 38px); }
  .worlds { flex-direction: row; min-height: calc(100svh - 38px); }
  .world { min-height: calc(100svh - 38px); flex-grow: 1; }
  .worlds:has(.world--ot .world-link:is(:hover,:focus-visible)) .world--ot { flex-grow: 1.12; }
  .worlds:has(.world--ot .world-link:is(:hover,:focus-visible)) .world--kt { flex-grow: .88; }
  .worlds:has(.world--kt .world-link:is(:hover,:focus-visible)) .world--kt { flex-grow: 1.12; }
  .worlds:has(.world--kt .world-link:is(:hover,:focus-visible)) .world--ot { flex-grow: .88; }
  .world-link { min-height: calc(100svh - 38px); padding-top: max(76px, calc(env(safe-area-inset-top) + 64px)); padding-bottom: 28px; }
  .world--ot .world-link { padding-right: clamp(40px,5vw,84px); }
  .world--kt .world-link { padding-left: clamp(40px,5vw,84px); }
  .monogram { font-size: clamp(12rem,24vw,28rem); }
  .world-visual { inset: 7% 5%; width: 90%; height: 86%; }
  .axis { top: var(--pad); bottom: var(--pad); left: 50%; right: auto; width: 1px; display: flex; flex-direction: column; gap: 13px; transform: translateX(-50%); }
  .worlds:has(.world--ot .world-link:is(:hover,:focus-visible)) .axis { left: 56%; }
  .worlds:has(.world--kt .world-link:is(:hover,:focus-visible)) .axis { left: 44%; }
  .axis span { writing-mode: vertical-rl; padding: 5px 0; background: var(--black); }
  .axis span:last-child { background: var(--white); }
  .axis i { width: 1px; height: 100%; min-height: 40px; }
  .site-footer { min-height: 38px; }
  .legal-grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

@media (max-width: 520px) {
  .site-header { grid-template-columns: auto 1fr; }
  .site-header p { display: none; }
  .language { justify-self: end; }
  .world-meta { font-size: 9px; }
  .world-action { max-width: 112px; white-space: normal; justify-content: flex-end; text-align: right; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cursor { display: none !important; }
  .has-fine-pointer .world-link { cursor: pointer; }
  .monogram { transform: none; }
  .legal-close:is(:hover,:focus-visible) .legal-close-icon,
  .legal-close:active .legal-close-icon { transform: none; }
}

@media (forced-colors: active) {
  .world--ot, .world--kt { forced-color-adjust: none; }
  .monogram { color: transparent; }
}