.agl-page{--agl-panel:var(--panel,#111);--agl-line:var(--line,#333);--agl-text:var(--text,#eee);color:var(--agl-text)}
.agl-page .agl-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0}.agl-head h1{font-size:clamp(28px,4vw,48px);margin:5px 0;letter-spacing:-1.5px}.agl-head p,.agl-note{font-size:12px;color:var(--muted,#aaa);line-height:1.6}.agl-head small{letter-spacing:.14em}.agl-actions,.agl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.agl-workspace{display:grid;grid-template-columns:170px minmax(0,1fr) 310px;gap:12px;align-items:start}.agl-panel,.agl-preview,.agl-bottom{background:var(--agl-panel);border:1px solid var(--agl-line);border-radius:12px;padding:16px;min-width:0}.agl-tabs{display:grid;gap:6px}.agl-page button{font:inherit;cursor:pointer}.agl-tabs button,.agl-look,.agl-page .agl-small{color:inherit;background:transparent;border:1px solid var(--agl-line);border-radius:6px;padding:10px;text-align:left}.agl-tabs button[aria-selected=true],.agl-look.active{background:var(--text,#eee);color:var(--bg,#080808)}.agl-page button:disabled{opacity:.45;cursor:not-allowed}.agl-page button:focus-visible{outline:2px solid currentColor;outline-offset:3px}.agl-page input[type=range]{width:100%;accent-color:var(--accent,#fff)}.agl-page input:not([type=range]):not([type=checkbox]),.agl-page select{min-width:0;width:100%;color:inherit;background:var(--bg,#080808);border:1px solid var(--agl-line);border-radius:5px;padding:9px}.agl-page input[type=checkbox]{accent-color:var(--accent,#fff)}.agl-page label{font-size:12px}.agl-field{display:block;margin:15px 0}.agl-field>span{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}.agl-field output{font-variant-numeric:tabular-nums;color:var(--muted,#aaa)}.agl-preview{padding:10px}.agl-toolbar{display:flex;gap:7px;flex-wrap:wrap;padding:3px 2px 12px}.agl-toolbar .btn{padding:8px 10px;font-size:12px}.agl-stage{min-height:380px;display:grid;place-items:center;background:repeating-conic-gradient(#181818 0% 25%,#202020 0% 50%) 50%/16px 16px;position:relative;overflow:hidden;border-radius:6px;touch-action:pan-y}.agl-stage canvas{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain}.agl-stage .agl-empty{text-align:center;padding:30px;color:#eee;line-height:1.8}.agl-stage .agl-divider{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none}.agl-stage [hidden],.agl-page [hidden]{display:none!important}.agl-info{display:flex;gap:10px;justify-content:space-between;padding:12px 2px;font-size:11px;flex-wrap:wrap}.agl-status{padding:12px 0;font-size:12px;line-height:1.5}.agl-status.error{color:#e88989}.agl-page h2{font-size:16px;margin:0 0 16px}.agl-page h3{font-size:13px;margin-top:20px}.agl-controls{max-height:85vh;overflow:auto}.agl-looks{display:grid;grid-template-columns:1fr 1fr;gap:7px}.agl-look{min-height:57px;font-size:12px}.agl-look span{display:block;font-size:10px;opacity:.6;margin-top:4px}.agl-wheel{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,white,transparent),conic-gradient(red,yellow,lime,cyan,blue,magenta,red);position:relative;touch-action:none;margin:12px auto}.agl-wheel i{position:absolute;width:12px;height:12px;border:2px solid #fff;box-shadow:0 0 0 1px #000;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.agl-wheels{display:grid;grid-template-columns:1fr;gap:12px}.agl-curve{display:block;width:100%;height:180px;touch-action:none;background:var(--bg,#090909);border:1px solid var(--agl-line)}.agl-curve path{fill:none;stroke:currentColor;stroke-width:2}.agl-curve circle{fill:var(--bg,#000);stroke:currentColor;stroke-width:2;cursor:grab}.agl-bottom{margin-top:12px}.agl-bottom .agl-row input[type=range]{flex:1;min-width:100px}.agl-keyframes{display:grid;gap:8px;margin-top:12px}.agl-key{display:grid;grid-template-columns:75px minmax(0,1fr) 36px;gap:6px;align-items:center}.agl-key input{font-size:12px}.agl-key button{padding:8px}.agl-key button[data-key-load]{grid-column:1/-1}.agl-saved{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.agl-saved>div{display:flex;gap:5px;width:100%;flex-wrap:wrap;border-top:1px solid var(--agl-line);padding-top:8px}.agl-saved button{font-size:11px}.agl-export{margin-top:12px}.agl-export progress{width:100%;height:8px}.agl-export .btn{margin-top:8px}.agl-reference{border-top:1px solid var(--agl-line);margin-top:20px;padding-top:16px}.agl-histogram{width:100%;height:95px;background:#090909}.agl-mobile-note{font-size:11px}.agl-tabs button{font-size:12px;letter-spacing:.08em}.agl-export-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.agl-export-grid label{display:grid;gap:6px}.agl-page .btn.primary{background:var(--text,#fff);color:var(--bg,#000)}
@media(max-width:1100px){.agl-workspace{grid-template-columns:140px minmax(0,1fr) 270px}.agl-panel{padding:12px}.agl-stage{min-height:300px}}
@media(max-width:850px){.agl-workspace{grid-template-columns:minmax(0,1fr)}.agl-workspace>.agl-center{grid-row:1}.agl-tabs{display:flex;overflow:auto;flex-wrap:nowrap}.agl-tabs button{white-space:nowrap;flex:none}.agl-controls{max-height:none}.agl-looks{display:flex;overflow-x:auto}.agl-look{flex:0 0 140px}.agl-head{flex-wrap:wrap}.agl-stage{min-height:240px}.agl-wheels{grid-template-columns:repeat(3,minmax(0,1fr))}.agl-wheel{width:80px;height:80px}.agl-export{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.agl-page *{scroll-behavior:auto!important}}

@media(max-width:850px){.agl-workspace>.agl-center{display:contents}.agl-workspace>aside:first-child{order:2}.agl-workspace>.agl-controls{order:3}.agl-preview{order:0}.agl-bottom,.agl-status{order:1}.agl-export{order:4}}
.agl-page .agl-icon,.agl-page .agl-icon *{fill:none!important;stroke:currentColor!important;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.agl-page .agl-icon{width:22px;height:22px;flex:none;display:inline-block;vertical-align:middle;color:inherit!important}.agl-tabs button{display:flex;align-items:center;gap:9px;border:0}.agl-tabs .agl-icon{width:18px;height:18px}.agl-page .agl-look{border:0;background:color-mix(in srgb,var(--agl-text) 5%,var(--agl-panel));padding:13px;display:flex;flex-direction:column;gap:8px;min-height:135px;align-items:flex-start;transition:background .15s}.agl-look b{font-size:13px;line-height:1.35}.agl-look span{margin:0;font-size:10px;line-height:1.5;opacity:.7}.agl-look-badge{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--look-color) 12%,transparent);color:var(--look-color)}.agl-look-badge .agl-icon{width:23px;height:23px}.agl-page .agl-look.active{background:color-mix(in srgb,var(--agl-text) 15%,var(--agl-panel));color:inherit;box-shadow:inset 3px 0 currentColor}.agl-page .agl-look:hover{background:color-mix(in srgb,var(--agl-text) 11%,var(--agl-panel))}.agl-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.agl-edit-grid .agl-field{margin:8px 0}.agl-clip-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;margin:12px 0}.agl-page input[type=color]{height:40px}.agl-controls h3{border-top:1px solid var(--agl-line);padding-top:14px}
.agl-trim-track{height:20px;border-radius:5px;background:repeating-linear-gradient(90deg,#252525 0 20px,#151515 20px 22px);position:relative;margin-bottom:12px;overflow:hidden}.agl-trim-track>span{position:absolute;top:0;bottom:0;background:#a6b4c855;border-left:3px solid #bfcede;border-right:3px solid #bfcede}.agl-trim-track>i{position:absolute;top:0;bottom:0;width:2px;background:#fff}.agl-page button[data-action]{display:inline-flex;align-items:center;gap:7px}.agl-page button[data-action]>.agl-icon{width:16px;height:16px}