:root{--accent:#35685e;--soft:#e5eddc;--paper:#fafaf4;--ink:#283b32;--line:color-mix(in srgb,#283b32 14%,transparent);--muted:color-mix(in srgb,#283b32 69%,#fafaf4);--tint:color-mix(in srgb,#fafaf4 65%,white)}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("/assets/fonts/dm-sans-latin.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/assets/fonts/manrope-latin.woff2") format("woff2")}
*{box-sizing:border-box}
:root{--font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-heading:"Manrope","DM Sans",system-ui,sans-serif;--radius:12px;--muted:#59616b}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.48}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
::selection{background:var(--soft)}
.skip{position:absolute;top:-70px;left:20px;z-index:10;background:white;padding:12px 16px;border-radius:6px}.skip:focus{top:12px}
.shell{max-width:1320px;padding:0 40px;margin:auto}
.topbar{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font:750 23px/1.2 var(--font-heading);letter-spacing:-.9px;white-space:nowrap}
.brand img{width:34px;height:34px;object-fit:contain;filter:brightness(0);opacity:.8}
.nav{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:550}.nav a:hover,.footer a:hover{color:var(--accent)}
.nav .nav-cta{border:1px solid var(--line);border-radius:7px;padding:10px 16px;background:#ffffff70}
.eyebrow{font-size:11px;line-height:1.6;letter-spacing:1.8px;font-weight:750;color:var(--accent);text-transform:uppercase}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;padding:58px 0 50px;align-items:center}
.hero h1{font:700 clamp(36px,4.7vw,61px)/1.12 var(--font-heading);letter-spacing:-2.1px;margin:17px 0 22px;text-wrap:balance;overflow-wrap:break-word}
.hero h1 em{font-style:normal;color:var(--accent);font-weight:700}
.hero p{font-size:17px;max-width:530px;color:var(--muted);line-height:1.8;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin:28px 0 23px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;border-radius:7px;border:1px solid transparent;background:var(--accent);color:white;font-size:14px;font-weight:650;line-height:1.4;transition:transform .15s,filter .15s}
.button:hover{filter:brightness(.94);transform:translateY(-1px)}.button.secondary{background:white;border-color:var(--line);color:var(--ink)}
.text-link{font-size:14px;font-weight:550;border-bottom:1px solid var(--line);padding:4px 0}
.trust{display:flex;flex-wrap:wrap;gap:9px 18px;color:var(--muted);font-size:12px}.trust span:before{content:'✓';color:var(--accent);margin-right:7px;font-weight:700}
.illustration{position:relative;height:320px;background:var(--soft);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.illustration:before{content:'';position:absolute;inset:22px;border:1px solid var(--line);border-radius:50% 50% 8px 8px}
.art-caption{position:absolute;left:24px;bottom:18px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.art-card{position:absolute;width:205px;min-height:221px;left:50%;top:36px;transform:translateX(-50%) rotate(-5deg);background:var(--paper);padding:26px;box-shadow:0 14px 30px #0000000c;border:1px solid var(--line);border-radius:7px}
.art-card .art-icon{height:59px;width:59px;object-fit:contain;display:block;margin:0 auto 18px;filter:brightness(0);opacity:.7}
.art-card strong{display:block;text-align:center;font:650 19px/1.4 var(--font-heading);letter-spacing:-.6px}
.art-rule{height:4px;background:var(--accent);opacity:.17;margin-top:12px;border-radius:2px}.art-rule.short{width:60%}
.stamp{position:absolute;right:22px;top:26px;width:67px;height:67px;border:1px dashed var(--accent);border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--accent);font-size:9px;line-height:1.5;transform:rotate(12deg);background:var(--soft)}
.art-label{position:absolute;left:22px;top:28px;writing-mode:vertical-rl;font-size:10px;letter-spacing:1.4px}
.divider{display:flex;align-items:center;gap:15px;margin:0 0 22px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase}.divider:after{content:'';height:1px;background:var(--line);flex:1}
.workbench{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;align-items:start}.workbench>*,.editor>*{min-width:0}
.sidebar{position:sticky;top:24px}.sidebar-label{font-size:10px;font-weight:650;color:var(--muted);letter-spacing:1.5px;margin:3px 0 14px}
.tool-nav{display:flex;flex-direction:column;gap:6px;max-width:100%}.tool-nav a{display:flex;gap:10px;align-items:center;min-height:46px;padding:11px 12px;font-size:14px;line-height:1.45;border:1px solid transparent;border-radius:7px}.tool-nav a:hover{background:var(--soft)}.tool-nav a.active{background:var(--soft);border-color:var(--line);color:var(--accent);font-weight:650}.tool-nav .number{font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}
.side-note{border-top:1px solid var(--line);margin:24px 9px 0;padding-top:19px;font-size:12px;color:var(--muted)}.side-note strong{color:var(--ink);display:block;font-weight:650;margin-bottom:7px}
.workspace{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 28px #00000004;overflow:hidden}
.workspace-head{padding:25px 28px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:18px;justify-content:space-between}.workspace-head h2{font:700 25px/1.35 var(--font-heading);margin:0 0 8px;letter-spacing:-.8px}.workspace-head p{font-size:14px;color:var(--muted);margin:0;max-width:620px;line-height:1.7}
.pill{white-space:nowrap;font-size:11px;color:var(--accent);border:1px solid var(--line);padding:5px 10px;border-radius:20px;background:var(--paper)}
.editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:490px}.input-pane{padding:26px 28px}.output-pane{background:var(--tint);border-left:1px solid var(--line);padding:26px 28px;display:flex;flex-direction:column;min-width:0}
.pane-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:24px}.pane-label{font-size:11px;letter-spacing:1.2px;font-weight:700;text-transform:uppercase}
.small-button{min-height:28px;border:0;background:none;padding:3px 0;color:var(--accent);font-size:12px;text-decoration:underline;text-underline-offset:4px}
.field{margin-bottom:20px}.field label{display:block;font-size:14px;font-weight:650;margin-bottom:8px}.field input,.field textarea,.field select{display:block;width:100%;min-width:0;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:white;padding:12px 13px;font-size:15px;line-height:1.6;transition:border-color .15s,box-shadow .15s}.field input,.field select{min-height:48px}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.field textarea{min-height:150px;resize:vertical}.field textarea.long{min-height:260px;font-variant-numeric:tabular-nums}.field input::placeholder,.field textarea::placeholder{color:#777d82;opacity:1}.field small{font-size:12px;color:var(--muted)}.counter{display:block;text-align:right;font-size:11px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.form-bottom{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.form-bottom .button{font-size:13px;padding:12px 15px;flex:1;min-width:125px}.mode-note{font-size:12px;color:var(--muted);line-height:1.7;margin:14px 0 10px}
.output-empty{flex:1;min-height:275px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:24px 0}.output-empty svg{height:40px;width:40px;color:var(--accent);opacity:.65}.output-empty h3{font:650 22px/1.4 var(--font-heading);color:var(--ink);margin:16px 0 10px;letter-spacing:-.6px}.output-empty p{font-size:14px;max-width:260px;margin:auto;line-height:1.8}
.output-content{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.85 var(--font-body);min-height:260px;max-height:640px;overflow:auto;scrollbar-width:thin;margin:0;flex:1;tab-size:2}.result-meta{font-size:12px;color:var(--muted);margin:15px 0;line-height:1.7}.output-actions{border-top:1px solid var(--line);padding-top:15px;margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 16px}.output-actions button{min-height:36px;font-size:13px;font-weight:550;background:transparent;border:0;padding:5px 0;color:var(--ink)}.output-actions button:hover{color:var(--accent)}
.error{font-size:14px;color:#8f3027;margin:14px 0;padding:12px 14px;border:1px solid #e9c8c0;background:#fff4f0;border-radius:7px}.notice{font-size:13px;color:var(--muted);padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:var(--paper);margin:14px 0}.media-output{width:100%;margin-top:15px}
.section{margin-top:64px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px;gap:24px}.section-heading h1,.section-heading h2{font:700 33px/1.25 var(--font-heading);letter-spacing:-1px;margin:8px 0 0}.section-heading p{font-size:15px;color:var(--muted);margin:10px 0 0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{display:flex;flex-direction:column;border:1px solid var(--line);background:#ffffff8c;border-radius:10px;padding:26px;transition:background .15s,transform .15s}.card:hover{background:white;transform:translateY(-3px)}.card-number{font-size:11px;font-weight:650;color:var(--accent);letter-spacing:1px}.card h3{font:650 22px/1.4 var(--font-heading);letter-spacing:-.55px;margin:15px 0 12px;overflow-wrap:anywhere}.card p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.card .arrow{display:block;margin-top:auto;padding-top:22px;color:var(--accent);font-size:20px}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:44px 0 0}.how h3{font-size:15px;font-weight:650;margin:0 0 9px}.how h3 span{color:var(--accent);margin-right:12px;font-size:12px}.how p{font-size:14px;color:var(--muted);margin:0;line-height:1.8}
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:65px;margin-top:60px}.faq h2{font:700 32px/1.3 var(--font-heading);letter-spacing:-.8px;margin:10px 0}.faq details{border-bottom:1px solid var(--line);padding:18px 0;font-size:15px}.faq summary{cursor:pointer;font-weight:600;padding:2px 0}.faq details p{color:var(--muted);font-size:14px;line-height:1.8}
.footer{margin-top:64px;border-top:1px solid var(--line);padding:30px 0 34px;display:flex;justify-content:space-between;gap:28px;align-items:start}.footer-brand{font:700 20px/1.4 var(--font-heading);letter-spacing:-.6px}.footer p{font-size:12px;color:var(--muted);margin:9px 0}.footer-links{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:13px}.footer-links a{min-height:32px;display:inline-flex;align-items:center}.attribution{font-size:12px;color:var(--muted)}
.article{max-width:760px;margin:50px auto}.article h1{font:700 clamp(32px,4vw,46px)/1.2 var(--font-heading);letter-spacing:-1.4px;text-wrap:balance;overflow-wrap:anywhere}.article .intro{font-size:19px;color:var(--muted);line-height:1.8}.article h2{font:650 26px/1.4 var(--font-heading);letter-spacing:-.6px;margin:36px 0 12px}.article p,.article li{font-size:16px;color:var(--muted);line-height:1.9}.article .back{font-size:14px;color:var(--accent)}.callout{padding:28px;background:var(--soft);border:1px solid var(--line);border-radius:10px;margin-top:32px}.callout h2{margin-top:0}.search-field{width:260px;border:1px solid var(--line);padding:12px 14px;min-height:48px;font-size:15px;border-radius:7px;background:white}.sr-label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.hidden,[hidden]{display:none!important}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:13px 20px;background:var(--ink);color:white;border-radius:8px;font-size:14px;text-align:center;z-index:10;box-shadow:0 6px 25px #0002}
.file-picker{border:1px dashed var(--accent);background:var(--paper);padding:20px 16px;border-radius:8px;margin-bottom:22px}.file-picker label{font-size:14px;font-weight:650;display:block;margin-bottom:12px}.file-picker input{max-width:100%;font-size:13px}.file-picker p{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:0}.save-option{font-size:13px;color:var(--muted);display:flex;gap:9px;align-items:center;margin:14px 0;line-height:1.6}.save-option input{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.busy .workspace{opacity:.82}.busy button[type=submit]{cursor:progress}.ads-info{font-size:12px;color:var(--muted);text-align:center;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px}
.motif-tavern .art-card{transform:translateX(-50%) rotate(4deg)}.motif-frame .art-card{transform:translateX(-50%) rotate(0);border:8px solid white;outline:1px solid var(--line)}.motif-podcast .art-card{border-radius:100px 100px 7px 7px}.motif-lesson .art-card{transform:translateX(-50%) rotate(5deg)}.motif-caption .art-card{transform:translateX(-50%) rotate(-3deg)}
.guide-tags{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.guide-tags a{font-size:13px;border:1px solid var(--line);border-radius:5px;padding:7px 12px}noscript p{border:1px solid var(--line);padding:16px;font-size:14px}
.tool-page .hero{display:block;padding:32px 0 28px}.tool-page .hero h1{font-size:clamp(30px,3.2vw,43px);max-width:1000px;margin:10px 0 12px;letter-spacing:-1.25px;text-wrap:pretty}.tool-page .hero p{max-width:800px;font-size:16px}.tool-page .hero-actions,.tool-page .trust,.tool-page .illustration{display:none}
@media(min-width:1450px){.shell{max-width:1400px}.hero{gap:85px;padding:66px 0 55px}.hero h1{font-size:66px}.illustration{height:340px}.art-card{top:50px}.tool-page .hero h1{font-size:43px}}
@media(max-width:1100px){.shell{padding:0 28px}.hero{gap:32px}.hero h1{font-size:48px;letter-spacing:-1.6px}.hero p{font-size:16px}.workbench{grid-template-columns:minmax(0,1fr);gap:16px}.sidebar{position:static}.sidebar-label,.side-note{display:none}.tool-nav{flex-direction:row;overflow:auto;padding-bottom:5px;gap:8px;scrollbar-width:thin}.tool-nav a{flex-shrink:0;padding:10px 14px;background:#ffffff80;border-color:var(--line);font-size:13px}.tool-nav .number{display:none}.input-pane,.output-pane{padding:25px}.cards{gap:15px}.card{padding:23px}.faq{gap:36px}}
@media(max-width:760px){.shell{padding:0 20px}.topbar{min-height:74px;gap:15px;flex-wrap:wrap;padding:18px 0}.brand{font-size:21px}.brand img{width:30px;height:30px}.nav{gap:18px;font-size:13px}.nav-cta{display:none}.hero{padding:36px 0 32px;grid-template-columns:minmax(0,1fr);gap:28px}.hero h1{font-size:clamp(35px,7.7vw,48px);letter-spacing:-1.4px;margin:14px 0 18px}.hero p{font-size:16px}.hero-actions{margin:23px 0 20px;gap:18px}.trust{font-size:12px;gap:8px 15px}.illustration{height:210px}.art-card{top:18px;min-height:170px;width:180px;padding:17px}.art-card .art-icon{height:42px;width:42px;margin-bottom:12px}.art-card strong{font-size:17px}.art-rule{margin-top:9px}.art-label{display:none}.stamp{right:18px;top:20px;width:57px;height:57px;font-size:8px}.art-caption{font-size:9px;bottom:10px;left:16px;max-width:calc(100% - 32px)}.workspace-head{padding:22px}.workspace-head h2{font-size:23px}.workspace-head .pill{display:none}.editor{grid-template-columns:minmax(0,1fr)}.input-pane,.output-pane{padding:23px 22px}.output-pane{border-left:0;border-top:1px solid var(--line);min-height:300px}.pane-top{margin-bottom:20px}.field input,.field textarea,.field select{font-size:16px}.field textarea{min-height:160px}.field textarea.long{min-height:240px}.output-content{font-size:15px;max-height:520px}.cards{grid-template-columns:minmax(0,1fr)}.card{padding:23px}.card h3{font-size:23px}.card .arrow{padding-top:15px}.section{margin-top:42px}.section-heading{align-items:start;flex-direction:column;gap:18px}.section-heading h1,.section-heading h2{font-size:29px}.section-heading>label,.search-field{width:100%}.how{grid-template-columns:minmax(0,1fr);gap:23px;margin-top:32px;padding:25px 0}.faq{grid-template-columns:minmax(0,1fr);gap:7px;margin-top:40px}.faq h2{font-size:29px}.footer{flex-direction:column;margin-top:44px;gap:18px}.footer-links{gap:8px 20px}.article{margin-top:32px}.article h1{font-size:34px;letter-spacing:-1px}.article .intro{font-size:18px}.article h2{font-size:24px}.callout{padding:22px}.output-empty{min-height:230px}.tool-page .hero{padding:28px 0 24px}.tool-page .hero h1{font-size:32px;letter-spacing:-1px}.form-bottom .button{font-size:14px}}
@media(max-width:420px){.topbar{gap:11px}.nav{gap:15px;width:100%;padding-left:41px}.hero h1{font-size:37px}.hero .button{width:100%}.hero-actions{gap:14px}.tool-page .hero h1{font-size:30px}.input-pane,.output-pane,.workspace-head{padding:21px 18px}.form-bottom{flex-direction:column}.form-bottom .button{width:100%}.pane-top .pill{font-size:10px}.output-actions{justify-content:space-between;gap:6px 11px}.footer-links{gap:8px 17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{body{background:white;color:#000;font-family:system-ui,sans-serif}.topbar,.hero,.sidebar,.input-pane,.workspace-head,.section,.faq,.footer,.how,.divider,.output-actions,.ads-info,.toast,.result-meta,.pane-top,.save-option,.error,.notice{display:none!important}.shell{max-width:none;padding:0}.workbench,.editor{display:block}.workspace,.output-pane{border:0;box-shadow:none;background:white;padding:0}.output-content{font:12pt/1.6 system-ui,sans-serif;white-space:pre-wrap;max-height:none;overflow:visible}.article{margin:0}.article h1{font-size:25pt}.article p{color:#000}.callout{display:none}}