@charset "UTF-8";*{box-sizing:border-box}html{min-height:100%;background:#05060a}body{min-height:100svh;margin:0;display:grid;place-items:center;padding:max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:radial-gradient(circle at top, #30365f, transparent 35%), linear-gradient(135deg, #11131f, #05060a);color:white;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;overflow-x:hidden}.demo{width:min(100%, 760px);display:grid;gap:clamp(18px, 4vw, 24px);justify-items:center;text-align:center}.scene{width:clamp(210px, 68vw, 260px);aspect-ratio:13/18;perspective:900px;cursor:-webkit-grab;cursor:grab;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:pan-y;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.scene:active{cursor:-webkit-grabbing;cursor:grabbing}.card{position:relative;width:100%;height:100%;border-radius:clamp(22px, 7vw, 28px);transform-style:preserve-3d;will-change:transform;box-shadow:0 30px 80px rgba(0, 0, 0, 0.45)}.face{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(20px, 7vw, 28px);border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}.front{background:linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent), linear-gradient(135deg, #8b5cf6, #06b6d4)}.back{background:linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent), linear-gradient(135deg, #f97316, #ec4899);transform:rotateY(180deg)}.face::after{content:"";position:absolute;inset:clamp(12px, 4vw, 16px);border:1px solid rgba(255, 255, 255, 0.35);border-radius:calc(clamp(22px, 7vw, 28px) - 8px);pointer-events:none}h1{margin:0;font-size:clamp(2.25rem, 13vw, 4rem);line-height:0.9;letter-spacing:-0.06em}.copy{display:grid;gap:12px;max-width:590px}p{margin:0;color:rgba(255, 255, 255, 0.78);font-size:clamp(0.95rem, 2.8vw, 1rem);line-height:1.5}code{color:white;background:rgba(255, 255, 255, 0.12);border:1px solid rgba(255, 255, 255, 0.12);padding:0.1em 0.35em;border-radius:0.4em}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center}.pill,.toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid rgba(255, 255, 255, 0.18);border-radius:999px;background:rgba(255, 255, 255, 0.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-variant-numeric:tabular-nums}#value{display:inline-block;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}.toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toggle input{position:absolute;opacity:0;pointer-events:none}.switch{width:46px;height:26px;padding:3px;border-radius:999px;background:rgba(255, 255, 255, 0.22);transition:background 0.2s ease}.switch::before{content:"";display:block;width:20px;height:20px;border-radius:50%;background:white;transition:transform 0.2s ease}.toggle input:checked + .switch{background:rgba(255, 255, 255, 0.72)}.toggle input:checked + .switch::before{transform:translateX(20px)}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:999px;min-height:44px;padding:12px 18px;background:white;color:#11131f;font-weight:700;cursor:pointer}button:hover{transform:translateY(-1px)}@media (pointer:coarse){body{place-items:start center}.demo{padding-top:4svh}.copy{width:100%;text-align:left}.controls{width:100%;display:grid;grid-template-columns:1fr;justify-items:stretch}.pill,.toggle,button{width:100%;justify-content:center}.card{box-shadow:0 18px 45px rgba(0, 0, 0, 0.38)}.pill,.toggle{-webkit-backdrop-filter:none;backdrop-filter:none}}@media (prefers-reduced-motion:reduce){.switch,.switch::before,button{transition:none}}.okay-container{position:fixed;top:16px;z-index:9999;max-width:200px;color:white}@media (width < 768px){.okay-container{left:50%;transform:translateX(-50%)}}#okaydev-logo{width:100%;margin-bottom:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.okay-description{color:#ccc;text-decoration:none;text-transform:uppercase;background-color:#222;padding:3px 5px;display:inline;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-size:9.3px;line-height:1.75em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.okay-description::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}