:root {
  --ink: #17211b;
  --muted: #68756d;
  --paper: #f4f5ef;
  --card: #fffef9;
  --line: #dfe4dc;
  --green: #276a4d;
  --green-dark: #164532;
  --lime: #d9ef75;
  --shadow: 0 18px 60px rgba(28, 44, 34, .08);
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-width: 320px; }
button, input, textarea, select { font: inherit; }
button, select, summary, input[type="checkbox"], .format-option { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px 20px; border-right: 1px solid var(--line); background: #eeefe8; display: flex; flex-direction: column; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 19px; text-decoration: none; padding: 0 10px; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px 11px 11px 3px; background: var(--green-dark); color: var(--lime); font-family: Georgia, serif; font-size: 22px; }
.nav-list { display: grid; gap: 6px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 12px; color: #5f6c64; background: transparent; padding: 11px 12px; text-align: left; font-weight: 650; }
.nav-item span { width: 20px; text-align: center; font-size: 17px; }
.nav-item:hover, .nav-item.active { background: var(--card); color: var(--green-dark); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.sidebar-spacer { flex: 1; }
.usage-card { border: 1px solid var(--line); background: rgba(255,255,255,.6); padding: 14px; border-radius: 14px; }
.usage-row { display: flex; justify-content: space-between; font-size: 12px; }
.usage-track { height: 5px; margin: 10px 0; background: #d8ddd6; border-radius: 9px; overflow: hidden; }.usage-track span { display:block; width: 2%; height: 100%; background: var(--green); }
.usage-card small, .profile small { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }
.profile { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 18px 8px 0; font-size: 12px; }
.avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#d7e3d9; color:var(--green-dark); font-weight:800; }.more { border:0; background:transparent; color:var(--muted); font-size:10px; padding:4px; }
main { min-width: 0; padding: 42px clamp(24px, 4vw, 68px) 70px; }
.topbar { max-width: 1380px; margin: 0 auto 34px; display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
h1 { font-family: Georgia, "Times New Roman", serif; max-width: 700px; font-size: clamp(34px, 4vw, 57px); letter-spacing: -.045em; line-height: 1.04; margin: 0; font-weight: 500; }
.top-actions { display:flex; align-items:center; gap:10px; }.status-pill { display:flex; align-items:center; gap:8px; white-space:nowrap; border:1px solid var(--line); background:var(--card); padding:9px 13px; border-radius:99px; font-size:12px; font-weight:700; }.status-pill i { width:7px; height:7px; background:#52a673; border-radius:50%; box-shadow:0 0 0 4px #e1f1e6; }.icon-button { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:var(--card); }
.workspace { max-width: 1380px; margin: 0 auto; display:grid; grid-template-columns: minmax(520px, 1fr) minmax(340px, .68fr); gap: 28px; align-items:start; }
.composer { display:grid; gap:18px; }.panel, .preview-card, .job-card, .trust-card { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.panel { padding:26px; }.step-heading { display:flex; gap:14px; align-items:flex-start; margin-bottom:24px; }.step-heading.compact { margin-bottom:20px; }.step-number { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--green-dark); color:var(--lime); font-size:11px; font-weight:800; }
h2 { margin:0 0 4px; font-size:18px; letter-spacing:-.02em; }.step-heading p { margin:0; color:var(--muted); font-size:13px; }
label, legend { display:block; margin-bottom:8px; font-size:12px; font-weight:750; }
textarea, select { width:100%; border:1px solid var(--line); border-radius:13px; background:#f6f7f2; color:var(--ink); outline:none; transition:.2s; }
textarea:focus, select:focus { border-color:#88a894; box-shadow:0 0 0 4px #eaf0e8; }.hero-panel > textarea { min-height:126px; padding:16px; resize:vertical; line-height:1.5; font-size:16px; }.field-meta { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:11px; margin-top:9px; }.prompt-chip { padding:7px 10px; border:0; background:#edf2e7; color:var(--green); border-radius:99px; font-size:11px; font-weight:750; }
details { margin-top:18px; border-top:1px solid var(--line); padding-top:16px; } summary { display:flex; justify-content:space-between; font-size:12px; font-weight:750; } summary span { color:var(--muted); font-weight:500; } details textarea { min-height:110px; margin-top:14px; padding:14px; resize:vertical; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; }.format-fieldset { grid-column:1/-1; border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; min-width:0; }.format-fieldset legend { grid-column:1/-1; }.format-option { position:relative; display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; min-width:0; margin:0; border:1px solid var(--line); border-radius:13px; padding:11px; background:#fafbf7; }.format-option input { position:absolute; opacity:0; }.format-option.selected { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); background:#f2f7ef; }.ratio { grid-row:1/3; justify-self:center; border:2px solid #8b978f; border-radius:3px; }.portrait { width:15px;height:25px;}.landscape{width:27px;height:18px}.square{width:22px;height:22px}.format-option b{font-size:12px}.format-option small{color:var(--muted);font-weight:500}.select-field { min-width:0; }.select-field select { height:45px; padding:0 12px; border-right:12px solid transparent; font-size:13px; }
.toggle-row { display:flex; justify-content:space-between; align-items:center; margin:22px 0 0; border-top:1px solid var(--line); padding-top:18px; }.toggle-row span small { display:block; color:var(--muted); margin-top:4px; font-weight:500; }.toggle-row input { position:absolute; opacity:0; }.toggle-row i { width:42px; height:24px; background:#cfd6d0; border-radius:99px; padding:3px; transition:.2s; }.toggle-row i:before { content:""; display:block; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 4px #0003; transition:.2s; }.toggle-row input:checked + i { background:var(--green); }.toggle-row input:checked + i:before { transform:translateX(18px); }
.generate-button { display:grid; grid-template-columns:1fr auto; align-items:center; text-align:left; border:0; border-radius:16px; background:var(--green-dark); color:#fff; padding:17px 20px; box-shadow:0 12px 30px rgba(22,69,50,.2); transition:.2s; }.generate-button:hover { transform:translateY(-1px); background:#0f3a29; }.generate-button span { font-weight:800; }.generate-button small { grid-row:2; color:#b9ccbf; margin-top:3px; }.generate-button b { grid-column:2; grid-row:1/3; font-size:23px; color:var(--lime); }.generate-button:disabled { opacity:.65; cursor:wait; transform:none; }
.preview-column { position:sticky; top:28px; display:grid; gap:16px; }.preview-card { padding:16px; }.preview-toolbar { display:flex; justify-content:space-between; align-items:center; padding:3px 3px 14px; font-size:12px; font-weight:750; }.preview-toolbar button { border:0;background:transparent;color:var(--muted);font-size:11px; }.preview-frame { position:relative; min-height:550px; overflow:hidden; border-radius:14px; background:radial-gradient(circle at 60% 18%, #dcebaf 0, transparent 34%), linear-gradient(145deg,#193f31,#102a21 65%,#081712); color:white; }.preview-frame.landscape-preview { min-height:320px; }.preview-frame.square-preview { min-height:430px; }.preview-frame:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,#07130fd9); }.preview-orb { position:absolute; border:1px solid #d9ef7566; border-radius:50%; }.orb-one { width:330px;height:330px;right:-110px;top:70px;}.orb-two {width:210px;height:210px;left:-90px;top:210px;}.preview-copy { position:absolute; z-index:2; left:30px; right:30px; bottom:40px; display:grid; gap:12px; }.preview-copy span { color:var(--lime); font-size:10px; font-weight:850; letter-spacing:.2em; }.preview-copy strong { font-family:Georgia,serif;font-size:36px;line-height:1.03;letter-spacing:-.04em;font-weight:500; }.preview-copy small { color:#c4d2c9; }.safe-area { position:absolute; z-index:2; inset:20px; border:1px dashed #ffffff28; border-radius:10px; }.preview-note { color:var(--muted);font-size:10px;text-align:center;margin:12px 0 0; }
.job-card { padding:18px; }.job-head { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px; }.job-icon { display:grid;place-items:center;width:38px;height:38px;background:#eff4e8;color:var(--green);border-radius:11px; }.job-head b,.job-head small{display:block}.job-head b{font-size:13px}.job-head small{color:var(--muted);font-size:11px;margin-top:4px}.job-head>strong{font-size:13px;color:var(--green)}.progress-track { height:7px; background:#e8ebe5; border-radius:99px; margin-top:15px; overflow:hidden; }.progress-track span { display:block;height:100%;width:8%;background:linear-gradient(90deg,var(--green),#76a956);transition:width .45s ease;border-radius:inherit; }.secondary-button { width:100%;margin-top:14px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;color:var(--green-dark); }
.layout-preview { position:absolute; inset:0; }
.final-video { position:absolute; inset:0; z-index:3; width:100%; height:100%; object-fit:contain; background:#050806; }
.preview-frame.has-video { background:#050806; box-shadow:inset 0 0 0 1px #ffffff12; }
.preview-frame.has-video:after { display:none; }
.job-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.download-button, .job-actions .secondary-button { display:grid; place-items:center; min-height:42px; margin:0; padding:10px; border-radius:10px; font-weight:750; text-align:center; text-decoration:none; }
.download-button { border:1px solid var(--green-dark); background:var(--green-dark); color:#fff; }
.download-button:hover { background:#0f3a29; }
.trust-card { display:flex;gap:12px;align-items:center;padding:15px 17px;box-shadow:none;background:#f0f3ec; }.trust-card>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#dce9db;color:var(--green);font-weight:900}.trust-card p{margin:0}.trust-card b,.trust-card small{display:block;font-size:11px}.trust-card small{color:var(--muted);margin-top:3px}.hidden{display:none!important}.toast{position:fixed;right:24px;bottom:24px;max-width:380px;padding:12px 16px;border-radius:12px;background:#7b2c2c;color:#fff;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s}.toast.show{opacity:1;transform:none}
.auth-pending { visibility:hidden; }
.public-site { min-height:100vh; background:linear-gradient(180deg,#f8f9f4 0,#f0f3eb 100%); }
.marketing-header { height:84px; max-width:1440px; margin:auto; padding:0 clamp(24px,4vw,64px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:52px; border-bottom:1px solid rgba(23,33,27,.08); }
.marketing-brand,.auth-brand,.mobile-auth-brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:850; font-size:21px; letter-spacing:-.03em; }
.marketing-nav { display:flex; gap:32px; }.marketing-nav a,.auth-links a { color:#536059; text-decoration:none; font-size:14px; font-weight:650; }.marketing-nav a:hover,.sign-in-link:hover { color:var(--green-dark); }
.auth-links { display:flex; align-items:center; gap:22px; }.auth-links .sign-up-link { padding:12px 22px; border-radius:99px; background:var(--green-dark); color:#fff; }.auth-links .sign-up-link:hover { background:#0f3a29; }
.marketing-main { padding:0 clamp(24px,4vw,64px) 72px; }
.marketing-hero { min-height:690px; max-width:1320px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.marketing-copy h1 { font-size:clamp(48px,6vw,82px); max-width:760px; }.marketing-copy>p:not(.eyebrow) { max-width:620px; margin:28px 0; color:var(--muted); font-size:18px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }.primary-cta { padding:16px 23px; border-radius:13px; background:var(--green-dark); color:#fff; text-decoration:none; font-weight:800; box-shadow:0 12px 30px rgba(22,69,50,.2); }.text-cta { color:var(--green-dark); text-decoration:none; font-weight:750; }
.hero-proof { display:flex; gap:18px; flex-wrap:wrap; margin-top:30px; color:#59665e; font-size:12px; font-weight:700; }
.product-stage { position:relative; min-height:520px; display:grid; place-items:center; }.stage-glow { position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,#d9ef75aa 0,#d9ef7522 48%,transparent 70%); filter:blur(12px); }.stage-window { position:relative; width:min(100%,720px); overflow:hidden; border:1px solid #cfd8cd; border-radius:24px; background:#fff; box-shadow:0 40px 100px rgba(21,59,41,.18); transform:rotate(-1deg); }
.stage-bar { height:48px; display:flex; align-items:center; gap:7px; padding:0 17px; background:#f1f3ee; border-bottom:1px solid var(--line); }.stage-bar i { width:8px;height:8px;border-radius:50%;background:#c6cec7; }.stage-bar span { margin-left:9px; font-size:11px; color:var(--muted);font-weight:750; }
.stage-content { display:grid;grid-template-columns:1fr .8fr;gap:16px;padding:20px; }.stage-editor { min-height:330px;padding:24px;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:14px;background:#fffefa; }.stage-editor small,.stage-video>span{color:var(--green);font-size:9px;letter-spacing:.18em;font-weight:850}.stage-editor strong{font-family:Georgia,serif;font-size:26px;font-weight:500}.stage-editor>span{display:block;height:10px;border-radius:10px;background:#edf0eb}.stage-editor>span:nth-of-type(2){width:72%}.stage-editor button{margin-top:auto;padding:13px;border:0;border-radius:11px;background:var(--green-dark);color:#fff;text-align:left;font-size:11px;font-weight:750}.stage-video{min-height:330px;padding:24px;border-radius:16px;color:#fff;background:radial-gradient(circle at 60% 18%,#dcebaf 0,transparent 34%),linear-gradient(145deg,#193f31,#081712);display:flex;flex-direction:column;justify-content:flex-end;gap:13px}.stage-video>span{color:var(--lime)}.stage-video strong{font-family:Georgia,serif;font-size:35px;line-height:1.04;font-weight:500}.stage-video small{color:#c4d2c9}
.marketing-features { max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }.marketing-features article{padding:26px;border:1px solid var(--line);border-radius:18px;background:#fffef9}.marketing-features article>span{color:var(--green);font-size:11px;font-weight:850;letter-spacing:.12em}.marketing-features h2{margin:18px 0 8px;font-size:20px}.marketing-features p{margin:0;color:var(--muted);line-height:1.6;font-size:13px}
.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(390px,.82fr) minmax(520px,1.18fr); background:#fff; }
.auth-visual { position:relative; overflow:hidden; min-height:100vh; padding:42px clamp(32px,4vw,68px); color:#fff; background:radial-gradient(circle at 70% 60%,#578069 0,transparent 34%),linear-gradient(150deg,#173f30,#092219 72%); display:flex; flex-direction:column; }.auth-visual .auth-brand { color:#fff; }.auth-visual .brand-mark { background:var(--lime);color:var(--green-dark); }.auth-visual-copy{position:relative;z-index:2;max-width:520px;margin:auto 0 40px}.auth-visual-copy .eyebrow{color:var(--lime)}.auth-visual-copy h2{font-family:Georgia,serif;font-weight:500;font-size:clamp(42px,5vw,68px);line-height:1;letter-spacing:-.045em;margin:0}.auth-visual-copy p:last-child{max-width:460px;color:#c8d6cd;line-height:1.7;font-size:15px}
.visual-stack{position:relative;height:270px;margin-bottom:20px}.visual-card{position:absolute;width:220px;height:260px;border:1px solid #ffffff33;border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 25px 60px #0005}.visual-card small{color:var(--lime);font-size:9px;letter-spacing:.18em;font-weight:850}.visual-card strong{margin-top:9px;font-family:Georgia,serif;font-size:25px;font-weight:500}.card-a{left:4%;bottom:-80px;background:linear-gradient(160deg,#6a917a,#132c23);transform:rotate(-8deg)}.card-b{left:32%;bottom:-110px;background:linear-gradient(160deg,#b9cb82,#315444);transform:rotate(3deg)}.card-c{left:60%;bottom:-88px;background:linear-gradient(160deg,#7e957f,#0c2119);transform:rotate(10deg)}
.auth-form-panel { min-height:100vh;padding:48px clamp(28px,8vw,150px) 28px;display:flex;flex-direction:column;justify-content:center; }.mobile-auth-brand{display:none}.account-form{width:min(100%,580px);margin:auto}.account-form h1{font-family:inherit;font-size:44px;font-weight:800;letter-spacing:-.04em}.form-intro{margin:14px 0 32px;color:var(--muted);line-height:1.55}.account-form>label{margin:18px 0 8px;font-size:13px}.account-form>input,.password-field input{width:100%;height:52px;border:1px solid #d4dbd5;border-radius:10px;background:#fff;padding:0 15px;color:var(--ink);outline:none}.account-form>input:focus,.password-field input:focus{border-color:#6e9a81;box-shadow:0 0 0 4px #eaf1ec}.password-field{position:relative}.password-field input{padding-right:64px}.password-toggle{position:absolute;right:7px;top:7px;height:38px;border:0;background:transparent;color:var(--green);font-size:11px;font-weight:750}.consent-row,.remember-row{display:flex!important;gap:10px;align-items:flex-start;color:var(--muted);font-weight:500!important;line-height:1.5}.consent-row input,.remember-row input{margin-top:3px}.auth-submit{width:100%;height:52px;margin-top:16px;border:0;border-radius:10px;background:var(--green-dark);color:#fff;font-weight:800}.auth-submit:hover{background:#0f3a29}.auth-submit:disabled{opacity:.6;cursor:wait}.form-message{min-height:20px;margin:10px 0 0;color:#a33d3d;font-size:12px;text-align:center}.form-message.success{color:var(--green)}.auth-divider{height:44px;display:flex;align-items:center;color:#8a958e;font-size:11px;text-transform:uppercase}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}.auth-divider span{padding:0 14px}.auth-switch{text-align:center;color:var(--muted);font-size:13px;margin:24px 0 0}.auth-switch a{color:var(--green);font-weight:800;text-decoration:none}.auth-footer{width:min(100%,580px);margin:36px auto 0;display:flex;justify-content:center;gap:18px;color:#8a958e;font-size:10px}
.account-options{display:flex;justify-content:space-between;align-items:center;margin:18px 0 2px;font-size:13px}.account-options .remember-row{margin:0}.account-options a{color:var(--green);font-weight:750;text-decoration:none}
.google-button { width:100%; min-height:52px; display:flex; align-items:center; justify-content:center; gap:12px; border:1px solid #cfd5ce; border-radius:12px; background:#fff; color:#26312a; font-weight:750; box-shadow:0 2px 5px rgba(0,0,0,.05); }
.google-button:hover { border-color:#9aa99f; background:#fbfcfa; }.google-button:disabled{opacity:.6;cursor:not-allowed}.google-button svg{width:21px;height:21px}
@media (max-width:900px){.marketing-header{grid-template-columns:1fr auto}.marketing-nav{display:none}.marketing-hero{grid-template-columns:1fr;padding:70px 0;gap:30px}.product-stage{min-height:430px}.marketing-features{grid-template-columns:1fr}.auth-page{grid-template-columns:1fr}.auth-visual{display:none}.auth-form-panel{padding:34px 24px}.mobile-auth-brand{display:flex;margin-bottom:64px}.account-form h1{font-size:38px}.auth-footer{margin-top:50px}.stage-window{transform:none}}
@media (max-width:1050px){.app-shell{grid-template-columns:84px 1fr}.sidebar{padding-inline:12px}.brand span:last-child,.nav-item:not(.active){font-size:0}.nav-item{justify-content:center}.nav-item span{font-size:17px}.usage-card,.profile span:not(.avatar){display:none}.brand{justify-content:center}.workspace{grid-template-columns:1fr}.preview-column{position:static;grid-row:1}.preview-frame{min-height:min(72vh,650px)}}
@media (max-width:650px){body{overflow-x:hidden}.marketing-header{height:72px;padding:0 18px}.marketing-brand{font-size:18px}.auth-links{gap:12px}.auth-links .sign-up-link{padding:10px 15px}.marketing-main{padding:0 18px 48px}.marketing-hero{min-height:auto;padding:58px 0 40px}.marketing-copy h1{font-size:48px}.marketing-copy>p:not(.eyebrow){font-size:16px;margin:22px 0}.hero-actions{align-items:flex-start;flex-direction:column}.product-stage{min-height:350px}.stage-content{grid-template-columns:1fr;padding:12px}.stage-editor{display:none}.stage-video{min-height:290px}.hero-proof{gap:10px}.auth-form-panel{justify-content:flex-start}.mobile-auth-brand{margin-bottom:46px}.account-form h1{font-size:36px}.auth-footer{flex-wrap:wrap}.app-shell{display:block}.sidebar{position:fixed;z-index:10;bottom:0;top:auto;width:100%;height:68px;flex-direction:row;padding:8px 12px;border-right:0;border-top:1px solid var(--line)}.brand,.sidebar-spacer,.usage-card,.sidebar>.nav-item,.profile{display:none}.nav-list{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.nav-item,.nav-item:not(.active){font-size:10px;flex-direction:column;gap:2px;padding:5px}.nav-item span{font-size:16px}.topbar{align-items:center}.top-actions .status-pill{display:none}main{padding:28px 16px 100px;overflow:hidden}h1{font-size:36px}.field-grid{grid-template-columns:1fr;min-width:0}.format-fieldset{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.format-option{grid-template-columns:19px 1fr;column-gap:5px;padding:8px 6px}.format-option b{font-size:10px}.format-option small{font-size:9px}.ratio{transform:scale(.78)}.panel{padding:20px;max-width:100%}.workspace{min-width:0}}