*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#0b0e13;color:#e6edf3;font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#ffb545}
button,select,input{font:inherit;color:inherit}
.btn{background:#1b222d;border:1px solid #2a3442;color:#dbe4ee;border-radius:9px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){background:#232c3a;border-color:#3d4a5c}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.pri{background:linear-gradient(180deg,#ffc766,#ffab2e);color:#241706;border:0;font-weight:700;box-shadow:0 2px 0 #b7791f}
.btn.sm{padding:4px 9px;border-radius:7px;font-size:12px}
.coffee{background:linear-gradient(180deg,#ffc766,#ffab2e);color:#241706;border:0;border-radius:9px;padding:8px 14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:7px;box-shadow:0 2px 0 #b7791f;white-space:nowrap}

header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:rgba(11,14,19,.94);border-bottom:1px solid rgb(29,37,50);backdrop-filter:blur(6px);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand .icon{font-size:18px}
.brand .title{font-weight:800;letter-spacing:.06em}
.brand .tagline{color:#8b96a5;font-size:13px}
nav.toolnav{display:flex;gap:4px;flex-wrap:wrap}
nav.toolnav a{color:#8b96a5;text-decoration:none;font-size:13px;padding:6px 10px;border-radius:7px;white-space:nowrap}
nav.toolnav a:hover{color:#e6edf3;background:#151a22}
nav.toolnav a.active{color:#ffb545;background:#151a22}

main{max-width:1180px;margin:0 auto;padding:28px 20px 10px}
main.landing{max-width:980px}
.card{background:#0f141c;border:1px solid #1e2734;border-radius:12px;padding:14px;margin-bottom:14px}

.lede{color:#aab4c0;max-width:640px;margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tool-card{background:#0f141c;border:1px solid #1e2734;border-radius:12px;padding:18px;text-decoration:none;color:inherit;display:flex;gap:12px;transition:border-color .15s,transform .15s}
.tool-card:hover{border-color:#3d4a5c;transform:translateY(-1px)}
.tool-card .icon{font-size:24px;line-height:1}
.tool-card h3{margin:0 0 4px;font-size:15px;color:#e6edf3}
.tool-card p{margin:0;font-size:13px;color:#8b96a5}

.workspace{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
@media (max-width:820px){.workspace{grid-template-columns:1fr}}
.controls h2{font-size:16px;margin:0 0 4px}
.controls .sub{color:#8b96a5;font-size:13px;margin:0 0 16px}
.field{margin-bottom:14px}
.field label{display:flex;justify-content:space-between;font-size:12.5px;color:#c4cdd8;margin-bottom:5px}
.field label span.unit{color:#8b96a5}
.field input[type=number]{width:100%;background:#151a22;border:1px solid #2a3442;border-radius:8px;padding:8px 10px;font-size:14px}
.field input[type=number]:focus{outline:none;border-color:#ffb545}
.field input[type=range]{width:100%;margin-top:6px;accent-color:#ffb545}
.warn{background:#241a12;border:1px solid #4a3218;color:#ffcf8a;border-radius:8px;padding:9px 11px;font-size:12.5px;margin-bottom:14px}
.warn.err{background:#241414;border-color:#4a2020;color:#ff8080}

.viewer-pane{background:#0f141c;border:1px solid #1e2734;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px}
.viewer-canvas{position:relative;width:100%;height:60vh;min-height:380px;border-radius:8px;overflow:hidden;background:#0b0e13}
.viewer-canvas canvas{display:block;width:100%;height:100%}
.viewer-hint{color:#8b96a5;font-size:12px;text-align:center}
.viewer-actions{display:flex;justify-content:flex-end;gap:8px}

footer{max-width:1180px;margin:20px auto 60px;padding:0 20px;color:#c4cdd8}
footer h3{font-size:12px;letter-spacing:.08em;color:#8b96a5;margin:22px 0 6px}
footer p{margin:0;color:#aab4c0}
.support-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}
.venmo{color:#8b96a5;font-size:13px;cursor:pointer;text-decoration:underline;background:none;border:0;padding:0;font:inherit}
.crosslinks{margin-top:26px;padding-top:16px;border-top:1px solid #1e2734;font-size:13px;color:#8b96a5}
.crosslinks a{color:#8b96a5;text-decoration:underline}
.crosslinks a:hover{color:#ffb545}