:root {
  --ink: #17150f;
  --paper: #f3efd9;
  --paper-deep: #e7dfbe;
  --vermillion: #ef5b32;
  --jade: #166b5b;
  --acid: #d8f04b;
  --night: #121c1c;
  --line: rgba(23, 21, 15, .2);
  --shadow: 8px 8px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.grain { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.shell, .app-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.site-header, .app-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { font-weight: 950; letter-spacing: -.04em; font-size: 1.05rem; text-decoration: none; }
.wordmark span { display: inline-grid; place-items: center; width: 35px; height: 35px; margin-right: 8px; color: var(--paper); background: var(--ink); border-radius: 50%; letter-spacing: -.08em; }
.signal, .status-pill { display: flex; align-items: center; gap: 9px; font-size: .68rem; letter-spacing: .15em; font-weight: 850; }
.signal i, .status-pill i { width: 8px; height: 8px; background: var(--vermillion); border-radius: 50%; box-shadow: 0 0 0 5px rgba(239, 91, 50, .14); animation: pulse 2s ease-in-out infinite; }
.hero { min-height: 690px; display: grid; grid-template-columns: 1.3fr .8fr; align-items: center; gap: 7vw; padding-block: 70px 95px; }
.eyebrow { margin: 0 0 14px; font-size: .7rem; letter-spacing: .18em; font-weight: 900; color: var(--jade); }
.hero h1 { max-width: 780px; margin: 0; font-size: clamp(4rem, 8.4vw, 7.9rem); line-height: .84; letter-spacing: -.075em; font-weight: 950; }
.hero h1 em { position: relative; display: inline-block; color: var(--vermillion); font-family: Georgia, serif; font-weight: 500; transform: rotate(-3deg); }
.hero h1 em::after { content: ""; position: absolute; left: 3%; right: -4%; bottom: -6px; height: 6px; background: var(--vermillion); transform: rotate(1deg); }
.lede { max-width: 620px; margin: 40px 0 30px; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.55; }
.identity-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.identity-chips > * { display: flex; gap: 13px; align-items: center; border: 1px solid var(--ink); padding: 11px 14px; text-decoration: none; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); background: rgba(255,255,255,.25); }
.identity-chips small { font-size: .58rem; letter-spacing: .12em; opacity: .55; }
.identity-chips a:hover { color: var(--paper); background: var(--jade); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.core-stage { position: relative; aspect-ratio: 1; display: grid; place-items: center; isolation: isolate; }
.core-stage::before { content: ""; position: absolute; width: 84%; aspect-ratio: 1; border-radius: 48% 52% 58% 42%; background: var(--acid); z-index: -2; animation: morph 8s ease-in-out infinite alternate; }
.core { width: 42%; aspect-ratio: 1; display: grid; place-items: center; background: var(--vermillion); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 9px 9px 0 var(--ink), inset 0 0 0 12px rgba(243,239,217,.3); }
.core span { font-family: Georgia, serif; color: var(--paper); font-size: clamp(3rem, 7vw, 6rem); }
.orbit { position: absolute; border: 2px solid var(--ink); border-radius: 50%; animation: orbit 14s linear infinite; }
.orbit b { position: absolute; top: 45%; left: -7px; width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--paper); border-radius: 50%; }
.orbit-one { width: 64%; aspect-ratio: 1; }
.orbit-two { width: 78%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 21s; transform: rotate(50deg) scaleY(.65); }
.orbit-three { width: 95%; aspect-ratio: 1; animation-duration: 28s; transform: rotate(-25deg) scaleY(.5); border-style: dashed; }
.core-stage > p { position: absolute; right: -10px; bottom: 10%; padding: 8px 10px; background: var(--paper); border: 1px solid var(--ink); font-size: .58rem; letter-spacing: .12em; line-height: 1.45; transform: rotate(3deg); }
.core-stage > p strong { color: var(--jade); font-size: .9rem; }
.projects { padding-block: 110px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr 300px; align-items: end; gap: 30px; margin-bottom: 40px; }
.section-heading h2, .manifesto blockquote { margin: 0; font-family: Georgia, serif; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1; font-weight: 500; }
.section-heading > p { margin: 0; line-height: 1.5; opacity: .65; }
.project-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
.project-card { position: relative; min-height: 560px; padding: 24px; overflow: hidden; border: 2px solid var(--ink); text-decoration: none; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.project-card:hover { transform: translate(-4px,-4px) rotate(-.3deg); box-shadow: 14px 14px 0 var(--ink); }
.project-cultivation { background: #e5a04a; }
.project-dqa { color: #dce7ce; background: var(--night); }
.project-art { position: relative; height: 250px; margin: -24px -24px 28px; overflow: hidden; border-bottom: 2px solid var(--ink); background: linear-gradient(#9fd8cd 0 55%, #e7cb74 55%); }
.sun { position: absolute; width: 90px; height: 90px; right: 15%; top: 13%; background: var(--vermillion); border: 2px solid var(--ink); border-radius: 50%; }
.mountain { position: absolute; width: 72%; height: 85%; bottom: -30%; background: var(--jade); border: 2px solid var(--ink); transform: rotate(45deg); }
.mountain-a { left: -18%; }.mountain-b { right: -30%; bottom: -48%; background: #28473f; }
.terminal-art { display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 30px; color: var(--acid); background: repeating-linear-gradient(0deg, #192828 0 3px, #172323 3px 6px); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.8rem, 1.5vw, 1.05rem); }
.terminal-line { color: #86b6a4; }.terminal-line::after { content: ""; display: inline-block; width: 8px; height: 1em; background: var(--acid); animation: blink 1s steps(1) infinite; }
.project-number { font-size: .63rem; letter-spacing: .16em; font-weight: 900; opacity: .65; }
.project-card h3 { margin: 10px 0 12px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: .95; letter-spacing: -.055em; }
.project-card > p { max-width: 580px; margin: 0; line-height: 1.5; opacity: .78; }
.project-link { margin-top: auto; padding-top: 35px; font-size: .69rem; letter-spacing: .13em; font-weight: 900; }.project-link b { float: right; font-size: 1.3rem; }
.manifesto { position: relative; min-height: 480px; display: grid; place-content: center; padding-block: 90px; text-align: center; border-top: 1px solid var(--line); }
.manifesto > p { font-size: .65rem; letter-spacing: .2em; font-weight: 900; }.manifesto blockquote { line-height: 1.2; }
.stamp { position: absolute; right: 3%; bottom: 13%; width: 130px; height: 130px; display: grid; place-content: center; color: var(--vermillion); border: 3px double var(--vermillion); border-radius: 50%; font-weight: 950; font-size: .8rem; transform: rotate(-11deg); }
.stamp span { font-size: .5rem; letter-spacing: .08em; }
footer { min-height: 90px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); font-size: .6rem; letter-spacing: .12em; font-weight: 850; }

/* Authenticated application */
.app-page { min-height: 100vh; color: #e8ead9; background: var(--night); }
.app-page .grain { opacity: .08; mix-blend-mode: screen; }.app-page .wordmark span { color: var(--night); background: var(--acid); }
.app-header { border-color: rgba(255,255,255,.13); }.app-header nav { display: flex; align-items: center; gap: 24px; }.app-header nav a, .text-button { color: #e8ead9; border: 0; background: none; text-decoration: none; font-size: .7rem; font-weight: 850; letter-spacing: .1em; cursor: pointer; opacity: .65; }.app-header nav a:hover, .app-header nav a.active, .text-button:hover { color: var(--acid); opacity: 1; }
.auth-shell { width: min(1180px, calc(100% - 40px)); margin: auto; min-height: 100vh; display: grid; place-items: center; }.dashboard { width: 100%; align-self: stretch; }
.login-card { width: min(470px, 100%); padding: clamp(28px, 5vw, 55px); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 12px 12px 0 var(--acid); }.login-card h1 { margin: 6px 0 12px; font-family: Georgia, serif; font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 500; }.login-card > p:not(.eyebrow) { color: #5e5a49; line-height: 1.5; }.mini-core { float: right; width: 54px; height: 54px; display: grid; place-items: center; color: var(--paper); background: var(--vermillion); border: 2px solid var(--ink); border-radius: 50%; font-family: Georgia, serif; font-size: 1.7rem; }
form label { display: grid; gap: 7px; margin-block: 14px; font-size: .67rem; letter-spacing: .08em; font-weight: 850; text-transform: uppercase; }
input, select { width: 100%; border: 1px solid currentColor; border-radius: 0; padding: 12px 13px; color: inherit; background: transparent; outline: none; } input:focus, select:focus { box-shadow: 0 0 0 3px rgba(216,240,75,.25); }
.button { display: inline-flex; justify-content: center; border: 1px solid currentColor; padding: 11px 17px; color: inherit; background: transparent; font-size: .7rem; letter-spacing: .08em; font-weight: 900; text-transform: uppercase; cursor: pointer; }.button:hover { color: var(--night); background: var(--acid); }.button.primary { color: var(--paper); background: var(--vermillion); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }.button.primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }.button.compact { padding: 8px 11px; }.danger { color: #ff8061; }
.login-card .button { width: 100%; margin-top: 8px; }.form-message { min-height: 1.2em; margin: 10px 0 0; color: #d84929; font-size: .75rem; text-transform: none; letter-spacing: 0; }.form-message.success { color: var(--jade); }
.dashboard-intro, .atlas-header { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-block: 70px 45px; }.dashboard-intro h1, .atlas-header h1, .docs-hero h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.7rem, 6vw, 5.6rem); font-weight: 500; line-height: 1; }.dashboard-intro h1 span { color: var(--acid); }.status-pill { border: 1px solid rgba(255,255,255,.2); padding: 10px 13px; }.status-pill i { background: var(--acid); box-shadow: 0 0 0 5px rgba(216,240,75,.1); }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }.panel, .chart-panel { padding: 26px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.035); }.panel-title { display: flex; align-items: start; justify-content: space-between; gap: 20px; }.panel h2 { margin: 0; font-size: 1.6rem; }.muted { color: #9aa49c; line-height: 1.5; font-size: .85rem; }.stack-list { display: grid; gap: 8px; margin-top: 22px; }.list-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.12); }.list-row strong { display: block; }.list-row small { color: #93a098; }.key-reveal { margin-block: 18px; padding: 15px; color: var(--night); background: var(--acid); overflow-wrap: anywhere; }.key-reveal code { display: block; margin-top: 8px; font-size: .82rem; }.admin-panel { margin-block: 18px 60px; }.inline-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; margin-block: 20px; }.inline-form label { margin: 0; }.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .82rem; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.11); white-space: nowrap; } th { color: #93a098; font-size: .62rem; letter-spacing: .1em; }
.atlas-header > div > p:last-child, .docs-hero > p:last-child { color: #aab1aa; }.item-picker { width: min(330px, 100%); }.item-picker label { display: block; margin-bottom: 8px; color: var(--acid); font-size: .64rem; letter-spacing: .12em; }.item-picker select { background: var(--night); }
.chart-panel { margin-bottom: 60px; padding: clamp(17px, 3vw, 32px); }.chart-toolbar { display: flex; justify-content: space-between; gap: 25px; align-items: start; }.range-tabs { display: flex; flex-wrap: wrap; gap: 5px; }.range-tabs button { padding: 8px 11px; color: #aab1aa; border: 1px solid rgba(255,255,255,.13); background: transparent; cursor: pointer; font-size: .68rem; }.range-tabs button.active { color: var(--night); background: var(--acid); }.current-rap { text-align: right; }.current-rap span, .current-rap small { display: block; color: #9ba49c; font-size: .58rem; letter-spacing: .13em; }.current-rap strong { display: block; color: var(--acid); font-size: clamp(2rem, 5vw, 4rem); line-height: 1; }.chart-wrap { position: relative; height: min(52vw, 480px); min-height: 270px; margin-block: 25px; }.chart-wrap canvas { width: 100%; height: 100%; }.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #89948c; text-align: center; }.chart-legend { display: flex; justify-content: space-between; gap: 20px; color: #89948c; font-size: .6rem; letter-spacing: .08em; }.legend-line { display: inline-block; width: 25px; height: 2px; margin-right: 8px; background: var(--acid); vertical-align: middle; }
.docs-hero { max-width: 850px; padding-block: 80px 55px; }.docs-layout { display: grid; grid-template-columns: 180px minmax(0, 790px); gap: 70px; padding-bottom: 100px; }.docs-layout aside { position: sticky; top: 30px; align-self: start; display: grid; border-left: 1px solid rgba(255,255,255,.17); }.docs-layout aside a { padding: 8px 15px; color: #9ba49c; text-decoration: none; font-size: .75rem; }.docs-layout aside a:hover { color: var(--acid); }.docs-layout article { min-width: 0; }.docs-layout article section { padding: 0 0 60px; scroll-margin-top: 30px; }.docs-layout h2 { margin: 8px 0 13px; font-size: clamp(1.6rem, 3vw, 2.5rem); }.docs-layout p { line-height: 1.7; color: #adb6ae; }.docs-layout strong { color: #e8ead9; }.method { display: inline-block; margin: 0 !important; padding: 5px 8px; color: var(--night) !important; background: var(--acid); font-size: .6rem; letter-spacing: .12em; font-weight: 950; }.method.get { background: #7ed3bf; }.method.post { background: #f28a65; }.method.neutral { background: #d4d2c6; } pre { overflow-x: auto; padding: 20px; border: 1px solid rgba(255,255,255,.14); color: #dce7ce; background: #0c1313; font-size: .78rem; line-height: 1.65; tab-size: 4; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; }.empty-card { padding: 50px; border: 2px solid var(--ink); box-shadow: var(--shadow); text-align: center; }.empty-card h1 { font-family: Georgia, serif; font-size: clamp(2rem, 7vw, 4rem); font-weight: 500; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } } @keyframes orbit { to { rotate: 360deg; } } @keyframes morph { to { border-radius: 62% 38% 41% 59%; transform: rotate(8deg) scale(1.05); } } @keyframes blink { 50% { opacity: 0; } }
@media (max-width: 800px) {
  .shell, .app-shell, .auth-shell { width: min(100% - 28px, 1180px); }.site-header, .app-header { min-height: 72px; }.signal { display: none; }.hero { min-height: auto; grid-template-columns: 1fr; padding-block: 65px; }.hero h1 { font-size: clamp(3.8rem, 18vw, 6.5rem); }.core-stage { width: min(100%, 480px); justify-self: center; }.section-heading, .project-grid, .dashboard-grid, .docs-layout { grid-template-columns: 1fr; }.section-heading > p { max-width: 440px; }.project-card { min-height: 520px; }.projects { padding-block: 75px; }.manifesto { min-height: 430px; }.manifesto blockquote { font-size: clamp(2.2rem, 10vw, 4rem); }.stamp { opacity: .7; }.app-header { align-items: flex-start; padding-block: 20px; gap: 20px; }.app-header nav { justify-content: flex-end; flex-wrap: wrap; gap: 12px 16px; }.dashboard-intro, .atlas-header { align-items: start; flex-direction: column; padding-block: 50px 32px; }.inline-form { grid-template-columns: 1fr; align-items: stretch; }.docs-layout { gap: 35px; }.docs-layout aside { position: static; grid-template-columns: repeat(5, auto); overflow-x: auto; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.17); }.docs-layout aside a { padding-inline: 8px; white-space: nowrap; }.chart-toolbar { flex-direction: column-reverse; }.current-rap { text-align: left; }.chart-legend { flex-direction: column; }.project-art { height: 220px; }
}
@media (max-width: 480px) { .hero h1 { letter-spacing: -.065em; }.identity-chips { display: grid; }.project-card { min-height: 490px; box-shadow: 5px 5px 0 var(--ink); }.project-grid { gap: 18px; }.core-stage > p { right: 0; }.manifesto { text-align: left; }.stamp { right: 0; bottom: 5%; transform: scale(.75) rotate(-11deg); }.app-header .wordmark { font-size: 0; }.app-header .wordmark span { margin: 0; font-size: .7rem; }.range-tabs button { flex: 1; }.range-tabs { width: 100%; } footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }