/* Hallmark · shape: app screen · genre: modern-minimal · theme: Cobalt (existing tool system)
 * nav: media tool directory · signature: local file to playable downloadable output · states: empty, ready, loading, processing, cancelled, error, complete
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: rendered check passed · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, related controls are grouped and the output has a separate readable column. */
/* Hallmark · finish-review: subagent ship, no open findings; desktop and mobile file/settings/output hierarchy remains readable. */
/* Hallmark · answered F4 · Only Run tool has a cobalt primary fill; samples and file management are neutral keys. */
@import url('./tokens.css');
@import url('./base.css');
@import url('./fonts/fonts.css');
:root{--container:1280px;--gutter:32px;--color-error:oklch(42% .17 27);--font-body:'IBM Plex Sans',system-ui,sans-serif;--font-display:'Familjen Grotesk',system-ui,sans-serif;--control-height:44px}
html,body{overflow-x:clip}body{line-height:1.65}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
header{border-bottom:1px solid var(--color-rule)}.topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.brand{font-family:var(--font-display);font-size:20px;font-weight:600;text-decoration:none;white-space:nowrap}nav{display:flex;align-items:center;gap:var(--space-lg)}nav a{white-space:nowrap}
a{color:var(--color-accent);text-underline-offset:.2em}a:hover{text-decoration-thickness:2px}a:active{color:var(--color-accent-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.skip{position:absolute;transform:translateY(-200%);padding:var(--space-sm);background:var(--color-paper)}.skip:focus-visible{transform:none;z-index:10}
main{padding-block:var(--space-xl) var(--space-2xl)}h1,h2,h3{font-family:var(--font-display);font-weight:600;overflow-wrap:break-word;min-width:0;color:var(--color-ink);text-wrap:balance}
h1{font-size:32px;line-height:1.15;max-width:36ch;margin-bottom:var(--space-md)}h2{font-size:24px;line-height:1.2;margin-bottom:var(--space-lg)}h3{font-size:20px;margin-bottom:var(--space-sm)}
p{margin-bottom:var(--space-md)}p:last-child{margin-bottom:0}.intro{max-width:72ch;margin-bottom:var(--space-lg)}.notice{font-size:14px;max-width:75ch;color:var(--color-ink-2);margin-bottom:var(--space-lg)}
.workspace{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:32px;align-items:start}.controls{padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2)}
.field{margin-bottom:var(--space-md)}label{display:block;font-size:14px;font-weight:500;margin-bottom:var(--space-xs)}
input,select,textarea{width:100%;min-height:var(--control-height);padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-muted);border-radius:var(--radius-input);background:var(--color-key-face);color:var(--color-ink);font-family:var(--font-body);font-size:16px}
input:hover,select:hover,textarea:hover{background:var(--color-paper)}input:active,select:active,textarea:active{border-color:var(--color-ink)}textarea{min-height:180px;resize:vertical}
input[type=file]{font-size:14px;padding:var(--space-sm);min-width:0}input::file-selector-button{font:inherit;margin-right:var(--space-xs);border:1px solid var(--color-muted);border-radius:var(--radius-input);background:var(--color-paper-3);color:var(--color-ink);padding:var(--space-2xs) var(--space-xs);cursor:pointer}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md)}.actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-md)}
button{min-height:var(--control-height);padding:var(--space-xs) var(--space-md);border:1px solid var(--color-key-edge);border-radius:var(--radius-input);background:var(--color-key-face);color:var(--color-ink);font-family:var(--font-body);font-size:16px;box-shadow:var(--shadow-key);cursor:pointer;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-out)}
button:hover{transform:translateY(-1px)}button:active{transform:translateY(2px);box-shadow:var(--shadow-key-press)}button.primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent-edge);box-shadow:var(--shadow-key-accent)}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}.help{font-size:14px;color:var(--color-ink-2);min-height:1lh;margin-top:var(--space-2xs)}
.samples{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}.samples button{font-size:14px}
.output{min-width:0}#status{min-height:3lh;font-size:16px}progress{display:block;width:100%;height:12px;margin-bottom:var(--space-lg);accent-color:var(--color-accent)}
#output:empty::before{content:'Your processed file and preview will appear here.';color:var(--color-ink-2)}
#output video,#output img{display:block;width:100%;max-height:440px;object-fit:contain;background:var(--color-paper-3);border:1px solid var(--color-rule);margin-top:var(--space-lg)}#output audio{width:100%;margin-top:var(--space-lg)}
.download{display:inline-flex;align-items:center;min-height:44px;padding-block:var(--space-xs);font-weight:500}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-body);background:var(--color-paper-2);padding:var(--space-md);max-height:440px;overflow-y:auto}
.content{margin-top:var(--space-2xl);padding-top:32px;border-top:1px solid var(--color-rule-2)}.prose{max-width:75ch}.tool-list{list-style:none;padding:0}.tool-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;padding-block:var(--space-lg);border-top:1px solid var(--color-rule-2)}.tool-list h2{margin:0}.tool-list p{max-width:65ch}
details{border-top:1px solid var(--color-rule);padding-block:var(--space-lg)}summary{cursor:pointer;min-height:44px;font-weight:500}details p{margin-top:var(--space-md);max-width:75ch}
ul{padding-left:var(--space-lg)}li{margin-bottom:var(--space-xs)}.license-list a{overflow-wrap:anywhere}
footer{border-top:1px solid var(--color-rule);padding-block:var(--space-lg) var(--space-xl)}footer p{font-size:14px;color:var(--color-ink-2);max-width:75ch}.footer-links{display:flex;gap:var(--space-lg);flex-wrap:wrap;margin-bottom:var(--space-md)}.footer-links a{white-space:nowrap}
@media(max-width:60rem){.topbar{flex-wrap:wrap;padding-block:var(--space-md);gap:var(--space-sm)}.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg)}}
@media(max-width:48rem){:root{--gutter:20px}.workspace{grid-template-columns:minmax(0,1fr)}nav{width:100%;justify-content:space-between;gap:var(--space-sm)}nav a{font-size:16px}h1{font-size:28px}.controls{padding:20px}.row{grid-template-columns:minmax(0,1fr)}.tool-list li{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}.content{margin-top:var(--space-xl)}}
@media(prefers-reduced-motion:reduce){button{transition:none}button:hover,button:active{transform:none}}