.comment{padding:12px;background:var(--color-bg-secondary);border-radius:8px;margin-bottom:8px;transition:background-color 0.3s ease}.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.comment-frame-number{font-size:12px;font-weight:600;color:#9333ea;cursor:pointer;transition:color 0.2s ease}.comment-frame-number:hover{color:#a855f7;text-decoration:underline}.comment-delete-btn{background:transparent;border:none;cursor:pointer;padding:2px 4px;font-size:20px;line-height:1;color:#ef4444;opacity:0.5;transition:opacity 0.2s ease;font-weight:300;-webkit-tap-highlight-color:transparent}.comment-delete-btn:hover{opacity:1}.comment-delete-btn:disabled{cursor:not-allowed;opacity:0.2;font-size:14px}.comment-body{color:var(--color-text-primary);font-size:14px;line-height:1.5;cursor:text;transition:color 0.3s ease;word-wrap:break-word}.comment-edit-textarea{width:100%;padding:8px;border:2px solid var(--color-accent);border-radius:4px;background:var(--color-bg-primary);color:var(--color-text-primary);font-size:14px;font-family:inherit;resize:vertical;min-height:60px}.comment-edit-textarea:focus{outline:none;border-color:var(--color-accent-hover)}.comments__form{margin-top:12px}.comments__input-wrapper{position:relative;width:100%}.comments__form textarea{width:100%;min-height:60px;resize:vertical;background:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-text-secondary);border-radius:8px;padding:10px 50px 10px 10px;font-family:inherit;font-size:14px;transition:border-color 0.3s ease, background-color 0.3s ease;box-sizing:border-box}.comments__form textarea:focus{outline:none;border-color:var(--color-accent)}.comments__form textarea::placeholder{color:var(--color-text-secondary);opacity:0.6}.send-button{position:absolute;right:8px;bottom:8px;background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity 0.2s ease, transform 0.1s ease;padding:0}.send-button:hover{opacity:0.7}.send-button:active{transform:scale(0.9)}.send-icon{width:24px;height:24px;fill:var(--color-text-primary);transition:fill 0.3s ease}.comments__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}.toolbox{display:flex;flex-direction:column;gap:4px}.toolbox-row{display:flex;align-items:center;gap:18px}.tool-selector-spacer{width:50px;flex-shrink:0}.color-palette-spacer{width:calc(4 * 22px + 3 * 14px);flex-shrink:0}.toolbox-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.undo-redo-buttons{display:flex;gap:6px;align-items:flex-start;margin-left:-30px;margin-top:-71px;min-width:54px}.slider-spacer{width:32px;flex-shrink:0}.export-wrapper{display:flex;align-items:flex-start;margin-left:auto;margin-top:-71px}.tool-selector{display:flex;gap:6px;margin-top:-9px}.tool-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:8px;margin:-8px;cursor:pointer;transition:opacity 0.2s;-webkit-tap-highlight-color:transparent;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.tool-button:hover{opacity:0.8}.tool-button:active{opacity:0.85}.tool-icon-shadow{position:absolute;width:50px;height:50px;transform-origin:center center;transform:scaleX(0.85) translate3d(4px, 6px, -1px);-webkit-transform:scaleX(0.85) translate3d(4px, 6px, -1px);transition:transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);top:50%;left:50%;margin-left:-25px;margin-top:-25px;opacity:0.85;-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:blur(6px);-webkit-filter:blur(6px)}.tool-icon{position:relative;width:50px;height:50px;transform-origin:center center;transform:scaleX(0.85) translate3d(0, 0, 1px);-webkit-transform:scaleX(0.85) translate3d(0, 0, 1px);transition:transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-webkit-backface-visibility:hidden;backface-visibility:hidden;isolation:isolate}.tool-button.eraser-mode .tool-icon{transform:scaleX(0.85) translate3d(0, 0, 1px) rotate(180deg);-webkit-transform:scaleX(0.85) translate3d(0, 0, 1px) rotate(180deg)}.color-palette{display:grid;grid-template-columns:repeat(4, 22px);gap:6px 14px;margin-bottom:12px;margin-left:-10px}.color-swatch{width:22px;height:22px;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:all 0.2s;padding:0;box-shadow:none;-webkit-tap-highlight-color:transparent}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 3px currentColor}button.color-swatch[data-color="#FFFFFF"]{box-shadow:0 0 0 1px rgba(0,0,0,0.1)}button.color-swatch.active[data-color="#FFFFFF"]{box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 0 0 2px var(--color-bg-primary),0 0 0 4px #fff,0 0 0 5px rgba(0,0,0,0.1)}button.color-swatch.active[data-color="#FF0000"]{box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 4px red}button.color-swatch.active[data-color="#00FF00"]{box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 4px lime}button.color-swatch.active[data-color="#0000FF"]{box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 4px blue}button.color-swatch.active[data-color="#FFFF00"]{box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 4px #ff0}button.color-swatch.active[data-color="#FF00FF"]{box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 4px #f0f}button.color-swatch.active[data-color="#FFA500"]{box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 4px orange}.custom-color-picker-wrapper{display:inline-block;width:22px;height:22px;position:relative;top:-2px;left:-1px}.custom-color-picker-wrapper.active .custom-color-picker{box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 3px var(--palette-bg, red)}.custom-color-picker{width:22px;height:22px;border:none;border-radius:50%;cursor:pointer;margin:0;padding:0;background:var(--palette-bg, linear-gradient(45deg, red 0%, yellow 17%, lime 33%, cyan 50%, blue 67%, magenta 83%, red 100%));box-shadow:none;-webkit-appearance:none;-moz-appearance:none}.custom-color-picker::-webkit-color-swatch-wrapper{padding:0;margin:0;opacity:0}.custom-color-picker::-webkit-color-swatch{border:none;padding:0;margin:0;opacity:0}.custom-color-picker::-moz-color-swatch{border:none;padding:0;margin:0;opacity:0}.slider-wrapper{position:relative;width:32px;height:56px;margin-top:-13px;margin-left:-10px;display:flex;align-items:center;justify-content:center;padding-bottom:2px;z-index:10;transform:translate3d(0, 0, 0);-webkit-transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.slider-wrapper::before{content:'';position:absolute;top:1px;left:50%;transform:translateX(calc(-50% + 1px));width:20px;height:100%;background:linear-gradient(to bottom, rgba(128,128,128,0.4) 0%, rgba(128,128,128,0.25) 90%, transparent 90%, transparent 100%);border-radius:10px;clip-path:polygon(15% 0%, 85% 0%, 60% 90%, 50% 100%, 50% 90%, 40% 90%);pointer-events:none;z-index:0}input.thickness-slider{-webkit-appearance:none;appearance:none;width:100%;height:100%;outline:none;cursor:pointer;padding:0;position:relative;margin:0;background:transparent;z-index:1}input.thickness-slider.vertical-slider{transform:rotate(90deg) scale(-1, -1);transform-origin:center center;width:54px;height:20px}input.thickness-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:white;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,0.4);transition:transform 0.15s ease;position:relative;z-index:2}input.thickness-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}input.thickness-slider::-webkit-slider-thumb:active{transform:scale(1.05)}input.thickness-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:white;cursor:pointer;border:none;box-shadow:0 3px 6px rgba(0,0,0,0.4);transition:transform 0.15s ease;position:relative;z-index:2}input.thickness-slider::-moz-range-thumb:hover{transform:scale(1.15)}input.thickness-slider::-moz-range-thumb:active{transform:scale(1.05)}input.thickness-slider::-webkit-slider-runnable-track{width:100%;height:20px;background:transparent}input.thickness-slider::-moz-range-track{width:100%;height:20px;background:transparent}button.undo-redo-button{width:24px;height:24px;padding:4px;-webkit-tap-highlight-color:transparent;transition:opacity 0.2s ease, transform 0.1s ease;display:inline-flex;align-items:center;justify-content:center}button.undo-redo-button .icon{width:16px;height:16px}button.undo-redo-button:hover:not(:disabled){transform:scale(1.05)}button.undo-redo-button:active:not(:disabled){transform:scale(0.95)}button.undo-redo-button:disabled{opacity:0.3;cursor:not-allowed;pointer-events:none}button.export-button-compact{background:var(--color-accent);color:var(--tg-theme-button-text-color, #fff);border:none;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500;cursor:pointer;transition:background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap;min-width:60px;width:60px;height:22px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}button.export-button-compact:hover{background:var(--color-accent-hover)}button.export-button-compact:active{transform:scale(0.95);opacity:0.8}.icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;padding:8px;cursor:pointer;transition:background-color 0.2s ease, transform 0.1s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.icon-button:hover{background:var(--color-bg-tertiary)}.icon-button:active{transform:scale(0.95)}.icon-button.hidden{display:none}.icon{width:24px;height:24px;fill:currentColor;color:var(--color-text-primary)}.speed-control{position:relative;display:inline-block}.speed-menu{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;background:var(--color-bg-secondary);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 12px rgba(0,0,0,0.3);z-index:100}.speed-menu.hidden{display:none}.speed-menu button{background:transparent;border:none;color:var(--color-text-primary);padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;text-align:left;white-space:nowrap;transition:background-color 0.2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.speed-menu button:hover{background:var(--color-bg-tertiary)}.speed-menu button.active{background:var(--color-accent);color:var(--tg-theme-button-text-color, #fff)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.player__overlay,.player__preview-overlay{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-x pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}:root{--timeline-height: 40px;--tick-every-frame-color: #e0e0e0;--tick-every-frame-width: 1px;--tick-every-10-color: #aaa;--tick-every-10-width: 2px;--tick-annotated-color: #ff4444;--tick-commented-color: #9333ea;--tick-baked-color: #999999;--tooltip-bg: rgba(0, 0, 0, 0.85);--tooltip-text: #fff}.timeline{position:relative;padding-bottom:20px;background-image:repeating-linear-gradient(to right, var(--tick-every-10-color) 0, var(--tick-every-10-color) var(--tick-every-10-width), transparent var(--tick-every-10-width), transparent calc(100% / var(--total-frames, 100) * 10)),repeating-linear-gradient(to right, var(--tick-every-frame-color) 0, var(--tick-every-frame-color) var(--tick-every-frame-width), transparent var(--tick-every-frame-width), transparent calc(100% / var(--total-frames, 100)));background-size:100% 100%;background-position:0 0}.timeline__frame-label{position:absolute;bottom:0;font-size:11px;color:#9aa7b4;font-variant-numeric:tabular-nums}.timeline__frame-label--start{left:0}.timeline__frame-label--end{right:0}.timeline__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.3)}.timeline__slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 4px rgba(0,0,0,0.3)}.timeline__tick{position:absolute;top:0}.range-tooltip{position:absolute;top:-14px;padding:2px 6px;background:var(--tooltip-bg);color:var(--tooltip-text);border-radius:3px;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:auto;user-select:none;z-index:10;opacity:1;transform:translateX(-50%);cursor:grab;transition:cursor 0.1s ease}.range-tooltip:active{cursor:grabbing}.range-tooltip.visible{opacity:1}.timeline__tick--annotated{position:absolute;width:2px;height:12px;background:var(--tick-annotated-color);top:0;z-index:5;margin-left:-1px}.timeline__tick--commented{position:absolute;width:2px;height:12px;background:var(--tick-commented-color);bottom:0;z-index:5;margin-left:-1px}.timeline__tick--baked{position:absolute;width:2px;height:12px;background:var(--tick-baked-color);top:0;z-index:4;margin-left:-1px;opacity:0.7}:root{--color-bg-primary: #0f1419;--color-bg-secondary: #1e2832;--color-bg-tertiary: #1a232d;--color-text-primary: #f5f7fa;--color-text-secondary: #9aa7b4;--color-accent: #2563eb;--color-accent-hover: #1d4ed8;--color-timeline-marker: #334155;--color-timeline-keyframe: #f97316;--color-timeline-active: #fbbf24;--color-loading-bg: rgba(15, 20, 25, 0.9);--color-spinner-border: rgba(37, 99, 235, 0.3);--color-spinner-top: #2563eb;--color-error-border: rgba(239, 68, 68, 0.3);--color-error-top: #ef4444}body.tg-theme{--color-bg-primary: var(--tg-theme-bg-color, #0f1419);--color-bg-secondary: var(--tg-theme-secondary-bg-color, #1e2832);--color-bg-tertiary: var(--tg-theme-section-bg-color, #1a232d);--color-text-primary: var(--tg-theme-text-color, #f5f7fa);--color-text-secondary: var(--tg-theme-hint-color, #9aa7b4);--color-accent: var(--tg-theme-button-color, #2563eb)}.theme-light body.tg-theme{--color-bg-primary: var(--tg-theme-bg-color, #f5f7fa);--color-bg-secondary: var(--tg-theme-secondary-bg-color, #e5e7eb);--color-bg-tertiary: var(--tg-theme-section-bg-color, #d1d5db);--color-text-primary: var(--tg-theme-text-color, #000000);--color-text-secondary: var(--tg-theme-hint-color, #6b7280);--color-accent: var(--tg-theme-button-color, #2563eb);--color-accent-hover: var(--tg-theme-button-color, #1d4ed8);--color-loading-bg: rgba(255, 255, 255, 0.9);--color-spinner-border: rgba(37, 99, 235, 0.3);--color-spinner-top: #2563eb}body.webapp-body{font-family:"Inter", "Helvetica", sans-serif;background-color:#0f1419;background-color:var(--color-bg-primary);color:#f5f7fa;color:var(--color-text-primary);margin:0;padding:0;transition:background-color 0.3s ease, color 0.3s ease;overflow:hidden;position:fixed;width:100%;height:100vh;overscroll-behavior:none}.review-app{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:4px;height:100vh;padding:16px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.review-app__header{margin-bottom:0;flex-shrink:0}.review-app__title-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.review-app__header h1{font-size:14px;font-weight:500;color:var(--color-text-secondary);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-app__meta{color:var(--color-text-secondary);font-size:11px;opacity:0.7;white-space:nowrap;transition:color 0.3s ease}.player{position:relative;width:100%;background-color:rgba(30,40,50,0.6);background-color:var(--color-bg-secondary);border-radius:8px;overflow:hidden;transition:background-color 0.3s ease;flex-shrink:0;backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 6px rgba(0,0,0,0.1)}.player video,.player canvas{display:block;width:100%;height:auto}.player__background-video{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(0.6);opacity:0;z-index:0;transition:opacity 0.3s ease}.player--portrait .player__background-video{opacity:1}.player.player--portrait{background-color:#000 !important;height:50vh !important;overflow:hidden !important}.player.player--portrait video:not(.player__background-video){height:100% !important;width:auto !important;max-width:100% !important;margin:0 auto !important;object-fit:contain !important;position:relative !important;z-index:1 !important}.player__overlay{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:2}.player--portrait .player__overlay{height:100% !important;width:auto !important;max-width:100% !important;left:0;right:0;margin:0 auto}.player__preview-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;cursor:crosshair;z-index:3}.player__loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(15,20,25,0.9);background-color:var(--color-loading-bg);gap:16px;z-index:10;transition:background-color 0.3s ease}.player__loading p{margin:0;color:var(--color-text-primary);font-size:16px;transition:color 0.3s ease}.spinner{width:48px;height:48px;border:4px solid var(--color-spinner-border);border-top-color:var(--color-spinner-top);border-radius:50%;animation:spin 1s linear infinite}.spinner.error{border-color:var(--color-error-border);border-top-color:var(--color-error-top)}@keyframes spin{to{transform:rotate(360deg)}}.player-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}.controls-separator{width:1px;height:24px;background:var(--color-text-secondary);opacity:0.3;margin:0 8px}.export-button{background:var(--color-accent);color:var(--tg-theme-button-text-color, #fff);border:none;border-radius:4px;padding:8px 12px;cursor:pointer;transition:background-color 0.2s ease, opacity 0.2s ease}.export-button:hover{background:var(--color-accent-hover)}.export-button:active{opacity:0.8}.player-controls__fps input{width:80px}.timeline{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:rgba(26,35,45,0.6);background:var(--color-bg-tertiary);border-radius:6px;min-height:32px;transition:background-color 0.3s ease;flex-shrink:0;backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 6px rgba(0,0,0,0.1)}.timeline__slider{width:100%;accent-color:var(--color-timeline-keyframe)}.timeline__marker{width:12px;height:12px;border-radius:50%;border:none;background:var(--color-timeline-marker);cursor:pointer;transition:background-color 0.2s ease}.timeline__marker--keyframe{background:var(--color-timeline-keyframe)}.timeline__marker--active{box-shadow:0 0 0 2px var(--color-timeline-active)}.annotations{flex-shrink:0;margin-top:8px;margin-bottom:-4px}.annotations .toolbox{display:flex;gap:12px}.comments{background:rgba(26,35,45,0.6);background:var(--color-bg-tertiary);border-radius:8px;padding:12px;transition:background-color 0.3s ease;flex-shrink:0;backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 6px rgba(0,0,0,0.1)}.review-app__footer{display:flex;justify-content:space-between;align-items:center}.export-status{font-size:14px;color:var(--color-text-secondary);transition:color 0.3s ease}@media screen and (orientation: landscape) and (max-height: 500px){.review-app{padding:8px;gap:4px}.review-app__header{display:none}.player{max-height:85vh;min-height:75vh}.player video:not(.player__background-video){object-fit:contain !important;height:100% !important;width:auto !important;max-width:100% !important;margin:0 auto !important;display:block !important}.player__overlay,.player__preview-overlay{height:100% !important;width:auto !important;max-width:100% !important;left:0;right:0;margin:0 auto}.player.player--portrait{height:80vh !important}.player.player--portrait video:not(.player__background-video){object-fit:contain !important}.player-controls{gap:2px;padding:4px 0}.player-controls .icon{width:20px;height:20px}.timeline{padding:4px;min-height:24px}.annotations{margin-top:4px}.comments{padding:8px}.comments__form textarea{min-height:32px;max-height:48px;font-size:13px}}@media screen and (orientation: landscape) and (max-height: 400px){.player{max-height:88vh;min-height:80vh}.player video:not(.player__background-video){object-fit:contain !important;height:100% !important;width:auto !important;max-width:100% !important;margin:0 auto !important;display:block !important}.player__overlay,.player__preview-overlay{height:100% !important;width:auto !important;max-width:100% !important;left:0;right:0;margin:0 auto}.player.player--portrait{height:85vh !important}.player.player--portrait video:not(.player__background-video){object-fit:contain !important}.player-controls .icon{width:18px;height:18px}.timeline{padding:2px;min-height:20px}.comments{padding:6px}.comments__form textarea{min-height:28px;max-height:40px;font-size:12px}}