:root{--color-primary: #60ffff;--color-bg-dark: #120a17;--color-bg-secondary: #1a0f20;--color-text: #ede2d1;--color-text-muted: #b8ad9c;--color-danger: #fc0003;--color-warning: #eccb0d;--color-success: #0bfe78;--color-neon-red: #fc0003;--color-neon-yellow: #eccb0d;--color-neon-green: #0bfe78;--color-neon-cyan: #60ffff;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.25rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--color-bg-dark);color:var(--color-text);min-height:100vh;padding:0rem;font-size:16px;line-height:1.4;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#80ffff 0px,#80ffff 80px,#120a17 80px,#120a17 120px,#2aff98 120px,#2aff98 200px,#120a17 200px,#120a17 240px,#ffdc3d 240px,#ffdc3d 320px,#120a17 320px,#120a17 360px,#ff3333 360px,#ff3333 440px,#120a17 440px);pointer-events:none;z-index:0}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,transparent 0px,transparent 20px,rgba(128,255,255,.8) 40px,rgba(128,255,255,0) 80px,transparent 120px,transparent 140px,rgba(42,255,152,.8) 160px,rgba(42,255,152,0) 200px,transparent 240px,transparent 260px,rgba(255,220,61,.8) 280px,rgba(255,220,61,0) 320px,transparent 360px,transparent 380px,rgba(255,51,51,.8) 400px,rgba(255,51,51,0) 440px,transparent 440px);filter:blur(30px);pointer-events:none;z-index:1}@media (max-width: 40em){body:before{background:linear-gradient(135deg,#80ffff 0px,#80ffff 40px,#120a17 40px,#120a17 60px,#2aff98 60px,#2aff98 100px,#120a17 100px,#120a17 120px,#ffdc3d 120px,#ffdc3d 160px,#120a17 160px,#120a17 180px,#ff3333 180px,#ff3333 220px,#120a17 220px)}body:after{background:linear-gradient(135deg,transparent 0px,transparent 10px,rgba(128,255,255,.8) 20px,rgba(128,255,255,0) 40px,transparent 60px,transparent 70px,rgba(42,255,152,.8) 80px,rgba(42,255,152,0) 100px,transparent 120px,transparent 130px,rgba(255,220,61,.8) 140px,rgba(255,220,61,0) 160px,transparent 180px,transparent 190px,rgba(255,51,51,.8) 200px,rgba(255,51,51,0) 220px,transparent 220px);filter:blur(20px)}}#root{max-width:1200px;margin:0 auto;position:relative;z-index:10}h1{text-align:center;margin-bottom:.75rem;color:var(--color-text);text-shadow:2px 2px 0px rgba(18,10,23,.9),-2px -2px 0px rgba(18,10,23,.9),2px -2px 0px rgba(18,10,23,.9),-2px 2px 0px rgba(18,10,23,.9),0 2px 0px rgba(18,10,23,.9),0 -2px 0px rgba(18,10,23,.9),2px 0 0px rgba(18,10,23,.9),-2px 0 0px rgba(18,10,23,.9),0 0 20px rgba(96,255,255,.6);font-size:1.5rem;font-weight:700;letter-spacing:.5px;transition:all .3s ease;cursor:pointer;-webkit-text-stroke:1.5px rgba(18,10,23,.8);paint-order:stroke fill}h1:hover{text-shadow:2px 2px 0px rgba(18,10,23,.9),-2px -2px 0px rgba(18,10,23,.9),2px -2px 0px rgba(18,10,23,.9),-2px 2px 0px rgba(18,10,23,.9),0 2px 0px rgba(18,10,23,.9),0 -2px 0px rgba(18,10,23,.9),2px 0 0px rgba(18,10,23,.9),-2px 0 0px rgba(18,10,23,.9),0 0 25px rgba(96,255,255,.8);transform:scale(1.02)}h2{margin-top:.75rem;margin-bottom:.5rem;color:var(--color-text);font-size:1.125rem;font-weight:600;text-shadow:0 0 10px rgba(96,255,255,.4);border-bottom:2px solid rgba(96,255,255,.3);padding-bottom:.25rem}.calculator{background:rgba(18,10,23,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:.25rem;box-shadow:0 8px 32px #0009;border:2px solid rgba(96,255,255,.3)}.section{margin-bottom:.75rem;background:rgba(26,15,32,.9);padding:.625rem;border-radius:var(--radius-md);border:2px solid rgba(96,255,255,.3);transition:all .3s ease}.section:hover{background:rgba(26,15,32,.95);border-color:#60ffff80;box-shadow:0 0 20px #60ffff33}.input-group{margin-bottom:.625rem}label{display:block;margin-bottom:.25rem;color:var(--color-text-muted);font-weight:600;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase}select,input[type=number],input[type=text]{width:100%;padding:.625rem;background:rgba(18,10,23,.9);border:2px solid rgba(96,255,255,.4);border-radius:var(--radius-sm);color:var(--color-text);font-size:.875rem;transition:all .3s ease;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}select:focus,input[type=number]:focus,input[type=text]:focus{outline:none;border-color:var(--color-neon-cyan);background:rgba(18,10,23,.95);box-shadow:0 0 15px #60ffff80}select:hover{border-color:var(--color-neon-cyan);background:rgba(18,10,23,.95)}select option{background:var(--color-bg-dark);color:var(--color-text)}.image-select-wrapper{position:relative;display:flex;align-items:center;gap:.5rem}.image-select-wrapper select{flex:1}.image-select-preview{width:40px;height:40px;min-width:40px;border:2px solid rgba(96,255,255,.3);border-radius:var(--radius-sm);background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;overflow:hidden}.image-select-preview img{width:100%;height:100%;object-fit:contain;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.image-select-preview:empty{display:none}.custom-image-select{position:relative;width:100%;z-index:10}.custom-image-select-trigger{width:100%;padding:.625rem;background:rgba(18,10,23,.9);border:2px solid rgba(96,255,255,.4);border-radius:var(--radius-sm);color:var(--color-text);font-size:.875rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .3s ease;min-height:40px}.custom-image-select-trigger:hover{border-color:var(--color-neon-cyan);background:rgba(18,10,23,.95);box-shadow:0 0 10px #60ffff4d}.custom-select-selected{display:flex;align-items:center;gap:.5rem;flex:1}.custom-select-selected img,.custom-select-option img{width:32px;height:32px;object-fit:contain;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;flex-shrink:0}.custom-select-placeholder{color:var(--color-text-muted)}.custom-select-arrow{color:var(--color-neon-cyan);font-size:.75rem;margin-left:.5rem;transition:transform .3s ease}.custom-image-select-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:rgba(18,10,23,.98);border:2px solid rgba(96,255,255,.5);border-radius:var(--radius-sm);max-height:300px;overflow-y:auto;z-index:10000;box-shadow:0 8px 32px #000c,0 0 20px #60ffff4d}.custom-select-option{padding:.625rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease;border-bottom:1px solid rgba(255,255,255,.1)}.custom-select-option:last-child{border-bottom:none}.custom-select-option:hover{background:rgba(96,255,255,.2)}.custom-select-option.selected{background:rgba(96,255,255,.15);color:var(--color-neon-cyan)}.custom-select-option span{flex:1}button{background:linear-gradient(135deg,var(--color-neon-cyan) 0%,#00d4cc 100%);color:var(--color-bg-dark);border:none;padding:.25rem .75rem;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #60ffff4d;position:relative;overflow:hidden;min-height:40px;touch-action:manipulation}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}button:hover:before{left:100%}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #60ffff80;background:linear-gradient(135deg,#80ffff 0%,#20e8e0 100%)}button:active{transform:translateY(0);box-shadow:0 2px 10px #60ffff66}.results{background:rgba(96,255,255,.1);border:2px solid var(--color-neon-cyan);border-radius:var(--radius-md);padding:.625rem;margin-top:.75rem}.result-item{background:rgba(0,0,0,.3);padding:.5rem;border-radius:var(--radius-sm);margin-bottom:.5rem;border-left:4px solid var(--color-neon-green)}.result-item:last-child{margin-bottom:0}input[type=range]{width:100%;height:8px;background:rgba(255,255,255,.1);border-radius:var(--radius-sm);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:var(--spacing-sm) 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;background:var(--color-neon-cyan);border-radius:50%;cursor:pointer;box-shadow:0 0 10px #60ffff80;transition:all .3s ease}input[type=range]::-webkit-slider-thumb:hover{background:#80ffff;transform:scale(1.2);box-shadow:0 0 15px #60ffffcc}input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--color-neon-cyan);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 10px #60ffff80;transition:all .3s ease}input[type=range]::-moz-range-thumb:hover{background:#80ffff;transform:scale(1.2);box-shadow:0 0 15px #60ffffcc}.slider-bar{width:100%;height:32px;background:rgba(0,0,0,.6);border-radius:0;overflow:hidden;margin-top:8px;border:2px solid rgba(80,80,80,.8);position:relative;display:flex;box-shadow:inset 0 2px 8px #000000b3;transition:all .2s ease}.slider-bar:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-image:repeating-linear-gradient(90deg,transparent,transparent calc(10% - 3px),rgba(0,0,0,.9) calc(10% - 3px),rgba(0,0,0,.9) 10%);pointer-events:none;z-index:2}.slider-bar.no-segments:after{display:none}.slider-bar.clickable:hover{border-color:#60ffff99;box-shadow:inset 0 2px 8px #000000b3,0 0 15px #60ffff4d}.slider-bar-fill{height:100%;transition:width .3s ease;display:flex;align-items:center;justify-content:flex-start;font-size:12px;font-weight:700;position:relative;box-shadow:inset 0 0 10px #0000004d;z-index:1}.slider-bar-fill:before{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%,transparent 100%);pointer-events:none}.health-bar{background:linear-gradient(180deg,#e8e8e8 0%,#cccccc 40%,#b0b0b0 100%);border:1px solid rgba(100,100,100,.6);border-left:none}.shield-bar{background:linear-gradient(180deg,#60ffff 0%,#3ac8d9 40%,#1080b8 100%);border:1px solid rgba(96,255,255,.8);border-left:none;box-shadow:inset 0 0 10px #0000004d,0 0 15px #60ffff4d}.bar-chart{margin-top:var(--spacing-md)}.bar-item{margin-bottom:var(--spacing-lg)}.bar-item:last-child{margin-bottom:0}.bar-label{color:var(--color-text-muted);font-weight:500;margin-bottom:var(--spacing-xs);font-size:.875rem}.bar-container{width:100%;background:rgba(0,0,0,.3);border-radius:var(--radius-sm);overflow:hidden;height:40px;border:1px solid rgba(255,255,255,.1)}.bar-fill{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:var(--spacing-md);transition:width .5s ease;min-width:50px;box-shadow:0 0 15px #0000004d}.bar-value{color:#fff;font-weight:700;font-size:1rem;text-shadow:0 0 5px rgba(0,0,0,.8)}input[type=checkbox]{width:22px;height:22px;cursor:pointer;accent-color:var(--color-neon-green)}.timeline-container{background:rgba(18,10,23,.85);padding:.5rem;border-radius:var(--radius-md);border:1px solid rgba(96,255,255,.2)}.timeline-event{margin-bottom:.5rem;display:flex;gap:.375rem}.drag-handle{cursor:grab;padding:.375rem;background:rgba(96,255,255,.2);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--color-neon-cyan);font-size:.875rem;-webkit-user-select:none;user-select:none;min-width:32px;transition:all .3s ease}.drag-handle:hover{background:rgba(96,255,255,.3);box-shadow:0 0 15px #60ffff4d}.drag-handle:active{cursor:grabbing}.event-card{flex:1;background:rgba(18,10,23,.9);border:2px solid rgba(96,255,255,.4);border-radius:var(--radius-sm);padding:.5rem}.event-controls{display:flex;flex-direction:column;gap:.375rem}.event-row{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}.event-label{color:var(--color-neon-yellow);font-weight:600;min-width:60px;font-size:.8125rem}.event-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.375rem;margin-top:.5rem}.split-event{background:rgba(236,203,13,.1);border:2px dashed rgba(236,203,13,.5);padding:.5rem;border-radius:var(--radius-sm)}.split-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;gap:.375rem}.split-branches{display:grid;gap:.5rem;margin-left:.5rem}.branch-card{background:rgba(0,0,0,.3);padding:.5rem;border-radius:var(--radius-sm);border:1px solid #888}.branch-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem;flex-wrap:wrap;gap:.375rem}.branch-events{display:flex;flex-direction:column;gap:.375rem;margin-left:.375rem}.branch-event-item{display:flex;flex-direction:column;gap:.25rem;padding:.375rem;background:rgba(0,0,0,.2);border-radius:var(--radius-sm);border:1px solid #666}.graph-container{background:rgba(18,10,23,.85);padding:.5rem;border-radius:var(--radius-md);margin-top:.75rem;border:1px solid rgba(96,255,255,.2)}.graph-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.graph-legend{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.legend-item{display:flex;align-items:center;gap:.25rem;font-size:.6875rem}.legend-color{width:20px;height:3px}@media (min-width: 48em){body{padding:var(--spacing-xl);font-size:18px}h1{font-size:2.5rem;margin-bottom:var(--spacing-xl)}h2{font-size:1.5rem}.calculator{padding:var(--spacing-xl)}.section{padding:var(--spacing-lg)}button{padding:.875rem 1.25rem;font-size:1rem}.event-controls{flex-direction:row;align-items:center}.event-actions{grid-template-columns:repeat(4,1fr)}.legend-item{font-size:.875rem}.graph-legend{gap:var(--spacing-lg)}}@media (min-width: 64em){.event-row,.split-header,.branch-header{flex-wrap:nowrap}}