:root { --ink:#17283a; --ink-soft:#34465a; --muted:#687787; --paper:#fbfaf7; --card:#fff; --line:#e1e6e9; --line-strong:#cbd4da; --accent:#d8664b; --mint:#3d8f79; --navy:#17283a; --shadow:0 20px 55px rgba(23,40,58,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 5% 0%,rgba(220,185,128,.19),transparent 26rem),radial-gradient(circle at 96% 18%,rgba(115,164,150,.15),transparent 25rem),var(--paper); font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body::before { position:fixed; z-index:-1; inset:0; content:""; opacity:.34; background-image:linear-gradient(rgba(23,40,58,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(23,40,58,.024) 1px,transparent 1px); background-size:34px 34px; pointer-events:none; }
main { width:min(1120px,calc(100% - 40px)); margin:auto; padding:24px 0 84px; }.site-header { display:flex; align-items:center; justify-content:space-between; min-height:54px; margin-bottom:66px; }
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1120px,calc(100% - 40px));margin:0 auto;padding:0 0 34px;color:var(--muted);font-size:.78rem}.site-footer p{margin:0}.site-footer nav{display:flex;gap:16px}.site-footer a{color:var(--ink-soft);text-decoration:none}.site-footer a:hover{text-decoration:underline}
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-size:1.26rem; font-weight:800; letter-spacing:-.065em; }.brand > span:last-child span { color:var(--accent); }.brand-mark { display:inline-grid; grid-template-columns:repeat(3,4px); align-items:end; gap:3px; width:28px; height:28px; padding:6px; border-radius:9px; background:var(--ink); }.brand-mark i { display:block; border-radius:3px; background:#fff; }.brand-mark i:nth-child(1){height:7px}.brand-mark i:nth-child(2){height:12px}.brand-mark i:nth-child(3){height:17px;background:#f4a58d}
.header-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem; }.header-status .notice { margin:0; padding:0; background:none; color:inherit; }.status-dot { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(61,143,121,.12); }
.workspace-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.75fr); gap:clamp(36px,7vw,110px); align-items:end; margin:0 4px 42px; }.eyebrow { margin:0 0 8px; color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.15em; } h1,h2,h3 { color:var(--ink); font-family:Georgia,"Times New Roman",serif; letter-spacing:-.035em; } h1 { max-width:740px; margin:0; font-size:clamp(2.5rem,4.55vw,3.95rem); line-height:1.01; } h2 { margin:0; font-size:clamp(1.72rem,3vw,2.32rem); line-height:1.06; } h3 { margin:0; font-size:1.5rem; }.lede { max-width:650px; margin:20px 0 0; color:var(--ink-soft); font-size:1.07rem; }
.workflow-glance { padding:21px 0 3px 23px; border-left:1px solid var(--line-strong); }.workflow-glance ol { display:grid; gap:11px; margin:12px 0 0; padding:0; list-style:none; font-size:.91rem; font-weight:650; }.workflow-glance li { display:flex; align-items:center; gap:10px; }.workflow-glance span { color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.card { margin:22px 0; padding:clamp(23px,4vw,42px); border:1px solid rgba(203,212,218,.82); border-radius:20px; background:rgba(255,255,255,.91); box-shadow:var(--shadow); }.brief-card { position:relative; overflow:hidden; }.brief-card::after { position:absolute; top:0; right:0; width:220px; height:7px; content:""; background:linear-gradient(90deg,var(--accent),#e9c37a); }.section-heading,.result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }.step-label { margin:4px 0 0; padding:6px 10px; border-radius:99px; color:var(--mint); background:#edf7f3; font-size:.77rem; font-weight:800; white-space:nowrap; }
label { display:block; margin:20px 0; color:var(--ink); font-size:.91rem; font-weight:760; }input,textarea,select { display:block; width:100%; margin-top:7px; padding:12px 13px; border:1px solid var(--line-strong); border-radius:10px; outline:0; color:var(--ink); background:#fff; font:400 1rem/1.45 inherit; transition:border-color .16s ease,box-shadow .16s ease; }input:focus,textarea:focus,select:focus { border-color:var(--mint); box-shadow:0 0 0 4px rgba(61,143,121,.12); }textarea { min-height:100px; resize:vertical; }.topic-field textarea { min-height:128px; font-size:1.04rem; }.field-note { display:block; margin-top:7px; color:var(--muted); font-size:.78rem; font-weight:500; }output { float:right; color:var(--muted); font-size:.81rem; font-weight:600; }input[type="range"] { padding:0; accent-color:var(--accent); } input[type="color"] { min-height:46px; padding:4px; cursor:pointer; }
.two,.three,.design-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.three { grid-template-columns:repeat(3,minmax(0,1fr)); }.two label,.three label { margin-bottom:0; }.advanced { margin-top:22px; padding:0 17px; border:1px solid var(--line); border-radius:13px; background:#fafbfd; }.advanced[open] { padding-bottom:16px; background:#f8fafb; }.advanced summary,.sources-card summary { display:flex; align-items:center; justify-content:space-between; min-height:57px; cursor:pointer; color:var(--ink); font-size:.93rem; font-weight:780; list-style:none; }.advanced summary::-webkit-details-marker,.sources-card summary::-webkit-details-marker { display:none; }.advanced summary::after,.sources-card summary::after { content:"+"; color:var(--accent); font-size:1.3rem; font-weight:400; }.advanced[open] summary::after,.sources-card[open] summary::after { content:"−"; }.advanced summary small,.sources-card summary small { margin-left:auto; margin-right:16px; color:var(--muted); font-size:.76rem; font-weight:550; }.advanced p,.muted,.selected-files { color:var(--muted); font-size:.88rem; }.advanced > p { margin:0 0 14px; }
.notice { margin:20px 0; padding:11px 13px; border-radius:10px; color:#326153; background:#edf7f3; font-size:.86rem; }.warning { background:#fff1dd; }button { display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:12px 17px; border:0; border-radius:10px; color:#fff; background:var(--navy); box-shadow:0 8px 17px rgba(23,40,58,.16); font:800 .92rem/1 inherit; cursor:pointer; transition:transform .16s ease,background .16s ease,box-shadow .16s ease; }button:hover { background:#243f5a; transform:translateY(-1px); box-shadow:0 11px 20px rgba(23,40,58,.19); }button:disabled { cursor:wait; opacity:.62; transform:none; }.secondary { color:var(--ink); background:#edf1f3; box-shadow:none; }.secondary:hover { background:#e2e9ed; box-shadow:none; }.generate-row { display:flex; align-items:center; gap:16px; margin-top:25px; }.generate-row button,.publish-panel button { min-height:47px; margin:0; }.generate-row button b,.publish-panel button b { font-size:1.25rem; font-weight:400; }.generate-row p { margin:0; color:var(--muted); font-size:.81rem; }
.result-card { border-top:5px solid var(--mint); }.images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:27px 0; }.images figure { margin:0; padding:9px; border:1px solid var(--line); border-radius:14px; background:#fafcfc; }.images img { display:block; width:100%; aspect-ratio:16/9; border-radius:9px; object-fit:cover; background:#edf1f3; }.images figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 3px 2px; color:var(--ink-soft); font-size:.8rem; font-weight:700; }.images figcaption button { padding:7px 9px; border-radius:7px; font-size:.72rem; }.design { display:grid; grid-template-columns:.72fr 1.55fr; gap:34px; margin:31px 0; padding:27px; border-radius:14px; color:#edf4f8; background:var(--navy); }.design h3 { color:#fff; }.design .eyebrow { color:#f0b69b; }.design .muted { color:#b9c7d1; }.design-grid { gap:14px 17px; }.design-grid label { margin:0; color:#e7eff4; font-size:.8rem; }.design-grid input,.design-grid select { margin-top:5px; border-color:#587086; }.article { min-height:410px; font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }.preview-wrap { margin:27px 0; }.preview-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }.preview-head .eyebrow { margin:0; }.preview-head span { color:var(--muted); font-size:.78rem; }.preview-wrap iframe { width:100%; height:540px; border:1px solid var(--line-strong); border-radius:13px; background:#fff; }.publish-panel { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px; border:1px solid #d7e6df; border-radius:13px; background:#f4faf7; }.publish-panel .muted { margin:5px 0 0; }.publish-toggle { margin:0; }.publish-toggle input { display:inline; width:auto; margin:0 7px 0 0; accent-color:var(--mint); }.sources-card { padding-top:8px; padding-bottom:18px; }.sources-card summary { min-height:48px; }.source-links { display:grid; gap:8px; margin:8px 0 16px; }.source-links a { overflow-wrap:anywhere; color:#28705c; font-size:.87rem; }pre { overflow:auto; margin:0; white-space:pre-wrap; color:var(--ink-soft); font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.internal-links { margin:18px 0 0; padding:0 0 14px; border:0; border-bottom:1px solid var(--line); }.internal-links legend { font-weight:750; }.seo-link-row { grid-template-columns:1fr 1fr auto; align-items:end; margin:12px 0; }.seo-link-row button { margin:0; padding:11px; color:var(--ink); background:#edf1f3; box-shadow:none; font-size:.78rem; }.inline-file-picker { border-radius:10px!important; border-color:var(--line-strong)!important; background:#fff!important; }.inline-file-picker button { padding:8px 10px!important; border-radius:7px!important; background:#edf1f3!important; color:var(--ink)!important; box-shadow:none!important; }.retry-action { margin-top:11px; }
@media(max-width:760px){main{width:min(100% - 28px,1120px);padding-top:15px}.site-footer{width:min(100% - 28px,1120px);align-items:flex-start;flex-direction:column}.site-header{margin-bottom:43px}.header-status{max-width:180px;text-align:right}.workspace-intro{grid-template-columns:1fr;gap:26px;margin-bottom:30px}.workflow-glance{padding:17px 0 0;border-top:1px solid var(--line-strong);border-left:0}.workflow-glance ol{grid-template-columns:repeat(3,1fr);gap:8px}.workflow-glance li{display:block;font-size:.76rem}.workflow-glance span{display:block;margin-bottom:2px}.three,.design,.design-grid{grid-template-columns:1fr}.design{gap:20px}.card{padding:22px 18px;border-radius:15px}.section-heading,.result-head,.publish-panel{align-items:flex-start;flex-direction:column}.step-label{margin:0}.generate-row{align-items:flex-start;flex-direction:column}.generate-row button,.publish-panel button{width:100%}.images,.two,.seo-link-row{grid-template-columns:1fr}.preview-wrap iframe{height:480px}.advanced summary small,.sources-card summary small{display:none}}
@media(max-width:450px){h1{font-size:2.55rem}.header-status{display:none}.site-header{margin-bottom:31px}.workflow-glance ol{grid-template-columns:1fr}.article{min-height:310px}.preview-wrap iframe{height:410px}}