:root{
  --hw-ink:#111827;
  --hw-copy:#667085;
  --hw-line:#e2e6ea;
  --hw-soft:#f7f8fa;
  --hw-panel:#ffffff;
  --hw-accent:#1f5eff;
  --hw-accent-dark:#1748c9;
}
.hw-shell{min-height:100vh;padding:54px 0 72px;background:var(--hw-soft);color:var(--hw-ink)}
.hw-container{max-width:1180px}
.hw-hero{max-width:720px;margin:0 0 30px}
.hw-kicker{display:block;margin-bottom:9px;color:#475467;font-size:.72rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase}
.hw-hero h1{margin:0;font-size:clamp(34px,4.8vw,58px);line-height:1.04;letter-spacing:-.045em;font-weight:760}
.hw-hero p{max-width:650px;margin:13px 0 0;color:var(--hw-copy);font-size:1rem;line-height:1.65}
.hw-workspace{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);gap:20px;align-items:start}
.hw-form,.hw-preview-panel{border:1px solid var(--hw-line);border-radius:16px;background:var(--hw-panel);box-shadow:0 8px 28px rgba(16,24,40,.05)}
.hw-form{padding:24px}
.hw-panel{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid #edf0f2}
.hw-panel:last-of-type{margin-bottom:0}
.hw-section-head{margin-bottom:14px}
.hw-section-head h2{margin:0;font-size:18px;line-height:1.3}
.hw-section-head p{margin:4px 0 0;color:var(--hw-copy);font-size:12px;line-height:1.5}
.hw-dropzone{display:grid;place-items:center;min-height:150px;padding:22px;border:1px dashed #b7bec8;border-radius:12px;background:#fbfcfd;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.hw-dropzone:hover,.hw-dropzone.is-dragging{border-color:#8093b5;background:#f7f9fc}
.hw-upload-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:9px;border-radius:9px;background:#f0f2f5;color:#344054;font-size:22px}
.hw-dropzone strong{font-size:14px}.hw-dropzone small{margin-top:3px;color:var(--hw-copy);font-size:12px}
.hw-file-name{margin-top:10px;color:#475467;font-size:11px;font-weight:650}
.hw-check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px;border-radius:10px;background:#f8f9fb}
.hw-check input{width:17px;height:17px;margin-top:2px}
.hw-check span{display:grid;gap:2px}.hw-check strong{font-size:12px}.hw-check small{color:var(--hw-copy);font-size:11px;line-height:1.45}
.hw-prompt-label{display:block;margin-bottom:7px;font-size:12px;font-weight:700}
.hw-form textarea,.hw-form select,.hw-line-row textarea{width:100%;border:1px solid #d0d5dd;border-radius:10px;background:#fff;color:var(--hw-ink);font:inherit}
.hw-form textarea{min-height:150px;padding:13px;resize:vertical;line-height:1.55}
.hw-form textarea:focus,.hw-form select:focus,.hw-line-row textarea:focus{outline:3px solid rgba(31,94,255,.08);border-color:#84a4ff}
.hw-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hw-mode-card{display:flex;gap:9px;align-items:flex-start;padding:13px;border:1px solid #dce1e6;border-radius:11px;background:#fff;cursor:pointer}
.hw-mode-card:has(input:checked){border-color:#8ba8ff;background:#f7f9ff;box-shadow:inset 0 0 0 1px rgba(31,94,255,.08)}
.hw-mode-card input{margin-top:2px}.hw-mode-card span{display:grid;gap:3px}.hw-mode-card strong{font-size:12px}.hw-mode-card small{color:var(--hw-copy);font-size:11px;line-height:1.4}
.hw-reference-box{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;align-items:center;margin-top:12px;padding:13px;border:1px solid #dfe4e9;border-radius:11px;background:#fafbfc}
.hw-reference-copy strong{font-size:12px}.hw-reference-copy p{margin:4px 0 8px;color:var(--hw-copy);font-size:11px;line-height:1.45}
.hw-pattern-download{display:inline-flex;min-height:34px;align-items:center;color:#344054;font-size:11px;font-weight:700;text-decoration:underline}
.hw-reference-upload{display:grid;place-items:center;min-height:86px;padding:12px;border:1px dashed #b6bec8;border-radius:10px;background:#fff;text-align:center;cursor:pointer}
.hw-reference-upload strong{font-size:11px}.hw-reference-upload small{margin-top:4px;color:var(--hw-copy);font-size:10px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hw-option-grid label{display:grid;gap:6px}.hw-option-grid label>span{font-size:11px;font-weight:700;color:#475467}
.hw-form select{min-height:43px;padding:0 10px}
.hw-generate-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.hw-generate,.hw-rerender{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:0 17px;border:0;border-radius:9px;background:var(--hw-accent);color:#fff;font-weight:700;box-shadow:none;cursor:pointer}
.hw-generate:hover,.hw-rerender:hover{background:var(--hw-accent-dark)}
.hw-generate:disabled,.hw-rerender:disabled{opacity:.55;cursor:wait}
.hw-status{margin:0;color:var(--hw-copy);font-size:12px;max-width:460px}
.hw-preview-panel{position:sticky;top:88px;padding:18px}
.hw-preview-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:14px}
.hw-preview-head span,.hw-line-editor-head span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:750;color:#667085}
.hw-preview-head h2,.hw-line-editor-head h3{margin:2px 0 0;font-size:18px}
.hw-download{display:inline-flex;min-height:38px;align-items:center;padding:0 12px;border-radius:8px;background:#111827;color:#fff;font-size:11px;font-weight:700;text-decoration:none}
.hw-preview-stage{display:grid;place-items:center;min-height:520px;max-height:720px;padding:16px;border:1px solid #e0e4e8;border-radius:12px;background:#f6f7f9;overflow:auto}
.hw-preview-stage img{display:block;max-width:100%;height:auto;border-radius:3px;box-shadow:0 10px 24px rgba(16,24,40,.12)}
.hw-empty-preview{text-align:center;color:#7b8491}.hw-empty-preview strong{display:block;color:#475467;font-size:13px}.hw-empty-preview p{margin:5px 0 0;font-size:12px}
.hw-result-meta{display:grid;gap:4px;margin-top:11px;padding:10px 11px;border-radius:9px;background:#f8f9fb;color:#475467;font-size:11px}
.hw-result-meta span:last-child:not(:empty){color:#805a16}
.hw-line-editor{margin-top:13px;padding:13px;border:1px solid #e0e4e8;border-radius:11px;background:#fbfcfd}
.hw-line-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hw-line-editor-head button{min-height:34px;padding:0 9px;border:1px solid #d6dbe0;border-radius:8px;background:#fff;color:#344054;font-size:11px;font-weight:700;cursor:pointer}
.hw-line-editor>p{margin:7px 0 11px;color:var(--hw-copy);font-size:11px;line-height:1.45}
.hw-line-list{display:grid;gap:7px;max-height:410px;overflow:auto;padding-right:3px}
.hw-line-row{display:grid;grid-template-columns:26px 1fr 32px;gap:6px;align-items:start}
.hw-line-number{display:grid;place-items:center;height:34px;border-radius:7px;background:#eef1f4;color:#667085;font-size:10px;font-weight:700}
.hw-line-row textarea{min-height:38px;padding:8px 9px;resize:vertical;font-size:12px;line-height:1.4}
.hw-line-remove{width:32px;height:34px;border:1px solid #ead9d9;border-radius:7px;background:#fff;color:#8b3d3d;cursor:pointer}
.hw-rerender{width:100%;min-height:42px;margin-top:11px}
.hw-answer-text{margin-top:10px;border-top:1px solid #e7eaed;padding-top:9px}
.hw-answer-text summary{cursor:pointer;font-size:11px;font-weight:700}
.hw-answer-text pre{white-space:pre-wrap;word-break:break-word;color:#475467;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:980px){.hw-workspace{grid-template-columns:1fr}.hw-preview-panel{position:static}}
@media(max-width:640px){
  .hw-shell{padding:34px 0 52px}
  .hw-form,.hw-preview-panel{border-radius:13px}
  .hw-form{padding:16px}
  .hw-option-grid,.hw-mode-grid,.hw-reference-box{grid-template-columns:1fr}
  .hw-preview-stage{min-height:360px}
  .hw-generate{width:100%}
}
@media(prefers-reduced-motion:reduce){.hw-dropzone{transition:none!important}}