:root{
  --media-panel:rgba(14,30,47,.92);--media-soft:rgba(255,255,255,.045);--media-line:rgba(147,189,222,.2);
  --media-line-strong:rgba(147,189,222,.35);--media-text:#eff8ff;--media-muted:#9db2c5;--media-accent:#75e5ff;
  --media-good:#79e2b6;--media-danger:#ff9aa9;--media-shadow:0 24px 70px rgba(0,0,0,.22)
}
html[data-theme="light"]{--media-panel:#fff;--media-soft:#f3f8fc;--media-line:#d7e4ed;--media-line-strong:#b9cedb;--media-text:#0b2033;--media-muted:#607789;--media-accent:#087e9d;--media-good:#147a58;--media-danger:#b9344f;--media-shadow:0 20px 55px rgba(28,63,88,.12)}
*{box-sizing:border-box}.media-page{min-height:100vh;margin:0;background:var(--bg);color:var(--media-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.media-header{position:sticky;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px)}
.media-head-actions{display:flex;align-items:center;gap:10px}.media-all-tools{min-height:40px;display:inline-flex;align-items:center;padding:0 13px;border:1px solid var(--media-line);border-radius:11px;color:var(--media-muted);font-size:.82rem;font-weight:800;text-decoration:none}.media-all-tools:hover{color:var(--media-text);border-color:var(--media-line-strong)}
.media-main{padding:30px 0 68px}.media-hero{display:flex;align-items:end;justify-content:space-between;gap:26px;padding-top:18px;padding-bottom:22px}.media-heading{max-width:760px}.media-kicker{display:block;margin-bottom:8px;color:var(--media-accent);font-size:.69rem;font-weight:900;letter-spacing:.12em}.media-heading h1{margin:0;font-size:clamp(2rem,4vw,3.55rem);line-height:1.02;letter-spacing:-.045em}.media-heading p{max-width:690px;margin:13px 0 0;color:var(--media-muted);font-size:clamp(.94rem,1.2vw,1.06rem);line-height:1.58}.media-safety-strip{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:450px}.media-safety-strip span{padding:7px 10px;border:1px solid var(--media-line);border-radius:999px;background:var(--media-soft);color:var(--media-muted);font-size:.72rem;font-weight:800}
.media-workspace{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:17px;align-items:start}.media-card{min-width:0;padding:19px;border:1px solid var(--media-line);border-radius:21px;background:var(--media-panel);box-shadow:var(--media-shadow)}.media-result-card{grid-column:2}.media-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.media-card-head>div{display:flex;align-items:center;gap:10px;min-width:0}.media-card h2{margin:0;font-size:.98rem}.media-step{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,#9bf0ff,#8b91ff);color:#07111f;font-size:.71rem;font-weight:950}.media-local-pill,.media-mode-pill,.media-success-pill{padding:6px 8px;border-radius:999px;border:1px solid var(--media-line);font-size:.61rem;font-weight:900;letter-spacing:.06em;white-space:nowrap}.media-local-pill{color:var(--media-accent)}.media-mode-pill{color:var(--media-muted)}.media-success-pill{color:var(--media-good)}
.media-dropzone{min-height:210px;padding:23px 17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1.5px dashed var(--media-line-strong);border-radius:17px;background:var(--media-soft);text-align:center;cursor:pointer;transition:border-color .18s ease,transform .18s ease,background .18s ease}.media-dropzone:hover,.media-dropzone.dragging{border-color:var(--media-accent);background:color-mix(in srgb,var(--media-accent) 7%,var(--media-soft));transform:translateY(-1px)}.media-drop-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#d9faff,#dfe3ff);color:#08708b;font-size:1.45rem}.media-dropzone strong{font-size:.98rem}.media-dropzone span:not(.media-drop-icon),.media-dropzone small{color:var(--media-muted);font-size:.77rem}.media-dropzone small{max-width:260px;line-height:1.45}
.media-file-summary{display:grid;grid-template-columns:44px minmax(0,1fr) 37px;align-items:center;gap:10px;padding:11px;border:1px solid var(--media-line);border-radius:15px;background:var(--media-soft)}.media-file-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#d9faff,#dfe3ff);color:#08708b;font-size:.78rem}.media-file-copy{min-width:0}.media-file-copy strong,.media-file-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-file-copy strong{font-size:.84rem}.media-file-copy span{margin-top:4px;color:var(--media-muted);font-size:.7rem}.media-icon-button{width:37px;height:37px;border:1px solid var(--media-line);border-radius:10px;background:transparent;color:var(--media-muted);font-size:1.15rem;cursor:pointer}.media-protection-note{margin-top:13px;padding:11px;border-radius:13px;background:var(--media-soft);border:1px solid var(--media-line)}.media-protection-note strong{font-size:.74rem}.media-protection-note p{margin:5px 0 0;color:var(--media-muted);font-size:.7rem;line-height:1.5}
.media-action-card{min-height:380px}.media-controls{display:grid;gap:13px}.media-controls>p{margin:0;padding:13px;border:1px solid var(--media-line);border-radius:13px;background:var(--media-soft);color:var(--media-muted);line-height:1.52;font-size:.83rem}.media-field{display:grid;gap:7px}.media-field>span{font-size:.75rem;font-weight:850;color:var(--media-muted)}.media-field select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--media-line-strong);border-radius:11px;background:var(--media-soft);color:var(--media-text);font:700 .86rem inherit}.media-field option{color:#101c27}.media-hint{font-size:.76rem!important}
.media-preview-shell{margin-bottom:14px;border:1px solid var(--media-line);border-radius:16px;background:#050a10;overflow:hidden;min-height:100px;display:grid;place-items:center}.media-native-preview{display:block;width:100%;max-height:340px;background:#050a10;object-fit:contain}.media-audio-preview{min-height:76px;padding:12px;background:var(--media-soft)}
.media-range-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.media-range-summary.single{grid-template-columns:1fr}.media-range-summary>div{padding:10px 11px;border:1px solid var(--media-line);border-radius:12px;background:var(--media-soft)}.media-range-summary span,.media-range-summary strong{display:block}.media-range-summary span{color:var(--media-muted);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.media-range-summary strong{margin-top:3px;font-size:.9rem}.media-dual-range{--range-start:0%;--range-end:100%;position:relative;height:36px;margin:1px 1px 2px}.media-range-track{position:absolute;left:4px;right:4px;top:16px;height:5px;border-radius:999px;background:linear-gradient(to right,var(--media-line) 0 var(--range-start),var(--media-accent) var(--range-start) var(--range-end),var(--media-line) var(--range-end) 100%)}.media-dual-range input{position:absolute;inset:0;width:100%;height:36px;margin:0;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none}.media-dual-range input::-webkit-slider-runnable-track{height:5px;background:transparent}.media-dual-range input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;border:3px solid var(--media-panel);border-radius:50%;background:var(--media-accent);box-shadow:0 0 0 1px var(--media-line-strong);pointer-events:auto;cursor:pointer}.media-dual-range input::-moz-range-track{height:5px;background:transparent}.media-dual-range input::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--media-panel);border-radius:50%;background:var(--media-accent);box-shadow:0 0 0 1px var(--media-line-strong);pointer-events:auto;cursor:pointer}.media-single-range{width:100%;accent-color:var(--media-accent)}.media-mini-actions{display:flex;flex-wrap:wrap;gap:8px}.media-mini-button{min-height:38px;padding:0 11px;border:1px solid var(--media-line);border-radius:10px;background:var(--media-soft);color:var(--media-text);font:800 .72rem/1 system-ui;cursor:pointer}.media-mini-button:hover{border-color:var(--media-line-strong)}.media-privacy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.media-privacy-grid span{padding:10px 11px;border:1px solid var(--media-line);border-radius:12px;background:var(--media-soft);color:var(--media-muted);font-size:.74rem;font-weight:750}
.media-status{min-height:44px;margin-top:16px;padding:11px 12px;border:1px solid var(--media-line);border-radius:12px;background:var(--media-soft);color:var(--media-muted);font-size:.78rem;line-height:1.45}.media-status.success{color:var(--media-good);border-color:color-mix(in srgb,var(--media-good) 45%,var(--media-line))}.media-status.error{color:var(--media-danger);border-color:color-mix(in srgb,var(--media-danger) 45%,var(--media-line))}.media-progress{height:5px;margin-top:9px;border-radius:999px;background:var(--media-soft);overflow:hidden}.media-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#7cecff,#9186ff);transition:width .12s linear}.media-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.media-button{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--media-line-strong);font:850 .81rem/1 system-ui;cursor:pointer;text-decoration:none}.media-button.primary{border-color:transparent;background:linear-gradient(135deg,#8cecff,#8f86ff);color:#06111e}.media-button.secondary{background:var(--media-soft);color:var(--media-text)}.media-button:disabled{opacity:.45;cursor:not-allowed}.media-result-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}.media-metric{padding:11px;border:1px solid var(--media-line);border-radius:12px;background:var(--media-soft);min-width:0}.media-metric span,.media-metric strong{display:block}.media-metric span{color:var(--media-muted);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.media-metric strong{margin-top:5px;font-size:.85rem;overflow-wrap:anywhere}.media-result-card>.media-button{width:max-content;margin-left:auto}
.media-explain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:21px}.media-explain article{padding:17px;border:1px solid var(--media-line);border-radius:17px;background:var(--media-soft)}.media-explain h2{margin:0;font-size:.87rem}.media-explain p{margin:8px 0 0;color:var(--media-muted);font-size:.74rem;line-height:1.54}.media-footer{border-top:1px solid var(--media-line);padding:21px 0;color:var(--media-muted)}.media-footer .container{display:flex;align-items:center;justify-content:space-between;gap:18px}.media-footer p{margin:0;font-size:.71rem}.media-footer nav{display:flex;gap:14px;font-size:.71rem;font-weight:800}.hidden{display:none!important}
@media(max-width:900px){.media-hero{display:grid}.media-safety-strip{justify-content:flex-start}.media-workspace{grid-template-columns:1fr}.media-result-card{grid-column:auto}.media-explain{grid-template-columns:1fr}.media-dropzone{min-height:185px}.media-native-preview{max-height:300px}}
@media(max-width:620px){.media-page .site-header .container{width:calc(100% - 24px)}.media-all-tools{padding:0 9px;font-size:.72rem}.media-main{padding-top:16px}.media-hero{padding-top:10px;gap:14px}.media-heading h1{font-size:1.95rem}.media-heading p{font-size:.9rem}.media-safety-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:none;gap:7px}.media-safety-strip span{display:flex;align-items:center;min-width:0;min-height:38px;padding:8px 10px;font-size:.66rem;line-height:1.25;white-space:normal}.media-safety-strip span:last-child{grid-column:1/-1}.media-card{padding:14px;border-radius:17px}.media-action-card{min-height:0}.media-result-content,.media-privacy-grid{grid-template-columns:1fr}.media-actions{position:sticky;bottom:max(7px,env(safe-area-inset-bottom));z-index:5;padding-top:9px;background:linear-gradient(180deg,transparent,var(--media-panel) 28%)}.media-actions .media-button{flex:1}.media-mini-actions{display:grid;grid-template-columns:1fr 1fr}.media-footer .container{display:grid}.media-footer nav{flex-wrap:wrap}.media-native-preview{max-height:250px}.media-range-summary strong{font-size:.84rem}}
@media(max-width:380px){.media-card-head{align-items:flex-start}.media-mode-pill{white-space:normal;text-align:right}.media-mini-actions{grid-template-columns:1fr}.media-button{padding-inline:12px}.media-safety-strip{grid-template-columns:1fr;gap:6px}.media-safety-strip span,.media-safety-strip span:last-child{grid-column:1;padding:7px 9px;min-height:36px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Thumbnail Maker: low-memory two-level frame picker. */
.media-frame-picker{display:grid;gap:10px}.media-frame-strip-head{display:flex;align-items:end;justify-content:space-between;gap:12px}.media-frame-strip-head strong{font-size:.8rem;color:var(--media-text)}.media-frame-strip-head span{font-size:.66rem;font-weight:800;color:var(--media-muted);text-align:right}.media-frame-strip-head-detail{margin-top:2px}.media-frame-strip{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:4px 2px 8px;min-height:68px;scrollbar-width:thin;scrollbar-color:var(--media-line-strong) transparent;-webkit-overflow-scrolling:touch}.media-frame-strip::-webkit-scrollbar{height:5px}.media-frame-strip::-webkit-scrollbar-thumb{background:var(--media-line-strong);border-radius:999px}.media-frame-thumb{position:relative;flex:0 0 112px;aspect-ratio:16/9;padding:0;border:2px solid transparent;border-radius:10px;background:#050a10;overflow:hidden;cursor:pointer;scroll-snap-align:center;box-shadow:0 0 0 1px var(--media-line);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}.media-frame-thumb:hover{border-color:var(--media-line-strong)}.media-frame-thumb:focus-visible{outline:2px solid var(--media-accent);outline-offset:2px}.media-frame-thumb.selected{border-color:var(--media-accent);box-shadow:0 0 0 1px var(--media-accent),0 0 16px rgba(99,220,255,.18)}.media-frame-thumb img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.media-frame-thumb time{position:absolute;right:4px;bottom:4px;padding:2px 5px;border-radius:999px;background:rgba(3,9,16,.8);color:#fff;font:800 .56rem/1 system-ui,sans-serif}.media-frame-strip-message{display:grid;place-items:center;min-width:100%;min-height:58px;padding:9px 12px;border:1px dashed var(--media-line);border-radius:10px;color:var(--media-muted);font-size:.69rem;text-align:center}.media-frame-step-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.media-frame-step-actions .media-mini-button{min-height:42px}.media-frame-exact .media-frame-thumb{flex-basis:104px}

@media(max-width:620px){.media-frame-strip{gap:6px}.media-frame-thumb{flex-basis:96px;border-radius:9px}.media-frame-exact .media-frame-thumb{flex-basis:92px}.media-frame-thumb time{font-size:.52rem}.media-frame-strip-head strong{font-size:.76rem}.media-frame-strip-head span{font-size:.62rem}}


/* Cross-browser mobile header hardening for media tool action cards. */
.media-card-head{min-width:0}
.media-card-head>div{min-width:0;flex:1 1 auto}
.media-card-head h2{min-width:0;overflow-wrap:anywhere}
.media-mode-pill{flex:0 0 auto;max-width:132px;line-height:1.15;text-align:center}
@media(max-width:620px){
  .media-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .media-card-head>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .media-mode-pill{max-width:116px;white-space:normal;overflow-wrap:anywhere;padding:7px 9px}
}
@media(max-width:390px){
  .media-mode-pill{max-width:98px;font-size:.56rem}
}

/* v9: compositor-friendly two-handle trim control. Avoid overlapping native range inputs on mobile. */
.media-trim-slider{display:grid;gap:5px;padding:2px 1px 0}
.media-trim-rail{position:relative;height:56px;margin:0 14px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;overscroll-behavior:contain}
.media-trim-rail::before{content:"";position:absolute;left:0;right:0;top:24px;height:8px;border-radius:999px;background:var(--media-line);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--media-line-strong) 55%,transparent)}
.media-trim-selection{position:absolute;top:24px;height:8px;border-radius:999px;background:linear-gradient(90deg,#63dcff,#25a9c8 58%,#7b8cff);box-shadow:0 0 14px rgba(99,220,255,.22);pointer-events:none;will-change:left,right}
.media-trim-handle{position:absolute;top:6px;width:44px;height:44px;margin:0;padding:0;transform:translateX(-50%);border:2px solid color-mix(in srgb,var(--media-accent) 72%,white);border-radius:15px;background:var(--media-panel);box-shadow:0 4px 16px rgba(0,0,0,.22),0 0 0 3px color-mix(in srgb,var(--media-accent) 12%,transparent);cursor:ew-resize;touch-action:none;z-index:2;will-change:left}
.media-trim-handle::before{content:"";position:absolute;left:50%;top:10px;width:4px;height:20px;transform:translateX(-50%);border-radius:999px;background:var(--media-accent);box-shadow:-6px 0 0 color-mix(in srgb,var(--media-accent) 55%,transparent),6px 0 0 color-mix(in srgb,var(--media-accent) 55%,transparent)}
.media-trim-handle:focus-visible{outline:3px solid color-mix(in srgb,var(--media-accent) 65%,white);outline-offset:3px}
.media-trim-handle:disabled{opacity:.45;cursor:not-allowed}
.media-trim-scale{display:flex;justify-content:space-between;gap:8px;padding:0 2px;color:var(--media-muted);font-size:.58rem;font-weight:800;letter-spacing:.03em}
.media-trim-scale span:nth-child(2){text-align:center;color:color-mix(in srgb,var(--media-accent) 70%,var(--media-muted))}
.media-trim-state-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important}
@media(max-width:620px){
  .media-trim-rail{height:60px;margin-inline:12px}
  .media-trim-rail::before,.media-trim-selection{top:26px;height:8px}
  .media-trim-handle{top:7px;width:46px;height:46px;border-radius:15px}
  .media-trim-handle::before{top:11px;height:20px}
  .media-trim-scale{font-size:.56rem}
}


/* v19 — selected PixelOrigen logo palette. */
:root{
  --media-accent:#72e8ff;
}
html[data-theme="light"]{
  --media-panel:#fff;
  --media-soft:#f1f7fb;
  --media-line:#d2e2ec;
  --media-line-strong:#b4cbd9;
  --media-text:#071c3d;
  --media-muted:#607b8e;
  --media-accent:#087fa3;
}
.media-step,
.media-button.primary{
  background:linear-gradient(135deg,#18cfe3,#176cf2 58%,#18c5a9)!important;
  color:#06162d!important;
}
.media-progress span,
.media-trim-selection{
  background:linear-gradient(90deg,#18cfe3,#176cf2 58%,#18c5a9)!important;
}