:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d0f13;--card:#15171c;--border:#24262c;--text:#eceef2;--muted:#9a9ea8;--accent:#3b82f6;--ok:#3ddc97;--err:#ff6b6b;--radius:16px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Tahoma,Noto Naskh Arabic,Arial,sans-serif;line-height:1.6}#app{max-width:620px;padding:clamp(16px,5vw,48px) clamp(16px,5vw,32px);padding-top:calc(clamp(16px, 5vw, 48px) + env(safe-area-inset-top));padding-bottom:calc(clamp(16px, 5vw, 48px) + env(safe-area-inset-bottom));flex-direction:column;min-height:100svh;margin:0 auto;display:flex}header{text-align:center;margin-bottom:32px}h1{letter-spacing:-.01em;margin:0 0 8px;font-size:clamp(1.4rem,4.5vw,1.9rem)}.tagline{color:var(--muted);margin:0;font-size:clamp(.9rem,3vw,1rem)}main{flex-direction:column;flex:1;gap:16px;display:flex}#dropzone{background:var(--card);border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:clamp(32px,8vw,64px) 20px;transition:border-color .15s,background .15s,transform .1s}#dropzone:hover,#dropzone.dragover{border-color:var(--accent)}#dropzone:focus-visible{border-color:var(--accent)}#dropzone.dragover{transform:scale(1.01)}#dropzone.disabled{pointer-events:none;opacity:.55}.drop-icon{background:var(--accent);border-radius:14px;width:48px;height:48px;margin:0 auto 12px;position:relative}.drop-icon:after{content:"";border:2.5px solid #fff;border-top:none;border-radius:2px;width:20px;height:12px;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0}.drop-icon:before{content:"";background:#fff;border-radius:2px;width:2.5px;height:13px;position:absolute;top:11px;left:50%;transform:translate(-50%)}.drop-hint{margin:0 0 6px;font-weight:600}.drop-note{color:var(--muted);margin:0;font-size:.85rem}#mode,#palette{border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;margin:0;padding:12px 16px;display:flex}#mode legend,#palette legend{color:var(--muted);padding:0 6px;font-size:.85rem}#mode label,#palette label{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;align-items:center;gap:8px;padding:4px 0;font-size:.9rem;display:inline-flex}#mode input:disabled+span,#palette input:disabled+span{opacity:.55;cursor:default}#mode label:has(input:disabled){opacity:.55;cursor:default}#palette label:has(input:disabled){opacity:.55;cursor:default}#mode input,#palette input{accent-color:var(--accent);width:16px;height:16px;margin:0}#status{background:var(--card);border:1px solid var(--err);color:var(--err);border-radius:var(--radius);padding:12px 16px;font-size:.95rem}#progress-wrap{background:var(--card);border-radius:var(--radius);padding:16px}#progress-track{background:var(--border);border-radius:999px;height:8px;overflow:hidden}#progress-bar{background:var(--accent);border-radius:999px;width:0%;height:100%;transition:width .2s}.progress-row{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:.9rem;display:flex}#result{background:var(--card);border-radius:var(--radius);text-align:center;padding:20px}#done-text{color:var(--ok);margin:0 0 4px;font-weight:600}#stats{color:var(--muted);margin:0 0 16px;font-size:.9rem}button{font:inherit;cursor:pointer;color:var(--text);background:var(--border);touch-action:manipulation;border:none;border-radius:12px;padding:10px 18px;transition:background .15s,transform .1s}button:hover{filter:brightness(1.15)}button:active{transform:scale(.97)}button.primary{background:var(--accent);width:100%;padding:12px 28px;font-weight:600}[hidden]{display:none!important}footer{text-align:center;margin-top:auto;padding-top:32px;font-size:.85rem}footer a{color:var(--muted);text-decoration:none}footer a:hover{color:var(--text);text-decoration:underline}footer .footer-more{margin-top:6px;display:block}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
