.tool-main{max-width:1120px;margin:auto;padding:35px 26px 85px}.tool-breadcrumb{display:flex;gap:9px;align-items:center;color:#77839b;font-size:10px}.tool-breadcrumb a{color:#a9b4ca}.tool-intro{padding:50px 0 34px;max-width:760px}.tool-intro h1{font:700 clamp(38px,5.4vw,60px)/1.05 "Space Grotesk",sans-serif;letter-spacing:-2.7px;margin:17px 0}.tool-intro>p{max-width:650px;color:#a4aec1;font-size:13px;line-height:1.8}.tool-facts{display:flex;flex-wrap:wrap;gap:17px;margin-top:20px;color:#a8b2c6;font-size:10px}.workspace-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.workspace-panel{min-width:0;padding:19px;border:1px solid #ffffff16;border-radius:15px;background:linear-gradient(150deg,#151c2c,#0e131f)}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}.panel-step{font-size:8px;letter-spacing:1.3px;color:#a995ff}.panel-heading h2{font:600 16px "Space Grotesk",sans-serif;margin:5px 0 0}.panel-hint{font-size:8px;letter-spacing:.8px;color:#8490a8}.upload-zone{min-height:245px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed #666184;border-radius:12px;background:radial-gradient(circle at 50% 40%,#9274ff14,transparent 60%),#101625;cursor:pointer;text-align:center}.upload-zone.dragover{border-color:#ad96ff;background:#8f7aff1c}.upload-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#9b83ff22;color:#c3b3ff;font-size:28px}.upload-zone b{font-size:12px}.upload-zone small{font-size:10px;color:#8d99b0}.preview-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-bottom:10px}.image-preview-area img{display:block;width:100%;max-height:245px;object-fit:contain;border-radius:10px;background:#090c15}.quiet-button{border:1px solid #ffffff20;background:#171e2e;color:#b8c2d6;border-radius:8px;padding:8px 10px;font-size:9px;cursor:pointer}.workspace-actions{display:flex;align-items:center;gap:10px;margin-top:16px}.workspace-actions .button{flex:1;justify-content:center}.button:disabled{opacity:.45;cursor:not-allowed}.model-progress{margin-top:17px}.progress-label{display:flex;justify-content:space-between;font-size:10px;color:#b4bed2;margin-bottom:8px}.progress-track{height:6px;background:#252d40;border-radius:9px;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7d69e8,#70d9bd);transition:width .2s}.model-progress small{display:block;color:#808ba1;font-size:9px;margin-top:8px;line-height:1.6}.tool-message{min-height:18px;color:#9fdcc2;font-size:10px;line-height:1.6;margin:12px 0 0}.result-stage{min-height:285px;border-radius:11px;display:grid;place-items:center;overflow:hidden;background-color:#f1f2f5}.checkerboard{background-image:linear-gradient(45deg,#d3d5dc 25%,transparent 25%),linear-gradient(-45deg,#d3d5dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d3d5dc 75%),linear-gradient(-45deg,transparent 75%,#d3d5dc 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.result-stage img{display:block;max-width:100%;max-height:390px;object-fit:contain}.result-placeholder{text-align:center;color:#5f6676;padding:25px}.result-placeholder span{display:block;font-size:35px;color:#9583d4;margin-bottom:10px}.result-placeholder b,.result-placeholder small{display:block}.result-placeholder b{font-size:11px}.result-placeholder small{font-size:9px;margin-top:6px}.result-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:15px}.result-actions .button{justify-content:center}.result-note{font-size:9px;color:#8792a8}.tool-help{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;padding:48px 0 30px}.tool-help h2{font:600 23px "Space Grotesk",sans-serif;margin:10px 0}.tool-help ul{margin:0;padding-left:18px;color:#a3aec2;font-size:11px;line-height:2}.tool-disclosure{padding:17px;border:1px solid #ffffff12;border-radius:11px;background:#111725}.tool-disclosure b{font-size:11px}.tool-disclosure p{font-size:10px;color:#9aa5bb;line-height:1.75}.tool-disclosure a{color:#c4b3ff}.tool-page .site-footer{margin-top:0}@media(max-width:760px){.tool-main{padding:25px 17px 65px}.workspace-grid{grid-template-columns:1fr}.tool-intro{padding:38px 0 27px}.tool-intro h1{font-size:42px}.result-stage{min-height:230px}.tool-help{grid-template-columns:1fr;gap:10px}.panel-heading h2{font-size:15px}}
.object-workspace .erase-editor{margin-top:5px}.erase-canvas-wrap{position:relative;width:100%;max-height:440px;overflow:hidden;border-radius:10px;background:#080b13;touch-action:none}.erase-canvas-wrap canvas{display:block;width:100%;height:auto;max-height:440px;object-fit:contain}.erase-canvas-wrap canvas:first-child{position:relative}.erase-canvas-wrap canvas:last-child{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}.brush-control{margin-top:15px}.brush-control label{display:flex;justify-content:space-between;color:#aab5c9;font-size:10px;margin-bottom:7px}.brush-control input{width:100%;accent-color:#a58bff}.object-workspace .workspace-actions{margin-top:12px}.object-workspace #erase-output{max-width:100%;max-height:390px;object-fit:contain}.object-workspace .result-stage{background:#101625}@media(max-width:760px){.erase-canvas-wrap{max-height:340px}.erase-canvas-wrap canvas{max-height:340px}}
.restore-source-wrap{margin-top:5px}.restore-source-wrap img{display:block;width:100%;max-height:300px;object-fit:contain;border-radius:10px;background:#090c15}.restore-workspace .result-stage img{max-width:100%;max-height:390px;object-fit:contain}


/* Premium UX quality pass — shared tool workspace */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #b9a5ff;outline-offset:3px}
.tool-page{min-height:100vh}
.tool-main{padding-top:28px}
.tool-breadcrumb{flex-wrap:wrap;line-height:1.7}
.tool-intro{padding-top:42px}
.tool-intro>p{font-size:14px;max-width:680px}
.tool-facts{gap:10px}
.tool-facts span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #ffffff12;border-radius:999px;background:#ffffff06}
.workspace-panel{box-shadow:0 14px 42px #00000018}
.panel-heading h2{font-size:17px}
.panel-hint{white-space:nowrap}
.upload-zone{min-height:230px;padding:22px;transition:border-color .18s,background .18s,transform .18s}
.upload-zone:hover{border-color:#a995ff;background-color:#17182a}
.upload-zone:focus-within{outline:2px solid #b9a5ff;outline-offset:3px}
.button,.quiet-button{min-height:42px;cursor:pointer;transition:transform .16s,border-color .16s,background .16s,opacity .16s}
.button:not(:disabled):active,.quiet-button:not(:disabled):active{transform:translateY(1px)}
.quiet-button:hover:not(:disabled){border-color:#a995ff66;background:#20263a;color:#fff}
.button:disabled,.quiet-button:disabled{cursor:not-allowed;opacity:.48}
.model-progress,.progress-wrap{border:1px solid #ffffff12;border-radius:10px;padding:13px;background:#0c1220}
.progress-track{height:7px}
.tool-message,.video-message{overflow-wrap:anywhere}
.tool-help{align-items:start}
.tool-help li+li{margin-top:5px}
.tool-disclosure{line-height:1.75}
.tool-disclosure p{font-size:11px}
.result-stage{position:relative}
.result-actions{flex-wrap:wrap}
.result-actions .button{min-height:42px}
@media(max-width:760px){
 .tool-main{padding:22px 16px 58px}
 .tool-intro{padding:32px 0 24px}
 .tool-intro h1{font-size:clamp(36px,10vw,46px);letter-spacing:-2px}
 .tool-intro>p{font-size:13px}
 .workspace-panel{padding:15px;border-radius:13px}
 .panel-heading{align-items:flex-start}
 .panel-hint{white-space:normal;text-align:right}
 .upload-zone{min-height:190px}
 .workspace-actions{flex-wrap:wrap}
 .workspace-actions .button{min-width:0}
 .tool-facts{gap:7px}
 .tool-facts span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .upload-zone,.button,.quiet-button{transition:none}
}

/* Advanced video editor */
.video-editor-main{max-width:1220px}
.video-workspace-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:18px;align-items:start}
.video-editor-panel,.video-result-panel{min-width:0}
.video-upload-zone{min-height:185px}
.video-source-wrap{margin-top:15px;position:relative}
.video-preview-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:#dce2ef;font-size:11px}
.video-source-wrap{overscroll-behavior:contain}.video-source-wrap #video-selection-hit-area{touch-action:none;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent}.video-source-wrap video{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;background:#05070c;border-radius:10px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.video-export-preview{display:block;width:100%;max-height:420px;aspect-ratio:16/9;object-fit:contain;background:#05070c;border-radius:10px}
.video-meta,.video-output-meta{font-size:10px;color:#9ca8bd;line-height:1.7;margin-top:9px;overflow-wrap:anywhere}
.video-step-divider{height:1px;background:#ffffff12;margin:23px 0}
.video-instruction{font-size:11px;color:#9ba7bd;line-height:1.7;margin:-6px 0 14px}
.video-controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:15px 0}
.video-controls-grid label{display:flex;flex-direction:column;gap:7px;color:#aab5c9;font-size:10px}
.video-controls-grid label input{width:100%;accent-color:#a58bff}
.video-controls-grid .language-select{width:100%;min-width:0}
.range-value{color:#d8ccff}
.keyframe-actions,.video-export-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.keyframe-actions .button{flex:1}
.keyframe-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;color:#8995ab;font-size:10px;line-height:1.6}
.keyframe-chip{padding:6px 9px;border:1px solid #a995ff38;border-radius:7px;background:#a995ff0d;color:#d5caff}
.video-export-actions .button{flex:1;justify-content:center}
.video-result-stage{min-height:220px;background:#090d17;border:1px solid #ffffff12}
.video-result-stage .result-placeholder{color:#aab5c9}
.video-result-stage .result-placeholder small{color:#8792a8;line-height:1.6}
.video-download{display:flex;justify-content:center;margin-top:14px}
.video-quality-note{margin-top:22px;padding:15px;border:1px solid #ffffff12;border-radius:11px;background:#0e1421}
.video-quality-note b{font-size:11px}
.video-quality-note ul{padding-left:17px;color:#9da9bd;font-size:10px;line-height:1.8}
.video-result-panel{position:sticky;top:18px}
@media(max-width:850px){.video-workspace-grid{grid-template-columns:1fr}.video-result-panel{position:static}}
@media(max-width:560px){.video-controls-grid{grid-template-columns:1fr}.video-editor-panel,.video-result-panel{padding:14px}.keyframe-actions .button{flex-basis:100%}.video-source-wrap video,.video-export-preview{max-height:270px}}

/* Readability and touch-first controls */
.tool-breadcrumb{font-size:12px;gap:10px}
.tool-intro>p{font-size:15px;line-height:1.8}
.tool-facts{font-size:12px}
.panel-step{font-size:10px}
.panel-heading h2{font-size:19px}
.panel-hint{font-size:10px;letter-spacing:.5px}
.upload-zone b{font-size:15px}
.upload-zone small{font-size:12px;line-height:1.5}
.preview-top{font-size:12px}
.quiet-button{font-size:12px;padding:10px 13px;min-height:44px}
.button{font-size:14px;min-height:48px;padding:12px 17px}
.progress-label{font-size:12px}
.model-progress small{font-size:11px}
.tool-message{font-size:12px;line-height:1.65}
.result-placeholder b{font-size:13px}
.result-placeholder small{font-size:11px;line-height:1.55}
.result-note{font-size:11px}
.tool-help ul{font-size:13px;line-height:1.85}
.tool-disclosure b{font-size:13px}
.tool-disclosure p{font-size:12px;line-height:1.75}
.video-instruction{font-size:13px}
.video-controls-grid label{font-size:12px}
.keyframe-list{font-size:12px}
.keyframe-chip{font-size:11px}
.video-quality-note b{font-size:13px}
.video-quality-note ul{font-size:12px}
.video-meta,.video-output-meta{font-size:12px}
@media(max-width:760px){
 .tool-main{padding-left:15px;padding-right:15px}
 .workspace-panel{padding:16px}
 .panel-heading h2{font-size:18px}
 .panel-hint{font-size:10px}
 .upload-zone{min-height:185px}
 .workspace-actions .button{flex:1 1 100%}
 .quiet-button{min-height:44px}
 .tool-help ul{font-size:12px}
}
