:root { --ink:#17231f; --muted:#5d6b64; --paper:#f7f4ee; --warm:#e6dfd0; --lime:#b9f17a; --lime-deep:#8dc84c; --line:rgba(23,35,31,.16); --night:#162c25; --white:#fffdf9; --shadow:0 20px 55px rgba(22,44,37,.12); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.7; } .skip-link { position:absolute; left:-999px; top:0; background:var(--ink); color:white; padding:.75rem 1rem; z-index:10; } .skip-link:focus { left:1rem; top:1rem; }
.site-header,.studio-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:1.25rem clamp(1.25rem,4vw,5rem); border-bottom:1px solid var(--line); background:rgba(247,244,238,.88); } .site-header { position:sticky; top:0; z-index:5; backdrop-filter:blur(18px); } .brand { display:inline-flex; gap:.6rem; align-items:center; font-size:.83rem; line-height:.92; font-weight:750; letter-spacing:-.03em; } .brand em { color:#497a3b; font-style:normal; } .brand-mark { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--ink); color:var(--lime); font-family:Georgia,serif; font-size:1.35rem; font-weight:400; } nav { display:flex; gap:1.7rem; font-size:.88rem; color:#42504a; } nav a:hover,.text-link:hover,.back-home a:hover { color:#497a3b; } .text-link { font-size:.85rem; font-weight:700; }
.section-wrap { width:min(1180px, calc(100% - 3rem)); margin-inline:auto; } .hero { min-height:calc(100vh - 88px); display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; padding-block:4.5rem; } .eyebrow { margin:0 0:; margin:0 0 1rem; color:#497a3b; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Georgia, "Times New Roman", serif; font-weight:400; letter-spacing:-.055em; line-height:.98; } h1 { max-width:720px; margin-bottom:1.5rem; font-size:clamp(3.2rem,6vw,6.1rem); } h2 { font-size:clamp(2.5rem,4vw,4.2rem); margin-bottom:1.2rem; } h1 em,h2 em { color:#4f8540; font-style:italic; } .lead { max-width:620px; color:#415048; font-size:clamp(1.05rem,1.5vw,1.27rem); line-height:1.65; } .hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; } .button { border:1px solid transparent; border-radius:999px; padding:.86rem 1.25rem; display:inline-flex; gap:.7rem; justify-content:center; align-items:center; font-size:.9rem; font-weight:760; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--ink); color:var(--white); } .button-primary:hover,.button-dark:hover { background:#2d4b40; } .button-secondary { color:var(--ink); border-color:var(--line); background:transparent; } .button-light { color:var(--ink); background:var(--lime); } .button-dark { color:var(--white); background:var(--ink); } .quiet-note,.microcopy { color:var(--muted); font-size:.79rem; line-height:1.5; } .quiet-note { margin-top:1rem; }
.hero-art { position:relative; min-height:455px; overflow:hidden; border-radius:28px; background:linear-gradient(130deg,#b8ed7c,#dceec5 60%,#f5f1e5); box-shadow:var(--shadow); } .art-topline { position:absolute; inset:0 0 auto; height:42%; background:var(--ink); } .art-label { position:absolute; left:9%; top:11%; color:#e5f5cf; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .speech-bubble { position:absolute; left:10%; right:15%; padding:1.15rem 1.2rem; border-radius:1rem 1rem 1rem .25rem; background:rgba(255,253,249,.92); box-shadow:0 10px 30px rgba(22,44,37,.13); line-height:1.4; font-family:Georgia,serif; font-size:1.06rem; } .speech-bubble.first { top:22%; } .speech-bubble.second { left:20%; right:7%; top:48%; border-radius:1rem 1rem .25rem 1rem; } .art-orbit { position:absolute; border:1px solid rgba(23,35,31,.25); border-radius:50%; } .orbit-a { width:260px; height:260px; right:-9%; bottom:-20%; } .orbit-b { width:380px; height:380px; right:-27%; bottom:-37%; } .art-center { position:absolute; display:flex; flex-direction:column; gap:.15rem; align-items:center; justify-content:center; height:90px; width:90px; left:7%; bottom:7%; border-radius:50%; background:var(--ink); color:var(--white); } .art-center span { color:var(--lime); font-size:.74rem; }.art-center strong { font-size:.78rem; }
.section-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; padding-block:8rem 3rem; } .section-copy { color:#46554d; line-height:1.7; font-size:1.05rem; align-self:end; } .steps { display:grid; grid-template-columns:repeat(3,1fr); padding-bottom:8rem; } .steps article { padding:1.8rem 2.25rem 1.2rem 0; border-top:1px solid var(--line); } .steps article+article { padding-left:2.25rem; border-left:1px solid var(--line); } .step-number,.card-kicker { color:#568642; letter-spacing:.09em; font-size:.76rem; font-weight:800; } .steps h3,.principles h3 { margin:.85rem 0 .6rem; font-size:1.22rem; } .steps p,.principles p { color:var(--muted); line-height:1.6; }
.mara-section { padding-block:7.5rem; color:var(--white); background:var(--night); } .mara-layout { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:6rem; } .mara-layout h2 { color:var(--white); } .mara-layout>div>p:not(.eyebrow) { max-width:550px; line-height:1.7; color:#d7e0da; } .light { color:var(--lime); }.check-list { list-style:none; padding:0; margin:2rem 0 0; color:#e6efe9; line-height:2; }.check-list li::before { content:'✓'; display:inline-block; width:1.5rem; color:var(--lime); }.mara-card { padding:2rem; border:1px solid rgba(255,255,255,.19); border-radius:24px; background:rgba(255,255,255,.07); }.mara-card-top { display:flex; gap:.5rem; align-items:center; color:#d6e1da; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }.status-dot { width:.55rem; height:.55rem; background:#f0ce79; border-radius:50%; }.mara-card h3 { margin:1.7rem 0 .8rem; font-family:Georgia,serif; font-size:1.75rem; font-weight:400; letter-spacing:-.03em; }.mara-card p { color:#d6e1da; line-height:1.65; }.mara-card .microcopy { margin:1rem 0 0; color:#d6e1da; }
.mara-avatar { width:100%; margin:1.55rem 0 .8rem; padding:1rem .25rem; display:flex; align-items:center; gap:1rem; color:var(--white); text-align:left; background:transparent; border:0; border-radius:18px; }.mara-avatar:hover .mara-avatar-ring { transform:scale(1.04); box-shadow:0 0 0 10px rgba(185,241,122,.14); }.mara-avatar-ring { width:5rem; height:5rem; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 32% 25%,#f4ffe4,#b9f17a 35%,#558943 100%); box-shadow:0 0 0 5px rgba(185,241,122,.2); transition:transform .2s,box-shadow .2s; animation:mara-pulse 2.3s ease-in-out infinite; }.mara-avatar-face { width:3.85rem; height:3.85rem; display:grid; place-items:center; border-radius:50%; color:var(--lime); background:var(--ink); font-family:Georgia,serif; font-size:2.1rem; }.mara-avatar strong { display:block; font-family:Georgia,serif; font-size:1.55rem; font-weight:400; }.mara-avatar small { display:block; margin-top:.2rem; color:#d6e1da; }.mara-controls { display:flex; align-items:center; gap:.8rem; min-height:2.3rem; color:#d6e1da; font-size:.8rem; }.mara-stop { padding:.55rem .8rem; border:1px solid rgba(255,255,255,.4); border-radius:999px; color:var(--white); background:transparent; }.mara-stop:hover { border-color:var(--lime); color:var(--lime); } @keyframes mara-pulse { 50% { box-shadow:0 0 0 10px rgba(185,241,122,.08); } }
.studio-teaser { display:grid; grid-template-columns:1fr 1fr; gap:5rem; padding-block:8rem; }.studio-teaser>div:last-child { align-self:end; }.studio-teaser p { color:var(--muted); line-height:1.7; max-width:500px; }.studio-teaser .button { margin-top:1rem; }.principles { padding-bottom:6rem; }.principles>div { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.principles article { padding:1.6rem; background:#ebe6dc; border-radius:15px; }.site-footer { display:flex; gap:1rem; justify-content:space-between; padding:1.6rem clamp(1.25rem,4vw,5rem); color:#6a756e; font-size:.73rem; border-top:1px solid var(--line); }
.auth-page { min-height:100vh; background:linear-gradient(135deg,#e8eee1, #f7f4ee 57%); }.auth-shell { width:min(480px, calc(100% - 2.5rem)); margin:0 auto; padding:3rem 0; }.auth-card { margin-top:2.5rem; padding:2.2rem; border:1px solid var(--line); background:var(--white); border-radius:22px; box-shadow:var(--shadow); }.auth-card h1 { font-size:2.5rem; }.auth-card>p:not(.eyebrow),.reset-notice { color:var(--muted); line-height:1.6; }.auth-card form { margin-top:1.6rem; display:grid; gap:.55rem; }.auth-card label { font-weight:700; font-size:.85rem; }.auth-card input { min-height:48px; padding:0 .85rem; border:1px solid #b7c1ba; border-radius:9px; background:var(--white); }.auth-card input:focus { outline:3px solid rgba(141,200,76,.35); border-color:#497a3b; }.password-field { position:relative; }.password-field input { width:100%; padding-right:3rem; }.password-field button { position:absolute; right:.4rem; top:.4rem; width:2.4rem; height:2.4rem; background:transparent; border:0; color:#4f5c56; }.full-width { width:100%; margin-top:.7rem; }.form-message { min-height:1.4rem; color:#46554d; font-size:.86rem; line-height:1.5; }.forgot-link { border:0; padding:0; background:transparent; color:#38672d; font-weight:700; }.reset-notice { padding-top:1rem; border-top:1px solid var(--line); font-size:.78rem; }.back-home { text-align:center; margin-top:1.4rem; color:#526159; font-size:.86rem; }
.studio-page { min-height:100vh; background:#f2f0e9; }.studio-header { background:var(--white); }.studio-header>div { display:flex; align-items:center; gap:.75rem; }.private-badge,.status-label { display:inline-block; border-radius:99px; padding:.35rem .55rem; background:#e3eedb; color:#38672d; font-size:.68rem; font-weight:800; letter-spacing:.03em; }.logout-button { border:0; background:transparent; color:#56625c; font-size:.82rem; }.studio-main { width:min(1160px, calc(100% - 3rem)); margin:0 auto; padding:5rem 0 6rem; }.studio-intro { max-width:800px; }.studio-intro h1 { font-size:clamp(3rem,5vw,5rem); }.studio-intro>p:last-child { color:var(--muted); font-size:1.08rem; line-height:1.7; }.control-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:3rem; }.control-grid article { min-height:205px; padding:1.75rem; background:var(--white); border:1px solid var(--line); border-radius:18px; }.control-grid h2,.gateway-panel h2 { font-family:Georgia,serif; letter-spacing:-.035em; font-size:1.75rem; font-weight:400; }.control-grid p:not(.card-kicker),.gateway-panel>div>p:not(.eyebrow) { color:var(--muted); line-height:1.6; }.gateway-panel { display:grid; grid-template-columns:1fr .8fr; gap:3rem; margin-top:1rem; padding:2rem; border-radius:18px; color:var(--white); background:var(--ink); }.gateway-panel h2 { font-size:2.1rem; }.gateway-panel>div>p:not(.eyebrow) { color:#d4ded8; }.gateway-actions { align-self:center; }.gateway-actions .button-secondary { color:var(--white); border-color:rgba(255,255,255,.35); margin-left:.5rem; }.gateway-actions .form-message { color:#d8e5dd; margin-top:1rem; }
@media (max-width:760px) { .site-header { min-height:68px; }.site-header nav { display:none; }.hero,.section-grid,.mara-layout,.studio-teaser,.gateway-panel { grid-template-columns:1fr; gap:2.2rem; }.hero { min-height:auto; padding-block:3rem; }.hero-art { min-height:390px; }.section-grid { padding-block:5rem 2rem; }.steps,.principles>div,.control-grid { grid-template-columns:1fr; }.steps article+article { padding-left:0; border-left:0; }.steps article { padding:1.5rem 0; }.mara-section { padding-block:5rem; }.studio-teaser { padding-block:5rem; }.site-footer { flex-direction:column; }.gateway-actions .button { width:100%; }.gateway-actions .button-secondary { margin:.6rem 0 0; }.studio-main { padding-block:3.5rem; } }