.studio-page{--background:var(--graphite);--foreground:var(--paper);--primary:#006b93;--primary-foreground:#fff;--primary-hover:#007ba7;--border:#3a3c40;--ring:#59c5e8;--signal:#59c5e8;--focus-color:var(--signal);--ink-soft:#c6c9ce;color:var(--foreground);background:var(--background);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;min-height:100svh}.studio-main,.studio-footer{width:min(var(--studio-width),calc(100% - 2 * var(--studio-gutter)));margin-inline:auto}.studio-page .chrome-studio .chrome-action{display:none}.studio-intro{padding-block:48px 32px}.studio-intro h1{letter-spacing:-.035em;text-wrap:balance;margin:0 0 16px;font-size:clamp(36px,4.2vw,60px);font-weight:500;line-height:1.1}.studio-intro>p{color:var(--ink-soft);max-width:45ch;margin:0;font-size:16px;line-height:1.8}.studio-tool{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,6vw,88px);padding-block:24px 48px;display:grid}.studio-tool+.studio-tool{border-top:1px solid var(--border);padding-top:48px}.studio-tool-copy{min-width:0;max-width:46ch}.studio-tool h2{letter-spacing:-.035em;margin:0 0 20px;font-size:clamp(30px,3.2vw,44px);font-weight:500;line-height:1.15}.studio-tool-copy>p{color:var(--ink-soft);margin:0 0 24px;font-size:16px;line-height:1.8}.studio-tool-copy [data-slot=button]{border-radius:var(--radius-action);min-height:48px;font-size:14px;transition:transform .12s cubic-bezier(.23,1,.32,1)}.studio-tool-copy [data-slot=button]:active:not(:focus-visible){transform:scale(.98)}.studio-page :is(a,button):focus-visible{outline:2px solid var(--signal);outline-offset:4px;box-shadow:none}.studio-page :is(a,button){scroll-margin-block:110px 32px}.studio-tool figure{justify-self:end;width:100%;min-width:0;max-width:540px;margin:0}.studio-tool-preview{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#f2f2f209,#f2f2f203);border:1px solid #a4abb333;border-radius:12px;padding:12px;overflow:hidden;box-shadow:inset 0 1px #f2f2f20a}.studio-tool img{width:100%;height:auto;display:block}.studio-tool figcaption{color:var(--ink-soft);margin-top:12px;font-size:12px;line-height:1.8}.studio-check-outline{margin:0;padding:8px clamp(8px,2vw,24px);list-style:none}.studio-check-outline li{grid-template-columns:24px minmax(0,1fr);align-items:start;gap:20px;padding-block:24px;display:grid}.studio-check-outline li+li{border-top:1px solid var(--border)}.studio-check-outline svg{width:24px;height:24px;color:var(--signal);stroke-width:1.5px;margin-top:2px}.studio-check-outline h3{letter-spacing:-.02em;margin:0 0 6px;font-size:clamp(18px,1.5vw,21px);font-weight:500;line-height:1.35}.studio-check-outline p{max-width:34ch;color:var(--ink-soft);margin:0;font-size:14px;line-height:1.7}.studio-help{border-block:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-block:24px;display:flex}.studio-help p{color:var(--ink-soft);margin:0;font-size:15px;line-height:1.8}.studio-help a{min-height:48px;color:var(--paper);text-underline-offset:5px;align-items:center;gap:10px;font-size:14px;text-decoration:underline;display:inline-flex}.studio-help svg{width:16px;height:16px;color:var(--signal)}.studio-footer{color:var(--ink-soft);flex-wrap:wrap;align-items:center;gap:4px 28px;padding-block:24px;font-size:12px;display:flex}.studio-footer span{margin-right:auto}.studio-footer a{text-underline-offset:5px;align-items:center;min-height:44px;display:inline-flex}.studio-page ::selection{color:var(--graphite);background:var(--signal)}@media (hover:hover) and (pointer:fine){.studio-footer a:hover{color:var(--paper);text-decoration:underline}.studio-tool-copy [data-slot=button]:hover{background:var(--primary-hover)}}@media (width<=800px){.studio-intro{padding-block:32px 24px}.studio-tool{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:12px 28px}.studio-tool+.studio-tool{padding-top:32px}.studio-tool-copy{max-width:48ch}.studio-tool figure{justify-self:center;max-width:480px}.studio-tool h2{margin-bottom:16px}.studio-tool-preview{padding:8px}}@media (width<=600px){.studio-intro h1{font-size:clamp(32px,8.5vw,42px)}.studio-tool h2{font-size:30px}.studio-tool-copy [data-slot=button]{width:100%}.studio-help{flex-direction:column;align-items:flex-start}.studio-footer span{flex-basis:100%}}@media (prefers-reduced-motion:reduce){.studio-tool-copy [data-slot=button]{transition:none}.studio-tool-copy [data-slot=button]:active{transform:none}}