:root{--bg:#191919;--panel:#20201e;--cream:#f5e7be;--muted:#aaa28f;--line:#3b3933}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:Arial,Helvetica,sans-serif}header{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,90px);font-size:12px;font-weight:700;letter-spacing:2px}.brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;letter-spacing:0}.brand img{width:34px;height:34px;object-fit:contain}main{max-width:1380px;margin:auto;padding:70px clamp(24px,5vw,80px)}.intro{max-width:760px;margin-bottom:55px}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:700;color:var(--muted)}h1{font-size:clamp(64px,9vw,128px);line-height:.82;margin:18px 0 30px;letter-spacing:-5px}.intro>p:last-child{max-width:610px;color:#d2c9ad;line-height:1.6}.workspace{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:60px;border-top:1px solid var(--line);padding-top:48px}.controls{display:flex;flex-direction:column;gap:26px}label{font-size:11px;font-weight:700;letter-spacing:2px}select,input{width:100%;margin-top:10px;padding:16px;background:#151515;border:1px solid #625d4e;color:var(--cream);font:600 15px Arial;border-radius:0;outline:none}select:focus,input:focus{border-color:var(--cream)}button{padding:18px 22px;background:var(--cream);color:#181818;border:0;font-weight:800;letter-spacing:1px;cursor:pointer}button:hover{filter:brightness(.94)}.privacy{font-size:10px;letter-spacing:1.3px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line);padding-top:22px}.preview{min-height:620px;display:flex;align-items:flex-start;justify-content:center;background:#171716;border:1px solid #2b2a27;padding:34px}canvas{display:block;max-width:500px;width:100%;height:auto}@media(max-width:800px){header span{display:none}.workspace{grid-template-columns:1fr}.preview{min-height:0}h1{letter-spacing:-3px}}
.rank-adjustments {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #38342c;
}

.adjustment {
    display: grid;
    grid-template-columns: 120px 1fr 40px;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.adjustment label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #f5e7be;
}

.adjustment span {
    font-size: 11px;
    color: #f5e7be;
    text-align: right;
}

.adjustment input[type="range"] {
    width: 100%;
    accent-color: #f5e7be;
}

#resetRank {
    width: 100%;
    margin-top: 5px;
    padding: 11px;
    background: transparent;
    color: #f5e7be;
    border: 1px solid #514a3c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
}

#resetRank:hover {
    background: #f5e7be;
    color: #191919;
}