:root{color-scheme:dark;--bg:#080605;--panel:#18110e;--line:#493328;--ink:#fff3df;--muted:#c4ae9d;--accent:#ff7a18;--paper:#fff0d8;--black:#1e130e;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);min-width:280px;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
button:disabled{opacity:.6;cursor:default}
button svg{width:21px;height:21px;flex-shrink:0}
.background-art{position:fixed;z-index:0;top:0;right:0;width:min(60vw,1080px);aspect-ratio:1;pointer-events:none;overflow:hidden}
.background-art img{display:block;width:100%;height:auto}
.background-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 78%,var(--bg) 100%)}
.page-shell{position:relative;z-index:1;width:min(43vw,670px);padding:0 clamp(25px,4vw,64px);min-height:100vh;min-height:100svh}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:25px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--accent);border-radius:10px;color:var(--black);transform:rotate(-7deg);flex-shrink:0}
.brand-mark svg{width:24px;height:24px}
h1{font-size:1rem;line-height:1.25;letter-spacing:-.02em;margin:0;font-weight:750}h1 span{display:block;color:var(--muted);font-weight:500}
.platform-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.75rem;white-space:nowrap}
.x-mark{font-size:1.5rem;line-height:1;color:var(--ink)}
main{padding:27px 0 26px}
.intro{margin-bottom:24px}
.eyebrow{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.75rem;line-height:1.5;letter-spacing:.055em;color:var(--accent);margin:0 0 12px}
h2{font-size:clamp(1.75rem,2.8vw,2.6rem);letter-spacing:-.045em;line-height:1.08;margin:0 0 14px;font-weight:780}
h2 span{color:var(--accent)}
.intro-copy{color:var(--muted);font-size:1rem;line-height:1.5;margin:0}
.workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:19px;align-items:start}
.input-panel{background:rgba(24,17,14,.97);border:1px solid var(--line);border-radius:16px;padding:21px;box-shadow:0 10px 34px #0004}
.section-label{display:flex;align-items:center;gap:10px;min-width:0}
.section-label h3{font-size:.875rem;font-weight:650;margin:0;line-height:1.45}
.step{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.75rem;border:1px solid var(--line);padding:3px 6px;border-radius:5px;color:var(--muted);flex-shrink:0}
form{margin-top:17px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start}
label{display:block;grid-column:1/-1;font-size:.875rem;font-weight:600;margin:0 0 9px}
.input-wrap{position:relative;grid-column:1;grid-row:2}
input{width:100%;min-width:0;border:1px solid #70513f;background:#0d0907;border-radius:9px;color:var(--ink);padding:13px 31px 13px 13px;font-size:1.125rem;line-height:1.4;min-height:53px;transition:border-color .15s}
input:hover{border-color:#bc8a63}input:focus{border-color:var(--accent)}input[aria-invalid="true"]{border-color:#ffad9f}input::placeholder{color:#b7a493;font-size:1rem}
.input-spark{position:absolute;right:12px;top:9px;font-size:1.85rem;color:var(--accent);pointer-events:none}
.field-help{grid-column:1/-1;color:var(--muted);font-size:.875rem;line-height:1.5;margin:10px 0 0}
.error{grid-column:1/-1;color:#ffb9ad;font-size:.875rem;line-height:1.5;margin:9px 0 0}
.generate-button{grid-column:2;grid-row:2;border:0;min-height:53px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;background:var(--accent);color:#1b0c02;font-weight:750;font-size:.875rem;transition:background .15s,transform .15s}
.generate-button:hover{background:#ff9844;transform:translateY(-1px)}.generate-button:active{transform:translateY(1px)}
.keyboard-hint,.input-note{display:none}
.reply-panel{position:relative;background:var(--paper);border:1px solid #ffb77c;color:var(--black);border-radius:16px;padding:22px 23px 12px;display:flex;flex-direction:column;box-shadow:0 5px 0 #b94d0c,0 18px 38px #0005;min-width:0}
.reply-header{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.reply-panel .step{border-color:#d5b897;color:#78583d}
.tone{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.75rem;line-height:1.4;letter-spacing:.04em;color:#75401d;background:#ffe0b4;border:1px solid #e8b179;border-radius:5px;padding:5px 8px;white-space:nowrap}
.reply-body{padding:24px 0 20px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:160px}
.quote-mark{font-family:Georgia,serif;font-size:4rem;line-height:.68;height:33px;color:#ba500d}
#reply-text{font-size:clamp(1.35rem,1.9vw,1.625rem);letter-spacing:-.025em;line-height:1.28;font-weight:720;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.reply-meta{display:flex;justify-content:space-between;gap:16px;align-items:end;font-size:.75rem;line-height:1.5;color:#735439;margin-bottom:15px}
.reply-meta>span:first-child{min-width:0;overflow-wrap:anywhere}.reply-meta strong{font-weight:650;color:#4b2a14}.reply-meta>span:last-child{white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.reply-actions{border-top:1px solid #dec2a0;padding-top:15px;display:flex;gap:10px;align-items:stretch}
.copy-button,.reroll-button{display:flex;justify-content:center;align-items:center;gap:8px;min-height:47px;padding:11px 12px;border-radius:8px;font-weight:650;font-size:.875rem;transition:background .15s,transform .15s}
.copy-button{background:var(--black);color:var(--paper);border:1px solid var(--black);flex:1}.copy-button:hover{background:#492b18}.copy-button.copied{background:#73410b}
.reroll-button{background:transparent;color:var(--black);border:1px solid #b99064;flex:1}.reroll-button:hover{background:#ffe0b4}
.reply-panel button:focus-visible{outline-color:#ad4300}
.copy-status{min-height:18px;font-size:.75rem;line-height:1.5;margin:8px 0 0;color:#74502b;overflow-wrap:anywhere}
.copy-status.copy-error{color:#97390c}
footer{display:flex;flex-direction:column;gap:3px;padding:18px 0 24px;border-top:1px solid var(--line);color:#b7a08d;font-size:.75rem;line-height:1.6}
.noscript{padding:18px;border:1px solid #ffb9ad;border-radius:10px;color:#ffb9ad}
.reply-pop{animation:reply-in .22s ease-out}@keyframes reply-in{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.page-shell{width:43vw;max-width:690px}.background-art{width:min(60vw,1120px);right:max(0px,calc((100vw - 2100px)/2))}main{padding-top:36px}.intro{margin-bottom:28px}.reply-body{min-height:178px}}
@media(min-width:861px) and (max-width:1150px){.page-shell{width:49vw;padding:0 25px}.background-art{width:52vw;top:36px}.platform-label{font-size:0}.platform-label .x-mark{font-size:1.5rem}.generate-button{font-size:.875rem;padding:13px 10px;gap:6px}.generate-button svg{display:none}.eyebrow{letter-spacing:.025em}.input-panel{padding:19px}.reply-panel{padding:21px 20px 11px}}
@media(max-width:860px){.background-art{position:absolute;top:82px;right:0;width:100%;max-width:620px;aspect-ratio:1}.background-art::after{background:linear-gradient(180deg,transparent 66%,var(--bg) 97%)}.page-shell{width:100%;max-width:620px;margin:0 auto;padding:0 24px}.masthead{padding:21px 0;position:relative;border-bottom-color:#493328;background:var(--bg)}main{padding:0 0 27px}.intro{padding-top:clamp(210px,68vw,380px);margin-bottom:19px}.intro h2,.intro .eyebrow{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;margin:0}.intro-copy{position:relative;max-width:480px;color:var(--ink);font-size:1rem;text-shadow:0 2px 10px #000,0 1px 4px #000;background:linear-gradient(90deg,#080605de,#080605b3 85%,transparent);padding:10px 0}.workspace{gap:21px}.input-panel{background:#18110ef5;padding:21px}.reply-panel{padding:24px 23px 13px}.reply-body{min-height:172px}#reply-text{font-size:1.6rem}footer{padding:20px 0 24px}}
@media(min-width:621px) and (max-width:860px){.background-art{right:calc((100vw - 620px)/2)}}
@media(max-width:380px){.page-shell{padding:0 17px}.platform-label{font-size:0}.platform-label .x-mark{font-size:1.5rem}.brand{gap:10px}h1{font-size:.875rem}.intro{padding-top:68vw}.input-panel{padding:19px}.generate-button{padding:13px 10px}.generate-button svg{display:none}.reply-panel{padding:21px 19px 12px}#reply-text{font-size:1.45rem}.reply-actions{gap:8px}}
@media(max-width:320px){form{grid-template-columns:minmax(0,1fr)}.input-wrap{grid-column:1;grid-row:2}.generate-button{grid-column:1;grid-row:4;margin-top:13px}.field-help{grid-row:3}.error{grid-row:5}.reply-actions{flex-direction:column}.reply-header{gap:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}