:root{color-scheme:dark;font-family:Arial,sans-serif;background:#080e1b;color:#e8f0fa}*{box-sizing:border-box}body{margin:0}a{color:#9cdae3;text-decoration:none}header{display:flex;justify-content:space-between;align-items:center;padding:22px 4%;border-bottom:1px solid #314159;background:#111b2d}.brand{display:flex;align-items:center;gap:12px;color:#fff;direction:rtl;font-size:20px;letter-spacing:1px}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:5px}.badge{background:linear-gradient(135deg,#65dfd9,#7592ff);color:#101b32;padding:10px;border-radius:13px}nav{display:flex;gap:25px;font-size:14px}main{display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:24px;max-width:1450px;margin:28px auto;padding:0 28px;align-items:start}aside,.preview{background:#121e31;border:1px solid #35445b;border-radius:22px;padding:24px}aside{grid-column:1;grid-row:1}.preview{grid-column:2;grid-row:1;position:sticky;top:20px;text-align:center;background:radial-gradient(ellipse at center,#263d56,#111b2c)}.caption{text-align:right}.caption span,.tag{font-size:12px;color:#85dce1}h1{font-size:28px;margin:10px 0}h2{font-size:23px;margin:14px 0}p{line-height:1.6;color:#acbfd7;font-size:14px}#viewer{height:520px;touch-action:none}#viewer canvas{display:block;width:100%;height:100%}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:block;font-size:14px;margin:18px 0 8px}input,select,button{font:inherit;color:inherit;border:1px solid #456079;background:#1b2c43;border-radius:10px;padding:12px;width:100%}input[type=color]{height:46px;padding:5px}input[type=range]{padding:0;accent-color:#68d8d8}input:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid #8debe3;outline-offset:3px}button{cursor:pointer}button:hover{background:#29405c}.presets,.toolbar{display:flex;gap:8px}.presets button{font-size:13px;padding:10px 3px}.toolbar{justify-content:center}.toolbar button{width:auto}output{color:#8edddf;float:left;font-size:12px}.primary{background:#74d9da;color:#102336;font-weight:bold}.primary:disabled{opacity:.4;cursor:default}.note{font-size:12px}#status{min-height:24px;color:#a5e6e1}small{color:#9cb1cb}@media(max-width:760px){header{padding:15px}nav{gap:12px;font-size:12px}.brand{font-size:14px}main{display:flex;flex-direction:column;padding:0 12px;margin:16px auto;gap:14px}aside,.preview{width:100%;padding:18px}.preview{position:relative;top:0}#viewer{height:340px}h1{font-size:22px}}