.architecture-page{box-sizing:border-box;width:min(1180px,100vw - 40px);box-shadow:none;color:#182230;background:#fff;border:1px solid #cbd4dc;border-radius:0;margin:0 auto 68px;padding:32px}.architecture-hero{justify-content:space-between;align-items:end;gap:28px;margin:10px 0 30px;display:flex}.architecture-hero>div:first-child{min-width:0}.architecture-section-kicker,.architecture-node-eyebrow,.architecture-component-card-top>span:last-child{color:#44657f;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:800}.architecture-hero h1,.architecture-diagram-heading h2,.architecture-components-intro h2,.ingestion-diagram-heading h3{color:#1b2734;letter-spacing:-.025em;margin:8px 0 0}.architecture-hero h1{text-align:left;max-width:760px;font-size:clamp(30px,4vw,48px);line-height:1.04}.architecture-hero p{color:#566777;max-width:710px;margin:14px 0 0;font-size:16px;line-height:1.55}.architecture-icons-credit{color:#355d7f;white-space:nowrap;border:1px solid #aebdca;border-radius:0;flex:none;padding:9px 12px;font-size:12px;text-decoration:none}.architecture-icons-credit:hover{color:#1d4263;border-color:#547a9b}.architecture-tabs{box-sizing:border-box;scrollbar-gutter:stable;background:0 0;border:0;border-bottom:1px solid #b9c6d0;border-radius:0;gap:0;width:100%;max-width:100%;margin:0 0 24px;padding:0;display:flex;overflow-x:auto}.architecture-tabs button{color:#526272;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-bottom:3px solid #0000;flex:none;padding:9px 16px 8px;font-size:13px;font-weight:700}.architecture-tabs button:hover{color:#182230}.architecture-tabs button.is-active{color:#18374f;border-bottom-color:#1f6f9f}.architecture-tabs button:focus-visible{outline-offset:-2px;outline:2px solid #4e7897}.architecture-diagram-shell,.architecture-components{box-shadow:none;background:#fff;border:1px solid #c4ced8;border-radius:0}.architecture-diagram-shell{padding:24px}.architecture-diagram-heading,.architecture-components-intro{justify-content:space-between;align-items:end;gap:24px;display:flex}.architecture-diagram-heading h2,.architecture-components-intro h2{font-size:21px}.architecture-legend{color:#526474;white-space:nowrap;gap:14px;font-size:11px;display:flex}.architecture-legend span{align-items:center;gap:6px;display:inline-flex}.architecture-legend-line{background:#486f8c;width:18px;height:1px;display:inline-block}.architecture-legend-line--dashed{background:repeating-linear-gradient(90deg,#765184 0 4px,#0000 4px 7px)}.architecture-diagram-scroll{padding:22px 0 4px;overflow-x:auto}.architecture-diagram{min-width:1110px}.architecture-lane-label{color:#536c80;letter-spacing:.08em;text-transform:uppercase;margin:12px 0 7px;font-size:11px;font-weight:800}.architecture-lane{background:#f9fbfc;border:1px solid #c7d0d8;border-radius:0;grid-template-columns:150px 48px 150px 48px 150px 48px 150px 48px 150px;align-items:stretch;padding:14px;display:grid}.architecture-lane--processing{background:#f7fafb}.architecture-lane--delivery{background:#faf9fb}.architecture-node{box-sizing:border-box;background:#fff;border:1px solid #c6d1da;border-radius:0;align-items:center;gap:10px;min-height:96px;padding:11px;display:flex}.architecture-node--client{background:#f4f8fb;border-color:#7396ae}.architecture-service-icon{object-fit:contain;flex:0 0 42px;width:42px;height:42px}.architecture-node .architecture-service-icon{flex-basis:36px;width:36px;height:36px}.architecture-browser-icon{color:#2f658c;border:1px solid #648ba7;border-radius:0;flex:0 0 36px;place-items:center;width:36px;height:36px;font-size:29px;font-weight:300;line-height:1;display:grid}.architecture-browser-icon--small{flex-basis:42px;width:42px;height:42px}.architecture-node-title{color:#1f2b36;margin-top:3px;font-size:13px;font-weight:750;line-height:1.2}.architecture-node-detail{color:#5a6976;margin-top:5px;font-size:10px;line-height:1.25}.architecture-arrow{color:#466f8b;flex-direction:column;justify-content:center;align-items:center;min-width:0;display:flex}.architecture-arrow span{color:#617180;text-align:center;max-width:48px;margin-bottom:4px;font-size:9px;line-height:1.1}.architecture-arrow i{font-size:23px;font-style:normal;line-height:1}.architecture-arrow--dashed{color:#80538a}.architecture-arrow--dashed i{border-bottom:1px dashed #80538a}.architecture-flow-notes{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;display:grid}.architecture-flow-notes p{color:#526474;background:#f5f8fa;border-left:2px solid #5b87a7;margin:0;padding:11px 12px;font-size:12px;line-height:1.5}.architecture-flow-notes b{color:#28628e}.architecture-components{padding:24px}.architecture-components-intro p{color:#566777;max-width:450px;margin:0;font-size:13px;line-height:1.55}.architecture-ingestion,.architecture-hosting{padding:28px}.architecture-overview-figure{margin-top:22px}.ingestion-reference-diagram{background:#fff;border:1px solid #c4ced8;margin:0;padding:16px}.architecture-diagram-image-scroll{overscroll-behavior-inline:contain;max-width:100%;overflow-x:auto}.ingestion-reference-diagram img{border:0;width:100%;height:auto;display:block}.ingestion-reference-diagram figcaption{color:#536171;border-top:1px solid #d7dee5;margin-top:13px;padding-top:12px;font-size:12px;line-height:1.55}.ingestion-reference-diagram code,.ingestion-walkthrough code{color:#255f89;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em}.ingestion-walkthrough{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;margin:22px 0 0;padding:0;list-style:none;display:grid}.ingestion-walkthrough li{border-top:1px solid #b9c6d0;grid-template-columns:27px minmax(0,1fr);gap:11px;padding:15px 0;display:grid}.ingestion-walkthrough li>span{color:#fff;background:#243444;border-radius:50%;place-items:center;width:22px;height:22px;font-size:11px;font-weight:800;display:grid}.ingestion-walkthrough h2{color:#273847;margin:1px 0 5px;font-family:Georgia,Times New Roman,serif;font-size:18px;line-height:1.25}.ingestion-walkthrough p{color:#526474;margin:0;font-family:Georgia,Times New Roman,serif;font-size:15px;line-height:1.65}@media (width<=760px){.architecture-page{width:min(100% - 24px,1180px);padding:18px}.architecture-hero,.architecture-diagram-heading,.architecture-components-intro{flex-direction:column;align-items:flex-start}.architecture-hero{margin-top:0}.architecture-legend{white-space:normal;flex-wrap:wrap}.architecture-diagram-shell,.architecture-components{padding:16px}.architecture-flow-notes,.ingestion-walkthrough{grid-template-columns:1fr}.architecture-ingestion,.architecture-hosting{padding:18px}.ingestion-reference-diagram{padding:8px}.architecture-diagram-image-scroll img{min-width:760px}.architecture-overview-figure .architecture-diagram-image-scroll img{min-width:900px}}.welcome-tutorial__overlay{z-index:2200;box-sizing:border-box;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#10161c8f;place-items:center;padding:28px;animation:.26s ease-out both tutorial-overlay-in;display:grid;position:fixed;inset:0}.welcome-tutorial{box-sizing:border-box;color:#20262c;background:#fff;border:1px solid #dce1e5;border-radius:16px;outline:none;width:min(1040px,100vw - 56px);min-height:590px;max-height:calc(100vh - 56px);animation:.52s cubic-bezier(.18,.9,.28,1.12) both tutorial-dialog-in;position:relative;overflow:hidden;box-shadow:0 34px 90px #080f1545}.welcome-tutorial__slide{grid-template-columns:minmax(0,1.42fr) minmax(300px,.9fr);min-height:590px;display:grid}.welcome-tutorial__slide--forward{animation:.36s cubic-bezier(.2,.76,.3,1) both tutorial-slide-forward}.welcome-tutorial__slide--backward{animation:.36s cubic-bezier(.2,.76,.3,1) both tutorial-slide-backward}.welcome-tutorial__media{background:#f4f6f7;border-right:1px solid #e4e8eb;place-items:center;min-width:0;padding:74px 34px 66px 70px;display:grid}.welcome-tutorial__image,.welcome-tutorial__placeholder{aspect-ratio:16/10;box-sizing:border-box;background:#e9edef;border:1px solid #cfd6db;border-radius:9px;width:100%;max-width:570px;box-shadow:0 18px 42px #1f2a3121}.welcome-tutorial__image{object-fit:contain;object-position:center;background:#dfe8f0;display:block}.welcome-tutorial__placeholder{place-items:center;padding:20px;display:grid;position:relative;overflow:hidden}.welcome-tutorial__placeholder-caption{color:#68747c;letter-spacing:.03em;background:#ffffffe0;border:1px solid #59656e38;border-radius:4px;padding:4px 7px;font-size:10px;font-weight:700;position:absolute;bottom:10px;right:12px}.welcome-tutorial__mock-window,.welcome-tutorial__mock-editor{background:#24292d;border:1px solid #4b535a;border-radius:5px;width:91%;height:82%;overflow:hidden;box-shadow:0 12px 20px #1f262b33}.welcome-tutorial__mock-toolbar{background:#15191c;border-bottom:1px solid #454c51;align-items:center;gap:5px;height:11%;padding:0 10px;display:flex}.welcome-tutorial__mock-toolbar span{background:#717b82;border-radius:50%;width:5px;height:5px}.welcome-tutorial__mock-toolbar b{background:#525b61;border-radius:2px;width:25%;height:4px;margin-left:7px}.welcome-tutorial__mock-transport{background:#30363b;border-bottom:1px solid #3d454a;align-items:center;gap:8px;height:16%;padding:0 11px;display:flex}.welcome-tutorial__mock-transport i{background:#dbe0e3;border-radius:50%;width:11px;height:11px}.welcome-tutorial__mock-transport em{background:#5f696f;border-radius:3px;width:24%;height:5px}.welcome-tutorial__mock-transport strong{background:#8aae91;border-radius:3px;width:16%;height:5px;margin-left:auto}.welcome-tutorial__mock-timeline{box-sizing:border-box;background-image:repeating-linear-gradient(90deg,#0000 0 46px,#ffffff12 47px 48px);grid-template-rows:repeat(4,1fr);height:73%;padding:6px 7px 8px;display:grid}.welcome-tutorial__mock-track{border-bottom:1px solid #41484d;grid-template-columns:18% 1fr;align-items:center;gap:7px;display:grid}.welcome-tutorial__mock-track span{color:#cbd2d6;background:#40494f;border-radius:3px;place-items:center;width:18px;height:18px;font-size:8px;font-style:normal;display:grid}.welcome-tutorial__mock-track i{opacity:.9;background:repeating-linear-gradient(90deg,#6f8798 0 3px,#8ca4b4 3px 5px,#0000 5px 8px);border-radius:2px;height:38%}.welcome-tutorial__mock-track--vocals i{background:repeating-linear-gradient(90deg,#a27678 0 4px,#c19799 4px 6px,#0000 6px 9px)}.welcome-tutorial__mock-track--drums i{background:repeating-linear-gradient(90deg,#77917e 0 3px,#91ad98 3px 5px,#0000 5px 11px)}.welcome-tutorial__mock-track--midi i{background:repeating-linear-gradient(90deg,#9b8d68 0 12px,#0000 12px 18px);height:50%}.welcome-tutorial__mock-editor-title{background:#171b1e;border-bottom:1px solid #454c51;align-items:center;gap:9px;height:17%;padding:0 12px;display:flex}.welcome-tutorial__mock-editor-title span,.welcome-tutorial__mock-editor-title b{background:#737e85;border-radius:3px;height:5px;display:block}.welcome-tutorial__mock-editor-title span{width:32%}.welcome-tutorial__mock-editor-title b{background:#89a58f;width:13%;margin-left:auto}.welcome-tutorial__mock-piano{grid-template-columns:13% 1fr;height:83%;display:grid}.welcome-tutorial__mock-keys{background:#e8eaeb;border-right:1px solid #5b6368;grid-template-rows:repeat(8,1fr);display:grid}.welcome-tutorial__mock-keys i{border-bottom:1px solid #aeb5b9}.welcome-tutorial__mock-notes{background-color:#272c30;background-image:repeating-linear-gradient(0deg,#0000 0 calc(12.5% - 1px),#ffffff14 calc(12.5% - 1px) 12.5%),repeating-linear-gradient(90deg,#0000 0 49px,#ffffff1a 50px 51px);position:relative}.welcome-tutorial__mock-notes i{left:var(--note-x);top:var(--note-y);width:var(--note-w);background:#88aa91;border-radius:2px;height:8%;min-height:5px;position:absolute;box-shadow:inset 0 0 0 1px #fff3}.welcome-tutorial__finish-visual{aspect-ratio:1.3;align-content:center;place-items:center;gap:25px;width:min(100%,410px);display:grid}.welcome-tutorial__finish-mark{color:#54775d;background:#e6f0e8;border-radius:50%;place-items:center;width:108px;height:108px;display:grid;box-shadow:0 0 0 12px #e6f0e899}.welcome-tutorial__finish-lines{gap:9px;width:68%;display:grid}.welcome-tutorial__finish-lines span{background:#d7dde0;border-radius:4px;height:7px}.welcome-tutorial__finish-lines span:nth-child(2){justify-self:center;width:78%}.welcome-tutorial__finish-lines span:nth-child(3){justify-self:center;width:52%}.welcome-tutorial__copy{align-self:center;padding:88px 72px 88px 48px}.welcome-tutorial__eyebrow{color:#5d7664;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-size:11px;font-weight:800;display:block}.welcome-tutorial__copy h2{color:#20262c;letter-spacing:-.025em;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(29px,3.1vw,41px);font-weight:500;line-height:1.08}.welcome-tutorial__copy p{color:#59636a;margin:20px 0 23px;font-size:15px;line-height:1.65}.welcome-tutorial__copy ul{gap:12px;margin:0;padding:0;list-style:none;display:grid}.welcome-tutorial__copy li{color:#3f484e;padding-left:19px;font-size:13px;line-height:1.52;position:relative}.welcome-tutorial__copy li:before{content:"";background:#6f8f77;border-radius:50%;width:5px;height:5px;position:absolute;top:.58em;left:1px}.welcome-tutorial__skip{z-index:3;color:#667078;font:inherit;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #0000;padding:7px 2px;font-size:12px;font-weight:700;position:absolute;top:23px;right:27px}.welcome-tutorial__skip:hover,.welcome-tutorial__skip:focus-visible{color:#242b30;border-bottom-color:#667078;outline:none}.welcome-tutorial__arrow{z-index:4;color:#2f383e;cursor:pointer;background:#fff;border:1px solid #d4dade;border-radius:50%;place-items:center;width:42px;height:42px;padding:0;transition:transform .16s,border-color .16s,background .16s;display:grid;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 7px 18px #161f251f}.welcome-tutorial__arrow:hover:not(:disabled),.welcome-tutorial__arrow:focus-visible{background:#fafbfb;border-color:#8f9ba2;outline:none;transform:translateY(-50%)scale(1.06)}.welcome-tutorial__arrow:disabled{opacity:0;pointer-events:none}.welcome-tutorial__arrow--left{left:17px}.welcome-tutorial__arrow--right{right:17px}.welcome-tutorial__dots{z-index:3;gap:9px;display:flex;position:absolute;bottom:27px;left:50%;transform:translate(-50%)}.welcome-tutorial__dot{box-sizing:border-box;cursor:pointer;background:0 0;border:1px solid #8d989f;border-radius:50%;width:8px;height:8px;padding:0;transition:width .18s,border-radius .18s,background .18s}.welcome-tutorial__dot--active{background:#5f8069;border-color:#4f6e58;border-radius:8px;width:23px}.welcome-tutorial__dot:focus-visible{outline-offset:3px;outline:2px solid #6f8f77}.welcome-tutorial__counter{color:#8a949a;font-variant-numeric:tabular-nums;font-size:11px;position:absolute;bottom:26px;right:28px}.welcome-tutorial__finish{color:#fff;font:inherit;cursor:pointer;background:#405c48;border:1px solid #405c48;border-radius:5px;margin-top:28px;padding:11px 17px;font-size:13px;font-weight:750;transition:background .16s,transform .16s}.welcome-tutorial__finish:hover,.welcome-tutorial__finish:focus-visible{background:#314b39;outline:none;transform:translateY(-1px)}@keyframes tutorial-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes tutorial-dialog-in{0%{opacity:0;transform:translateY(24px)scale(.965)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes tutorial-slide-forward{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:translate(0)}}@keyframes tutorial-slide-backward{0%{opacity:0;transform:translate(-18px)}to{opacity:1;transform:translate(0)}}@media (width<=780px){.welcome-tutorial__overlay{padding:14px}.welcome-tutorial{border-radius:12px;width:min(100%,600px);min-height:0;max-height:calc(100dvh - 28px);overflow:hidden auto}.welcome-tutorial__slide{grid-template-columns:1fr;min-height:0;padding-bottom:58px}.welcome-tutorial__media{border-bottom:1px solid #e4e8eb;border-right:0;padding:65px 55px 31px}.welcome-tutorial__copy{padding:34px 56px 30px}.welcome-tutorial__copy h2{font-size:clamp(27px,7vw,36px)}.welcome-tutorial__arrow{width:38px;height:38px;top:auto;bottom:12px;transform:none}.welcome-tutorial__arrow:hover:not(:disabled),.welcome-tutorial__arrow:focus-visible{transform:scale(1.06)}.welcome-tutorial__arrow--left{left:12px}.welcome-tutorial__arrow--right{right:12px}}@media (width<=480px){.welcome-tutorial__media{padding:65px 42px 24px}.welcome-tutorial__copy{padding:29px 43px 25px}.welcome-tutorial__copy p{font-size:14px}.welcome-tutorial__copy li{font-size:12px}.welcome-tutorial__placeholder{padding:10px}.welcome-tutorial__placeholder-caption{display:none}.welcome-tutorial__skip{top:15px;right:18px}.welcome-tutorial__counter{right:17px}}@media (prefers-reduced-motion:reduce){.welcome-tutorial__overlay,.welcome-tutorial,.welcome-tutorial__slide{animation:none}.welcome-tutorial__arrow,.welcome-tutorial__dot,.welcome-tutorial__finish{transition:none}}.studio-app-shell{--studio-page:#e7edf3;--studio-surface:#f0f4f7;--studio-surface-muted:#e9eff4;--studio-canvas:#dfe8f0;--studio-surface-raised:#d4e0ec;--studio-surface-sunken:#d2dfe9;--studio-control:#c5d3df;--studio-file-surface:#c4d3df;--studio-border:#bccbd8;--studio-border-strong:#a8bac9;--studio-grid-major:#45628085;--studio-grid-minor:#526f8c3d;--studio-grid-row:#4c698557;--studio-text:#203246;--studio-text-secondary:#435970;--studio-text-muted:#65798d;--studio-accent:#2f7fb8;--studio-accent-soft:#d0e3f2;--studio-midi:#25895c;--studio-midi-soft:#d9ecdf;--studio-warning:#a56a00;--studio-warning-soft:#fbecc9;--studio-danger:#c83f4b;--studio-danger-soft:#f8e3e6;background:var(--studio-page);color:var(--studio-text)}body{color:#203246;background-color:#e7edf3;margin:0;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}h1{text-align:center;color:#203246}#custom-audio-player{background:var(--studio-surface-raised);color:var(--studio-text);box-sizing:border-box;border-radius:5px 5px 0 0;align-items:center;gap:15px;width:90vw;max-width:1200px;margin:0 auto;padding:10px 15px;display:flex}#automation-bar{background:var(--studio-surface-raised);color:var(--studio-text);border-top:1px solid var(--studio-border);box-sizing:border-box;align-items:center;gap:15px;width:90vw;max-width:1200px;margin:0 auto;padding:10px 15px;display:flex;box-shadow:0 4px 12px #2c3e5014}.custom-select{-webkit-user-select:none;user-select:none;width:20%;min-width:150px;max-width:200px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px;position:relative}.select-selected{background:var(--studio-surface);color:var(--studio-text);border:1px solid var(--studio-border);cursor:pointer;border-radius:4px;justify-content:space-between;align-items:center;padding:6px 10px;display:flex;overflow:hidden}.select-selected:after{content:"▼";flex-shrink:0;margin-left:5px;font-size:10px}.select-text-container{white-space:nowrap;flex-grow:1;overflow:hidden}.select-text{display:inline-block}.select-items,.submenu{background:var(--studio-surface);border:1px solid var(--studio-border);z-index:99;border-radius:4px;width:100%;margin:4px 0 0;padding:0;list-style:none;display:none;position:absolute;box-shadow:0 8px 20px #2c3e5024}.submenu{width:max-content;min-width:150px;margin-top:-1px;margin-left:2px;top:0;left:100%}.has-submenu{position:relative}.select-items li,.submenu li{cursor:pointer;color:var(--studio-text);padding:8px 10px}.select-items li:hover,.submenu li:hover{background:var(--studio-surface-raised)}.select-items li.disabled,.submenu li.disabled{color:var(--studio-text-muted);cursor:default}.select-items li.disabled:hover,.submenu li.disabled:hover{background:var(--studio-surface)}#go-to-beginning-btn,#play-pause-btn,#record-btn{color:var(--studio-text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:5px;transition:background-color .2s;display:flex}#go-to-beginning-btn:hover,#play-pause-btn:hover,#record-btn:hover{background-color:var(--studio-accent-soft)}#time-display{text-align:center;min-width:95px;font-family:monospace;font-size:14px}#seek-bar{cursor:pointer;flex:50px;max-width:180px}.upload-btn{background:var(--studio-surface-raised);color:var(--studio-text);border:1px solid var(--studio-border);cursor:pointer;white-space:nowrap;border-radius:4px;margin-left:10px;padding:6px 12px;font-size:13px;font-weight:700;transition:background-color .2s}.upload-btn:hover{background:var(--studio-accent-soft)}#file-name-container{white-space:nowrap;background:var(--studio-file-surface);border:1px solid var(--studio-border-strong);color:var(--studio-text-muted);box-sizing:border-box;border-radius:4px;flex-grow:1;padding:6px 10px;font-size:13px;overflow:hidden}#file-name-display{display:inline-block}.vol-label{margin-left:10px;font-size:12px}#volume-slider{cursor:pointer;flex-shrink:0;width:80px}@media (width<=850px){.vol-label,#volume-slider{display:none!important}}@media (width<=700px){#seek-bar{display:none!important}#custom-audio-player{gap:8px;padding:8px 10px}.upload-btn{margin-left:5px}}.canvas-container{width:90vw;max-width:1200px;margin:0 auto 40px;position:relative}#visualizer{background-color:var(--studio-surface-sunken);width:100%;box-shadow:inset 0 0 0 1px var(--studio-border), 0 8px 18px #2c3e5014;border-radius:0 0 4px 4px;display:block}
