.demo-page{background:var(--paper)}
.blog-demo-hero h1,.demo-form h2,.demo-info h2,.preview-zone h2,.blog-preview h3{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500;line-height:1.25}
.demo-form label{display:grid;gap:8px;margin:18px 0}
.demo-form input,.demo-form textarea{width:100%;border:1px solid var(--line);background:#fffdf7;color:var(--ink);font:inherit;padding:12px 14px;border-radius:0}
.memo-field{position:relative}
.memo-field textarea{padding-bottom:58px}
.voice-icon-button{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:1px solid var(--deep);background:var(--deep);color:var(--paper);font-size:20px;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px rgba(24,37,29,.22)}
.voice-icon-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(24,37,29,.26)}
.voice-icon-button.is-listening{background:#9f2f24;border-color:#9f2f24}
.clear-text-button{position:absolute;right:68px;bottom:16px;min-height:40px;border:1px solid var(--line);background:rgba(255,250,240,.92);color:var(--green);font:inherit;font-size:13px;font-weight:700;padding:8px 12px;cursor:pointer;box-shadow:0 6px 14px rgba(24,37,29,.1)}
.clear-text-button:hover{background:var(--paper);border-color:var(--green)}
.demo-only{position:sticky}
.blog-demo-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:32px;align-items:end;padding:clamp(72px,10vw,120px) clamp(20px,5vw,72px) clamp(42px,6vw,72px);background:var(--deep);color:var(--paper)}
.blog-demo-hero h1{font-size:clamp(38px,6vw,74px);margin:0 0 24px}
.blog-demo-hero p{max-width:760px}
.demo-limits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-limits span{border:1px solid rgba(255,250,240,.28);padding:14px 16px;background:rgba(255,250,240,.06);font-weight:700}
.benefit-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.benefit-band article{background:var(--paper);padding:clamp(24px,4vw,42px)}
.benefit-band span{color:var(--gold);font-family:Georgia,serif}
.benefit-band h2{margin:8px 0 12px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(22px,2.4vw,32px);line-height:1.35}
.demo-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:28px;padding:clamp(42px,6vw,72px) clamp(20px,5vw,72px);align-items:start}
.demo-form,.demo-info,.blog-preview,.download-panel{background:var(--paper);border:1px solid var(--line)}
.form-section,.demo-info{padding:clamp(24px,4vw,42px)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.btn.primary.demo-submit{min-height:58px;padding:15px 28px;background:var(--deep);color:var(--paper);border-color:var(--deep);box-shadow:0 10px 24px rgba(24,37,29,.18);position:relative}
.demo-submit::after{content:"→";font-size:20px;margin-left:12px;line-height:1}
.demo-submit:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(24,37,29,.22)}
.demo-submit:disabled{cursor:wait;opacity:.78;transform:none;box-shadow:0 8px 18px rgba(24,37,29,.14)}
.demo-submit.is-loading::after{content:"";width:16px;height:16px;border:2px solid rgba(255,250,240,.42);border-top-color:var(--paper);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-hint{font-size:13px;color:var(--muted)}
.form-hint.is-error{color:#9f2f24}
.generation-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mode-pill{margin:0;border:1px solid var(--line);background:#fffdf7;color:var(--muted);font-size:12px;font-weight:700;padding:7px 10px}
.mode-pill.is-on{border-color:rgba(42,83,58,.35);background:rgba(42,83,58,.09);color:var(--green)}
.demo-info ul{padding-left:20px;margin:18px 0 0}
.preview-zone{padding:clamp(56px,8vw,96px) clamp(20px,5vw,72px);background:#e8dfcf}
.preview-zone .section-head p{max-width:none}
.blog-preview{max-width:1040px;margin:0 auto;overflow:hidden}
.empty-state{padding:42px;text-align:center;color:var(--muted)}
.preview-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line)}
.preview-images img{aspect-ratio:4/3;background:var(--bg)}
.blog-preview-body{padding:clamp(28px,5vw,56px)}
.blog-preview h3{font-size:clamp(30px,4vw,48px);margin:0 0 18px}
.blog-preview h4{margin:32px 0 10px;font-size:18px}
.blog-preview .lead{font-size:20px;color:var(--green);border-left:3px solid var(--gold);padding-left:16px}
.tag-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.tag-list span{border:1px solid var(--line);padding:6px 10px;color:var(--green);font-size:13px}
.preview-tabs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.preview-tabs section{border:1px solid var(--line);padding:20px;background:#fffdf7}
.tab-caption{margin-top:-4px;color:var(--muted);font-size:13px}
.copy-box{display:grid;gap:14px}
.copy-box p{margin:0;padding:14px;border:1px solid var(--line);background:var(--paper)}
.copy-button{justify-self:start}
.note-list{margin:0;padding-left:20px;color:var(--muted)}
.download-panel{max-width:1040px;margin:18px auto 0;padding:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn.primary.download-button{background:var(--deep);color:var(--paper);border-color:var(--deep);box-shadow:0 8px 20px rgba(24,37,29,.18)}
.download-panel[hidden]{display:none}
@media(max-width:860px){.blog-demo-hero,.demo-workspace,.benefit-band{grid-template-columns:1fr}}
@media(max-width:540px){.field-grid,.demo-limits,.preview-tabs{grid-template-columns:1fr}.download-panel .btn,.demo-actions .btn{width:100%}}