.studio-page{background:#fff;color:#171717;margin:0}.studio-header{height:72px;padding:0 20px;display:flex;align-items:center;gap:20px;border-bottom:1px solid #ededed}.studio-header .brand{display:flex;align-items:center;font-size:23px;font-weight:650;letter-spacing:-1px;gap:6px}.brand>span>span{color:#777}.header-rule{height:20px;width:1px;background:#e7e7e7}.back-link{font-size:13px;color:#777}.header-actions{margin-left:auto;display:flex;gap:4px;align-items:center}.quiet-button{font:inherit;font-size:13px;background:transparent;border:0;color:#666;padding:10px;min-height:44px;cursor:pointer}.quiet-button:hover{color:#111}.quiet-button[aria-pressed=true]{color:#171717;font-weight:600}.studio-page main{padding:0 16px;max-width:1700px;margin:auto}.studio-intro{padding:24px 0 20px;display:flex;flex-direction:column;gap:18px}.studio-kicker{font-size:10px;color:#83838a;letter-spacing:1.8px;text-transform:uppercase}.studio-intro h1{font-size:26px;font-weight:600;letter-spacing:-.7px;margin:7px 0}.studio-intro p{font-size:14px;line-height:1.6;color:#73737b;margin:0}.studio-controls{display:flex;gap:6px;flex-wrap:wrap}.studio-controls>*{font:inherit;font-size:12px;min-height:44px;display:inline-flex;align-items:center;padding:0 13px;border:1px solid #e7e7e7;border-radius:5px;background:white;color:#666;cursor:pointer}.studio-controls>*:hover{border-color:#b7b7be;color:#111}.studio-controls [aria-pressed=true],.studio-controls [aria-expanded=true]{background:#171717;color:white;border-color:#171717}.studio-stage{height:calc(100dvh - 295px);min-height:520px;border:1px solid #e7e7e9;border-radius:8px;overflow:hidden;background:#fafafa;position:relative;isolation:isolate}.studio-stage iframe{width:100%;height:100%;border:0;display:block;background:#fff}.studio-stage iframe[hidden]{display:none}.studio-loading{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;font-size:14px;color:#73737b;padding:24px;text-align:center}.studio-loading[hidden]{display:none}.loading-mark{width:26px;height:26px;border:2px solid #e4e4e7;border-top-color:#73737b;border-radius:50%;animation:loading-turn 1s linear infinite}.studio-loading a{color:#171717;text-decoration:underline}.studio-footer{padding:17px 0 25px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:#929299}.studio-guide{display:grid;gap:20px;padding:22px;background:#fafafa;border:1px solid #ececee;border-radius:7px;margin:0 0 20px}.studio-guide[hidden]{display:none}.studio-guide h2{font-size:14px;font-weight:600;margin-bottom:12px}.studio-guide ol{padding-left:20px}.studio-guide li,.studio-guide p{font-size:13px;color:#777;line-height:1.9}.studio-guide #note{margin-top:12px;color:#96969d;font-size:12px}.source-info a{display:inline-flex;font-size:12px;padding:12px 0;margin-right:20px;text-decoration:underline;text-underline-offset:3px}.studio-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:13px 20px;background:#171717;color:white;border-radius:6px;z-index:20;font-size:13px;text-align:center}.expanded .studio-header{display:none}.expanded .studio-intro{padding:12px 0}.expanded .studio-kicker,.expanded #description,.expanded .studio-footer{display:none}.expanded .studio-intro h1{font-size:18px;margin:0}.expanded .studio-intro{flex-direction:row;align-items:center;justify-content:space-between}.expanded #guide{display:none}.expanded .studio-stage{height:calc(100dvh - 80px);min-height:0}.expanded .studio-controls #help,.expanded .studio-controls #open{display:none}.studio-page :focus-visible{outline:2px solid #4299d0;outline-offset:3px}.skip-link{position:fixed;left:20px;top:-70px;z-index:40;padding:12px;background:#171717;color:#fff}.skip-link:focus{top:10px}@keyframes loading-turn{to{transform:rotate(360deg)}}
@media(min-width:768px){.studio-header{padding:0 32px}.studio-page main{padding:0 32px}.studio-intro{flex-direction:row;align-items:center;justify-content:space-between;padding:26px 0 22px;gap:28px}.studio-intro h1{font-size:28px}.studio-controls{flex-wrap:nowrap;flex:none}.studio-stage{height:calc(100dvh - 252px);min-height:580px}.studio-guide{grid-template-columns:1.4fr 1fr;gap:50px;padding:28px}.expanded .studio-stage{height:calc(100dvh - 80px);min-height:0}}
@media(max-width:400px){.studio-header{gap:10px;padding:0 16px}.header-rule{display:none}.back-link{font-size:12px}.quiet-button{padding:10px 7px}.studio-controls>*{padding:0 11px}.studio-stage{min-height:490px}}
@media(prefers-reduced-motion:reduce){.loading-mark{animation:none}}
.studio-loading{position:absolute;inset:0;z-index:2;background:#fafafa}.studio-stage iframe.app-pending{visibility:hidden}
.studio-header .brand svg,.studio-header .brand>span>span{color:var(--accent)}
.studio-controls .studio-remix{background:#171717;border-color:#171717;color:#fff;font-weight:600}.studio-controls .studio-remix:hover{background:#343434;color:#fff}@media(min-width:768px) and (max-width:1100px){.studio-controls{flex-wrap:wrap;max-width:340px;justify-content:flex-end}}