* { box-sizing:border-box; }
html { -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; overscroll-behavior:none; }
body { margin:0; background:var(--hs-paper); color:var(--hs-black); font-family:var(--hs-font-ui); -webkit-font-smoothing:antialiased; }
button,a { touch-action:manipulation; }
button { font:inherit; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,textarea:focus-visible { outline:2px solid var(--hs-blue); outline-offset:4px; }
button svg { display:block; }
[hidden] { display:none!important; }
.studio-bar { height:76px; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
.brand-chip { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; overflow:hidden; background:white; box-shadow:inset 0 0 0 1px #00000009,0 2px 5px #00000008; }
.brand-chip img { width:40px; height:40px; border-radius:12px; }
.toolbar { display:flex; gap:8px; align-items:center; }
.quiet { min-height:44px; border:1px solid #fff; border-radius:999px; padding:0 17px; color:#494949; background:linear-gradient(155deg,#fff,#ededed); box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #00000012,0 2px 4px #00000008; font-size:14px; }
.quiet:active { background:#e7e7e7; }
.icon-button { width:44px; padding:0; display:grid; place-items:center; }
#restart { color:#777; }
#gyro,#fullscreen { display:none; }
.workspace { height:calc(100dvh - 156px); min-height:420px; padding:0 24px; }
.preview { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(ellipse at center,#ffffff80,transparent 65%); }
.device-wrap { flex:none; position:relative; }
.phone { background:#f6f6f6; }
.screen-content { position:absolute; inset:0; }
.hero { position:absolute; top:169px; left:0; width:402px; height:330px; }
#glass-scene { position:absolute; inset:-140px 0; }
#glass-scene canvas { display:block; width:100%; height:100%; }
#glass-fallback { position:absolute; inset:0; pointer-events:none; isolation:isolate; }
.hero[data-renderer="webgl"] #glass-fallback { visibility:hidden; }
.fallback-card { position:absolute; left:126px; top:90px; width:150px; height:150px; border-radius:28.1%; background:linear-gradient(140deg,#ffffffc9,#ffffff39); box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 1px #00000028,2px 24px 30px -7px #00000025; display:grid; place-items:center; }
.fallback-card img { position:absolute; left:17%; top:17%; width:66%; height:66%; object-fit:contain; }
.fallback-card[data-card="0"] { background:#fff; }
.fallback-card[data-card="0"] img { left:0; top:0; width:100%; height:100%; border-radius:inherit; }
.fallback-card[data-card="3"] { border-radius:50%; background:linear-gradient(145deg,#ffffffd9,#ffffff70); box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1.5px #00000014,0 6px 14px #00000012; }
.fallback-card.art-only { background:none; box-shadow:none; }
.cycle-toggle { width:44px; min-width:44px; height:44px; padding:0; }
.cycle-toggle:disabled { opacity:.4; cursor:default; }
.screen-copy { position:absolute; top:554px; left:22px; width:358px; text-align:center; }
.screen-copy h1 { font-size:25px; font-weight:500; letter-spacing:-.48px; line-height:1.25; color:#1b1b1b; margin:0; outline:none; }
.headline-line { display:block; overflow:hidden; }
.headline-reveal { display:block; }
.headline-confirmation { display:flex; align-items:center; justify-content:center; gap:8px; }
.headline-icon { display:inline-flex; width:24px; height:24px; flex:none; }
.headline-icon svg { display:block; width:100%; height:100%; }
.screen-copy p { font-size:17px; font-weight:400; line-height:1.32; letter-spacing:-.2px; color:#666; margin:15px 0 0; text-wrap:pretty; }
.screen-actions { position:absolute; left:50px; right:50px; bottom:27px; display:flex; flex-direction:column; gap:8px; }
.primary { position:relative; width:100%; height:60px; flex:none; border:1px solid #171717; border-radius:999px; background:var(--hs-dark-face); color:white; font-size:15px; font-weight:500; box-shadow:var(--hs-dark-shadow); }
.primary:active { background:var(--hs-dark-pressed); }
.primary[aria-busy="true"],.skip[aria-busy="true"] { opacity:.72; }
#primary { display:flex; align-items:center; justify-content:center; gap:8px; }
.action-icon { display:block; width:22px; height:22px; flex:none; }
.action-icon svg { width:100%; height:100%; }
.action-label { display:block; }
.action-check { opacity:0; clip-path:inset(0 100% 0 0); transition:clip-path 240ms var(--hs-ease),opacity 160ms var(--hs-ease); }
[data-state="copied"] .action-check { opacity:1; clip-path:inset(0 0 0 0); }
#primary[data-instant] .action-check { transition:none; }
.skip { position:relative; height:44px; flex:none; border:0; background:transparent; color:#6b6b6b; border-radius:999px; font-size:15px; }
.secondary-feedback { position:relative; display:inline-flex; align-items:center; justify-content:center; height:36px; min-width:96px; padding:0 12px; overflow:hidden; border-radius:999px; vertical-align:middle; }
.copy-shimmer { position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,#fff 50%,transparent 75%); opacity:0; pointer-events:none; }
.skip[data-copied] { color:#171717; }
.skip::after { content:''; position:absolute; inset:-4px 0; }
.skip:active { color:#171717; background:#00000005; }
.back-button { position:absolute; z-index:20; top:65px; left:19px; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; background:transparent; color:#171717; border-radius:50%; }
.back-button:active { background:#00000006; }
[data-state="copied"] .screen-copy { top:567px; }
[data-state="copied"] .screen-copy p { max-width:310px; margin:15px auto 0; }
.copy-error { position:absolute; bottom:108px; left:-20px; right:-20px; margin:0; text-align:center; color:#666; font-size:13px; }
.motion-status { position:fixed; top:66px; right:24px; max-width:260px; font-size:13px; color:#666; padding:10px 14px; border-radius:14px; background:#fffffff2; box-shadow:var(--hs-shadow-raised); z-index:30; }
#exit-fullscreen { position:fixed; top:max(10px,env(safe-area-inset-top)); right:12px; z-index:100; }
.immersive .studio-bar,.immersive .proto-picker { display:none; }
.immersive .workspace { height:100dvh; min-height:0; padding:0; }
.immersive .preview { background:none; }
.immersive .phone-shell { padding:0; width:402px; height:874px; border-radius:0; box-shadow:none; background:#f6f6f6; }
.immersive .phone-shell .screen { border-radius:0; box-shadow:none; }
.immersive .device-button { display:none; }
dialog { width:min(420px,calc(100% - 32px)); border:1px solid #fff; border-radius:28px; padding:22px; background:linear-gradient(140deg,#fff,#f6f6f6); box-shadow:0 24px 80px #0003,inset 0 0 0 1px #00000006; }
dialog::backdrop { background:#0004; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.dialog-heading h2 { font-size:20px; font-weight:500; margin:0; }
textarea { display:block; width:100%; height:250px; resize:vertical; font:16px/1.5 var(--hs-font-ui); color:#333; border:1px solid #ddd; padding:16px; border-radius:16px; background:#f5f5f5; }
.manual-done { margin-top:18px; }
@media (hover:hover) and (pointer:fine) {
 .primary:hover { background:var(--hs-dark-hover); box-shadow:var(--hs-dark-hover-shadow); }
 .primary:active { background:var(--hs-dark-pressed); }
 .quiet:hover { color:#171717; background:#fff; }
 .skip:hover { color:#171717; }
}
@media (pointer:coarse) { #gyro,#fullscreen { display:grid; } }
@media (max-width:520px) {
 .studio-bar { padding:12px 18px; height:68px; }
 .workspace { height:calc(100dvh - 146px); padding:0 16px; min-height:380px; }
 .proto-picker { bottom:max(16px,env(safe-area-inset-bottom)); }
 .immersive .phone-status,.immersive .dynamic-island,.immersive .home-indicator { display:none; }
}
@media (prefers-reduced-transparency:reduce) { .fallback-card { background:#fff; } dialog::backdrop { backdrop-filter:none; } }
@media (prefers-reduced-motion:reduce) { .action-check { transition:none; } }
@media (forced-colors:active) {
 .primary,.quiet,.skip { background:ButtonFace; color:ButtonText; border:1px solid ButtonText; box-shadow:none; }
 .phone,.fallback-card { background:Canvas; color:CanvasText; }
 .fallback-card { outline:1px solid CanvasText; }
}

/* Match the Gmail studio download panel. */
#code-dialog { width:min(640px,calc(100vw - 32px)); padding:22px; border:1px solid #ddd; border-radius:24px; background:#fafafa; color:#171717; }
.code-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.code-heading h2 { font-size:18px; margin:0; }
.code-heading .quiet { font-size:24px; }
#code-source { display:block; width:100%; height:260px; resize:vertical; border:1px solid #ddd; border-radius:12px; background:#fff; padding:14px; font:12px/1.5 ui-monospace,monospace; white-space:pre; margin:16px 0; }
.code-actions { display:flex; gap:8px; flex-wrap:wrap; }
.code-actions a { text-decoration:none; display:inline-flex; align-items:center; }
#code-status { min-height:18px; font-size:12px; color:#737373; margin:12px 0 0; }
@media(max-width:760px) {
 .studio-bar { padding-inline:12px; }
 .toolbar { gap:4px; }
 .toolbar .quiet,#toggle-controls { min-width:40px; padding-inline:10px; }
 .toolbar-label { display:none; }
}
@media(max-width:359px) { .toolbar #replay { display:none; } }
.embedded .studio-bar,.embedded .proto-picker,.embedded #exit-fullscreen,.embedded #fullscreen-replay,.embedded #fullscreen-gyro,.embedded .quick-gyro-status { display:none!important; }

#code-dialog { max-width:640px; max-height:calc(100svh - 32px); overflow:auto; }
#png-panel { margin-top:12px; }
.png-preview {
 position:relative; height:min(280px,34svh); margin:14px 0;
 overflow:hidden; border-radius:18px; background:#f6f6f6; box-shadow:var(--hs-shadow-inset);
}
.png-preview[data-transparent=true] {
 background-color:#fff;
 background-image:conic-gradient(#eaeaea 25%,transparent 0 50%,#eaeaea 0 75%,transparent 0);
 background-size:20px 20px;
}
.png-preview img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.png-actions { display:flex; align-items:center; gap:8px; }
.png-actions output { margin-right:auto; font-size:12px; color:#737373; }
.png-actions a { display:inline-flex; align-items:center; color:inherit; text-decoration:none; }
.png-actions .icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; }
#download-png[aria-disabled=true] { opacity:.4; cursor:default; }

#download-open { display:flex; align-items:center; gap:8px; }
#code-dialog .select-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; font-size:13px; color:#616161; }
#code-dialog select { min-width:140px; max-width:220px; font:inherit; border:1px solid #ddd; border-radius:10px; padding:9px; background:#f0f0f0; color:#333; box-shadow:var(--hs-shadow-inset); }
#code-dialog .secondary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid #ddd; border-radius:12px; padding:9px 13px; font:inherit; font-size:13px; color:#333; background:#f4f4f4; text-decoration:none; box-shadow:var(--hs-shadow-inset); }
.png-actions { flex-wrap:wrap; }
.embedded .phone-status,.embedded .dynamic-island,.embedded .home-indicator,.embedded #exit-fullscreen { display:none!important; }
.embedded .workspace { height:100dvh; }