@font-face{font-family:FocusInter;src:url('assets/fonts/inter-regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:FocusInter;src:url('assets/fonts/inter-semibold.woff') format('woff');font-style:normal;font-weight:500 800;font-display:swap}
.held-menu.is-interactive{line-height:normal;container-type:inline-size}
.held-menu.is-interactive>.menu-fallback{display:none}
/* Keep the native 700x660 composition. Layout zoom rasterizes text at its final
   size without turning the fixed two-column menu into a responsive form. */
.focus-demo{--demo-accent:#4a8dff;--demo-bg:#0c0d12;--demo-card:#13151b;--menu-zoom:1;position:absolute;inset:0 auto auto 0;width:700px;height:660px;zoom:var(--menu-zoom);transform:none;background:var(--demo-bg);color:#ecedf2;font:400 13px/1.35 FocusInter,Geist,sans-serif;text-align:left;isolation:isolate;overflow:hidden;border-radius:9px;cursor:default;-webkit-user-select:none;user-select:none}
.focus-demo *{box-sizing:border-box}
.focus-demo :is(input:not([type]),input[type=text],input[type=search],textarea,[contenteditable=true]){-webkit-user-select:text;user-select:text}
.focus-demo button,.focus-demo input,.focus-demo select{font:inherit;color:inherit;letter-spacing:normal;line-height:1.3}
.focus-demo button{background:none;padding:0;margin:0;border:0;cursor:pointer;touch-action:manipulation}
.focus-demo button:disabled{opacity:.38;cursor:not-allowed}
.focus-demo :is(button,input,select):focus-visible{outline:1px solid var(--demo-accent);outline-offset:2px}
.focus-demo svg{width:14px;height:14px;stroke-width:1.5}
.fd-titlebar{height:40px;display:flex;align-items:center;gap:9px;padding:0 14px;background:#101117}
.fd-titlebar>img{width:19px;height:19px}
.fd-brand{font-size:12px;font-weight:650;letter-spacing:1.7px}
.fd-close{display:grid;place-items:center;width:22px;height:22px;border:1px solid #242833!important;border-radius:5px;color:#9399a9!important;background:#181b23!important;margin-left:auto!important}
.fd-nav{height:34px;display:flex;align-items:center;gap:4px;padding:0 6px 4px;background:#101117;border-bottom:1px solid #1a1d26}
.fd-tabs{display:flex;gap:2px;flex:none}
.fd-tab{padding:5px 10px!important;font-size:11px!important;font-weight:550!important;color:#9399a9!important;border-radius:5px;white-space:nowrap}
.fd-tab:hover{color:#ecedf2!important;background:#1a1e28}
.fd-tab[aria-selected=true]{color:#8bb6ff!important;background:#1c2a42}
.fd-search{position:relative;flex:1;min-width:0;margin-left:10px}
.fd-search svg{position:absolute;left:8px;top:5px;width:13px;height:13px;color:#5b6071;pointer-events:none}
.fd-search input{display:block;width:100%;height:24px;background:#181b23;border:1px solid #242833;border-radius:5px;padding:0 8px 0 26px;font-size:11px}
.fd-search input::placeholder{color:#5b6071}
.fd-content{position:absolute;inset:78px 0 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#303644 transparent;padding:0 8px 12px}
.fd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.fd-column{min-width:0;display:flex;flex-direction:column;gap:10px}
.fd-card{min-width:0;border:1px solid #1e222d;border-radius:8px;background:var(--demo-card);padding:0 11px 10px}
.fd-card-head{height:33px;display:flex;align-items:center;gap:3px;min-width:0;white-space:nowrap}
.fd-card-head h3{font-size:12px;font-weight:550;margin:0;color:#ecedf2}
.fd-segment{height:22px;padding:0 8px!important;color:#5b6071!important;border-radius:5px;font-size:11px!important;font-weight:500!important;white-space:nowrap}
.fd-segment:hover{color:#bfc7d8!important}
.fd-segment[aria-selected=true]{color:#ecedf2!important;background:#1e212b}
.fd-row{position:relative;display:flex;align-items:center;gap:7px;min-height:26px}
.fd-check-label{display:flex;align-items:center;gap:8px;min-height:26px;flex:1;min-width:0;font-size:12px;color:#c0c3cd;cursor:pointer}
.fd-check{appearance:none;width:16px;height:16px;flex:none;padding:0;margin:0;border:1px solid #262b37;border-radius:4px;background:#181b23;display:grid;place-items:center;cursor:pointer}
.fd-check:checked{background:var(--demo-accent);border-color:var(--demo-accent)}
.fd-check:checked::after{content:"";width:7px;height:4px;border:solid #fff;border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg)}
.fd-gear{width:20px;height:22px;display:grid;place-items:center;color:#636e85!important;flex:none;border-radius:4px}
.fd-gear:hover,.fd-gear[aria-expanded=true]{color:var(--demo-accent)!important;background:#1b2330}
.fd-key{min-width:25px;padding:3px 5px!important;background:#1c2a42!important;border-radius:4px;font-size:9px!important;color:#8bb6ff!important;flex:none}
.fd-swatch{flex:none;width:14px;height:14px;border-radius:4px;border:1px solid #ffffff35!important;background:var(--swatch)!important;box-shadow:inset 0 0 0 1px #ffffff08}
.fd-range{display:block;min-height:40px;padding-top:3px;font-size:11px;color:#bfc3ce}
.fd-range-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:19px}
.fd-range output{font-size:10px;color:#9399a9;font-variant-numeric:tabular-nums}
.focus-demo input[type=range]{appearance:none;display:block;width:100%;height:16px;border:0;background:transparent;margin:0;padding:0;cursor:pointer;touch-action:pan-y}
.focus-demo input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:1px;background:linear-gradient(to right,var(--demo-accent) 0 var(--fill,0%),#272b37 var(--fill,0%) 100%)}
.focus-demo input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-3px;border:0;border-radius:50%;background:#fff}
.focus-demo input[type=range]::-moz-range-track{height:4px;background:#272b37}
.focus-demo input[type=range]::-moz-range-progress{height:4px;background:var(--demo-accent)}
.focus-demo input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#fff}
.fd-select{display:block;min-height:48px;padding-top:4px;font-size:11px;color:#bfc3ce}
.fd-select>span{display:block;margin-bottom:5px}
.focus-demo select,.fd-field{width:100%;height:25px;border:1px solid #242833;border-radius:5px;background:#181b23;padding:2px 7px;font-size:11px;color:#eceef5}
.focus-demo select{cursor:pointer}
.fd-note{font-size:10px;line-height:1.5;color:#72798b;margin:6px 0 0;overflow-wrap:anywhere}
.fd-empty{padding:14px 0;color:#737d92;font-size:11px;line-height:1.5}
.fd-empty-list{min-height:180px;margin:9px 0 7px;border:1px solid #222632;border-radius:5px;padding:10px;color:#69768d;font-size:11px}
.fd-empty-list.fd-players-list{min-height:325px}
.fd-actions{display:flex;gap:6px;margin:8px 0}
.fd-button{height:26px;flex:1;border:1px solid #29303d!important;border-radius:5px;background:#1a1e27!important;font-size:11px!important;padding:3px 8px!important}
.fd-button:hover:not(:disabled){border-color:#536786!important;background:#222c3d!important}
.fd-button-primary{background:#203353!important;border-color:#2d4975!important;color:#b0ccff!important}
.fd-button-danger{color:#fa919c!important}
.fd-button-block{display:block;width:100%;margin:8px 0!important}
.fd-profile-list{display:flex;flex-direction:column;min-height:138px;max-height:175px;overflow-y:auto;gap:3px}
.fd-profile-row{display:block;text-align:left;padding:7px!important;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px!important;color:#929aaf!important}
.fd-profile-row[aria-selected=true]{background:#1c2b45;color:#adcaff!important}
.fd-popup{position:absolute;z-index:8;width:245px;padding:12px;background:#171b23;border:1px solid #303748;border-radius:8px;box-shadow:0 12px 34px #0008;font-size:11px}
.fd-popup-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid #292f3d;color:#dce2ee;font-size:12px;font-weight:500}
.fd-popup-heading>span{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-popup-close{width:20px;height:20px;color:#8993a7!important;display:grid;place-items:center;border-radius:3px}
.fd-popup-close:hover{background:#2a3241;color:white!important}
.fd-popup select{margin-top:5px}
.fd-popup label{display:block;color:#919bad;margin-top:9px;font-size:11px}
.fd-popup .fd-check-label{display:flex}
.fd-popup-message{color:#9ab5de;font-size:10px;line-height:1.5;min-height:28px;margin-top:9px;overflow-wrap:anywhere}
.fd-popup-message.is-error{color:#f28896}
.focus-demo .fd-bind-popup{width:204px;height:164px;padding:0;border:1px solid #242833;border-radius:6px;background:var(--demo-card);box-shadow:0 6px 18px #0005}
.fd-bind-popup .fd-popup-heading{position:absolute;inset:0 9px auto;height:29px;margin:0;padding:0;border-bottom:1px solid #1a1d26;color:#9399a9;font-size:12px;font-weight:500}
.fd-bind-popup .fd-bind-choice{position:absolute;inset:34px 9px auto;display:grid;grid-template-columns:minmax(0,1fr) 91px 22px;align-items:center;gap:6px;height:24px;color:#9399a9;font-size:12px}
.focus-demo .fd-bind-key{height:24px;border-radius:4px;background:color-mix(in srgb,var(--demo-accent) 16%,transparent);color:color-mix(in srgb,var(--demo-accent) 75%,white);font-size:10px}
.fd-bind-key:hover{background:color-mix(in srgb,var(--demo-accent) 24%,transparent)}
.focus-demo .fd-bind-key.is-unbound{background:#181b23;border:1px solid #242833;color:#5b6071}
.focus-demo .fd-bind-key.is-listening{border:1px solid var(--demo-accent);color:var(--demo-accent)}
.focus-demo .fd-bind-clear{display:grid;place-items:center;height:24px;border:1px solid #242833;border-radius:4px;background:#181b23;color:#9399a9}
.fd-bind-clear:hover:not(:disabled){background:#1f232d}
.fd-bind-clear svg{width:12px;height:12px}
.fd-bind-modes{position:absolute;inset:65px 6px auto;display:grid;gap:1px}
.focus-demo .fd-bind-mode{display:flex;align-items:center;justify-content:space-between;height:21px;padding:0 9px;border-radius:4px;text-align:left;color:#9399a9;font-size:12px;font-weight:500}
.fd-bind-mode:hover:not(:disabled){background:#1f232d}
.focus-demo .fd-bind-mode[aria-checked=true]{background:color-mix(in srgb,var(--demo-accent) 13%,transparent);color:color-mix(in srgb,var(--demo-accent) 70%,white)}
.focus-demo .fd-bind-mode:disabled{opacity:1;color:#5b6071}
.fd-bind-mode svg{width:12px;height:12px;color:var(--demo-accent);visibility:hidden}
.fd-bind-mode[aria-checked=true] svg{visibility:visible}
.fd-bind-popup .fd-popup-message{position:absolute;inset:138px 9px auto;min-height:0;margin:0;padding-top:5px;border-top:1px solid #1a1d26;color:#5b6071;font-size:9px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-bind-popup .fd-popup-message.is-error{color:#f28896}
.fd-bind-popup .fd-popup-message.is-warning{color:#ffb547}
.focus-demo .fd-bind-key-only{height:95px}
.fd-bind-key-only .fd-popup-message{top:69px}
.fd-colour-row{display:flex;gap:7px;align-items:center;margin:4px 0}
.focus-demo input[type=color]{width:30px;height:25px;flex:none;border:1px solid #343c4e;border-radius:4px;padding:2px;background:#1f2633;cursor:pointer}
.fd-hex{min-width:0;flex:1;height:25px;letter-spacing:.05em!important;font-variant-numeric:tabular-nums;text-transform:uppercase}
.fd-colour-alpha{display:flex;align-items:center;gap:10px;color:#8b96aa;font-size:10px}
.fd-colour-alpha input{flex:1}
.fd-colour-alpha output{min-width:29px;text-align:right}
.fd-open{position:absolute;inset:0;display:grid;place-content:center;gap:18px;text-align:center;background:var(--demo-bg)}
.fd-open>img{width:30px;height:30px;justify-self:center}
.fd-open .fd-button{padding:8px 20px!important;height:35px}
.fd-search-context{color:#656f84;font-size:9px;margin-left:auto;overflow:hidden;text-overflow:ellipsis}
.fd-toast{position:absolute;z-index:10;bottom:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;padding:9px 14px;background:#202a3b;color:#c6d8f4;border:1px solid #384c6b;border-radius:6px;font-size:11px;box-shadow:0 6px 20px #0006;pointer-events:none}
.fd-modal-backdrop{position:absolute;inset:0;z-index:9;background:#04070bb8;display:grid;place-items:center;padding:32px}
.fd-modal{width:340px;max-width:100%;padding:19px;border:1px solid #323b4e;border-radius:9px;background:#161c27;color:#b6c3d8;font-size:12px;line-height:1.5}
.fd-modal h3{margin:0 0 8px;color:#e9edf5;font-size:14px}
.fd-modal .fd-actions{margin:18px 0 0}
@media(max-width:740px){
 .hero:has(.is-interactive){min-height:870px;max-height:none;height:100svh}
 .character-stage:has(.is-interactive){top:90px;left:0;transform:none;width:100%;height:780px;max-height:none;aspect-ratio:auto}
 .character-stage:has(.is-interactive)>.bacon-character,.character-stage:has(.is-interactive)>.bacon-grip{object-fit:contain;object-position:50% 0}
 .held-menu.is-interactive{left:12px;top:180px;width:calc(100% - 24px);height:560px;aspect-ratio:auto;z-index:4}
 .focus-demo{width:100%;height:100%;transform:none;font-size:12px}
 .fd-titlebar{height:38px;padding-inline:12px}
 .fd-nav{height:72px;flex-direction:column;align-items:stretch;gap:4px;padding:0 5px 6px}
 .fd-tabs{display:flex;justify-content:space-between;gap:0;overflow-x:auto;scrollbar-width:none;min-height:29px}
 .fd-tab{padding:7px 6px!important;font-size:11px!important}
 .fd-search{margin-left:2px;flex:auto}
 .fd-search input{height:27px;font-size:12px}
 .fd-search svg{top:7px}
 .fd-content{inset:118px 0 0;padding:0 8px 12px}
 .fd-grid{grid-template-columns:1fr;gap:9px}
 .fd-card-head{height:37px}
 .fd-row,.fd-check-label{min-height:34px}
 .fd-check{width:18px;height:18px}
 .fd-check-label{font-size:12px}
 .fd-gear{height:30px;width:30px}
 .fd-swatch{width:20px;height:20px}
 .fd-range{min-height:49px;font-size:12px;padding-top:5px}
 .focus-demo input[type=range]{height:23px}
 .focus-demo input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px}
 .fd-range output{font-size:11px}
 .fd-select{min-height:61px;font-size:12px}
 .focus-demo select,.fd-field{height:32px;font-size:12px}
 .fd-key{font-size:10px!important;min-height:24px;padding-inline:7px!important}
 .fd-popup{width:255px;padding:12px}
 .fd-popup label{font-size:12px}
 .fd-popup .fd-button{height:34px}
 .fd-button{min-height:32px}
 .fd-note{font-size:11px}
 .fd-popup-message{font-size:11px}
 .fd-toast{max-width:calc(100% - 24px);white-space:normal}
}