@font-face{font-family:Plex;src:url('assets/plex-400.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Plex;src:url('assets/plex-500.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:Plex;src:url('assets/plex-600.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:Plex;src:url('assets/plex-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#fff;--ink:#252824;--muted:#60645e;--line:#e9eae7;--jan:#FFDAD1;--feb:#8BB3A5;--mar:#FFCA91;--apr:#FFDC87;--may:#E899E8;--jun:#A4DEF0;--radius:12px;--lift:0 2px 5px #2528240a,0 0 0 1px #2528240b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px;scrollbar-color:#8BB3A5 #fff}body{margin:0;background:var(--paper);color:var(--ink);font:400 20px/1.65 Plex,sans-serif}::selection{background:var(--apr);color:var(--ink)}a{color:inherit;text-decoration:none;text-underline-offset:4px}button,input,textarea,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #466c5f;outline-offset:5px}button:focus:not(:focus-visible){outline:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}p{margin:0 0 18px}h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.035em;text-wrap:balance}h1{font-size:calc(clamp(40px,5.2vw,66px) + 4px);line-height:1.11}h2{font-size:calc(clamp(29px,3.1vw,38px) + 4px);line-height:1.22}h3{font-size:22px;letter-spacing:-.02em;line-height:1.4}strong{font-weight:500}.center{text-align:center}.muted,.micro{color:var(--muted)}.micro{font-size:16px;line-height:1.6}.skip{position:fixed;top:-100px;left:12px;background:var(--apr);padding:10px;z-index:100}.skip:focus{top:12px}header{position:fixed;z-index:20;top:12px;left:50%;transform:translateX(-50%);width:calc(100% - 72px);max-width:1440px;height:50px;padding:8px 0;display:flex;justify-content:space-between;align-items:center;transition:width .35s ease,padding .35s ease,box-shadow .35s ease,background .35s ease}header.scrolled{width:650px;max-width:calc(100% - 32px);padding:8px 15px;border-radius:12px;background:#fffffff5;box-shadow:var(--lift)}.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:21px;letter-spacing:-.6px}.brand svg{width:24px;height:24px;stroke:none}nav{display:flex;gap:24px;align-items:center;font-size:16px;color:var(--muted)}nav a:hover{color:var(--ink)}.small-button{display:inline-flex;align-items:center;gap:9px;background:white;padding:4px 10px;border-radius:6px;box-shadow:var(--lift);color:var(--ink)}.small-button svg{width:14px}.hero{min-height:920px;height:100svh;max-height:1120px;display:grid;place-items:center;position:relative;overflow:hidden}.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hero-copy{position:relative;text-align:center;padding:90px 24px 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:.065em;padding:5px 9px;border-radius:5px;box-shadow:var(--lift);background:white;margin-bottom:27px}.tiny-flower{font-size:17px;line-height:1;color:#526e62}.hero h1{margin-bottom:23px}.hero p{color:var(--muted);font-size:20px;line-height:1.75}.actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}.hero .actions{margin-top:30px}.button{appearance:none;border:0;background:white;box-shadow:var(--lift);border-radius:7px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:16px;font-size:17px;line-height:1.6;transition:background .18s ease,transform .18s ease;min-height:42px}.button:hover,.small-button:hover{background:#f1f3ef}.button:active{transform:translateY(1px)}.primary{background:var(--ink);color:#fff;box-shadow:0 2px 4px #25282420}.primary:hover{background:#41483f}.hero .hero-note{font-size:15px;margin-top:24px;line-height:1.65}.scroll-cue{display:flex;justify-content:center;width:44px;margin:54px auto 0;color:var(--muted)}.section{max-width:1120px;margin:0 auto;padding:110px 0}.intro{margin-bottom:48px}.intro p{margin:19px auto 0;color:var(--muted);font-size:19px;max-width:620px}.angle-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.angle-card{position:relative;border:0;border-radius:12px;padding:18px 16px 14px;background:#fff;box-shadow:var(--lift);text-align:left;transition:background .2s ease,transform .2s ease}.angle-card:hover{transform:translateY(-4px)}.angle-card[aria-pressed=true]{background:var(--color)}.angle-card .pattern{display:grid;place-items:center;height:126px;font:12px/1.14 monospace;white-space:pre;letter-spacing:3px;color:#686c65}.angle-card[aria-pressed=true] .pattern{color:var(--ink)}.card-label{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:500}.key{font-size:14px;border:1px solid #25282420;border-radius:4px;min-width:19px;text-align:center;color:#50574e}.angle-detail{margin:25px 0 28px;padding-bottom:24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:16px}.angle-detail>div{display:flex;gap:12px;align-items:center}.angle-detail #angle-description{color:var(--muted)}.angle-detail a{white-space:nowrap}.color-dot{width:8px;height:8px;background:var(--jan);border-radius:50%;flex-shrink:0}.problem{position:relative;min-height:690px;display:grid;place-items:center}.problem-copy{padding:80px 0;z-index:1}.problem-copy p{color:var(--muted);font-size:18px;margin:22px 0}.problem-copy strong{font-size:17px}.thought{position:absolute;font-size:16px;line-height:1.6;padding:13px 16px;border-radius:10px 10px 10px 2px;max-width:232px}.t1{top:80px;left:5%;background:var(--jan);transform:rotate(-3deg)}.t2{top:106px;right:4%;background:var(--feb);transform:rotate(3deg)}.t3{top:295px;left:0;background:var(--apr);max-width:180px;transform:rotate(2deg)}.t4{top:312px;right:0;background:var(--jun);max-width:188px;transform:rotate(-3deg)}.t5{bottom:84px;left:15%;background:var(--may);transform:rotate(-2deg)}.t6{bottom:92px;right:13%;background:var(--mar);transform:rotate(3deg)}.split-intro{display:grid;grid-template-columns:1fr 1.35fr;gap:75px;align-items:start;margin-bottom:50px}.split-intro p{color:var(--muted);font-size:19px;max-width:540px;padding-top:5px}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.steps article>p{font-size:16px;color:var(--muted);margin-top:12px}.step-number{font-size:15px;display:block;margin:22px 0 10px;color:var(--muted)}.mini-demo{height:180px;border-radius:12px;background:#fff;box-shadow:var(--lift);padding:20px 17px;display:flex;justify-content:center;flex-direction:column;overflow:hidden;font-size:16px}.note-label{font-size:13px;color:var(--muted);margin-bottom:15px}.note-demo p{font-size:18px;margin:0}.caret{display:inline-block;width:1px;height:16px;background:var(--ink);vertical-align:middle;margin-left:3px}.preferences-demo{gap:12px}.preferences-demo>span:first-child{font-size:14px;color:var(--muted)}.demo-chip{display:flex;gap:10px;align-items:center;justify-content:space-between;background:white;padding:7px 9px;box-shadow:var(--lift);border-radius:6px;font-size:14px}.mini-segments{display:flex;background:#f3f4f1;border-radius:6px;padding:3px;font-size:13px;justify-content:space-between}.mini-segments span{padding:3px 6px}.mini-segments .selected{background:var(--apr);border-radius:4px}.stack-demo{position:relative}.stack-demo>div{position:absolute;left:26px;right:26px;height:95px;border-radius:8px;background:var(--apr);transform:rotate(-9deg)}.stack-demo>div:nth-child(2){background:var(--jun);transform:rotate(7deg)}.stack-demo>div:nth-child(3){background:var(--jan);transform:none;padding:22px 16px}.stack-demo strong{display:block;font-size:18px}.stack-demo span{font-size:14px}.edit-demo p{font-size:18px}.edit-demo s{color:var(--muted);font-size:15px}.edit-demo mark{background:var(--feb);padding:0 3px}.publish-demo{align-items:center;gap:22px;background:var(--jun)}.publish-icon{font-size:23px;font-weight:600;line-height:1.1;border:1.5px solid var(--ink);border-radius:4px;padding:1px 5px}.publish-demo .demo-chip{font-size:12px;white-space:nowrap}.section-action{margin-top:36px}.hook-layout{display:grid;grid-template-columns:1fr 1.35fr;gap:75px}.hook-options{display:flex;flex-direction:column;gap:7px}.hook-option{background:none;border:0;text-align:left;padding:14px 16px;border-radius:8px;font-size:17px;display:flex;justify-content:space-between}.hook-option[aria-pressed=true]{background:var(--apr)}.hook-option:hover{background:#f4f5f2}.hook-preview{border-radius:12px;background:var(--apr);padding:30px 32px;min-height:290px;display:flex;flex-direction:column}.hook-preview>span:first-child{font-size:15px}.hook-preview blockquote{font-size:27px;line-height:1.5;letter-spacing:-.02em;margin:24px 0}.hook-preview>.micro{font-size:14px;margin-top:auto;color:#4f493b}.text-lines{display:grid;gap:8px;margin:8px 0 27px}.text-lines i{height:4px;border-radius:3px;width:87%;background:#25282415}.text-lines i:nth-child(2){width:96%}.text-lines i:last-child{width:60%}.hooks>.micro{margin-top:25px}.voice-lines{max-width:620px;margin:42px auto}.voice-lines p{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);margin:0;font-size:22px}.voice-lines span{text-decoration:line-through;color:#73766f;font-size:19px}.voice-lines strong{background:var(--jan);padding:1px 8px}.voice-lines p:nth-child(2) strong{background:var(--apr)}.voice-lines p:nth-child(3) strong{background:var(--jun)}.voice-lines p:nth-child(4) strong{background:var(--feb)}.voice>.muted{font-size:18px}.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.control{padding:22px;background:#fff;box-shadow:var(--lift);border-radius:12px}.control:nth-child(4){grid-column:span 1}.control:nth-child(5){grid-column:span 2}.control label{font-size:16px;display:block;margin-bottom:16px}.control select{width:100%;border:0;background:var(--tint);border-radius:6px;padding:12px;font-size:16px;cursor:pointer}.control p{font-size:15px;color:var(--muted);margin:12px 0 0}.original{max-width:680px;margin:0 auto 30px;background:var(--jan);border-radius:12px;padding:24px 28px}.original span{font-size:14px}.original p{font-size:23px;line-height:1.55;margin:10px 0 0}.example-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin:24px auto}.example-tabs button{border:0;background:transparent;padding:9px 14px;border-radius:6px;font-size:15px;color:var(--muted)}.example-tabs button[aria-pressed=true]{background:var(--tint,var(--feb));color:var(--ink)}.example-tabs button:hover{background:#edf0eb}.post-example{max-width:680px;margin:auto;padding:30px 34px;box-shadow:var(--lift);border-radius:12px}.post-heading{display:flex;gap:11px;align-items:center;margin-bottom:28px;font-size:16px}.post-heading strong,.post-heading span{display:block}.post-heading span{font-size:14px;color:var(--muted)}.avatar{width:36px;height:36px;display:grid;place-items:center;background:var(--feb);border-radius:50%}.linkedin{margin-left:auto;font-weight:600;font-size:21px!important;color:var(--ink)!important}#example-body{white-space:pre-line;font-size:18px;line-height:1.8;min-height:310px}.copy-example{margin-top:24px;font-size:15px}.audience-list{max-width:760px;margin-left:auto}.audience-list details{border-top:1px solid var(--line);padding:21px 0}.audience-list details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-size:23px;list-style:none;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary:after{content:'+';font-weight:400;color:var(--muted)}details[open] summary:after{content:'−'}details p{font-size:18px;max-width:630px;color:var(--muted);margin:16px 0 4px}.philosophy p{margin:24px 0;color:var(--muted);font-size:19px}.philosophy>strong{font-size:17px}.five-dots{display:flex;gap:5px;justify-content:center;margin-bottom:28px}.five-dots i{height:14px;width:14px;border-radius:50%;background:var(--jan)}.five-dots i:nth-child(2){background:var(--feb)}.five-dots i:nth-child(3){background:var(--apr)}.five-dots i:nth-child(4){background:var(--may)}.five-dots i:nth-child(5){background:var(--jun)}.workspace{max-width:760px;margin:auto;padding:28px;border-radius:12px;box-shadow:var(--lift)}.workspace-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;font-size:17px}.workspace-heading>span{font-size:14px;padding:3px 8px;background:var(--apr);border-radius:4px}.workspace label{display:block;font-size:16px;margin-bottom:10px}.workspace textarea{display:block;resize:vertical;width:100%;border:1px solid #d9ddd6;border-radius:8px;padding:17px;font-size:18px;line-height:1.8;caret-color:#466c5f;min-height:100px;background:#fff}.workspace textarea::placeholder{color:#6b7068}.workspace-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:17px 0}.text-button{padding:8px 0;background:none;border:0;font-size:16px;text-decoration:underline;text-underline-offset:4px}.workspace>.micro{max-width:620px;font-size:15px;margin-top:20px}.workspace #status{font-size:16px;margin:12px 0 0;color:#385a4c}#draft-workspace{margin-top:30px;border-top:1px solid var(--line);padding-top:5px}.create{padding-bottom:130px}footer{max-width:1120px;margin:auto;border-top:1px solid var(--line);padding:30px 0 20px}.footer-row,.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:15px;color:var(--muted)}.footer-row>div{display:flex;gap:22px}.footer-word{font-size:clamp(110px,23.5vw,290px);line-height:1.2;letter-spacing:-.04em;font-weight:500;text-align:center;color:#e3e9e3;padding:20px 0;overflow:hidden}.footer-bottom{font-size:14px}footer a:hover{text-decoration:underline}
@media(min-width:1450px){.hero-copy{padding-top:40px}.hero{min-height:960px}}@media(max-width:1200px){.section,footer{margin-left:32px;margin-right:32px}.steps{gap:12px}.mini-demo{padding:16px 12px}.split-intro,.hook-layout{gap:42px}.card-label{font-size:15px}.angle-card .pattern{font-size:10px;letter-spacing:2px}.t3,.t4{max-width:160px}.problem-copy h2{font-size:36px}}@media(max-width:800px){header{width:calc(100% - 40px)}nav{gap:16px}.hero{min-height:800px;max-height:1000px}.hero h1{font-size:52px}.hero p{font-size:18px}.section{padding:76px 0}.angle-grid{grid-template-columns:repeat(3,1fr)}.angle-grid .angle-card:last-child{grid-column:auto}.angle-detail{align-items:start}.angle-detail>div{flex-wrap:wrap}.angle-detail #angle-description{flex-basis:100%}.steps{grid-template-columns:repeat(3,1fr);gap:24px 16px}.split-intro{grid-template-columns:1fr;gap:20px;margin-bottom:35px}.split-intro p{margin:0}.hook-layout{gap:25px;grid-template-columns:1fr 1.3fr}.hook-preview{padding:24px}.hook-preview blockquote{font-size:24px}.problem{min-height:650px}.problem-copy{padding:100px 0}.t3{top:405px;left:0}.t4{top:410px;right:0}.t5{bottom:14px;left:7%}.t6{bottom:30px;right:8%}.t1{top:20px;left:0}.t2{top:90px;right:0}.controls-grid{grid-template-columns:1fr 1fr}.control:nth-child(5){grid-column:span 2}.footer-word{font-size:23vw}}
@media(max-width:520px){header{width:calc(100% - 32px);top:8px;height:48px}header.scrolled{padding:6px 10px}.brand{font-size:18px;gap:7px}.brand svg{width:21px}nav{gap:12px}nav>a:first-child{display:none}nav>a:nth-child(2){font-size:14px}.small-button{font-size:14px;padding:5px 8px;gap:5px}.small-button svg{width:12px}.hero{min-height:760px;height:100svh;max-height:900px}.hero-copy{padding:70px 20px 0}.eyebrow{font-size:12px;letter-spacing:.045em;margin-bottom:24px}.hero h1{font-size:44px;line-height:1.18;letter-spacing:-.035em}.hero p{font-size:17px;max-width:335px;margin-left:auto;margin-right:auto}.desktop{display:none}.hero .actions{gap:10px;margin-top:25px}.button{font-size:15px;padding:10px 12px;gap:10px;min-height:44px}.hero .hero-note{font-size:14px}.scroll-cue{margin-top:40px}.section,footer{margin-left:20px;margin-right:20px}.section{padding:65px 0}.intro{margin-bottom:34px}.intro p{font-size:17px}h2{font-size:33px}.angle-grid{grid-template-columns:1fr 1fr;gap:10px}.angle-grid .angle-card:last-child{grid-column:span 2}.angle-card{padding:14px}.angle-card .pattern{height:100px}.angle-grid .angle-card:last-child .pattern{height:80px}.angle-detail{display:block}.angle-detail a{display:inline-block;margin-top:16px}.angle-detail>div{gap:8px}.angle-detail strong{font-size:16px}.problem{min-height:680px;padding:145px 0 160px}.problem-copy{padding:0}.problem-copy h2{font-size:31px}.problem-copy p{font-size:16px}.thought{font-size:14px;max-width:190px;padding:10px 12px}.t1{top:35px;left:0}.t2{top:105px;right:0}.t3{top:auto;bottom:132px;left:0;max-width:165px}.t4{top:auto;bottom:40px;right:0;max-width:175px}.t5,.t6{display:none}.steps{grid-template-columns:1fr 1fr;gap:22px 14px}.steps article:last-child{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;column-gap:14px}.steps article:last-child .mini-demo{grid-row:span 3}.steps article:last-child .step-number{margin:12px 0 0}.steps h3{font-size:20px}.steps article>p{font-size:15px}.mini-demo{height:165px}.publish-demo .demo-chip{font-size:11px}.split-intro p{font-size:17px}.hook-layout{grid-template-columns:1fr}.hook-options{flex-direction:row;flex-wrap:wrap;gap:6px}.hook-option{padding:9px 12px;font-size:14px;min-height:44px}.hook-option span{display:none}.hook-preview{min-height:280px}.voice-lines p{font-size:19px;gap:12px}.voice-lines span{font-size:16px}.voice>.muted{font-size:16px}.controls-grid{grid-template-columns:1fr}.control:nth-child(5){grid-column:auto}.control{padding:18px}.original{padding:21px}.original p{font-size:20px}.example-tabs{gap:4px}.example-tabs button{font-size:14px;padding:8px 10px;min-height:44px}.post-example{padding:23px}.post-heading span{font-size:12px}#example-body{font-size:17px;min-height:350px}summary{font-size:20px}details p{font-size:17px}.philosophy p{font-size:17px}.philosophy>strong{font-size:15px}.workspace{padding:19px}.workspace-heading{gap:14px;align-items:start}.workspace-heading strong{font-size:16px}.workspace-heading>span{font-size:12px;white-space:nowrap}.workspace-bottom{align-items:start;flex-direction:column}.workspace-bottom>.button{width:100%}.workspace-bottom>.actions{width:100%}.workspace-bottom>.actions .button{flex:1}.workspace textarea{font-size:20px}.footer-row{flex-direction:column;font-size:14px;gap:15px}.footer-bottom{font-size:12px;gap:8px}.footer-bottom span:nth-child(2){display:none}.footer-word{padding:25px 0;font-size:23vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.angle-card:hover{transform:none}}

.controls-note{margin-top:20px}.eyebrow .tiny-flower{width:14px;height:14px}
/* Readability refinements after desktop and mobile review. */
.eyebrow,.hero .hero-note,.note-label,.preferences-demo>span:first-child,.stack-demo span,.demo-chip,.post-heading span,.original span,.hook-preview>span:first-child,.workspace-heading>span,.footer-bottom{font-size:15px}.mini-segments{font-size:15px}.publish-demo .demo-chip{font-size:14px;white-space:normal}.control p,.controls-note,.workspace>.micro,.hook-preview>.micro,.step-number{font-size:16px}.steps article>p{font-size:17px}.footer-row{font-size:16px}.text-button{min-height:44px}.scroll-cue{min-height:44px;align-items:center}nav a{min-height:36px;display:inline-flex;align-items:center}
@media(max-width:520px){nav>a:nth-child(2),.small-button{font-size:15px}nav a{min-height:44px}.hero p,.intro p,.split-intro p,.problem-copy p,.steps article>p,.voice>.muted,details p,.philosophy p,#example-body{font-size:18px}.hero .hero-note,.eyebrow,.thought,.post-heading span,.workspace-heading>span,.footer-bottom{font-size:15px}.hook-option,.example-tabs button,.control label,.control select,.voice-lines span,.button{font-size:16px}.mini-demo{padding:15px 10px}.mini-segments span{padding:3px}.publish-demo .demo-chip{font-size:14px}.footer-row{font-size:16px}.workspace-heading{flex-wrap:wrap}.footer-bottom{flex-wrap:wrap}.philosophy>strong{font-size:16px}}

/* Five colored folders: user reference, October 26. */
.angle-card,.angle-card[aria-pressed=true]{background:#fff}.angle-card[aria-pressed=true]{box-shadow:0 0 0 1.5px var(--color),0 3px 8px #25282409}.folder-scene{height:145px;display:flex;align-items:center;justify-content:center;padding:12px 0 15px}.folder{position:relative;display:block;width:142px;height:108px;isolation:isolate}.folder-back{position:absolute;inset:17px 0 0;background:color-mix(in srgb,var(--color) 83%,#252824);border-radius:8px 10px 10px 10px}.folder-back:before{content:'';position:absolute;left:0;top:-12px;width:58px;height:23px;background:inherit;border-radius:8px 12px 0 0}.folder-sheet{position:absolute;left:13px;right:13px;top:5px;height:88px;background:#fff;border:1px solid #e5e7e1;border-radius:5px;box-shadow:0 3px 8px #2528240a;transition:transform .25s ease}.sheet-back{transform:rotate(-9deg);background:#f5f6f3;left:19px;right:8px;top:2px}.sheet-front{transform:rotate(5deg);padding:15px 13px}.paper-heading,.paper-line{display:block;border-radius:2px;background:#dde2da;height:3px;margin-bottom:6px}.paper-heading{background:color-mix(in srgb,var(--color) 75%,#252824);width:48%;height:5px;margin-bottom:10px}.paper-line.short{width:65%}.folder-front{position:absolute;left:0;right:0;bottom:0;height:76px;background:var(--color);border-radius:9px 9px 11px 11px;box-shadow:0 5px 8px #2528240b,inset 0 1px 0 #ffffff55;transition:transform .25s ease;transform-origin:bottom}.angle-card:hover .sheet-front,.angle-card:focus-visible .sheet-front{transform:translateY(-7px) rotate(5deg)}.angle-card:hover .sheet-back,.angle-card:focus-visible .sheet-back{transform:translateY(-4px) rotate(-11deg)}.angle-card:hover .folder-front{transform:skewX(-2deg) scaleY(.96)}.angle-card[aria-pressed=true] .key{background:var(--color);border-color:transparent}.angle-card .card-label{gap:8px}.angle-card .key{flex-shrink:0}
@media(max-width:520px){.folder-scene{height:132px}.folder{width:124px;height:98px}.folder-front{height:69px}.folder-sheet{height:80px}.angle-grid .angle-card:last-child .folder-scene{height:132px}}

/* Remove caption-like taglines and ornamental section rules. */
.angle-detail{border-bottom:0;padding-bottom:0;margin-bottom:0}.voice-lines p{border-bottom:0}.audience-list details,.audience-list details:last-child{border:0}#draft-workspace{border-top:0}footer{border-top:0}.footer-row{justify-content:flex-end}.hook-preview{justify-content:center}.hook-preview blockquote{margin-bottom:0}

/* Floating thoughts: independent gentle loops, no layout movement. */
.thought{animation:thought-float var(--float-duration,7s) ease-in-out var(--float-delay,0s) infinite;animation-play-state:paused}.t1{--tilt:-3deg;--float-duration:7.2s;--float-delay:-1s;--drift:5px}.t2{--tilt:3deg;--float-duration:8.5s;--float-delay:-4s;--drift:-6px}.t3{--tilt:2deg;--float-duration:6.8s;--float-delay:-2.5s;--drift:7px}.t4{--tilt:-3deg;--float-duration:8s;--float-delay:-5.5s;--drift:-5px}.t5{--tilt:-2deg;--float-duration:7.7s;--float-delay:-3s;--drift:4px}.t6{--tilt:3deg;--float-duration:9s;--float-delay:-6s;--drift:-7px}.problem.motion-running .thought{animation-play-state:running}.problem .thought:hover{animation-play-state:paused}@keyframes thought-float{0%,100%{transform:translate3d(0,3px,0) rotate(var(--tilt))}50%{transform:translate3d(var(--drift),-11px,0) rotate(calc(var(--tilt) + 1.6deg))}}.motion-toggle{position:absolute;bottom:15px;right:0;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--muted)}.motion-toggle:hover{background:#f1f3ef}.motion-toggle svg{width:16px;height:16px}@media(max-width:520px){@keyframes thought-float{0%,100%{transform:translate3d(0,2px,0) rotate(var(--tilt))}50%{transform:translate3d(2px,-7px,0) rotate(calc(var(--tilt) + 1deg))}}}@media(prefers-reduced-motion:reduce){.thought{animation:none!important}.motion-toggle{display:none}}

#controls{position:relative}.animated-choice{position:relative;overflow:hidden;border-radius:6px;background:var(--tint)}.control .animated-choice select{position:relative;z-index:1;color:transparent;background:transparent;min-height:48px}.control .animated-choice select option{color:var(--ink);background:white}.control-value{position:absolute;inset:0 32px 0 12px;display:flex;align-items:center;pointer-events:none;font-size:16px;line-height:1.45}.animated-choice:after{content:'';position:absolute;right:16px;top:19px;width:6px;height:6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);pointer-events:none}.control .animated-choice select{appearance:none}.animated-choice:focus-within{outline:3px solid #466c5f;outline-offset:4px}.preference-motion{bottom:54px}.controls-note{padding-right:50px}@media(max-width:800px){.preference-motion{bottom:30px}}@media(max-width:520px){.control-value{font-size:16px}.preference-motion{bottom:20px}}

/* Automatically explore five angles while retaining one source idea. */
#examples{--example-color:var(--jan)}#examples .original{background:var(--example-color);transition:background-color .65s ease}.example-navigation{display:flex;align-items:center;justify-content:center;gap:10px;max-width:760px;margin:0 auto 24px}.example-navigation .example-tabs{margin:0}.example-motion{width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;background:white;display:grid;place-items:center;color:var(--muted)}.example-motion:hover{background:#f1f3ef}.example-motion svg{width:16px;height:16px}.avatar{width:44px;height:44px;object-fit:cover;flex-shrink:0}.post-example{overflow:hidden}#example-body{min-height:430px}.example-navigation .example-tabs button{transition:background-color .4s ease,color .3s ease}.example-navigation .example-tabs button[aria-pressed=true]{box-shadow:0 3px 9px #2528240a}@media(max-width:520px){.example-navigation{align-items:flex-start;gap:2px}.example-navigation .example-tabs{flex:1}.example-motion{width:36px;min-width:36px}#example-body{min-height:480px}.post-heading .avatar{width:40px;height:40px}}@media(prefers-reduced-motion:reduce){.example-motion{display:none}}

/* An idea travels between folders alongside the audience list. */
.audience-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:60px;align-items:center}.audience-layout .audience-list{width:100%;max-width:none}.idea-transfer{position:relative;min-height:380px;display:grid;place-items:center}.transfer-stage{position:relative;width:280px;height:330px;isolation:isolate}.transfer-folder{position:absolute;width:142px;height:106px}.source-folder{left:8px;top:28px;--folder-color:var(--jan);transform:rotate(-7deg)}.destination-folder{right:8px;bottom:28px;--folder-color:var(--feb);transform:rotate(6deg)}.transfer-back{position:absolute;inset:18px 0 0;background:color-mix(in srgb,var(--folder-color) 82%,#252824);border-radius:8px 10px 10px 10px}.transfer-back:before{content:'';position:absolute;left:0;top:-12px;width:58px;height:24px;border-radius:8px 12px 0 0;background:inherit}.transfer-front{position:absolute;left:0;right:0;bottom:0;height:76px;background:var(--folder-color);border-radius:9px 9px 11px 11px;box-shadow:0 5px 9px #2528240b,inset 0 1px #ffffff66;z-index:3;transform-origin:bottom;animation:folder-receive 7s ease-in-out infinite paused}.destination-folder .transfer-front{animation-delay:-3.5s}.travelling-idea{position:absolute;left:30px;top:24px;width:88px;height:105px;background:#fff;border:1px solid #e1e5dc;border-radius:7px;box-shadow:0 6px 15px #25282412;padding:13px 15px;z-index:2;animation:idea-journey 7s cubic-bezier(.45,0,.2,1) infinite paused}.travelling-idea svg{width:25px;height:25px;stroke:#526d60;display:block;margin:0 auto 13px}.travelling-idea i{display:block;height:3px;background:#dce3d9;border-radius:2px;margin-bottom:6px}.travelling-idea i:last-child{width:65%}.transfer-running .travelling-idea,.transfer-running .transfer-front{animation-play-state:running}.transfer-toggle{display:grid;place-items:center;position:absolute;bottom:0;left:calc(50% - 22px);width:44px;height:44px;background:none;border:0;border-radius:50%;color:var(--muted)}.transfer-toggle:hover{background:#f1f3ef}.transfer-toggle svg{width:16px;height:16px}@keyframes idea-journey{0%,12%{transform:translate(0,25px) rotate(-7deg);opacity:0}20%{transform:translate(0,-22px) rotate(-10deg);opacity:1}38%{transform:translate(115px,60px) rotate(12deg);opacity:1}48%{transform:translate(120px,155px) rotate(6deg);opacity:1}54%,62%{transform:translate(120px,190px) rotate(6deg);opacity:0}70%{transform:translate(120px,140px) rotate(9deg);opacity:1}88%{transform:translate(-6px,-22px) rotate(-10deg);opacity:1}96%,100%{transform:translate(0,25px) rotate(-7deg);opacity:0}}@keyframes folder-receive{0%,10%,62%,100%{transform:scaleY(1)}20%,48%{transform:scaleY(.9) skewX(-2deg)}}@media(max-width:800px){.audience-layout{grid-template-columns:230px minmax(0,1fr);gap:25px}.transfer-stage{transform:scale(.8)}}@media(max-width:520px){.audience-layout{grid-template-columns:1fr;gap:24px}.idea-transfer{min-height:300px}.transfer-stage{transform:scale(.78);height:330px;margin:-25px 0}.transfer-toggle{bottom:-10px}}@media(prefers-reduced-motion:reduce){.travelling-idea{animation:none!important;transform:translate(62px,85px) rotate(0);opacity:1}.transfer-front{animation:none!important}.transfer-toggle{display:none}}

.hero-motion{position:absolute;right:24px;bottom:20px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#ffffffc9;color:var(--muted)}.hero-motion:hover{background:#f1f3ef}.hero-motion svg{width:16px;height:16px}@media(prefers-reduced-motion:reduce){.hero-motion{display:none}}
/* Separate folder covers keep the travelling paper physically inside the pocket. */
.transfer-folder{z-index:1}.transfer-folder.folder-cover{z-index:3;pointer-events:none}
.transfer-back,.folder-back{background:linear-gradient(180deg,color-mix(in srgb,var(--folder-color,var(--color)) 78%,#fff),color-mix(in srgb,var(--folder-color,var(--color)) 78%,#35473e));border-radius:9px 12px 12px 12px;box-shadow:inset 0 1px 0 #ffffff85}
.transfer-back:before,.folder-back:before{background:color-mix(in srgb,var(--folder-color,var(--color)) 80%,#fff);border-radius:9px 13px 0 0}
.transfer-front,.folder-front{background:linear-gradient(175deg,color-mix(in srgb,var(--folder-color,var(--color)) 72%,#fff) 0%,var(--folder-color,var(--color)) 65%,color-mix(in srgb,var(--folder-color,var(--color)) 94%,#64776b) 100%);border-radius:10px 10px 12px 12px;box-shadow:inset 0 1.5px 0 #ffffffa6,inset 0 -1px 0 #25282412,0 9px 16px -9px #35473e38}
.travelling-idea{transform-origin:top center;box-shadow:0 4px 10px #25282412;animation:idea-journey 7s linear infinite paused}
.transfer-front{animation:folder-receive 7s ease-in-out infinite paused}
.destination-folder .transfer-front{animation-delay:0s}
@keyframes idea-journey{
  0%,10%{transform:translate(0,45px) rotate(-7deg) scale(.62);opacity:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  26%{transform:translate(0,-38px) rotate(-9deg) scale(.88);opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}
  44%{transform:translate(120px,100px) rotate(6deg) scale(.88);opacity:1;animation-timing-function:cubic-bezier(.55,0,.8,.45)}
  61%{transform:translate(120px,202px) rotate(6deg) scale(.68);opacity:1}
  80%{transform:translate(120px,202px) rotate(6deg) scale(.68);opacity:1}
  81%{transform:translate(120px,202px) rotate(6deg) scale(.68);opacity:0}
  82%,99%{transform:translate(0,45px) rotate(-7deg) scale(.62);opacity:0}
  100%{transform:translate(0,45px) rotate(-7deg) scale(.62);opacity:1}
}
@keyframes folder-receive{0%,43%,76%,100%{transform:scaleY(1)}54%{transform:scaleY(.94)}64%{transform:scaleY(1.025)}70%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.travelling-idea{animation:none!important;transform:translate(120px,155px) rotate(6deg) scale(.68);opacity:1}.transfer-front{animation:none!important}}
/* Native document transitions preserve normal links, history and direct entry. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out 180ms ease-out both}
::view-transition-new(root){animation:page-in 380ms cubic-bezier(.16,1,.3,1) both}
::view-transition-group(root){animation-duration:380ms}
@keyframes page-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-old(root),::view-transition-new(root),::view-transition-group(root){animation:none!important}}

/* Seven-second, layout-stable illustrations of the writing workflow. */
@media (prefers-reduced-motion: no-preference){
.workflow-running.note-demo p{animation:workflow-type 7s steps(28,end) infinite}
.workflow-running .caret{animation:workflow-caret 1s steps(1,end) infinite}
.workflow-running .mini-segments span{animation:workflow-choice 7s ease-in-out infinite;border-radius:4px;background:transparent}
.workflow-running .mini-segments span:nth-child(2){animation-delay:-4.67s}
.workflow-running .mini-segments span:nth-child(3){animation-delay:-2.34s}
.workflow-running.preferences-demo .demo-chip{animation:workflow-direction 7s ease-in-out infinite}
.workflow-running.stack-demo>div:nth-child(1){animation:workflow-fan-back 7s cubic-bezier(.22,1,.36,1) infinite}
.workflow-running.stack-demo>div:nth-child(2){animation:workflow-fan-middle 7s cubic-bezier(.22,1,.36,1) infinite}
.workflow-running.stack-demo>div:nth-child(3){animation:workflow-fan-front 7s cubic-bezier(.22,1,.36,1) infinite}
.edit-demo s{position:relative;text-decoration:none}
.edit-demo s::after{content:'';position:absolute;left:0;right:0;top:52%;height:1px;background:currentColor;transform-origin:left}
.workflow-running.edit-demo s::after{animation:workflow-strike 7s ease-in-out infinite}
.workflow-running.edit-demo mark{display:inline-block;animation:workflow-rewrite 7s cubic-bezier(.22,1,.36,1) infinite}
.workflow-running.edit-demo .demo-chip{animation:workflow-edit-chip 7s ease-in-out infinite}
.workflow-running.publish-demo .demo-chip{animation:workflow-publish 7s cubic-bezier(.22,1,.36,1) infinite}
.workflow-running.publish-demo .demo-chip span{animation:workflow-check 7s cubic-bezier(.22,1,.36,1) infinite}
.workflow-running .publish-icon{animation:workflow-publish-icon 7s ease-in-out infinite}
}
@keyframes workflow-type{0%,8%{clip-path:inset(0 100% 0 0)}45%,87%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes workflow-caret{50%{opacity:0}}
@keyframes workflow-choice{0%,28%{background:var(--apr)}35%,94%{background:transparent}100%{background:var(--apr)}}
@keyframes workflow-direction{0%,25%,70%,100%{transform:translateY(0)}35%{transform:translateY(-3px)}45%{transform:translateY(0)}}
@keyframes workflow-fan-back{0%,12%,90%,100%{transform:rotate(-9deg)}35%,65%{transform:translate(-7px,9px) rotate(-15deg)}}
@keyframes workflow-fan-middle{0%,12%,90%,100%{transform:rotate(7deg)}35%,65%{transform:translate(7px,-8px) rotate(13deg)}}
@keyframes workflow-fan-front{0%,12%,90%,100%{transform:translateY(0)}35%,65%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes workflow-strike{0%,15%{transform:scaleX(0)}32%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes workflow-rewrite{0%,28%{opacity:0;transform:translateY(7px);clip-path:inset(0 100% 0 0)}46%,88%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}100%{opacity:0;transform:translateY(7px);clip-path:inset(0 100% 0 0)}}
@keyframes workflow-edit-chip{0%,12%,90%,100%{transform:translateY(0)}22%{transform:translateY(2px)}35%{transform:translateY(0)}}
@keyframes workflow-publish{0%,15%{opacity:0;transform:translateY(16px) scale(.96)}36%,86%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes workflow-check{0%,35%{opacity:0;transform:scale(.5)}48%,86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}
@keyframes workflow-publish-icon{0%,30%,60%,100%{transform:translateY(0)}43%{transform:translateY(-5px)}}

/* Scroll turns each discarded phrase into its stronger alternative. */
.voice-lines.voice-scroll-ready p>span,
.voice-lines.voice-scroll-ready p>strong{position:relative;isolation:isolate}
.voice-lines.voice-scroll-ready p>span{text-decoration:none}
.voice-lines.voice-scroll-ready p>span::after{
  content:"";position:absolute;inset-inline:0;top:52%;height:1.5px;
  background:currentColor;transform:scaleX(var(--strike-progress,1));transform-origin:left center;
}
.voice-lines.voice-scroll-ready p>strong{background:transparent}
.voice-lines.voice-scroll-ready p>strong::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--voice-highlight,var(--jan));
  transform:scaleX(var(--highlight-progress,1));transform-origin:left center;
}
.voice-lines p:nth-child(2){--voice-highlight:var(--apr)}
.voice-lines p:nth-child(3){--voice-highlight:var(--jun)}
.voice-lines p:nth-child(4){--voice-highlight:var(--feb)}
@media (prefers-reduced-motion:reduce){
  .voice-lines.voice-scroll-ready p>span::after,
  .voice-lines.voice-scroll-ready p>strong::before{transform:none}
}

/* Five product illustrations replace the landing-page settings preview. */
.preference-card{min-width:0;padding:22px 24px 12px;background:#fff;box-shadow:var(--lift);border-radius:12px}
.preference-card:last-child{grid-column:span 2}
.preference-card h3{font-size:18px;font-weight:500;line-height:1.4;margin:0 0 12px}
.preference-art{height:188px;position:relative;overflow:hidden}
.art-content{position:relative;height:100%;width:100%;isolation:isolate}
.format-page{position:absolute;left:50%;top:34px;width:145px;height:120px;padding:17px 19px;border-radius:10px;box-shadow:0 8px 18px -12px #25282440;transform-origin:50% 90%}
.format-page b{display:block;font-size:18px;font-weight:500;margin-bottom:14px}
.format-page i,.length-page i,.hook-paper i{display:block;height:4px;margin:9px 0;border-radius:3px;background:currentColor;opacity:.24;transform-origin:left}
.format-page i:last-child{width:60%}
.format-back{background:var(--apr);transform:translateX(-50%) rotate(-13deg)}
.format-middle{background:var(--jan);transform:translateX(-50%) rotate(10deg)}
.format-front{background:var(--feb);transform:translateX(-50%) rotate(-2deg)}
.length-page{position:absolute;left:50%;top:10px;width:148px;height:142px;transform:translateX(-50%);border-radius:10px;background:var(--mar);padding:20px 18px}
.length-page b{display:block;height:7px;width:58%;border-radius:4px;background:var(--ink);opacity:.7;margin-bottom:17px}
.length-page i:nth-child(3){width:85%}.length-page i:nth-child(4){width:92%}.length-page i:nth-child(5){width:68%}.length-page i:last-child{width:42%}
.length-word{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:16px;font-weight:500}
.length-long{opacity:0}
.tone-bubble{position:absolute;padding:15px 20px;border-radius:13px;font-size:19px;line-height:1.4;box-shadow:0 8px 16px -14px #25282455}
.tone-bubble::after{content:"";position:absolute;bottom:-8px;width:18px;height:18px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
.bubble-one{background:var(--apr);left:calc(50% - 102px);top:15px;transform:rotate(-4deg)}
.bubble-one::after{left:18px}
.bubble-two{background:var(--jan);right:calc(50% - 100px);top:98px;transform:rotate(4deg)}
.bubble-two::after{right:18px;transform:scaleX(-1)}
.hook-paper{position:absolute;left:50%;top:24px;width:207px;height:139px;border-radius:10px;padding:21px 17px;background:#fafaf8;box-shadow:0 6px 16px -12px #25282455;transform:translateX(-50%) rotate(-3deg)}
.hook-paper b{display:inline-block;position:relative;font-size:20px;font-weight:500;padding:4px 3px;margin-bottom:12px;isolation:isolate}
.hook-paper b::before{content:"";position:absolute;inset:0;background:var(--may);z-index:-1;transform-origin:left}
.hook-paper i:nth-child(3){width:87%}.hook-paper i:last-child{width:60%}
.goal-diagram{display:block;width:min(100%,440px);height:188px;margin:auto;overflow:visible}
.goal-link{stroke:var(--feb);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0}
.goal-reader{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
.art-running .format-back{animation:format-back 7s cubic-bezier(.22,1,.36,1) infinite}
.art-running .format-middle{animation:format-middle 7s cubic-bezier(.22,1,.36,1) infinite}
.art-running .format-front{animation:format-front 7s cubic-bezier(.22,1,.36,1) infinite}
.art-running .length-page i{animation:length-lines 7s ease-in-out infinite}
.art-running .length-page i:nth-child(n+4){animation:length-extra 7s ease-in-out infinite}
.art-running .length-short{animation:length-short-label 7s ease-in-out infinite}
.art-running .length-long{animation:length-long-label 7s ease-in-out infinite}
.art-running .bubble-one{animation:tone-one 7s cubic-bezier(.22,1,.36,1) infinite}
.art-running .bubble-two{animation:tone-two 7s cubic-bezier(.22,1,.36,1) infinite}
.art-running .hook-paper b::before{animation:hook-marker 7s cubic-bezier(.22,1,.36,1) infinite}
.art-running .goal-link{animation:goal-connect 7s cubic-bezier(.22,1,.36,1) infinite}
.art-running .goal-reader{animation:goal-reader 7s ease-in-out infinite}
.art-running .reader-two{animation-delay:.3s}.art-running .reader-three{animation-delay:.6s}
}
@keyframes format-back{0%,12%,90%,100%{transform:translateX(-50%) rotate(-13deg)}38%,62%{transform:translate(-75%,0) rotate(-24deg)}}
@keyframes format-middle{0%,12%,90%,100%{transform:translateX(-50%) rotate(10deg)}38%,62%{transform:translate(-25%,-8px) rotate(21deg)}}
@keyframes format-front{0%,12%,90%,100%{transform:translateX(-50%) rotate(-2deg)}38%,62%{transform:translate(-50%,9px) rotate(-4deg)}}
@keyframes length-lines{0%,16%,88%,100%{transform:scaleX(.67)}40%,68%{transform:scaleX(1)}}
@keyframes length-extra{0%,16%,88%,100%{opacity:0;transform:scaleX(.3)}40%,68%{opacity:.24;transform:scaleX(1)}}
@keyframes length-short-label{0%,16%,88%,100%{opacity:1;transform:translateY(0)}30%,74%{opacity:0;transform:translateY(-4px)}}
@keyframes length-long-label{0%,20%,84%,100%{opacity:0;transform:translateY(4px)}40%,68%{opacity:1;transform:translateY(0)}}
@keyframes tone-one{0%,100%{opacity:.4;transform:translateY(4px) rotate(-4deg)}16%,86%{opacity:1;transform:translateY(0) rotate(-4deg)}}
@keyframes tone-two{0%,16%,100%{opacity:0;transform:translateY(9px) rotate(4deg)}34%,84%{opacity:1;transform:translateY(0) rotate(4deg)}}
@keyframes hook-marker{0%,12%,100%{transform:scaleX(0)}38%,85%{transform:scaleX(1)}}
@keyframes goal-connect{0%,12%,100%{stroke-dashoffset:1;opacity:.2}48%,84%{stroke-dashoffset:0;opacity:1}}
@keyframes goal-reader{0%,18%,100%{transform:scale(.92);opacity:.45}50%,80%{transform:scale(1);opacity:1}}
@media(max-width:520px){.preference-card{padding:20px 22px 12px}.preference-card:last-child{grid-column:auto}.preference-art{height:190px}.goal-diagram{height:190px}}
.goal-post rect,.goal-reader>circle:first-child{stroke:none}
@media(prefers-reduced-motion:reduce){.length-short{opacity:0}.length-long{opacity:1}}
@media(max-width:360px){.art-type .art-content{transform:scale(.84)}.hook-paper{width:190px}}

/* A quiet travelling pulse, followed by a smaller echo. */
.five-dots i{position:relative;flex-shrink:0;color:var(--jan);transform-origin:center}
.five-dots i:nth-child(2){color:var(--feb);--ring-delay:.18s}
.five-dots i:nth-child(3){color:var(--apr);--ring-delay:.36s}
.five-dots i:nth-child(4){color:var(--may);--ring-delay:.54s}
.five-dots i:nth-child(5){color:var(--jun);--ring-delay:.72s}
.five-dots i::after{content:"";position:absolute;inset:-2px;border:1px solid currentColor;border-radius:50%;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
.five-dots.harmony-running i{animation:dot-harmony 7s ease-in-out var(--ring-delay,0s) infinite}
.five-dots.harmony-running i::after{animation:dot-resonance 7s ease-out var(--ring-delay,0s) infinite}
}
@keyframes dot-harmony{
  0%,8%,35%,66%,100%{transform:translateY(0) scale(1)}
  18%{transform:translateY(-5px) scale(.96,1.4)}
  25%{transform:translateY(1px) scale(1.06,.96)}
  49%{transform:translateY(-2px) scale(1.02,1.16)}
  57%{transform:translateY(0) scale(1)}
}
@keyframes dot-resonance{
  0%,10%,38%,43%,70%,100%{opacity:0;transform:scale(.85)}
  17%{opacity:.45;transform:scale(1)}
  34%{opacity:0;transform:scale(1.85)}
  49%{opacity:.28;transform:scale(1)}
  65%{opacity:0;transform:scale(1.55)}
}

/* The footer repeats the existing flower mark in one continuous turn. */
.footer-word{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,24px);font-size:clamp(54px,19vw,235px);overflow:visible}
.footer-word>span{white-space:nowrap}
.footer-flower{display:block;width:.78em;height:.78em;flex:0 0 .78em;stroke:none;transform-box:view-box;transform-origin:50% 50%}
@media(prefers-reduced-motion:no-preference){
.footer-flower{animation:footer-flower-turn 18s linear infinite;animation-play-state:paused}
.footer-flower.flower-spinning{animation-play-state:running}
}
@keyframes footer-flower-turn{to{transform:rotate(360deg)}}

/* Keep the larger reading scale comfortable in compact layouts. */
.card-label{gap:10px;line-height:1.4;min-height:2.8em}
.card-label .key{flex-shrink:0;align-self:center}
.angle-detail>div{flex-wrap:wrap;row-gap:7px}
.angle-detail strong{white-space:nowrap}
.angle-detail #angle-description{flex:1 1 300px}
.mini-demo{height:210px}
.stack-demo>div{height:128px;left:22px;right:22px}
.stack-demo>div:nth-child(3){padding:20px 14px}
.stack-demo strong{line-height:1.35}
.mini-segments span{padding:3px 4px}
.mini-segments{gap:2px}
.hero .hero-actions{flex-wrap:wrap}
@media(max-width:800px){.mini-demo{height:200px}.example-tabs{flex-wrap:wrap}}
@media(max-width:520px){
  header{height:auto;min-height:56px}.brand{gap:5px}nav{gap:8px}
  .angle-detail #angle-description{flex-basis:100%}
  .voice-lines p{gap:14px}.voice-lines p>span,.voice-lines p>strong{max-width:48%}
  .voice-lines p>strong{text-align:right}
  .mini-demo{height:230px}
  .steps article:last-child .mini-demo{height:230px}
  .stack-demo>div{left:14px;right:14px}
  .stack-demo>div:nth-child(3){padding:17px 11px}
  .mini-segments{flex-wrap:wrap;justify-content:flex-start}
}

/* Responsive composition: vertical controls, left-aligned mobile content. */
.actions{flex-direction:column;flex-wrap:nowrap;align-items:stretch;width:min(100%,360px);margin-inline:auto}
.actions>.button{width:100%}
.button,.small-button,.text-button,.hook-option,.example-tabs button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.button svg,.small-button svg,.button>span[aria-hidden]{flex-shrink:0}
.workspace-bottom{flex-direction:column;align-items:flex-start}
.workspace-bottom>.actions{margin-inline:0}
.example-tabs{flex-direction:column;align-items:stretch;width:100%;max-width:680px;gap:8px}
.example-tabs button{text-align:left}
.example-navigation{flex-direction:column;align-items:flex-start;max-width:680px}
.example-navigation .example-tabs{flex:none}
.hook-options{flex-direction:column;flex-wrap:nowrap}
.hook-option{gap:16px;align-items:center}
.hook-option span{display:inline;flex-shrink:0}
.angle-grid{grid-template-columns:minmax(0,1fr);max-width:680px;margin-inline:auto}
.angle-grid .angle-card:last-child{grid-column:auto}
.angle-card{display:flex;align-items:center;gap:28px;padding:16px 24px}
.angle-card .folder-scene{flex:0 0 142px}
.angle-card .card-label{flex:1;min-width:0}
.angle-detail{max-width:680px;margin-inline:auto;flex-direction:column;align-items:flex-start}
.angle-detail strong{white-space:normal}
.angle-detail #angle-description{flex-basis:100%}
.angle-detail a{white-space:normal;min-height:44px;display:inline-flex;align-items:center}
.section>*,.steps>article,.split-intro>*,.hook-layout>*,.audience-layout>*{min-width:0}
.hero-copy{max-width:100%}
img{max-width:100%}
textarea{scroll-margin-top:100px}
summary{gap:16px;min-height:44px;align-items:center}
summary::after{flex-shrink:0}
.nav-toggle{display:none}
.footer-row a,.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
.footer-row>div{flex-wrap:wrap}
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
  .mini-demo{height:230px}
}
@media (max-width:1000px){
  .problem{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-height:0}
  .problem-copy{order:-1;padding:0 0 18px;align-self:stretch}
  .problem .thought{display:block;position:relative;inset:auto;max-width:min(100%,420px);margin:0}
  .problem .motion-toggle{position:static;align-self:flex-start}
  .audience-layout{grid-template-columns:1fr;gap:32px}
  .idea-transfer{min-height:300px;justify-items:start}
  .transfer-stage{transform:scale(.8);transform-origin:left center;margin-block:-25px}
  .transfer-toggle{left:0;bottom:0}
}
@media (max-width:767px){
  body{text-align:left;font-size:18px}
  .center,.hero-copy,.voice-lines p>strong,.footer-word,.length-word{text-align:left}
  h1,h2,h3{overflow-wrap:anywhere;text-wrap:pretty}
  header,header.scrolled{width:calc(100% - 32px);max-width:none;top:max(8px,env(safe-area-inset-top));min-height:56px;height:auto;padding:6px 12px;border-radius:12px;background:#fffffff5;box-shadow:var(--lift);flex-wrap:wrap;gap:8px}
  .brand{font-size:21px;gap:8px;min-height:44px;flex-shrink:0}
  .brand svg{width:24px;height:24px}
  header nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:4px;padding-block:8px}
  header nav>a,header nav>a:first-child,header nav>a:nth-child(2){display:flex;font-size:16px;min-height:44px;padding:9px 10px;justify-content:flex-start}
  header .small-button{box-shadow:none;background:var(--apr)}
  .nav-ready .nav-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:none;border:0;border-radius:6px;padding:8px;text-align:left;font-size:16px}
  .nav-toggle svg{width:20px;height:20px}
  .nav-ready nav{display:none}
  .nav-ready.menu-open nav{display:flex}
  .hero{min-height:0;height:auto;max-height:none;padding:150px 0 65px;place-items:start;overflow:hidden}
  .hero-copy{width:calc(100% - 40px);margin-inline:20px;padding:0}
  .hero h1{font-size:clamp(40px,7.5vw,52px);line-height:1.15}
  .hero p{max-width:42ch;margin-inline:0;font-size:18px}
  .hero .actions{margin:28px 0 0;width:100%}
  .actions{margin-inline:0;width:100%}
  .button{justify-content:flex-start;text-align:left;font-size:16px;padding:12px 16px}
  .scroll-cue{justify-content:flex-start;margin:32px 0 0}
  .hero-motion{left:20px;right:auto;bottom:15px}
  .section,footer{margin-inline:20px}
  .section{padding-block:64px}
  .intro p{margin-inline:0;font-size:18px}
  .split-intro,.hook-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .split-intro p{font-size:18px}
  .angle-card{gap:20px;padding:16px}
  .angle-card .folder-scene{flex-basis:124px;justify-content:flex-start;height:132px}
  .angle-card .card-label{font-size:16px;gap:10px}
  .angle-detail{gap:8px}
  .angle-detail a{margin-top:8px}
  .problem-copy h2{font-size:33px}
  .problem-copy p{font-size:18px}
  .steps{grid-template-columns:minmax(0,1fr);gap:36px}
  .steps article:last-child{display:block;grid-column:auto}
  .steps article:last-child .step-number{margin:22px 0 10px}
  .steps h3{font-size:22px}
  .steps article>p{font-size:18px;margin-bottom:0}
  .mini-demo{height:230px;padding:24px;font-size:16px}
  .publish-demo{align-items:flex-start}
  .mini-segments{justify-content:flex-start;gap:8px;flex-wrap:wrap}
  .stack-demo>div{left:24px;right:auto;width:calc(100% - 48px);max-width:280px}
  .hook-option{font-size:16px;padding:12px 16px}
  .hook-preview{padding:24px;min-height:0}
  .hook-preview blockquote{font-size:24px;overflow-wrap:anywhere}
  .voice-lines{margin:32px 0}
  .voice-lines p{flex-direction:column;align-items:flex-start;gap:8px;padding-block:18px}
  .voice-lines p>span,.voice-lines p>strong{max-width:100%;text-align:left}
  .voice-lines p>span{font-size:18px}
  .voice-lines p>strong{font-size:20px}
  .controls-grid{grid-template-columns:minmax(0,1fr)}
  .preference-card:last-child{grid-column:auto}
  .preference-card{padding:20px 20px 12px}
  .length-word{text-align:left}
  .goal-diagram{margin-inline:0}
  .original,.post-example{margin-inline:0;padding:24px;max-width:100%}
  .original p{font-size:22px}
  .post-heading{flex-wrap:wrap;gap:10px}
  .post-heading>div{min-width:0}
  .post-heading .linkedin{margin-left:0}
  #example-body{min-height:0;font-size:18px;overflow-wrap:anywhere}
  .copy-example{width:100%}
  .example-navigation{margin-inline:0;gap:10px}
  .example-navigation .example-tabs{width:100%}
  .example-tabs button{font-size:16px;padding:12px 16px}
  .example-motion{width:44px;min-width:44px}
  .audience-list{margin-left:0}
  summary{font-size:22px;line-height:1.45}
  .five-dots{justify-content:flex-start}
  .philosophy p{font-size:18px}
  .workspace{padding:20px;width:100%;margin-inline:0}
  .workspace-heading{flex-direction:column;align-items:flex-start;gap:10px}
  .workspace-heading>span{white-space:normal;text-align:left}
  .workspace textarea{padding:14px;font-size:18px}
  .workspace-bottom,.workspace-bottom>.actions{width:100%}
  .workspace-bottom>.button,.workspace-bottom>.text-button{width:100%;text-align:left}
  .workspace-bottom>.actions .button{flex:auto}
  .text-button{text-align:left}
  .footer-row,.footer-row>div,.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .footer-word{justify-content:flex-start;font-size:clamp(48px,17.5vw,130px);gap:10px;padding-block:28px}
  footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  .angle-card{display:block}
  .angle-card .folder-scene{height:132px}
  .angle-card .card-label{min-height:44px}
  .original,.post-example,.workspace{padding:18px}
  .preference-card{padding-inline:16px}
}