:root {
    --ink: #17211f;
    --muted: #65716c;
    --paper: #f3f1ea;
    --line: #cfd3c8;
    --lime: #d9ee55;
    --coral: #e7785f;
    --serif: 'Newsreader', Georgia, serif;
    --sans: 'Manrope', sans-serif;
    --mono: 'DM Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; }
.topbar { display: flex; justify-content: space-between; align-items: center; max-width: 1240px; margin: auto; padding: 28px 34px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.brand { text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: .18em; }.brand span { color: var(--coral); margin-left: 5px; }.topbar-note { color: var(--muted); }.topbar-note i { display: inline-block; width: 7px; height: 7px; margin: 0 10px; border-radius: 50%; background: var(--coral); }
.hero { min-height: 650px; max-width: 1240px; margin: auto; padding: 92px 8% 105px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; overflow: hidden; }.eyebrow { margin: 0 0 22px; font-family: var(--mono); color: var(--coral); font-size: 10px; letter-spacing: .14em; }.hero h1 { margin: 0; font-size: clamp(64px, 9vw, 132px); line-height: .82; font-weight: 500; letter-spacing: -.07em; }.hero h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.06em; }.hero-lead { max-width: 410px; margin: 42px 0 28px; color: var(--muted); font-size: 15px; line-height: 1.7; }.text-link { display: inline-flex; gap: 28px; align-items: center; color: var(--ink); font-family: var(--mono); font-size: 11px; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 9px; }.text-link span { color: var(--coral); font-size: 18px; }
.orbit { position: relative; width: min(39vw, 420px); aspect-ratio: 1; margin: auto; background: var(--lime); border-radius: 50%; transform: rotate(-15deg); }.orbit-ring { position: absolute; inset: 12%; border: 1px solid var(--ink); border-radius: 50%; }.ring-two { inset: 26%; border-style: dashed; }.ring-three { inset: 39%; }.orbit-core { position: absolute; inset: 43%; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 28px; }.orbit b { position: absolute; font-family: var(--serif); font-size: 34px; font-weight: 400; }.orbit b:nth-of-type(1) { top: 13%; left: 22%; }.orbit b:nth-of-type(2) { right: 13%; bottom: 20%; }.orbit b:nth-of-type(3) { left: 13%; bottom: 25%; }
.workspace, .reading { border-top: 1px solid var(--line); max-width: 1240px; margin: auto; padding: 76px 8% 110px; }.section-label { display: grid; grid-template-columns: 60px 1fr 1fr; align-items: baseline; margin-bottom: 52px; }.section-label span, .section-label p { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }.section-label h2 { margin: 0; font-size: clamp(30px, 4vw, 50px); letter-spacing: -.06em; font-weight: 500; }.section-label p { text-align: right; }.panel-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 9%; }.chart-form { min-width: 0; }.dropzone { min-height: 230px; padding: 35px; border: 1px dashed #aeb5aa; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }.dropzone:hover, .dropzone.is-dragging { background: #e9e9dc; border-color: var(--coral); }.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.upload-mark { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px; border: 1px solid var(--ink); border-radius: 50%; font-size: 24px; font-weight: 300; }.dropzone strong { font-size: 15px; font-weight: 600; }.dropzone small, .file-name, .privacy { margin-top: 9px; color: var(--muted); font-family: var(--mono); font-size: 10px; }.file-name { color: var(--coral); }.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; margin: 30px 0; }.fields label { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }.fields .wide { grid-column: 1 / -1; }.fields input, .fields select { display: block; width: 100%; margin-top: 8px; padding: 12px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); font: 14px var(--sans); outline: 0; }.fields input:focus, .fields select:focus { border-color: var(--coral); }.button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 17px 19px; color: var(--ink); background: var(--lime); border: 0; font: 600 12px var(--sans); cursor: pointer; }.button span { font-size: 18px; }.privacy { text-align: center; }.how { padding: 12px 0; border-top: 1px solid var(--ink); }.how ol { list-style: none; padding: 0; margin: 30px 0 64px; }.how li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 19px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }.how li b { color: var(--coral); font: 10px var(--mono); }.how strong { color: var(--ink); font-weight: 600; }.disclaimer { max-width: 280px; color: var(--muted); font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.notice { max-width: 1240px; margin: -40px auto 40px; padding: 16px 8%; font-size: 13px; }.error { color: #9c3e2b; border-top: 1px solid var(--coral); border-bottom: 1px solid var(--coral); }.reading { background: var(--ink); color: var(--paper); max-width: none; padding-left: max(8%, calc((100% - 1040px) / 2)); padding-right: max(8%, calc((100% - 1040px) / 2)); }.reading .eyebrow { color: var(--lime); }.reading-head { max-width: 680px; }.reading-head h2 { margin: 0 0 18px; font: 500 clamp(42px, 6vw, 74px)/.95 var(--serif); letter-spacing: -.04em; }.reading-head > p:last-child { color: #c6cbc1; font-size: 15px; line-height: 1.7; }.reading-layout { display: grid; grid-template-columns: 260px 1fr; gap: 8%; margin-top: 60px; }.chart-preview { width: 100%; aspect-ratio: 1; object-fit: contain; background: #26332e; }.reading-copy article { padding: 20px 0; border-top: 1px solid #53605a; }.reading-copy article .eyebrow { margin-bottom: 10px; }.reading-copy article p:last-child { max-width: 620px; color: #d7dbd2; line-height: 1.65; }.ai-note { color: #99a49a; font: 10px/1.6 var(--mono); }.reading + footer { background: var(--ink); color: #9fa9a0; border-color: #53605a; }footer { display: flex; justify-content: space-between; max-width: 1240px; margin: auto; padding: 25px 34px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
+@media (max-width: 700px) { .topbar { padding: 22px 20px; }.topbar-note { display: none; }.hero { min-height: 680px; padding: 60px 20px 80px; display: block; }.hero h1 { font-size: 76px; }.hero-lead { margin-top: 34px; }.orbit { width: 245px; margin: 65px auto 0; }.workspace, .reading { padding: 55px 20px 75px; }.section-label { grid-template-columns: 35px 1fr; gap: 4px; margin-bottom: 35px; }.section-label p { grid-column: 2; text-align: left; margin-top: 8px; }.panel-grid, .reading-layout { grid-template-columns: 1fr; gap: 55px; }.fields { grid-template-columns: 1fr; }.fields .wide { grid-column: auto; }.chart-preview { width: min(100%, 280px); }.how ol { margin-bottom: 30px; }footer { padding: 22px 20px; flex-wrap: wrap; gap: 14px; }footer span:nth-child(2) { order: 3; width: 100%; } }