:root{--site-bg:url(/images/hypaobg.png);--text:#eaeaea;--muted:#94a3b8;--panel:rgba(23,26,33,.68);--panel-border:rgba(36,41,56,.6);--panel-shadow:0 8px 30px rgba(0,0,0,.35);--input-bg:rgba(11,13,17,.75);--input-border:#2a2f3b;--brand:#2563eb}*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,sans-serif;color:var(--text);background:#0f1115;min-height:100vh}body:before{z-index:-2;background-image:var(--site-bg);background-size:cover;background-position:top;background-repeat:no-repeat;background-attachment:fixed}body:after,body:before{content:"";position:fixed;inset:0}body:after{z-index:-1;background:radial-gradient(120% 80% at 50% 0,rgba(0,0,0,.25) 0,rgba(0,0,0,.6) 60%,rgba(0,0,0,.7) 100%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35))}.site-header{display:flex;justify-content:center;align-items:center;padding-top:18px;margin-bottom:8px}.site-logo{display:block;width:auto!important;height:auto!important;max-width:min(85vw,1200px);max-height:200px;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.42))}@media (max-width:768px){.site-header{padding-top:14px}.site-logo{max-width:min(82vw,480px);max-height:96px}}.wrapper{max-width:960px;margin:24px auto;padding:16px}.row{display:flex;gap:16px;flex-wrap:wrap}.col{flex:1 1;min-width:280px}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:16px;box-shadow:var(--panel-shadow);-webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05)}label{display:block;margin:8px 0 4px;color:#cbd5e1}.small{font-size:12px;color:var(--muted)}hr{border:0;border-top:1px solid #2a2f3b;margin:16px 0}.controls{display:grid;grid-gap:10px;gap:10px}button,input[type=file],input[type=number],input[type=range],select{width:100%;padding:10px;background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);border-radius:8px}input[type=file]::-webkit-file-upload-button{padding:8px 10px;border:1px solid var(--input-border);background:#11151c;color:var(--text);border-radius:6px;margin-right:8px;cursor:pointer}input[type=range]{height:32px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;padding:0}input[type=range]::-webkit-slider-runnable-track{height:8px;background:hsla(0,0%,100%,.15);border-radius:999px}input[type=range]::-moz-range-track{height:8px;background:hsla(0,0%,100%,.15);border-radius:999px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand);border:0;margin-top:-5px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brand);border:0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}button.primary{background:var(--brand);border-color:var(--brand);cursor:pointer;transition:transform .05s ease,filter .15s ease}button.primary:hover{filter:brightness(1.05)}button.primary:active{transform:translateY(1px)}.preview{width:100%;border-radius:12px;background:rgba(11,13,17,.6);border:1px solid var(--input-border);min-height:300px;display:grid;place-items:center;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.03)}@media (max-width:600px){.wrapper{padding:12px}.card{padding:14px}}