/* The shared double-star identity: warm cream, soft lilac and matte clay. */
:root {
  --brand-ink: #68516f;
  --brand-muted: #9a879f;
  --brand-lilac: #d8c3df;
  --brand-lilac-deep: #aa85b7;
  --brand-cream: #eddfb4;
  --brand-canvas: #f5f1f6;
  --brand-shadow: #9674a21c;
  --purple: #a184ae;
  --muted: #9a879f;
  --line: #e8deea;
  --ink: var(--brand-ink);
  color: var(--brand-ink);
  background: var(--brand-canvas);
}
body { background: var(--brand-canvas); }
main {
  background:
    radial-gradient(ellipse 65vw 65svh at 77% 39svh, #e9dfea99, transparent),
    radial-gradient(ellipse 58vw 68svh at 12% 76svh, #f2e8ca88, transparent),
    radial-gradient(ellipse 60vw 95svh at 98% 158svh, #e3d5e888, transparent),
    radial-gradient(ellipse 55vw 90svh at 6% 170svh, #f2e7c866, transparent),
    linear-gradient(180deg, #f8f5f8, #f4eff5 90svh, #f7f3f7 170svh);
}
::selection { background: #e3d3e9; color: #66506e; }
button:focus-visible, a:focus-visible { outline-color: #ae8bbb; }
.brand { gap: 12px; }
.brand-icon { filter: none; }
.brand-icon img { display: block; width: 64px; height: 47px; object-fit: contain; filter: drop-shadow(0 3px 3px #9876a218); }
.brand-name { color: #765f7d; font-weight: 700; letter-spacing: 3px; }
.brand-name small { color: #ad98b3; letter-spacing: 2.5px; }
.header-note { color: #ac97b1; }
.header-note > span { background: #c8afcf; box-shadow: 0 0 0 3px #eadfeb; }
.header nav { gap: 9px; }
.nav-link { color: #9a869f; }
.nav-link.active { color: #84638f; background: #e9dfec; box-shadow: inset 0 2px 3px #fff9, 0 3px 8px #9a7ba108; }
.nav-link:hover { background: #efe6f0; color: #806087; }
.nav-spark { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 5px; color: #b99ac5; }
.hero-eyebrow { color: #a18aa8; background: #ffffff72; border-color: #fffc; box-shadow: inset 0 1px 3px #fff, 0 5px 13px #9c80aa08; }
.hero-eyebrow svg { width: 14px; height: 14px; color: #b99bc4; }
.hero h1 { color: #68526f; }
.hero h1 em { color: #b08fbb; }
.hero h1 em::after { border-color: #dfcce5; opacity: .8; }
.title-spark { width: 26px; height: 26px; color: #ddc78d; top: 0; right: -31px; }
.hero-description { color: #94809c; }
.explore-button {
  background: linear-gradient(135deg, #c8afd3, #b695c3 65%, #ac87ba);
  border: 1px solid #d3bcdd;
  box-shadow: inset 0 3px 5px #eee0f3bb, inset -1px -4px 6px #8966972e, 0 10px 20px #9877aa26;
  border-radius: 21px;
}
.explore-button:hover { box-shadow: inset 0 3px 5px #eee0f3bb, inset -1px -4px 6px #8966972e, 0 14px 24px #9877aa35; }
.hero-about { color: #9a7fa3; }
.hero-about > span { color: #b399bd; }
.hero-values > span { color: #ab97b1; }
.value-dot.lilac, .value-dot.blue { background: #ccb5d6; }
.value-dot.cream { background: #e6d49f; }
.hero-orbit { border-color: #d7c7de32; }
.orbit-b { border-color: #d7c7de22; }
.hero-art { isolation: isolate; }
.art-caption { left: 50%; top: 12px; transform: translateX(-50%); color: #baa4c1; font-size: 7px; letter-spacing: 2.3px; white-space: nowrap; }
.companion-orbit { position: absolute; width: 525px; height: 345px; top: 83px; left: calc(50% - 262px); border: 1px dashed #d5c1dd88; border-radius: 50%; transform: rotate(-22deg); }
.orbit-inner { width: 455px; height: 275px; top: 118px; left: calc(50% - 227px); border-style: solid; border-color: #e4d6e85c; transform: rotate(20deg); }
.brand-hero-scene { position: absolute; top: 81px; left: calc(50% - 263px); width: 526px; height: 365px; animation: companion-breathe 7s ease-in-out infinite; }
.hero-companions { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 19px 17px #9b77a117); position: relative; z-index: 1; }
.companion-ground { position: absolute; bottom: -3px; left: 10%; right: 10%; height: 25px; border-radius: 50%; background: radial-gradient(ellipse, #ad8bb929, transparent 70%); filter: blur(6px); }
.brand-spark { position: absolute; width: 35px; height: 35px; filter: drop-shadow(1px 4px 3px #a887b01f); }
.spark-cream { top: 61px; left: 22px; color: #e8d6a5; transform: rotate(-19deg); }
.spark-lilac { bottom: 33px; right: 19px; width: 26px; height: 26px; color: #ceb6db; transform: rotate(16deg); }
.companion-pearl { position: absolute; border-radius: 50%; box-shadow: inset 2px 3px 5px #fff9, inset -2px -3px 5px #9b7aab22, 0 7px 10px #a18ba213; }
.pearl-cream { width: 19px; height: 19px; top: 86px; right: 29px; background: radial-gradient(circle at 30% 20%, #faf2d7, #e6d3a1); }
.pearl-lilac { width: 25px; height: 25px; bottom: 92px; left: 8px; background: radial-gradient(circle at 30% 20%, #eee5f1, #d1b8da); }
.art-note { background: #fffafacc; border-color: #fffc; border-radius: 19px; box-shadow: inset 0 2px 3px #fff, 0 9px 20px #9d7da513; color: #aa90b0; padding: 10px 15px; display: flex; align-items: center; gap: 7px; }
.art-note img { display: block; width: 28px; height: 28px; object-fit: contain; }
.note-hello { top: 45px; right: -2px; transform: rotate(6deg); }
.note-grow { bottom: 20px; left: 35px; color: #ab9877; transform: rotate(-5deg); }
.companion-signoff { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); white-space: nowrap; font-size: 9px; letter-spacing: 3px; color: #b29db9; }
.scroll-invite { color: #ac91b7; }
.scroll-mouse { border-color: #ccb5d5; }
.scroll-mouse i { background: #ba9bc7; }
.hero-coordinate, .section-number { color: #b5a0bd; }
.explore-intro .eyebrow { color: #ad95b7; }
.explore-intro .eyebrow svg { color: #c7a9d1; }
.explore-intro h2 { color: #715a7b; }
.explore-intro h2 em { color: #b08fbb; }
.explore-intro > p:last-of-type { color: #a18ba8; }
.explore-section::before { border-color: #dccbe34a; }
.line-purple, .line-blue { stroke: #d5bfde; }
.connection-lines circle { fill: #d6bfdf; stroke: #f7f3f7; }
.connection-lines .line-twinkle { fill: #e6d29c; }
.phone-heading { gap: 10px; }
.role-icon { width: 38px; height: 38px; background: #faf5e7; border-radius: 14px; box-shadow: inset 0 2px 4px #fff9, 0 4px 8px #b398b10c; }
.role-icon img { width: 29px; height: 29px; object-fit: contain; }
.parent-role { background: #eee5f1; }
.phone-heading h2 { color: #7d6586; }
.phone-heading p, .role-en { color: #b29cbb; }
.device { border-color: #fffdfa; background: linear-gradient(140deg, #fffefa, #f0e6eb 50%, #faf6f9); box-shadow: inset 2px 2px 4px #fff, inset -2px -2px 5px #d8c7df, 9px 22px 35px #a487b422; }
.device-blue { background: linear-gradient(140deg, #fffafc, #e9dfed 50%, #f7f1fa); box-shadow: inset 2px 2px 4px #fff, inset -2px -2px 5px #d3bfdc, 9px 22px 35px #a487b422; }
.device-button, .device-blue .device-button { background: #d6c4de; }
.button-volume, .device-blue .button-volume { box-shadow: 0 45px 0 #d6c4de; }
.children-screen { background: linear-gradient(153deg, #fbf7eb, #f3e8cd 65%, #f3e8de); }
.parents-screen { background: linear-gradient(153deg, #f6eff8, #e9dbef 65%, #e3d4e9); }
.phone-screen { border-color: #d8c4df44; }
.device-status { color: #8d7894; }
.device-island { background: #716176; }
.phone-welcome h3 { color: #947e52; }
.phone-welcome h3 > span { color: #c3a86e; }
.phone-welcome p { color: #b5a17b; }
.tiny-pill { color: #b2a07b; }
.parents-screen .tiny-pill { color: #b39bbf; }
.parents-screen .phone-welcome h3 { color: #8c6f9a; }
.parents-screen .phone-welcome h3 > span { color: #b998ca; }
.parents-screen .phone-welcome p { color: #ae94bb; }
.companion-scene { height: 214px; margin-top: 9px; }
.phone-companion { position: absolute; width: 172px; height: 172px; top: 20px; left: calc(50% - 86px); object-fit: contain; filter: drop-shadow(0 12px 9px #9e81a31a); animation: companion-breathe 7s ease-in-out infinite; transform: rotate(-8deg); }
.companion-lilac .phone-companion { transform: rotate(8deg); animation-delay: -2s; }
.companion-scene .scene-orbit { width: 222px; height: 105px; top: 76px; left: calc(50% - 111px); border-color: #cdb68e40; transform: rotate(-24deg); }
.companion-lilac .scene-orbit { border-color: #baa0cb45; transform: rotate(24deg); }
.companion-spark { position: absolute; width: 29px; height: 29px; color: #d7be80; left: 0; top: 28px; transform: rotate(-12deg); }
.companion-lilac .companion-spark { color: #c1a0d0; left: auto; right: 2px; top: 117px; }
.companion-dot { position: absolute; right: 5px; top: 80px; width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #f0e4f6, #cbb2d9); box-shadow: 1px 5px 8px #a58dbb1a; }
.companion-lilac .companion-dot { background: radial-gradient(circle at 30% 25%, #fff5d7, #e6d19b); left: 4px; right: auto; top: 45px; }
.companion-scene .scene-platform { bottom: 10px; background: radial-gradient(ellipse, #ac8bb323, transparent 70%); }
.phone-message { border-radius: 24px; background: #fffdf784; border-color: #fffdfa; box-shadow: inset 0 2px 3px #fff8, 0 5px 12px #b29a9a08; }
.phone-message h4 { color: #a18857; }
.phone-message p { color: #b39c78; }
.message-icon { background: #fcf6e4; color: #d0b67b; display: grid; place-items: center; border-radius: 11px; }
.message-icon svg { width: 16px; height: 16px; }
.parents-screen .phone-message { background: #fffcff80; }
.parents-screen .phone-message h4 { color: #a080af; }
.parents-screen .phone-message p { color: #ae94bb; }
.parents-screen .message-icon { background: #f1e7f5; color: #b795c7; }
.preparing-label { color: #bca788; }.preparing-label > i { background: #d5bf8e; }
.parents-screen .preparing-label { color: #b5a0c1; }.parents-screen .preparing-label > i { background: #c2a6cf; }
.home-indicator, .parents-screen .home-indicator { background: #bca4c36b; }
.library-intro { color: #b29abb; }
.little-star { width: 11px; height: 11px; color: #c8afd3; }
.library-card { border-radius: 30px; border-color: #fff9; box-shadow: inset 0 3px 5px #fff9, inset -1px -3px 6px #aa8f9e0a, 0 13px 25px #a78bb011; }
.personal-card { background: linear-gradient(135deg, #fcf7e9, #f0e5c6); }
.professional-card { background: linear-gradient(135deg, #f3ebf6, #e3d3eb); }
.library-card h2 { color: #978158; }
.professional-card h2 { color: #9b7aaa; }
.library-description { color: #aa9368; }
.professional-card .library-description { color: #aa8bb5; }
.library-kicker { color: #b7a27d; }.professional-card .library-kicker { color: #b49bc0; }
.library-tag { border-color: #e4d5b2; color: #b49c71; }.professional-card .library-tag { border-color: #dac6e3; color: #ae8dbb; }
.library-chips > span { border-radius: 9px; color: #b59d73; background: #fffaf494; }
.professional-card .library-chips > span { color: #b092be; background: #fffaff8c; }
.library-button { color: #ad9469; border-color: #e6d8bb77; background: #fffaf526; }
.professional-card .library-button { color: #a98ab7; border-color: #d9c5e277; }
.library-bridge > span { background: #dfcde5; }.library-bridge > svg { color: #c3a5cf; }
.library-bottom-note, .library-bridge small { color: #b7a1c0; }
.folder-icon > svg { filter: drop-shadow(2px 6px 4px #b3986630); }
.book-icon > svg { filter: drop-shadow(2px 6px 4px #9e7db12b); }
.closing-star { width: 20px; height: 20px; color: #d2bbdc; }
.closing-note p { color: #ab93b3; }.closing-note p > span { color: #b8a0bf; }
.footer { background: #f7f3f7; border-color: #e8ddebb0; color: #b6a0bd; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: #a58aad; }
.footer-brand img { width: 36px; height: 27px; object-fit: contain; }
.footer-brand > span { color: #baa6c1; margin-left: 0; }
.detail-dialog { background: linear-gradient(145deg, #fcf9f7, #f0e7f3); color: #876c93; border-radius: 34px; border-color: #fffafc; box-shadow: inset 0 3px 5px #fff, 0 30px 85px #826b932e; }
.detail-dialog::backdrop { background: #76617d38; }
.dialog-close { background: #e9dfed; color: #aa8db7; border-radius: 12px; }
.dialog-close:hover { background: #e2d3e9; }
.dialog-content h2 { color: #8b6e99; }
.dialog-kicker { color: #b29abb; }.dialog-description, .about-copy { color: #a58aaf; }
.dialog-brand { width: 128px; height: 92px; margin: 6px auto 16px; }
.dialog-brand img { width: 100%; height: 100%; object-fit: contain; }
.empty-library { background: #fffafc85; border-color: #fffafc; border-radius: 25px; }
.empty-companion { display: block; width: 66px; height: 66px; margin: 0 auto 16px; object-fit: contain; }
.empty-library p, .dialog-footnote { color: #b198bc; }
.dialog-tags > span { background: #eee1f0; color: #ac8db8; border-radius: 10px; }
.library-tabs { background: #e8dcec; border-radius: 16px; }.library-tabs > button { color: #ab8fb7; border-radius: 12px; }.library-tabs > button[aria-selected="true"] { color: #9a78aa; }
.about-signoff { color: #ab86b9; }
@keyframes companion-breathe { 50% { translate: 0 -7px; } }
@media (max-width: 1150px) { .brand-hero-scene { top: 83px; } }
@media (max-width: 900px) { .brand-hero-scene { top: 58px; }.companion-signoff { bottom: -4px; }.note-hello { top: 20px; }.note-grow { bottom: -18px; } }
@media (max-width: 650px) {
  .brand { gap: 8px; }.brand-icon img { width: 48px; height: 36px; }.brand-name { font-size: 19px; letter-spacing: 2px; }.brand-name small { font-size: 6px; letter-spacing: 1.8px; }.header nav { gap: 0; }
  .title-spark { width: 20px; height: 20px; right: -24px; }
  .brand-hero-scene { width: 500px; height: 342px; left: calc(50% - 250px); top: 38px; }.companion-orbit { top: 52px; }.orbit-inner { top: 87px; }.note-hello { top: 11px; right: -4px; }.note-grow { bottom: -25px; left: 23px; }.companion-signoff { display: none; }.spark-cream { top: 15px; left: 9px; }.spark-lilac { bottom: -5px; right: 0; }.pearl-cream { top: 78px; right: -4px; }.pearl-lilac { bottom: 65px; left: -4px; }
  .hero h1 { font-size: clamp(28px, 7.5vw, 40px); }.hero-description { font-size: 10px; }
  .footer-brand { gap: 6px; }.footer-brand img { width: 28px; height: 21px; }
}
@media (max-width: 360px) {
  .brand-icon img { width: 40px; height: 32px; }.brand-name { font-size: 18px; }.brand-name small { font-size: 5px; }.hero h1 { font-size: 27px; }.title-spark { width: 17px; height: 17px; right: -20px; }
}
@media (prefers-reduced-motion: reduce) { .brand-hero-scene, .phone-companion { animation: none; } }

/* Reading and interaction: pastel surfaces, clear text, comfortable targets. */
:root { --brand-muted: #7e6986; --muted: var(--brand-muted); }
html { scrollbar-gutter: stable; }
html:has(.detail-dialog[open]) { overflow: hidden; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 14px 20px; border-radius: 16px; background: #fffafc; color: var(--brand-ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.hero { isolation: auto; }
.hero-orbit { z-index: 0; }
.cloud-flight { z-index: 3; }
.scroll-invite { z-index: 4; color: #786080; font-size: 11px; }
.hero-eyebrow, .hero-about, .nav-link { color: #7d6487; }
.nav-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.nav-link.active { color: #735080; }
.hero h1 em, .explore-intro h2 em { color: #916b9f; }
.hero-description { color: #78647f; font-size: 15px; line-height: 2; }
.hero-values > span { color: #7e6986; font-size: 11px; }
.hero-actions { flex-wrap: wrap; }
.explore-button { font-size: 13px; min-height: 48px; background: linear-gradient(135deg, #a582b6, #91699f 65%, #825a92); border-color: #bda0cd; }
.hero-about { font-size: 13px; min-height: 44px; }
.explore-intro > p:last-of-type { color: #7e6986; font-size: 13px; }
.phone-heading p { color: #806a89; font-size: 11px; }
.phone-caption > a { min-height: 44px; font-size: 11px; color: #7e6986; }
.refresh-button { width: 44px; height: 44px; color: #84688f; flex-shrink: 0; }
.refresh-button svg { width: 16px; height: 16px; }
.phone-welcome p, .phone-message p { color: #816b45; font-size: 11px; }
.phone-message h4 { color: #796137; font-size: 12px; }
.parents-screen .phone-welcome p, .parents-screen .phone-message p { color: #795b89; }
.parents-screen .phone-message h4 { color: #735080; }
.preparing-label { color: #806b46; font-size: 10px; }
.parents-screen .preparing-label { color: #795c88; }
.library-intro { font-size: 11px; color: #80658c; }
.library-card h2 { color: #7e673d; }
.professional-card h2 { color: #7c578e; }
.library-description { font-size: 12px; color: #7e673d; }
.professional-card .library-description { color: #755285; }
.library-tag, .library-chips > span { font-size: 10px; color: #826c43; }
.professional-card .library-tag, .professional-card .library-chips > span { color: #795589; }
.library-chips { flex-wrap: wrap; }
.library-button { min-height: 48px; font-size: 12px; color: #7b643a; }
.professional-card .library-button { color: #755285; }
.library-bottom-note { font-size: 10px; color: #816b89; }
.closing-note p, .closing-note p > span { color: #80668a; font-size: 12px; }
.footer-brand, .footer-brand > span, .footer { color: #80698a; }
.footer > span { font-size: 9px; }
.dialog-close { width: 44px; height: 44px; display: grid; place-items: center; top: 12px; right: 12px; color: #765584; }
.dialog-description, .about-copy { font-size: 14px; color: #786080; }
.empty-library p { color: #80668a; font-size: 13px; }
.dialog-footnote { color: #80668a; font-size: 11px; }
.dialog-tags > span { color: #795789; font-size: 11px; }
.library-tabs > button { color: #795b86; min-height: 44px; font-size: 12px; }
.library-tabs > button[aria-selected="true"] { color: #735080; }
[role="tabpanel"]:focus-visible { outline: 3px solid #ae8bbb; outline-offset: 3px; }
@media (min-width: 651px) and (max-width: 1100px) {
  .constellation { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; gap: 36px 40px; align-items: start; }
  .phone-column { width: 320px; }
  .parents-column { grid-column: 2; grid-row: 1; }
  .library-column { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 10px 4px 0; }
  .library-intro, .library-bottom-note { grid-column: 1 / -1; }
  .library-bridge, .connection-lines { display: none; }
  .role-en { display: none; }
  .character-scene { height: 214px; }
}
@media (max-width: 650px) {
  .header { gap: 6px; }
  .nav-link { padding-left: 8px; padding-right: 8px; font-size: 11px; }
  .hero-inner { padding-top: 110px; padding-bottom: 145px; }
  .hero-description { font-size: 13px; letter-spacing: 0; margin: 22px 0; }
  .hero-values { gap: 10px; margin-top: 20px; }
  .hero-values > span { font-size: 9px; }
  .hero-actions { gap: 16px; }
  .explore-button, .hero-about { font-size: 12px; }
  .hero-art { margin-top: 2px; }
  .scroll-invite { font-size: 10px; }
  .explore-intro > p:last-of-type { font-size: 12px; }
  .library-intro { font-size: 11px; letter-spacing: .5px; }
  .clay-icon { right: 17px; }
  .footer { margin-left: 0; margin-right: 0; gap: 8px; }
  .footer-brand > span { font-size: 7px; }
  .footer > span { font-size: 8px; }
}
@media (max-width: 360px) {
  .header { padding-left: 14px; padding-right: 14px; }
  .brand { gap: 5px; }
  .brand-name { font-size: 17px; }
  .nav-link { font-size: 10px; padding-left: 6px; padding-right: 6px; }
  .hero-description { font-size: 12px; }
  .hero-values > span { font-size: 8px; }
  .hero-actions { gap: 10px; }
  .explore-button { padding-left: 13px; padding-right: 13px; }
  .hero-about { font-size: 11px; }
  .library-intro { font-size: 10px; }
  .clay-icon, .clay-icon > svg { width: 76px; height: 76px; }
}
/* Size the waiting illustration to its phone, including narrow tablet columns. */
.phone-column { container-type: inline-size; }
@container (max-width: 290px) {
  .companion-scene { height: 164px; }
  .phone-companion { width: 142px; height: 142px; left: calc(50% - 71px); top: 7px; }
  .companion-scene .scene-orbit { width: 190px; height: 85px; left: calc(50% - 95px); top: 50px; }
  .companion-lilac .companion-spark { top: 105px; }
}
@media (min-width: 361px) and (max-width: 650px) {
  .hero-art { margin-bottom: -164px; }
}

/* Real nested webpages: a compact phone, expandable in place without reloading. */
.expand-button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: #84688f; flex-shrink: 0; }
.expand-button svg { width: 17px; height: 17px; }
.expand-button:hover, .expand-button[aria-expanded="true"] { background: #e9dfed; }
.window-state { margin: 0 0 2px; min-height: 18px; font-size: 10px; line-height: 1.8; color: #80698a; text-align: center; }
[data-window-state="live"] .window-state::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #8a9d7d; }
.constellation:has(.is-expanded) { grid-template-columns: minmax(0, 1fr); }
.constellation:has(.is-expanded) > * { grid-column: 1; grid-row: auto; }
.constellation:has(.is-expanded) .connection-lines { display: none; }
.constellation:has(.is-expanded) .library-column { width: min(600px, 100%); justify-self: center; }
.phone-column.is-expanded { width: min(940px, 100%); container-type: normal; scroll-margin-top: 20px; }
.is-expanded .device { border-radius: 28px; }
.is-expanded .phone-screen { aspect-ratio: auto; height: max(580px, 75svh); border-radius: 20px; }
.is-expanded .site-viewport { inset: 0; }
.is-expanded .device-status, .is-expanded .home-indicator, .is-expanded .device-button { display: none; }
.is-expanded .preview-placeholder { max-width: 360px; margin: auto; padding-top: 35px; padding-bottom: 25px; }
.is-expanded .companion-scene { height: 214px; }
@media (max-width: 360px) {
  .phone-caption { gap: 3px; }
  .phone-caption > a { font-size: 10px; }
}

/* The real page fills the display; only brief text appears before connection. */
.phone-screen > .site-viewport,
.phone-screen > .site-viewport > .frame-container {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.phone-screen .frame-container > iframe { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
.window-placeholder-message { text-align: center; color: #80698a; }
.window-placeholder-message h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.window-placeholder-message p { margin: 0; font-size: 12px; line-height: 1.9; }
.window-placeholder-message .preparing-label { color: #80698a; font-size: 11px; }
.is-expanded .preview-placeholder { max-width: none; padding: 24px; }