:root{--gray-900:#202020;--gray-800:#2a2a2a;--gray-700:#333;--gray-600:#3d3d3d;--gray-500:#6b6b6b;--gray-400:#bababa;--gray-100:#fefefe;--blue-500:#4ec2ff;--blue-600:#2fb4f5;--red-500:#ff5c5c;--red-600:#e04848;--green-500:#4cd964;--green-600:#38c172;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--text-sm:14px;--text-md:16px;--text-lg:20px;--text-xl:28px;--text-display:36px;--font-bold:bold;--font-semi-bold:600;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--border-1:1px;--border-5:5px}*{box-sizing:border-box;margin:0%;padding:0%}html,body{width:100%;height:100%}.app{grid-template-rows:60px 1fr;height:100vh;display:grid}.header{background-color:var(--red-500)}.main{grid-template-columns:20% 1fr;height:100%;display:grid;overflow:hidden}.left-sidebar{background:var(--gray-400);flex-direction:column;height:100%;display:flex;overflow:hidden}.images{gap:var(--space-2);height:80%;min-height:0;padding:var(--space-3);flex-direction:column;display:flex;overflow-y:auto}.img{object-fit:cover;cursor:pointer;border-radius:var(--radius-md);width:100%;height:auto;max-height:150px}.img-selected{border:var(--border-5) solid var(--blue-500)}.upload-image{background:var(--green-500);justify-content:center;align-items:center;gap:var(--space-4);height:20%;padding:var(--space-3);flex-direction:column;flex-shrink:0;display:flex}.img-save-btn{background:var(--blue-500);padding:var(--space-3) var(--space-6);cursor:pointer;border-radius:var(--radius-sm);font-size:var(--text-sm);border:none}.upload-handler{align-items:center;gap:var(--space-2);display:flex}.imageInput{width:60%}.header{padding:var(--space-2) var(--space-6);border-bottom:var(--border-1) solid var(--gray-400);justify-content:space-between;display:flex}.header-logo-section{background:var(--gray-100);padding:var(--space-5);border-radius:var(--radius-sm);justify-content:center;align-items:center;display:flex}.start-presentation-section{padding:var(--space-5);justify-content:center;align-items:center;display:flex}.start-presentation-btn,.end-presentation-btn{padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);cursor:pointer;background:var(--blue-500);font-size:var(--text-sm);font-weight:var(--font-semi-bold);color:var(--gray-800);border:none}.start-presentation-btn:hover{background:var(--blue-600)}.select-file-remove{background:var(--red-600)}.presentation-section{background:var(--gray-100);display:flex}button{padding:var(--space-2);border-radius:var(--radius-sm);border:none}button:hover,img:hover{cursor:pointer}.left-arrow{background-color:var(--blue-500);border-radius:var(--radius-sm);flex:5;justify-content:center;align-items:center;display:flex}.image-viewer{flex:90;justify-content:center;align-items:center;max-height:890px;display:flex}.image{object-fit:cover;width:99%;height:99%}.right-arrow{background-color:var(--blue-500);border-radius:var(--radius-sm);flex:5;justify-content:center;align-items:center;display:flex}