.marble{background:var(--ui);touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.marble-canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}.marble-canvas:active{cursor:grabbing}.marble-back,.marble-bar button{cursor:pointer;color:#fbf4ea;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:999px;place-items:center;width:44px;height:44px;display:grid}.marble-back{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(10px);background:#0e0a0852;transition:opacity .6s;position:absolute}.marble-bar{left:50%;bottom:max(18px, calc(env(safe-area-inset-bottom) + 6px));-webkit-backdrop-filter:blur(12px);background:#0e0a085c;border:1px solid #fff5e612;border-radius:999px;align-items:center;gap:6px;max-width:calc(100vw - 16px);padding:6px;transition:opacity .6s;display:flex;position:absolute;transform:translate(-50%)}.marble-bar button{transition:background-color .2s,transform .12s}.marble-bar button:active{transform:scale(.92)}@media (hover:hover){.marble-bar button:not([aria-pressed=true]):hover{background:#fff5e61f}}.marble-bar .swatches{gap:2px;padding:0 4px;display:flex}.marble-bar .swatch{border:2px solid #ffffff38;width:34px;height:34px;margin:5px 0}.marble-bar .swatch[aria-pressed=true]{border-color:#fbf4ea;box-shadow:0 0 0 2px #0000004d}.marble-bar button:focus-visible,.marble-back:focus-visible{outline-offset:1px;outline:2px solid #ffffffd9}.marble.is-quiet .marble-bar,.marble.is-quiet .marble-back{opacity:.18}.marble.is-quiet .marble-bar:hover,.marble.is-quiet .marble-back:hover,.marble.is-quiet .marble-bar:focus-within,.marble.is-quiet .marble-back:focus-visible{opacity:1}.marble-hint{pointer-events:none;-webkit-backdrop-filter:blur(6px);white-space:nowrap;text-align:center;color:#fffaf2e6;text-shadow:0 1px 10px #00000073;background:#0e0a0857;border-radius:999px;width:max-content;max-width:calc(100vw - 48px);margin:0;padding:8px 18px;font-size:clamp(15px,4.4vw,19px);animation:3.6s ease-in-out infinite breathe;position:absolute;top:30%;left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.marble-hint{animation:none}.marble-bar button{transition:none}.marble-bar button:active{transform:none}}.marble-fail{max-width:520px;margin:0 auto;padding:48px 24px}.marble-fail a{color:#e9c99a}@media (max-width:380px){.marble-bar{gap:2px}.marble-bar .swatch{width:28px;height:28px}}@media (max-height:500px) and (orientation:landscape){.marble-hint{font-size:15px;top:22%}.marble-bar{bottom:max(10px, env(safe-area-inset-bottom))}}