/**
 * LOOKITSGRAPHIC — Audio/Video Studio (styles)
 * Interface timeline : topbar, transport, pistes, inspecteur.
 */

:root{--ink:#11110f;--paper:#f3f0e8;--paper-2:#e7e1d4;--white:#fffdf7;--acid:#d9ff32;--violet:#7357ff;--coral:#ff6038;--blue:#bfe5ff;--cyan:#59cfe2;--yellow:#ffcf42;--pink:#e78cff;--line:2px solid var(--ink);--shadow:5px 5px 0 var(--ink)}*{box-sizing:border-box}html,body{background:var(--paper);min-height:100%;color:var(--ink);margin:0}body{font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,input,textarea,select{color:inherit;font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.35}svg{stroke-width:2.2px}.hidden-input{display:none}.studio-shell{background:var(--paper);flex-direction:column;min-width:1024px;height:100dvh;min-height:620px;display:flex;overflow:hidden}.topbar{border-bottom:var(--line);background:var(--paper);z-index:50;flex:0 0 76px;grid-template-columns:330px minmax(190px,1fr) 72px auto 104px;height:76px;display:grid}.brand{min-width:0;color:inherit;border-right:var(--line);align-items:center;gap:12px;padding:9px 15px;text-decoration:none;display:flex}.logo-box img{width:100%;height:100%;object-fit:contain;display:block}.logo-box{border:2px solid var(--ink);background:var(--ink);width:53px;height:53px;box-shadow:5px 5px 0 var(--acid);flex:none;display:grid;place-items:center;overflow:hidden}.brand>b,.brand>div:last-child{flex-direction:column;align-items:center;text-align:center;min-width:166px;display:flex}.brand strong,.brand b{font-size:18px;letter-spacing:-.045em;text-align:center}.brand span,.brand small{font:700 10px/1.6 Courier New,monospace;letter-spacing:.19em;text-align:center;color:var(--ink)}.active-document{border-right:var(--line);flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:8px 15px;display:flex}.active-document span{color:#777167;letter-spacing:1.5px;font-size:7px;font-weight:900}.active-document strong{white-space:nowrap;text-overflow:ellipsis;font:900 15px Arial Black,Arial;overflow:hidden}.active-document small{white-space:nowrap;text-overflow:ellipsis;color:var(--violet);letter-spacing:.8px;font-size:6px;font-weight:900;overflow:hidden}.history-actions{border-right:var(--line);align-items:center;gap:5px;padding:0 7px;display:flex}.history-actions button{border:1.5px solid var(--ink);background:var(--white);place-items:center;width:25px;height:31px;display:grid}.history-actions svg{width:13px}.top-actions{border-right:var(--line);align-items:center;gap:5px;padding:0 9px;display:flex}.top-actions button{border:1.5px solid var(--ink);background:var(--white);justify-content:center;align-items:center;gap:6px;min-width:42px;height:36px;padding:0 8px;font-size:7px;font-weight:900;display:flex}.top-actions button:hover{background:var(--blue);box-shadow:2px 2px 0 var(--ink);transform:translateY(-1px)}.top-actions svg{width:14px}.top-actions .top-export{background:var(--acid);box-shadow:3px 3px 0 var(--ink)}.top-actions .recording{background:var(--coral);color:#fff;animation:1s steps(2,end) infinite blink}@keyframes blink{50%{color:var(--ink);background:#fff}}.tool-number{background:var(--violet);color:#fff;justify-content:center;align-items:center;gap:6px;display:flex;transform:skew(-3deg)}.tool-number>*{transform:skew(3deg)}.tool-number small{writing-mode:vertical-rl;letter-spacing:2px;font-size:7px;font-weight:900}.tool-number strong{font:900 22px Arial Black,Arial}.mobile-menu,.mobile-inspector{display:none}.studio-workspace{flex:1;grid-template-columns:278px minmax(470px,1fr) 350px;min-height:0;transition:grid-template-columns .2s;display:grid}.left-closed .studio-workspace{grid-template-columns:0 minmax(470px,1fr) 350px}.right-closed .studio-workspace{grid-template-columns:278px minmax(470px,1fr) 0}.left-closed.right-closed .studio-workspace{grid-template-columns:0 1fr 0}.media-panel,.inspector-panel{z-index:20;background:var(--paper);flex-direction:column;min-width:0;min-height:0;transition:opacity .15s;display:flex;position:relative;overflow:hidden}.media-panel{border-right:var(--line)}.inspector-panel{border-left:var(--line)}.left-closed .media-panel,.right-closed .inspector-panel{opacity:0;pointer-events:none}.panel-head{border-bottom:var(--line);background:var(--white);flex:0 0 55px;justify-content:space-between;align-items:center;height:55px;padding:8px 12px;display:flex}.panel-head>div{flex-direction:column;gap:3px;min-width:0;display:flex}.panel-head strong{white-space:nowrap;text-overflow:ellipsis;font:900 11px Arial Black,Arial;overflow:hidden}.panel-head small{white-space:nowrap;text-overflow:ellipsis;color:#746e65;letter-spacing:1.2px;font-size:6px;font-weight:900;overflow:hidden}.panel-head button{border:1.5px solid var(--ink);background:var(--paper-2);place-items:center;width:29px;height:29px;display:grid}.panel-head svg{width:14px}.panel-tabs{border-bottom:var(--line);flex:0 0 38px;height:38px;display:grid}.panel-tabs.three{grid-template-columns:repeat(3,1fr)}.panel-tabs.four{grid-template-columns:repeat(4,1fr)}.panel-tabs button{border:0;border-right:1px solid var(--ink);background:var(--white);justify-content:center;align-items:center;gap:4px;padding:0 3px;font-size:6px;font-weight:900;display:flex}.panel-tabs button:last-child{border-right:0}.panel-tabs button.active{background:var(--ink);color:#fff}.panel-tabs svg{width:12px}.import-zone{text-align:left;border:var(--line);background:var(--acid);min-height:61px;box-shadow:3px 3px 0 var(--ink);grid-template-rows:1fr 1fr;grid-template-columns:40px 1fr;align-items:center;margin:10px 11px 7px;padding:6px;display:grid}.import-zone>span{border:1.5px solid var(--ink);background:#fff;grid-row:1/3;place-items:center;width:34px;height:34px;display:grid}.import-zone svg{width:16px}.import-zone strong{align-self:end;font-size:8px}.import-zone small{align-self:start;margin-top:2px;font-size:6px;font-weight:700}.search-field{border:1.5px solid var(--ink);background:var(--white);align-items:center;gap:6px;height:33px;margin:5px 11px 7px;padding:0 7px;display:flex}.search-field svg{width:13px}.search-field input{background:0 0;border:0;outline:0;flex:1;min-width:0;font-size:8px}kbd{border:1px solid var(--ink);background:var(--paper-2);padding:2px 4px;font:900 6px Arial}.media-list{background:var(--white);scrollbar-width:thin;border:1px solid #958f84;flex:1;min-height:80px;margin:0 11px;overflow-y:auto}.media-row{cursor:pointer;border-bottom:1px dotted #a9a297;grid-template-columns:58px 1fr 19px 25px;align-items:center;min-height:65px;display:grid}.media-row:hover{background:#eef9ff}.media-row.active{box-shadow:inset 4px 0 0 var(--violet);background:#e9e2ff}.media-thumb{border:1px solid var(--ink);background:var(--paper-2);place-items:center;width:50px;height:45px;margin-left:5px;display:grid;overflow:hidden}.media-thumb img{object-fit:cover;width:100%;height:100%}.media-thumb svg{width:20px}.media-row>div:nth-child(2){flex-direction:column;gap:3px;min-width:0;padding-left:4px;display:flex}.media-row strong,.media-row small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.media-row strong{font-size:8px}.media-row small{color:#746e65;font-size:6px}.media-row>span{color:#8b847a;font:6px ui-monospace,monospace}.media-row>button{background:0 0;border:0;border-left:1px solid #c8c1b7;place-items:center;height:100%;display:grid}.media-row>button:hover{background:var(--coral)}.media-row>button svg{width:12px}.empty-library{text-align:center;color:#716b62;flex-direction:column;justify-content:center;align-items:center;min-height:230px;padding:30px 20px;display:flex}.empty-library svg{width:30px;margin-bottom:10px}.empty-library strong{font-size:8px}.empty-library p{max-width:185px;font-size:7px;line-height:1.6}.privacy-note{background:#dff3d9;border:1px solid #79746c;align-items:center;gap:7px;margin:9px 11px 11px;padding:7px;display:flex}.privacy-note>span{border:1.5px solid var(--ink);background:#70da81;place-items:center;width:24px;height:24px;display:grid}.privacy-note svg{width:14px}.privacy-note>div{flex-direction:column;gap:2px;display:flex}.privacy-note strong{font-size:6px}.privacy-note small{color:#5f5b55;font-size:6px}.tools-scroll,.project-scroll,.inspector-scroll{scrollbar-width:thin;flex:1;min-height:0;overflow-y:auto}.tools-scroll{padding:8px 10px 15px}.tool-group{margin-bottom:11px}.tool-group h3{color:#655f57;letter-spacing:1.7px;border-bottom:1px solid #918a80;margin:0 0 5px;padding:4px 6px;font-size:7px}.tool-group>div{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.tool-group button{border:1.5px solid var(--ink);background:var(--white);flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:59px;padding:5px 2px;display:flex}.tool-group button:hover{background:var(--acid);box-shadow:2px 2px 0 var(--ink);transform:translate(-1px,-1px)}.tool-group button span{background:var(--paper-2);border:1px solid #847e75;place-items:center;width:28px;height:26px;display:grid}.tool-group button svg{width:14px}.tool-group button b{font-size:6px}.project-scroll{padding:10px}.project-card{border:var(--line);background:var(--white);box-shadow:3px 3px 0 var(--ink);grid-template-columns:38px 1fr;gap:8px;margin-bottom:11px;padding:10px;display:grid}.project-card.acid{background:var(--acid)}.project-card>svg{width:24px}.project-card>div{flex-direction:column;gap:4px;display:flex}.project-card strong{font-size:8px}.project-card p{color:#625d56;margin:0;font-size:7px;line-height:1.45}.project-card button{border:1.5px solid var(--ink);background:var(--ink);color:#fff;grid-column:1/3;min-height:30px;font-size:7px;font-weight:900}.project-card button.danger{background:var(--coral);color:var(--ink)}.shortcut-card{background:var(--blue);border:1px solid #847e75;gap:8px;padding:9px;display:flex}.shortcut-card svg{width:20px}.shortcut-card strong{font-size:7px}.shortcut-card p{margin:5px 0 0;font-size:6px;line-height:1.8}.editor-panel{background-color:var(--paper-2);background-image:radial-gradient(#aaa398 1px,#0000 1px);background-size:18px 18px;flex-direction:column;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.reopen{z-index:25;border:var(--line);background:var(--acid);width:35px;height:35px;box-shadow:3px 3px 0 var(--ink);place-items:center;display:grid;position:absolute;top:58px}.reopen.left{left:8px}.reopen.right{right:8px}.reopen svg{width:15px}.preview-toolbar{border-bottom:var(--line);background:var(--white);flex:0 0 48px;grid-template-columns:1fr auto auto;align-items:center;gap:9px;height:48px;padding:5px 9px;display:grid}.preview-title{flex-direction:column;gap:3px;min-width:0;display:flex}.preview-title span{color:var(--violet);letter-spacing:1.5px;font-size:6px;font-weight:900}.preview-title strong{white-space:nowrap;text-overflow:ellipsis;font-size:9px;overflow:hidden}.monitor-options{border:1.5px solid var(--ink);height:29px;display:flex}.monitor-options button{border:0;border-right:1px solid var(--ink);background:var(--white);padding:0 8px;font-size:6px;font-weight:900}.monitor-options button:last-child{border:0}.monitor-options button.active{background:var(--ink);color:#fff}.monitor-meta{gap:4px;display:flex}.monitor-meta span{background:var(--paper);border:1px solid #8b857c;padding:5px 6px;font-size:6px;font-weight:900}.monitor-stage{background:#292826;flex:1;place-items:center;min-height:150px;display:grid;position:relative;overflow:hidden}.monitor-stage:before{content:"";opacity:.18;background-image:linear-gradient(45deg,#555 25%,#0000 25%),linear-gradient(-45deg,#555 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#555 75%),linear-gradient(-45deg,#0000 75%,#555 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}.monitor-canvas{aspect-ratio:16/9;z-index:2;background:#080808;border:2px solid #080808;place-items:center;width:min(78%,760px);display:grid;position:relative;overflow:hidden;box-shadow:8px 8px #00000073}.monitor-canvas.aspect-9-16{aspect-ratio:9/16;width:min(34%,330px)}.monitor-canvas.aspect-1-1{aspect-ratio:1;width:min(55%,520px)}.monitor-canvas.aspect-4-5{aspect-ratio:4/5;width:min(44%,440px)}.monitor-canvas>video,.monitor-canvas>img{object-fit:contain;max-width:100%;max-height:100%;transition:filter .15s,transform .15s}.safe-frame{z-index:6;pointer-events:none;border:1px dashed #ffffff40;position:absolute;inset:7%}.text-overlay{z-index:7;text-align:center;text-shadow:-1px -1px #000,1px -1px #000,-1px 1px #000,2px 2px #000;pointer-events:none;max-width:86%;padding:3px 7px;font-weight:900;position:absolute}.text-overlay.top{top:8%}.text-overlay.center{top:50%;transform:translateY(-50%)}.text-overlay.bottom{bottom:8%}.empty-monitor{color:#fff;text-align:center;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;padding:25px;display:flex}.empty-monitor>span{background:var(--violet);border:2px solid #fff;place-items:center;width:58px;height:54px;display:grid;box-shadow:5px 5px #fff}.empty-monitor svg{width:26px}.empty-monitor strong{margin-top:7px;font:900 15px Arial Black,Arial}.empty-monitor p{color:#c8c5bf;margin:0;font-size:8px}.empty-monitor b{background:var(--acid);color:var(--ink);border:1.5px solid #fff;margin-top:7px;padding:8px 11px;font-size:7px}.audio-monitor{color:#fff;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:28px;display:flex}.audio-disc{background:var(--coral);border:4px solid #fff;border-radius:50%;place-items:center;width:75px;height:75px;display:grid;box-shadow:0 0 0 11px #222,0 0 0 13px #fff}.audio-disc svg{width:27px;color:var(--ink)}.audio-monitor>strong{white-space:nowrap;text-overflow:ellipsis;max-width:85%;margin-top:20px;font-size:10px;overflow:hidden}.audio-monitor>small{color:#bebbb4;margin-top:4px;font-size:6px}.audio-monitor canvas{filter:invert();width:85%;height:54px;margin-top:13px}.log-console{z-index:20;border:var(--line);color:var(--acid);box-shadow:5px 5px 0 var(--violet);background:#111;flex-direction:column;display:flex;position:absolute;inset:12px}.log-console header{background:#222;border-bottom:1px solid #888;justify-content:space-between;align-items:center;height:34px;padding:0 8px;display:flex}.log-console header span{align-items:center;gap:6px;font-size:7px;font-weight:900;display:flex}.log-console header svg{width:13px}.log-console button{border:1px solid var(--acid);color:var(--acid);background:0 0;font-size:6px}.log-console pre{white-space:pre-wrap;flex:1;margin:0;padding:9px;font:6px/1.6 ui-monospace,monospace;overflow:auto}.transport{border-top:var(--line);border-bottom:var(--line);background:var(--white);flex:0 0 49px;grid-template-columns:110px auto 1fr 110px;align-items:center;height:49px;display:grid}.transport-time,.transport-duration{flex-direction:column;justify-content:center;gap:3px;height:100%;padding:6px 9px;display:flex}.transport-time{border-right:1px solid #8c857b}.transport-duration{border-left:1px solid #8c857b}.transport span{color:#716a61;letter-spacing:1px;font-size:5px;font-weight:900}.transport strong{font:900 11px ui-monospace,monospace}.transport-buttons{align-items:center;gap:4px;padding:0 8px;display:flex}.transport-buttons button{border:1.5px solid var(--ink);background:var(--paper);place-items:center;min-width:28px;height:29px;font-size:6px;font-weight:900;display:grid}.transport-buttons .play{background:var(--acid);width:36px;box-shadow:2px 2px 0 var(--ink)}.transport-buttons svg{width:13px}.transport-range{padding:0 10px}.transport-range input{width:100%;accent-color:var(--violet)}.timeline-panel{background:var(--paper);flex-direction:column;flex:0 0 268px;height:268px;min-height:0;transition:height .2s,flex-basis .2s;display:flex}.timeline-closed .timeline-panel{flex-basis:43px;height:43px}.timeline-closed .timeline-scroll{display:none}.timeline-toolbar{border-bottom:1px solid var(--ink);background:var(--white);flex:0 0 43px;grid-template-columns:150px auto 1fr 47px;align-items:center;gap:7px;height:43px;padding:5px 7px;display:grid}.timeline-toolbar>div:first-child{flex-direction:column;gap:2px;display:flex}.timeline-toolbar strong{font-size:7px}.timeline-toolbar small{color:#7b746a;font-size:5px}.edit-buttons{gap:3px;display:flex}.edit-buttons button{border:1px solid var(--ink);background:var(--paper);align-items:center;gap:4px;height:28px;padding:0 6px;font-size:5px;font-weight:900;display:flex}.edit-buttons button:hover{background:var(--acid)}.edit-buttons svg{width:11px}.zoom-control{justify-self:end;align-items:center;gap:4px;display:flex}.zoom-control svg{width:11px}.zoom-control input{width:75px;accent-color:var(--violet)}.zoom-control b{width:28px;font-size:5px}.timeline-toggle{border:1px solid var(--ink);background:var(--violet);color:#fff;height:27px;font-size:5px;font-weight:900}.timeline-scroll{scrollbar-width:thin;background:#d8d1c5;flex:1;min-height:0;overflow:auto}.timeline-grid{grid-template-columns:150px 1fr;grid-auto-rows:36px 49px;min-height:100%;display:grid}.ruler-label{z-index:12;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--ink);color:#fff;align-items:center;gap:5px;padding:0 8px;font-size:6px;font-weight:900;display:flex;position:sticky;left:0}.ruler-label svg{width:12px}.ruler{border-bottom:1px solid var(--ink);background:var(--paper-2);cursor:crosshair;position:relative}.ruler>i{background:#777;width:1px;height:9px;position:absolute;bottom:0}.ruler>i.major{background:var(--ink);height:17px}.ruler>i span{white-space:nowrap;font:5px ui-monospace,monospace;position:absolute;top:-12px;left:3px}.track-row{grid-column:1/3;grid-template-columns:150px 1fr;min-width:0;display:grid}.track-label{z-index:12;border-right:1px solid var(--ink);background:var(--white);border-bottom:1px solid #8e877d;grid-template-columns:30px 1fr auto;align-items:center;gap:5px;padding:4px 5px;display:grid;position:sticky;left:0}.track-label>span{border:1.5px solid var(--ink);place-items:center;width:28px;height:29px;display:grid}.track-label>span svg{width:13px}.track-label>div:nth-child(2){flex-direction:column;gap:2px;min-width:0;display:flex}.track-label strong{white-space:nowrap;text-overflow:ellipsis;font-size:6px;overflow:hidden}.track-label small{font-size:5px}.track-buttons{display:flex}.track-buttons button{background:0 0;border:0;border-left:1px solid #aaa;place-items:center;width:19px;height:22px;padding:0;display:grid}.track-buttons svg{width:10px}.track-lane{background-image:linear-gradient(90deg,#11110f17 1px,#0000 1px);background-size:34px 100%;border-bottom:1px solid #8e877d;position:relative;overflow:hidden}.track-lane.locked{opacity:.58}.timeline-clip{border:1.5px solid var(--ink);text-align:left;touch-action:none;-webkit-user-select:none;user-select:none;align-items:stretch;height:39px;padding:0;display:flex;position:absolute;top:4px;overflow:hidden;box-shadow:2px 2px #11110fa6}.timeline-clip.selected{outline:3px solid var(--acid);outline-offset:1px;z-index:5}.timeline-clip.hidden-clip{opacity:.35}.timeline-clip>img{object-fit:cover;filter:saturate(.55);flex:0 0 48px;width:48px}.timeline-clip>span{z-index:2;color:#fff;text-shadow:1px 1px #000;flex-direction:column;gap:3px;min-width:0;padding:4px 7px;display:flex}.timeline-clip b,.timeline-clip small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.timeline-clip b{font-size:6px}.timeline-clip small{font-size:5px}.clip-wave{opacity:.4;align-items:center;gap:1px;display:flex;position:absolute;inset:2px}.clip-wave i{background:#fff;flex:1}.trim-handle{z-index:5;background:var(--acid);width:4px;position:absolute;top:0;bottom:0}.trim-handle.left{left:0}.trim-handle.right{right:0}.playhead{z-index:8;background:var(--coral);pointer-events:none;width:1px;position:absolute;top:0;bottom:0}.playhead:before{content:"";background:var(--coral);width:9px;height:9px;position:absolute;top:-1px;left:-4px;transform:rotate(45deg)}.statusbar{border-top:1px solid var(--ink);background:var(--ink);color:#fff;flex:0 0 23px;align-items:center;height:23px;display:flex}.statusbar span{letter-spacing:.5px;border-right:1px solid #555;align-items:center;gap:4px;height:100%;padding:0 8px;font-size:5px;font-weight:900;display:flex}.statusbar i{background:#777;border-radius:50%;width:7px;height:7px}.statusbar i.ready{background:#70da81;box-shadow:0 0 0 2px #2f6636}.statusbar i.working,.statusbar i.loading{background:var(--yellow)}.statusbar i.error{background:var(--coral)}.inspector-scroll{padding-bottom:18px}.inspector-section{border-bottom:var(--line)}.inspector-section>header{background:var(--paper-2);border-bottom:1px solid #928b81;align-items:center;gap:7px;height:35px;padding:0 10px;display:flex}.inspector-section>header span{border:1px solid var(--ink);background:var(--white);place-items:center;width:22px;height:22px;display:grid}.inspector-section>header svg{width:12px}.inspector-section>header strong{letter-spacing:1px;font-size:7px}.section-body{background:var(--paper);padding:10px}.metadata-grid{grid-template-columns:1fr auto;gap:7px 10px;display:grid}.metadata-grid span{color:#6f6960;font-size:6px;font-weight:900}.metadata-grid b{text-align:right;white-space:nowrap;text-overflow:ellipsis;max-width:190px;font:900 6px ui-monospace,monospace;overflow:hidden}.empty-inspector{text-align:center;color:#746e65;flex-direction:column;align-items:center;padding:15px;display:flex}.empty-inspector svg{width:24px;margin-bottom:6px}.empty-inspector strong{font-size:7px}.empty-inspector p{margin:5px 0 0;font-size:6px}.range-control{flex-direction:column;gap:5px;margin-bottom:11px;display:flex}.range-control>span{color:#615c54;justify-content:space-between;align-items:center;font-size:6px;font-weight:900;display:flex}.range-control b{background:var(--white);color:var(--ink);border:1px solid #9b948a;padding:3px 5px;font:900 6px ui-monospace,monospace}.range-control input{width:100%;accent-color:var(--violet)}.range-control.disabled{opacity:.4}.number-control{background:var(--white);border:1px solid #918a80;justify-content:space-between;align-items:center;height:33px;margin-bottom:7px;padding-left:7px;display:flex}.number-control>span{font-size:6px;font-weight:900}.number-control>div{border-left:1px solid #aaa399;height:100%;display:flex}.number-control input{background:0 0;border:0;width:76px;padding:0 6px;font:7px ui-monospace,monospace}.number-control b{background:var(--paper-2);place-items:center;width:22px;font-size:6px;display:grid}.inline-actions{gap:5px;display:flex}.inline-actions button,.full-button{border:1.5px solid var(--ink);background:var(--white);flex:1;justify-content:center;align-items:center;gap:5px;min-height:30px;padding:0 7px;font-size:6px;font-weight:900;display:flex}.inline-actions button:hover,.inline-actions button.active,.full-button:hover{background:var(--acid)}.inline-actions button.danger{background:var(--coral);flex:0 0 34px}.inline-actions svg,.full-button svg{width:12px}.segmented{border:1.5px solid var(--ink);grid-template-columns:repeat(4,1fr);height:32px;margin-bottom:8px;display:grid}.segmented button{border:0;border-right:1px solid var(--ink);background:var(--white);font-size:6px;font-weight:900}.segmented button:last-child{border:0}.segmented button.active{background:var(--violet);color:#fff}.field-label,.select-control{flex-direction:column;gap:5px;margin-bottom:10px;display:flex}.field-label>span,.select-control>span,.color-control>span{color:#615c54;font-size:6px;font-weight:900}.field-label input,.field-label textarea{border:1.5px solid var(--ink);background:var(--white);outline:0;width:100%;padding:7px;font-size:8px}.field-label textarea{resize:vertical;line-height:1.4}.select-control>div{border:1.5px solid var(--ink);background:var(--white);align-items:center;height:33px;display:flex;position:relative}.select-control select{appearance:none;background:0 0;border:0;outline:0;width:100%;height:100%;padding:0 28px 0 7px;font-size:7px;font-weight:900}.select-control svg{pointer-events:none;width:12px;position:absolute;right:7px}.color-control{background:var(--white);border:1px solid #918a80;grid-template-columns:1fr 38px auto;align-items:center;gap:7px;height:35px;padding:0 7px;display:grid}.color-control input{border:0;width:38px;height:25px;padding:0}.color-control b{font:6px ui-monospace,monospace}.preset-grid{grid-template-columns:1fr 1fr;gap:5px;display:grid}.preset-grid button{border:1.5px solid var(--ink);background:var(--white);min-height:31px;font-size:6px;font-weight:900}.preset-grid button:hover{background:var(--acid);box-shadow:2px 2px 0 var(--ink)}.toggle-row{border-bottom:1px dotted #a9a297;justify-content:space-between;align-items:center;min-height:43px;padding:5px 0;display:flex;position:relative}.toggle-row:last-child{border-bottom:0}.toggle-row>span{flex-direction:column;gap:3px;display:flex}.toggle-row strong{font-size:6px}.toggle-row small{color:#736d64;font-size:5px}.toggle-row input{opacity:0;position:absolute}.toggle-row>i{border:1.5px solid var(--ink);background:#bbb5aa;width:32px;height:18px;position:relative}.toggle-row>i:after{content:"";border:1px solid var(--ink);background:#fff;width:10px;height:10px;transition:all .15s;position:absolute;top:2px;left:2px}.toggle-row input:checked+i{background:var(--acid)}.toggle-row input:checked+i:after{background:var(--ink);left:16px}.export-modes{gap:5px;display:grid}.export-modes button{border:1.5px solid var(--ink);background:var(--white);text-align:left;align-items:center;gap:8px;min-height:43px;padding:5px 7px;display:flex}.export-modes button.active{background:var(--acid);box-shadow:2px 2px 0 var(--ink)}.export-modes button>svg{width:16px}.export-modes button span{flex-direction:column;gap:3px;display:flex}.export-modes b{font-size:6px}.export-modes small{color:#6f6960;font-size:5px}.engine-card{border:var(--line);background:var(--white);box-shadow:3px 3px 0 var(--ink);margin:11px;padding:9px}.engine-card.ready{background:#ddf3dc}.engine-card.working,.engine-card.loading{background:#fff2bd}.engine-card.error{background:#ffd5c9}.engine-head{grid-template-columns:34px 1fr auto;align-items:center;gap:7px;display:grid}.engine-head>span{border:1.5px solid var(--ink);background:var(--violet);color:#fff;place-items:center;width:31px;height:31px;display:grid}.engine-head svg{width:15px}.engine-head>div{flex-direction:column;gap:3px;display:flex}.engine-head strong{font-size:7px}.engine-head small{color:#6f6960;font-size:5px}.engine-head>b{font:900 8px ui-monospace,monospace}.engine-progress{border:1px solid var(--ink);background:var(--paper-2);height:8px;margin:8px 0}.engine-progress i{background:var(--violet);height:100%;transition:width .15s;display:block}.engine-card>button{border:1px solid var(--ink);background:var(--acid);justify-content:center;align-items:center;gap:5px;width:100%;min-height:28px;font-size:6px;font-weight:900;display:flex}.engine-card>button svg{width:12px}.export-button{border:var(--line);background:var(--acid);width:calc(100% - 22px);min-height:48px;box-shadow:4px 4px 0 var(--ink);justify-content:center;align-items:center;gap:8px;margin:0 11px;font:900 9px Arial Black,Arial;display:flex}.export-button:hover:not(:disabled){box-shadow:6px 6px 0 var(--ink);transform:translate(-1px,-1px)}.export-button svg{width:17px}.export-note{color:#69635b;align-items:flex-start;gap:6px;margin:10px 15px;font-size:6px;line-height:1.45;display:flex}.export-note svg{flex:none;width:13px}.drop-overlay{z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#11110fc4;place-items:center;display:grid;position:fixed;inset:0}.drop-overlay>div{border:3px solid var(--ink);outline:3px dashed var(--acid);outline-offset:-14px;background:var(--acid);width:min(520px,70vw);height:260px;box-shadow:14px 14px 0 var(--violet);flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.drop-overlay svg{width:55px}.drop-overlay strong{font:900 22px Arial Black,Arial}.drop-overlay span{letter-spacing:1.5px;font-size:8px;font-weight:900}.toast{z-index:120;border:var(--line);background:var(--white);max-width:430px;min-height:42px;box-shadow:var(--shadow);align-items:center;gap:8px;padding:7px 12px 7px 7px;font-size:8px;font-weight:900;display:flex;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.toast>span{border:1.5px solid var(--ink);background:var(--acid);place-items:center;width:27px;height:27px;display:grid}@media (max-height:760px){.topbar{flex-basis:66px;height:66px}.logo-box{width:45px;height:45px;box-shadow:4px 4px 0 var(--acid)}.timeline-panel{flex-basis:220px;height:220px}.monitor-canvas{width:min(67%,660px)}.media-row{min-height:55px}.media-thumb{height:39px}}@media (max-width:1180px){.topbar{grid-template-columns:285px minmax(150px,1fr) 62px auto 87px}.brand{padding-left:10px}.brand strong{font-size:14px}.top-actions button span{display:none}.studio-workspace{grid-template-columns:248px minmax(440px,1fr) 320px}.right-closed .studio-workspace{grid-template-columns:248px minmax(440px,1fr) 0}.left-closed .studio-workspace{grid-template-columns:0 minmax(440px,1fr) 320px}.monitor-options button{padding:0 5px}}@media (max-width:1023px){body{overflow:auto}.studio-shell{width:1024px}}

/* === Lisibilité + projet actif dans media-panel === */

.studio-workspace {
  grid-template-columns: 295px minmax(470px, 1fr) 370px;
}

.left-closed .studio-workspace {
  grid-template-columns: 0 minmax(470px, 1fr) 370px;
}

.right-closed .studio-workspace {
  grid-template-columns: 295px minmax(470px, 1fr) 0;
}

.topbar {
  grid-template-columns: 330px 72px 1fr 104px;
}

.top-actions {
  justify-self: end;
}

@media (max-width: 1180px) {
  .studio-workspace {
    grid-template-columns: 262px minmax(440px, 1fr) 335px;
  }

  .left-closed .studio-workspace {
    grid-template-columns: 0 minmax(440px, 1fr) 335px;
  }

  .right-closed .studio-workspace {
    grid-template-columns: 262px minmax(440px, 1fr) 0;
  }

  .topbar {
    grid-template-columns: 285px 62px 1fr 87px;
  }
}

.media-panel > .active-document {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 12px;
  border-bottom: var(--line);
  background-color: var(--white);
  background-image: radial-gradient(#11110f1a 1px, transparent 1px);
  background-size: 14px 14px;
}

.media-panel > .active-document > span {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 900;
  color: #777167;
  white-space: nowrap;
}

.media-panel > .active-document > span::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 14px;
  margin-left: 10px;
  background: var(--ink);
  vertical-align: middle;
}

.media-panel > .active-document > strong {
  flex: 1 1 auto;
  min-width: 0;
  font: 900 15px/1 Arial Black, Arial;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-panel > .active-document > small {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 900;
  color: var(--violet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-panel > .active-document > small::before {
  content: "·";
  margin-right: 8px;
  color: #9c9589;
  font-weight: 900;
}

/* --- media-panel --- */
.media-panel .panel-head {
  min-height: 64px;
  padding: 11px 14px;
}

.media-panel .panel-head strong {
  font-size: 15px;
  letter-spacing: -0.02em;
}

.media-panel .panel-head small {
  font-size: 11px;
  letter-spacing: 0.12em;
}

.media-panel .panel-tabs {
  flex: 0 0 44px;
  height: 44px;
}

.media-panel .panel-tabs button {
  font-size: 11px;
  gap: 6px;
  letter-spacing: 0.03em;
}

.media-panel .panel-tabs svg {
  width: 15px;
}

.media-panel .import-zone {
  min-height: 64px;
  margin: 11px 14px 8px;
  padding: 8px;
}

.media-panel .import-zone strong {
  font-size: 11px;
}

.media-panel .import-zone small {
  font-size: 10px;
}

.media-panel .search-field {
  height: 38px;
  margin: 6px 14px 8px;
  padding: 0 9px;
}

.media-panel .search-field input {
  font-size: 12px;
}

.media-panel kbd {
  font-size: 10px;
  padding: 3px 6px;
}

.media-panel .media-list {
  margin: 0 14px;
}

.media-panel .media-row {
  min-height: 72px;
  grid-template-columns: 62px 1fr 22px 28px;
}

.media-panel .media-row strong {
  font-size: 11px;
}

.media-panel .media-row small {
  font-size: 10px;
}

.media-panel .media-row > span {
  font-size: 9px;
}

.media-panel .empty-library strong {
  font-size: 12px;
}

.media-panel .empty-library p {
  max-width: 220px;
  font-size: 12px;
  line-height: 1.55;
}

.media-panel .tool-group h3 {
  font-size: 11px;
  letter-spacing: 0.12em;
}

.media-panel .tool-group button b {
  font-size: 10px;
}

.media-panel .tool-group button {
  min-height: 64px;
}

.media-panel .project-card strong {
  font-size: 11px;
}

.media-panel .project-card p {
  font-size: 11px;
}

.media-panel .project-card button {
  min-height: 34px;
  font-size: 11px;
}

.media-panel .shortcut-card strong {
  font-size: 11px;
}

.media-panel .shortcut-card p {
  font-size: 10px;
}

.media-panel .privacy-note {
  margin: 10px 14px 14px;
  padding: 10px;
}

.media-panel .privacy-note strong,
.media-panel .privacy-note small {
  font-size: 10px;
}

/* --- preview-toolbar --- */
.preview-toolbar {
  min-height: 52px;
  height: auto;
  padding: 7px 10px;
  gap: 10px;
}

.preview-title span {
  font-size: 10px;
  letter-spacing: 0.12em;
}

.preview-title strong {
  font-size: 12px;
}

.monitor-options {
  height: 34px;
}

.monitor-options button {
  padding: 0 10px;
  font-size: 10px;
}

.monitor-meta span {
  padding: 6px 8px;
  font-size: 10px;
}

.empty-monitor strong {
  font-size: 17px;
}

.empty-monitor p {
  font-size: 12px;
  line-height: 1.55;
  max-width: 320px;
}

.empty-monitor b {
  font-size: 11px;
  padding: 9px 13px;
}

.audio-monitor > strong {
  font-size: 12px;
}

.audio-monitor > small {
  font-size: 10px;
}

/* --- transport --- */
.transport {
  flex: 0 0 54px;
  height: 54px;
  grid-template-columns: 124px auto 1fr 124px;
}

.transport span {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.transport strong {
  font-size: 14px;
}

.transport-buttons button {
  min-width: 32px;
  height: 34px;
  font-size: 11px;
}

.transport-buttons .play {
  width: 40px;
}

/* --- timeline-toolbar --- */
.timeline-toolbar {
  flex: 0 0 48px;
  height: 48px;
  padding: 6px 9px;
}

.timeline-toolbar strong {
  font-size: 11px;
}

.timeline-toolbar small {
  font-size: 10px;
}

.edit-buttons button {
  height: 32px;
  padding: 0 8px;
  font-size: 10px;
}

.edit-buttons svg {
  width: 13px;
}

.zoom-control b {
  width: 32px;
  font-size: 10px;
}

.timeline-toggle {
  height: 32px;
  font-size: 10px;
}

/* --- timeline-grid --- */
.timeline-grid {
  grid-template-columns: 158px 1fr;
  grid-auto-rows: 42px 54px;
}

.ruler-label {
  padding: 0 10px;
  font-size: 10px;
}

.ruler-label svg {
  width: 14px;
}

.ruler > i span {
  font-size: 9px;
}

.track-row {
  grid-template-columns: 158px 1fr;
}

.track-label {
  padding: 5px 7px;
  grid-template-columns: 32px 1fr auto;
}

.track-label strong {
  font-size: 10px;
}

.track-label small {
  font-size: 9px;
}

.timeline-clip {
  height: 44px;
}

.timeline-clip b {
  font-size: 10px;
}

.timeline-clip small {
  font-size: 9px;
}

/* --- statusbar --- */
.statusbar {
  flex: 0 0 30px;
  height: 30px;
}

.statusbar span {
  padding: 0 10px;
  font-size: 10px;
  letter-spacing: 0.04em;
  gap: 6px;
}

.statusbar i {
  width: 8px;
  height: 8px;
}

/* --- inspector-panel --- */
.inspector-panel .panel-head strong {
  font-size: 15px;
}

.inspector-panel .panel-head small {
  font-size: 11px;
}

.inspector-section > header {
  height: 40px;
  padding: 0 12px;
}

.inspector-section > header strong {
  font-size: 11px;
  letter-spacing: 0.06em;
}

.metadata-grid span {
  font-size: 10px;
}

.metadata-grid b {
  font-size: 10px;
  max-width: 210px;
}

.empty-inspector strong {
  font-size: 12px;
}

.empty-inspector p {
  font-size: 11px;
}

.range-control > span {
  font-size: 10px;
}

.range-control b {
  font-size: 10px;
}

.number-control > span {
  font-size: 10px;
}

.number-control input {
  font-size: 11px;
}

.inline-actions button,
.full-button {
  min-height: 34px;
  font-size: 11px;
}

.segmented {
  height: 36px;
}

.segmented button {
  font-size: 11px;
}

.field-label > span,
.select-control > span,
.color-control > span {
  font-size: 10px;
}

.field-label input,
.field-label textarea {
  padding: 9px 10px;
  font-size: 12px;
}

.select-control select {
  font-size: 11px;
}

.toggle-row strong {
  font-size: 11px;
}

.toggle-row small {
  font-size: 10px;
}

.export-modes b {
  font-size: 11px;
}

.export-modes small {
  font-size: 10px;
}

.engine-head strong {
  font-size: 11px;
}

.engine-head small {
  font-size: 10px;
}

.engine-head > b {
  font-size: 11px;
}

.engine-card > button {
  min-height: 32px;
  font-size: 11px;
}

.export-button {
  min-height: 52px;
  font-size: 12px;
}

.export-note {
  font-size: 11px;
}

@media (max-width: 900px) {
  .media-panel > .active-document {
    display: flex !important;
  }
}

@media (max-width: 560px) {
  .media-panel > .active-document > span,
  .media-panel > .active-document > span::after {
    display: none;
  }
}