:root{--glitch-teal: #14b8a6;--glitch-teal-dark: #0d9488;--glitch-teal-light: #5eead4;--glitch-teal-bg: rgba(20, 184, 166, .15)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0a0a;color:#fff;min-height:100vh;overflow:hidden}#app{height:100vh;display:flex;flex-direction:column}.header{padding:12px 20px;border-bottom:1px solid #1a1a1a}.header h1{font-size:1.25rem;background:linear-gradient(135deg,var(--glitch-teal) 0%,var(--glitch-teal-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.source-options-inline{display:flex;gap:12px}.upload-box-inline{flex:1;display:flex;align-items:center;gap:12px;padding:16px 20px;background:#141414;border:2px solid #333;border-radius:12px;cursor:pointer;transition:all .2s;position:relative}.upload-box-inline input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-box-inline:hover{border-color:#555;background:#1a1a1a}.upload-box-inline.selected{border-color:var(--glitch-teal);background:var(--glitch-teal-bg)}.upload-box-inline svg{color:var(--glitch-teal);flex-shrink:0}.upload-box-inline span{font-size:14px;color:#ccc}.capture-btn-inline{flex:1;display:flex;align-items:center;gap:12px;padding:16px 20px;background:#141414;border:2px solid #333;border-radius:12px;cursor:pointer;transition:all .2s}.capture-btn-inline:hover{border-color:#555;background:#1a1a1a}.capture-btn-inline.selected{border-color:var(--glitch-teal);background:var(--glitch-teal-bg)}.capture-btn-inline svg{color:var(--glitch-teal);flex-shrink:0}.capture-btn-inline span{font-size:14px;color:#ccc}.source-status{font-size:13px;color:var(--glitch-teal);margin-top:4px;min-height:20px}.setup-section{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}.setup-content{width:100%;max-width:480px}.setup-heading{font-size:1.5rem;margin-bottom:32px;text-align:center;background:linear-gradient(135deg,var(--glitch-teal) 0%,var(--glitch-teal-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.setup-form{display:flex;flex-direction:column;gap:24px}.setup-field{display:flex;flex-direction:column;gap:8px}.setup-field label{font-size:14px;color:#999;font-weight:500}.setup-field .optional{color:#555;font-weight:400}.setup-input{padding:14px 16px;background:#141414;border:1px solid #333;border-radius:10px;color:#fff;font-size:16px;transition:border-color .2s}.setup-input:focus{outline:none;border-color:var(--glitch-teal)}.setup-input::placeholder{color:#555}.intro-options{display:flex;gap:12px}.intro-card{flex:1;cursor:pointer}.intro-card input{display:none}.intro-preview{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#141414;border:2px solid #333;border-radius:12px;transition:all .2s}.intro-card:hover .intro-preview{border-color:#555}.intro-card input:checked+.intro-preview{border-color:var(--glitch-teal);background:var(--glitch-teal-bg)}.intro-letter{font-size:24px;font-weight:700;color:var(--glitch-teal)}.intro-desc{font-size:12px;color:#888}.intro-preview-btn{position:absolute;bottom:4px;right:4px;width:20px;height:20px;border-radius:50%;border:none;background:var(--glitch-teal);color:#fff;font-size:8px;cursor:pointer;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center}.intro-card:hover .intro-preview-btn{opacity:.7}.intro-preview-btn:hover{opacity:1!important}.intro-preview{position:relative}.intro-mini-preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000c;border-radius:8px;overflow:visible}.intro-mini-preview svg{width:60px;height:60px;overflow:visible}.setup-actions{display:flex;gap:12px;justify-content:center;margin-top:32px}.setup-actions .btn-primary{padding:14px 28px;font-size:15px}.setup-actions .btn-ghost{padding:14px 20px;font-size:15px}.hint{color:#555;font-size:12px;margin-top:4px}.upload-box,.capture-btn{width:180px;height:150px;border:2px dashed #2a2a2a;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s;background:transparent;color:#888}.upload-box{position:relative}.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-box:hover,.capture-btn:hover{border-color:var(--glitch-teal);color:#fff;background:var(--glitch-teal-bg)}.upload-box p,.capture-btn p{font-size:14px;font-weight:500}.capture-modal{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000}.capture-modal-content{background:#141414;border-radius:12px;padding:20px;max-width:700px;width:90%;text-align:center}.capture-modal-content>p{color:#888;margin-bottom:16px}#capture-preview{width:100%;max-height:350px;background:#000;border-radius:8px;margin-bottom:16px}.capture-actions{display:flex;gap:12px;justify-content:center}.capture-options{display:flex;gap:8px}.area-select-overlay{position:fixed;inset:0;background:#000;z-index:3000;cursor:crosshair}.area-select-overlay video{position:absolute;width:100%;height:100%;object-fit:contain}.area-select-overlay canvas{position:absolute;inset:0;width:100%;height:100%}.area-select-box{position:absolute;border:3px solid var(--glitch-teal);background:#14b8a61a;box-shadow:0 0 0 9999px #000000b3;pointer-events:none}.area-select-instructions{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:16px;background:#000c;padding:12px 20px;border-radius:8px;color:#fff;font-size:14px;z-index:10}.area-confirm-btn{position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:10;padding:12px 32px;font-size:16px}.callout-overlay{position:fixed;inset:0;background:#00000080;z-index:3000;cursor:crosshair}.callout-box{position:absolute;border:3px dashed var(--glitch-teal);background:#14b8a626;pointer-events:none}.callout-instructions{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#1a1a1a;padding:12px 20px;border-radius:8px;display:flex;gap:16px;align-items:center}.callout-indicator{position:fixed;border:3px dashed var(--glitch-teal);background:#14b8a61a;pointer-events:none;z-index:100}.callout-clear{position:absolute;top:-12px;right:-12px;width:24px;height:24px;border-radius:50%;border:none;background:#ef4444;color:#fff;cursor:pointer;pointer-events:auto;font-size:14px;display:flex;align-items:center;justify-content:center}.callout-clear:hover{background:#dc2626}.recording-callout{position:fixed;border:4px solid var(--glitch-teal);box-shadow:0 0 20px var(--glitch-teal),inset 0 0 20px #14b8a61a;pointer-events:none;z-index:2500;animation:calloutGlow 1s ease-in-out infinite alternate}@keyframes calloutGlow{0%{box-shadow:0 0 10px var(--glitch-teal)}to{box-shadow:0 0 25px var(--glitch-teal),0 0 40px #14b8a680}}.recording-callout.fade-out{animation:calloutFadeOut .5s ease-out forwards}@keyframes calloutFadeOut{to{opacity:0}}.callout-glitch{position:fixed;z-index:2600;pointer-events:none}.callout-glitch.flying{animation:calloutGlitchFly .8s ease-out forwards}@keyframes calloutGlitchFly{0%{transform:translate(0) scale(.5);opacity:0}20%{transform:translate(var(--fly-mid-x),var(--fly-mid-y)) scale(1);opacity:1}80%{transform:translate(var(--fly-end-x),var(--fly-end-y)) scale(1);opacity:1}to{transform:translate(calc(var(--fly-end-x) + 100px),calc(var(--fly-end-y) - 50px)) scale(.5);opacity:0}}.btn-primary{padding:10px 20px;background:var(--glitch-teal);border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;font-size:14px}.btn-primary:hover{background:var(--glitch-teal-dark)}.btn-ghost{padding:10px 20px;background:transparent;border:1px solid #333;border-radius:8px;color:#999;cursor:pointer;font-size:14px}.btn-ghost:hover{background:#1a1a1a;color:#fff}.btn-record{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#dc2626;border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;font-size:14px}.btn-record:hover{background:#b91c1c}.record-icon{width:10px;height:10px;background:#fff;border-radius:50%}.btn-stop{padding:8px 16px;background:#333;border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer}.studio{flex:1;display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#111;border-bottom:1px solid #222;gap:8px;transition:opacity .3s,transform .3s;position:relative;z-index:100}.toolbar.auto-hidden{opacity:.1}.toolbar.auto-hidden:hover{opacity:1}.toolbar.force-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:4px}.toolbar-divider{width:1px;height:24px;background:#333;margin:0 6px}.animation-tabs{display:flex;align-items:center;gap:4px}.anim-tab{display:flex;flex-direction:column;align-items:center;padding:6px 12px;background:#1a1a1a;border:1px solid #333;border-radius:6px;cursor:pointer;transition:all .2s;min-width:60px}.anim-tab:hover{background:#222;border-color:var(--glitch-teal)}.anim-tab.active{background:#14b8a626;border-color:var(--glitch-teal)}.anim-letter{font-size:16px;font-weight:700;color:var(--glitch-teal)}.anim-name{font-size:10px;color:#888;margin-top:2px}.anim-tab.active .anim-name{color:var(--glitch-teal)}.title-inputs{display:flex;gap:8px;align-items:center}.toolbar-input{background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:6px 10px;color:#fff;font-size:13px;width:140px}.toolbar-input:focus{outline:none;border-color:var(--glitch-teal)}.toolbar-input-small{width:120px;font-size:12px;color:#888}.toolbar-input::placeholder{color:#555}.page-nav{display:flex;align-items:center;gap:6px}.page-thumbs{display:flex;gap:4px}.page-thumb{width:40px;height:28px;border-radius:4px;border:2px solid #333;overflow:hidden;cursor:pointer;transition:all .15s;position:relative}.page-thumb img{width:100%;height:100%;object-fit:cover}.page-thumb:hover{border-color:#555}.page-thumb.active{border-color:var(--glitch-teal);box-shadow:0 0 0 1px var(--glitch-teal)}.page-thumb .page-num{position:absolute;bottom:1px;right:2px;font-size:9px;color:#fff;text-shadow:0 0 2px #000}.page-thumb .remove-page{position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:#dc2626;border-radius:50%;border:none;color:#fff;font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1}.page-thumb:hover .remove-page{display:flex}.page-thumb .page-type-icon{position:absolute;bottom:1px;left:2px;color:#fff;text-shadow:0 0 2px #000}.add-page-wrapper{position:relative}.add-page-menu{position:absolute;top:100%;left:0;margin-top:4px;background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:4px;z-index:100;min-width:100px}.add-page-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;color:#999;font-size:13px;cursor:pointer;border-radius:4px;transition:all .15s}.add-page-option:hover{background:#252525;color:#fff}.url-modal{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000}.url-modal-content{background:#141414;border-radius:12px;padding:24px;width:400px}.url-modal-content h3{margin-bottom:16px;font-size:18px}.url-modal-content input{width:100%;padding:12px;background:#0a0a0a;border:1px solid #333;border-radius:8px;color:#fff;font-size:14px;margin-bottom:16px}.url-modal-content input:focus{outline:none;border-color:var(--glitch-teal)}.url-modal-actions{display:flex;gap:12px;justify-content:flex-end}.page-video{max-width:100%;max-height:100%;object-fit:contain}.tool-btn{display:flex;align-items:center;gap:6px;padding:6px 8px;background:transparent;border:1px solid transparent;border-radius:6px;color:#888;cursor:pointer;font-size:13px;transition:all .15s}.tool-btn:hover{background:#1a1a1a;color:#fff;border-color:#333}.tool-btn.active{background:var(--glitch-teal-bg);color:#fff;border-color:var(--glitch-teal)}.tool-btn-danger:hover{background:#dc262633;border-color:#dc2626;color:#f87171}.record-status{display:flex;align-items:center;gap:8px;padding:0 12px}.record-dot{width:10px;height:10px;background:#dc2626;border-radius:50%;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}#record-time{font-family:monospace;font-size:14px;color:#fff}.canvas-wrapper{flex:1;display:flex;background:#0a0a0a;overflow:hidden;position:relative;padding:8px 16px 16px;transition:opacity .4s ease-out}.canvas-container{flex:1;position:relative;display:flex;align-items:flex-start;justify-content:center;cursor:crosshair;overflow:hidden;border-radius:12px}.canvas-container img,.canvas-container video{max-width:100%;max-height:100%;object-fit:contain;object-position:top center;user-select:none}.canvas-anim-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a0a,#111,#0a0a0a);z-index:50}.canvas-mascot{width:320px;height:440px;margin-bottom:24px}.canvas-title{display:flex;align-items:center;gap:12px;font-size:28px;color:#fff;opacity:0}.canvas-title-text{font-weight:700;font-size:36px}.canvas-by{color:#666;font-size:20px}.canvas-logo{display:flex;align-items:center;gap:8px}.canvas-logo-icon{width:40px;height:40px;color:var(--glitch-teal)}.canvas-risk{font-weight:700;color:var(--glitch-teal);font-size:28px}.canvas-sense{font-weight:300;color:#888;font-size:28px}@keyframes previewTextPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.canvas-title-slide{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.canvas-title-main{font-size:72px;font-weight:700;color:#fff;margin:0 0 16px;letter-spacing:-1px}.canvas-subtitle{font-size:28px;color:#888;margin:0 0 32px;font-weight:300}.canvas-title-divider{width:0;height:3px;background:var(--glitch-teal);margin-bottom:32px}.canvas-title-divider.animate,.canvas-anim-stage .canvas-title-divider{animation:dividerExpand .5s ease-out forwards}@keyframes dividerExpand{0%{width:0}to{width:120px}}@keyframes titleSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.canvas-logo-large{display:flex;align-items:center;gap:12px}.canvas-logo-icon-lg{width:56px;height:56px;color:var(--glitch-teal)}.canvas-risk-lg{font-size:36px;font-weight:700;color:var(--glitch-teal)}.canvas-sense-lg{font-size:36px;font-weight:300;color:#888}.crop-overlay{position:absolute;top:0;left:0;right:0;height:0;background:#000;z-index:100;pointer-events:none}.crop-inline-label{font-size:12px;color:#666}.crop-slider-inline{width:80px;height:4px;-webkit-appearance:none;background:#333;border-radius:2px;cursor:pointer}.crop-slider-inline::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#14b8a6;border-radius:50%;cursor:pointer}.crop-value-inline{font-size:11px;color:#14b8a6;min-width:24px;pointer-events:none;transition:transform .1s ease-out}.annotations-layer{position:absolute;inset:0;pointer-events:none;overflow:visible}.annotations-layer *{pointer-events:auto}.annotation{cursor:move;transition:filter .15s}.annotation:hover{filter:brightness(1.2)}.annotation.dragging{cursor:grabbing}@keyframes march{to{stroke-dashoffset:-12}}.focus-annotation{fill:none;stroke:var(--glitch-teal);stroke-width:3;stroke-dasharray:8 4;animation:march .5s linear infinite}.webcam-bubble{position:absolute;bottom:20px;right:20px;width:150px;height:150px;border-radius:50%;overflow:hidden;border:3px solid var(--glitch-teal);box-shadow:0 4px 20px #00000080;cursor:move;z-index:100;background:#000}.webcam-bubble video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.intro-preview-modal{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2500;backdrop-filter:blur(8px)}.intro-preview-modal-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}.intro-preview-close{position:absolute;top:-60px;right:-60px;width:48px;height:48px;border-radius:50%;border:2px solid #333;background:#1a1a1a;color:#888;font-size:24px;cursor:pointer;transition:all .2s}.intro-preview-close:hover{border-color:var(--glitch-teal);color:#fff}.intro-preview-stage{width:700px;height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:linear-gradient(135deg,#0a0a0a,#0f172a,#0d1117);border-radius:24px;border:2px solid #222;overflow:visible;padding:50px}.intro-preview-stage svg.preview-mascot{width:200px;height:200px;overflow:visible}.intro-preview-stage .preview-title{display:flex;align-items:center;gap:12px;font-size:36px;font-weight:800;white-space:nowrap}.intro-preview-stage .preview-title-text{background:linear-gradient(135deg,#67e8f9,#22d3ee,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px}.intro-preview-stage .preview-by{font-size:24px;font-weight:400;color:#64748b}.intro-preview-stage .preview-logo{display:inline-flex;align-items:center;gap:8px}.intro-preview-stage .preview-logo-icon{width:32px;height:32px;color:var(--glitch-teal);filter:drop-shadow(0 0 8px rgba(20,184,166,.5))}.intro-preview-stage .preview-risk{font-size:32px;font-weight:700;color:#e2e8f0}.intro-preview-stage .preview-sense{font-size:32px;font-weight:700;background:linear-gradient(135deg,#06b6d4,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.intro-preview-label{font-size:16px;color:#666;letter-spacing:2px;text-transform:uppercase}.replay-modal{position:fixed;inset:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:2000}.replay-content{background:#141414;border-radius:12px;padding:20px;max-width:900px;width:95%}.replay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.replay-header h3{font-size:18px}.replay-video-wrapper{margin-bottom:16px;border-radius:12px;overflow:hidden;background:#000;display:flex;justify-content:center;align-items:center}.replay-content video{width:100%;height:auto;max-height:70vh;display:block;object-fit:contain;margin:0 auto}.crop-controls{display:flex;gap:24px;padding:12px 16px;background:#0a0a0a;border-radius:8px;margin-bottom:16px}.crop-label{display:flex;align-items:center;gap:12px;color:#888;font-size:13px;flex:1}.crop-label input[type=range]{flex:1;accent-color:#06b6d4}.crop-value{color:#06b6d4;font-family:monospace;font-size:12px;min-width:40px}.replay-actions{display:flex;gap:12px;justify-content:center;margin-bottom:16px}.btn-upload{padding:10px 24px;background:linear-gradient(135deg,#06b6d4,#0891b2);border:none;border-radius:8px;color:#fff;font-weight:600;cursor:pointer;font-size:14px;transition:all .15s}.btn-upload:hover{background:linear-gradient(135deg,#22d3ee,#06b6d4);transform:translateY(-1px)}.btn-upload:disabled{opacity:.6;cursor:not-allowed;transform:none}.upload-success{background:#0a0a0a;border-radius:8px;padding:16px;border:1px solid #065f46}.success-msg{color:#10b981;font-weight:500;margin-bottom:16px;text-align:center}.share-links{display:flex;flex-direction:column;gap:12px}.share-link-group label{display:block;font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.share-input-row{display:flex;gap:8px}.share-input-row input{flex:1;padding:10px 12px;background:#141414;border:1px solid #333;border-radius:6px;color:#fff;font-size:12px;font-family:monospace}.btn-copy{padding:10px 16px;background:#1a1a1a;border:1px solid #333;border-radius:6px;color:#999;font-size:12px;cursor:pointer;transition:all .15s}.btn-copy:hover{background:#222;color:#fff}.btn-copy.copied{background:#065f46;border-color:#10b981;color:#10b981}.intro-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#0a0a0a,#0f172a,#0d1117);display:flex;align-items:center;justify-content:center;z-index:3000;opacity:0}.intro-overlay.animate-in{animation:introFadeIn .3s ease-out forwards}.intro-overlay.fade-out{animation:introFadeOut .5s ease-in forwards}@keyframes introFadeIn{0%{opacity:0}to{opacity:1}}@keyframes introFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.15)}}.intro-content{display:flex;flex-direction:column;align-items:center;gap:20px}.glitch-mascot{opacity:0}.glitch-mascot.zig-zag{animation:zigZagSwoosh 1.8s ease-out forwards}@keyframes zigZagSwoosh{0%{opacity:1;transform:translate(-350px) scale(.6)}20%{transform:translate(-150px,-80px) scale(.75)}40%{transform:translate(50px,60px) scale(.85)}60%{transform:translate(150px,-50px) scale(.95)}80%{transform:translate(30px,20px) scale(1.05)}90%{transform:translate(-10px,-10px) scale(1)}to{opacity:1;transform:translate(0) scale(1)}}.glitch-mascot.fizz{animation:fizzIn 1.6s ease-out forwards}@keyframes fizzIn{0%{opacity:0;transform:scale(.2);filter:blur(10px)}10%{opacity:.5;transform:scale(.4) translate(5px,-5px);filter:blur(8px)}20%{transform:scale(.5) translate(-8px,3px);filter:blur(6px)}30%{opacity:.7;transform:scale(.6) translate(6px,-4px);filter:blur(5px)}40%{transform:scale(.7) translate(-4px,6px);filter:blur(4px)}50%{opacity:.85;transform:scale(.8) translate(3px,-3px);filter:blur(3px)}60%{transform:scale(.85) translate(-3px,2px);filter:blur(2px)}70%{transform:scale(.9) translate(2px,-2px);filter:blur(1px)}80%{opacity:.95;transform:scale(.95) translate(-1px,1px);filter:blur(.5px)}90%{transform:scale(1.02) translate(1px);filter:blur(0)}to{opacity:1;transform:scale(1) translate(0);filter:blur(0)}}.cursor-fx-toggle{display:flex;align-items:center;cursor:pointer}.cursor-fx-toggle input{display:none}.cursor-fx-label{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;background:#1a1a1a;border:2px solid #333;color:#666;font-size:11px;font-weight:600;transition:all .15s}.cursor-fx-toggle:hover .cursor-fx-label{border-color:#555;color:#999}.cursor-fx-toggle input:checked+.cursor-fx-label{background:var(--glitch-teal-bg);border-color:var(--glitch-teal);color:var(--glitch-teal)}.live-crop-control{display:flex;align-items:center;gap:8px}.live-crop-control label{display:flex;align-items:center;gap:4px;font-size:12px;color:#666;cursor:default}.live-crop-control input[type=range]{width:80px;height:4px;-webkit-appearance:none;background:#333;border-radius:2px;cursor:pointer}.live-crop-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--glitch-teal);border-radius:50%;cursor:pointer}.live-crop-control .crop-val{font-size:11px;color:#555;min-width:20px}.glitch-mascot.grad-enter{animation:gradEnter .8s ease-out forwards}@keyframes gradEnter{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes gradEnterPreview{0%{opacity:0;transform:translateY(40px) scale(.8)}60%{opacity:1;transform:translateY(-5px) scale(1.05)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes capTossPreview{0%,to{transform:translate(0) rotate(0)}25%{transform:translateY(-20px) rotate(-15deg)}50%{transform:translate(5px,-30px) rotate(-5deg)}75%{transform:translateY(-15px) rotate(10deg)}}@keyframes gradEnterCelebrate{0%{opacity:0;transform:translateY(60px)}20%{opacity:1;transform:translateY(0)}to{opacity:1;transform:translateY(0)}}@keyframes capCelebrate{0%,12%{transform:translate(0) rotate(0)}22%{transform:translate(12px,-100px) rotate(-35deg)}32%{transform:translate(22px,-150px) rotate(-15deg)}42%{transform:translate(18px,-160px) rotate(12deg)}52%{transform:translate(8px,-140px) rotate(28deg)}68%{transform:translate(-5px,-70px) rotate(15deg)}85%{transform:translateY(-12px) rotate(5deg)}to{transform:translate(0) rotate(0)}}@keyframes previewTextPop{0%,15%{opacity:0;transform:translateY(20px) scale(.9)}30%,to{opacity:1;transform:translateY(0) scale(1)}}@keyframes previewTextFade{0%,20%{opacity:0;transform:translateY(10px)}40%,to{opacity:1;transform:translateY(0)}}@keyframes capThrow{0%{transform:translate(60px,15px) rotate(0);opacity:1}20%{transform:translate(70px,-60px) rotate(-30deg);opacity:1}40%{transform:translate(75px,-90px) rotate(-15deg);opacity:1}55%{transform:translate(70px,-75px) rotate(15deg);opacity:1}75%{transform:translate(65px,-30px) rotate(8deg);opacity:1}to{transform:translate(60px,15px) rotate(0);opacity:1}}#flying-cap.throwing{display:block!important;animation:capThrow 1.6s ease-in-out forwards}#grad-cap.landed .tassel-group{animation:tasselSwing .8s ease-out}@keyframes tasselSwing{0%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}90%{transform:rotate(-1deg)}to{transform:rotate(0)}}.intro-text{display:flex;align-items:center;gap:16px;font-size:64px;font-weight:800;background:linear-gradient(135deg,#67e8f9,#22d3ee,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0;transform:translateY(30px) scale(.9);letter-spacing:-1px;white-space:nowrap}.intro-text.animate{animation:textPop .4s cubic-bezier(.34,1.56,.64,1) forwards}.intro-by{font-size:40px;font-weight:400;background:none;-webkit-text-fill-color:#64748b;letter-spacing:0}.intro-logo{display:inline-flex;align-items:center;gap:12px;background:none;-webkit-text-fill-color:initial}.intro-logo-icon{width:56px;height:56px;color:var(--glitch-teal);filter:drop-shadow(0 0 12px rgba(20,184,166,.6))}.intro-risk{font-size:56px;font-weight:700;color:#e2e8f0;letter-spacing:1px}.intro-sense{font-size:56px;font-weight:700;background:linear-gradient(135deg,#06b6d4,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px}.intro-subtext{font-size:36px;color:#94a3b8;letter-spacing:1px;opacity:0;transform:translateY(15px)}.intro-subtext.animate{animation:textFadeUp .4s ease-out forwards}@keyframes textPop{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes textFadeUp{to{opacity:1;transform:translateY(0)}}.tool-btn-glitch{border-color:transparent}.tool-btn-glitch:hover{background:var(--glitch-teal-bg);border-color:var(--glitch-teal)}.tool-btn-callout{background:transparent;border:2px solid #444}.tool-btn-callout:hover{background:var(--glitch-teal-bg);border-color:var(--glitch-teal)}.tool-btn-callout.active{background:var(--glitch-teal-bg);border-color:var(--glitch-teal);box-shadow:0 0 8px var(--glitch-teal)}.flying-glitch{position:fixed;z-index:200;pointer-events:none;opacity:0;display:none}.flying-glitch.bonking{display:block;animation:glitchFlyBonk .6s ease-in forwards}@keyframes glitchFlyBonk{0%{opacity:1;transform:translate(0) rotate(0) scale(.5)}40%{opacity:1;transform:translate(var(--bonk-x),var(--bonk-y)) rotate(360deg) scale(1.2)}50%{transform:translate(var(--bonk-x),var(--bonk-y)) rotate(380deg) scale(1)}to{opacity:0;transform:translate(calc(var(--bonk-x) + 100px),calc(var(--bonk-y) - 50px)) rotate(720deg) scale(.3)}}.webcam-bubble.bonked{animation:bubbleBonked 1.2s ease-out forwards}@keyframes bubbleBonked{0%{transform:translate(0) rotate(0)}10%{transform:translate(-30px,-20px) rotate(-15deg)}20%{transform:translate(50px,-40px) rotate(20deg)}30%{transform:translate(-40px,30px) rotate(-25deg)}40%{transform:translate(30px,-25px) rotate(15deg)}50%{transform:translate(-25px,20px) rotate(-12deg)}60%{transform:translate(20px,-15px) rotate(10deg)}70%{transform:translate(-15px,10px) rotate(-8deg)}80%{transform:translate(10px,-8px) rotate(5deg)}90%{transform:translate(-5px,5px) rotate(-3deg)}to{transform:translate(0) rotate(0)}}.flying-glitch.bonk-exit{animation:glitchBonkExit .5s ease-in forwards}@keyframes glitchBonkExit{0%{transform:translate(var(--bonk-x),var(--bonk-y)) scale(1);opacity:1}to{transform:translate(calc(var(--bonk-x) + 200px),calc(var(--bonk-y) + 200px)) scale(.5);opacity:0}}.cursor-highlight{position:fixed;width:40px;height:40px;border-radius:50%;pointer-events:none;z-index:150;opacity:0;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(20,184,166,.4) 0%,rgba(20,184,166,.15) 40%,transparent 70%);box-shadow:0 0 20px #14b8a680,0 0 40px #14b8a64d;transition:opacity .2s ease}.cursor-highlight.active{opacity:1}.click-ripple{position:fixed;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:151;opacity:0;transform:translate(-50%,-50%) scale(0);border:3px solid var(--glitch-teal);background:transparent}.click-ripple.ping{animation:clickPing .6s ease-out forwards}@keyframes clickPing{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}50%{opacity:.8}to{opacity:0;transform:translate(-50%,-50%) scale(6)}}.click-dot{position:fixed;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:149;background:var(--glitch-teal);transform:translate(-50%,-50%) scale(0);opacity:0}.click-dot.pop{animation:clickDotPop .4s ease-out forwards}@keyframes clickDotPop{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}40%{transform:translate(-50%,-50%) scale(1.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.title-slide{position:fixed;inset:0;background:linear-gradient(135deg,#0a0a0a,#0c1929,#0d1117);display:flex;align-items:center;justify-content:center;z-index:3100;opacity:0}.title-slide.animate-in{animation:titleSlideIn .4s ease-out forwards}.title-slide.fade-out{animation:titleSlideFadeOut .4s ease-in forwards}@keyframes titleSlideIn{0%{opacity:0}to{opacity:1}}@keyframes titleSlideFadeOut{0%{opacity:1}to{opacity:0}}.title-slide-content{display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center;padding:60px}.title-slide-logo{display:flex;align-items:center;gap:16px;font-size:40px;font-weight:700;letter-spacing:1px;opacity:0;transform:translateY(20px)}.title-slide-logo.animate{animation:logoFadeUp .4s ease-out forwards}.logo-icon{color:var(--glitch-teal);filter:drop-shadow(0 0 12px rgba(20,184,166,.6))}@keyframes logoFadeUp{to{opacity:1;transform:translateY(0)}}.logo-risk{color:#e2e8f0}.logo-sense{background:linear-gradient(135deg,#06b6d4,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-slide-divider{width:100px;height:2px;background:linear-gradient(90deg,transparent,var(--glitch-teal),transparent);opacity:0}.title-slide-divider.animate{animation:dividerExpand .5s ease-out forwards}@keyframes dividerExpand{0%{opacity:0;width:0}to{opacity:.6;width:160px}}.title-slide-title{font-size:120px;font-weight:800;background:linear-gradient(135deg,#06b6d4,#22d3ee,#67e8f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-3px;opacity:0;transform:translateY(40px) scale(.9);text-shadow:0 0 80px rgba(6,182,212,.3)}.title-slide-title.animate{animation:titlePop .5s cubic-bezier(.34,1.56,.64,1) forwards}.title-slide-subtitle{font-size:48px;font-weight:500;color:#f59e0b;letter-spacing:2px;opacity:0;transform:translateY(15px)}.title-slide-subtitle.animate{animation:subtitleFadeUp .4s ease-out forwards}@keyframes titlePop{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes subtitleFadeUp{to{opacity:1;transform:translateY(0)}}.title-page{position:absolute;inset:0;background:linear-gradient(135deg,#0a0a0a,#0c1929,#0d1117);display:flex;align-items:center;justify-content:center;z-index:1}.title-page-content{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;padding:40px}.title-page-logo{display:flex;align-items:center;gap:12px;font-size:32px;font-weight:700;letter-spacing:1px}.title-page-logo .logo-icon{color:var(--glitch-teal);filter:drop-shadow(0 0 12px rgba(20,184,166,.6))}.title-page-logo .logo-risk{color:#e2e8f0}.title-page-logo .logo-sense{background:linear-gradient(135deg,#06b6d4,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-page-divider{width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--glitch-teal),transparent);opacity:.6}.title-page-title{font-size:72px;font-weight:800;background:linear-gradient(135deg,#06b6d4,#22d3ee,#67e8f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-2px;line-height:1.1;white-space:nowrap}.title-page-subtitle{font-size:28px;font-weight:500;color:#f59e0b;letter-spacing:1px}.hidden{display:none!important}