:root{--bg:#f5f7fb;--card:#fff;--tx:#1b2433;--mu:#64718a;--bd:#d9e0ec;--ac:#1E73BE;--ac2:#F87219}
@media(prefers-color-scheme:dark){:root{--bg:#10151f;--card:#192131;--tx:#e8edf6;--mu:#97a3ba;--bd:#2a3550}}
*{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans Bengali",system-ui,sans-serif;background:var(--bg);color:var(--tx);padding:24px 16px}
main{max-width:760px;margin:0 auto}
h1{font-size:1.4rem;margin:0 0 4px}
p.s{color:var(--mu);margin:0 0 20px;font-size:.92rem}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:18px;margin-bottom:16px}
.row{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
.prev{flex:1 1 220px;min-height:150px;border-radius:10px;border:1px solid var(--bd);background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,8px 8px;position:relative;overflow:hidden}
.prev i{position:absolute;inset:0}
.ctl{flex:1 1 260px;display:flex;flex-direction:column;gap:12px}
label{font-size:.85rem;color:var(--mu);display:block;margin-bottom:4px}
input[type=text]{width:100%;padding:10px 12px;font:inherit;font-family:ui-monospace,Consolas,monospace;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx)}
input[type=color]{width:56px;height:44px;border:1px solid var(--bd);border-radius:8px;background:none;padding:2px;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--ac)}
.in{display:flex;gap:10px;align-items:flex-end}
.in>div{flex:1}
.out{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.out code{flex:1;padding:10px 12px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;font-family:ui-monospace,Consolas,monospace;font-size:.95rem;overflow-x:auto;white-space:nowrap}
.out .n{width:130px;color:var(--mu);font-size:.85rem}
button{font:inherit;font-size:.85rem;padding:9px 14px;border:0;border-radius:8px;background:var(--ac);color:#fff;cursor:pointer}
button:hover{filter:brightness(1.1)}
button:focus-visible,input:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
.er{color:#d33;font-size:.85rem;min-height:1.2em}
.hist{display:flex;flex-wrap:wrap;gap:8px}
.hist span{width:34px;height:34px;border-radius:8px;border:1px solid var(--bd);cursor:pointer}