:root{--bg:#f4f6f5;--fg:#1b201f;--muted:#5d6664;--line:#d6dcd9;--accent:#0e6b6b;--panel:#fff;--code:#e9eeec}
@media (prefers-color-scheme:dark){:root{--bg:#141817;--fg:#e4e8e6;--muted:#97a19d;--line:#2a3230;--accent:#5fbdb8;--panel:#1b2120;--code:#222a28}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif;padding:20px 20px 60px}
header.top{max-width:1100px;margin:0 auto 1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start}
h1{margin:0;font-size:1.6rem}h2{font-size:1.1rem;margin:2rem 0 .6rem}
.eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
main{max-width:1100px;margin:0 auto}
.lead{font-size:1.05rem}
.stand{margin:0;font:12px/1.4 "IBM Plex Mono",ui-monospace,monospace;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.6rem .8rem;max-width:560px;overflow:auto;white-space:pre}
.presets{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.presets a{color:var(--accent);text-decoration:none;font-weight:600}.presets a:hover{text-decoration:underline}
.note{color:var(--muted);font-size:.9rem}
code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.88em;background:var(--code);padding:.05em .35em;border-radius:3px}
pre.code{background:var(--code);padding:.8rem 1rem;border-radius:6px;overflow:auto;font-size:.85rem}
/* komponente.html */
.bar{max-width:1100px;margin:0 auto 1rem;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.8rem 1rem;display:grid;gap:.6rem}
.bar .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.bar label{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--muted)}
.bar input,.bar select{font:inherit;font-size:.85rem;padding:.25rem .45rem;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg);min-width:6rem}
.bar input.uuid{min-width:22rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem}
.bar button{font:inherit;font-size:.85rem;padding:.3rem .7rem;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:4px;cursor:pointer}
.bar button.ghost{background:transparent;color:var(--accent)}
.stage{max-width:1100px;margin:0 auto;border-radius:10px;padding:1.5rem;min-height:12rem}
.stage.dark{background:#1e1e1e;color:#fff}.stage.light{background:#fff;color:#111}.stage.auto{background:var(--panel)}
.meta{max-width:1100px;margin:.6rem auto 0;font-size:.8rem;color:var(--muted);font-family:"IBM Plex Mono",ui-monospace,monospace;word-break:break-all}