:root{--bg:#f7f8f7;--card:#fff;--rule:#e2e6e3;--ink:#151b18;--dim:#6a756f;
  --ok:#1c7a52;--ok-soft:#e7f3ed;--bad:#b3372c;
  --shadow:0 1px 2px rgba(21,27,24,.05),0 12px 30px -20px rgba(21,27,24,.4)}
@media(prefers-color-scheme:dark){:root{--bg:#0e1210;--card:#161c19;--rule:#26302b;--ink:#e7ede9;
  --dim:#8d9a94;--ok:#4dbd8c;--ok-soft:#14261e;--bad:#e07a68;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -20px rgba(0,0,0,.8)}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  font-size:15px;line-height:1.65}
html[dir=rtl] body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;line-height:1.85}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:900px;margin:0 auto;padding:26px 16px 60px;display:flex;flex-direction:column;gap:18px}
header{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.lang{border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:99px;padding:6px 14px;
  font-family:inherit;font-size:13px;cursor:pointer;flex:none}
.lang:hover{border-color:var(--ok);color:var(--ok)}
.tabs{display:flex;border:1px solid var(--rule);border-radius:9px;overflow:hidden;width:max-content;margin-bottom:4px}
.tabs button{border:0;background:transparent;color:var(--ink);padding:6px 14px;font-family:inherit;font-size:13px;cursor:pointer}
.tabs button+button{border-inline-start:1px solid var(--rule)}
.tabs button.on{background:var(--ok-soft);color:var(--ok);font-weight:600}
.lang:focus-visible,.tabs button:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.brand{display:flex;gap:14px;align-items:flex-start}
.logo{font-size:32px;line-height:1}
h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.sub{margin:3px 0 0;color:var(--dim);font-size:13.5px;max-width:70ch}
.sub strong{color:var(--ink)}
.plabel,label{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.plabel b{color:var(--ink);letter-spacing:0;font-weight:500;margin-inline-start:4px}
main{display:flex;flex-direction:column;gap:18px}
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.mcard{border:1px solid var(--rule);background:var(--card);border-radius:12px;padding:12px 14px;cursor:pointer;
  text-align:start;display:flex;flex-direction:column;gap:2px;color:var(--ink);font-family:inherit;box-shadow:var(--shadow)}
.mcard .mname{font-size:15px;font-weight:600}
.mcard .mdesc{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim)}
.mcard.on{border-color:var(--ok);background:var(--ok-soft)}
.mcard.on .mname{color:var(--ok)}
.mcard:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
textarea{width:100%;margin-top:9px;border:1px solid var(--rule);border-radius:9px;background:transparent;
  color:var(--ink);padding:12px;font-family:inherit;font-size:15px;line-height:1.6;resize:vertical}
textarea:focus,input[type=number]:focus{outline:none;border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.knobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:14px}
.knob{display:flex;flex-direction:column;gap:6px}
input[type=range]{width:100%;accent-color:var(--ok)}
.seg{display:flex;border:1px solid var(--rule);border-radius:9px;overflow:hidden;width:max-content}
.seg button{border:0;background:transparent;color:var(--ink);padding:6px 14px;font-family:"IBM Plex Mono",monospace;
  font-size:13px;cursor:pointer}
.seg{direction:ltr}
.seg button+button{border-left:1px solid var(--rule)}
.seg button.on{background:var(--ok-soft);color:var(--ok);font-weight:600}
.seedrow{display:flex;gap:6px}
input[type=number]{width:100%;min-width:0;border:1px solid var(--rule);border-radius:9px;background:transparent;color:var(--ink);
  padding:6px 10px;font-size:13px}
.dice{border:1px solid var(--rule);background:transparent;border-radius:9px;cursor:pointer;font-size:15px;padding:0 10px}
.bar{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.go{border:1px solid var(--ok);background:var(--ok);color:#fff;border-radius:9px;padding:10px 22px;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.go:hover{filter:brightness(1.07)}
.go:disabled{opacity:.6;cursor:progress}
.go:focus-visible,.seg button:focus-visible,.chip:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.hint{font-size:11.5px;color:var(--dim)}
.hint.err{color:var(--bad)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.grid:empty{display:none}
.tile{background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);margin:0}
.tile img{display:block;width:100%;aspect-ratio:1;image-rendering:auto}
.tile figcaption{padding:6px 10px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);
  display:flex;justify-content:space-between}
.tile figcaption a{color:var(--ok);text-decoration:none}
.tile.ph{aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px;
  background:repeating-linear-gradient(45deg,var(--card),var(--card) 10px,var(--bg) 10px,var(--bg) 20px)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.chip{border:1px solid var(--rule);background:var(--card);border-radius:99px;padding:6px 13px;
  font-size:12.5px;cursor:pointer;color:var(--ink);font-family:inherit;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip:hover{border-color:var(--ok);color:var(--ok)}
footer{border-top:1px solid var(--rule);padding-top:16px;color:var(--dim);font-size:12.5px}
footer p{margin:0 0 6px} footer strong{color:var(--ink)}
footer a,.links a{color:var(--ok);text-decoration:none} footer a:hover{text-decoration:underline}
.small{font-size:11.5px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.modelrow{margin-bottom:14px}
.seg.model button{font-family:inherit;font-size:13.5px;padding:7px 16px}
[hidden]{display:none!important}