.constellation-ceremony { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: rgba(0, 0, 0, .88); backdrop-filter: blur(22px); }
.constellation-card { width: min(92vw, 460px); padding: 1.25rem; border: 1px solid rgba(170, 145, 255, .28); border-radius: 1.4rem; background: radial-gradient(circle at 50% 20%, rgba(73, 44, 120, .3), rgba(8, 7, 13, .98) 58%); box-shadow: 0 1.5rem 6rem rgba(0, 0, 0, .75); text-align: center; }
.constellation-kicker { margin: 0 0 .45rem; color: #bfa9ff; font: 600 .72rem/1.2 system-ui; letter-spacing: .16em; text-transform: uppercase; }
.constellation-card h1 { margin: 0; font-size: clamp(1.25rem, 5vw, 1.75rem); }
.constellation-detail, .constellation-status { color: #aaa2b7; }
.constellation-colors { display: flex; justify-content: center; gap: .65rem; margin: .8rem 0 .25rem; }
.constellation-colors button { width: 2.15rem; height: 2.15rem; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.constellation-colors button[aria-checked="true"] { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 1.2rem currentColor; }
.constellation-colors [data-color="gold"] { background: hsl(44 96% 62%); }
.constellation-colors [data-color="rose"] { background: hsl(344 90% 66%); }
.constellation-colors [data-color="violet"] { background: hsl(278 88% 70%); }
.constellation-colors [data-color="ocean"] { background: hsl(198 92% 65%); }
.constellation-colors [data-color="mint"] { background: hsl(154 75% 60%); }
.constellation-canvas { display: block; width: min(76vw, 360px); max-width: 100%; aspect-ratio: 1; margin: .5rem auto; touch-action: none; border-radius: 50%; background: radial-gradient(circle, rgba(78, 55, 124, .18), transparent 67%); }
.constellation-canvas.constellation-blank { cursor: crosshair; background: radial-gradient(circle, rgba(82, 58, 128, .08), transparent 68%); }
.constellation-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; }
.constellation-approved .constellation-card { border-color: rgba(94, 235, 179, .7); }
@media (prefers-reduced-motion: reduce) { .constellation-ceremony { backdrop-filter: none; } }
@media (forced-colors: active) { .constellation-card, .constellation-canvas { forced-color-adjust: none; background: #000; border-color: #fff; } }
@media (forced-colors: active) { .constellation-colors button { forced-color-adjust: auto; } }

.motif-canvas-demo-page { margin: 0; overflow: hidden; background: radial-gradient(circle at 50% 46%, #171126, #030205 72%); color: #111; }
.motif-personal-canvas { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow: hidden; background: rgba(3, 2, 7, .22); backdrop-filter: blur(8px); opacity: 0; animation: motif-canvas-backdrop-in .52s cubic-bezier(.2,.8,.2,1) forwards; }
.motif-personal-sheet { position: relative; width: min(88vw, 460px); height: min(68vh, 580px); min-height: 390px; overflow: hidden; border-radius: 2rem; background: #fff; box-shadow: 0 2rem 8rem rgba(0, 0, 0, .48); opacity: 0; transform: translateY(14px) scale(.975); animation: motif-canvas-sheet-in .62s .08s cubic-bezier(.16,1,.3,1) forwards; }
.motif-personal-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; background: #fff; }
.motif-canvas-tools { position: absolute; z-index: 2; left: 50%; bottom: 1rem; display: flex; align-items: center; gap: .9rem; max-width: calc(100% - 1.5rem); padding: .6rem .75rem; border: 1px solid rgba(17, 17, 17, .09); border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 .5rem 2rem rgba(25, 20, 40, .12); backdrop-filter: blur(18px); transform: translateX(-50%); }
.motif-canvas-pair, .motif-canvas-colors, .motif-canvas-brushes { display: flex; align-items: center; gap: .48rem; }
.motif-canvas-pair { position: relative; width: 2.75rem; height: 2rem; flex: 0 0 2.75rem; padding-right: .75rem; border-right: 1px solid rgba(17, 17, 17, .1); }
.motif-canvas-tools .motif-canvas-pair button { position: absolute; width: 1.55rem; height: 1.55rem; background: var(--identity-color); box-shadow: 0 .16rem .45rem rgba(18, 14, 27, .18), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.motif-canvas-pair [data-color-slot="primary"] { left: 0; top: 0; z-index: 2; }
.motif-canvas-pair [data-color-slot="secondary"] { left: 1rem; bottom: 0; z-index: 1; }
.motif-canvas-pair button[aria-checked="true"] { z-index: 3; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #17131d, 0 .2rem .7rem rgba(18, 14, 27, .22); }
.motif-canvas-pair button[aria-checked="true"]::before { display: none; }
.motif-canvas-colors { padding-right: .85rem; border-right: 1px solid rgba(17, 17, 17, .1); }
.motif-canvas-tools button { position: relative; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; transform: none; }
.motif-canvas-colors button { background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.motif-canvas-tools button[aria-checked="true"]::before { content: ''; position: absolute; inset: -.25rem; border: 1.5px solid #16121e; border-radius: 50%; }
.motif-canvas-brushes button::after { content: ''; display: block; width: 1.2rem; height: var(--brush-mark); border-radius: 999px; background: #17131d; transform: rotate(-16deg); }
.motif-canvas-brushes [data-brush="air"]::after { opacity: .34; filter: blur(1.7px); }
.motif-canvas-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.motif-personal-canvas.is-leaving { pointer-events: none; animation: motif-canvas-backdrop-out .28s ease forwards; }
.motif-personal-canvas.is-leaving .motif-personal-sheet { animation: motif-canvas-sheet-out .28s ease forwards; }
.motif-personal-canvas.is-committing .motif-personal-sheet { pointer-events: none; animation: motif-canvas-commit .9s ease-in-out infinite alternate; }
.motif-personal-canvas.is-invalid .motif-personal-sheet { opacity: 1; animation: motif-canvas-invalid .34s ease; }
@keyframes motif-canvas-backdrop-in { to { opacity: 1; } }
@keyframes motif-canvas-sheet-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes motif-canvas-backdrop-out { to { opacity: 0; backdrop-filter: blur(0); } }
@keyframes motif-canvas-sheet-out { to { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes motif-canvas-commit { to { box-shadow: 0 2rem 9rem rgba(123, 91, 240, .62); transform: scale(.994); } }
@keyframes motif-canvas-invalid { 0%, 100% { opacity: 1; } 25% { opacity: 1; transform: translateX(-5px); } 55% { opacity: 1; transform: translateX(4px); } 80% { opacity: 1; transform: translateX(-2px); } }
@media (max-width: 430px) { .motif-personal-canvas { padding: max(.65rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left)); } .motif-personal-sheet { width: min(94vw, 410px); height: min(76dvh, 640px); min-height: 390px; border-radius: 1.65rem; } .motif-canvas-tools { width: calc(100% - 1.2rem); flex-wrap: wrap; justify-content: center; gap: .38rem .6rem; padding: .55rem .6rem; border-radius: 1.4rem; } .motif-canvas-pair { width: 2.8rem; flex-basis: 2.8rem; height: 2.35rem; padding-right: .55rem; } .motif-canvas-tools .motif-canvas-pair button { width: 1.75rem; height: 1.75rem; } .motif-canvas-pair [data-color-slot="secondary"] { left: 1rem; } .motif-canvas-colors { gap: .16rem; padding-right: 0; border-right: 0; } .motif-canvas-brushes { flex-basis: 100%; justify-content: center; gap: .3rem; } .motif-canvas-tools button { width: 2.25rem; height: 2.25rem; } }
@media (max-height: 560px) and (orientation: landscape) { .motif-personal-sheet { width: min(72vw, 520px); height: calc(100dvh - 1rem); min-height: 0; } .motif-canvas-tools { bottom: .55rem; } }
@media (prefers-reduced-motion: reduce) { .motif-personal-canvas, .motif-personal-sheet { animation-duration: .01ms; animation-delay: 0s; } }
@media (forced-colors: active) { .motif-personal-sheet, .motif-personal-canvas canvas { forced-color-adjust: none; background: #fff; } .motif-canvas-tools { forced-color-adjust: auto; } }