@layer components{.cmx{color-scheme:dark;--site:#0b0b0d;--base:#111113;--panel:#17171a;--surface:#1c1c20;--raised:#232327;--raised-hover:#2b2b30;--hover:rgb(255 255 255/6%);--line:rgb(255 255 255/8%);--line-soft:rgb(255 255 255/4.5%);--hi:#f5f5f7;--mid:#a1a1aa;--lo:#8a8a93;--disabled:#5d5d66;--accent:#e815c0;--accent-fill:#c4119f;--accent-text:#ff73dc;--accent-dim:rgb(232 21 192/16%);--success:#34d399;--warning:#f59e0b;--danger:#ff6a6a;--twitch:#772ce8;--font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;--font-brand:var(--font-sans),-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;--ease:cubic-bezier(0.2,0,0,1);--ease-out:cubic-bezier(0.16,1,0.3,1);--dur-fast:120ms;--relief:0 1px 2px #0006,inset 0 1px 0 #ffffff0f;--sunken:inset 0 1px 2px #0005;--float:0 12px 32px #000a,0 2px 6px #0006;--modal:0 24px 64px #000c,0 2px 8px #0008;position:relative;min-height:100svh;background:var(--base);color:var(--hi);font-family:var(--font-ui);font-size:14px;-webkit-font-smoothing:antialiased}.cmx.site{background:var(--site)}.cmx{--background:var(--base);--foreground:var(--hi);--card:var(--panel);--card-foreground:var(--hi);--popover:var(--surface);--popover-foreground:var(--hi);--primary:var(--accent-fill);--primary-foreground:#fff;--secondary:var(--raised);--secondary-foreground:var(--hi);--muted:var(--surface);--muted-foreground:var(--mid);--destructive:var(--danger);--border:var(--line);--input:var(--line);--ring:var(--accent-text)}.cmx *,.cmx :after,.cmx :before{box-sizing:border-box}.cmx :where(button,input,select){font:inherit}.cmx :focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}.cmx .tabular{font-variant-numeric:tabular-nums}.cmx .brand{font-family:var(--font-brand)}.cmx-scroll{scrollbar-width:thin;scrollbar-color:rgb(255 255 255/14%) transparent}.cmx-t{transition:opacity .14s var(--ease),transform .14s var(--ease),filter .14s var(--ease)}html[data-cmx-lang=out] .cmx-t{opacity:0;transform:translateY(-4px);filter:blur(3px)}html[data-cmx-lang=in] .cmx-t{animation:cmx-text-in .46s var(--ease-out) both}@keyframes cmx-text-in{0%{opacity:0;transform:translateY(6px);filter:blur(4px)}}.cmx-panel{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:18px;background:var(--panel)}.cmx-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 8px 6px 16px}.cmx-panel-title{display:flex;align-items:baseline;gap:8px;min-width:0;margin:0;color:var(--hi);font-size:14px;font-weight:600;white-space:nowrap}.cmx-panel-title small{color:var(--lo);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}.cmx-label{color:var(--lo);font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}.cmx-row{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--hi);text-align:left;text-decoration:none;transition:background-color .18s var(--ease),box-shadow .18s var(--ease)}:is(a,button).cmx-row:hover:not(:disabled){background:color-mix(in srgb,var(--surface) 55%,var(--raised));box-shadow:inset 0 0 0 1px var(--line)}.cmx-btn{--fill:var(--accent-fill);position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border:0;border-radius:10px;color:#fff;font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;background:linear-gradient(180deg,#ffffff29,transparent 58%),var(--fill);box-shadow:0 1px 3px #0008,inset 0 1px 0 #ffffff4d,inset 0 -1px 0 color-mix(in srgb,var(--fill) 62%,black);transition:background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.cmx-btn svg{width:16px;height:16px;flex:none}.cmx-btn:hover:not(:disabled){--fill:color-mix(in srgb,var(--accent-fill) 88%,white)}.cmx-btn.twitch{--fill:var(--twitch)}.cmx-btn.twitch:hover:not(:disabled){--fill:color-mix(in srgb,var(--twitch) 88%,white)}.cmx-btn.danger,.cmx-btn.secondary{background:var(--raised);color:var(--hi);box-shadow:var(--relief)}.cmx-btn.danger:hover:not(:disabled),.cmx-btn.secondary:hover:not(:disabled){background:var(--raised-hover)}.cmx-btn.danger{color:var(--danger)}.cmx-btn.danger.solid{--fill:#d93d42;color:#fff;box-shadow:0 1px 3px #0008,inset 0 1px 0 #ffffff4d,inset 0 -1px 0 color-mix(in srgb,var(--fill) 62%,black)}.cmx-btn.danger.solid,.cmx-btn.danger.solid:hover:not(:disabled){background:linear-gradient(180deg,#ffffff29,transparent 58%),var(--fill)}.cmx-btn.danger.solid:hover:not(:disabled){--fill:color-mix(in srgb,#d93d42 88%,white)}.cmx-btn.tool{padding:0 10px;background:transparent;box-shadow:none;color:var(--mid)}.cmx-btn.tool:hover:not(:disabled){background:var(--hover);color:var(--hi)}.cmx-btn.tool:active:not(:disabled){background:var(--accent-dim)}.cmx-btn.compact{min-height:30px;padding:0 10px;border-radius:8px;font-size:12.5px}.cmx-btn.compact svg{width:15px;height:15px}.cmx-btn.large{min-height:48px;padding:0 18px;border-radius:12px;font-size:15px}.cmx-btn.icon{width:32px;min-height:32px;padding:0;border-radius:8px}.cmx-btn .aside{opacity:.6;font-variant-numeric:tabular-nums}.cmx-btn:active:not(:disabled){transform:scale(.985);box-shadow:var(--sunken)}.cmx-btn:disabled{cursor:default;opacity:.4;box-shadow:none}.cmx-btn .cmx-btn-arrow{transition:transform .26s var(--ease-out)}.cmx-btn:hover .cmx-btn-arrow{transform:translateX(3px)}.cmx-spinner{width:14px;height:14px;border:2px solid rgb(255 255 255/30%);border-top-color:currentcolor;border-radius:50%;animation:cmx-spin .8s linear infinite}@keyframes cmx-spin{to{transform:rotate(1turn)}}.cmx-seg{min-width:0;margin:0;padding:0;border:0}.cmx-seg-track{position:relative;display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));padding:3px;border-radius:10px;background:var(--base);box-shadow:var(--sunken)}.cmx-seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--count));border-radius:7px;background:var(--raised);box-shadow:var(--relief);transform:translateX(calc(var(--active) * 100%));transition:transform .22s var(--ease);pointer-events:none}.cmx-seg-option{position:relative;min-width:0}.cmx-seg-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.cmx-seg-option span{display:flex;align-items:center;justify-content:center;min-height:30px;padding:0 8px;border-radius:7px;color:var(--mid);font-size:12.5px;font-weight:600;white-space:nowrap;pointer-events:none;transition:color .18s var(--ease)}.cmx-seg-option input:checked+span{color:var(--hi)}.cmx-seg-option input:focus-visible+span{outline:2px solid var(--accent-text);outline-offset:-2px}.cmx-lang{position:relative;isolation:isolate;display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--base);box-shadow:var(--sunken)}.cmx-lang:before{content:"";position:absolute;z-index:0;inset:3px auto 3px 3px;width:calc((100% - 8px) / 2);border-radius:7px;background:var(--raised);box-shadow:var(--relief);transform:translateX(calc((100% + 2px) * var(--seg-index, 0)));transition:transform .24s var(--ease);pointer-events:none}.cmx-lang :is(button,a){position:relative;z-index:1;display:grid;place-items:center;width:34px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;cursor:pointer}.cmx-lang svg{display:block;width:20px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgb(0 0 0/30%);opacity:.5;filter:saturate(.6);transition:opacity .22s,filter .22s}.cmx-lang :is([aria-pressed=true],[aria-current=true]) svg,.cmx-lang :is(button,a):hover svg{opacity:1;filter:none}.cmx-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}.cmx-toggle-text{display:grid;gap:2px;min-width:0}.cmx-toggle-text strong{color:var(--hi);font-size:13.5px;font-weight:600}.cmx-toggle-text small{color:var(--lo);font-size:12px}.cmx-toggle-hit{position:relative;display:grid;flex:none;place-items:center;width:44px;height:32px}.cmx-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.cmx-toggle-track{width:28px;height:16px;padding:2px;border-radius:999px;background:rgb(255 255 255/10%);pointer-events:none;transition:background .16s var(--ease)}.cmx-toggle-track i{display:block;width:12px;height:12px;border-radius:50%;background:var(--mid);transition:transform .16s var(--ease),background .16s var(--ease)}.cmx-toggle input:checked+.cmx-toggle-track{background:var(--accent)}.cmx-toggle input:checked+.cmx-toggle-track i{transform:translateX(12px);background:#fff}.cmx-toggle input:focus-visible+.cmx-toggle-track{outline:2px solid var(--accent-text);outline-offset:3px}.cmx-stepped{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;height:30px;border-radius:999px;background:var(--raised);box-shadow:inset 0 1px 0 rgb(255 255 255/5%),inset 0 -1px 0 rgb(0 0 0/20%);overflow:hidden;transition:box-shadow var(--dur-fast) var(--ease)}.cmx-stepped:focus-within{box-shadow:0 0 0 2px var(--accent-dim),inset 0 1px 0 rgb(255 255 255/5%)}.cmx-stepped-fill{top:3px;bottom:3px;left:3px;width:calc(21px + (100% - 27px) * var(--fraction));border-radius:999px;background:var(--hover);box-shadow:inset 0 1px 0 rgb(255 255 255/7%),0 1px 1px rgb(0 0 0/18%);transition:width .22s var(--ease)}.cmx-stepped-fill,.cmx-stepped-marks{position:absolute;pointer-events:none}.cmx-stepped-marks{inset:0}.cmx-stepped-marks i{position:absolute;top:50%;left:calc(13.5px + (100% - 27px) * var(--mark));width:2px;height:8px;border-radius:1px;background:rgb(255 255 255/16%);transform:translate(-50%,-50%);transition:background var(--dur-fast) var(--ease),height var(--dur-fast) var(--ease)}.cmx-stepped-marks i.passed{background:rgb(255 255 255/28%)}.cmx-stepped-marks i.current{height:12px;background:var(--accent-text)}.cmx-stepped-marks i:first-child,.cmx-stepped-marks i:last-child{opacity:.35}.cmx-stepped-label,.cmx-stepped-value{position:relative;z-index:2;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none}.cmx-stepped-label{padding-left:12px;color:var(--mid)}.cmx-stepped-value{padding-right:12px;color:var(--hi)}.cmx-stepped input{position:absolute;inset:0 12px;z-index:3;width:calc(100% - 24px);height:100%;margin:0;background:transparent;cursor:ew-resize;opacity:0;touch-action:pan-y}.cmx-field{display:grid;gap:6px;min-width:0}.cmx-field>span{color:var(--mid);font-size:12px;font-weight:600}.cmx-input,.cmx-select{width:100%;min-height:34px;padding:0 10px;border:1px solid transparent;border-radius:8px;background:var(--raised);color:var(--hi);font-size:13.5px;box-shadow:inset 0 1px 0 #ffffff08;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}.cmx-input.large{min-height:48px;padding:0 14px;border-radius:12px;font-size:16px}.cmx-input::placeholder{color:var(--lo)}.cmx-input:hover:not(:disabled),.cmx-select:hover{background:var(--raised-hover)}.cmx-input:focus,.cmx-select:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 72%,var(--line));box-shadow:0 0 0 3px var(--accent-dim)}.cmx-input[aria-invalid=true]{border-color:var(--danger)}.cmx-input:disabled{opacity:.5}.cmx-hint{margin:0;color:var(--lo);font-size:12px}.cmx-hint.error{color:var(--danger)}.cmx-chip{display:inline-flex;flex:none;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;background:var(--hover);color:var(--mid);font-size:12px;font-weight:600;white-space:nowrap}.cmx-chip.success{background:rgb(52 211 153/14%);color:var(--success)}.cmx-chip svg{width:13px;height:13px}.cmx-chip-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.cmx-chip-row::-webkit-scrollbar{display:none}.cmx-chip-row.overflowing{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}.cmx-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--disabled)}.cmx-dot.live{background:var(--success)}.cmx-dot.warn{background:var(--warning)}.cmx-dot.error{background:var(--danger)}.cmx-notice{--tone:var(--warning);display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:16px;background:color-mix(in srgb,var(--tone) 7%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 22%,transparent)}.cmx-notice.danger{--tone:var(--danger)}.cmx-notice.neutral{--tone:var(--mid)}.cmx-notice-icon{display:grid;flex:none;place-items:center;width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--tone) 16%,transparent);color:var(--tone)}.cmx-notice-icon svg{width:16px;height:16px}.cmx-notice strong{display:block;color:var(--hi);font-size:14px;font-weight:600}.cmx-notice p{margin:2px 0 0;color:var(--mid);font-size:13px}.cmx-skeleton{border-radius:12px;background:rgb(255 255 255/5%);animation:cmx-skeleton 1.6s var(--ease) infinite}@keyframes cmx-skeleton{50%{opacity:.5}}.cmx-dialog-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgb(0 0 0/55%);backdrop-filter:blur(4px);animation:cmx-fade-in .18s var(--ease) both}.cmx-dialog{display:flex;flex-direction:column;width:min(100%,460px);max-height:min(86svh,720px);border-radius:18px;background:var(--panel);box-shadow:0 0 0 1px var(--line),var(--modal);animation:cmx-dialog-in .26s var(--ease) both;text-align:left}.cmx-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 12px 4px 20px}.cmx-dialog-head h2{margin:6px 0 0;font-size:16px;font-weight:650}.cmx-dialog-head p{margin:4px 0 0;color:var(--mid);font-size:13px;line-height:1.5}.cmx-dialog-body{flex:1;min-height:0;overflow-y:auto;padding:8px 20px 16px}.cmx-dialog-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 20px 18px}@keyframes cmx-fade-in{0%{opacity:0}}@keyframes cmx-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media (max-width:640px){.cmx-dialog-backdrop{place-items:end stretch;padding:0}.cmx-dialog{width:100%;max-height:88svh;border-radius:18px 18px 0 0}}.cmx-start{display:flex;flex-direction:column;min-height:100svh}.cmx-start-bar{display:grid;flex:none;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:12px;width:min(100% - 32px,1320px);height:56px;margin-inline:auto}.cmx-start-bar>:last-child{display:flex;align-items:center;justify-self:end;gap:8px}.cmx-start-back{position:relative;display:inline-flex;align-items:center;justify-self:start;gap:6px;height:32px;margin-left:-10px;padding:0 10px;border-radius:8px;color:var(--mid);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.cmx-start-back:hover{background:var(--hover);color:var(--hi)}.cmx-start-back:active{background:var(--accent-dim)}.cmx-start-back svg{flex:none;width:15px;height:15px}.cmx-brand{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 8px;border-radius:10px;color:var(--hi);text-decoration:none}.cmx-brand>*{flex:none}.cmx-brand img{display:block;width:auto;height:20px}.cmx-brand i{width:1px;height:14px;background:var(--disabled)}.cmx-brand span{font-family:var(--font-brand);font-size:14px;font-weight:600;letter-spacing:-.01em}@media (min-width:640px){.cmx-start-bar{width:min(100% - 48px,1320px);height:60px}.cmx-brand{gap:10px}.cmx-brand img{height:22px}.cmx-brand span{font-size:15px}}@media (max-width:519.98px){.cmx-start-back>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}@media (max-width:374.98px){.cmx-brand{padding-inline:0}}@media (max-width:339.98px){.cmx-brand i,.cmx-brand span{display:none}}@media (pointer:coarse){.cmx-start-back:before{content:"";position:absolute;inset:-6px 0}}.cmx-start-body{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:28px;width:min(100% - 32px,24rem);margin-inline:auto;padding-block:16px 72px;text-align:center}.cmx-start-mark{margin:0}.cmx-start-mark :is(img,svg){display:block;width:auto;max-width:100%;height:var(--mark-h);margin-inline:auto;object-fit:contain}.cmx-start-lede{margin:18px 0 0;color:var(--mid);font-size:16px;line-height:1.55;text-wrap:pretty}.cmx-start-actions{display:grid;gap:10px;width:100%;text-align:left}.cmx-start-actions>.cmx-btn{width:100%}.cmx-start-note{margin:0;line-height:1.5;text-wrap:pretty}.cmx-credit,.cmx-start-note{color:var(--lo);font-size:12px}.cmx-credit{position:fixed;bottom:12px;left:50%;z-index:30;display:none;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-soft);white-space:nowrap;transform:translateX(-50%)}.cmx-credit a{color:var(--mid);font-weight:600;text-decoration:none;transition:color var(--dur-fast) var(--ease)}.cmx-credit a:hover{color:var(--hi)}@media (min-width:640px){.cmx-credit{display:inline-flex}.cmx-credit.tall{display:none}}@media (min-width:640px) and (min-height:880px){.cmx-credit.tall{display:inline-flex}}@media (pointer:coarse){.cmx-btn.compact:after,.cmx-btn.icon:after{content:"";position:absolute;inset:-7px 0}}@media (prefers-reduced-motion:reduce){.cmx *,.cmx :after,.cmx :before{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.cmx .cmx-skeleton{animation:none}.cmx-btn:active:not(:disabled){transform:none}}}