[hidden]{display:none!important}
#demo-note{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:24px;width:min(680px,90vw);max-height:85vh;overflow:auto}
#demo-note::backdrop{background:#000a}
#demo-note p{overflow-wrap:anywhere;font-size:13px}
#demo-note pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 ui-monospace,monospace}
.walkthrough-public{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;margin:18px 0}
.walkthrough-public h2{font-size:18px;margin:4px 0 8px}
.walkthrough-public p{font-size:12px;margin:6px 0;color:var(--muted)}
#walkthrough-public-status{color:var(--ink)}
#walkthrough-progress{width:min(420px,100%);height:8px;display:block;margin-top:10px}
.walkthrough-controls{border-top:1px solid var(--line);padding-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.walkthrough-controls p{font-size:12px;color:var(--muted);flex:1 1 100%;margin:0}
.walkthrough-controls .walkthrough-hint{font-size:11px}
.demo-operator{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px;margin:18px 0;display:grid;gap:14px}
.demo-operator form{display:grid;grid-template-columns:auto minmax(160px,1fr) auto;gap:12px;align-items:end}
.demo-operator label{font-size:11px;color:var(--muted);grid-column:span 1}
.demo-operator .demo-enroll{grid-template-columns:repeat(4,minmax(0,1fr))}
.demo-enroll label{display:grid;gap:5px}.demo-enroll input,.demo-enroll select{width:100%;min-width:0}
.demo-enroll button{grid-column:1/-1}
#operator-status,#enroll-result{font-size:12px;color:var(--accent);overflow-wrap:anywhere}
.operator-cleanup{border-top:1px solid var(--line);padding-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.operator-cleanup p{font-size:12px;color:var(--muted);margin:0;flex:1 1 100%}
.admin-stats,.admin-restarts{border-top:1px solid var(--line);padding-top:12px}
.admin-stats h2{font-size:14px;margin:0 0 6px}.admin-stats p,.admin-restarts p,#admin-session-status{font-size:12px;color:var(--muted);margin:0;overflow-wrap:anywhere}
.admin-restarts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.admin-restarts p{flex:1 1 100%}
#admin-password-panel h2{font-size:16px;margin:0 0 8px}
#admin-login-form{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-operator #admin-login-form label{display:grid;gap:5px}.demo-operator #admin-login-form input{width:100%;min-width:0}.demo-operator #admin-login-form button{width:max-content}
.note-upload{border-top:1px solid var(--line);padding-top:12px}.note-upload h2,.note-upload h3{font-size:14px;margin:0 0 6px}.note-upload-disclosure,#note-upload-status,#note-preview-summary{font-size:12px;color:var(--muted);margin:0 0 10px;overflow-wrap:anywhere}.note-upload-select{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}.demo-operator .note-upload-select label{display:grid;gap:5px}.note-upload-select input{min-width:0}.note-upload button{margin-top:4px}.note-preview-file{border:1px solid var(--line);border-radius:5px;margin:8px 0;padding:9px}.note-preview-file h4{font-size:12px;margin:0 0 5px;overflow-wrap:anywhere}.note-preview-file pre{margin:0;max-height:180px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.45 ui-monospace,monospace}.note-public-confirm{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px}
.enroll-token{border:1px solid var(--line);border-radius:5px;padding:10px;margin-top:6px}
.enroll-token code{display:block;font:11px ui-monospace;overflow-wrap:anywhere;user-select:all;margin-top:6px}
.demo-roster{margin:24px 0}
#roster-status{font-size:12px;color:var(--muted);margin-bottom:12px}
#retry-activity{font-size:11px;margin:0 0 12px}
.roster-cards{display:flex;flex-wrap:wrap;gap:16px}
.roster-empty{color:var(--muted);border:1px dashed var(--line);border-radius:8px;padding:16px;margin:0}
.roster-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;min-width:180px;position:relative}
.roster-card.status-live{border-color:var(--accent)}
.roster-card.status-revoked{opacity:.5}
.card-label{font-size:16px;font-weight:600}
.card-id{font:11px ui-monospace;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.card-owner{font-size:11px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.card-clearance{display:inline-block;margin-top:10px;padding:2px 8px;border-radius:4px;font:10px ui-monospace;letter-spacing:1px;text-transform:uppercase}
.clearance-public{background:#16301c;color:#8fe0a4}
.clearance-internal{background:#122c3d;color:#8fc9f0}
.clearance-confidential{background:#3a2c10;color:#f0cf7a}
.clearance-secret{background:#3a1414;color:#f0908a}
.card-unverified{font-size:11px;color:var(--muted);margin-top:6px;min-height:14px}
.card-status{font-size:11px;margin-top:8px;text-transform:uppercase;letter-spacing:1px}
.status-live .card-status{color:#8fe0a4}
.status-idle .card-status{color:var(--muted)}
.status-disconnected .card-status,.status-revoked .card-status{color:#f0908a}
.card-revoke{margin-top:12px;font-size:11px;padding:6px 10px}
@media(max-width:700px){.demo-operator form{grid-template-columns:1fr}.demo-operator .demo-enroll,#admin-login-form{grid-template-columns:1fr 1fr}}
@media(min-width:1000px) and (min-height:700px){
 body:has(#operator-panel[hidden]){height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
 body:has(#operator-panel[hidden]) header{padding-block:10px}
 body:has(#operator-panel[hidden]) footer{display:none}
 body:has(#operator-panel[hidden]) .live-main{width:100%;margin:0;display:flex;flex-direction:column;min-height:0;padding-bottom:12px}
 body:has(#operator-panel[hidden]) .intro{padding:10px 0 0}
 body:has(#operator-panel[hidden]) .intro p{display:none}
 body:has(#operator-panel[hidden]) .walkthrough-public{margin:6px 0;padding:8px 12px}
 body:has(#operator-panel[hidden]) .walkthrough-public p:not(#walkthrough-public-status){display:none}
 body:has(#operator-panel[hidden]) .walkthrough-public h2{font-size:16px;margin:0 0 4px}
 body:has(#operator-panel[hidden]) h1{font-size:28px;margin:0}
 body:has(#operator-panel[hidden]) .demo-roster{margin:8px 0 12px}
 body:has(#operator-panel[hidden]) .roster-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
 body:has(#operator-panel[hidden]) .roster-card{min-width:0;padding:10px}
 body:has(#operator-panel[hidden]) .card-owner{overflow-wrap:anywhere}
 body:has(#operator-panel[hidden]) .live-scene{display:flex;flex-direction:column;flex:1;min-height:0}
 body:has(#operator-panel[hidden]) .live-scene iframe{height:0;flex:1;min-height:0}
}