:root{color-scheme:light;font:16px/1.48 system-ui,Segoe UI,Arial,sans-serif;color:#282723;background:#f1ece4}
*{box-sizing:border-box}body{margin:0}header{background:#192827;color:white;padding:15px clamp(12px,4vw,42px)}header h1{font-size:clamp(19px,2.3vw,29px);margin:0}header p{margin:5px 0 0;color:#eee0c9;font-size:14px}
main{display:grid;grid-template-columns:minmax(320px,1fr) minmax(278px,350px);gap:18px;padding:18px;max-width:1580px;margin:auto}.viewer{min-width:0}.stage{height:clamp(430px,71vh,820px);background:#b6ced2;border:1px solid #c9bdad;border-radius:15px;overflow:hidden}.stage canvas{display:block;width:100%;height:100%}
.controls{display:grid;align-content:start;gap:14px;max-height:none}section.panel{border:1px solid #d4c7b9;background:#fffdf9;border-radius:13px;padding:15px;min-width:0}h2{font-size:17px;margin:0 0 8px;color:#554031}label{display:block;font-weight:650;font-size:14px;margin:8px 0 5px}select,input[type=range]{width:100%}select{min-height:42px;padding:9px;background:#f8fafc;border:1px solid #91a4b4;border-radius:7px;font-size:15px}button{min-height:42px;font:inherit;font-weight:600;border:1px solid #889ca9;background:#eef4f7;color:#123044;border-radius:8px;padding:9px 11px;cursor:pointer}button:hover:not(:disabled){background:#d8e8ed}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #7ab3d3;outline-offset:2px}.buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}button.main{background:#527568;color:white;border-color:#527568}button.main:hover:not(:disabled){background:#668c7b}small,.small{color:#4c6371;font-size:13px}#status{background:#e3f2ed;border-left:4px solid #2d7b69;padding:13px;border-radius:8px;min-height:48px;margin-top:12px}#status[data-kind=error]{background:#fff0eb;border-color:#ba462f}#status[data-kind=warn]{background:#fff9db;border-color:#ce9928}.info{margin:9px 0 0;color:#42596c;font-size:13px}.footnote{padding:0 18px 20px;max-width:1580px;margin:0 auto;font-size:13px;color:#465d6e}.badge{display:inline-block;border:1px solid #b3c8d0;padding:3px 8px;border-radius:12px;background:#e6eef3;font-size:12px}#talk[data-active=true]{background:#b8ecd8}.view-help{font-size:14px;color:#354959;margin:8px 0}.readout{font-size:12px;color:#506477}
@media(max-width:860px){main{display:block;padding:10px}.stage{height:clamp(340px,53vh,520px)}.controls{margin-top:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.footnote{padding:12px}}@media(max-width:480px){.controls{display:block}.controls .panel{margin-bottom:12px}.stage{height:420px}}

/* Bestaande v7-inline lay-out nu als extern CSS-bestand. */
.welooma-v7-toplinks{float:right;display:flex;gap:16px;font-size:13px}
.welooma-v7-toplinks a{color:#eed6ac}
.welooma-v7-camerabuttons{max-width:380px;margin:9px 0}
.welooma-v7-destinationbuttons{margin-top:9px}