body { margin: 0; background: #fff; }
    .palette-preview { position: fixed; z-index: 20; bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: calc(100% - 32px); font: 14px THICCCBOI, sans-serif; color: #243f8a; }
    .palette-preview [hidden] { display: none !important; }
    .palette-preview__panel { box-sizing: border-box; display: grid; gap: 12px; width: 360px; max-width: 100%; padding: 20px; border: 1px solid #cdd8ee; border-radius: 20px; background: #fff; box-shadow: 0 8px 32px #12305c26; }
    .palette-preview__panel label { font-weight: 700; }
    .palette-preview__quick { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid #ffffff80; border-radius: 999px; background: #12305c; color: #fff; box-shadow: 0 4px 20px #12305c33; }
    .palette-preview__toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 500 14px THICCCBOI, sans-serif; cursor: pointer; }
    .palette-preview__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: 24px/1 THICCCBOI, sans-serif; cursor: pointer; }
    .palette-preview__arrow:hover, .palette-preview__toggle:hover { background: #ffffff20; }
    .palette-preview__toggle::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#fbf8f2 0 33%, #d9c29a 33% 66%, #1f4e8c 66%); border: 1px solid #ffffff80; }
    .palette-preview__toggle[aria-expanded='true']::after { content: '×'; font-size: 20px; line-height: 1; }
    .palette-preview select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font: inherit; color: inherit; background: white; border: 1px solid #cdd8ee; border-radius: 8px; padding: 10px; }
    .palette-preview :focus-visible { outline: 3px solid #c9a45c; outline-offset: 3px; }
.palette-preview__pages { display: flex; gap: 8px; border-top: 1px solid #e3ecf6; padding-top: 12px; }
.palette-preview__pages a { flex: 1; padding: 10px; border-radius: 10px; background: #eaf6fd; color: #07549a; text-align: center; text-decoration: none; }
.palette-preview__pages a:hover { background: #d0eaf9; }