/* Oye Chowk hero (21 Oct 2026): the billboard / cake experience from the Oye Chowk handoff, scoped under .oc.
   Source: ~/.claude/oye-chowk-handoff-2026-10-21/dist/style.css. Nothing here styles anything outside .oc. */
.oc { --oc-red: #ff1934; --oc-action: #e41332; --oc-action-hover: #c90f2b; --oc-ink: #f7f1eb; --oc-muted: #c5bfc0; --oc-ground: #0b0a0c; --oc-line: #ffffff30; --oc-gutter: 4.4vw;
  padding: 76px 14px 0; }
.oc *, .oc *::before, .oc *::after { box-sizing: border-box; }
.oc svg.oc-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.oc .oc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.oc-frame { position: relative; isolation: isolate; height: calc(100svh - 92px); min-height: 620px; max-height: 1000px; overflow: hidden; border-radius: 28px;
  background: var(--oc-ground); color: var(--oc-ink); font-family: var(--body, Satoshi, sans-serif); box-shadow: 0 30px 80px -40px rgba(20, 10, 10, .55); }
.oc-scene { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.oc-world { position: absolute; width: 1586px; height: 992px; transform-origin: 50% 50%; will-change: transform; }
.oc-arch { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.oc-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0b0a0c 0%, #0b0a0cf2 18%, #0b0a0ca3 32%, #0b0a0c0a 50%, transparent 70%), linear-gradient(0deg, #0b0a0c74, transparent 24%); }
.oc-viewport { position: absolute; inset: 0; pointer-events: none; }
.oc-viewport canvas { display: block; width: 100%; height: 100%; opacity: 0; }
.oc.is-ready .oc-viewport canvas { opacity: 1; }
.oc-fallback { position: absolute; left: 60.53%; top: 25.96%; width: 22.7%; height: auto; pointer-events: none; opacity: 1; transform: skewY(5.56deg); filter: brightness(.88); }
.oc.is-ready .oc-fallback { visibility: hidden; opacity: 0; }
.oc-bname { position: absolute; left: 76.8%; top: 20.8%; width: 12.2%; height: 5%; display: flex; align-items: center; justify-content: center; color: #ffe4a8; font-family: Georgia, serif;
  text-transform: uppercase; letter-spacing: .09em; font-size: 21px; transform: rotate(15deg) skewY(2deg); text-align: center; text-shadow: 1px 3px 8px #140004; z-index: 2; pointer-events: none; line-height: 1.2; }
.oc-bname span { display: block; overflow-wrap: anywhere; max-width: 100%; }
.oc-sname { position: absolute; left: 70.7%; top: 63.7%; width: 9.4%; height: 2.5%; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; text-transform: uppercase;
  letter-spacing: .06em; font-size: 13px; color: #ffe6a5; transform: rotate(1deg); text-align: center; line-height: 1.1; pointer-events: none; }
.oc-sname span { max-width: 100%; overflow-wrap: anywhere; }
.oc-hint { display: none; }

.oc-copy { position: absolute; z-index: 3; left: var(--oc-gutter); top: 16%; width: 40%; pointer-events: none; }
.oc-copy h1 { margin: 0; font-family: var(--display, Manrope, sans-serif); font-weight: 600; font-size: clamp(42px, 4.7vw, 80px); line-height: 1.04; letter-spacing: -.035em; color: var(--oc-ink); }
.oc-copy h1 span { display: block; white-space: nowrap; }
.oc-copy h1 em { font-style: normal; color: var(--oc-red); }
.oc-copy p { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; color: var(--oc-muted); margin: 12px 0 26px; max-width: 460px; }
.oc-actions { display: flex; flex-wrap: wrap; gap: 12px; pointer-events: auto; }
.oc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 26px; background: var(--oc-action); color: #fff; border: 1px solid transparent;
  border-radius: 100px; font: 700 15px/1 var(--display, Manrope, sans-serif); white-space: nowrap; text-decoration: none; transition: background .18s, transform .18s; }
.oc-btn:hover { background: var(--oc-action-hover); transform: translateY(-2px); }
.oc-btn--line { background: #0b0a0c48; border-color: #ded4d2; color: var(--oc-ink); font-weight: 600; }
.oc-btn--line:hover { background: #ffffff16; }
.oc-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: #d9cfcb; pointer-events: auto; }
.oc-trust li::before { content: "\2713"; color: #ff7184; font-weight: 700; margin-right: 7px; }

.oc-dock { position: absolute; z-index: 5; left: 31%; right: 3.6%; bottom: 4.4%; min-height: 76px; padding: 14px 22px; display: flex; align-items: center; gap: 22px; border: 1px solid #ffffff28; border-radius: 22px;
  background: #1b1411ed; box-shadow: 0 12px 40px #0005; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.oc-namectl { flex: 1.6; display: flex; align-items: center; gap: 18px; min-width: 0; }
.oc-namectl > label { font-size: 11px; letter-spacing: .10em; text-transform: uppercase; font-weight: 700; max-width: 115px; line-height: 1.6; flex: 0 0 100px; }
.oc-field { position: relative; flex: 1; min-width: 130px; }
.oc-field input { width: 100%; height: 42px; color: var(--oc-ink); font: 500 14px var(--body, Satoshi, sans-serif); padding: 9px 39px 9px 17px; border: 1px solid #ffffff35; background: #0b0a0c80; border-radius: 100px;
  transition: border-color .2s; caret-color: var(--oc-red); }
.oc-field input:hover { border-color: #ffffff65; }
.oc-field input:focus { border-color: #ff7184; outline: none; }
.oc-field input::placeholder { color: #b4a8a5; }
.oc-field svg { position: absolute; right: 14px; top: 12px; width: 16px; height: 16px; pointer-events: none; }
.oc-depthctl { flex: 1; min-width: 145px; max-width: 190px; padding: 0 0 0 22px; border-left: 1px solid var(--oc-line); }
.oc-depthctl label { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #ded4ce; white-space: nowrap; }
.oc-depthctl output { font-variant-numeric: tabular-nums; color: #ffabb3; min-width: 30px; text-align: right; }
.oc-depthctl input { display: block; margin: 9px 0 0; width: 100%; height: 32px; accent-color: var(--oc-red); cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.oc-depthctl input::-webkit-slider-runnable-track { height: 3px; background: #69534b; border-radius: 4px; }
.oc-depthctl input::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--oc-red); }
.oc-depthctl input::-moz-range-track { height: 3px; background: #69534b; }
.oc-depthctl input::-moz-range-thumb { border: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--oc-red); }
.oc-motion { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.oc-replay, .oc-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--oc-ink); border: 1px solid #ffffff33; border-radius: 100px; background: transparent;
  padding: 10px 15px; font: 500 12px var(--body, Satoshi, sans-serif); cursor: pointer; transition: background .18s, border-color .18s; }
.oc-replay:hover, .oc-toggle:hover { background: #ffffff12; border-color: #ffffff88; }
.oc-replay svg, .oc-toggle svg { width: 17px; height: 17px; }
.oc-toggle { width: 44px; padding: 10px; }
.oc-toggle .oc-play { display: none; }
.oc-toggle[aria-pressed="true"] .oc-play { display: block; }
.oc-toggle[aria-pressed="true"] .oc-pause { display: none; }
.oc button:disabled, .oc input:disabled { opacity: .45; cursor: not-allowed; }
.oc :focus-visible { outline: 2px solid #fff1bd; outline-offset: 4px; }

.oc-foot { position: absolute; z-index: 3; bottom: 5%; left: var(--oc-gutter); right: var(--oc-gutter); display: flex; justify-content: space-between; pointer-events: none; font-size: 10px; letter-spacing: .10em;
  font-weight: 500; color: #d8ced0; }
.oc-foot > span:first-child { max-width: 24%; line-height: 1.6; }
.oc-slash { margin: 0 6px; color: #95858a; }
.oc-status { position: absolute; right: 0; bottom: 100px; max-width: 340px; font-size: 11px; letter-spacing: .02em; line-height: 1.5; color: #e8dcd3; background: #1b1411bd; border-radius: 8px; padding: 7px 12px; }
.oc-status:empty { display: none; }

@media (max-width: 1250px) and (min-width: 761px) {
  .oc-copy { top: 15%; width: 44%; } .oc-copy h1 { font-size: 4.9vw; } .oc-copy p { font-size: 16px; }
  .oc-btn { padding: 13px 20px; font-size: 13.5px; min-height: 48px; }
  .oc-dock { left: 22%; gap: 14px; padding: 14px 16px; } .oc-namectl { gap: 10px; } .oc-namectl > label { flex-basis: 95px; }
  .oc-depthctl { min-width: 120px; padding-left: 14px; } .oc-replay { padding: 10px; } .oc-foot > span:first-child { max-width: 19%; }
}
@media (max-width: 960px) and (min-width: 761px) { .oc-dock { left: 4%; right: 4%; } .oc-foot { bottom: 1.6%; } .oc-foot > span:first-child { max-width: none; } .oc-copy { width: 46%; } .oc-trust { display: none; } }
@media (max-width: 760px) {
  .oc { --oc-gutter: 22px; padding: 70px 8px 0; }
  .oc-frame { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; border-radius: 22px; }
  .oc-copy { position: relative; left: auto; top: auto; order: 1; width: auto; padding: 28px var(--oc-gutter) 0; pointer-events: auto; }
  .oc-copy h1 { font-size: clamp(36px, 10.6vw, 58px); line-height: 1.02; }
  .oc-copy p { font-size: 15px; margin: 14px 0 18px; max-width: 340px; }
  .oc-btn { font-size: 13px; min-height: 46px; padding: 12px 18px; }
  .oc-trust { font-size: 12.5px; margin-top: 16px; }
  .oc-scene { position: relative; inset: auto; order: 2; height: 380px; margin-top: -10px; flex-shrink: 0; width: 100%; }
  .oc-shade { background: linear-gradient(180deg, #0b0a0c, transparent 18%, transparent 81%, #0b0a0c); }
  .oc-hint { display: flex; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); align-items: center; gap: 7px; padding: 7px 12px; background: #100d0cba; border-radius: 20px; font-size: 11px;
    color: #f1dfd1; white-space: nowrap; pointer-events: none; }
  .oc-hint svg { width: 15px; height: 15px; }
  .oc-dock { position: relative; order: 3; inset: auto; margin: 0 12px; padding: 16px 15px; gap: 15px; flex-wrap: wrap; border-radius: 20px; background: #1b1411; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .oc-namectl { flex-basis: 100%; gap: 12px; } .oc-namectl > label { flex-basis: 90px; line-height: 1.5; }
  .oc-field input { font-size: 16px; height: 44px; } .oc-field svg { top: 14px; }
  .oc-depthctl { border-left: 0; padding-left: 0; flex: 1; max-width: none; min-width: 120px; }
  .oc-foot { position: relative; order: 4; inset: auto; padding: 18px 20px 20px; flex-wrap: wrap; gap: 10px; justify-content: center; text-align: center; }
  .oc-foot > span:first-child { max-width: none; }
  .oc-status { position: static; max-width: 100%; font-size: 10px; padding: 5px 10px; }
  .oc-br { display: none; }
}
@media (max-width: 370px) { .oc { --oc-gutter: 16px; } .oc-copy h1 { font-size: 34px; } .oc-btn { font-size: 12px; padding: 11px 14px; } .oc-dock { margin: 0 8px; padding: 14px 12px; } .oc-replay span { font-size: 11px; } .oc-replay { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .oc *, .oc *::before, .oc *::after { transition: none !important; } .oc-world { will-change: auto; } }
@media (max-width: 760px) { .oc-motion { margin-left: auto; } }   /* keeps Replay/Pause clear of the site-wide Sound button (bottom-left) */