.ferro{background:var(--ui);touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.ferro-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.ferro-back,.ferro-bar button{cursor:pointer;-webkit-tap-highlight-color:transparent;color:#f2f2f4;background:0 0;border:0;border-radius:999px;place-items:center;width:44px;height:44px;transition:background-color .2s,transform .12s;display:grid}.ferro-back{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(10px);background:#ffffff12;transition:opacity .6s;position:absolute}.ferro-bar{left:50%;bottom:max(18px, calc(env(safe-area-inset-bottom) + 6px));-webkit-backdrop-filter:blur(12px);background:#ffffff12;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%)}.ferro-bar button[aria-pressed=true]{background:#ffffff29}.ferro-bar button:active{transform:scale(.92)}@media (hover:hover){.ferro-bar button:not([aria-pressed=true]):hover{background:#ffffff1a}}.ferro-bar .swatches{gap:2px;padding:0 4px;display:flex}.ferro-bar .swatch{border:2px solid #ffffff38;width:34px;height:34px;margin:5px 0}.ferro-bar .swatch[aria-pressed=true]{border-color:#f2f2f4;box-shadow:0 0 0 2px #0000004d}.ferro.is-quiet .ferro-bar,.ferro.is-quiet .ferro-back{opacity:.18}.ferro.is-quiet .ferro-bar:hover,.ferro.is-quiet .ferro-back:hover,.ferro.is-quiet .ferro-bar:focus-within,.ferro.is-quiet .ferro-back:focus-visible{opacity:1}.ferro-hint{left:16px;right:16px;top:calc(max(14px, env(safe-area-inset-top)) + 60px);text-align:center;pointer-events:none;color:#f5f5f8d9;text-shadow:0 1px 10px #0009;margin:0;font-size:19px;animation:3.6s ease-in-out infinite breathe;position:absolute}@media (prefers-reduced-motion:reduce){.ferro-hint{animation:none}}.ferro-fail{max-width:520px;margin:0 auto;padding:48px 24px}.ferro-fail a{color:#c9c9d2}@media (max-width:380px){.ferro-bar{gap:2px}.ferro-bar .swatch{width:28px;height:28px}}@media (orientation:landscape) and (max-height:480px){.ferro-hint{left:max(18px, env(safe-area-inset-left));text-align:left;width:calc(50vw - 175px);max-width:220px;font-size:17px;top:50%;right:auto;transform:translateY(-50%)}}