/* os section: the Open Theory Operating System. Layout, type scale and motion follow ACTBE's OS scene
   (keyboard of 60/130 columns, key height 10.55vh capped at 5.93vw, layer select, pinned modal). */
:root.is-scroll-lock { overflow: hidden; }

.cr-os { position: relative; transition: color .4s var(--ease-out-cubic); }
.cr-os.is-black { color: var(--color-text-inverse); }
.cr-os__inner { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: calc(var(--header-height-constant) + 4.86svh) var(--padding-wrapper) 0; }

/* Typed label: small mono line with a blinking slash cursor (ACTBE: cCommonHeadline) */
.cr-os__headline { display: flex; align-items: center; justify-content: flex-start; }
.cr-os__headline-inner { position: relative; display: flex; align-items: center; justify-content: flex-start; padding-left: 2rem; }
.cr-os__headline-inner::before { position: absolute; left: .25rem; content: "/"; background: none; width: auto; height: auto; border-radius: 0; color: currentColor; font: inherit; }
.cr-os__headline-text { margin: 0; font: var(--t-label-14-mono); font-size: 1rem; line-height: 1; letter-spacing: 0; color: inherit; }
.cr-os__headline-text .-main-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.cr-os__headline-text .-char { display: block; flex-shrink: 0; opacity: var(--init-opacity); }
.cr-os__slash { position: absolute; top: 50%; left: 2rem; width: 1px; height: 1rem; margin-top: -.5rem; pointer-events: none; background-color: currentcolor; opacity: 0; }

.cr-os__intro { display: flex; flex-direction: column; gap: 2.5rem; margin-top: min(2.5rem, 5.41svh); }
.cr-os__intro-headline, .cr-os__intro-paragraph { will-change: opacity, transform; opacity: var(--init-opacity); }
.cr-os__intro-headline h3 { margin: 0; font: var(--t-heading-24); font-size: 1.5rem; line-height: 1.4; letter-spacing: 0; color: inherit; }
.cr-os__intro-paragraph { margin: 0; font: var(--t-copy-16); line-height: 2; color: inherit; }

.cr-os__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding-top: 13.15svh; padding-bottom: 16.15svh; }
.cr-os__select-title { width: 100%; margin-bottom: 1rem; font: var(--t-label-14-mono); font-size: min(1rem, 2.16svh); line-height: 1; text-align: center; color: inherit; }

/* "?" opens the overview card (ACTBE: the small question mark above the keyboard) */
.cr-os__question { position: absolute; top: -1rem; right: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 2.625rem; padding: 0; font: var(--t-label-18); font-family: var(--f-roboto-mono); color: inherit; cursor: pointer; background: none; border: 0; transform-origin: bottom center; }

