/* Shared controls inherit the current page palette. */
.experience-page{max-width:900px!important;padding-top:24px;padding-bottom:40px}
.experience-settings{color:var(--text-primary,#eee);background:var(--bg-surface,#1e1e1e);border:1px solid var(--border-color,#444);border-radius:16px;overflow:hidden}
.experience-settings .settings-card-header{padding:20px 24px;border-bottom:1px solid var(--border-color,#444)}
.experience-settings h2{margin:0;font-size:1.25rem}
.experience-settings .settings-card-body{padding:24px}
.experience-settings p{line-height:1.7;overflow-wrap:anywhere}
.experience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.experience-grid label{display:flex;flex-direction:column;gap:8px;min-width:0;font-weight:600}
.experience-grid select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;font:inherit;font-size:16px;padding:10px;border:1px solid var(--border-color,#555);border-radius:8px;background:var(--bg-main,#171717);color:var(--text-primary,#eee)}
.experience-actions{display:flex;flex-wrap:wrap;gap:12px}
.experience-actions button{max-width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--border-color,#555);border-radius:8px;background:var(--bg-main,#171717);color:var(--text-primary,#eee);font:inherit;cursor:pointer}
.experience-actions [hidden]{display:none!important}
.experience-help{font-size:.9rem;color:var(--text-secondary,#bbb)}
.experience-settings :focus-visible{outline:3px solid var(--accent-yellow,#fdb913);outline-offset:3px}
@media(max-width:600px){.experience-grid{grid-template-columns:1fr}.experience-settings .settings-card-body,.experience-settings .settings-card-header{padding:16px}}
.codebin-experience,.codebin-call-setup{--tool-bg:var(--bg-surface,#1e1e1e);--tool-text:var(--text-primary,#eaeaea);--tool-border:var(--border-color,#444);--tool-accent:var(--accent-yellow,#fdb913);box-sizing:border-box;background:var(--tool-bg);color:var(--tool-text);border:1px solid var(--tool-border);border-radius:12px;font:15px/1.5 var(--font-main,system-ui,sans-serif);box-shadow:0 12px 36px #0005;color-scheme:dark}
html.light-theme :is(.codebin-experience,.codebin-call-setup){--tool-bg:var(--bg-surface,#fff);--tool-text:var(--text-primary,#202020);--tool-border:var(--border-color,#ccc);color-scheme:light}
.codebin-experience{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:calc(80px + env(safe-area-inset-bottom));z-index:1001;width:max-content;max-width:calc(100vw - 24px);padding:0}
.codebin-experience summary{cursor:pointer;min-height:44px;padding:10px 14px;font-weight:600;list-style:none;color:var(--tool-text)}
.codebin-experience summary::-webkit-details-marker{display:none}
.codebin-experience[open]{bottom:calc(144px + env(safe-area-inset-bottom));width:290px;max-height:calc(100dvh - 160px - var(--header-height,90px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;padding-bottom:12px}
.codebin-experience[open] summary{border-bottom:1px solid var(--tool-border);color:var(--tool-accent)}
.codebin-experience a,.codebin-experience label{display:block;margin:0;padding:10px 14px;color:var(--tool-text);text-decoration:none;min-height:44px}
.codebin-experience a:hover{background:var(--bg-surface-hover,#333);color:var(--tool-accent)}
.codebin-experience select,.codebin-call-setup select{display:block;width:100%;min-width:0;max-width:100%;min-height:44px;margin-top:6px;padding:8px;background:var(--tool-bg);color:var(--tool-text);border:1px solid var(--tool-border);border-radius:8px;font:inherit;font-size:16px}
.codebin-call-setup{width:calc(100% - 24px);max-width:520px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:24px;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
.codebin-call-setup::backdrop{background:#000a}
.codebin-call-setup h2{font:700 1.4em/1.3 var(--font-main,system-ui);color:inherit;margin:0 0 18px}
.codebin-call-setup video{display:block;width:100%;max-height:clamp(80px,28dvh,230px);border-radius:8px;background:#000;object-fit:contain}
.codebin-call-setup video[hidden]{display:none}
.codebin-call-setup label{display:block;font-weight:600}
.codebin-call-setup meter{display:block;width:100%;height:18px;accent-color:var(--tool-accent)}
.codebin-call-setup button{min-height:44px;max-width:100%;padding:10px 14px;margin:4px 4px 4px 0;border:1px solid var(--tool-border);border-radius:8px;background:var(--tool-bg);color:var(--tool-text);font:600 15px/1.4 var(--font-main,system-ui);cursor:pointer;white-space:normal}
.codebin-call-setup button[data-join]{background:var(--tool-accent);color:#171717;border-color:transparent}
.codebin-call-setup button:hover{filter:brightness(1.15)}
:is(.codebin-experience,.codebin-call-setup) :focus-visible{outline:3px solid var(--tool-accent);outline-offset:2px}
@media(max-width:480px){.codebin-call-setup{padding:16px}.codebin-call-setup button{width:100%;margin:4px 0}.codebin-experience:not([open]) summary{font-size:13px;padding:10px}}
.codebin-reduced-motion *,.codebin-reduced-motion *::before,.codebin-reduced-motion *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.codebin-reduced-motion .avatar-particle,.codebin-reduced-motion .profile-particle,.codebin-reduced-motion [data-particle]{display:none!important}

html[data-text-size=large]{font-size:18px}html[data-text-size=largest]{font-size:20px}html[data-text-size=large] body,html[data-text-size=largest] body{font-size:1rem!important}html[data-contrast=high] body{--bg-main:#000!important;--bg-surface:#111!important;--text-primary:#fff!important;--text-secondary:#ddd!important;--border-color:#aaa!important;--settings-bg:#000;--settings-surface:#111;--settings-text:#fff;--settings-muted:#ddd;--settings-border:#aaa;background:#000!important;color:#fff!important}html[data-contrast=high] a{color:#ffcf40}html[data-contrast=high] :focus-visible{outline:3px solid #fff!important}