:root{font-family:Inter,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#1a1a1a;text-decoration:underline}a:hover{color:#1a1a1a}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}p{margin-top:0}.mb-0{margin-bottom:0}h1{font-size:3.2em;line-height:1.1;margin-top:0;margin-bottom:20px}h2{font-size:1.7em;line-height:1.2;margin-top:0;margin-bottom:20px}button{border-radius:8px;border:1px solid #1a1a1a;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#ccc}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;width:1280px;margin:0 auto;padding:2rem;text-align:center}.image-upload-container,.preview-result,.sample-images-grid{margin-bottom:50px}.image-upload-container .upload,.result.border{border:2px dashed #ccc;padding:1rem;border-radius:8px}.image-upload-container .error{color:red;margin:15px 0 0}.preview img{width:100%;height:auto;max-height:275px;object-fit:cover}.preview-result{display:flex;justify-content:center;flex-direction:column;margin-top:20px;grid-gap:20px}@media(min-width:600px){.preview-result{flex-direction:row}}.preview,.result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;grid-gap:15px}.result{width:100%}.result.border{border:2px solid #ccc;box-shadow:6px 6px 6px #0003}.result.fire{border-color:red}.result.non_fire{border-color:green}.result.smoke{border-color:#777}.result .prediction{font-weight:600;padding:7px 15px;border-radius:30px}.result.fire .prediction{background:#f9735d}.result.smoke .prediction{background:#777;color:#fff}.result.non_fire .prediction{background:#8bc1a1}.result .probabilities{width:100%;display:flex;flex-direction:column;align-items:center;grid-gap:10px;max-width:375px}.result .probability-bar{display:flex;grid-gap:10px;align-items:center;width:100%}.result .probability-bar .bar{background-color:#ddd;height:20px;border-radius:4px;overflow:hidden;flex-grow:1}.result .probability-bar .bar-filled{background-color:green;height:100%;transition:width .5s ease}.result .probability-bar .label{min-width:60px;font-size:14px;text-align:left;font-weight:500}.result .probability-value{font-size:12px;color:#555;min-width:60px;text-align:left}.sample-images-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem;grid-gap:25px}@media(min-width:600px){.sample-images-grid{grid-template-columns:1fr 1fr}}@media(min-width:1025px){.sample-images-grid{grid-template-columns:1fr 1fr 1fr}}.sample-image{display:flex;flex-direction:column;grid-gap:15px;align-items:center;background-color:#f8f8f8;padding:20px;border-radius:8px;border:1px solid #ccc}.sample-image img{width:100%;height:160px;object-fit:cover}.link-button{background:none;border:none;padding:0;color:#00f;text-decoration:underline;cursor:pointer;font:inherit}.link-button:hover{color:#00008b}
