:root {
  color-scheme: light;
  --navy: #101b34;
  --navy-deep: #09142a;
  --navy-mid: #172644;
  --blue: #176cf1;
  --cyan: #14bad3;
  --gold: #efb532;
  --green: #1dbd82;
  --violet: #8155ec;
  --ink: #18243c;
  --muted: #71809a;
  --line: #e5ebf4;
  --paper: #ffffff;
  --canvas: #f5f8fd;
  --shadow: 0 12px 36px rgba(32, 55, 94, .075);
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-layout { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 244px;
  padding: 20px 14px 16px;
  overflow-y: auto;
  color: #e8eefb;
  background:
    radial-gradient(260px 250px at 10% 90%, rgba(21, 120, 213, .15), transparent 70%),
    linear-gradient(180deg, #101b34 0%, #111d38 56%, #0c1730 100%);
  box-shadow: 7px 0 28px rgba(12, 25, 50, .08);
}
.brand { display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 1px 5px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .17); border-radius: 13px; background: rgba(255, 255, 255, .08); }
.brand-mark img { width: 35px; height: 35px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { font: 700 18px/1.05 "Space Grotesk", sans-serif; letter-spacing: -.55px; color: #fff; }
.brand-copy small { color: #91a9d2; font-size: 9px; font-weight: 700; letter-spacing: 1.65px; }
.sidebar-tagline { margin: 13px 4px 23px 56px; color: #d2dced; font-size: 12px; line-height: 1.6; }
.sidebar-tagline span { color: #90a6c8; }
.nav-label { margin: 0 11px 8px; color: #8192b3; font-size: 9px; font-weight: 700; letter-spacing: 1.65px; }
.nav-label-spaced { margin-top: 24px; }
.side-nav { display: grid; gap: 4px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 11px; border: 1px solid transparent; border-radius: 10px; color: #c8d3e7; font-size: 12px; font-weight: 600; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-link > svg { width: 17px; height: 17px; flex: 0 0 auto; color: #8fa3c7; }
.nav-link:hover { background: rgba(255, 255, 255, .075); color: white; transform: translateX(2px); }
.nav-link:hover > svg { color: #c9ddff; }
.nav-link.is-active { border-color: rgba(139, 188, 255, .14); color: white; background: linear-gradient(105deg, #176cf1, #167ee4); box-shadow: 0 7px 18px rgba(13, 101, 224, .25); }
.nav-link.is-active > svg { color: white; }
.nav-current { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: white; box-shadow: 0 0 0 4px rgba(255,255,255,.16); }
.nav-count { display: grid; place-items: center; width: 19px; height: 19px; margin-left: auto; border-radius: 7px; color: white; background: rgba(255,255,255,.12); font-size: 10px; }
.live-dot, .live-indicator { position: relative; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #29d49a; box-shadow: 0 0 0 4px rgba(41, 212, 154, .12); }
.sidebar-spacer { min-height: 24px; flex: 1; }
.sidebar-feature { position: relative; overflow: hidden; padding: 15px 13px 13px; border: 1px solid rgba(162, 194, 241, .18); border-radius: 14px; background: linear-gradient(145deg, rgba(31, 56, 100, .82), rgba(16, 34, 69, .76)); }
.sidebar-feature::after { position: absolute; right: -38px; top: -48px; width: 136px; height: 136px; border: 1px solid rgba(229, 177, 64, .24); border-radius: 50%; content: ""; box-shadow: 0 0 0 12px rgba(229,177,64,.035), 0 0 0 26px rgba(229,177,64,.025); }
.feature-sun { position: relative; z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; margin: 0 0 12px; border: 1px solid rgba(255, 209, 110, .5); border-radius: 9px; color: #ffd16e; background: rgba(255, 197, 73, .1); font-size: 18px; }
.eyebrow { margin: 0 0 7px; color: #8392aa; font-size: 9px; font-weight: 700; letter-spacing: 1.55px; }
.sidebar-feature .eyebrow { position: relative; z-index: 1; color: #a9bddb; font-size: 8px; letter-spacing: 1.2px; }
.sidebar-feature h2 { position: relative; z-index: 1; margin: 0 0 7px; color: white; font: 600 17px/1.16 "Space Grotesk", sans-serif; letter-spacing: -.4px; }
.sidebar-feature > p:not(.eyebrow) { position: relative; z-index: 1; margin: 0 0 13px; color: #b5c4db; font-size: 11px; line-height: 1.45; }
.side-cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; border-radius: 8px; color: white; background: #146bf0; font-size: 10px; font-weight: 700; transition: background .2s ease; }
.side-cta:hover { background: #3282ff; }
.side-cta svg { width: 14px; height: 14px; }
.sidebar-home { margin: 14px 4px 0; color: #90a2c2; font-size: 10px; transition: color .15s ease; }
.sidebar-home:hover { color: white; }

.workspace { min-width: 0; min-height: 100vh; margin-left: 244px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px; padding: 10px clamp(20px, 3vw, 42px); border-bottom: 1px solid #e8edf5; background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px); }
.search { display: flex; align-items: center; gap: 11px; width: min(100%, 418px); min-height: 39px; padding: 0 10px 0 12px; border: 1px solid #e4eaf3; border-radius: 9px; background: #f8faff; color: #8190a8; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.search:focus-within { border-color: #9dc2fc; background: white; box-shadow: 0 0 0 3px rgba(23, 108, 241, .09); }
.search > svg { width: 17px; height: 17px; flex: 0 0 auto; color: #7184a4; }
.search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.search input::placeholder { color: #8190a8; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search kbd { flex: 0 0 auto; padding: 4px 5px; border: 1px solid #e6ebf3; border-radius: 5px; color: #77859d; background: white; font: 10px/1 "DM Sans", sans-serif; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; color: white; background: linear-gradient(100deg, #126af2, #0786e8); box-shadow: 0 6px 13px rgba(14, 107, 232, .18); cursor: pointer; font-size: 11px; font-weight: 700; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.primary-button svg { width: 15px; height: 15px; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(14, 107, 232, .26); filter: saturate(1.1); }
.primary-button:active { transform: translateY(0); }
.icon-button { display: grid; place-items: center; width: 37px; height: 37px; padding: 0; border: 1px solid transparent; border-radius: 10px; color: #4e5e78; background: transparent; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover { border-color: #e4eaf3; color: var(--blue); background: #f7f9fd; }
.notification-wrap { position: relative; }
.notification-button { position: relative; }
.notification-dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border: 1.5px solid white; border-radius: 50%; background: #f15e81; }
.notification-panel { position: absolute; top: calc(100% + 13px); right: -38px; z-index: 25; width: min(300px, calc(100vw - 32px)); padding: 18px; border: 1px solid #e4eaf3; border-radius: 14px; background: white; box-shadow: 0 18px 48px rgba(26, 47, 79, .16); animation: pop-in .16s ease-out; }
.notification-panel[hidden] { display: none; }
.notification-panel strong { display: block; margin: 0 0 7px; color: var(--ink); font: 600 15px/1.3 "Space Grotesk", sans-serif; }
.notification-panel p:not(.eyebrow) { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.notification-panel a { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 11px; font-weight: 700; }
.notification-panel a svg { width: 14px; height: 14px; }
.profile-link { display: flex; align-items: center; gap: 9px; padding: 2px 0 2px 5px; }
.profile-avatar { display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border: 1px solid #ded5bb; border-radius: 50%; background: #fff8e5; box-shadow: 0 0 0 3px #f5f7fb; }
.profile-avatar img { width: 29px; height: 29px; object-fit: contain; }
.profile-copy { display: flex; flex-direction: column; gap: 2px; }
.profile-copy strong { color: #29364e; font-size: 11px; line-height: 1.1; }
.profile-copy small { color: #8792a5; font-size: 9px; }
.profile-chevron { width: 13px; height: 13px; margin-left: 3px; color: #64738a; }
.mobile-menu { display: none; }
.menu-glyph { display: grid; gap: 4px; width: 17px; }
.menu-glyph i { height: 1.5px; border-radius: 2px; background: currentColor; }

.main-content { width: min(100%, 1700px); margin: 0 auto; padding: 23px clamp(20px, 3vw, 42px) 28px; }
.hero-panel { position: relative; display: flex; align-items: center; min-height: 292px; overflow: hidden; padding: 34px 39px; border-radius: 18px; color: white; background: linear-gradient(112deg, #0a1932 0%, #102b53 51%, #0c3d70 100%); isolation: isolate; box-shadow: 0 16px 35px rgba(8, 35, 74, .15); }
.hero-panel::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 69% 15%, rgba(31, 140, 237, .3), transparent 36%), radial-gradient(ellipse at 86% 100%, rgba(235, 177, 56, .17), transparent 34%), linear-gradient(180deg, transparent 63%, rgba(3, 11, 27, .28)); content: ""; }
.hero-panel::after { position: absolute; z-index: -1; top: -150px; right: 18%; width: 410px; height: 410px; border: 1px solid rgba(117, 200, 255, .12); border-radius: 50%; box-shadow: 0 0 0 24px rgba(93, 189, 255, .025), 0 0 0 48px rgba(93, 189, 255, .025), 0 0 0 72px rgba(93, 189, 255, .02); content: ""; }
.hero-copy { position: relative; z-index: 2; width: min(58%, 590px); }
.hero-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; color: #aec7ed; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.kicker-star { color: #f3be4d; font-size: 14px; }
.hero-copy h1 { margin: 0 0 10px; color: #fff; font: 700 clamp(29px, 3vw, 43px)/1.06 "Space Grotesk", sans-serif; letter-spacing: -1.55px; }
.hero-copy h1 span { color: #54bdff; text-shadow: 0 5px 26px rgba(39, 169, 247, .24); }
.hero-copy > p { max-width: 505px; margin: 0; color: #ccdbef; font-size: 12px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.hero-primary, .hero-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 39px; padding: 0 14px; border-radius: 9px; font-size: 11px; font-weight: 700; transition: transform .15s ease, background .15s ease; }
.hero-primary { color: white; background: linear-gradient(100deg, #1670f6, #0789e8); box-shadow: 0 7px 18px rgba(6, 111, 244, .24); }
.hero-primary:hover { color: white; transform: translateY(-2px); background: linear-gradient(100deg, #3183ff, #13a1ff); }
.hero-primary svg { width: 15px; height: 15px; }
.hero-secondary { border: 1px solid rgba(212, 229, 251, .37); color: #e8f0fc; background: rgba(255,255,255,.055); cursor: pointer; }
.hero-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,.13); }
.hero-secondary svg { width: 14px; height: 14px; }
.hero-footnote { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: #9cb1ce; font-size: 9px; }
.hero-footnote .live-indicator { width: 6px; height: 6px; margin: 0; }
.hero-art { position: absolute; inset: 0 0 0 52%; overflow: hidden; }
.hero-art::before { position: absolute; right: -7%; bottom: -65%; width: 79%; aspect-ratio: 1; border: 1px solid rgba(72, 178, 255, .18); border-radius: 50%; background: radial-gradient(circle at 40% 26%, rgba(34, 114, 193, .42), rgba(6, 23, 49, .18) 65%); content: ""; box-shadow: inset 0 20px 60px rgba(60, 172, 255, .1), 0 0 0 17px rgba(99, 198, 255, .035), 0 0 0 35px rgba(99, 198, 255, .025); }
.sun-halo { position: absolute; top: 50%; left: 50%; width: 194px; height: 194px; margin: -97px 0 0 -97px; border: 1px solid rgba(249, 204, 111, .4); border-radius: 50%; box-shadow: 0 0 42px rgba(248, 181, 51, .1), inset 0 0 30px rgba(21, 141, 250, .14); }
.halo-b { width: 233px; height: 233px; margin: -116px 0 0 -116px; border-color: rgba(109, 197, 255, .23); transform: rotateX(68deg) rotate(-22deg); }
.sun-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 112px; height: 112px; margin: -56px 0 0 -56px; overflow: hidden; border: 1px solid rgba(255, 218, 133, .6); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c0 0, #eeb947 36%, #9a6726 73%, #172c4a 100%); box-shadow: 0 0 0 7px rgba(246, 197, 83, .075), 0 0 50px rgba(251, 185, 57, .32), inset 0 1px 15px rgba(255,255,255,.42); }
.sun-core img { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(19,28,47,.24)); }
.hero-star { position: absolute; z-index: 2; color: #ffdb7e; text-shadow: 0 0 17px rgba(255,210,108,.9); }
.star-a { top: 18%; left: 58%; font-size: 18px; }.star-b { right: 9%; top: 40%; color: #65cfff; font-size: 17px; }.star-c { bottom: 15%; left: 72%; color: #b5ddff; font-size: 12px; }
.orbit-chip { position: absolute; z-index: 3; display: flex; flex-direction: column; min-width: 108px; padding: 9px 11px; border: 1px solid rgba(192, 221, 255, .2); border-radius: 11px; color: #eff6ff; background: rgba(9, 27, 55, .83); box-shadow: 0 8px 20px rgba(3, 12, 28, .16); backdrop-filter: blur(8px); }
.orbit-chip strong { font-size: 10px; }.orbit-chip small { margin-top: 2px; color: #9eb4d3; font-size: 8px; }.chip-live { top: 17%; right: 16%; }.chip-forum { bottom: 14%; right: 11%; }.chip-tools { top: 59%; left: 1%; }
.chip-pulse { position: absolute; right: 10px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #3edb9c; box-shadow: 0 0 0 4px rgba(62, 219, 156, .11); }
.chip-icon { display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 5px; border-radius: 7px; color: #7ec7ff; background: rgba(71, 160, 245, .15); }.chip-icon svg { width: 14px; height: 14px; }
.orbit-line { position: absolute; top: 49%; left: 50%; z-index: -1; width: 175px; border-top: 1px dashed rgba(139, 205, 255, .35); transform: rotate(24deg); }.line-b { width: 154px; transform: rotate(-31deg); }
.hero-note { position: absolute; z-index: 2; right: 23px; bottom: 15px; color: #a5bad6; font: italic 10px/1.45 "Space Grotesk", sans-serif; text-align: right; transform: rotate(-4deg); }.hero-note span { color: #efc061; font-size: 8px; letter-spacing: 1.5px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 15px; }
.stat-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 83px; overflow: hidden; padding: 13px 14px; border: 1px solid #e6ecf5; border-radius: 12px; background: white; box-shadow: 0 4px 14px rgba(30, 54, 89, .035); }
.stat-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }.stat-icon svg { width: 20px; height: 20px; }
.icon-cyan { color: #097ebc; background: linear-gradient(145deg, #d8f6ff, #b9eafe); }.icon-violet { color: #7050df; background: linear-gradient(145deg, #eee4ff, #dbcaff); }.icon-gold { color: #ca8616; background: linear-gradient(145deg, #fff1d1, #ffe0a0); }.icon-green { color: #0caa75; background: linear-gradient(145deg, #d8f8ea, #b9efd6); }
.stat-copy { position: relative; z-index: 1; min-width: 0; }.stat-copy p { margin: 0 0 1px; color: #64718a; font-size: 9px; font-weight: 600; }.stat-copy strong { display: block; color: #142440; font: 700 24px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.7px; }.stat-copy strong span { color: #7d8ba3; font-size: 15px; }.stat-copy small { display: block; margin-top: 3px; color: #98a3b4; font-size: 8px; }
.stat-spark { position: absolute; right: 8px; bottom: -10px; font: 70px/1 "Space Grotesk", sans-serif; opacity: .13; transform: rotate(-16deg); }.spark-cyan { color: #13abd5; }.spark-violet { color: #8557ee; }.spark-gold { color: #eaaa2f; }.spark-green { color: #1abe84; }

.content-section { padding-top: 32px; }
.section-heading, .panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0 0 15px; }
.section-heading h2, .panel-heading h2 { margin: 0; color: #172541; font: 700 20px/1.18 "Space Grotesk", sans-serif; letter-spacing: -.6px; }
.section-subtitle { margin: 5px 0 0; color: #7f8ba0; font-size: 10px; line-height: 1.45; }
.text-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 2px; color: #1468e8; font-size: 10px; font-weight: 700; white-space: nowrap; transition: gap .15s ease; }.text-link:hover { gap: 10px; }.text-link svg { width: 14px; height: 14px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid #e5eaf3; border-radius: 13px; background: white; box-shadow: 0 5px 17px rgba(30, 54, 89, .045); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; animation: card-in .3s ease both; }
.project-card:hover { transform: translateY(-3px); border-color: #c5dafb; box-shadow: 0 14px 28px rgba(34, 68, 117, .1); }
.project-card[hidden] { display: none; }
.project-art { position: relative; display: flex; align-items: center; justify-content: center; height: 111px; overflow: hidden; isolation: isolate; }
.project-art::before { position: absolute; z-index: -1; inset: 0; content: ""; }
.project-body { display: flex; flex-direction: column; min-height: 158px; padding: 11px 13px 13px; }
.project-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.project-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }.project-icon svg { width: 14px; height: 14px; }.p-icon-blue { color: #3478e8; background: #e6f0ff; }.p-icon-cyan { color: #0e9cbf; background: #def7fc; }.p-icon-green { color: #12a879; background: #ddf7ed; }.p-icon-violet { color: #7c55de; background: #f0eaff; }.p-icon-gold { color: #c6881e; background: #fff4dc; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 700; white-space: nowrap; }.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status-preview { color: #2870d9; background: #eaf2ff; }.status-live { color: #07986a; background: #e3f8ee; }.status-open { color: #0b9b69; background: #e3f8ee; }.status-library { color: #7650d2; background: #f1ebff; }.status-tool { color: #0c94b5; background: #e1f7fb; }.status-realm { color: #b5811e; background: #fff3dc; }.status-custom { color: #6255d9; background: #efedff; }
.project-body h3 { margin: 0 0 5px; color: #1b2944; font: 700 13px/1.25 "Space Grotesk", sans-serif; letter-spacing: -.1px; }.project-body p { min-height: 31px; margin: 0; color: #7a879a; font-size: 9px; line-height: 1.5; }
.project-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.project-tags span { padding: 4px 7px; border-radius: 5px; color: #586a86; background: #f1f5fa; font-size: 8px; font-weight: 600; }
.project-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 11px; color: #1769e5; font-size: 9px; font-weight: 700; }.project-link svg { width: 14px; height: 14px; transition: transform .15s ease; }.project-link:hover svg { transform: translateX(3px); }
.empty-state { margin: 14px 0 0; padding: 24px; border: 1px dashed #ccd6e5; border-radius: 11px; color: #72819a; background: rgba(255,255,255,.6); font-size: 12px; text-align: center; }

/* Project artwork is drawn locally so the dashboard stays lightweight. */
.art-fairplay { color: #e9f0ff; background: radial-gradient(ellipse at 50% 30%, #264f83 0, #142743 51%, #101b30 100%); }.art-fairplay::before { background: linear-gradient(110deg, transparent 0 30%, rgba(70, 189, 255, .18) 30.3%, transparent 31%), linear-gradient(165deg, transparent 0 64%, rgba(230, 183, 68, .15) 64.4%, transparent 65%); }.art-orb { position: absolute; width: 57px; height: 57px; border: 1px solid rgba(88, 208, 255, .5); border-radius: 50%; box-shadow: inset 0 0 20px rgba(54,163,245,.2), 0 0 22px rgba(54,163,245,.18); }.art-orb.orb-one { left: 25%; top: 20%; }.art-orb.orb-two { right: 25%; bottom: 12%; width: 34px; height: 34px; border-color: rgba(246,194,91,.45); }.art-word { position: relative; color: #fff; font: 700 22px/.8 "Space Grotesk", sans-serif; letter-spacing: 4px; text-align: center; text-shadow: 0 4px 15px #071020; }.art-caption { position: absolute; right: 13px; bottom: 10px; color: #9dbce4; font-size: 7px; font-weight: 700; letter-spacing: 1.6px; }
.art-news { color: #f5fbff; background: linear-gradient(120deg, #082d50, #0b5992 59%, #052341); }.art-news::before { background: repeating-linear-gradient(0deg, transparent 0 25px, rgba(144,211,255,.075) 26px), linear-gradient(90deg, transparent, rgba(45,181,245,.13)); }.news-sun { position: absolute; right: 22%; top: 19px; width: 54px; height: 54px; border: 1px solid rgba(255,207,104,.78); border-radius: 50%; background: radial-gradient(circle, #ffe79e 0 8%, rgba(235,174,61,.54) 28%, rgba(38,142,218,.08) 70%); box-shadow: 0 0 28px rgba(255,192,83,.3); }.news-line { position: absolute; right: 0; width: 65%; height: 1px; background: rgba(117,205,247,.4); transform: rotate(-10deg); }.line-one { top: 44px; }.line-two { top: 59px; right: 12%; opacity: .5; }.line-three { top: 75px; right: -12%; opacity: .35; }.news-label { position: absolute; top: 12px; left: 14px; color: #cdeaff; font-size: 7px; font-weight: 700; letter-spacing: 1.25px; }.news-label b { margin-left: 5px; padding: 3px 4px; border-radius: 3px; color: white; background: #ed4d5f; font-size: 6px; }.news-chart { position: absolute; right: 14px; bottom: 8px; color: #74efc0; font: 15px/1 "Space Grotesk", sans-serif; letter-spacing: 2px; text-shadow: 0 0 9px rgba(116,239,192,.45); }
.art-garden { color: #f2e2be; background: radial-gradient(ellipse at 50% 105%, #27635d 0, #123e48 50%, #112941 100%); }.art-garden::before { background: radial-gradient(ellipse at 50% 103%, transparent 0 29%, rgba(122,213,154,.14) 30% 30.5%, transparent 31%), linear-gradient(160deg, transparent 30%, rgba(26,109,98,.4)); }.garden-moon { position: absolute; top: 17px; right: 29px; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff5cf, #e9bd67 63%, rgba(233,189,103,.05) 68%); box-shadow: 0 0 26px rgba(230,190,112,.25); }.garden-leaf { position: absolute; color: rgba(122,226,182,.7); font-size: 21px; }.leaf-one { left: 22%; bottom: 20px; }.leaf-two { right: 17%; top: 25px; color: #a6d5d1; font-size: 15px; }.garden-frog { position: absolute; left: 34%; top: 21px; display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid rgba(195,234,137,.8); border-radius: 48% 48% 45% 45%; color: #173e3b; background: radial-gradient(circle at 40% 32%, #e6f79b, #8cbd52 53%, #41794e 100%); box-shadow: 0 8px 20px rgba(3,17,25,.28), 0 0 0 6px rgba(161,209,110,.08); font-size: 23px; }.garden-title { position: absolute; left: 15px; bottom: 16px; color: #f5e7bd; font: 700 15px/1 "Space Grotesk", sans-serif; letter-spacing: 1px; }.garden-title i { color: #ddbd70; font-style: normal; }.garden-caption { position: absolute; right: 12px; bottom: 10px; color: #a8c5b4; font-size: 6px; letter-spacing: 1px; }
.art-reader { color: #f0eaff; background: radial-gradient(circle at 50% 47%, #34245e, #151735 65%, #10162b); }.reader-ring { position: absolute; left: 50%; top: 47%; width: 80px; height: 80px; margin: -40px; border: 1px solid rgba(169,135,255,.48); border-radius: 50%; }.ring-a { transform: scaleX(.57) rotate(30deg); }.ring-b { transform: scaleX(.57) rotate(-30deg); border-color: rgba(255,208,116,.43); }.reader-book { position: absolute; top: 21px; left: calc(50% - 18px); display: flex; width: 36px; height: 45px; transform: perspective(80px) rotateY(-9deg); filter: drop-shadow(0 6px 6px rgba(8,9,24,.3)); }.reader-book span { width: 50%; border: 1px solid rgba(255,223,150,.6); background: linear-gradient(140deg, #f8d48a, #9f6e34); }.reader-book span:first-child { border-radius: 4px 0 0 4px; }.reader-book span:last-child { border-radius: 0 4px 4px 0; background: linear-gradient(140deg, #d5a958, #744b50); }.reader-count { position: absolute; left: 13px; top: 12px; color: #f7d98d; font: 700 13px "Space Grotesk", sans-serif; }.reader-count small { display: block; margin-top: 1px; color: #a99dc9; font: 6px "DM Sans", sans-serif; letter-spacing: 1px; }.reader-title { position: absolute; right: 12px; bottom: 11px; color: #d7ccf7; font-size: 7px; font-weight: 700; letter-spacing: 1.4px; line-height: 1.3; text-align: right; }
.art-breath { background: radial-gradient(circle at 52% 43%, #273361, #151d3c 53%, #10182e); }.art-breath::before { background: radial-gradient(ellipse at 50% 50%, rgba(110,115,231,.18), transparent 45%); }.breath-loop { position: absolute; left: 50%; top: 45%; width: 92px; height: 44px; margin: -22px -46px; border: 1px solid rgba(89,221,255,.65); border-radius: 50%; box-shadow: 0 0 18px rgba(89,221,255,.12); }.loop-a { transform: rotate(55deg) scaleY(.66); }.loop-b { transform: rotate(-55deg) scaleY(.66); border-color: rgba(226,143,255,.6); }.breath-orb { position: absolute; left: 50%; top: 45%; width: 36px; height: 36px; margin: -18px; border-radius: 50%; background: radial-gradient(circle at 33% 30%, #f1ffff, #65e3ef 34%, #725bd5 73%, transparent); box-shadow: 0 0 23px rgba(103,212,255,.65); animation: breathe 4.2s ease-in-out infinite; }.breath-word { position: absolute; right: 14px; bottom: 11px; color: #abb9df; font-size: 7px; font-weight: 700; letter-spacing: 1.3px; }.breath-word i { color: #67d8f2; font-style: normal; }
.art-wow { color: #f7e5b4; background: radial-gradient(ellipse at 50% 125%, #79633c, #26334b 54%, #152237); }.art-wow::before { background: linear-gradient(135deg, rgba(255,212,116,.13), transparent 47%), repeating-linear-gradient(155deg, transparent 0 35px, rgba(232,197,120,.05) 36px); }.wow-sigil { position: absolute; left: calc(50% - 28px); top: 13px; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid rgba(238,197,109,.85); border-radius: 50%; color: #f7d782; background: rgba(17,29,47,.68); box-shadow: 0 0 0 5px rgba(243,200,102,.1), 0 0 22px rgba(243,200,102,.18); font: 700 34px "Cinzel", Georgia, serif; }.wow-stars { position: absolute; top: 12px; left: 16px; color: #e9cc8a; font-size: 9px; }.wow-title { position: absolute; left: 15px; bottom: 12px; color: #f8e7bd; font: 700 11px/1.05 "Space Grotesk", sans-serif; letter-spacing: 1.8px; }.wow-caption { position: absolute; right: 12px; bottom: 12px; color: #c8b587; font-size: 6px; letter-spacing: .7px; }
.art-custom { justify-content: flex-start; padding: 16px; color: #f6ebc9; background: radial-gradient(ellipse at 82% 20%, #3b6792, transparent 42%), linear-gradient(120deg, #142441, #193455 65%, #263b5a); }.art-custom::before { background: repeating-linear-gradient(150deg, transparent 0 24px, rgba(255,255,255,.055) 25px), radial-gradient(circle at 21% 50%, rgba(255,198,82,.2), transparent 17%); }.custom-mark { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 auto; border: 1px solid rgba(242,194,90,.55); border-radius: 15px; color: #ffd36e; background: rgba(236,177,59,.12); box-shadow: 0 0 23px rgba(242,194,90,.12); font-size: 25px; }.custom-art-title { max-width: calc(100% - 60px); overflow: hidden; margin-left: 12px; color: #fff; font: 600 12px/1.25 "Space Grotesk", sans-serif; text-overflow: ellipsis; }.custom-art-note { position: absolute; right: 11px; bottom: 9px; color: #a9c4e2; font-size: 6px; font-weight: 700; letter-spacing: 1.1px; }
.remove-idea { width: 100%; border: 0; text-align: left; background: transparent; cursor: pointer; font-family: inherit; }

.lower-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(285px, .85fr); gap: 14px; margin-top: 22px; }
.network-panel, .community-panel { min-width: 0; padding: 17px; border: 1px solid #e5ebf4; border-radius: 14px; background: white; box-shadow: 0 5px 17px rgba(30, 54, 89, .04); }
.panel-heading { align-items: center; margin-bottom: 12px; }.panel-heading h2 { font-size: 17px; }.panel-heading .eyebrow { margin-bottom: 5px; font-size: 8px; }.panel-heading .section-subtitle { font-size: 9px; }.panel-heading .text-link { font-size: 9px; }
.constellation { position: relative; min-height: 260px; overflow: hidden; border: 1px solid #edf1f8; border-radius: 11px; background: radial-gradient(ellipse at center, #f5f9ff, #fbfcfe 69%); }
.constellation::before { position: absolute; inset: 0; background-image: radial-gradient(#b2c9eb 1px, transparent 1px); background-size: 25px 25px; opacity: .27; content: ""; mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent); }
.constellation-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.constellation-lines path { fill: none; stroke: #bad2f4; stroke-width: 1.2; stroke-dasharray: 3 5; }.constellation-lines circle { fill: #3da7ed; stroke: #fff; stroke-width: 2; }
.constellation-node { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 128px; padding: 8px 7px; border: 1px solid #e4ebf5; border-radius: 11px; background: rgba(255,255,255,.94); box-shadow: 0 6px 16px rgba(40,75,120,.08); text-align: center; transition: transform .17s ease, border-color .17s ease; }.constellation-node:hover { transform: translateY(-3px); border-color: #9dc3f7; }.constellation-node strong { margin-top: 5px; color: #2a3a56; font: 600 9px "Space Grotesk", sans-serif; }.constellation-node small { margin-top: 3px; color: #8794a9; font-size: 7px; }.node-symbol { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #168bd0; background: #e5f6ff; }.node-symbol svg { width: 15px; height: 15px; }.node-live { top: 6%; left: 4%; }.node-forum { top: 6%; right: 4%; }.node-tools { top: 40%; left: 0; }.node-games { top: 40%; right: 0; }.node-reader { bottom: 4%; left: calc(50% - 64px); }.node-creator { top: 35%; left: calc(50% - 64px); width: 128px; border-color: #b4cff5; box-shadow: 0 9px 24px rgba(32,103,196,.13); }.node-forum .node-symbol { color: #7857df; background: #f0eaff; }.node-tools .node-symbol { color: #c88a20; background: #fff3d8; }.node-games .node-symbol { color: #13a776; background: #def8ed; }.node-reader .node-symbol { color: #805de4; background: #f0eaff; }.node-solar { display: grid; place-items: center; width: 39px; height: 39px; overflow: hidden; border: 1px solid #f0cc76; border-radius: 50%; background: #fff3d5; box-shadow: 0 0 0 5px rgba(245,194,81,.12); }.node-solar img { width: 31px; height: 31px; object-fit: contain; }
.round-link { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid #e6edf7; border-radius: 50%; color: #3776d2; background: #f7faff; transition: transform .16s ease, background .16s ease; }.round-link:hover { transform: translateX(2px); background: #eaf2ff; }.round-link svg { width: 15px; height: 15px; }
.room-list { display: grid; gap: 1px; }.room-row { display: flex; align-items: center; gap: 10px; min-height: 53px; padding: 7px 5px; border-bottom: 1px solid #edf1f6; transition: background .16s ease; }.room-row:hover { background: #f9fbff; }.room-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 3px; box-shadow: 0 0 0 4px rgba(55,155,235,.08); }.dot-cyan { background: #28b6dd; }.dot-violet { background: #9368ec; box-shadow: 0 0 0 4px rgba(147,104,236,.09); }.dot-green { background: #22bf84; box-shadow: 0 0 0 4px rgba(34,191,132,.09); }.dot-gold { background: #e6aa38; box-shadow: 0 0 0 4px rgba(230,170,56,.1); }.room-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.room-row strong { overflow: hidden; color: #2c3a53; font: 600 9px "Space Grotesk", sans-serif; text-overflow: ellipsis; white-space: nowrap; }.room-row small { overflow: hidden; color: #8a96a9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.room-arrow { margin-left: auto; color: #a2aec0; font-size: 13px; transition: color .15s ease, transform .15s ease; }.room-row:hover .room-arrow { color: #146cf1; transform: translate(2px,-2px); }
.community-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 35px; margin-top: 12px; border-radius: 8px; color: #0f64df; background: #eaf2ff; font-size: 9px; font-weight: 700; transition: background .15s ease; }.community-cta:hover { background: #ddeaff; }.community-cta svg { width: 14px; height: 14px; }

.path-section { padding-top: 27px; }.path-section .section-heading { margin-bottom: 12px; }.path-section .section-heading h2 { font-size: 18px; }.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }.path-card { position: relative; display: flex; align-items: center; gap: 11px; min-height: 71px; overflow: hidden; padding: 12px; border: 1px solid #e5ebf4; border-radius: 11px; background: white; transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }.path-card:hover { transform: translateY(-2px); border-color: #c7dcfa; box-shadow: 0 9px 20px rgba(38,72,116,.08); }.path-number { position: absolute; top: 6px; right: 9px; color: #e6ebf3; font: 700 18px "Space Grotesk", sans-serif; }.path-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 10px; color: #1781d2; background: #e8f5ff; }.path-icon svg { width: 17px; height: 17px; }.path-two .path-icon { color: #7955df; background: #f0eaff; }.path-three .path-icon { color: #11a878; background: #e0f8ed; }.path-copy { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; gap: 4px; }.path-copy strong { color: #293750; font: 600 10px "Space Grotesk", sans-serif; }.path-copy small { color: #8491a5; font-size: 8px; line-height: 1.35; }.path-arrow { width: 15px; height: 15px; flex: 0 0 auto; margin-left: auto; color: #9aa8bc; transition: transform .15s ease, color .15s ease; }.path-card:hover .path-arrow { transform: translateX(3px); color: #176cf1; }
.page-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 27px; padding-top: 16px; border-top: 1px solid #e5ebf3; }.footer-brand { display: inline-flex; align-items: center; gap: 6px; color: #31415f; font: 700 11px "Space Grotesk", sans-serif; }.footer-brand img { width: 22px; height: 22px; object-fit: contain; }.page-footer > p { margin: 0 auto 0 0; color: #8b97aa; font-size: 9px; }.footer-links { display: flex; flex-wrap: wrap; gap: 12px; }.footer-links a { color: #677792; font-size: 9px; transition: color .15s ease; }.footer-links a:hover { color: #126af2; }.page-footer > small { width: 100%; color: #9aa5b5; font-size: 8px; }

.project-dialog { width: min(450px, calc(100% - 30px)); max-width: none; max-height: calc(100% - 30px); padding: 0; overflow: auto; border: 1px solid #e0e8f2; border-radius: 17px; color: var(--ink); background: white; box-shadow: 0 24px 80px rgba(12,29,57,.26); }.project-dialog::backdrop { background: rgba(7, 18, 39, .58); backdrop-filter: blur(3px); }.project-dialog[open] { animation: dialog-in .18s ease-out; }.project-dialog form { padding: 23px; }.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }.dialog-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #c18824; background: #fff3d9; }.dialog-mark svg { width: 20px; height: 20px; }.dialog-close { width: 31px; height: 31px; color: #8290a4; background: #f6f8fb; }.dialog-close svg { width: 15px; height: 15px; }.project-dialog .eyebrow { color: #9d7a2d; }.project-dialog h2 { margin: 0; color: #172541; font: 700 23px/1.2 "Space Grotesk", sans-serif; letter-spacing: -.6px; }.dialog-intro { margin: 8px 0 18px; color: #71809a; font-size: 11px; line-height: 1.55; }.project-dialog label { display: block; margin: 13px 0 6px; color: #394963; font-size: 10px; font-weight: 700; }.project-dialog input, .project-dialog textarea { display: block; width: 100%; padding: 10px 11px; border: 1px solid #dfe6f0; border-radius: 8px; outline: 0; color: #1b2944; background: #fbfcfe; font-size: 11px; transition: border-color .15s ease, box-shadow .15s ease; }.project-dialog textarea { resize: vertical; min-height: 77px; }.project-dialog input:focus, .project-dialog textarea:focus { border-color: #8cb8f6; box-shadow: 0 0 0 3px rgba(23,108,241,.09); }.dialog-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; color: #8290a4; font-size: 9px; line-height: 1.45; }.dialog-note svg { width: 14px; height: 14px; flex: 0 0 auto; color: #12a878; }.dialog-submit { width: 100%; }.dialog-submit svg { margin-left: auto; }.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 34px)); padding: 12px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: white; background: #13233f; box-shadow: 0 12px 32px rgba(9,24,49,.22); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }

.sidebar-backdrop { display: none; }
@keyframes breathe { 0%, 100% { transform: scale(.7); opacity: .76; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes card-in { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dialog-in { from { opacity: .6; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1260px) {
  .sidebar { width: 220px; }
  .workspace { margin-left: 220px; }
  .main-content { padding-inline: 23px; }
  .hero-panel { min-height: 278px; padding-inline: 30px; }
  .hero-copy { width: 61%; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-art { height: 124px; }
  .project-body { min-height: 151px; }
  .lower-grid { grid-template-columns: minmax(0, 1.2fr) minmax(265px, .8fr); }
  .topbar { padding-inline: 23px; }
}
@media (max-width: 960px) {
  .sidebar { width: 256px; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 15px 0 38px rgba(8,19,39,.22); }
  .sidebar.is-open { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .mobile-menu { display: grid; flex: 0 0 auto; }
  .topbar { gap: 12px; }
  .search { margin-right: auto; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 29; border: 0; background: rgba(5,16,35,.48); backdrop-filter: blur(2px); }
  .sidebar-backdrop.is-visible { display: block; }
  .lower-grid { grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); }
}
@media (max-width: 740px) {
  .topbar { min-height: 64px; padding: 9px 15px; gap: 8px; }
  .search { min-height: 36px; gap: 8px; padding-inline: 9px; }
  .search input { font-size: 10px; }
  .search kbd { display: none; }
  .topbar-actions { gap: 6px; }
  .new-project-button { min-height: 35px; padding-inline: 10px; font-size: 10px; }
  .new-project-button svg { width: 14px; height: 14px; }
  .notification-button { width: 33px; height: 35px; }
  .profile-copy, .profile-chevron { display: none; }
  .profile-link { padding-left: 0; }
  .profile-avatar { width: 33px; height: 33px; }
  .main-content { padding: 15px 15px 22px; }
  .hero-panel { min-height: 278px; padding: 25px 23px; border-radius: 15px; }
  .hero-copy { width: 70%; }
  .hero-copy h1 { font-size: clamp(28px, 6vw, 38px); }
  .hero-copy > p { max-width: 400px; font-size: 11px; }
  .hero-art { left: 59%; opacity: .72; }
  .sun-core { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .sun-core img { width: 61px; height: 61px; }
  .sun-halo { width: 148px; height: 148px; margin: -74px 0 0 -74px; }
  .halo-b { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
  .orbit-chip { min-width: 92px; padding: 7px 8px; }.orbit-chip strong { font-size: 8px; }.orbit-chip small { font-size: 7px; }.chip-live { right: 9%; }.chip-forum { right: 4%; }.chip-tools { left: -4%; }.hero-note { display: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }.stat-card { min-height: 75px; padding: 10px; gap: 9px; }.stat-icon { width: 34px; height: 34px; flex-basis: 34px; }.stat-copy strong { font-size: 21px; }.stat-copy p { font-size: 8px; }.stat-copy small { font-size: 7px; }
  .content-section { padding-top: 26px; }.section-heading h2 { font-size: 18px; }.section-subtitle { font-size: 9px; }.text-link { font-size: 9px; }
  .project-grid { gap: 10px; }.project-art { height: 108px; }.project-body { min-height: 157px; padding: 10px; }.project-body h3 { font-size: 12px; }
  .lower-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 18px; }.network-panel, .community-panel { padding: 14px; }.constellation { min-height: 238px; }.path-section { padding-top: 22px; }.path-grid { grid-template-columns: 1fr; gap: 8px; }.path-card { min-height: 62px; }.page-footer { gap: 9px 14px; }
}
@media (max-width: 480px) {
  .topbar { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 7px; }
  .mobile-menu { width: 32px; height: 34px; }.search { width: 100%; }.search input::placeholder { font-size: 9px; }.topbar-actions { gap: 3px; }.new-project-button { width: 34px; min-width: 34px; padding: 0; }.new-project-button span { display: none; }.new-project-button svg { width: 17px; height: 17px; }.notification-button { width: 30px; }.profile-avatar { width: 29px; height: 29px; }.profile-avatar img { width: 25px; height: 25px; }
  .hero-panel { min-height: 294px; align-items: flex-start; padding: 22px 18px; }.hero-copy { width: 100%; }.hero-kicker { max-width: 230px; font-size: 8px; line-height: 1.4; }.hero-copy h1 { max-width: 320px; font-size: 31px; }.hero-copy > p { max-width: 300px; font-size: 10px; }.hero-art { inset: 18% -23% 0 53%; opacity: .32; }.hero-art::before { right: -9%; bottom: -54%; width: 114%; }.hero-actions { gap: 7px; margin-top: 16px; }.hero-primary, .hero-secondary { min-height: 35px; padding-inline: 10px; font-size: 9px; }.hero-footnote { margin-top: 14px; font-size: 8px; }
  .section-heading, .panel-heading { gap: 8px; }.section-heading > .text-link { align-self: center; max-width: 106px; white-space: normal; text-align: right; }.section-heading > .text-link svg { flex: 0 0 auto; }.project-grid { grid-template-columns: 1fr; }.project-art { height: 124px; }.project-body { min-height: 146px; padding: 12px; }.project-body h3 { font-size: 13px; }.project-body p { font-size: 9px; }.project-topline { margin-bottom: 8px; }.project-tags { margin-top: 8px; }
  .constellation { min-height: 220px; }.constellation-node { width: 108px; padding: 7px 5px; }.constellation-node strong { font-size: 8px; }.constellation-node small { font-size: 6px; }.node-live { left: 1%; }.node-forum { right: 1%; }.node-tools { left: -4%; }.node-games { right: -4%; }.node-reader { left: calc(50% - 54px); }.node-creator { left: calc(50% - 54px); width: 108px; }.constellation-lines path { stroke-dasharray: 2 5; }
  .panel-heading h2 { font-size: 15px; }.panel-heading .section-subtitle { max-width: 240px; font-size: 8px; }.page-footer { display: grid; grid-template-columns: 1fr auto; }.page-footer > p { grid-column: 1 / -1; }.footer-links { grid-column: 1 / -1; }.page-footer > small { grid-column: 1 / -1; line-height: 1.5; }
  .notification-panel { right: -55px; }.project-dialog form { padding: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}