.section{border:1px solid var(--scale-light-gray);border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.04);background-color:white}.mappings-container{padding:0;overflow:hidden}.mappings-container h3{padding:20px 0 10px 20px;margin:0}@media (max-width:500px){.upload-group label{display:block;margin-bottom:5px}.file-input-label{min-height:80px;border-width:1px}.file-input-label svg{width:20px;height:20px}}.full-width{grid-column:1/-1}.upload-section{border:1px solid var(--scale-light-gray);border-radius:12px;padding:25px;background-color:white;box-shadow:0 2px 8px rgba(0,0,0,.04)}.preview-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.preview-section{margin-bottom:0}@media (max-width:768px){.preview-container{grid-template-columns:1fr}}.compact-layout{display:grid;grid-template-columns:1fr 1fr;gap:15px}@media (max-width:768px){.compact-layout{grid-template-columns:1fr}}.video-container{max-height:300px}.video-player{max-height:250px}.keylog-list{max-height:200px}h3{margin-bottom:10px}.keylog-list td,.keylog-list th{padding:6px 10px;font-size:14px}.demo-note{font-style:italic;color:#666;font-size:14px;margin-top:8px;text-align:center}:root{--scale-orange:#ff9966;--scale-pink:#ff5e85;--scale-magenta:#d74dbd;--scale-purple:#9a4eec;--scale-light:#f8f9fc;--scale-dark:#242639;--scale-gray:#6e7191;--scale-light-gray:#e4e6f1}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:0;background-color:var(--scale-light);color:var(--scale-dark)}.App{max-width:1200px;margin:0 auto;padding:15px}.App-header{background:linear-gradient(to right,var(--scale-orange),var(--scale-pink),var(--scale-magenta),var(--scale-purple));color:white;padding:15px 20px;border-radius:12px 12px 0 0;margin-bottom:15px;box-shadow:0 4px 12px rgba(0,0,0,.1)}@media (max-width:50%){.App{padding:8px}.App-header{padding:10px 15px}}main{background-color:white;padding:20px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.08)}@media (max-width:768px){main{padding:15px}}h1{margin:0;font-weight:600}h1,h2{font-size:22px}h2{margin-bottom:18px}h2,h3{color:var(--scale-dark)}h3{margin-bottom:12px;font-size:16px;font-weight:600}.button-container{display:flex;gap:12px;margin-top:20px;justify-content:center}.delete-button,.primary-button,.secondary-button{padding:10px 20px;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease}button:disabled,button[disabled]{cursor:not-allowed}.primary-button{background:var(--scale-purple);color:white;box-shadow:0 4px 8px rgba(154,78,236,.2)}.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(154,78,236,.3)}.secondary-button{background-color:white;color:var(--scale-purple);border:1px solid var(--scale-light-gray)}.secondary-button:hover{background-color:var(--scale-light)}.delete-button{background-color:#fff1f0;color:#ff4d4f;padding:4px 8px;font-size:12px;border-radius:4px}.delete-button:hover{background-color:#ffccc7}.home-container{text-align:center;padding:40px 0}.attempt-container{display:flex;flex-direction:column;gap:15px}.section{margin-bottom:15px;border:1px solid #eee;border-radius:8px;padding:15px;box-shadow:0 2px 5px rgba(0,0,0,.05)}.mappings-list{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.mapping-item{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background-color:#f9f9f9;border-radius:4px;margin-right:8px;margin-bottom:8px}.key-combo{display:flex;align-items:center;width:100px;min-width:100px;margin-right:12px}.key{background:linear-gradient(to right,var(--scale-magenta),var(--scale-purple));color:white;padding:3px 6px;border-radius:4px;font-family:monospace;font-weight:700;font-size:12px}.key,.key-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:4px}.key-icon{font-size:14px}.key-plus{margin:0 2px;font-weight:400}.key-arrow,.key-plus{color:var(--scale-gray)}.key-arrow{margin:0 8px}.action{font-weight:500;color:var(--scale-dark)}.add-mapping{display:flex}.input-group{display:flex;flex-direction:column;gap:6px}.input-group label{font-size:14px;color:var(--scale-gray);font-weight:500}.input-group input,.input-group select{padding:10px 12px;border:1px solid var(--scale-light-gray);border-radius:8px;font-size:15px;transition:border-color .2s ease,box-shadow .2s ease}.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--scale-purple);box-shadow:0 0 0 3px rgba(154,78,236,.1)}.file-upload{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width:768px){.file-upload{grid-template-columns:1fr;gap:15px}}.upload-group{display:flex;flex-direction:column;gap:8px}.file-input-container{position:relative}.file-input-label{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed var(--scale-light-gray);border-radius:8px;padding:15px;text-align:center;cursor:pointer;transition:all .2s ease;background-color:white;min-height:100px}.file-input-label span{max-width:180px;text-align:center}@media (max-width:600px){.file-input-label{min-height:100px;padding:10px}.file-input-label span{font-size:14px}}.file-input-label:hover{border-color:var(--scale-purple);background-color:rgba(154,78,236,.05)}.file-input-label span{margin-top:8px;color:var(--scale-gray)}.file-input-container input[type=file]{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1}.file-info{font-size:14px;color:var(--scale-gray);margin:5px 0 0;display:flex;align-items:center;gap:6px}.file-info .delete-button{margin-left:auto;background-color:#fff1f0;color:#ff4d4f;padding:2px 8px;font-size:12px;border-radius:4px;border:1px solid #ffccc7}.review-container{display:flex;flex-direction:column;gap:30px}.review-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:20px}.video-section{grid-column:1/3}.video-container{margin-top:15px;border:1px solid #ddd;border-radius:4px;overflow:hidden}.video-player{width:100%;display:block}.keylog-list{margin-top:15px;max-height:300px;overflow-y:auto}.keylog-list table{width:100%;border-collapse:collapse}.keylog-list td,.keylog-list th{padding:8px 12px;text-align:left;border-bottom:1px solid #eee}.keylog-list th{background-color:#f5f5f5;font-weight:500}.no-content{color:#999;font-style:italic}@media (max-width:768px){.add-mapping,.file-upload,.review-content{grid-template-columns:1fr}.video-section{grid-column:1}}.dual-column-mappings{display:flex;width:100%;gap:20px}.dual-column-mappings .mappings-table{flex:1;border-collapse:collapse}.dual-column-mappings .action-cell{width:60%;font-weight:500;color:var(--scale-dark);padding-left:20px;padding-top:12px;padding-bottom:12px}.dual-column-mappings .key-cell{width:40%;text-align:right;padding-right:15px;padding-top:12px;padding-bottom:12px}.dual-column-mappings .mappings-table tr{height:48px;border-bottom:1px solid #e4e6f1}.dual-column-mappings .mappings-table tr:last-child{border-bottom:none}@media (max-width:768px){.dual-column-mappings{flex-direction:column}}.dual-column-mappings .key-group{display:flex;justify-content:flex-end;align-items:center}.dual-column-mappings .key{display:inline-block;background-color:#bf5af2;color:white;padding:6px 10px;border-radius:6px;font-family:monospace;font-weight:700;font-size:14px;min-width:24px;text-align:center;line-height:20px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.video-annotation-container{display:flex;flex-direction:column;color:#1e293b;min-height:100vh;padding:1.5rem;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.header{margin-bottom:1.5rem;display:flex;justify-content:center}.app-title{font-size:2.25rem;font-weight:700;background:linear-gradient(90deg,#f97316,#ec4899,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}.video-preview{position:relative;width:100%;aspect-ratio:16/9;background-color:black;border-radius:.5rem;margin-bottom:1rem;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.video-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.video-element{width:100%;height:100%;object-fit:contain;background-color:black;cursor:pointer}.video-placeholder-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#e2e8f0}.video-placeholder{width:100%;height:100%;object-fit:cover;opacity:.5}.video-placeholder-message{position:absolute;color:#475569;font-size:1.25rem;background-color:rgba(255,255,255,.8);padding:.5rem 1rem;border-radius:.5rem}.video-timestamp{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.5);padding:.25rem .75rem;border-radius:9999px;font-size:.875rem;color:white}.controls-bar{justify-content:space-between;background-color:#e2e8f0;padding:.75rem;border-radius:.5rem;margin-bottom:1rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}.controls-bar,.playback-controls{display:flex;align-items:center}.playback-controls button{margin-right:.75rem}.playback-button{padding:.5rem;background-color:#9333ea;border-radius:9999px;transition:background-color .3s;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:white}.playback-button:hover{background-color:#7e22ce}.skip-button{padding:.5rem;background-color:#cbd5e1;color:#334155;border-radius:9999px;transition:background-color .3s;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.skip-button:hover{background-color:#94a3b8}.additional-controls,.speed-control{display:flex;align-items:center}.speed-control,.speed-label{margin-right:.5rem}.speed-label,.speed-select{font-size:.875rem}.speed-select{background-color:#f1f5f9;border:1px solid #cbd5e1;border-radius:.25rem;padding:.25rem .5rem;color:#334155}.new-label-button{margin-left:1rem;display:flex;align-items:center;padding:.25rem .75rem;background-color:#db2777;border-radius:.25rem;transition:background-color .3s;border:none;cursor:pointer;color:white}.new-label-button:hover{background-color:#be185d}.button-icon{margin-right:.25rem}.save-button{margin-left:.5rem;padding:.25rem .75rem;background:linear-gradient(90deg,#f97316,#a855f7);border-radius:.25rem;transition:opacity .3s;border:none;cursor:pointer;display:flex;align-items:center;color:white}.save-button:hover{opacity:.9}.timeline-container{margin-bottom:1.5rem}.timeline{position:relative;height:3rem;background-color:#f1f5f9;border-radius:.5rem;cursor:pointer;border:1px solid #cbd5e1;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}.timeline-annotation{position:absolute;height:100%;top:0;border-radius:.25rem;opacity:.7;box-shadow:0 1px 2px rgba(0,0,0,.1)}.timeline-annotation-active{opacity:1;box-shadow:0 0 0 2px white,0 1px 3px rgba(0,0,0,.2)}.annotation-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.75rem;padding:.25rem;font-weight:500;color:white;text-shadow:0 0 2px rgba(0,0,0,.5)}.resize-handle{position:absolute;top:0;height:100%;width:6px;opacity:0;transition:opacity .2s ease}.resize-handle-left{left:0;cursor:w-resize;background:linear-gradient(90deg,rgba(255,255,255,.7),transparent);border-top-left-radius:4px;border-bottom-left-radius:4px}.resize-handle-left,.resize-handle-right{position:absolute;top:0;width:.5rem;height:100%}.resize-handle-right{right:0;cursor:e-resize;background:linear-gradient(270deg,rgba(255,255,255,.7),transparent);border-top-right-radius:4px;border-bottom-right-radius:4px}.timeline-annotation:hover .resize-handle{opacity:1}.drag-preview{position:absolute;height:100%;top:0;border-radius:.25rem;opacity:.7}.timeline-tick{position:absolute;height:5px;width:1px;background-color:rgba(0,0,0,.2);bottom:0}.playhead{position:absolute;height:100%;width:2px;background-color:#475569;top:0;z-index:2}.playhead-handle{width:.75rem;height:.75rem;border-radius:9999px;background-color:#475569;margin-left:-.25rem;margin-top:-.25rem}.timeline-markers{display:flex;justify-content:space-between;margin-top:.25rem;font-size:.75rem;color:#64748b}.panels-container{display:flex}.labels-panel{width:25%;background-color:#f1f5f9;padding:1rem;border-radius:.5rem;margin-right:1rem;border:1px solid #e2e8f0}.panel-heading{font-weight:500;margin-bottom:1rem;display:flex;align-items:center;color:#334155}.heading-icon{margin-right:.5rem}.instructions-box{background-color:rgba(219,39,119,.1);padding:.75rem;border-radius:.25rem;margin-bottom:1rem;font-size:.875rem;border:1px solid rgba(219,39,119,.2)}.instructions-title{margin-bottom:.5rem;font-weight:500;color:#db2777}.instructions-list{list-style-type:decimal;padding-left:1.25rem;color:#475569}.instructions-list li{margin-top:.25rem;margin-bottom:.25rem}.labels-list{display:flex;flex-direction:column}.labels-list>div{margin-top:.5rem;margin-bottom:.5rem}.label-option{display:flex;align-items:center;padding:.5rem;border-radius:.25rem;transition:background-color .3s;cursor:pointer}.label-option-active,.label-option:hover{background-color:#e2e8f0}.label-option-active{box-shadow:0 0 0 1px #c084fc}.label-color{width:1rem;height:1rem;border-radius:9999px;margin-right:.5rem;box-shadow:0 1px 2px rgba(0,0,0,.1)}.annotations-panel{flex:1;background-color:#f1f5f9;padding:1rem;border-radius:.5rem;border:1px solid #e2e8f0}.empty-annotations{color:#64748b;font-style:italic}.annotations-list{display:flex;flex-direction:column}.annotations-list>div{margin-top:.75rem;margin-bottom:.75rem}.annotation-item{padding:.75rem;border-radius:.5rem;transition:background-color .3s;border:1px solid #e2e8f0}.annotation-item-active,.annotation-item:hover{background-color:#e2e8f0}.annotation-item-active{border-color:#cbd5e1}.annotation-item-inactive{background-color:#f8fafc}.annotation-header{justify-content:space-between}.annotation-header,.annotation-label-info{display:flex;align-items:center}.delete-button{color:#64748b;transition:color .3s;background:none;border:none;cursor:pointer}.delete-button:hover{color:#ef4444}.annotation-details{margin-top:.75rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.time-control{width:100%}.time-control-header{display:flex;justify-content:space-between}.time-label{display:block;margin-bottom:.25rem}.time-label,.time-value{font-size:.75rem;color:#64748b}.time-slider{width:100%;-webkit-appearance:none;height:6px;background:#e2e8f0;border-radius:3px;outline:none}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#9333ea;cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,.2)}.time-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#9333ea;cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,.2)}.label-control{grid-column:span 2}.label-select{background-color:#f8fafc;border-radius:.25rem;padding:.25rem .5rem;width:100%;border:1px solid #cbd5e1;color:#334155}.modal-overlay{position:fixed;inset:0;background-color:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:50}.modal{background-color:white;padding:1.5rem;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);width:24rem}.modal-title{font-weight:500;color:#334155}.modal-field,.modal-title{margin-bottom:1rem}.modal-label{display:block;font-size:.875rem;color:#475569;margin-bottom:.25rem}.modal-input{background-color:#f8fafc;border-radius:.25rem;padding:.5rem .75rem;width:100%;border:1px solid #cbd5e1;color:#334155}.colors-container{display:flex;margin-bottom:1.5rem}.colors-container>div{margin-right:.5rem}.color-option{width:2rem;height:2rem;border-radius:9999px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1)}.color-option-active{box-shadow:0 0 0 2px white,0 0 0 4px #9333ea}.modal-actions{display:flex;justify-content:flex-end}.modal-actions>button{margin-left:.75rem}.cancel-button{padding:.5rem 1rem;background-color:#f1f5f9;border-radius:.25rem;transition:background-color .3s;border:1px solid #cbd5e1;cursor:pointer;color:#475569}.cancel-button:hover{background-color:#e2e8f0}.create-button{padding:.5rem 1rem;background:linear-gradient(90deg,#f97316,#ec4899,#a855f7);border-radius:.25rem;transition:opacity .3s;border:none;cursor:pointer;color:white}.create-button:hover{opacity:.9}@media (max-width:768px){.panels-container{flex-direction:column}.labels-panel{width:100%;margin-right:0;margin-bottom:1rem}.controls-bar{flex-direction:column}.additional-controls{margin-top:1rem}.annotation-details{grid-template-columns:1fr}.label-control{grid-column:span 1}}.control-button{position:relative;overflow:hidden;transition:all .3s ease}.control-button:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:rgba(255,255,255,.2);border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease}.control-button:active:after{transform:translate(-50%,-50%) scale(2)}