body{color:#222;background:#fafaf7;max-width:640px;margin:0 auto;padding:24px 16px;font-family:system-ui,sans-serif}body.host{max-width:960px}h1{margin-bottom:4px}h2{margin-top:0;font-size:1.3rem}.sub{color:#666;margin-top:0}.klein{color:#666;word-break:break-all;font-size:.85rem}.groot{font-size:1.3rem;font-weight:600}.fout{color:#c62828}section{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:16px;padding:16px}label{margin-bottom:4px;font-size:.85rem;display:block}.rij{flex-wrap:wrap;gap:8px;display:flex}input{min-width:140px;font:inherit;border:1px solid #bbb;border-radius:6px;flex:1;padding:10px}button{color:#fff;font:inherit;cursor:pointer;background:#d9480f;border:0;border-radius:6px;padding:10px 16px}button.grijs{background:#888}button:disabled{opacity:.4;cursor:default}.optie-0{background:#d9480f}.optie-1{background:#1f6f8b}.optie-2{background:#2e7d32}.optie-3{background:#6d4c41}.opties{gap:10px;display:grid}.optie{text-align:left;align-items:center;gap:12px;width:100%;min-height:64px;font-size:1.05rem;display:flex}.letter{color:#fff;background:#ffffff40;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-weight:700;display:inline-flex}.host h2{font-size:2rem}.balk-rij{grid-template-columns:32px minmax(0,1.2fr) minmax(0,1fr) 40px;align-items:center;gap:12px;padding:8px 0;font-size:1.2rem;display:grid}.balk-rij .letter{width:32px;height:32px}.balk{background:#eee;border-radius:4px;height:24px;overflow:hidden}.balk span{background:#888;height:100%;transition:width .4s;display:block}.balk-rij.juist .balk span{background:#2e7d32}.balk-rij.juist .optie-tekst{font-weight:700}.balk-rij.gedimd{opacity:.5}.aantal{text-align:right;font-weight:700}ol{padding-left:24px;font-size:1.3rem}ol li{border-bottom:1px solid #eee;justify-content:space-between;padding:6px 0;display:flex}.balk-rij .optie-0{background:#d9480f}.balk-rij .optie-1{background:#1f6f8b}.balk-rij .optie-2{background:#2e7d32}.balk-rij .optie-3{background:#6d4c41}