/* PrismBeat: light, translucent surfaces with a spectrum of color. */
:root {
  color-scheme: light;
  --bg: #f8f9fd;
  --panel: #ffffffb8;
  --ink: #26273e;
  --muted: #64677c;
  --accent: #6550cf;
  --line: #daddeb;
  --glass: #ffffffb8;
  --shadow: 0 18px 60px #55518a0c;
}
body {
  background:
    radial-gradient(ellipse 75% 650px at 0 250px, #e6e0ffb8, transparent 75%),
    radial-gradient(ellipse 65% 650px at 100% 600px, #d8f5f5a8, transparent 75%),
    radial-gradient(ellipse 60% 500px at 60% 0, #fff0f3b0, transparent 80%),
    var(--bg);
}
::selection { background: #e1d9ff; color: #342574; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #6550cf; }
.header { border-color: #d9dceb; }
.header nav { color: #5d5e76; }
.header a:hover, .footer-links a:hover { color: #6550cf; }
.brand { color: #302d48; }
.brand-dot { background: linear-gradient(135deg, #a280f2, #4fc3cf); box-shadow: 0 0 14px #ab91f540; }
.language { background: #ffffffa8; border-color: #dbddea; backdrop-filter: blur(16px); }
.eyebrow, .edition { color: #73728b; }
.live-dot { background: #8c74de; box-shadow: 0 0 14px #9e89ec45; }
.hero h1 { color: #2e2a48; font-weight: 550; }
.hero h1 .prism-text {
  color: #6656c9;
  background: linear-gradient(105deg, #7654c5 0%, #7274d7 38%, #328eac 76%, #37998b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-side p { color: #65657c; }
.hero-side small { color: #74748a; }
.button { background: #6752cf; color: #fff; border-radius: 100px; box-shadow: 0 7px 22px #6752cf20; }
.button:hover { color: #fff; background: #5742be; box-shadow: 0 10px 28px #6752cf32; }
.desktop {
  border: 1px solid #ffffff;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 5% 5%, #d0c4ff 0, transparent 58%),
    radial-gradient(ellipse at 95% 30%, #c5edf2 0, transparent 60%),
    radial-gradient(ellipse at 50% 100%, #ffdadc 0, transparent 65%), #e8e9f8;
  box-shadow: 0 30px 70px #7565ad16, 0 0 0 1px #dddced;
}
.desktop:after { background: linear-gradient(0deg, #ffffff25, transparent 35%); }
.desktop-menu { background: #ffffff45; color: #616079; border-bottom: 1px solid #ffffff60; }
.work-window { background: #ffffffdb; color: #37384d; border: 1px solid #ffffffd9; border-radius: 12px; box-shadow: 0 20px 70px #685b8f20; backdrop-filter: blur(18px); }
.window-bar { background: #fafaffb8; border-color: #e5e4ef; color: #77758d; }
.traffic { color: #b6a6e8; }
.workspace aside { background: #f0edfab0; color: #858099; }
.note small { color: #88819e; }
.note .muted { color: #8d879e; }
.rule { background: #e5e0ee; }
.fake-lines b { background: #e8e4ef; }
.floating-label { color: #6553a9; background: #ffffffb8; border-color: #fff; backdrop-filter: blur(16px); box-shadow: 0 6px 24px #7565ad14; }
.overlay-tags span { color: #655b82; background: #ffffffb8; border-color: #fff; box-shadow: 0 5px 18px #7565ad0c; }
.demo-caption, .demo-caption button { color: #77738b; }
.features { gap: 24px; }
.features article { padding: 28px; border: 1px solid #fff; border-radius: 20px; background: linear-gradient(135deg, #ffffffc9, #ffffff75); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.features article:nth-child(2) { background: linear-gradient(135deg, #f2eefeca, #ffffffb0); }
.features article:nth-child(3) { background: linear-gradient(135deg, #edf7f8c9, #ffffffb0); }
.features .eyebrow { color: #79708e; }
.features h3 { color: #39344f; }
.features p, .steps p { color: #6b687c; }
.styles-section {
  color: #34314b;
  border-color: #e1e0ed;
  background:
    radial-gradient(ellipse at 0 0, #e9e3fd80, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #dff5f780, transparent 55%), #f3f4fb;
}
.styles-section .eyebrow { color: #817395; }
.styles-section .section-heading>p:last-child { color: #706b83; }
.scene-card { border-color: #fff; border-radius: 20px; background: #ffffffd9; box-shadow: 0 12px 36px #7363870b; }
.scene-gallery .scene-kicker>span { color: #796695; }
.scene-gallery .scene-kicker>small { color: #817b8f; }
.scene-gallery h3 { color: #3c3450; }
.scene-gallery figcaption p { color: #726b80; }
.scene-gallery figcaption a { color: #6550b7; }
.scene-gallery figcaption a:hover { color: #43328d; }
.scene-note { color: #7c748d; }
.customize { border-color: #e0dfeb; }
.customize h2 { color: #36304d; }
.setting-features h3 { color: #6a51b8; }
.setting-features p { color: #746b83; }
.settings-demo { background: linear-gradient(135deg, #ffffffdc, #f3effdd9); border: 1px solid #fff; border-radius: 22px; box-shadow: 0 18px 65px #7565ad12, 0 0 0 1px #e8e2f5; backdrop-filter: blur(18px); }
.settings-demo-title { color: #66577d; }
.opacity-preview { background: #fffefa; color: #494454; border: 1px solid #e9e3ef; border-radius: 12px; }
.preview-content small { color: #92879b; }
.preview-rule { border-color: #e7e0ec; }
.range-control label { color: #696076; }
.range-control output { color: #6550b7; }
.range-control input { accent-color: #8974d7; }
.range-control input:focus-visible { outline-color: #6550cf; }
#opacity-help { color: #7e748b; }
.privacy-symbol { color: #a08bdc; text-shadow: 14px 9px 0 #8ed1d14d, -9px -7px 0 #f0b9d03d; }
.privacy-band { border-color: #dfddea; }
.text-link { color: #6550b7; border-color: #bcb0e1; }
.text-link:hover { color: #43328d; }
.step-number { color: #afa0d4; }
.release { color: #3f315c; background: linear-gradient(115deg, #e7dffa 0%, #e4eafa 50%, #daf1f1 100%); border: 1px solid #fff; border-radius: 22px; box-shadow: var(--shadow); }
.release .eyebrow, .release p { color: #746481; }
.release .button { color: #fff; background: #6752cf; }
.release .button:hover { background: #5742be; }
footer { border-color: #dedde9; }
.footer-links { color: #6c637c; }
.document h1 { color: #3b3155; }
.document .lead { color: #736480; }
.effective { color: #857792; }
.document section a { color: #6550b7; }
.shortcuts div { background: #ffffffb8; border-color: #e1ddeb; box-shadow: var(--shadow); }
.shortcuts kbd { color: #7a60bc; }
.contact-box { background: linear-gradient(120deg, #eee6f9, #e5f3f6); border: 1px solid #fff; border-radius: 18px; }
.skip { background: #6550cf; color: #fff; }
@media(max-width:900px) {
  .features { gap: 18px; }
  .features article { padding: 22px; }
}
@media(max-width:600px) {
  body { background: radial-gradient(ellipse 130% 600px at 0 100px, #e9e2ffa8, transparent 75%), radial-gradient(ellipse 100% 600px at 100% 800px, #dcf3f5a8, transparent 75%), var(--bg); }
  .desktop { border-radius: 16px; }
  .features { gap: 16px; }
  .features article { padding: 25px; border-radius: 18px; }
  .scene-card, .settings-demo, .release { border-radius: 18px; }
}
@media(prefers-reduced-transparency:reduce) {
  .language, .floating-label, .overlay-tags span, .features article, .scene-card, .settings-demo, .work-window { backdrop-filter: none; background-color: #fff; }
}
@media(forced-colors:active) {
  .hero h1 .prism-text { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
}