:root { --ink:#20322c; --forest:#1c493d; --moss:#47755d; --paper:#f5f0e6; --cream:#fffdf8; --line:#c8cbbb; --sun:#f2b74f; --sun-lite:#fff0c9; --rust:#bd5c43; --blue:#6a8993; --muted:#62716b; --serif:Fraunces, Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
[hidden] { display:none !important; }
* { box-sizing:border-box; } html { background:var(--paper); scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } button, input, select { font:inherit; } button { cursor:pointer; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid var(--sun); outline-offset:3px; } .skip-link { position:fixed; z-index:99; left:1rem; top:-5rem; padding:.75rem 1rem; background:var(--ink); color:white; } .skip-link:focus { top:1rem; }
.app-shell { min-height:100vh; background:linear-gradient(106deg,#ece6d8 0 20%,var(--paper) 20%); } .topbar { height:86px; display:flex; align-items:center; gap:2rem; padding:0 clamp(1.25rem,4vw,4.5rem); border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:.65rem; color:var(--ink); text-decoration:none; line-height:.88; font-family:var(--serif); font-size:1.05rem; } .brand em { color:var(--forest); font-style:italic; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--forest); color:var(--sun); font:600 1.25rem var(--serif); } .brand-mark.small { width:26px;height:26px;font-size:1rem; } .mission-meta { display:flex; gap:1rem; align-items:center; margin-left:auto; color:var(--muted); font-size:.77rem; } .eyebrow,.mission-chip,.step-count { font:500 .68rem/1.3 var(--mono); letter-spacing:.09em; } .time { padding-left:1rem; border-left:1px solid var(--line); } .quiet-button,.back-button { border:0; background:transparent; color:var(--ink); font-size:.85rem; text-decoration:underline; text-underline-offset:4px; } .quiet-button:hover { color:var(--forest); }
.mission-layout { display:grid; grid-template-columns:230px minmax(0,1fr); max-width:1440px; min-height:calc(100vh - 86px); margin:auto; } .path { padding:3.8rem 1.75rem 2rem clamp(1.25rem,4vw,4.5rem); border-right:1px solid var(--line); background:rgba(237,231,216,.72); } .path-label { margin:0 0 1.3rem; font:500 .68rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .path ol { margin:0; padding:0; list-style:none; position:relative; } .path ol:before { content:""; position:absolute; height:calc(100% - 30px); left:13px; top:15px; border-left:1px dashed #a2afa4; } .path li { position:relative; } .path-step { width:100%; display:grid; grid-template-columns:27px 1fr; column-gap:.55rem; align-items:center; text-align:left; padding:.65rem 0; border:0; background:none; color:#748078; } .path-step span { grid-row:span 2; z-index:1; display:grid; place-items:center; width:27px; height:27px; border:1px solid #aeb8ac; border-radius:50%; background:#ece7d9; color:#6f7c71; font:.58rem var(--mono); } .path-step strong { font-size:.86rem; font-weight:600; } .path-step small { font-size:.69rem; } .path-step.active,.path-step:hover { color:var(--forest); } .path-step.active span { border-color:var(--forest); background:var(--forest); color:#fff7df; } .path-step.done span { background:var(--sun); border-color:var(--sun); color:var(--ink); } .path-note { margin:2.25rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; line-height:1.45; }
.canvas { position:relative; display:flex; flex-direction:column; min-width:0; padding:clamp(2rem,5vw,4.75rem) clamp(1.25rem,7vw,7.5rem) 1.2rem; overflow:hidden; } .canvas:before,.canvas:after { content:""; position:absolute; border-radius:50%; pointer-events:none; } .canvas:before { width:520px;height:520px; top:-330px;right:-210px; background:radial-gradient(circle,rgba(242,183,79,.18),transparent 66%); } .canvas:after { width:260px;height:260px; bottom:-150px;left:14%; border:1px solid rgba(71,117,93,.14); } .canvas-topline,.canvas-footer,.stage { position:relative; z-index:1; } .canvas-topline { display:flex; justify-content:space-between; align-items:center; color:var(--muted); } .mission-chip { padding:.42rem .6rem; border:1px solid var(--line); background:rgba(255,253,248,.5); } .step-count { color:var(--moss); }.stage { flex:1; max-width:980px; margin:clamp(2rem,7vh,5.7rem) auto 2rem; width:100%; animation:stage-in .45s ease both; } .stage[hidden] { display:none; } .kicker { margin:0 0:.7rem; color:var(--rust); font:500 .74rem var(--mono); letter-spacing:.12em; text-transform:uppercase; } h1,h2 { margin:0; max-width:730px; font:600 clamp(2.45rem,5.4vw,5.25rem)/.98 var(--serif); letter-spacing:-.055em; } h1 i,h2 i { color:var(--moss); } h1 i { font-style:italic; } h2 { font-size:clamp(2.3rem,4.4vw,4.25rem); } .lede { max-width:510px; margin:1.35rem 0 0; color:#4f6058; font-size:1rem; line-height:1.55; } .lede em { color:var(--forest); font-style:normal; font-weight:700; }
.claim-board { width:min(590px,100%); margin:clamp(2rem,5vw,4.3rem) auto 1.8rem; padding:1.25rem 1.45rem 1rem; background:var(--cream); border:1px solid #d4cfbf; box-shadow:8px 8px 0 rgba(71,117,93,.12); transform:rotate(-1.25deg); } .ai-stamp { display:inline-flex; gap:.4rem; align-items:center; color:var(--forest); font:500 .67rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }.ai-stamp span { color:var(--sun); font-size:1rem; } blockquote { margin:1rem 0 1.2rem; font:600 clamp(1.48rem,3vw,2.35rem)/1.12 var(--serif); letter-spacing:-.03em; } .claim-footer { display:flex; align-items:center; justify-content:space-between; padding-top:.8rem; border-top:1px dashed var(--line); color:var(--muted); font:.61rem var(--mono); letter-spacing:.08em; } .curve-arrow { font-size:1.35rem; color:var(--rust); }.choice-fieldset { max-width:750px; margin:0 auto; padding:0; border:0; } .choice-fieldset legend { width:100%; margin-bottom:.8rem; font-size:.9rem; font-weight:600; }.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }.choice-card { min-height:100px; display:flex; gap:.65rem; padding:1rem; text-align:left; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:2px; font-size:.85rem; line-height:1.35; transition:transform .2s,background .2s,border-color .2s; }.choice-card:hover,.choice-card.selected { transform:translateY(-3px); background:var(--sun-lite); border-color:#d69c32; }.choice-index { color:var(--rust); font:500 .72rem var(--mono); }.selection-note,.check-note,.make-note { min-height:1.3em; margin:.7rem auto 0; max-width:750px; color:var(--moss); font-size:.78rem; }
.split-head { display:flex; justify-content:space-between; gap:2rem; align-items:end; }.split-head .lede { margin:0 0 .35rem; }.split-claim { display:flex; justify-content:center; align-items:center; gap:clamp(.4rem,2vw,1.6rem); margin:clamp(3rem,8vw,6.4rem) 0 1.3rem; }.claim-part { padding:.8rem .7rem; background:transparent; border:0; color:var(--ink); text-align:center; border-bottom:2px solid var(--moss); }.claim-part span { display:block; font:600 clamp(1.4rem,3.5vw,2.8rem)/1.05 var(--serif); }.claim-part small { display:block; max-width:150px; margin:.55rem auto 0; color:var(--muted); font-size:.68rem; line-height:1.25; opacity:0; transition:opacity .2s; }.claim-part:hover small,.claim-part.selected small { opacity:1; }.claim-part.selected { border-color:var(--rust); color:var(--rust); }.operator { color:#a5aca5; font:1.7rem var(--serif); }.assumption-card { position:relative; max-width:500px; margin:0 auto; padding:1rem 1.15rem 1.1rem 1.75rem; background:var(--sun-lite); border-left:3px solid var(--sun); }.assumption-card .pin { position:absolute; top:-15px; left:-10px; color:var(--rust); font-size:1.35rem; }.assumption-card .eyebrow { margin:0; color:var(--rust); }.assumption-card h3 { margin:.5rem 0; font:600 1.25rem/1.2 var(--serif); }.assumption-card p { margin:0; font-size:.82rem; line-height:1.45; }.parent-prompt { display:flex; gap:.65rem; max-width:500px; margin:1.4rem auto; color:var(--forest); font-size:.79rem; }.parent-prompt span { color:var(--rust); }.parent-prompt p { margin:0; line-height:1.45; }
.evidence-workspace { position:relative; display:grid; grid-template-columns:200px 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; margin-top:3.5rem; }.mini-claim { position:relative; padding:1.1rem; border:1px solid var(--forest); background:var(--cream); }.mini-claim p { margin:0 0:.6rem; color:var(--moss); }.mini-claim strong { font:600 1.35rem/1.1 var(--serif); }.mini-claim>span { position:absolute; right:-13px; top:calc(50% - 13px); display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--sun);font:600 1.1rem var(--serif); }.evidence-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }.evidence-card { position:relative; z-index:2; min-height:218px; display:flex; flex-direction:column; padding:1rem; text-align:left; border:1px solid var(--line); background:var(--cream); color:var(--ink); transition:transform .2s, border-color .2s; }.evidence-card:hover,.evidence-card.chosen { border-color:var(--forest); transform:translateY(-5px); }.evidence-type { color:var(--moss); font:500 .6rem var(--mono); letter-spacing:.08em; }.evidence-type.rust { color:var(--rust); }.evidence-type.blue { color:var(--blue); }.evidence-card h3 { margin:.85rem 0 .5rem; font:600 1.1rem/1.13 var(--serif); }.evidence-card p { margin:0; color:var(--muted); font-size:.74rem; line-height:1.35; }.use-clue { margin-top:auto; padding-top:.8rem; color:var(--forest); font-size:.65rem; font-weight:600; }.use-clue b { margin-left:.2rem; }.evidence-link { position:absolute; z-index:1; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }.evidence-link path { fill:none; stroke:var(--forest); stroke-width:1.5; stroke-dasharray:5 5; animation:draw-link 2s linear infinite; }.check-note { max-width:none; margin:1.2rem 0 0; text-align:right; }
.maker-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,5vw,4.5rem); align-items:center; margin-top:3.4rem; }.answer-builder { display:grid; gap:.45rem; }.answer-builder label { margin-top:.8rem; font-size:.74rem; font-weight:700; }.answer-builder select,.answer-builder input { width:100%; padding:.78rem .8rem; border:1px solid var(--line); border-radius:0; background:var(--cream); color:var(--ink); font-size:.83rem; }.answer-preview { min-height:255px; display:flex; flex-direction:column; justify-content:center; padding:1.6rem; background:var(--forest); color:#fff9e9; transform:rotate(1deg); box-shadow:9px 9px 0 var(--sun); }.answer-preview .eyebrow { color:#e7c870; }.answer-preview>p { margin:.7rem 0; font:600 clamp(1.25rem,2.4vw,1.85rem)/1.22 var(--serif); letter-spacing:-.025em; }.draft-mark { color:#c5d7c5; font:.65rem var(--mono); }.make-note { margin:2rem 0 0; max-width:none; text-align:center; }
.receipt-heading { text-align:center; }.receipt-heading .lede { margin-left:auto;margin-right:auto; }.receipt { width:min(650px,100%); margin:2.7rem auto 0; background:var(--cream); border:1px solid #c7bfaa; box-shadow:8px 8px 0 rgba(32,50,44,.1); }.receipt-top { display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.2rem; border-bottom:1px dashed #b7b4a8; }.receipt-top .eyebrow { margin:0;color:var(--muted); }.receipt-top strong { display:block; margin-top:.15rem; font:600 1.05rem var(--serif); }.receipt-top time { margin-left:auto; color:var(--muted); font:.58rem var(--mono); }.receipt dl { margin:0; padding:.5rem 1.2rem; }.receipt dl div { display:grid; grid-template-columns:125px 1fr; gap:1rem; padding:.8rem 0; border-bottom:1px solid #e0dbcd; }.receipt dt { color:var(--rust); font:500 .58rem/1.4 var(--mono); letter-spacing:.08em; }.receipt dd { margin:0; font-size:.78rem; line-height:1.45; }.receipt-answer { margin:1rem; padding:1rem; background:var(--sun-lite); }.receipt-answer span { color:var(--rust); font:500 .59rem var(--mono); letter-spacing:.08em; }.receipt-answer p { margin:.45rem 0 0; font:600 1rem/1.28 var(--serif); }.takeaway { display:flex; gap:.6rem; width:min(650px,100%); margin:1.1rem auto; color:var(--forest); font-size:.8rem; }.takeaway span { color:var(--sun); }.takeaway p { margin:0; }
.canvas-footer { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:1rem; min-height:58px; margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); }.canvas-footer p { margin:0; text-align:center; color:var(--muted); font-size:.71rem; }.back-button { justify-self:start; }.back-button:disabled { visibility:hidden; }.next-button { justify-self:end; min-width:116px; padding:.65rem .85rem; border:1px solid var(--forest); background:var(--forest); color:#fff9e9; font-size:.82rem; transition:background .2s, transform .2s; }.next-button:hover { background:var(--moss); transform:translateX(2px); }.next-button span { margin-left:.5rem; color:var(--sun); font-size:1rem; } @keyframes stage-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } @keyframes draw-link { to { stroke-dashoffset:-20; } }
@media (max-width:850px) { .app-shell { background:var(--paper); }.mission-layout { grid-template-columns:1fr; }.path { order:2; padding:1rem 1.25rem; border-right:0; border-top:1px solid var(--line); background:#ece7d9; }.path-label,.path-note { display:none; }.path ol { display:flex; justify-content:space-between; }.path ol:before { width:calc(100% - 60px); height:0; top:14px; left:30px; border-top:1px dashed #a2afa4; border-left:0; }.path-step { display:block; width:auto; padding:0; text-align:center; }.path-step span { position:relative; margin:auto; }.path-step strong { display:block; margin-top:.3rem; font-size:.62rem; }.path-step small { display:none; }.canvas { min-height:calc(100vh - 86px); padding:2rem 1.25rem 1rem; }.stage { margin:3.2rem auto 2rem; }.evidence-workspace { grid-template-columns:1fr; }.mini-claim { width:220px; margin:auto; }.evidence-link { display:none; }.evidence-cards { grid-template-columns:repeat(3,minmax(170px,1fr)); overflow-x:auto; padding:.4rem 0 1rem; }.evidence-card { min-width:180px; }.split-head { display:block; }.split-head .lede { margin-top:1rem; }.maker-grid { grid-template-columns:1fr; }.answer-preview { min-height:180px; }.claim-part small { display:none; } }
@media (max-width:560px) { .topbar { height:70px;padding:0 1rem; }.mission-meta { display:none; }.quiet-button { margin-left:auto; }.canvas { min-height:calc(100vh - 70px); }.canvas-topline .mission-chip { max-width:205px; }.step-count { font-size:.57rem; } h1 { font-size:2.45rem; } h2 { font-size:2.2rem; }.stage { margin-top:2.7rem; }.claim-board { padding:1.1rem; }.choice-grid { grid-template-columns:1fr; }.choice-card { min-height:0; }.split-claim { gap:.15rem; margin-top:3rem; }.claim-part { padding:.55rem .25rem; }.claim-part span { font-size:1.13rem; }.operator { font-size:1rem; }.receipt dl div { grid-template-columns:1fr; gap:.3rem; }.receipt-top time { display:none; }.canvas-footer { grid-template-columns:auto 1fr; }.canvas-footer p { display:none; }.next-button { grid-column:2; }.evidence-cards { margin-right:-1.25rem; }.path { padding-left:1rem;padding-right:1rem; } }
.field-note { margin:.15rem 0 0; color:var(--muted); font-size:.67rem; line-height:1.4; }
.receipt-practice { margin:1rem; padding-top:.9rem; border-top:1px dashed #b7b4a8; }
.receipt-practice>span { color:var(--rust); font:500 .59rem var(--mono); letter-spacing:.08em; }
.receipt-practice ul { display:flex; flex-wrap:wrap; gap:.4rem .7rem; margin:.65rem 0 0; padding:0; list-style:none; }
.receipt-practice li { color:var(--forest); font-size:.68rem; }
.receipt-practice li:before { content:"✓"; margin-right:.28rem; color:var(--moss); }
.receipt-actions { display:flex; justify-content:flex-end; gap:.55rem; margin:1rem; }
.receipt-button { padding:.58rem .66rem; border:1px solid var(--forest); background:transparent; color:var(--forest); font-size:.69rem; font-weight:600; }
.receipt-button.primary { background:var(--forest); color:#fff9e9; }
.receipt-button:hover { background:var(--sun-lite); }
.receipt-button.primary:hover { background:var(--moss); }
.receipt-action-status { min-height:1.25em; margin:-.55rem 1rem .9rem; color:var(--moss); text-align:right; font-size:.67rem; }
@media (max-width:560px) { .receipt-actions { flex-direction:column-reverse; }.receipt-button { width:100%; } }
@media print { @page { margin:16mm; } body { background:#fff; } .topbar,.path,.canvas-topline,.canvas-footer,.takeaway,.receipt-actions,.receipt-action-status { display:none !important; } .app-shell,.mission-layout,.canvas { display:block; min-height:0; padding:0; background:#fff; } .stage { display:none !important; } .stage[data-stage="4"] { display:block !important; margin:0; } .receipt-heading { text-align:left; } .receipt { width:100%; margin-top:1.2rem; box-shadow:none; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
.live-mission { max-width:750px; margin:2rem auto 0; padding:1.15rem; border:1px solid #c9bfaa; background:rgba(255,253,248,.72); box-shadow:5px 5px 0 rgba(189,92,67,.11); } .live-mission-copy { display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem 1rem; } .live-mission-copy .eyebrow { margin:0; color:var(--rust); } .live-mission h2 { margin:0; font-size:clamp(1.25rem,2.4vw,1.85rem); letter-spacing:-.035em; } .live-mission-copy p:last-child { flex-basis:100%; margin:.1rem 0 .8rem; color:var(--muted); font-size:.76rem; line-height:1.4; } .live-mission-form { display:grid; grid-template-columns:1fr 90px auto; gap:.35rem .55rem; align-items:end; } .live-mission-form label { font-size:.67rem; font-weight:700; } .live-mission-form input,.live-mission-form select { min-width:0; padding:.58rem .65rem; border:1px solid var(--line); background:var(--cream); color:var(--ink); font-size:.78rem; } .live-mission-form button { grid-column:3; grid-row:1 / span 2; padding:.62rem .72rem; border:1px solid var(--rust); background:var(--rust); color:#fffaf0; font-size:.72rem; font-weight:700; } .live-mission-form button:hover { background:#a84e37; } .live-mission-form button:disabled { cursor:wait; opacity:.65; } .live-mission-status { min-height:1.2em; margin:.65rem 0 0; color:var(--moss); font-size:.69rem; } .live-mission-status.error { color:var(--rust); } .live-mission-result { margin-top:1rem; padding:1rem; border-top:1px dashed #b7b4a8; background:var(--sun-lite); } .live-result-top { display:flex; justify-content:space-between; gap:.75rem; color:var(--rust); font:500 .59rem var(--mono); letter-spacing:.08em; } .live-result-top strong { color:var(--ink); font-weight:500; } .live-mission-result blockquote { margin:.75rem 0; font-size:clamp(1.2rem,2.4vw,1.65rem); } .live-pause { margin:0 0 .85rem; color:var(--forest); font-weight:700; font-size:.82rem; } .live-assumption { padding:.75rem; border-left:3px solid var(--rust); background:rgba(255,253,248,.6); } .live-assumption span,.live-evidence-list span { display:block; color:var(--rust); font:500 .58rem var(--mono); letter-spacing:.08em; } .live-assumption strong { display:block; margin:.2rem 0; font:600 1rem/1.2 var(--serif); } .live-assumption p,.live-evidence-list p { margin:.25rem 0 0; color:var(--muted); font-size:.73rem; line-height:1.4; } .live-evidence-list { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin:1rem 0; padding:0; list-style:none; } .live-evidence-list li { padding:.65rem; background:var(--cream); border:1px solid #d8d1bf; } .live-evidence-list strong { display:block; margin-top:.25rem; font:600 .83rem/1.15 var(--serif); } .live-parent-prompt,.live-uncertainty { margin:.55rem 0 0; color:var(--forest); font-size:.72rem; line-height:1.4; } .live-uncertainty { color:var(--muted); }
.judge-access-form { display:grid; grid-template-columns:1fr auto; gap:.35rem .55rem; align-items:end; } .judge-access-form label { grid-column:1 / -1; font-size:.67rem; font-weight:700; } .judge-access-form input { min-width:0; padding:.58rem .65rem; border:1px solid var(--line); background:var(--cream); color:var(--ink); font-size:.78rem; } .judge-access-form button { padding:.62rem .72rem; border:1px solid var(--rust); background:var(--rust); color:#fffaf0; font-size:.72rem; font-weight:700; } .judge-access-form button:hover { background:#a84e37; } .judge-access-form button:disabled { cursor:wait; opacity:.65; }
.openai-evidence { max-width:750px; margin:1.2rem auto 0; padding:1.15rem 1.2rem; border:1px solid #b8c6b7; background:linear-gradient(118deg,rgba(223,233,219,.72),rgba(255,253,248,.75)); box-shadow:5px 5px 0 rgba(71,117,93,.1); } .openai-evidence .eyebrow { margin:0; color:var(--forest); } .openai-evidence h2 { margin:.4rem 0 1rem; font-size:clamp(1.4rem,2.7vw,2.1rem); line-height:1; letter-spacing:-.04em; } .openai-evidence h2 i { color:var(--moss); } .openai-evidence dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:0; } .openai-evidence dl div { padding:.75rem; border-top:1px dashed rgba(71,117,93,.45); background:rgba(255,253,248,.48); } .openai-evidence dt { color:var(--rust); font:500 .61rem var(--mono); letter-spacing:.08em; } .openai-evidence dd { margin:.32rem 0 0; color:var(--muted); font-size:.73rem; line-height:1.42; } .openai-evidence-note { margin:.85rem 0 .55rem; color:var(--forest); font-size:.73rem; line-height:1.42; font-weight:600; } .openai-evidence a { color:var(--forest); font-size:.72rem; font-weight:700; text-underline-offset:4px; }
.purpose-note { display:grid; grid-template-columns:minmax(150px,190px) minmax(0,1fr); gap:clamp(1.1rem,3vw,2.2rem); align-items:center; max-width:750px; margin:clamp(1.7rem,4vw,2.6rem) auto 1.2rem; padding:1rem 1.2rem; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); } .purpose-figure { position:relative; min-height:126px; overflow:hidden; border:1px solid #c8cbbb; background:linear-gradient(145deg,#dfe9db 0 52%,#f8e4a7 52%); } .purpose-figure:before { content:""; position:absolute; width:116px; height:116px; right:-38px; top:-53px; border:1px dashed rgba(28,73,61,.38); border-radius:50%; } .figure-person { position:absolute; bottom:18px; display:block; width:30px; height:58px; border-radius:17px 17px 7px 7px; background:var(--forest); transform-origin:bottom center; } .figure-person:before { content:""; position:absolute; left:3px; top:-24px; width:24px; height:24px; border-radius:50%; background:#d48762; box-shadow:inset 0 -4px 0 rgba(110,61,49,.12); } .figure-parent { left:35px; transform:rotate(-5deg); } .figure-child { left:87px; bottom:19px; width:25px; height:45px; border-radius:14px 14px 6px 6px; background:var(--moss); transform:rotate(7deg); } .figure-child:before { left:2px; top:-20px; width:21px; height:21px; background:#e4ad73; } .figure-question { position:absolute; display:grid; place-items:center; left:122px; top:26px; width:31px; height:31px; border-radius:50%; background:var(--cream); color:var(--rust); font:600 1.25rem var(--serif); box-shadow:2px 2px 0 rgba(189,92,67,.18); animation:question-bob 3.8s ease-in-out infinite; } .figure-card { position:absolute; display:block; width:47px; height:31px; border:1px solid rgba(32,50,44,.28); background:var(--cream); box-shadow:2px 2px 0 rgba(32,50,44,.1); } .figure-card-one { left:12px; top:17px; transform:rotate(-8deg); } .figure-card-two { right:11px; bottom:12px; transform:rotate(8deg); } .purpose-copy .eyebrow { margin:0; color:var(--rust); } .purpose-copy h2 { max-width:500px; margin:.35rem 0 .55rem; font-size:clamp(1.45rem,2.9vw,2.2rem); line-height:1.02; letter-spacing:-.04em; } .purpose-copy>p:not(.eyebrow):not(.purpose-promise) { max-width:530px; margin:0; color:var(--muted); font-size:.8rem; line-height:1.48; } .purpose-promise { display:flex; gap:.45rem; margin:.7rem 0 0; color:var(--forest); font-size:.74rem; font-weight:700; } .purpose-promise span { color:var(--sun); } .stage.active .purpose-note { animation:purpose-reveal .58s .08s ease both; } .stage.active .claim-board { animation:card-arrive .55s .16s ease both; } @keyframes purpose-reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } @keyframes card-arrive { from { opacity:0; transform:rotate(-2.5deg) translateY(14px); } to { opacity:1; transform:rotate(-1.25deg); } } @keyframes question-bob { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-6px) rotate(4deg); } }
@media (max-width:560px) { .live-mission-form { grid-template-columns:1fr; } .live-mission-form button { grid-column:auto; grid-row:auto; } .live-evidence-list { grid-template-columns:1fr; } }
@media (max-width:560px) { .openai-evidence dl { grid-template-columns:1fr; } }
@media (max-width:560px) { .judge-access-form { grid-template-columns:1fr; } .judge-access-form label { grid-column:auto; } }
@media (max-width:560px) {
  .purpose-note { grid-template-columns:1fr; gap:.75rem; padding:.85rem; }
  .purpose-figure { width:126px; min-height:112px; }
  .figure-parent { left:21px; }
  .figure-child { left:61px; }
  .figure-question { left:90px; top:17px; }
  .purpose-copy h2 { font-size:1.5rem; }
  .purpose-copy>p:not(.eyebrow):not(.purpose-promise) { font-size:.76rem; }
  .purpose-promise { font-size:.7rem; }
}