.story-hero{position:relative;overflow:hidden;padding:72px 0 52px}.story-hero:before{position:absolute;top:-260px;left:52%;width:700px;height:700px;border-radius:50%;content:"";background:radial-gradient(circle,rgba(108,92,231,.14),transparent 68%);pointer-events:none}.hero-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);align-items:center;gap:70px}.hero-copy h1{max-width:760px;margin:20px 0 18px;font-size:clamp(3rem,6.25vw,5.4rem)}.hero-copy>p{max-width:660px;margin:0;color:var(--muted);font-size:1.08rem;line-height:1.75}.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}.hero-pills span{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--border);border-radius:999px;color:#555870;background:rgba(255,255,255,.78);font-size:.78rem;font-weight:750}.hero-pills i{display:grid;width:18px;height:18px;place-items:center;border-radius:50%;color:#087b6c;background:rgba(0,194,168,.12);font-style:normal;font-size:.67rem}
.story-arc-visual{position:relative;height:342px;padding:28px;border:1px solid rgba(108,92,231,.14);border-radius:32px;background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(247,245,255,.78));box-shadow:0 30px 80px rgba(53,49,110,.13);isolation:isolate}.story-arc-visual:before{position:absolute;inset:22px;border:1px dashed rgba(108,92,231,.15);border-radius:23px;content:""}.arc-kicker{position:absolute;top:35px;left:43px;color:var(--primary);font-size:.65rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.arc-line{position:absolute;z-index:-1;left:61px;right:55px;bottom:65px;height:180px;border-top:3px solid var(--primary);border-right:3px solid var(--primary);border-radius:0 110px 0 0;transform:skewY(-26deg) rotate(-2deg);opacity:.21}.arc-stage{position:absolute;display:flex;flex-direction:column;gap:5px;width:116px;padding:14px;border:1px solid rgba(108,92,231,.14);border-radius:16px;background:#fff;box-shadow:0 15px 32px rgba(53,49,110,.11);animation:float-card 5s ease-in-out infinite}.arc-stage small{color:var(--primary);font-size:.59rem;font-weight:900;letter-spacing:.12em}.arc-stage strong{font-size:.8rem;line-height:1.35}.arc-stage-one{left:38px;bottom:38px}.arc-stage-two{top:112px;left:50%;transform:translateX(-50%);animation-delay:-1.6s}.arc-stage-three{top:47px;right:34px;animation-delay:-3.2s}.arc-spark{position:absolute;color:#e5a72f;text-shadow:0 0 20px rgba(229,167,47,.42);animation:spark-pulse 2.6s ease-in-out infinite}.spark-one{left:31%;bottom:38%}.spark-two{top:30%;left:52%;animation-delay:-.8s}.spark-three{top:22%;right:20%;animation-delay:-1.6s}@keyframes float-card{50%{translate:0 -7px}}@keyframes spark-pulse{50%{transform:scale(1.35) rotate(14deg);opacity:.55}}
.outliner-app{padding:20px 0 82px}.app-shell{overflow:hidden;border:1px solid var(--border);border-radius:28px;background:rgba(255,255,255,.86);box-shadow:0 30px 85px rgba(53,49,110,.13)}.app-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 30px 16px}.app-heading h2{margin:6px 0 0;font-size:1.34rem;letter-spacing:-.025em}.overline{display:block;color:var(--primary);font-size:.67rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.save-state{display:inline-flex;align-items:center;gap:8px;color:#44756d;font-size:.73rem;font-weight:800}.save-state i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,194,168,.1)}.save-state.saving i{animation:save-pulse .7s infinite}.save-state.error{color:#b34d4d}.save-state.error i{background:#d65f5f}@keyframes save-pulse{50%{opacity:.35;transform:scale(.75)}}
.story-details{display:grid;grid-template-columns:1.2fr .7fr 2fr;gap:14px;padding:0 30px 26px}.story-details label{display:flex;flex-direction:column;gap:7px}.story-details label>span{color:#595d74;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.story-details input,.story-details textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:13px;outline:0;color:var(--text);background:#fff;transition:.2s;resize:vertical}.story-details textarea{min-height:48px;max-height:130px}.story-details input:focus,.story-details textarea:focus{border-color:rgba(108,92,231,.52);box-shadow:0 0 0 4px rgba(108,92,231,.08)}
.template-bar{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:21px 30px;border-block:1px solid var(--border);background:linear-gradient(90deg,rgba(108,92,231,.045),rgba(0,194,168,.035))}.template-bar strong{display:block;margin-top:5px;font-size:.95rem}.template-list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.template-list button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;border:1px solid var(--border);border-radius:11px;color:#55586c;background:#fff;font-size:.76rem;font-weight:800;transition:.2s}.template-list button span{color:var(--primary);font-size:.8rem}.template-list button:hover,.template-list button.active{border-color:rgba(108,92,231,.28);color:var(--primary);background:#f3f1ff;transform:translateY(-1px)}
.arc-progress{padding:22px 30px 20px;border-bottom:1px solid var(--border);background:#fff}.progress-copy{display:flex;justify-content:space-between;gap:20px;margin-bottom:12px;color:#5c6077;font-size:.76rem}.progress-copy strong{color:var(--text)}.progress-track{position:relative;height:8px;border-radius:999px;background:#edeaf7}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#9876ef 60%,var(--accent));box-shadow:0 0 22px rgba(108,92,231,.28);transition:width .45s cubic-bezier(.22,.8,.24,1)}.progress-track i{position:absolute;top:50%;left:0;color:#fff;filter:drop-shadow(0 2px 5px rgba(78,63,184,.45));font-style:normal;font-size:.75rem;transform:translate(-50%,-50%);transition:left .45s cubic-bezier(.22,.8,.24,1)}.act-labels{display:grid;grid-template-columns:1fr 2fr 1fr;margin-top:10px;color:#9597aa;font-size:.56rem;font-weight:850;letter-spacing:.07em}.act-labels span:nth-child(2){text-align:center}.act-labels span:last-child{text-align:right}
.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:600px}.outline-rail{padding:27px 22px;border-right:1px solid var(--border);background:rgba(247,246,252,.75)}.rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.rail-head h3{margin:5px 0 0;font-size:1.05rem}.completion-badge{display:grid;width:45px;height:45px;place-items:center;border:1px solid rgba(108,92,231,.18);border-radius:50%;color:var(--primary);background:#fff;font-size:.67rem;font-weight:900}.act-group+.act-group{margin-top:19px}.act-group-title{display:flex;align-items:center;gap:8px;margin:0 6px 8px;color:#8c8fa4;font-size:.59rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.act-group-title:after{height:1px;flex:1;content:"";background:var(--border)}.beat-link{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px;width:100%;padding:7px 8px;border:0;border-radius:9px;color:#66697e;background:transparent;text-align:left;font-size:.72rem;font-weight:700;transition:.18s}.beat-link:hover,.beat-link.active{color:var(--primary);background:rgba(108,92,231,.08)}.beat-link i{display:grid;width:19px;height:19px;place-items:center;border:1px solid #d8d5e7;border-radius:50%;color:transparent;background:#fff;font-style:normal;font-size:.56rem}.beat-link.done i{border-color:var(--accent);color:#fff;background:var(--accent)}.beat-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.privacy-note{display:flex;align-items:flex-start;gap:10px;margin-top:24px;padding:13px;border:1px solid rgba(0,194,168,.14);border-radius:13px;color:#267a6f;background:rgba(0,194,168,.055)}.privacy-note>span{font-size:1rem}.privacy-note strong,.privacy-note small{display:block}.privacy-note strong{font-size:.69rem}.privacy-note small{margin-top:3px;color:#63867f;font-size:.62rem;line-height:1.45}
.beats-panel{padding:28px 30px 34px;min-width:0}.beats-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:19px}.beats-toolbar h2{margin:5px 0 0;font-size:1.4rem;letter-spacing:-.03em}.toolbar-actions{display:flex;gap:8px}.tool-action{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;border:1px solid var(--border);border-radius:10px;color:#575a70;background:#fff;font-size:.69rem;font-weight:800;transition:.18s}.tool-action:hover{border-color:rgba(108,92,231,.25);color:var(--primary);background:#f7f5ff}.beat-card{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;margin-bottom:12px;padding:18px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(53,49,110,.045);transition:.22s}.beat-card:focus-within{border-color:rgba(108,92,231,.3);box-shadow:0 12px 30px rgba(53,49,110,.08),0 0 0 3px rgba(108,92,231,.05)}.beat-card.complete{border-color:rgba(0,194,168,.22)}.beat-number{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;color:var(--primary);background:rgba(108,92,231,.09);font-size:.78rem;font-weight:900}.beat-card.complete .beat-number{color:#08786a;background:rgba(0,194,168,.11)}.beat-main{min-width:0}.beat-top{display:flex;align-items:flex-start;gap:10px}.beat-name{width:100%;padding:2px 0 5px;border:0;border-bottom:1px solid transparent;outline:0;color:var(--text);background:transparent;font-size:.98rem;font-weight:850}.beat-name:focus{border-color:rgba(108,92,231,.3)}.beat-meta{display:flex;align-items:center;flex:0 0 auto;gap:7px}.act-select{padding:5px 24px 5px 8px;border:1px solid var(--border);border-radius:8px;outline:0;color:var(--primary);background:#faf9ff;font-size:.57rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.beat-position{color:#9295a8;font-size:.61rem;font-weight:750;white-space:nowrap}.beat-prompt{margin:7px 0 10px;color:#777a8f;font-size:.72rem;line-height:1.5}.beat-text{width:100%;min-height:96px;padding:12px 13px;border:1px solid rgba(31,34,62,.09);border-radius:11px;outline:0;color:#323448;background:#fbfbfe;line-height:1.55;resize:vertical;transition:.18s}.beat-text::placeholder{color:#aaacba}.beat-text:focus{border-color:rgba(108,92,231,.35);background:#fff;box-shadow:0 0 0 3px rgba(108,92,231,.06)}.beat-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}.word-count{color:#9a9cad;font-size:.61rem}.beat-actions{display:flex;gap:5px}.beat-actions button{display:grid;width:29px;height:28px;place-items:center;border:1px solid transparent;border-radius:8px;color:#8a8da2;background:transparent;font-size:.73rem}.beat-actions button:hover{border-color:var(--border);color:var(--primary);background:#f7f5ff}.beat-actions button:disabled{opacity:.3;cursor:not-allowed}.beat-actions .delete-beat:hover{color:#bd4f57;background:#fff4f4}.add-beat{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:70px;padding:12px;border:1px dashed rgba(108,92,231,.3);border-radius:16px;color:var(--primary);background:rgba(108,92,231,.035);text-align:left;transition:.2s}.add-beat>span:first-child{display:grid;width:35px;height:35px;place-items:center;border-radius:11px;color:#fff;background:var(--primary);font-size:1.1rem}.add-beat strong,.add-beat small{display:block}.add-beat strong{font-size:.78rem}.add-beat small{margin-top:3px;color:#81849a;font-size:.65rem}.add-beat:hover{border-color:rgba(108,92,231,.5);background:rgba(108,92,231,.07);transform:translateY(-1px)}.reset-action{display:block;margin:20px auto 0;padding:7px 10px;border:0;color:#9a6b73;background:transparent;font-size:.67rem;font-weight:750;text-decoration:underline;text-underline-offset:3px}
.guide-section{padding:78px 0;background:rgba(255,255,255,.43);border-block:1px solid rgba(31,34,62,.06)}.guide-intro{max-width:780px}.guide-intro h2{margin:8px 0 13px;font-size:clamp(2rem,4.5vw,3.15rem);letter-spacing:-.05em}.guide-intro p{margin:0;color:var(--muted);line-height:1.8}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:35px}.method-grid article{padding:24px;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.84)}.method-grid article>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:var(--primary);background:rgba(108,92,231,.09);font-size:.67rem;font-weight:900}.method-grid h3{margin:17px 0 8px;font-size:1rem}.method-grid p{margin:0;color:var(--muted);font-size:.83rem;line-height:1.65}.template-guide{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:55px;margin-top:72px;padding:38px;border:1px solid var(--border);border-radius:25px;background:linear-gradient(135deg,#fff,rgba(243,240,255,.75));box-shadow:0 18px 50px rgba(53,49,110,.07)}.template-guide h2{margin:8px 0 12px;font-size:clamp(1.65rem,3.2vw,2.35rem);letter-spacing:-.04em}.template-guide p{margin:0;color:var(--muted);line-height:1.7}.template-comparison{display:grid;gap:12px}.template-comparison article{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:15px;padding:18px;border:1px solid var(--border);border-radius:17px;background:#fff}.template-comparison article>span{display:grid;width:44px;height:44px;place-items:center;border-radius:13px;color:var(--primary);background:rgba(108,92,231,.09);font-weight:900}.template-comparison strong{font-size:.88rem}.template-comparison p{margin-top:4px;font-size:.76rem;line-height:1.55}.faq-list{max-width:880px;margin:74px auto 0}.faq-list h2{margin:0 0 22px;text-align:center;font-size:clamp(1.8rem,4vw,2.65rem);letter-spacing:-.045em}.faq-list details{margin-bottom:10px;border:1px solid var(--border);border-radius:16px;background:#fff}.faq-list summary{padding:18px 20px;cursor:pointer;font-size:.88rem;font-weight:800}.faq-list p{margin:0;padding:0 20px 19px;color:var(--muted);font-size:.82rem;line-height:1.7}
.try-section{padding:74px 0 84px}.try-head{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:25px}.try-head h2{margin:7px 0 8px;font-size:clamp(1.75rem,4vw,2.7rem);letter-spacing:-.045em}.try-head p{margin:0;color:var(--muted)}.secondary-action{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:11px 14px;border:1px solid var(--border);border-radius:12px;color:var(--primary);background:#fff;font-size:.77rem;font-weight:800}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.try-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:18px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.8);transition:.2s}.try-card:hover{transform:translateY(-3px);background:#fff;box-shadow:0 15px 35px rgba(53,49,110,.09)}.try-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:13px;color:var(--primary);background:rgba(108,92,231,.09);font-size:.8rem;font-weight:900}.try-card strong,.try-card span span{display:block}.try-card strong{font-size:.84rem}.try-card span span{margin-top:4px;color:var(--muted);font-size:.7rem;line-height:1.45}.try-card b{color:var(--primary)}
.toast{position:fixed;z-index:80;right:22px;bottom:22px;max-width:min(360px,calc(100vw - 44px));padding:13px 17px;border-radius:13px;color:#fff;background:#292a43;box-shadow:0 14px 35px rgba(29,28,59,.28);opacity:0;transform:translateY(12px);pointer-events:none;font-size:.77rem;font-weight:750;transition:.25s}.toast.show{opacity:1;transform:none}.celebration{position:fixed;inset:0;z-index:70;overflow:hidden;pointer-events:none}.confetti{position:absolute;top:-24px;width:9px;height:14px;border-radius:3px;animation:confetti-fall 2.6s ease-in forwards}@keyframes confetti-fall{to{transform:translate3d(var(--drift),105vh,0) rotate(780deg);opacity:.2}}
@media(max-width:980px){.hero-layout{grid-template-columns:1fr;gap:42px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-pills{justify-content:center}.story-arc-visual{width:min(100%,500px);margin:auto}.story-details{grid-template-columns:1fr 1fr}.premise-field{grid-column:1/-1}.workspace{grid-template-columns:230px minmax(0,1fr)}.beats-panel{padding-inline:22px}.template-guide{grid-template-columns:1fr;gap:28px}}
@media(max-width:760px){.story-hero{padding:52px 0 36px}.hero-copy h1{font-size:clamp(2.7rem,13vw,4.2rem)}.story-arc-visual{height:310px}.arc-stage{width:105px;padding:11px}.arc-stage-two{top:104px}.app-heading,.template-bar{align-items:flex-start;flex-direction:column}.story-details{grid-template-columns:1fr}.premise-field{grid-column:auto}.template-list{justify-content:flex-start}.workspace{display:block}.outline-rail{border-right:0;border-bottom:1px solid var(--border)}#beatNav{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px}.act-group{display:flex;gap:5px;flex:0 0 auto}.act-group+.act-group{margin:0}.act-group-title{writing-mode:vertical-rl;justify-content:center;margin:0 3px}.act-group-title:after{display:none}.beat-link{width:145px;flex:0 0 auto}.privacy-note{display:none}.method-grid,.try-grid{grid-template-columns:1fr}.template-guide{padding:26px}.try-head{align-items:flex-start;flex-direction:column}.beats-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.tool-action{flex:1;justify-content:center}}
@media(max-width:520px){.story-arc-visual{height:282px;padding:17px}.story-arc-visual:before{inset:12px}.arc-kicker{top:25px;left:28px}.arc-stage{width:94px;padding:10px}.arc-stage strong{font-size:.69rem}.arc-stage-one{left:18px;bottom:23px}.arc-stage-two{top:96px}.arc-stage-three{top:38px;right:15px}.app-shell{border-radius:21px}.app-heading,.story-details,.template-bar,.arc-progress,.beats-panel{padding-left:18px;padding-right:18px}.progress-copy{align-items:flex-start;flex-direction:column;gap:4px}.act-labels{display:none}.outline-rail{padding:22px 16px}.beat-card{grid-template-columns:36px 1fr;padding:14px;gap:10px}.beat-number{width:34px;height:34px;border-radius:10px}.beat-top{flex-direction:column}.beat-meta{width:100%;justify-content:space-between}.beat-text{min-height:116px}.beat-foot{align-items:flex-start;flex-direction:column}.beat-actions{align-self:flex-end}.template-list button{flex:1;justify-content:center;min-width:125px}.story-details input,.story-details textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){.arc-stage,.arc-spark,.progress-track span,.progress-track i,.confetti{animation:none!important;transition:none!important}}