:root{--slider-height: 16px;--slider-handle-size: 16px;--slider-border-radius: 8px;--slider-pill-radius: 16px;--slider-gap: 8px;--slider-padding: 6px 12px;--primary-bg: #2a2f36;--secondary-text: #ffffff;--accent-blue: #60a5fa;--accent-gray: #6b7280;--interactive-gray: #4a5568;--border-gray: #374151;--hover-gray: #4b5563;--subtle-bg: rgba(55, 65, 81, .3);--subtle-border: rgba(75, 85, 99, .4);--grip-dots: rgba(255, 255, 255, .75)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;max-width:800px;margin:0 auto;padding:20px;background:var(--primary-bg);color:var(--secondary-text);min-height:200vh;line-height:1.5}h1{text-align:center;color:var(--secondary-text);margin-bottom:30px;font-weight:700;letter-spacing:-.025em;position:relative;display:flex;align-items:center;justify-content:center}.info-button{position:absolute;top:50%;right:0;transform:translateY(-50%);width:32px;height:32px;border:2px solid var(--accent-gray);border-radius:50%;background:var(--subtle-bg);color:var(--secondary-text);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-user-select:none;user-select:none}.info-button:hover{background:var(--accent-blue);border-color:var(--accent-blue);transform:translateY(-50%) scale(1.1)}.info-dialog{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.info-dialog.show{display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.info-content{background:var(--primary-bg);border:2px solid var(--border-gray);border-radius:12px;padding:32px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 20px 40px #00000080;animation:slideIn .3s ease}.info-close{position:absolute;top:16px;right:20px;width:32px;height:32px;border:none;background:transparent;color:var(--accent-gray);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.info-close:hover{background:var(--subtle-bg);color:var(--secondary-text)}.info-content h2{color:var(--secondary-text);margin-top:0;margin-bottom:24px;font-size:24px;font-weight:600;border-bottom:2px solid var(--accent-blue);padding-bottom:8px}.info-content h3{color:var(--accent-blue);margin-top:24px;margin-bottom:12px;font-size:18px;font-weight:600}.info-content p{color:var(--secondary-text);line-height:1.6;margin-bottom:16px}.info-content ul{color:var(--secondary-text);line-height:1.6;margin-bottom:16px;padding-left:24px}.info-content li{margin-bottom:8px}.info-content code{background:var(--subtle-bg);color:var(--accent-blue);padding:2px 6px;border-radius:4px;font-family:Courier New,monospace;font-size:14px}.info-content a{color:var(--accent-blue);text-decoration:none}.info-content a:hover{text-decoration:underline}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes pulse{0%{opacity:.6}to{opacity:1}}@keyframes tricorn-processing{0%{filter:hue-rotate(0deg) brightness(1)}25%{filter:hue-rotate(90deg) brightness(1.2)}50%{filter:hue-rotate(180deg) brightness(1.4)}75%{filter:hue-rotate(270deg) brightness(1.2)}to{filter:hue-rotate(360deg) brightness(1)}}#stat-form{display:none;background:transparent;padding:12px;border-radius:8px;margin:12px 0}.stat-sliders{display:flex;flex-direction:column;gap:var(--slider-gap);margin-bottom:8px}.stat-slider{background:var(--subtle-bg);border-radius:var(--slider-pill-radius);padding:12px;border:1px solid var(--subtle-border);display:flex;align-items:center;gap:12px;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.stat-slider:hover{background:#37415166;transform:translateY(-1px)}.stat-name{color:var(--secondary-text);font-weight:500;font-size:14px;min-width:140px;width:140px;display:flex;align-items:center;justify-content:flex-start;gap:8px}.stat-label{color:var(--secondary-text);font-weight:500;font-size:14px;text-transform:capitalize;white-space:nowrap;opacity:.9}.grip-dots{color:var(--grip-dots);font-size:12px;cursor:grab;-webkit-user-select:none;user-select:none;line-height:1;opacity:1;transition:all .2s ease;min-width:10px;min-height:10px;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-touch-callout:none}.grip-dots:hover{opacity:1;color:var(--accent-blue)}.stat-slider[draggable=true]{cursor:grab}.stat-slider.dragging{opacity:.5;transform:scale(.95);cursor:grabbing}.stat-slider.drag-over{border-top:2px solid var(--accent-blue)}.stat-icon{width:24px;height:24px;opacity:.9}.slider-container{flex:1;position:relative;height:var(--slider-height)}.slider-track{position:relative;height:100%;background:var(--subtle-border);border-radius:var(--slider-border-radius);cursor:pointer;box-shadow:inset 0 1px 3px #0003;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}.slider-fill{position:absolute;left:0;top:0;height:100%;background:var(--accent-blue);border-radius:var(--slider-border-radius) 0 0 var(--slider-border-radius);transition:width .2s ease;pointer-events:none;box-shadow:0 1px 3px #0000004d}.possible-range{position:absolute;top:0;height:100%;background:#60a5fa33;border-left:1px solid var(--accent-blue);border-right:1px solid var(--accent-blue);pointer-events:none}.slider-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--slider-handle-size);height:var(--slider-handle-size);background:var(--secondary-text);border:2px solid var(--primary-bg);border-radius:50%;cursor:grab;z-index:10;box-shadow:0 2px 6px #0006,0 0 0 1px #ffffff1a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;min-width:22px;min-height:22px}.slider-handle:hover{background:#fff;box-shadow:0 3px 8px #00000080,0 0 0 1px #fff3;transform:translate(-50%,-50%) scale(1.1)}.slider-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.05)}.stat-value{background:transparent;color:var(--secondary-text);padding:0;font-weight:600;font-size:15px;min-width:40px;text-align:center;cursor:pointer;border-radius:3px;transition:background-color .2s ease}.stat-value:hover{background:#ffffff1a}.stat-value:focus{outline:2px solid var(--primary-orange);outline-offset:2px;background:#ffffff26;box-shadow:0 0 0 2px var(--primary-orange)}.stat-value:focus:not(.focus-visible){outline:2px solid var(--primary-orange)}.stat-value:focus-visible{outline:2px solid var(--primary-orange);outline-offset:2px;background:#ffffff26;box-shadow:0 0 0 2px var(--primary-orange)}.stat-value-input{background:var(--interactive-gray);color:var(--secondary-text);border:2px solid var(--primary-orange);border-radius:4px;padding:2px 6px;font-weight:600;font-size:15px;min-width:40px;max-width:60px;text-align:center;outline:none;box-shadow:0 0 0 2px #f8717133}.stat-value-input:focus{border-color:var(--primary-orange);box-shadow:0 0 0 3px #f871714d}.range-value{color:#ffffffbf;font-size:13px;min-width:60px;text-align:right;font-weight:400}.reset-button{background:var(--subtle-bg);color:#e5e7eb;border:1px solid var(--interactive-gray);padding:10px 18px;border-radius:6px;cursor:pointer;margin-right:10px;font-size:14px;font-weight:600;transition:all .2s ease;box-shadow:0 1px 3px #0003}.reset-button:hover{background:#4b556380;transform:translateY(-1px);box-shadow:0 2px 6px #0000004d}.mod-selector-section{margin:25px 0;text-align:center}.mod-selector-section h3{color:var(--secondary-text);font-size:18px;margin-bottom:16px;font-weight:600}.mod-selector{display:flex;gap:10px;justify-content:center;margin:15px 0}.mod-button{padding:8px 14px;border:1px solid var(--interactive-gray);background:var(--subtle-bg);color:#e5e7eb;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s ease;min-width:36px;text-align:center;font-size:14px;box-shadow:0 1px 3px #0003}.mod-button:hover{background:#4b556380;transform:translateY(-1px);box-shadow:0 2px 6px #0000004d}.mod-button.active{background:var(--interactive-gray);color:var(--secondary-text);transform:scale(1.05);box-shadow:0 3px 8px #0006}.mod-button.active:not([data-mods="0"]){background:#22c55e33;color:#22c55ee6;border-color:#22c55e80;box-shadow:0 3px 8px #22c55e4d}.tier-selector-section{margin:25px 0;text-align:center}.tier-selector-section h3{color:var(--secondary-text);font-size:18px;margin-bottom:16px;font-weight:600}.tier-selector{display:flex;gap:10px;justify-content:center;margin:15px 0;flex-wrap:wrap}.tier-button{padding:8px 14px;border:1px solid var(--interactive-gray);background:var(--subtle-bg);color:#e5e7eb;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s ease;min-width:36px;text-align:center;font-size:14px;box-shadow:0 1px 3px #0003}.tier-button:hover{background:#4b556380;transform:translateY(-1px);box-shadow:0 2px 6px #0000004d}.tier-button.active{background:#c084fc;color:#1a1a1a;transform:scale(1.05);box-shadow:0 3px 8px #c084fc66}.archetype-selector-section{margin:25px 0;text-align:center}.archetype-selector-section h3{color:var(--secondary-text);font-size:18px;margin-bottom:16px;font-weight:600}.archetype-selector{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.archetype-button{padding:8px 14px;border:1px solid var(--interactive-gray);background:var(--subtle-bg);color:#e5e7eb;border-radius:6px;cursor:pointer;transition:all .2s;font-size:14px;font-weight:500;min-width:80px;text-align:center}.archetype-button:hover{background:#4b556380;transform:translateY(-1px);box-shadow:0 2px 6px #0000004d}.archetype-button.active{background:#60a5fa;color:#1a1a1a;transform:scale(1.02);box-shadow:0 3px 8px #60a5fa66;border-color:#3b82f6}.archetype-button:not(.active){background:#4b556333;color:#9ca3af;opacity:.7}.exotic-button{padding:8px 14px;border:1px solid var(--interactive-gray);background:var(--subtle-bg);color:#e5e7eb;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s ease;text-align:center;font-size:14px;box-shadow:0 1px 3px #0003;margin-left:20px}.exotic-button:hover{background:#4b556380;transform:translateY(-1px);box-shadow:0 2px 6px #0000004d}.exotic-button.active{background:#d4af37;color:#1a1a1a;border-color:#b8941f;transform:scale(1.05);box-shadow:0 3px 8px #d4af3766}.outfit-mods{margin:10px 0;padding:8px 12px;background:#60a5fa1a;border-left:3px solid var(--accent-blue);border-radius:4px;font-size:14px}.outfit-mods strong{color:var(--accent-blue);margin-right:8px}.mod-stat-icon{width:16px;height:16px;vertical-align:middle;margin-right:4px}.outfit.no-mods{border-left:3px solid var(--hover-gray)}#results{margin-top:12px}.results-summary{background:var(--subtle-bg);padding:12px;border-radius:8px;margin-bottom:12px;border-left:4px solid var(--accent-blue);color:var(--secondary-text)}.results-summary h3{color:var(--secondary-text);margin:0}.results-summary.loading{background:#60a5fa33;border-left:4px solid var(--accent-blue);animation:pulse 1.5s ease-in-out infinite alternate}.results-summary.error{background:#ef444433;border-left:4px solid #ef4444}.tricorn-loading{animation:tricorn-processing 2s ease-in-out infinite}.outfit-list{background:var(--subtle-bg);padding:12px;border-radius:8px;border:1px solid var(--subtle-border)}.outfit-list h4{color:var(--secondary-text);margin:0 0 4px;font-size:16px;font-weight:600}.outfit{background:#3741514d;margin:15px 0;padding:15px;border-radius:8px;border-left:4px solid var(--accent-blue);border:1px solid var(--subtle-border);transition:all .2s ease}.outfit:hover{background:#37415166;transform:translateY(-1px);box-shadow:0 2px 8px #0003}.outfit-header{font-weight:600;color:var(--secondary-text);margin-bottom:10px}.outfit-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:10px}.outfit-stats span{background:#37415166;color:var(--secondary-text);padding:5px 10px;border-radius:4px;text-align:center;font-size:14px;font-weight:500;border:1px solid var(--subtle-border)}.outfit-pieces{font-size:14px;color:#ffffffbf;font-family:monospace;line-height:1.4}.outfit-table{margin:15px 0;overflow-x:auto;background:#3741514d;border-radius:8px;border-left:4px solid var(--accent-blue)}.outfit-table table{width:100%;border-collapse:collapse;font-size:13px;min-width:420px}.outfit-table th,.outfit-table td{padding:8px 6px;text-align:center;border-bottom:1px solid rgba(75,85,99,.3)}.outfit-table th{background:#4b556366;color:var(--secondary-text);font-weight:600;position:sticky;top:0;z-index:1}.outfit-table th.piece-col{text-align:left;padding-left:8px;min-width:110px}.outfit-table td:first-child{text-align:left;padding-left:8px;font-weight:500}.outfit-table .stat-col{width:45px;padding:6px 4px}.outfit-table .stat-col img{width:18px;height:18px;opacity:.9}.outfit-table .total-row{background:#60a5fa26;border-bottom:2px solid var(--accent-blue)}.outfit-table .total-row td{color:var(--secondary-text)}.outfit-table .mods-row{background:#22c55e26;border-top:1px solid rgba(34,197,94,.3)}.outfit-table .mods-row td{color:#22c55ee6;font-weight:500}.no-results{text-align:center;font-size:18px;color:#fbbf24;padding:30px;background:#fbbf241a;border-radius:8px;border:2px solid rgba(251,191,36,.3)}@media (max-width: 600px){body{padding:8px}h1{font-size:24px;margin-bottom:20px}.outfit-header,.results-summary h3{font-size:14px}#stat-form{padding:12px}.stat-slider{gap:6px;padding:8px 4px}.stat-name{min-width:28px;width:28px;font-size:10px}.stat-label{display:none}.stat-icon{width:21px;height:21px}.stat-value{min-width:20px;font-size:12px;padding:1px 4px}.range-value{min-width:30px;font-size:11px}.slider-container{flex:1;min-width:120px;margin-left:16px;margin-right:2px}.info-content{padding:24px;margin:20px;width:calc(100% - 40px)}.info-content h2{font-size:20px}.info-button{width:28px;height:28px;font-size:16px}.outfit-table{margin:10px -15px;border-radius:0;border-left:none;border-top:4px solid var(--accent-blue)}.outfit-table table{font-size:12px;min-width:300px}.outfit-table th,.outfit-table td{padding:5px 3px}.outfit-table th.piece-col,.outfit-table td:first-child{padding-left:4px;width:90px!important;max-width:90px!important}.outfit-table .stat-col{width:32px;padding:4px 0}.outfit-table td:first-child img{width:14px!important;height:14px!important}.outfit-table .stat-col img{width:16px;height:16px}}