/* Daylight: luminous surfaces, vivid color, and the original Modern Soft logo. */
:root {
  --bg: #fdfefe;
  --panel: #fff;
  --ink: #18345a;
  --muted: #5c6e89;
  --line: rgba(65, 104, 157, .14);
  --blue: #2b67e9;
  --cyan: #058baf;
  --purple: #8658dc;
  color-scheme: light;
}
body { background: var(--bg); overflow-x: clip; }
::selection { color: #fff; background: #3474eb; }
.reading-progress { height: 3px; background: linear-gradient(90deg, #9a68ed, #2e77ed, #19b9c1); box-shadow: none; }
.skip-link { color: #fff; border-radius: 12px; }
.brand img { filter: none; opacity: 1; }
.header { background: #ffffff80; border-color: #819bb71c; }
.header.scrolled { background: #ffffffec; box-shadow: 0 4px 25px #23496908; }
.header nav a { color: #536b8a; }
.header nav a:hover, .header nav a.active { color: #205bce; }
.header nav a.active::after { box-shadow: none; border-radius: 4px; }
.nav-cta { border-color: #2c67e92c; background: #fff9; color: #2863d5; border-radius: 12px; }
.nav-cta:hover { border-color: #2c67e99c; background: #eaf2ff; }
.icon-button { color: #557195; }
.menu-toggle span { background: #244b7c; }
.hero {
  background:
    radial-gradient(ellipse at 13% 28%, #d8eaff99, transparent 40%),
    radial-gradient(ellipse at 42% 69%, #e3dcff85, transparent 35%),
    radial-gradient(ellipse at 2% 94%, #c7f4f180, transparent 35%),
    linear-gradient(135deg, #f6fbff, #ffffff 67%, #fff8f3);
  isolation: isolate;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 800px;
  height: 800px;
  top: 6%;
  left: -12%;
  border-radius: 50%;
  background: conic-gradient(from 40deg, #80dcf733, #99bafc28, #c6a4f538, #ffd1ba20, #80dcf733);
  filter: blur(52px);
  animation: daylight-drift 28s linear infinite;
}
@keyframes daylight-drift { to { transform: rotate(360deg); } }
.hero-grid {
  opacity: .7;
  background-image: linear-gradient(#6c96c810 1px, transparent 1px), linear-gradient(90deg, #6c96c810 1px, transparent 1px);
}
.eyebrow { color: #446392; }
.hero-copy > .eyebrow { display: inline-flex; padding: 7px 14px; border: 1px solid #7c9fd225; background: #ffffffa8; border-radius: 40px; box-shadow: 0 4px 16px #3b6faa05; }
.eyebrow-line { background: #31a7c2; width: 22px; box-shadow: none; }
.hero h1 { color: #193960; }
.gradient-text {
  background-image: linear-gradient(110deg, #945ce3 2%, #5b60e1 30%, #2775e5 60%, #009baa 100%);
  background-size: 160% 100%;
  animation: color-tide 12s ease-in-out infinite alternate;
}
@keyframes color-tide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hero-description { color: #5e718f; }
.button { border-radius: 15px; }
.button.primary { background: linear-gradient(115deg, #2f77ec, #4d59de); box-shadow: 0 12px 26px #3668e62b, inset 0 1px 0 #ffffff40; }
.button.primary:hover { background: linear-gradient(115deg, #1a6cec, #6254df); box-shadow: 0 16px 38px #4c65de3b; }
.button.primary::before { border-radius: inherit; }
.text-link { color: #365b89; }
.text-link:hover { color: #2671e7; }
.play-icon { border-color: #88a3c34d; color: #3477de; background: #fff9; }
.hero-footnote { color: #6b819e; }
.tiny-cross { color: #e99061; }
.orbital-center { text-shadow: 0 6px 28px #4a78c322; }
.orbital-center > span { color: #2863c7; }
.orbital-center small { color: #527098; }
.orbital-label {
  background: #ffffffd9;
  border-color: #ffffff;
  border-radius: 16px;
  color: #305079;
  box-shadow: 0 14px 36px #5974ac13, inset 0 0 0 1px #9db6da18;
  backdrop-filter: blur(18px);
}
.orbital-label small { color: #6c83a7; }
.label-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #3679e5; background: #ecf4ff; }
.label-two .label-symbol { color: #8a5fd5; background: #f2ebff; }
.orbital-coordinate { color: #6d88b1; }
.orbit-control { border: 1px solid #799bce25; border-radius: 40px; background: #ffffffb3; color: #53729b; box-shadow: 0 8px 22px #5c7eb708; }
.orbit-control:hover { color: #2b67dc; background: #fff; }
.orbit-control-icon { color: #4a7be0; }
#orbit-number { color: #7c92b3; }
.hero-bottom { border-color: #a2b8d32d; }
.hero-bottom > span, .scroll-cue { color: #667e9d; }
.scroll-track { border-color: #7899c570; }
.scroll-track i { background: #427fe4; }
.discipline-strip { background: #fff; border-color: #a0b7d329; }
.discipline-strip .container { color: #637b9a; }
.discipline-strip i { color: #6595e3; }
.discipline-strip i:nth-of-type(2) { color: #a585df; }
.discipline-strip i:nth-of-type(3) { color: #47b7b2; }
.discipline-strip i:nth-of-type(4) { color: #eaaa80; }
.latin { color: #7288a2; }
.muted-heading { color: #7c91ad; }
.section-heading > p { color: #5e7493; }
.section-number { color: #3678e2; }
.system-toolbar { gap: 20px; border: 0; margin-bottom: 30px; }
.filters { gap: 4px; padding: 5px; border-radius: 16px; background: #edf3fb; border: 1px solid #dbe6f369; }
.filters button { padding: 11px 17px; font-size: 14px; border-radius: 11px; color: #617799; transition: background .3s, box-shadow .3s, color .3s; }
.filters button.selected { color: #2b63cb; background: #fff; box-shadow: 0 3px 12px #385e9e12; }
.filters button::after { display: none; }
.filters small { color: #7c93b4; }
.collection-label { color: #738bad; }
.system-grid { gap: 24px; }
.system-card { border-color: #dce6f0; border-radius: 25px; background: #fff; box-shadow: 0 6px 25px #30547b05; }
.system-card:hover { border-color: color-mix(in srgb, var(--card-color) 50%, #dce6f0); box-shadow: 0 22px 48px #3b66a318; }
.system-card::before { background: radial-gradient(350px circle at var(--mx,50%) var(--my,30%), color-mix(in srgb, var(--card-color) 7%, transparent), transparent 70%); }
.card-art { margin: 9px 9px 20px; border-radius: 18px; background: radial-gradient(ellipse at 62% 42%, color-mix(in srgb, var(--card-color) 20%, #fff), transparent 75%), linear-gradient(145deg, color-mix(in srgb, var(--card-color) 7%, #fff), #f6faff); }
.card-art::after { opacity: .25; }
.card-grid { background-image: linear-gradient(#598cc112 1px,transparent 1px),linear-gradient(90deg,#598cc112 1px,transparent 1px); }
.product-symbol { filter: drop-shadow(-9px 20px 16px color-mix(in srgb, var(--card-color) 19%, transparent)); }
.product-symbol::before, .product-symbol::after { background: linear-gradient(145deg, color-mix(in srgb, var(--card-color) 27%, #fff), #fff9); border-color: #ffffffc7; }
.product-symbol::before { opacity: .55; }
.product-symbol::after { opacity: .85; }
.product-symbol > span { background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--card-color) 14%, white)); border: 1px solid #fff; color: color-mix(in srgb, var(--card-color) 72%, #214170); box-shadow: inset 0 2px 8px #fff, 0 0 0 1px #ffffff66; }
.card-art-label { color: #6c88ac; }
.card-number { color: #8a9cba; }
.card-category { color: #657da0; }
.card-copy p { color: #617593; }
.card-copy h3 { color: #234467; }
.card-footer { border-color: #dfE8f2; }
.card-footer button { color: #326bc9; }
.card-footer button:hover { color: #734dc9; }
.card-footer .card-pdf { color: #6d84a4; }
.card-footer .card-pdf:hover { color: #2a6dd9; }
.systems-bottom p { color: #687e9c; }
.systems-bottom .text-link { color: #3272d8; }
.approach { background: radial-gradient(ellipse at 22% 48%, #deefff 0, transparent 45%), radial-gradient(ellipse at 73% 60%, #f0e8ff7a, transparent 40%), #f4f8fe; border-color: #e5edf7; }
.approach-copy > p { color: #667c9b; }
.story-step { opacity: .52; }
.story-step.current { opacity: 1; }
.story-step > span { color: #4380db; background: #fff; border-color: #d7e5f6; border-radius: 10px; }
.story-step.current > span { color: #fff; border-color: transparent; background: linear-gradient(130deg, #3190e4, #7a69e2); box-shadow: 0 5px 18px #5c8ce334; }
.story-step small { color: #7084a3; }
.connection-scene::before, .connection-scene::after { border-color: #5b94df22; }
.connection-hub { color: #fff; background: linear-gradient(145deg, #359ce9, #615edb); border-color: #fff; box-shadow: 0 16px 40px #4a7acb36, 0 0 0 9px #ffffff8a; }
.connection-hub small { color: #edf6ff; }
.connection-node { background: #fffffff2; color: #46628c; border-color: #b7cee94d; border-radius: 13px; box-shadow: 0 8px 25px #6382b50f; }
.connection-node > span { color: #4783e2; }
.connection-node:nth-of-type(3n) > span { color: #9a68d6; }
.scene-caption { color: #738bb0; }
.scene-progress { background: #bad0ee6b; }
.scene-progress span { background: #5b8be1; }
.featured-brochure { background: radial-gradient(ellipse at 40% 35%, #dbf0ff, transparent 65%), linear-gradient(135deg, #eff7ff, #f1eaff); border-color: #dbe7f6; border-radius: 28px; }
.book-kicker { color: #7392bb; }
.book-object { box-shadow: -18px 26px 45px #4563933b; }
.book-halo { border-color: #82a5e32b; }
.book-halo::before, .book-halo::after { border-color: #83a8dd20; }
.book-caption { color: #5a7aa6; }
.book-caption > span:last-child { color: #5789dc; }
.library-row { border-color: #dfe8f3; }
.library-row:first-child { border-color: #dfe8f3; }
.library-row:hover { background: #f0f6ff; }
.library-row > a { padding-inline: 12px; }
.library-name { color: #395a84; }
.library-row .library-index { color: #8ba1bd; }
.library-row .file-type { color: #7b94b4; background: #f0f5fc; border-radius: 7px; padding: 6px 8px; }
.download-icon { color: #5388db; }
.closing { border-radius: 32px; border-color: #d2e3fa; background: radial-gradient(ellipse at 19% 30%, #dbe5ffb3, transparent 48%), radial-gradient(ellipse at 95% 100%, #e6f8ff, transparent 58%), linear-gradient(120deg, #eff6ff, #f3eeff); box-shadow: 0 20px 70px #7897d00d; }
.closing h2 { color: #284b77; }
.closing p { color: #637c9e; }
.closing-word { -webkit-text-stroke-color: #82a1d54d; }
.closing-rings i { border-color: #608de51f; }
.footer-top p { color: #7489a5; }
.back-top { color: #567398; }
.back-top span { border-color: #dbe7f5; background: #f3f7fe; border-radius: 11px; }
.footer-bottom { color: #7990ae; }
.footer-motion { color: #6684aa; }
dialog { border-color: #fff; border-radius: 25px; background: #fff; color: #24466f; box-shadow: 0 30px 120px #324e8140; }
dialog::backdrop { background: #6984b146; backdrop-filter: blur(13px); }
.dialog-close { color: #557297; }
.detail-copy p { color: #617c9e; }
.detail-category { color: #3e79cd; }
.detail-note { color: #7a8dab; }
.detail-cover { border-radius: 5px; box-shadow: 0 12px 28px #3c567b1a; }
.finder-intro { color: #6c83a1; }
.finder-options > button { border-color: #dce7f5; border-radius: 16px; background: #f7faff; }
.finder-options > button:hover, .finder-options > button.selected { border-color: #8fb4ed; background: #ecf3ff; }
.finder-options > button > span { color: #6592da; }
.finder-options small { color: #6983a8; }
.finder-options b { color: #7597c3; }
.finder-result-list > p { color: #4a75b4; }
.finder-result-list button span:last-child { color: #4f85d9; }
.finder-result-list button:hover { color: #2566cd; }
.noscript-note { background: #eef5ff; color: #355582; }
@media(max-width:820px) {
  .system-grid { gap: 18px; }
  .filters button { padding-inline: 14px; }
}
@media(max-width:640px) {
  .header nav { background: #ffffffed; border-color: #dce7f5; box-shadow: 0 15px 22px #6180aa12; }
  .hero { background: radial-gradient(ellipse at 20% 75%, #e3e8ff, transparent 55%), radial-gradient(ellipse at 100% 32%, #e4f7ff9e, transparent 50%), #fcfdff; }
  .hero::before { top: 34%; width: 500px; height: 500px; left: -45%; filter: blur(38px); }
  .hero-copy > .eyebrow { padding: 6px 12px; font-size: 11px; }
  .hero h1 { margin-top: 20px; }
  .hero-actions .button { border-radius: 13px; }
  .orbital-label { border-radius: 12px; }
  .label-symbol { width: 28px; height: 28px; border-radius: 8px; }
  .system-toolbar { margin-left: -8px; padding-bottom: 4px; }
  .filters { border-radius: 13px; gap: 2px; }
  .filters button { font-size: 12px; padding: 9px 11px; }
  .system-card { border-radius: 23px; }
  .card-art { margin: 8px 8px 18px; }
  .story-step { opacity: .52; }
  .story-step > span { display: inline-block; padding: 4px 8px; border-radius: 7px; }
  .story-step.current > span { box-shadow: none; }
  .connection-node { border-radius: 10px; }
  .featured-brochure { border-radius: 23px; }
  .closing { border-radius: 25px; }
  .closing-word { opacity: .6; }
  .finder-options > button { border-radius: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero::before, .gradient-text { animation: none; }
}