.view-switcher { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.6); font: 500 10px var(--mono); letter-spacing: .02em; }
.view-switcher a { padding: 5px 8px; color: var(--muted); border-radius: 999px; }
.view-switcher a.is-active { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(23,25,37,.08); }
.view-switcher a:hover { color: var(--ink); }

.notes-hero { position: relative; overflow: hidden; padding-top: 84px; padding-bottom: 82px; background: radial-gradient(circle at 82% 22%, rgba(212,216,255,.56), transparent 28%), radial-gradient(circle at 10% 20%, rgba(230,248,247,.78), transparent 24%); }
.notes-hero::before { position: absolute; top: 0; right: -10%; width: 55vw; height: 100%; opacity: .28; content: ''; background-image: linear-gradient(rgba(112,107,196,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(112,107,196,.08) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to bottom, black, transparent 78%); pointer-events: none; }
.notes-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr); align-items: center; gap: 75px; }
.notes-hero h1 { max-width: 670px; }
.notes-dashboard { position: relative; min-height: 295px; padding: 23px 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.96); border-radius: 24px; background: rgba(255,255,255,.83); box-shadow: var(--shadow); backdrop-filter: blur(12px); transform: rotate(-1.8deg); }
.notes-dashboard::after { position: absolute; right: -45px; bottom: -88px; width: 190px; height: 190px; content: ''; border: 1px solid rgba(101,84,243,.14); border-radius: 50%; box-shadow: 0 0 0 28px rgba(101,84,243,.035), 0 0 0 56px rgba(101,84,243,.027); }
.dashboard-topline { display: flex; justify-content: space-between; color: var(--faint); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.notes-dashboard .live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); }.notes-dashboard .live-indicator i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(21,159,154,.1); }
.dashboard-main { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 20px; margin: 37px 0 33px; }.dashboard-orbit { position: relative; display: grid; width: 112px; height: 112px; place-items: center; border: 1px solid rgba(101,84,243,.18); border-radius: 50%; }.dashboard-orbit::before, .dashboard-orbit::after { position: absolute; content: ''; border: 1px solid rgba(21,159,154,.25); border-radius: 50%; transform: rotate(32deg) scaleY(.45); }.dashboard-orbit::before { inset: -8px -23px; }.dashboard-orbit::after { inset: 18px -15px; border-color: rgba(228,161,68,.32); transform: rotate(-28deg) scaleY(.6); }.dashboard-orbit span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(21,159,154,.13); }.dashboard-orbit i { position: absolute; top: 11px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }.dashboard-orbit b { color: var(--purple); font: 500 26px var(--serif); }.dashboard-kicker { margin-bottom: 9px; color: var(--purple-dark); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.dashboard-copy { max-width: 220px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.dashboard-stats { display: flex; gap: 29px; padding-top: 14px; border-top: 1px solid var(--line); }.dashboard-stats div { display: flex; align-items: baseline; gap: 7px; }.dashboard-stats strong { color: var(--ink); font: 500 19px var(--mono); }.dashboard-stats span { color: var(--faint); font-size: 10px; }

.notes-index { background: var(--surface); }.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 15px; }.article-card { position: relative; display: flex; min-height: 255px; flex-direction: column; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }.article-card:hover { border-color: #cfcbff; box-shadow: var(--shadow); transform: translateY(-4px); }.article-card::after { position: absolute; right: -36px; bottom: -47px; width: 115px; height: 115px; content: ''; border: 1px solid rgba(101,84,243,.16); border-radius: 50%; }.article-card-featured { grid-row: span 2; min-height: 525px; color: #fff; background: var(--purple); }.article-card-featured::after { width: 240px; height: 240px; right: -80px; bottom: -105px; border-color: rgba(255,255,255,.2); box-shadow: 0 0 0 26px rgba(255,255,255,.04), 0 0 0 52px rgba(255,255,255,.03); }.article-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }.article-type, .article-number { font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.article-type { color: var(--purple); }.article-card-featured .article-type { color: #d9d4ff; }.article-number { color: var(--faint); }.article-card-featured .article-number { color: rgba(255,255,255,.45); }.article-card h3 { position: relative; z-index: 1; margin: 35px 0 8px; font-size: 20px; line-height: 1.25; }.article-card-featured h3 { max-width: 400px; margin-top: auto; color: #fff; font-size: 34px; letter-spacing: -.05em; }.article-meta { position: relative; z-index: 1; margin-bottom: 19px; color: var(--faint); font: 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }.article-card-featured .article-meta { color: #d9d4ff; }.article-summary { position: relative; z-index: 1; margin-bottom: 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }.article-card-featured .article-summary { max-width: 390px; color: #d4d0ff; }.article-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; color: var(--ink); font-size: 12px; font-weight: 700; }.article-card-featured .article-link { color: #fff; }.article-link:hover { color: var(--purple); }.article-card-featured .article-link:hover { color: #fff; }.article-empty { padding: 36px; border: 1px dashed #cfcfe1; border-radius: 19px; background: #fafaff; }.article-empty h3 { margin-bottom: 5px; }.article-empty p { margin: 0; color: var(--muted); }.article-empty code { font-family: var(--mono); }
.notes-cta { padding-top: 0; background: var(--surface); }.notes-cta-card { display: grid; grid-template-columns: 1fr .85fr; gap: 50px; align-items: center; padding: 54px 60px; border: 1px solid #dcd9ff; border-radius: 26px; background: linear-gradient(115deg, #f0efff, #eef9f7); }.notes-cta-card h2 { margin: 0; font-size: clamp(38px, 4vw, 55px); line-height: 1.04; }.notes-cta-card p { max-width: 330px; color: var(--muted); font-size: 14px; }

@media (max-width: 950px) { .notes-hero-grid { grid-template-columns: 1fr; gap: 35px; }.notes-dashboard { max-width: 560px; }.article-grid { grid-template-columns: repeat(2, 1fr); }.article-card-featured { grid-row: span 2; } }
@media (max-width: 720px) { .view-switcher { justify-content: center; margin: 4px 0; }.notes-hero { padding-top: 64px; padding-bottom: 63px; }.notes-hero::before { right: -45%; width: 100vw; }.notes-hero-grid { gap: 22px; }.notes-dashboard { padding: 18px; transform: rotate(0); }.dashboard-main { grid-template-columns: 100px 1fr; gap: 15px; margin: 30px 0 27px; }.dashboard-orbit { width: 93px; height: 93px; }.dashboard-stats { gap: 17px; }.article-grid { display: flex; flex-direction: column; }.article-card, .article-card-featured { min-height: 285px; }.article-card-featured h3 { font-size: 29px; }.notes-cta-card { grid-template-columns: 1fr; gap: 26px; padding: 35px 26px; } }