@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-vietnamese-wght-normal-BUzh504Q.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-ext-wght-normal-CcLUaPy7.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-wght-normal-DLoelf7F.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/atkinson-hyperlegible-latin-ext-400-normal-DRk46D-x.woff2) format("woff2"),url(/assets/atkinson-hyperlegible-latin-ext-400-normal-Bbz-b3yf.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/atkinson-hyperlegible-latin-400-normal-BrHNak5F.woff2) format("woff2"),url(/assets/atkinson-hyperlegible-latin-400-normal-BbWidj28.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/atkinson-hyperlegible-latin-ext-700-normal-BoVPHkS0.woff2) format("woff2"),url(/assets/atkinson-hyperlegible-latin-ext-700-normal-CKkU2Dpt.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/atkinson-hyperlegible-latin-700-normal-GZI4o3u0.woff2) format("woff2"),url(/assets/atkinson-hyperlegible-latin-700-normal-BK6Glc0m.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ultra: #2016c9;--ink: #140e78;--ink-soft: #1a13a0;--paper: #f6f4ff;--muted: #cfccf8;--signal: #ffd60a;--danger: #ffb3bc;--p1: #ff5fa2;--p2: #3de0c4;--p3: #ffd60a;--p4: #ff8a3d;--display: "Bricolage Grotesque Variable", "Segoe UI", sans-serif;--body: "Atkinson Hyperlegible", "Segoe UI", sans-serif;--mono: ui-monospace, "Cascadia Code", Consolas, monospace;--step--1: .875rem;--step-0: 1.0625rem;--step-1: 1.375rem;--step-2: 1.875rem;--step-3: clamp(2.25rem, 5vw, 3.25rem);--step-4: clamp(3rem, 9vw, 6.25rem);--page: 72rem}*{box-sizing:border-box}html{background:var(--ultra);-webkit-text-size-adjust:100%}body{margin:0;background:var(--ultra);color:var(--paper);font:400 var(--step-0) / 1.55 var(--body)}h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance}h1{font-size:var(--step-3);font-weight:800;letter-spacing:-.02em}h2{font-size:var(--step-2);font-weight:700;letter-spacing:-.01em}h3{font-size:var(--step-1);font-weight:700}p{margin:0;max-width:62ch}a{color:inherit;text-underline-offset:.18em}:focus-visible{outline:3px solid var(--signal);outline-offset:2px}code,.mono{font-family:var(--mono);font-size:.92em}.shell{width:min(100% - 2.5rem,var(--page));margin-inline:auto}.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.25rem}.wordmark{display:inline-flex;align-items:center;gap:.6rem;font:800 1.5rem / 1 var(--display);letter-spacing:-.02em;text-decoration:none}.wordmark-dots{display:inline-grid;grid-template-columns:repeat(2,.5rem);gap:.18rem}.wordmark-dots i{width:.5rem;height:.5rem;border-radius:50%}.top nav{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}.top nav a{text-decoration:none}.top nav a:hover{text-decoration:underline}.link-button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:0}.link-button:hover{text-decoration:underline}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1.1rem;border:2px solid var(--paper);border-radius:.3rem;background:transparent;color:var(--paper);cursor:pointer;font:700 var(--step-0) / 1.1 var(--body);text-decoration:none}.btn:hover{background:var(--ink)}.btn:disabled{cursor:progress;opacity:.6}.btn-primary{background:var(--signal);border-color:var(--signal);color:var(--ink)}.btn-primary:hover{background:var(--paper);border-color:var(--paper)}.btn-small{min-height:2.25rem;padding:.25rem .7rem;font-size:var(--step--1)}.hero{padding-block:clamp(2rem,6vw,4.5rem) 0}.hero h1{font-size:var(--step-4);line-height:.95;letter-spacing:-.035em;max-width:14ch}.hero-lede{margin-top:1.25rem;font-size:var(--step-1);line-height:1.35;max-width:44ch}.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.75rem}.stage{margin-top:clamp(2rem,5vw,3.5rem)}.stage-screen{aspect-ratio:21 / 8;min-height:11rem;width:100%;background:var(--paper);color:var(--ink);border-radius:.3rem .3rem 0 0;padding:clamp(1rem,3vw,2rem);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.stage-screen strong{font:800 clamp(1.5rem,4.5vw,3.25rem) / 1 var(--display);letter-spacing:-.02em;max-width:18ch}.stage-live{align-self:flex-start;background:var(--ink);color:var(--signal);padding:.15rem .6rem;border-radius:.2rem;font-weight:700}.ports{display:grid;grid-template-columns:repeat(4,1fr)}.port{--c: var(--paper);min-height:6.5rem;padding:.75rem 1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;border:3px solid var(--c);background:transparent;color:var(--paper);min-width:0}.port+.port{border-left-width:0}.port[data-slot="0"]{--c: var(--p1)}.port[data-slot="1"]{--c: var(--p2)}.port[data-slot="2"]{--c: var(--p3)}.port[data-slot="3"]{--c: var(--p4)}.port-filled{background:var(--c);color:var(--ink)}.port-number{font:800 var(--step-1) / 1 var(--display)}.port-name{overflow-wrap:anywhere;font-weight:700}.port-name-empty{font-weight:400;opacity:.85}.stage .port:first-child{border-bottom-left-radius:.3rem}.stage .port:last-child{border-bottom-right-radius:.3rem}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,4vw,3rem);padding:clamp(3rem,7vw,5rem) 0;margin:0;list-style:none;counter-reset:step}.steps li{counter-increment:step}.steps li:before{content:counter(step);display:block;font:800 var(--step-3) / 1 var(--display);color:var(--signal);margin-bottom:.5rem}.steps h2{font-size:var(--step-1);margin-bottom:.4rem}.foot{padding-block:2rem 3rem;color:var(--muted);font-size:var(--step--1)}.narrow{width:min(100% - 2.5rem,27rem);margin-inline:auto;padding-block:clamp(1.5rem,6vw,4rem)}.form{display:grid;gap:1rem;margin-top:1.5rem}.field{display:grid;gap:.3rem}.field label{font-weight:700}.field small{color:var(--muted)}input[type=text],input[type=email],input[type=password],select{width:100%;min-height:2.75rem;padding:.5rem .75rem;border:2px solid var(--muted);border-radius:.3rem;background:var(--ink);color:var(--paper);font:inherit}input:focus{border-color:var(--signal)}.code-input{font:800 var(--step-2) / 1 var(--display)!important;letter-spacing:.08em;text-align:center;text-transform:uppercase}.error{color:var(--ink);background:var(--danger);padding:.5rem .75rem;border-radius:.3rem}.success{color:var(--ink);background:var(--p2);padding:.5rem .75rem;border-radius:.3rem}.note{color:var(--muted)}.dash{padding-block:1rem 4rem;display:grid;gap:clamp(2.5rem,6vw,4rem)}.dash-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem}.status-live{color:var(--signal)}.status-line{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin-top:.5rem;color:var(--muted)}.section-head{margin-bottom:1rem}.section-head p{margin-top:.35rem;color:var(--muted)}.url-list{display:grid;border-top:2px solid var(--muted)}.url-row{display:grid;grid-template-columns:11rem 1fr auto;gap:.25rem 1rem;align-items:center;padding-block:.8rem;border-bottom:2px solid var(--muted)}.url-row-name{font-weight:700}.url-row-hint{display:block;font-weight:400;font-size:var(--step--1);color:var(--muted)}.url-row code{overflow-wrap:anywhere;min-width:0}.callout{margin-top:1rem;padding:.75rem 1rem;background:var(--ink);border-left:6px solid var(--signal);border-radius:0 .3rem .3rem 0}.callout p+p{margin-top:.5rem}.row-list{display:grid;border-top:2px solid var(--muted)}.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:.7rem;border-bottom:2px solid var(--muted)}.row-main{min-width:0;overflow-wrap:anywhere}.row-sub{display:block;color:var(--muted);font-size:var(--step--1)}.row-actions{display:flex;gap:.5rem;flex-wrap:wrap}.empty{padding:1rem 0;color:var(--muted)}.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.play{padding-block:.5rem 3rem;display:grid;gap:1rem}.video-frame{position:relative;width:100%;aspect-ratio:16 / 9;max-height:78vh;background:var(--ink);border-radius:.3rem;overflow:hidden}.video-frame canvas{display:block;width:100%;height:100%;object-fit:contain}.video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;padding:1rem;text-align:center;background:var(--ink)}.play-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem}.meters{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;color:var(--muted)}.meters b{color:var(--paper)}.pad-panel{--c: var(--paper);border:3px solid var(--c);border-radius:.3rem;padding:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}.pad-panel[data-slot="0"]{--c: var(--p1)}.pad-panel[data-slot="1"]{--c: var(--p2)}.pad-panel[data-slot="2"]{--c: var(--p3)}.pad-panel[data-slot="3"]{--c: var(--p4)}.pad-title{font:800 var(--step-1) / 1.1 var(--display);color:var(--c)}.pad-buttons{display:flex;gap:.3rem;flex-wrap:wrap}.pad-buttons i{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--muted)}.pad-buttons i.on{background:var(--c);border-color:var(--c)}@media(max-width:720px){.ports{grid-template-columns:repeat(2,1fr)}.port+.port{border-left-width:3px}.port:nth-child(2n){border-left-width:0}.port:nth-child(n+3){border-top-width:0}.steps{grid-template-columns:1fr}.url-row{grid-template-columns:1fr auto}.url-row code{grid-column:1 / -1;grid-row:2}}@media(prefers-reduced-motion:no-preference){.port-filled{transition:background-color .12s ease-out}}
