@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root{--paper:#f7f6fb;--paper2:#eeecf6;--ink:#202137;--muted:#707188;--line:#d9d6e7;--green:#6547c7;--lime:#72d8f4;--orange:#ec6b9e;--dark:#20203a;--sans:"Inter",sans-serif;--mono:"DM Mono",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.8}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
.site-header{height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:10}.brand{display:flex;align-items:center;gap:10px;font:600 21px var(--mono);letter-spacing:-1px}.brand svg{width:29px;height:29px}.site-header nav{display:flex;align-items:center;gap:30px;font:500 12px var(--mono)}.nav-cta{border:1px solid var(--ink);padding:9px 17px}.nav-cta:hover{background:var(--ink);color:var(--paper)}
.hero{text-align:center;padding:92px 0 106px}.eyebrow,.section-label{font:500 11px var(--mono);letter-spacing:.16em}.eyebrow{display:flex;justify-content:center;align-items:center;gap:10px;color:var(--green)}.eyebrow span{width:7px;height:7px;background:var(--lime);border:2px solid var(--green);border-radius:50%;box-sizing:content-box}.hero h1{font-size:clamp(50px,7vw,92px);line-height:1.18;letter-spacing:-.065em;margin:24px 0 28px;font-weight:600}.hero h1 em,.feature h3 em,.closing h2 em{font-style:normal;color:var(--green);position:relative}.hero h1 em:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:7px;background:var(--lime);z-index:-1;transform:rotate(-1deg)}.hero-copy{font-size:16px;line-height:2;color:#575c57}.hero-actions{display:flex;justify-content:center;gap:10px;margin:38px 0 0}.hero-screenshot{margin:64px auto 0;max-width:1080px}.hero-screenshot img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 28px 70px #4d416b24}.hero-screenshot figcaption{display:grid;gap:5px;margin-top:14px;text-align:left;color:var(--muted);font:400 10px/1.65 var(--mono)}.hero-screenshot figcaption strong{color:var(--ink);font-weight:500}.hero-screenshot figcaption a{color:var(--green);text-decoration:underline;text-underline-offset:2px}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-width:228px;padding:14px 18px;font:500 12px var(--mono);transition:.2s}.button.primary{background:var(--ink);color:white;border:1px solid var(--ink)}.button.primary:hover{background:var(--green)}.button.secondary{border:1px solid #a7a398}.button.secondary:hover{border-color:var(--ink)}
.manifesto{background:var(--dark);color:#f0eee5;padding:130px 0}.manifesto-grid{display:grid;grid-template-columns:1fr 2.5fr 1.3fr;gap:60px;align-items:start}.section-label{color:var(--green)}.manifesto .section-label{color:var(--lime)}.manifesto-grid>p{margin:0;font-size:clamp(30px,4vw,51px);line-height:1.45;letter-spacing:-.045em}.manifesto-grid>p strong{color:var(--lime);font-weight:600}.manifesto-copy{color:#a8afa9;padding-top:60px}.manifesto-copy p:last-child{color:#f0eee5;margin-top:30px}
.demo{padding:135px 0}.demo-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}.demo-heading h2{font-size:clamp(36px,5vw,58px);line-height:1.3;letter-spacing:-.05em;margin:16px 0 0}.demo-heading>p{max-width:440px;color:var(--muted);font-size:14px}.video-shell{padding:18px;background:linear-gradient(135deg,#e7f7fc,#eee9fb 55%,#f9e8f1);border:1px solid #d9d4eb;border-radius:28px;box-shadow:0 28px 70px #4d416b1a}.video-topline{display:flex;justify-content:space-between;align-items:center;padding:2px 5px 17px;font:500 9px var(--mono);letter-spacing:.08em;color:#756d91}.video-topline a{color:var(--green)}.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#25213f}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.how + .demo{padding-top:0;padding-bottom:135px}
.details{padding:0 0 135px}.details .section-heading{margin-bottom:42px}.details-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.details-grid article{padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.details-grid h3{margin:0 0 12px;font-size:20px;line-height:1.4;letter-spacing:-.03em}.details-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.how{padding:135px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:80px}.section-heading h2{font-size:clamp(36px,5vw,58px);line-height:1.35;letter-spacing:-.05em;margin:16px 0 0}.section-heading>p{color:var(--muted);font-size:14px}.feature{min-height:570px;border-top:1px solid var(--line);display:grid;grid-template-columns:90px 1fr 1.15fr;gap:45px;align-items:center;padding:80px 0}.feature-number{align-self:start;padding-top:6px;font:500 12px var(--mono);color:var(--green)}.role{font:500 10px var(--mono);letter-spacing:.14em;margin-bottom:25px}.role:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;background:var(--green)}.role.agent:before{background:var(--orange)}.role.review:before{background:#6d69c9}.feature h3{font-size:clamp(28px,3vw,41px);line-height:1.5;letter-spacing:-.045em;margin:0 0 25px}.feature-copy>p{color:var(--muted);max-width:430px}.visual{height:390px;background:#e5e1d6;position:relative;overflow:hidden}.question-visual{padding:55px 50px;background:linear-gradient(145deg,#dbe2ca,#e8e4d9)}.chat-card{background:#fffef9;padding:18px 20px;width:82%;box-shadow:0 10px 30px #53584e1c;margin-bottom:12px}.chat-card small{font:500 8px var(--mono);color:var(--green)}.chat-card p{font-size:12px;margin:5px 0}.chat-card.reply{margin-left:auto;background:var(--dark);color:white}.chat-card.reply small{color:var(--lime)}.chat-card.last{position:relative}.cursor{position:absolute;width:7px;height:14px;background:var(--green);bottom:23px;right:24px;animation:blink 1s infinite}@keyframes blink{50%{opacity:0}}.agent-visual{background:#242a26;color:#eef0ed;padding:40px}.goal-file{background:#303632;border:1px solid #454c47;padding:22px}.file-head{display:flex;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid #4a504c;font:11px var(--mono)}.file-head small{color:var(--orange)}.goal-file p{font:11px var(--mono);margin:14px 0}.goal-file i{display:inline-grid;place-items:center;width:14px;height:14px;border:1px solid #778079;margin-right:10px;color:var(--lime);font-style:normal}.goal-file i.doing{border-color:var(--orange);background:var(--orange);box-shadow:0 0 0 4px #f0804630}.branches{height:90px;position:relative;font:9px var(--mono)}.branches .line{position:absolute;left:50%;top:0;width:1px;height:45px;background:#798079}.branch{position:absolute;top:52px;display:flex;flex-direction:column}.branch span{color:#8e9690}.branch strong{font-weight:400}.human-branch{left:18%}.agent-branch{right:7%}.agent-branch strong{color:var(--orange)}.diff-visual{background:#222724;color:#d8dcd8;padding-top:0;font:9px var(--mono)}.diff-head{height:42px;background:#303531;display:grid;grid-template-columns:1fr 1fr}.diff-head span{padding:13px 17px;border-right:1px solid #4b504d}.diff-body{display:grid;grid-template-columns:1fr 1fr}.diff-code{padding:55px 0}.diff-code p{margin:0;padding:8px 12px;white-space:nowrap}.diff-code.left{border-right:1px solid #444b46}.diff-code .minus{background:#5c3334}.diff-code .plus{background:#24533e}.review-note{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);background:#f5f1e8;color:var(--ink);width:75%;padding:13px 17px;display:flex;gap:13px;align-items:center;box-shadow:0 12px 24px #0005}.review-note>span{display:grid;place-items:center;background:#6d69c9;color:white;width:24px;height:24px;border-radius:50%}.review-note p{margin:0;font:11px var(--sans)}.review-note small{display:block;color:#6d69c9;font:8px var(--mono)}
.closing{height:690px;background:var(--green);color:white;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.closing>*:not(.closing-orbit){position:relative;z-index:1}.closing-mark{font-size:56px;color:var(--lime)}.section-label.light{color:var(--lime)}.closing h2{font-size:clamp(40px,6vw,70px);line-height:1.35;letter-spacing:-.055em;margin:20px}.closing h2 em{color:var(--lime)}.closing p{color:#c5d6ce}.light-button{margin-top:28px;background:var(--lime);color:var(--ink)}.light-button:hover{background:white}.closing small{font:9px var(--mono);margin-top:14px;color:#b6cec2}.closing-orbit{position:absolute;border:1px solid #ffffff24;border-radius:50%;width:700px;height:700px}.orbit-two{width:1000px;height:450px;transform:rotate(18deg)}footer{min-height:180px;padding:55px 4vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}footer>p{font:11px var(--mono);color:var(--muted);text-align:center}footer>div{display:flex;justify-content:flex-end;gap:30px;font:10px var(--mono)}footer>div span{color:var(--muted)}
@media(max-width:850px){.site-header nav>a:not(.nav-cta){display:none}.hero{padding-top:60px;padding-bottom:78px}.hero-copy br{display:none}.hero-screenshot{margin-top:48px}.manifesto-grid{grid-template-columns:1fr}.manifesto-copy{padding:0}.demo-heading,.section-heading{display:block}.demo-heading>p,.section-heading>p{margin-top:20px}.details-grid{grid-template-columns:1fr}.feature{grid-template-columns:40px 1fr}.feature .visual{grid-column:1/-1;width:100%}.visual{height:350px}footer{grid-template-columns:1fr;text-align:center;gap:15px}footer>p{margin:0}footer>div{justify-content:center}}
@media(max-width:560px){.wrap{width:min(100% - 28px,1180px)}.site-header{height:66px;padding:0 16px}.nav-cta{padding:7px 12px}.hero h1{font-size:45px}.hero-actions{flex-direction:column}.button{width:100%}.demo,.details{padding-bottom:85px}.video-shell{padding:10px;border-radius:18px}.video-topline span{display:none}.video-topline{justify-content:flex-end;padding-bottom:10px}.video-frame{border-radius:10px}.manifesto{padding:85px 0}.how{padding:90px 0}.feature{display:block;padding:55px 0}.feature-number{margin-bottom:25px}.feature-copy{margin-bottom:45px}.question-visual{padding:35px 20px}.agent-visual{padding:25px}.diff-code p{font-size:7px}.review-note{width:90%}.closing{height:590px;padding:20px}.closing h2{font-size:39px}footer>div{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cursor{animation:none}}

/* Shoaku identity: clarity blue, reflective violet, and the plugin's magenta. */
.brand img{width:29px;height:29px}
.site-header{background:#ffffffa6;backdrop-filter:blur(14px)}
.nav-cta{border-color:#8e7dd0;border-radius:999px}.nav-cta:hover{background:var(--green);border-color:var(--green);color:white}
.hero h1 em:after{background:linear-gradient(90deg,#72d8f4,#c6a5ff);border-radius:10px}
.hero-copy{color:#62637b}
.button{border-radius:999px}
.button.primary{border:0;background:linear-gradient(110deg,#7b36b8,#e94184);box-shadow:0 12px 30px #8a3fc52e}
.button.primary:hover{background:linear-gradient(110deg,#6547c7,#dc3e82);transform:translateY(-2px);box-shadow:0 16px 34px #8a3fc544}
.button.secondary{background:#ffffffa8;border-color:#bcb6d2}.button.secondary:hover{border-color:var(--green)}
.manifesto{background:linear-gradient(135deg,#25213f,#33235a);color:#f5f3ff}.manifesto-grid>p strong{color:#9fe7fa}.manifesto-copy{color:#bab7cd}.manifesto-copy p:last-child{color:#f5f3ff}.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:82px;background:#ffffff25;border:1px solid #ffffff25}.audience-card{padding:42px;background:#292541}.audience-card span{font:500 9px var(--mono);letter-spacing:.12em;color:#9fe7fa}.audience-card h3{font-size:24px;margin:12px 0 8px}.audience-card p{max-width:470px;margin:0;color:#aaa7be;font-size:13px}
.visual{border-radius:22px}.question-visual{background:linear-gradient(145deg,#e3f5fb,#eee8fb)}.agent-visual,.diff-visual{background:#25213f}.chat-card{border-radius:12px;background:#fff}.goal-file{background:#302f4d;border-color:#4c496d}
.closing{isolation:isolate;background:linear-gradient(125deg,#513986 0%,#633b82 30%,#31265c 62%,#244b70 100%);background-size:180% 180%;animation:closing-gradient 14s ease-in-out infinite}
.closing:before{content:"";position:absolute;z-index:-1;width:760px;height:500px;left:50%;top:46%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#a17ce080 0%,#7252ba38 42%,transparent 72%);filter:blur(18px);animation:closing-glow 14s ease-in-out infinite}
.closing:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,#65d9f00b,transparent 35%,transparent 65%,#ed5b990d);pointer-events:none}
.closing-mark{width:68px;height:68px;filter:drop-shadow(0 10px 25px #120c2d55)}
.closing h2 em{color:#a7eafa}.closing p{color:#d1cae9}.light-button{background:linear-gradient(110deg,#72d8f4,#f0a7ca);color:#24213b;box-shadow:0 16px 38px #130d2d66}.light-button:hover{background:white;transform:translateY(-3px);box-shadow:0 20px 44px #130d2d80}.closing small{color:#c9c2df}
@media(max-width:850px){.audience-grid{grid-template-columns:1fr}}
@media(max-width:560px){.how + .demo{padding-top:0;padding-bottom:85px}}
@keyframes closing-gradient{0%,100%{background-position:15% 35%}50%{background-position:85% 65%}}
@keyframes closing-glow{0%,100%{transform:translate(-54%,-51%) scale(.97);opacity:.72}50%{transform:translate(-46%,-47%) scale(1.06);opacity:1}}
@media(prefers-reduced-motion:reduce){.closing,.closing:before{animation:none}}

/* The Shoaku idea */
.concept{min-height:570px;border-top:1px solid var(--line);display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:center;padding:82px 0}.concept-compare{grid-template-columns:1.18fr .82fr}.concept-compare .concept-copy{grid-column:2}.concept-compare .concept-visual{grid-column:1;grid-row:1}.concept-number{margin-bottom:24px;font:500 10px var(--mono);letter-spacing:.13em;color:var(--green)}.concept h3{margin:0 0 25px;font-size:clamp(31px,3.4vw,46px);line-height:1.42;letter-spacing:-.045em}.concept h3 em{font-style:normal;color:var(--green)}.concept-copy>p{max-width:470px;margin:0;color:var(--muted)}.concept-visual{position:relative;min-width:0;height:460px;overflow:hidden;border:1px solid #dcd7eb;border-radius:28px;background:radial-gradient(circle at 50% 42%,#fff 0%,#f2effa 55%,#e9e5f4 100%)}.concept-svg{display:block;width:100%;height:100%}.guide-path{fill:none;stroke:#cdc6df;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;opacity:.35}.draw-path{fill:none;stroke:url(#climb-line);stroke-width:28;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}.is-visible .draw-path{animation:draw-concept 2.6s cubic-bezier(.45,0,.15,1) forwards}.climb-step,.goal-node{opacity:0}.is-visible .climb-step,.is-visible .goal-node{animation:show-step .45s ease forwards}.is-visible .step-one{animation-delay:.3s}.is-visible .step-two{animation-delay:1.35s}.is-visible .step-three{animation-delay:1.85s}.is-visible .goal-node{animation-delay:2.5s}.climb-step circle{fill:#f8f7fc;stroke:#6547c7;stroke-width:3}.climb-step text,.goal-node text{fill:#68647d;font:500 11px var(--mono);letter-spacing:.1em;text-anchor:middle}.goal-node circle:first-child{fill:#fff;stroke:#e94184;stroke-width:2;opacity:.85}.goal-node circle:nth-child(2){fill:#e94184}.goal-node text{fill:#9e397c}.traveler text{font:500 10px var(--mono)}.human-traveler circle{fill:#72d8f4;stroke:#fff;stroke-width:3}.human-traveler text{fill:#238ba8}.ai-traveler{opacity:.8}.ai-traveler circle{fill:#e94184;stroke:#fff;stroke-width:3}.ai-traveler text{fill:#a12d63}.compare-visual{background:radial-gradient(circle at 50% 48%,#fff 0%,#f5f1fa 50%,#ebe5f2 100%)}.compare-path{fill:none;stroke-width:31;stroke-linecap:round;stroke-linejoin:round;mix-blend-mode:multiply;transition:transform 1.8s cubic-bezier(.2,.8,.2,1),opacity 1.8s ease}.human-path{stroke:#72d8f4;transform:translateX(-42px);opacity:.62}.ai-path{stroke:#e94184;transform:translateX(42px);opacity:.62}.is-visible .human-path{transform:translateX(-9px);opacity:.74}.is-visible .ai-path{transform:translateX(9px);opacity:.74}.compare-label{position:absolute;z-index:2;top:30px;display:flex;align-items:center;gap:8px;font:500 9px var(--mono);letter-spacing:.1em;color:#6d6980}.compare-label i{width:8px;height:8px;border-radius:50%}.label-human{left:34px}.label-human i{background:#72d8f4}.label-ai{right:34px}.label-ai i{background:#e94184}.difference-label{position:absolute;z-index:2;left:50%;bottom:28px;transform:translate(-50%,12px);min-width:180px;padding:11px 18px;text-align:center;background:#25213f;color:#fff;border-radius:999px;box-shadow:0 13px 30px #3024522e;opacity:0}.is-visible .difference-label{animation:show-difference .55s 1.55s ease forwards}.difference-label span{display:block;color:#a7eafa;font:500 8px var(--mono);letter-spacing:.15em}.difference-label strong{display:block;margin-top:2px;font:500 10px var(--mono);letter-spacing:.08em}@keyframes draw-concept{to{stroke-dashoffset:0}}@keyframes show-step{to{opacity:1}}@keyframes show-difference{to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:850px){.concept,.concept-compare{grid-template-columns:1fr;gap:42px;padding:65px 0}.concept-compare .concept-copy,.concept-compare .concept-visual{grid-column:1}.concept-compare .concept-copy{grid-row:1}.concept-compare .concept-visual{grid-row:2}.concept-visual{height:auto;aspect-ratio:1.2/1}}
@media(max-width:560px){.concept{padding:54px 0}.concept-visual{border-radius:20px}.concept h3{font-size:34px}.compare-label{top:18px}.label-human{left:18px}.label-ai{right:18px}.difference-label{bottom:18px;min-width:160px}.climb-step text,.goal-node text{font-size:9px}}
@media(prefers-reduced-motion:reduce){.draw-path{stroke-dashoffset:0}.climb-step,.goal-node,.difference-label{opacity:1}.difference-label{transform:translate(-50%,0)}.human-path{transform:translateX(-9px);opacity:.74}.ai-path{transform:translateX(9px);opacity:.74}.traveler{display:none}}
.traveler-key{position:absolute;z-index:2;left:28px;top:27px;display:flex;gap:15px;font:500 9px var(--mono);letter-spacing:.09em;color:#6d6980}.traveler-key span{display:flex;align-items:center;gap:6px}.traveler-key i{width:8px;height:8px;border-radius:50%}.key-human i{background:#72d8f4}.key-ai i{background:#e94184}

/* Quiet concept diagrams: the logo carries the meaning, not a UI card. */
.concept{min-height:510px}.concept-visual{height:400px;border:0;border-radius:0;background:transparent;overflow:visible}.concept-svg{max-width:520px;margin:auto}.guide-path{stroke:#d9d3e6;stroke-width:21;opacity:.38}.draw-path{stroke-width:21}.goal-node{opacity:0}.is-visible .goal-node{animation:show-step .45s 2.45s ease forwards}.loop-caption{fill:#7b748b;font:500 9px var(--mono);letter-spacing:.13em;text-anchor:middle}.goal-node circle:first-child{fill:#f7f6fb;stroke:#e94184;stroke-width:1.5}.goal-node circle:nth-child(2){fill:#e94184}.goal-node text{fill:#b52f6b}.compare-visual{background:transparent}.compare-path{stroke-width:21}.human-path{stroke:#58cbe8}.ai-path{stroke:#e95068}.traveler-key{display:none}
.label-human i{background:#58cbe8}.label-ai i{background:#e95068}
.compare-path{mix-blend-mode:normal}.is-visible .human-path{transform:translateX(-7px);opacity:.82}.is-visible .ai-path{transform:translateX(7px);opacity:.82}.overlap-path{fill:none;stroke:#8b36d1;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .65s 1.35s ease}.is-visible .overlap-path{opacity:1}
@media(prefers-reduced-motion:reduce){.overlap-path{opacity:1}.human-path{transform:translateX(-7px)}.ai-path{transform:translateX(7px)}}
.compare-path{mix-blend-mode:multiply}.human-path{stroke:#64bef0}.ai-path{stroke:#ff49c3}.is-visible .human-path,.is-visible .ai-path{opacity:.9}.label-human i{background:#64bef0}.label-ai i{background:#ff49c3}
.compare-path{transition:transform 2.25s cubic-bezier(.2,.75,.2,1) .7s,opacity 2.25s ease .7s}
@media(max-width:850px){.concept-visual{height:auto;aspect-ratio:1.35/1}.concept-svg{max-width:560px}}