/* Layer select */
.cr-os__tab { display: grid; gap: .5rem; width: 100%; padding: .25rem; margin-top: 0; color: var(--color-text-inverse); background-color: var(--gray-8); border-radius: .25rem; }
.cr-os__tab-list { position: relative; }
.cr-os__tab-current { position: absolute; top: 0; left: 0; width: 100%; height: 2.375rem; background-color: var(--gray-9); border-radius: .1875rem; }
.cr-os__tab-item { position: relative; display: flex; align-items: center; justify-content: flex-start; padding: .75rem 1rem; border-radius: .25rem; }
.cr-os__tab-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; }
.cr-os__tab-input:focus-visible + .cr-os__tab-label { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.cr-os__tab-label { position: relative; top: .1em; color: inherit; z-index: 1; font: var(--t-label-14-mono); font-size: min(.875rem, 1.89svh); line-height: 1; pointer-events: none; }

/* Keyboard: 60 columns on phones, 130 on desktop. Unlit keys are quiet; lit keys get the text colour. */
.cr-os__keyboard { display: grid; grid-template-columns: repeat(60, 1fr); grid-auto-rows: auto; row-gap: .75rem; column-gap: .25rem; width: 100%; margin-top: 1.5rem; opacity: var(--init-opacity); }
.cr-os__key { position: relative; display: block; padding: min(.6875rem, 1.49svh) 0; font: inherit; color: var(--border-inverse); pointer-events: none; cursor: default; background: none; border: 1px solid currentcolor; border-radius: .25rem; transition: color .4s var(--ease-expo), background-color .4s var(--ease-expo), transform .3s var(--ease-expo); }
.cr-os__key-inner { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.cr-os__key-text { font-family: var(--f-roboto-mono); font-size: min(1.5rem, 3.24svh); line-height: 1; white-space: pre; }
.cr-os__key.is-label .cr-os__key-text { font-size: min(.875rem, 2.16svh); }
.cr-os__key.-letter { grid-column: span 6; }
.cr-os__key[data-key="a"] { grid-column: 4 / span 6; }
.cr-os__key[data-key="shift"] { grid-column: 1 / 9; }
.cr-os__key[data-key="z"] { grid-column: 10 / span 6; }
.cr-os__key[data-key="backspace"] { grid-column: 53 / span 8; }
.cr-os__key[data-key="123"] { grid-column: 1 / 9; }
.cr-os__key[data-key="emoji"] { grid-column: span 8; }
.cr-os__key[data-key="space-sp"] { grid-column: span 28; }
.cr-os__key[data-key="search"] { grid-column: span 16; }
.cr-os__key.is-lit { color: var(--color-text-inverse); }
.cr-os__key.is-link { pointer-events: auto; cursor: pointer; }
.cr-os__key.is-link::after { position: absolute; top: .3rem; right: .3rem; width: .3125rem; height: .3125rem; content: ""; background: var(--color-accent); border-radius: 50%; }
.cr-os__key:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.cr-os__key.-pc, .cr-os__cursor { display: none; }
@media (any-hover: hover) {
  .cr-os__question { transition: transform .4s var(--ease-out-cubic); }
  .cr-os__question:hover { transform: rotate(15deg); }
  .cr-os__tab-input { border-radius: .25rem; transition: background-color .4s var(--ease-out-expo); }
  .cr-os__tab-input:hover { background-color: var(--border-inverse); }
  .cr-os__tab-input:checked { display: none; }
  .cr-os__key.is-link:hover { background-color: color-mix(in srgb, var(--color-text-inverse) 20%, transparent); }
  .cr-os__key.is-link:active { background-color: color-mix(in srgb, var(--color-text-inverse) 30%, transparent); transform: scale(.97); }
}

@keyframes cr-os-blink { 50% { opacity: 0; } }
.cr-os__slash.is-typing { animation: cr-os-blink .7s steps(1) infinite; }
.cr-os-modal__type .-main-text { display: flex; flex-wrap: wrap; align-items: center; }
.cr-os-modal__type .-char { display: block; flex-shrink: 0; }

/* Modal */
.cr-os-modal { position: fixed; inset: 0; z-index: 105; overflow: hidden; pointer-events: none; }
.cr-os-modal[hidden] { display: none; }
.cr-os-modal__inner { position: absolute; inset: 0; outline: none; }
.cr-os-modal__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-os-modal__overlay { position: absolute; inset: 0; z-index: 1; background-color: color-mix(in srgb, var(--color-text) 10%, transparent); opacity: 0; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.cr-os-modal__list { position: absolute; inset: 0; z-index: 2; width: 100%; }
.cr-os-modal__item { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.cr-os-modal__item.is-open .cr-os-modal__card-inner { pointer-events: auto; }
.cr-os-modal__slider { display: flex; align-items: flex-start; justify-content: flex-start; height: 100%; }
.cr-os-modal__card { flex-shrink: 0; width: 100%; height: 100vh; height: 100dvh; padding: 2rem 1rem; }
.cr-os-modal__card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: min(1.5rem, 3.24vh) 1.5rem min(5rem, 10.81vh); color: var(--color-text); }
.cr-os-modal__card-bg { position: absolute; inset: 0; z-index: -1; background-color: var(--c-white); border-radius: .5rem; }
.cr-os-modal__type { display: flex; flex-wrap: wrap; font: var(--t-label-12-mono); font-size: min(.75rem, 1.62vh); line-height: 1.1; letter-spacing: 0; color: var(--color-text-secondary); text-transform: uppercase; }
.cr-os-modal__headline { margin: .5rem 0 0; }
.cr-os-modal__sub { margin: 0; font: var(--t-label-18); font-size: min(1.5rem, 3.24vh); line-height: 1.1; }
.cr-os-modal__main { margin: min(2.5rem, 5.41vh) 0 0; font: var(--t-heading-40); font-size: min(2.5rem, 5.41vh); line-height: 1.1; letter-spacing: -.02em; color: inherit; }
.cr-os-modal__paragraph { height: 100%; margin-top: min(1rem, 2.16vh); overflow-y: auto; }
.cr-os-modal__text { margin: 0; font: var(--t-copy-16); font-size: min(1rem, 2.16vh); line-height: 1.5; color: var(--color-text-body); }
.cr-os-modal__nav { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; width: 100%; pointer-events: none; opacity: 0; }
.cr-os-modal__nav-list { display: flex; gap: .25rem; align-items: flex-end; justify-content: center; width: 100%; padding: min(1.5rem, 3.24vh) 1.5rem; }
.cr-os-modal__nav-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 2rem; padding: 0; color: var(--color-text-inverse); pointer-events: none; cursor: pointer; background-color: var(--surface-inverse); border: 0; border-radius: .25rem; transition: background-color .4s var(--ease-expo); }
.cr-os-modal__nav.is-open .cr-os-modal__nav-button { pointer-events: auto; }
.cr-os-modal__nav-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; }
.cr-os-modal__nav-button[data-type="prev"] .cr-os-modal__nav-icon { transform: rotate(180deg); }
.cr-os-modal__nav-line { position: absolute; width: 70%; height: 1px; background-color: currentcolor; }
.cr-os-modal__nav-line:first-child { transform: rotate(-45deg); }
.cr-os-modal__nav-line:last-child { transform: rotate(45deg); }
@media (any-hover: hover) { .cr-os-modal__nav-button:hover { background-color: var(--color-accent); } }

@media screen and (min-width: 768px) {
  .cr-os-modal__card { display: flex; align-items: center; height: 100vh; padding: min(2.5rem, 5.21vh); }
  .cr-os-modal__card-inner { width: min(65rem, 64.42vw); height: auto; padding: min(2.5rem, 5.21vh) min(2.5rem, 5.21vh) min(7rem, 14.58vh); margin: 0 auto; }
  .cr-os-modal__type { font-size: min(.75rem, 1.56vh); }
  .cr-os-modal__sub { font-size: min(1.5rem, 3.13vh); }
  .cr-os-modal__main { margin-top: min(2.5rem, 5.21vh); font-size: min(2.5rem, 5.21vh); }
  .cr-os-modal__paragraph { width: 100%; margin-top: min(1rem, 2.08vh); overflow: visible; }
  .cr-os-modal__text { font-size: min(1rem, 2.08vh); }
  .cr-os-modal__nav-list { gap: .25rem; width: min(65rem, 64.42vw); height: min(44.3rem, 78.13vh); padding: min(2.5rem, 5.21vh); margin: 0; }
  .cr-os-modal__nav-button { width: 5.5rem; }
}

@media screen and (min-width: 960px) {
  .cr-os__inner { min-height: 100vh; padding: calc(var(--header-height-constant) + 4.69vh) var(--padding-wrapper) 4.69vh; }
  .cr-os__headline-text, .cr-os__select-title { font-size: min(1.17vw, 1rem * var(--r-max-scale)); }
  .cr-os__intro { flex-direction: row; justify-content: space-between; width: 100%; margin-bottom: min(5rem, 10.42svh); }
  .cr-os__intro-headline { max-width: 46%; }
  .cr-os__intro-headline h3 { font-size: min(1.76vw, 1.5rem * var(--r-max-scale)); }
  .cr-os__intro-body { max-width: 40vw; }
  .cr-os__intro-paragraph { font-size: min(1.17vw, 1rem * var(--r-max-scale)); }
  .cr-os__body { padding-top: 13.15svh; padding-bottom: 16.15svh; }
  .cr-os__question { top: max(-7.03vw, -6rem * var(--r-max-scale)); width: min(2.27vw, 1.94rem * var(--r-max-scale)); height: min(3.95vw, 3.375rem * var(--r-max-scale)); font-size: min(1.76vw, 1.5rem * var(--r-max-scale)); }
  .cr-os__tab { gap: 0; width: auto; margin: 0 auto; }
  .cr-os__tab-list { display: flex; }
  .cr-os__tab-current { height: 2rem; }
  .cr-os__tab-item { padding: .5625rem 1rem; }
  .cr-os__tab-label { font-size: min(1.17vw, 1rem * var(--r-max-scale)); }
  .cr-os__keyboard { grid-template-columns: repeat(130, 1fr); row-gap: min(.59vw, .5rem * var(--r-max-scale)); column-gap: min(.59vw, .5rem * var(--r-max-scale)); }
  .cr-os__key { padding: 1.56vh 2px 1.56vh 1.56vh; border-radius: var(--radius-sm); }
  .cr-os__key-inner { justify-content: flex-start; }
  .cr-os__key-text { font-size: 1.1vw; }
  .cr-os__key.is-label .cr-os__key-text { font-size: .8vw; }
  .cr-os__key.-pc { display: block; }
  .cr-os__key.-sp { display: none; }
  .cr-os__key.-pc, .cr-os__key.-letter { grid-column: span var(--span); height: 10.55vh; max-height: 5.93vw; text-transform: uppercase; }
  .cr-os__key.-letter[data-key] { grid-column: span var(--span); }
  .cr-os__key.is-label { text-transform: none; }
  .cr-os__cursor { display: grid; grid-column: span 29; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; column-gap: min(.59vw, .5rem * var(--r-max-scale)); height: 10.55vh; max-height: 5.93vw; color: var(--border-inverse); }
  .cr-os__cursor span { border: 1px solid currentcolor; border-radius: var(--radius-sm); }
  .cr-os__cursor span[data-direction="up"] { grid-column: 2 / 3; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .cr-os__cursor span[data-direction="left"] { grid-row: 2 / 3; grid-column: 1 / 2; }
  .cr-os__cursor span[data-direction="down"] { grid-row: 2 / 3; grid-column: 2 / 3; border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  .cr-os__cursor span[data-direction="right"] { grid-row: 2 / 3; grid-column: 3 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-os, .cr-os__key, .cr-os__question { transition: none; }
}