@font-face { font-family:"Sohne"; src:url("assets/SohneBuch.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Sohne"; src:url("assets/SohneDreiviertelfett.ttf") format("truetype"); font-weight:700; font-display:swap; }
:root{ --bg:#060608; --panel:#0d0d12; --line:#23232c; --txt:#f0f0f4; --mut:#8a8a99; --acc:#46e8c8; --warn:#f0b34d; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--txt);
  font-family:"Sohne",Inter,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:1100px; margin:0 auto; padding:28px 20px 60px; }
header{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:28px; position:relative; min-height:34px; }
header .sub{ color:var(--mut); font-size:12px; letter-spacing:2px; text-transform:uppercase; }
h1{ font-size:15px; font-weight:400; letter-spacing:2px; color:var(--mut); text-transform:uppercase; margin:18px 0 14px; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; }
.drop{ display:block; border:1.5px dashed #33333e; border-radius:14px; padding:34px; text-align:center; color:var(--mut);
  cursor:pointer; transition:.15s; }
.drop #dropmsg{ font-size:15px; color:var(--txt); margin-bottom:8px; }
.drop:hover,.drop.over{ border-color:var(--acc); color:var(--txt); }
.drop input{ display:none; }
.controls{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:18px; }
.modes{ display:flex; gap:8px; flex-wrap:wrap; }
.modes button{ flex:1 1 110px; min-width:96px; background:#16161d; color:var(--mut); border:1px solid #2f2f3a; border-radius:10px;
  padding:10px; font:inherit; cursor:pointer; transition:.15s; }
.modes button.on{ background:#2a2a33; color:var(--txt); border-color:var(--acc); }
.row{ display:grid; grid-template-columns:160px 1fr 56px; align-items:center; gap:14px; }
.row + .row{ margin-top:14px; }
.row label{ font-size:13px; color:var(--txt); }
.row output{ font-size:13px; color:var(--mut); text-align:right; }
input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; background:#23232c; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border:0; border-radius:50%; background:#fff; cursor:pointer; }
.actions{ display:flex; gap:10px; align-items:center; margin-top:4px; flex-wrap:wrap; }
button.primary, a.primary{ text-decoration:none; display:inline-block;  background:#f0f0f4; color:#060608; border:0; border-radius:10px; padding:11px 22px; font:inherit; font-weight:700; cursor:pointer; }
button.ghost{ background:#16161d; color:var(--txt); border:1px solid #3a3a44; border-radius:10px; padding:11px 18px; font:inherit; cursor:pointer; }
.status{ color:var(--mut); font-size:12px; }
.views{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.view{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; }
.view h2{ font-size:11px; letter-spacing:2px; color:var(--mut); text-transform:uppercase; margin:4px 6px 10px; }
.view canvas{ width:100%; height:auto; display:block; border-radius:8px; background:#000; image-rendering:auto; }
select{ background:#16161d; color:var(--txt); border:1px solid #2f2f3a; border-radius:8px; padding:7px 10px; font:inherit; }
small.note{ color:#55555f; }
.cap{ font-size:11px; color:var(--mut); margin:8px 6px 2px; }
.warn{ color:#f0b34d; font-size:12px; line-height:1.5; margin-top:12px; padding:10px 12px; border:1px solid #4a3a1a; border-radius:9px; background:#1a1408; }
.warn.danger{ color:#ff8080; background:#210b0b; border:1.5px solid #7a2626; font-size:14px; line-height:1.5; padding:14px 16px; margin-top:18px; }
.legend-title{ text-align:center; font-size:13px; font-weight:400; letter-spacing:3px; text-transform:uppercase; color:var(--mut); margin:0; padding:42px 0 40px; }
.legend{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.legend p{ color:var(--txt); font-size:12px; line-height:1.55; margin:0 0 13px; }
.legend strong{ color:var(--txt); }
.legend-note{ color:var(--txt); font-size:12px; line-height:1.55; margin:16px 0 0; }
.keybtn{ position:absolute; right:0; top:0; display:flex; align-items:center; gap:8px;
  background:#16161d; color:var(--txt); border:1px solid #2f2f3a; border-radius:9px;
  padding:8px 12px; font:inherit; font-size:12px; cursor:pointer; transition:.15s; }
.keybtn:hover{ border-color:var(--acc); }
.badge{ font-size:10px; letter-spacing:.5px; text-transform:uppercase; padding:2px 7px; border-radius:20px; background:#2a2a33; color:var(--mut); }
.badge.on{ background:var(--acc); color:#060608; }
.modal{ position:fixed; inset:0; background:rgba(4,4,7,.72); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal[hidden]{ display:none; }
.modal-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; width:100%; max-width:440px; }
.modal-card h3{ margin:0 0 10px; font-size:15px; font-weight:400; }
.modal-card p{ color:var(--mut); font-size:12px; line-height:1.6; margin:0 0 16px; }
.modal-card a{ color:var(--acc); }
.modal-card label{ display:block; font-size:12px; color:var(--txt); margin-bottom:7px; }
.modal-card input{ width:100%; background:#08080b; color:var(--txt); border:1px solid #2f2f3a; border-radius:9px; padding:11px 12px; font:inherit; font-size:13px; letter-spacing:1px; }
.modal-card input:focus{ outline:none; border-color:var(--acc); }
.modal-actions{ display:flex; align-items:center; gap:9px; margin-top:18px; }
.modal-actions .spacer{ flex:1; }
.modal-actions .ghost, .modal-actions .primary{ padding:9px 16px; font-size:13px; }
.help{ color:#6a6a77; font-size:11px; line-height:1.5; margin:10px 0 14px; }
.help code{ color:var(--mut); }
#blur-aer-rows, #blur-platform-rows{ margin-top:14px; }
.foot{ margin-top:28px; color:var(--mut); font-size:11px; text-align:center; }
.foot a{ color:var(--acc); }
@media(max-width:720px){ .keybtn{ position:static; } header{ flex-direction:column; }  .views{ grid-template-columns:1fr; } .legend{ grid-template-columns:1fr; } .legend-note{ white-space:normal; } .row{ grid-template-columns:120px 1fr 48px; } }
.mut{ color:var(--mut); }
.small{ font-size:12px; }
.actions label.small{ font-size:13px; }
#seed{ width:64px; background:#16161d; color:var(--txt); border:1px solid #2f2f3a; border-radius:8px; padding:6px; font:inherit; }
.row label.check{ display:flex; align-items:center; gap:8px; color:var(--mut); font-size:12px; }
.row select{ min-width:0; }
#src, .view canvas{ width:100%; height:auto; display:block; border-radius:8px; background:#000; }
#tsHwRows{ margin-top:14px; }
optgroup{ color:var(--mut); }