[hidden]{display:none!important}
:root{color-scheme:dark;--bg:#0e0f11;--surface:#17181b;--line:#2a2c31;--ink:#ecebe8;--mute:#9296a0;--or:#ff7a1a;--g:linear-gradient(135deg,#ffa63d 0%,#ff6b1a 55%,#f04a0c 100%);--on-or:#190b02}
*{box-sizing:border-box}
html{scroll-padding-top:52px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{position:sticky;top:0;z-index:10;background:var(--g);color:var(--on-or);padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;box-shadow:0 2px 14px rgba(0,0,0,.6)}
header h1{margin:0 auto;max-width:720px;font-size:1.1rem;font-weight:850;letter-spacing:.02em}
main{max-width:720px;margin:0 auto;padding:16px 16px 28px}

.modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px}
.modes button{font:inherit;font-weight:700;border:0;border-radius:9px;padding:11px 8px;background:transparent;color:var(--mute);cursor:pointer}
.modes button[aria-pressed=true]{background:var(--g);color:var(--on-or)}
section.set .modes{margin-top:14px;background:var(--bg)}
#cap{color:var(--mute);font-size:.88rem;margin:8px 2px 0;min-height:2.6em}

#zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:1/1;width:100%;border:3px dashed var(--or);border-radius:12px;text-align:center;padding:24px;cursor:pointer;transition:background .15s}
#zone:hover,#zone.drag{background:rgba(255,122,26,.09)}
#zone svg{width:56px;height:56px;stroke:var(--or)}
#zone b{font-size:1.2rem}
#zone span{color:var(--mute);max-width:30ch}
#view{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
#status{color:var(--mute);font-size:.9rem;min-height:1.3em;margin:10px 0 0}
#status.err{color:#ff8a7a}
#manual{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hint{grid-column:1/-1;color:var(--mute);font-size:.8rem;margin:0}

.btn{font:inherit;display:block;width:100%;border:0;border-radius:10px;padding:15px 16px;background:var(--g);color:var(--on-or);font-weight:800;font-size:1.05rem;text-align:center;cursor:pointer;margin-top:12px}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{background:var(--surface);color:var(--mute);cursor:default;border:1px solid var(--line)}
.btn.alt{background:transparent;color:var(--or);border:1px solid var(--or);padding:10px 14px;display:inline-block;width:auto;font-size:.95rem;margin-top:0}
.link{font:inherit;display:inline-block;background:none;border:0;color:var(--or);padding:10px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
:is(.btn,.link,.modes button,#zone,input):focus-visible{outline:3px solid #fff;outline-offset:2px}

section.set{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 16px}
section.set h2{margin:0 0 4px;font-size:1.15rem}
section.set>p{margin:0 0 6px;color:var(--mute);font-size:.88rem}
.group{margin-top:18px}
.group h3{margin:0 0 10px;font-size:.95rem;color:var(--or);padding-bottom:6px;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:14px 28px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ctl{display:grid;grid-template-columns:1fr auto}
.ctl label{font-size:.95rem}
.ctl output{font-variant-numeric:tabular-nums;color:var(--or);font-weight:700}
.ctl input[type=range]{grid-column:1/3;width:100%;margin:6px 0 2px;accent-color:var(--or)}
.ctl small{grid-column:1/3;color:var(--mute);font-size:.8rem;line-height:1.3}
.chk{display:flex;gap:10px;align-items:center;font-size:.95rem}
.chk input{width:20px;height:20px;accent-color:var(--or)}
input[type=file]{display:none}
.sqrow{margin-top:14px}
.note{color:var(--mute);font-size:.82rem;margin:4px 0 0;line-height:1.35}
#size{color:var(--ink);margin-top:6px;min-height:1.3em}
footer{max-width:720px;margin:0 auto;padding:0 16px calc(32px + env(safe-area-inset-bottom,0px))}
footer hr{border:0;border-top:1px solid var(--line);margin:0 0 16px}
.links-grid{display:grid;gap:.6rem}
.link-card{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none;transition:border-color .15s}
.link-card:hover{border-color:var(--or)}
.link-card-title{font-weight:700}
.link-card-subtitle{color:var(--mute);font-size:.85rem}
.link-card-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.link-card-info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.foot{margin-top:18px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#bar{height:6px;border-radius:3px;background:var(--surface);border:1px solid var(--line);overflow:hidden;margin-top:10px}
#bar i{display:block;height:100%;width:0;background:var(--g);transition:width .12s}