:root { --ivory:#f7f5f0; --paper:#fffdf9; --beige:#eee7d8; --green:#244c46; --green-dark:#123f39; --terracotta:#b85c43; --sage:#dfe9e1; --text:#252d2b; --muted:#62706c; --line:#d4ddd7; --warning:#8a4c17; --shadow:0 20px 55px rgba(36,76,70,.10); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:var(--ivory); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 90% 5%,rgba(223,233,225,.9),transparent 30rem),var(--ivory); }
button,input,textarea,select { font:inherit; } button { cursor:pointer; } a { color:inherit; }
.skip-link { position:absolute; left:-999px; top:0; padding:.8rem 1rem; background:var(--green); color:white; z-index:20; } .skip-link:focus { left:1rem; top:1rem; }
.site-header { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1rem,5vw,4.5rem); border-bottom:1px solid rgba(36,76,70,.12); }
.brand { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; font-size:1.3rem; font-weight:750; color:var(--green); }
.brand-mark { width:2.1rem; height:2.1rem; border-radius:50%; display:block; position:relative; overflow:hidden; flex:0 0 auto; background:var(--green); }
.brand-mark img { display:block; max-width:none; width:5.02rem; height:2.1rem; object-fit:fill; object-position:left center; }
.recipe-badge { color:var(--green); background:var(--sage); padding:.35rem .7rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em; }
#app { min-height:calc(100vh - 74px); }
.hero { min-height:calc(100vh - 74px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr); gap:clamp(2rem,6vw,7rem); padding:clamp(2.5rem,7vw,7rem) clamp(1.2rem,8vw,8rem); align-items:center; }
.hero-copy { max-width:50rem; } .eyebrow { margin:0 0 .8rem; color:var(--terracotta); font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,h3,h4 { color:var(--green); line-height:1.1; margin-top:0; } h1 { font-size:clamp(2.6rem,6vw,5.8rem); letter-spacing:-.045em; margin-bottom:1.3rem; } h2 { font-size:clamp(1.7rem,3vw,2.7rem); letter-spacing:-.025em; } h3 { font-size:1.2rem; } h4 { font-size:1rem; margin:1.25rem 0 .45rem; }
.hero-lead { font-size:clamp(1.1rem,2vw,1.45rem); line-height:1.55; color:var(--muted); max-width:40rem; }
.trust-list { display:grid; gap:.7rem; padding:0; margin:2rem 0 0; list-style:none; color:var(--green); } .trust-list li::before { content:"→"; color:var(--terracotta); margin-right:.7rem; }
.start-card { background:var(--paper); border:1px solid var(--line); border-radius:1.5rem; padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow); }
.demo-identity { border:1px solid var(--line); background:var(--sage); border-radius:.85rem; padding:1rem; margin:1rem 0 .5rem; color:var(--green); }
.demo-identity .field-label { margin-bottom:.3rem; }
.start-card label,dialog label { display:block; font-weight:700; color:var(--green); margin-bottom:.5rem; }
input[type="text"],input[type="password"],textarea,select { width:100%; border:1px solid #aebbb5; background:white; border-radius:.7rem; padding:.85rem 1rem; color:var(--text); line-height:1.45; }
textarea { resize:vertical; min-height:8rem; }
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid rgba(184,92,67,.28); outline-offset:2px; }
.muted { color:var(--muted); line-height:1.55; } .fine-print { color:var(--muted); font-size:.78rem; line-height:1.45; }
.button { appearance:none; border:1px solid transparent; border-radius:999px; padding:.78rem 1.2rem; font-weight:750; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
.button.primary { background:var(--green); color:white; } .button.primary:hover { background:var(--green-dark); } .button.secondary { background:transparent; color:var(--green); border-color:var(--green); } .button.ghost { background:var(--sage); color:var(--green); } .button:disabled { opacity:.55; cursor:wait; }
.button.danger { background:transparent; color:#8a2c20; border-color:#b66b5e; }
.start-card .button { width:100%; margin-top:1rem; }
.pilot-notice { width:min(100%,76rem); margin:0 auto; padding:clamp(2rem,6vw,5rem) clamp(1.1rem,5vw,4rem); }
.pilot-notice>header { max-width:58rem; margin-bottom:2rem; }
.notice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:2rem 0; }
.notice-section { background:var(--paper); border:1px solid var(--line); border-radius:1rem; padding:1.2rem; }
.notice-section h3 { margin-bottom:.55rem; }
.notice-section p { color:var(--muted); line-height:1.6; margin:0; }
.pilot-notice .start-card { max-width:40rem; }
.pilot-free-offer { display:inline-flex; flex-wrap:wrap; gap:.35rem; background:var(--sage); color:var(--green); border-radius:999px; padding:.55rem .9rem; font-size:.86rem; }
.pilot-help { border-left:4px solid var(--terracotta); background:var(--paper); border-radius:0 1rem 1rem 0; padding:1rem 1.2rem; margin:1.2rem 0; color:var(--muted); line-height:1.55; }
.pilot-help strong,.pilot-help a { color:var(--green); }
.pilot-help p { margin:.35rem 0 0; }
.consent-field { display:flex!important; align-items:flex-start; gap:.65rem; margin:1.2rem 0; color:var(--text)!important; line-height:1.5; }
.consent-field input { margin-top:.3rem; flex:0 0 auto; }
.retention-deadline { color:var(--warning); font-size:.82rem; line-height:1.45; }
.pilot-session-controls { border-top:1px solid var(--line); margin-top:1.2rem; padding-top:1rem; }
.pilot-session-controls .button { width:100%; }
.analysis-shell>.pilot-session-controls { max-width:38rem; margin:1.2rem auto 0; text-align:center; border:1px solid var(--line); border-radius:1rem; padding:1rem 1.2rem; background:var(--paper); }
.journey { display:grid; grid-template-columns:17rem minmax(0,1fr); min-height:calc(100vh - 74px); }
.journey-aside { padding:3rem 2rem 2rem clamp(1.2rem,4vw,3.5rem); border-right:1px solid var(--line); }
.step-list { list-style:none; padding:0; margin:2rem 0; display:grid; gap:.8rem; } .step-list li { color:var(--muted); font-size:.9rem; display:flex; gap:.65rem; align-items:center; } .step-list li::before { content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--line); flex:0 0 auto; } .step-list li.active { color:var(--green); font-weight:750; } .step-list li.active::before,.step-list li.done::before { background:var(--terracotta); }
.save-state { margin-top:2rem; font-size:.8rem; color:var(--muted); } .journey-main { padding:clamp(2rem,5vw,5rem); display:flex; justify-content:center; } .question-card,.review-card,.analysis-shell { width:min(100%,58rem); }
.progress-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.82rem; margin-bottom:2rem; } .progress-track { height:.35rem; background:var(--line); border-radius:999px; overflow:hidden; flex:1; } .progress-track span { display:block; height:100%; background:var(--terracotta); transition:width .25s ease; }
.question-card h1 { font-size:clamp(2rem,4vw,3.5rem); max-width:50rem; } .question-help { color:var(--muted); line-height:1.65; max-width:48rem; margin-bottom:1.7rem; }
.field-stack { display:grid; gap:1.1rem; } .field-group label,.field-label { display:block; color:var(--green); font-weight:700; margin-bottom:.5rem; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; } .choice { position:relative; display:flex; gap:.65rem; align-items:flex-start; min-height:3.7rem; padding:.85rem .9rem; border:1px solid var(--line); background:var(--paper); border-radius:.8rem; color:var(--green); } .choice:has(input:checked) { border-color:var(--terracotta); box-shadow:inset 0 0 0 1px var(--terracotta); background:#fff9f5; } .choice input { margin-top:.2rem; accent-color:var(--terracotta); }
.status-fieldset { border:0; padding:0; margin:1.4rem 0 0; } .status-fieldset legend { font-size:.78rem; color:var(--muted); margin-bottom:.55rem; } .status-options { display:flex; flex-wrap:wrap; gap:.6rem; } .status-options label { border:1px solid var(--line); border-radius:999px; padding:.5rem .75rem; color:var(--muted); font-size:.85rem; } .status-options label:has(input:checked) { background:var(--sage); border-color:var(--green); color:var(--green); } .status-options input { accent-color:var(--green); }
.question-actions { display:flex; justify-content:space-between; gap:1rem; margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--line); } .inline-error { color:#8a2c20; background:#f9e5df; border-radius:.7rem; padding:.8rem 1rem; margin:1rem 0; }
.review-list { display:grid; gap:.55rem; margin:1.5rem 0 2rem; } .review-row { display:grid; grid-template-columns:3.5rem 1fr auto; gap:1rem; align-items:center; background:var(--paper); border:1px solid var(--line); padding:.85rem 1rem; border-radius:.75rem; } .review-row strong { color:var(--green); } .review-row span small { display:block; color:var(--muted); margin-top:.3rem; } .review-row button { border:0; background:transparent; color:var(--terracotta); font-weight:700; } .review-actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.copy-review h2 { margin-top:2.2rem; font-size:clamp(1.35rem,2.4vw,2rem); }
.copy-review-list { display:grid; gap:.7rem; margin:1rem 0; }
.copy-review-item { background:var(--paper); border:1px solid var(--line); border-radius:.85rem; padding:1rem; }
.copy-review-item>div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.7rem; }
.copy-review-item p { margin:.7rem 0 .25rem; line-height:1.55; }
.copy-review-item small { color:var(--muted); }
.provenance-note { border-left:4px solid var(--terracotta); background:#fff9f5; border-radius:0 .85rem .85rem 0; padding:1rem 1.1rem; margin:1.4rem 0; }
.provenance-note h3 { margin-bottom:.5rem; }
.provenance-note p { line-height:1.55; }
.inline-warning { color:var(--warning); background:#fff2df; border-radius:.7rem; padding:.8rem 1rem; }
.copy-transfer-frame { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; border:0; }
.analysis-loading { min-height:60vh; display:grid; place-items:center; text-align:center; } .spinner { width:2.7rem; height:2.7rem; border:.3rem solid var(--sage); border-top-color:var(--terracotta); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 1rem; } @keyframes spin { to { transform:rotate(360deg); } }
.analysis-loading .elapsed { color:var(--green); } .analysis-loading .long-running { max-width:40rem; padding:1rem; border-radius:.8rem; background:var(--sage); color:var(--green); line-height:1.5; }
.clarification-card { width:min(100%,48rem); background:var(--paper); padding:clamp(1.4rem,4vw,3rem); border-radius:1.5rem; border:1px solid var(--line); box-shadow:var(--shadow); } .hypothesis { border-left:4px solid var(--terracotta); padding:.8rem 1rem; background:#fff9f5; color:var(--green); line-height:1.5; }
.analysis-shell { padding-bottom:5rem; } .analysis-header { padding:1rem 0 2.5rem; border-bottom:1px solid var(--line); margin-bottom:2rem; } .analysis-header h1 { font-size:clamp(2.3rem,5vw,4.8rem); } .analysis-intro { color:var(--muted); font-size:1.05rem; line-height:1.65; }
.summary-box { background:var(--green); color:white; border-radius:1.4rem; padding:clamp(1.4rem,4vw,2.8rem); margin:2rem 0; } .summary-box h2 { color:white; font-size:clamp(1.8rem,4vw,3.2rem); } .summary-box p { color:#dfe9e1; line-height:1.6; } .verb-row { display:flex; flex-wrap:wrap; gap:.55rem; } .verb-row span { background:rgba(255,255,255,.12); border-radius:999px; padding:.45rem .75rem; }
.analysis-section { margin:3rem 0; } .analysis-section>h2 { border-bottom:1px solid var(--line); padding-bottom:.8rem; } .analysis-item { position:relative; padding:1.1rem 0 1.25rem; border-bottom:1px solid var(--line); } .analysis-item p { color:var(--muted); line-height:1.65; } .evidence-quote { margin:1rem 0 .55rem; padding:.85rem 1rem; border-left:3px solid var(--terracotta); background:var(--sage); color:var(--green); line-height:1.55; } .evidence-quote span { display:block; margin-top:.55rem; color:var(--muted); font-size:.76rem; font-weight:700; font-style:normal; } .partial-reading,.clarification-impact { border:1px solid var(--line); border-radius:1rem; padding:1.3rem; background:var(--paper); } .correction-link { border:0; background:transparent; padding:.4rem 0; color:var(--terracotta); font-weight:750; }
.analysis-part { margin:3.5rem 0; } .analysis-part>h2 { padding-bottom:.8rem; border-bottom:1px solid var(--line); } .cross-reading { border-left:4px solid var(--terracotta); background:var(--paper); padding:1.2rem 1.3rem; margin:1rem 0; border-radius:0 1rem 1rem 0; } .cross-reading p { line-height:1.65; } .status-capsule { display:inline-block; padding:.3rem .6rem; border-radius:999px; background:var(--sage); color:var(--green); font-size:.72rem; font-weight:800; } .comparison-criteria,.open-points { border:1px solid var(--line); border-radius:1rem; padding:1.2rem; margin:1.3rem 0; background:var(--paper); } .comparison-context { border-left:4px solid var(--terracotta); border-radius:0 .9rem .9rem 0; padding:1rem 1.1rem; margin:1.2rem 0; background:var(--beige); color:var(--muted); } .comparison-context strong,.awaited-clarification strong,.hypothesis-label { color:var(--terracotta); font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .comparison-context p { margin:.45rem 0 0; line-height:1.6; } .self-exploration { border-color:var(--line); } .self-exploration>p { color:var(--muted); line-height:1.55; } .awaited-clarification { border:1px solid var(--terracotta); border-radius:.9rem; padding:1rem 1.1rem; margin:1.3rem 0; background:#fff9f5; color:var(--muted); } .awaited-clarification h4 { color:var(--green); margin:.65rem 0 .35rem; } .hypothesis-label { margin:0 0 .45rem!important; } .journey-information { border:1px solid var(--line); border-radius:.8rem; padding:.9rem 1rem; margin:1.3rem 0; background:var(--beige); color:var(--muted); } .journey-information strong { color:var(--green); font-size:.86rem; } .journey-information p { margin:.35rem 0 0; line-height:1.55; } .annexes details { border:1px solid var(--line); border-radius:.9rem; margin:.8rem 0; background:var(--paper); padding:0 1.1rem; } .annexes summary { color:var(--green); font-weight:800; cursor:pointer; padding:1rem 0; } .annexes details[open] summary { border-bottom:1px solid var(--line); margin-bottom:.5rem; } .reserve { border-left:2px solid var(--line); padding-left:.7rem; }
.essential-detail[hidden] { display:none; } .constraint-field fieldset { border:0; padding:0; margin:1rem 0 .7rem; } .constraint-field legend { color:var(--green); font-weight:700; margin-bottom:.5rem; } .unknown-field { display:inline-flex!important; align-items:center; gap:.5rem; color:var(--muted)!important; font-weight:600!important; }
.path-card { background:var(--paper); border:1px solid var(--line); border-radius:1rem; padding:1.2rem; margin:.8rem 0; } .path-card h4 { font-size:1.15rem; } .path-card ul,.path-card .path-detail { color:var(--text); font-size:1.02rem; line-height:1.65; }
.integrated-story .narrative-paragraph { margin:0 0 1.25rem; } .integrated-story .narrative-paragraph>p:first-child { font-size:1.08rem; line-height:1.75; color:var(--text); } .clarification-effect { border-left:3px solid var(--terracotta); padding-left:1rem; line-height:1.7; } .arbitration-box { border:1px solid var(--terracotta); border-radius:1rem; padding:1.3rem; margin:1.6rem 0; background:var(--paper); } .arbitration-box h3 { color:var(--green); font-size:clamp(1.35rem,2.4vw,1.9rem); } .path-experiment { border-top:1px solid var(--line); margin-top:1.2rem; padding-top:.7rem; }
.demo-tools { margin-top:1.5rem; padding:1rem; border:1px solid var(--line); border-radius:.85rem; background:var(--paper); color:var(--green); }
.demo-tools p { color:var(--muted); font-size:.78rem; line-height:1.4; }
.demo-tools .button { width:100%; font-size:.78rem; padding:.6rem .75rem; }
.clarification-inline { border-left:4px solid var(--terracotta); background:#fff9f5; padding:1rem 1.1rem; margin-top:1.2rem; } .clarification-inline h3 { margin-bottom:.55rem; }
.closing-box { background:var(--sage); border-radius:1.2rem; padding:clamp(1.3rem,3vw,2rem); margin:3rem 0 1.5rem; } .closing-box h2 { font-size:clamp(1.45rem,2.5vw,2.1rem); } .closing-box h3 { margin:1.4rem 0 .5rem; } .closing-box p:last-child { color:var(--green); line-height:1.6; margin-bottom:0; }
.analysis-actions { position:sticky; bottom:1rem; background:rgba(247,245,240,.94); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:999px; padding:.55rem; display:flex; gap:.55rem; justify-content:center; box-shadow:var(--shadow); } .partial-banner { background:#fff2df; color:var(--warning); border-radius:.75rem; padding:.85rem 1rem; margin:1rem 0; }
.toast { position:fixed; right:1rem; bottom:1rem; transform:translateY(130%); transition:transform .2s ease; background:var(--green); color:white; padding:.8rem 1rem; border-radius:.75rem; z-index:30; max-width:24rem; } .toast.show { transform:translateY(0); }
.support-shell { width:min(100%,76rem); min-height:calc(100vh - 74px); margin:0 auto; padding:clamp(2rem,6vw,5rem) clamp(1.1rem,5vw,4rem); }
.support-login { max-width:48rem; }
.support-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.support-heading h1,.support-login h1 { font-size:clamp(2.3rem,5vw,4.8rem); }
.support-safety-note { border:1px solid var(--terracotta); border-radius:1rem; padding:1rem 1.2rem; background:#fff9f5; color:var(--muted); }
.support-safety-note strong { color:var(--terracotta); text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; }
.support-safety-note p { margin:.4rem 0 0; line-height:1.55; }
.support-create { display:grid; grid-template-columns:1fr auto; align-items:end; gap:1rem; margin:1.5rem 0; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--paper); }
.support-create label { display:block; color:var(--green); font-weight:700; margin-bottom:.4rem; }
.support-invitation { margin:1.5rem 0; padding:1.2rem; border-radius:1rem; background:var(--sage); border:1px solid var(--green); }
.support-invitation textarea { min-height:5rem; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; }
.support-records { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.5rem; }
.support-record { background:var(--paper); border:1px solid var(--line); border-radius:1rem; padding:1.2rem; }
.support-record dl { margin:1rem 0; display:grid; gap:.5rem; }
.support-record dl div { display:grid; grid-template-columns:minmax(8rem,.8fr) minmax(0,1.2fr); gap:.8rem; border-bottom:1px solid var(--line); padding-bottom:.5rem; }
.support-record dt { color:var(--muted); font-size:.78rem; }
.support-record dd { margin:0; color:var(--green); font-weight:700; overflow-wrap:anywhere; }
.form-error { color:#8a2c20; margin-top:.8rem; }
dialog { border:0; border-radius:1.2rem; padding:0; width:min(92vw,36rem); box-shadow:0 30px 90px rgba(0,0,0,.22); } dialog::backdrop { background:rgba(18,63,57,.5); backdrop-filter:blur(3px); } dialog form { padding:1.6rem; } .dialog-actions { display:flex; justify-content:flex-end; gap:.7rem; margin-top:1rem; }
@media (max-width:800px) { .hero { grid-template-columns:1fr; padding-top:3rem; } .notice-grid,.support-records { grid-template-columns:1fr; } .support-heading,.support-create { display:grid; grid-template-columns:1fr; } .journey { grid-template-columns:1fr; } .journey-aside { padding:1rem 1.2rem; border-right:0; border-bottom:1px solid var(--line); } .journey-aside .eyebrow,.step-list { display:none; } .save-state { margin:0; } .journey-main { padding:1.5rem 1.1rem 5rem; } .choice-grid { grid-template-columns:1fr; } .question-actions { position:sticky; bottom:0; background:var(--ivory); padding-bottom:.8rem; } .analysis-actions { border-radius:1rem; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }