.demo-section,.approach{padding-block:82px}
.studio-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:32px}.studio-heading h2,.source-heading h2{font-size:clamp(32px,3.5vw,48px);font-weight:400;letter-spacing:-1.2px;line-height:1.15}.studio-heading h2 span{color:var(--muted)}.studio-heading>p{max-width:340px;font-size:14px;line-height:1.8;color:var(--muted)}
.studio-grid{display:grid;grid-template-columns:minmax(235px,.68fr) minmax(0,1.32fr);gap:60px;align-items:center;direction:ltr}.studio-copy,.studio-stage{direction:ltr}html[dir=rtl] .studio-copy,html[dir=rtl] .studio-stage{direction:rtl}
.studio-switch{display:flex;gap:8px;flex-wrap:wrap}.studio-switch button{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);min-height:44px;font-size:13px}.studio-switch button[aria-pressed=true]{color:var(--accent);background:#bda6fa0d;border-color:#bda6fa4a}.studio-switch .icon{width:16px;height:16px}.studio-reading{padding-block:30px;min-height:200px}.studio-step{color:var(--accent);font-size:12px}.studio-reading h3{font-size:clamp(25px,2.6vw,34px);font-weight:400;line-height:1.2;letter-spacing:-.6px;margin-block:13px}.studio-reading p{font-size:14px;line-height:1.8;color:var(--muted);max-width:330px}.studio-disclosure{font-size:11px;line-height:1.7;color:var(--muted);max-width:290px}
.studio-window{border:1px solid #ffffff16;background:#101619;border-radius:16px;overflow:hidden;box-shadow:none;min-width:0}.studio-chrome{height:34px;display:flex;align-items:center;gap:12px;padding-inline:14px;background:#161d20;border-bottom:1px solid #ffffff0b;direction:ltr}.studio-window-dots{display:flex;gap:4px}.studio-window-dots i{width:3px;height:3px;background:#71767e;border-radius:50%}.studio-chrome>span:nth-child(2){font:10px Manrope,Arial,sans-serif;color:#a4aead;flex:1}.studio-stage{height:420px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px}
.studio-message,.studio-result,.studio-check{width:min(100%,390px);border-radius:14px;background:#20272b;padding:24px;position:relative}.studio-sender{display:flex;align-items:center;gap:12px}.studio-sender>.icon{color:var(--accent);width:36px;height:36px;padding:8px;border-radius:9px;background:#bda6fa14}.studio-sender strong{font-size:14px;font-weight:500;display:block}.studio-sender small{font-size:10px;color:var(--muted);display:block;margin-top:3px}.studio-message>p{font-size:15px;line-height:1.8;margin-block:25px 20px}.studio-link{display:flex;width:100%;min-height:46px;align-items:center;justify-content:space-between;gap:8px;border:0;background:#bda6fa13;color:var(--accent);padding:11px 13px;border-radius:8px;font-size:12px}.studio-link .icon{width:15px;height:15px}.studio-cursor{position:absolute;bottom:12px;right:54px;width:25px;height:29px;pointer-events:none}.studio-check{text-align:center;padding-block:35px}.studio-check .brand strong,.studio-result .brand strong{font-size:21px}.studio-check .brand img,.studio-result .brand img{width:27px;height:32px}.studio-check-input{display:flex;gap:10px;align-items:center;padding:15px;margin-top:30px;border:1px solid #ffffff17;border-radius:8px;font-size:12px;color:var(--muted)}.studio-check-input>span{flex:1;text-align:start}.studio-check-input>.icon{width:17px;height:17px;color:var(--accent)}.studio-check-status{display:flex;gap:10px;justify-content:center;align-items:center;font-size:13px;margin-block:26px 10px}.studio-check>small,.studio-result>small{font-size:10px;color:var(--muted)}.studio-spinner{width:15px;height:15px;border:1px solid #bda6fa35;border-top-color:var(--accent);border-radius:50%}
.studio-result-title{display:flex;gap:10px;align-items:center;margin-top:25px;color:#ff95a7}.studio-result-title>.icon{width:22px;height:22px}.studio-result h4{font-size:22px;font-weight:500;line-height:1.2;margin:0}.studio-result>p{font-size:13px;line-height:1.75;color:#d6dad8;margin-block:17px}.studio-result-domain{display:block;color:#ff95a7;font-size:12px;background:#ff95a70b;border-radius:7px;padding:10px 12px}.studio-result-advice{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:12px;line-height:1.7;margin-block:18px}.studio-result-advice>.icon{width:16px;height:16px;color:var(--accent);margin-top:2px}
.studio-warning{position:absolute;inset:0;overflow:hidden}.studio-warning .warning-embed{position:absolute;left:50%;top:8px;width:600px;max-width:none;height:720px;border:0;transform-origin:top center;pointer-events:none}.studio-inspect{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:14px;min-height:44px;white-space:nowrap;background:#bda6fa;color:#211b35;border:0;border-radius:8px;padding:10px 20px;font-size:12px}.studio-inspect .icon{width:15px;height:15px}.studio-closed{text-align:center;max-width:300px}.studio-closed>.icon{color:var(--accent);width:34px;height:34px}.studio-closed h4{font-weight:500;font-size:25px;margin:20px 0 12px}.studio-closed p{font-size:14px;color:var(--muted)}
dialog.warning-inspector{width:min(740px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid #4b4f58;border-radius:15px;overflow:hidden;background:#18191f}.warning-inspector::backdrop{background:#000c}.warning-inspector-header{height:57px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:18px;border-bottom:1px solid #4b4f58}.warning-inspector-header h2{font-size:14px;font-weight:400;letter-spacing:0}.warning-inspector-header .icon-button{width:40px;height:40px;min-height:40px}.warning-full{display:block;width:100%;height:min(740px,calc(100dvh - 95px));border:0}
.source-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:32px}.source-heading>p{max-width:390px;font-size:14px;line-height:1.8;color:var(--muted)}.source-workbench{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);gap:60px;direction:ltr;align-items:center}.source-selectors,.source-panel{direction:ltr}html[dir=rtl] .source-selectors,html[dir=rtl] .source-panel{direction:rtl}.source-selectors{display:grid;gap:8px}.source-selectors>button{display:flex;align-items:center;gap:14px;text-align:start;min-height:84px;padding:17px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);transition:background .18s,border-color .18s,color .18s}.source-selectors>button>span{flex:1}.source-selectors>button>.icon{width:19px;height:19px}.source-selectors>button>.icon:last-child{width:14px;height:14px}.source-selectors strong{display:block;font-size:15px;font-weight:500;color:var(--ink)}.source-selectors small{display:block;font-size:12px;margin-top:3px}.source-selectors>button[aria-pressed=true]{background:#bda6fa0b;border-color:#bda6fa38;color:var(--accent)}.source-selectors>button[aria-pressed=true] strong{color:var(--accent)}
.source-panel{min-height:320px;border-radius:16px;background:#101619;border:1px solid #ffffff12;padding:24px;display:grid;gap:20px;align-content:start}.source-panel-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:20px}.source-panel-label small{font-size:10px;color:var(--muted)}.source-address{display:flex;align-items:center;gap:12px;font:13px Manrope,Arial,sans-serif;padding-block:10px;overflow-wrap:anywhere}.source-address .icon{width:18px;height:18px;color:var(--accent)}.source-input>p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:12px}.source-input>.source-quote{font-size:16px;line-height:1.7;color:var(--ink);margin:0}.source-quote mark{background:#bda6fa1f;color:#d9c9ff;padding:1px 4px;border-radius:3px}.source-quoted-url{display:block;margin-top:12px;font-size:11px;color:var(--accent)}.source-file{display:flex;align-items:center;gap:14px}.source-file>.icon{width:35px;height:35px;color:var(--accent);padding:6px;background:#bda6fa0b;border-radius:8px}.source-file strong{font:13px Manrope,Arial,sans-serif;display:block}.source-file small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.source-answer{padding-top:20px;border-top:1px solid #ffffff12}.source-answer-heading{display:flex;align-items:center;gap:9px;color:#ff95a7}.source-answer-heading>.icon{width:18px;height:18px}.source-answer-heading strong{font-size:15px;font-weight:500}.source-answer>p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:12px}.source-answer.is-incomplete .source-answer-heading{color:#ead18d}.source-next{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.7;color:var(--ink);margin-top:16px}.source-next>.icon{width:15px;height:15px;margin-top:3px;color:var(--accent)}
@media(max-width:1000px){.studio-grid,.source-workbench{gap:30px;grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr)}.studio-reading h3{font-size:28px}.studio-heading,.source-heading{gap:30px}}
@media(max-width:760px){.demo-section,.approach{padding-block:60px}.studio-heading,.source-heading{display:block;margin-bottom:25px}.studio-heading h2,.source-heading h2{font-size:34px}.studio-heading>p,.source-heading>p{font-size:14px;margin-top:17px}.studio-grid,.source-workbench{grid-template-columns:1fr;gap:22px}.studio-copy{display:grid;grid-template-columns:1fr;gap:0}.studio-reading{padding-block:20px 0;min-height:0}.studio-reading h3{font-size:26px;margin-block:10px}.studio-reading p{max-width:none;font-size:14px}.studio-disclosure{margin-top:14px;max-width:none;font-size:10px}.studio-stage{height:390px;padding:14px}.studio-message,.studio-result,.studio-check{padding:21px}.studio-message>p{font-size:14px;margin-block:22px 18px}.studio-result h4{font-size:21px}.studio-link{font-size:11px}.studio-switch button{min-height:44px}.studio-inspect{font-size:12px}.source-selectors{display:flex;gap:6px}.source-selectors>button{flex:1;flex-direction:column;justify-content:center;gap:8px;min-width:0;min-height:78px;padding:10px 6px}.source-selectors>button>span{flex:0}.source-selectors strong{font-size:12px;text-align:center}.source-selectors small,.source-selectors>button>.icon:last-child{display:none}.source-panel{padding:20px;min-height:360px}.source-address{font-size:12px;gap:8px}.source-panel-label{margin-bottom:15px}}
@media(max-width:350px){.studio-heading h2,.source-heading h2{font-size:30px}.studio-stage{height:375px;padding:10px}.studio-message,.studio-result,.studio-check{padding:18px}.studio-result>p{font-size:12px}.studio-link{font-size:10px}.source-panel{padding:17px}.source-address{font-size:10px}.source-selectors strong{font-size:11px}}

/* The native Safari specimen keeps a phone proportion in its full-size view. */
dialog.warning-inspector.is-phone{width:min(420px,calc(100vw - 24px))}