:root{
  --bg:#0e1116; --panel:#161b23; --panel2:#1d232d; --line:#2a323d;
  --tx:#e8edf4; --mut:#96a2b4; --acc:#4ea1ff; --acc2:#7ee0a8; --warn:#ffcf6b;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:940px;margin:0 auto;padding:0 18px}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,4.6vw,2.5rem);letter-spacing:-.02em}
h2{font-size:clamp(1.25rem,3.4vw,1.7rem);letter-spacing:-.01em;margin-top:2em}
h3{font-size:1.05rem;margin-top:1.6em}
p{margin:0 0 1em}
small{color:var(--mut)}

header.site{border-bottom:1px solid var(--line);background:#0d1015;position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:14px;height:58px}
.logo{font-weight:700;letter-spacing:-.02em;color:var(--tx);font-size:1.05rem;white-space:nowrap}
.logo span{color:var(--acc)}
header.site nav{margin-left:auto;display:flex;gap:16px;overflow-x:auto;scrollbar-width:none}
header.site nav::-webkit-scrollbar{display:none}
header.site nav a{color:var(--mut);font-size:.9rem;white-space:nowrap}
header.site nav a:hover{color:var(--tx);text-decoration:none}

.hero{padding:38px 0 8px}
.hero p.lede{font-size:1.08rem;color:var(--mut);max-width:62ch}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.badges li{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:.82rem;color:var(--mut)}
.badges li b{color:var(--acc2);font-weight:600}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
#tool{margin:26px 0 10px;scroll-margin-top:70px}

.drop{
  border:2px dashed #33404f;border-radius:var(--r);background:var(--panel2);
  padding:34px 18px;text-align:center;cursor:pointer;transition:.15s;
}
.drop:hover,.drop.over{border-color:var(--acc);background:#1a2330}
.drop b{display:block;font-size:1.05rem;margin-bottom:4px}
.drop small{display:block}

.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
select,input[type=text],input[type=number]{
  background:var(--panel2);border:1px solid var(--line);color:var(--tx);
  border-radius:8px;padding:10px 11px;font:inherit;font-size:.95rem;width:100%;min-width:0;
}
input[type=range]{width:100%;accent-color:var(--acc)}
select:focus,input:focus{outline:2px solid var(--acc);outline-offset:1px}
.row2{display:flex;gap:8px}
.row2 input{width:50%}
input[type=color]{width:100%;height:42px;padding:2px;background:var(--panel2);border:1px solid var(--line);border-radius:8px}

.btn{
  background:var(--acc);color:#06121f;border:0;border-radius:9px;
  padding:12px 18px;font:inherit;font-weight:700;cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line);font-weight:600}
.btn.buy{background:var(--acc2);color:#06210f}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.actions .stat{color:var(--mut);font-size:.9rem}

.specline{margin-top:14px;padding:11px 13px;background:#131a24;border-left:3px solid var(--acc);border-radius:0 8px 8px 0;font-size:.9rem;color:var(--mut)}
.specline b{color:var(--tx)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:20px}
.thumb{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px;font-size:.76rem;color:var(--mut);min-width:0}
.thumb img{width:100%;aspect-ratio:1;object-fit:contain;background:#0a0d12;border-radius:6px;display:block}
.thumb .nm{margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx)}
.thumb .mt{display:flex;justify-content:space-between;gap:6px;margin-top:3px}
.thumb a.dl{display:block;text-align:center;margin-top:7px;background:#243040;border-radius:6px;padding:6px;color:var(--acc);font-weight:600}
.thumb a.dl:hover{background:#2c3a4d;text-decoration:none}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem;display:block;overflow-x:auto;white-space:nowrap}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--mut);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
td b{color:var(--acc2)}

.pro{margin:34px 0;background:linear-gradient(180deg,#18222e,#141a22);border:1px solid #2d3d4f}
.pro ul{margin:12px 0 18px;padding-left:20px;color:var(--mut)}
.pro ul li{margin:5px 0}
.pro ul li b{color:var(--tx)}
.price{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.price small{font-size:.85rem;font-weight:500}

details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0}
details summary{cursor:pointer;font-weight:600}
details p{margin:10px 0 0;color:var(--mut)}

footer.site{border-top:1px solid var(--line);margin-top:48px;padding:24px 0 40px;color:var(--mut);font-size:.88rem}
footer.site nav{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px}

.note{color:var(--warn);font-size:.9rem}
@media (max-width:560px){
  .hero{padding:24px 0 4px}
  .card{padding:14px}
  .actions .btn{flex:1 1 100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
}