.task-page{max-width:1120px;margin:0 auto;padding:24px 24px 0}.task-intro{margin-bottom:24px}.task-intro h1{color:var(--pf-ink);letter-spacing:-.03em;margin:0;font-size:clamp(28px,4vw,38px);font-weight:700;line-height:1.2}.task-intro p{max-width:68ch;color:var(--pf-muted-2);margin-top:10px;font-size:15px;line-height:1.6}.task-workspace{border:1px solid var(--pf-border);background:var(--pf-surface);border-radius:14px;padding:24px}.task-columns{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;display:grid}.task-page fieldset{border:0;min-width:0;margin:0;padding:0}.task-page legend{color:var(--pf-ink);margin-bottom:16px;font-size:16px;font-weight:650}.task-field{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.task-field label,.task-file-label{color:var(--pf-ink);font-size:14px;font-weight:600}.task-page input:not([type=checkbox]),.task-page select{border:1px solid var(--pf-border-med);background:var(--pf-bg);width:100%;min-width:0;min-height:44px;color:var(--pf-ink);font:inherit;border-radius:8px;padding:10px 12px;font-size:16px}.task-page input[type=file]{background:var(--pf-bg);margin-top:10px;padding:12px;font-size:14px}.task-page input::file-selector-button{background:var(--pf-indigo-500);color:#fff;min-height:40px;font:inherit;cursor:pointer;border:0;border-radius:6px;margin-right:10px;padding:8px 12px;font-weight:600}.task-upload{background:var(--pf-bg);border:1px dashed var(--pf-border-med);border-radius:10px;padding:20px}.task-upload.is-dragging{border-color:var(--pf-link);background:var(--pf-indigo-50)}.task-note{color:var(--pf-muted-2);margin:10px 0 0;font-size:13px;line-height:1.65}.task-dimensions{grid-template-columns:1fr 1fr;gap:12px;display:grid}.task-checkbox{cursor:pointer;min-height:44px;color:var(--pf-ink);align-items:center;gap:10px;margin-bottom:12px;font-size:14px;display:flex}.task-checkbox input{width:18px;height:18px;accent-color:var(--pf-indigo-500)}.task-button{border-radius:var(--pf-radius-btn);border:1px solid var(--pf-border-med);background:var(--pf-surface);min-height:46px;color:var(--pf-ink);font:inherit;cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:12px 18px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.task-button.primary{border-color:var(--pf-indigo-500);background:var(--pf-indigo-500);color:#fff}.task-button:hover{border-color:var(--pf-link)}.task-button.primary:hover{background:var(--pf-indigo-600)}.task-button:disabled{opacity:.5;cursor:default}.task-actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;display:flex}.task-status{color:var(--pf-muted-2);overflow-wrap:anywhere;margin-top:16px;font-size:14px;line-height:1.6}.task-status[data-tone=error]{color:var(--pf-danger)}.task-status[data-tone=success]{color:var(--pf-success)}.task-preview{background:var(--pf-bg);border-radius:8px;place-items:center;min-height:120px;margin-top:16px;padding:12px;display:grid}.task-preview canvas{width:auto;max-width:100%;height:auto;max-height:240px;display:block}.task-result{border-top:1px solid var(--pf-border);margin-top:20px;padding-top:20px;scroll-margin-top:92px}.task-result h2{color:var(--pf-ink);margin:0;font-size:18px}.task-result p{color:var(--pf-muted-2);margin:8px 0 0;font-size:14px;line-height:1.65}.task-guide{max-width:760px;margin:40px auto 0}.task-guide section{margin:28px 0}.task-guide h2{letter-spacing:-.02em;margin:0 0 12px;font-size:22px;line-height:1.35}.task-guide p,.task-guide li{color:var(--pf-muted-2);margin-bottom:12px;font-size:15px;line-height:1.8}.task-guide ul,.task-guide ol{padding-left:22px}.task-guide a,.task-note a{color:var(--pf-link);text-underline-offset:3px}.task-page :is(a,button,input,select):focus-visible{outline:2px solid var(--pf-link);outline-offset:3px}.task-page [hidden]{display:none!important}@media (width<=720px){.task-page{padding:18px 16px 0}.task-intro{margin-bottom:20px}.task-columns{grid-template-columns:1fr;gap:24px}.task-workspace{padding:18px}.task-upload{padding:14px}.task-preview canvas{max-height:180px}.task-actions .primary{flex:1}.task-guide{margin-top:28px}}
