:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; overflow: hidden; background: #080812; color: #fff; }
body.cursor-hidden, body.cursor-hidden * { cursor: none !important; }
.stage { min-height: 100svh; display: grid; place-items: center; padding: 24px; position: relative; isolation: isolate; background: radial-gradient(900px 600px at 50% 48%, #242048 0%, #111021 55%, #080812 100%); transition: background 800ms ease; }
.corner-trigger { position: fixed; z-index: 8; left: 18px; bottom: 18px; height: 35px; padding: 0 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; background: rgba(18,18,29,.5); color: rgba(255,255,255,.52); font: 600 13px/1 inherit; opacity: .34; backdrop-filter: blur(12px); }.corner-trigger:hover, .corner-trigger:focus-visible { opacity: 1; outline: none; }
.controls { position: fixed; z-index: 9; left: 18px; bottom: 58px; width: min(430px, calc(100vw - 36px)); padding: 8px; border-radius: 17px; background: rgba(22,22,34,.86); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(24px); box-shadow: 0 14px 45px rgba(0,0,0,.34); }.controls[hidden] { display: none; }
.controlbar { width: 100%; display: flex; gap: 9px; }
.record-row { display: flex; align-items: center; gap: 10px; padding-top: 9px; }.record-button { height: 30px; padding: 0 12px; background: #f35b5b; color: #fff; font-size: 12px; }.record-button.is-recording { background: #fff; color: #b32f2f; }.record-row span { color: rgba(255,255,255,.48); font-size: 11px; }
input { min-width: 0; flex: 1; height: 40px; border: 0; outline: 0; border-radius: 11px; background: transparent; color: white; font-size: 15px; padding: 0 12px; }
input::placeholder { color: rgba(255,255,255,.52); }
button { border: 0; border-radius: 11px; padding: 0 18px; background: #fff; color: #12111a; font: 650 14px/1 inherit; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
button:hover { transform: scale(1.03); }
.close-controls { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #fff; font-size: 20px; font-weight: 400; }
.help-controls { position: absolute; top: -9px; right: 24px; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); font: 700 13px/1 inherit; }
.zoom-row { display: flex; align-items: center; gap: 6px; padding: 10px 1px 1px; color: rgba(255,255,255,.62); font-size: 12px; }.zoom-row span { margin-right: auto; }.angle-button, .device-button { height: 26px; padding: 0 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.76); font-size: 12px; }.angle-button.active, .device-button.active { background: #fff; color: #12111a; }.framing-slider { min-width: 0; flex: 0 0 150px; width: 150px; height: auto; padding: 0; accent-color: #fff; cursor: pointer; }.framing-label { min-width: 70px; text-align: right; color: rgba(255,255,255,.88); font-size: 12px; }
.backdrop-row { padding-top: 9px; }.backdrop-button { width: 25px; height: 25px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.09); }.backdrop-button.active { outline: 2px solid #fff; outline-offset: 2px; }.backdrop-button.smart { width: auto; padding: 0 9px; border-radius: 8px; background: linear-gradient(135deg, #8158ff, #ef68bd, #58c8ff); color: white; box-shadow: none; font-size: 12px; }.backdrop-button.white { background: #fbfbfd; }.backdrop-button.black { background: #08080b; }.backdrop-button.violet { background: #5e3fe6; }.backdrop-button.blue { background: #2563eb; }
.axis-controls { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 6px 8px; align-items: center; padding: 11px 1px 1px; color: rgba(255,255,255,.62); font-size: 12px; }.axis-controls > span { grid-column: 1 / -1; }.axis-row { display: grid; grid-template-columns: 17px 26px 34px 26px; align-items: center; gap: 3px; }.axis-row b { color: rgba(255,255,255,.9); font-size: 12px; }.axis-row button { width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(255,255,255,.1); color: white; font-size: 16px; }.axis-row output { text-align: center; color: rgba(255,255,255,.78); font-size: 11px; }
.phone-wrap { position: relative; display: grid; place-items: center; width: 100%; min-height: 0; padding: 24px 0; perspective: 1500px; }
.ambient { position: absolute; width: min(68vw, 720px); height: min(68vw, 720px); border-radius: 50%; opacity: .32; filter: blur(90px); pointer-events: none; transition: background 900ms ease; }
.ambient-one { background: #7557ff; transform: translate(-25%, -10%); }.ambient-two { background: #fc6fbb; transform: translate(28%, 15%); }
.phone { z-index: 2; position: relative; width: clamp(288px, min(31vw, 470px), 470px); aspect-ratio: 9 / 19.5; border: clamp(7px, .75vw, 12px) solid #17171b; border-radius: clamp(38px, 4vw, 62px); padding: clamp(3px, .32vw, 5px); background: #050505; box-shadow: 0 38px 70px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.22); transform: scale(var(--phone-scale, 1)) rotateX(var(--phone-pitch, 0deg)) rotateY(var(--phone-yaw, 0deg)) rotateZ(var(--phone-roll, 0deg)); transition: transform 520ms cubic-bezier(.2,.8,.2,1), box-shadow 520ms ease; transform-style: preserve-3d; }
.phone-back { position: absolute; inset: 0; z-index: 0; border: 1px solid rgba(255,255,255,.12); border-radius: inherit; background: linear-gradient(145deg, #575762 0%, #24242c 35%, #0a0a0e 100%); box-shadow: 0 28px 38px rgba(0,0,0,.42), inset 0 0 0 2px rgba(0,0,0,.55); transform: translateZ(-36px); pointer-events: none; }
.phone-edge { position: absolute; z-index: 1; pointer-events: none; background: linear-gradient(145deg, #383840, #0a0a0e 72%); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.65); backface-visibility: visible; }.phone-edge-left { top: 56px; left: 0; width: 36px; height: calc(100% - 112px); border-radius: 8px; transform-origin: left center; transform: rotateY(90deg); }
.phone.tilted { --phone-pitch: 7deg; --phone-yaw: -20deg; --phone-roll: -15deg; box-shadow: 48px 60px 82px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.22); }
.phone.tablet { width: clamp(500px, min(58vw, 860px), 860px); aspect-ratio: 4 / 3; border-radius: clamp(28px, 3vw, 42px); }.phone.tablet .screen { border-radius: calc(clamp(28px, 3vw, 42px) - clamp(9px, 1vw, 14px)); }.phone.tablet .dynamic-island { top: 8px; width: 13%; height: 19px; }.phone.tablet .phone-edge-left { top: 40px; height: calc(100% - 80px); }.phone.tablet .side-left { top: 25%; box-shadow: 0 30px 0 #15151a, 0 48px 0 #15151a; }
.phone::before { content: ""; position: absolute; inset: 2px; border-radius: inherit; border: 1px solid rgba(255,255,255,.13); pointer-events: none; z-index: 4; }
.screen { position: relative; z-index: 2; height: 100%; overflow: hidden; background: #11111a; border-radius: calc(clamp(38px, 4vw, 62px) - clamp(9px, 1vw, 14px)); transform: translateZ(2px); }
iframe { width: 100%; height: 100%; border: 0; display: block; background: white; }
.dynamic-island { position: absolute; z-index: 3; top: 11px; left: 50%; transform: translateX(-50%); width: 31%; height: 29px; background: #010101; border-radius: 99px; pointer-events: none; }
.side { position: absolute; z-index: 3; background: linear-gradient(90deg, #070709, #35353d); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; transform: translateZ(4px); }.side-left { width: 5px; height: 12%; left: -12px; top: 21%; box-shadow: 0 48px 0 #15151a, 0 68px 0 #15151a; }.side-right { width: 5px; height: 17%; right: -12px; top: 28%; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 12px; background: linear-gradient(155deg, #242035, #0c0c15); color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.4; }.empty-state.hidden { display: none; }.empty-mark { font: 300 58px/1 Georgia, serif; color: #b9aaff; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.help-dialog { width: min(430px, calc(100vw - 36px)); padding: 28px 26px 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: #20212a; color: #f7f7fa; box-shadow: 0 28px 80px rgba(0,0,0,.48); }.help-dialog::backdrop { background: rgba(4,4,8,.58); backdrop-filter: blur(4px); }.help-dialog h2 { margin: 3px 0 15px; font-size: 23px; letter-spacing: -.03em; }.help-dialog ol { display: grid; gap: 11px; margin: 0; padding-left: 21px; color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.38; }.help-dialog a { color: white; font-weight: 700; }.eyebrow { margin: 0; color: #ae9bff; font-size: 11px; font-weight: 800; letter-spacing: .14em; }.dialog-note { margin: 17px 0 0; color: rgba(255,255,255,.48); font-size: 12px; line-height: 1.4; }.dialog-close { position: absolute; top: 11px; right: 11px; display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; font-weight: 400; }
@media (max-height: 760px) { .stage { padding: 14px; }.phone-wrap { padding: 12px 0; }.phone { width: min(37vh, 370px); } }
@media (max-height: 760px) { .phone.tablet { width: min(72vw, 82vh, 680px); } }
@media (max-width: 600px) { .phone:not(.tablet) { width: min(76vw, 410px); }.phone.tablet { width: min(92vw, 600px); }.controlbar { align-self: start; } }
body.recording .corner-trigger, body.recording .controls { display: none !important; }