/* The building studio (version 1.4): "My Place" (the cards) and the studio screen. Sizes follow --k (the age group); every button is 44 px or more. */

/* ---------- My Place ---------- */
.st-home { display: grid; gap: calc(16px * var(--k)); }
.st-lead { margin: -4px 0 10px; }
.st-cards { display: grid; gap: calc(14px * var(--k)); grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(200px * var(--k))), 1fr)); }
.st-card { display: flex; flex-direction: column; min-width: 0; position: relative; border-radius: var(--kr); overflow: hidden; background: var(--panel); border: 2px solid color-mix(in srgb, var(--c-room) 45%, var(--line2)); box-shadow: 0 5px 0 color-mix(in srgb, var(--c-room) 35%, var(--line)); color: var(--text); text-decoration: none; transition: transform .16s var(--spring, ease), box-shadow .1s; }
a.st-card:hover, .st-card.mine:hover { transform: translateY(-3px); } a.st-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.st-card .pic { aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #a9d3f7, #dff0fd); }
.st-card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-card .pic .e { font-size: calc(46px * var(--k) * var(--tx, 1)); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); }
.st-card .nm { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.st-card .nm b { font-size: calc(16.5px * var(--k) * var(--tx, 1)); line-height: 1.15; overflow-wrap: anywhere; }
.st-card .nm small { color: var(--muted); font-size: calc(13px * var(--k) * var(--tx, 1)); line-height: 1.25; }
.st-card.mine .open { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.st-card .acts { display: flex; gap: 8px; padding: 0 10px 10px; }
.st-playcard { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; margin: 0 10px 8px; padding: 4px 12px; border-radius: 999px; background: #1fb863; color: #fff; font-weight: 800; font-size: calc(14.5px * var(--k) * var(--tx, 1)); text-decoration: none; box-shadow: 0 4px 0 #128a47; } .st-playcard:active { transform: translateY(2px); box-shadow: 0 1px 0 #128a47; }
.st-namegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .st-namegrid .st-chip.big { min-height: 84px; white-space: normal; text-align: center; line-height: 1.15; font-size: calc(15.5px * var(--tx, 1)); } .st-namegrid .st-chip.big .e { font-size: 34px; }
.st-mini { flex: 1 1 0; min-width: 44px; min-height: 44px; border-radius: 999px; border: 2px solid var(--line2); background: var(--chip, var(--panel)); color: var(--text); font: inherit; font-weight: 700; font-size: calc(13.5px * var(--k) * var(--tx, 1)); cursor: pointer; white-space: nowrap; overflow: hidden; }
.st-card.real { border-color: #f5a800; box-shadow: 0 5px 0 #c98a00; }
.st-card.real.off { opacity: .92; border-style: dashed; box-shadow: none; } .st-card.real.off { grid-column: 1 / -1; flex-direction: row; align-items: center; } .st-card.real.off .pic { aspect-ratio: auto; flex: none; width: calc(72px * var(--k)); align-self: stretch; min-height: calc(64px * var(--k)); } .st-card.real.off .pic .e { font-size: calc(30px * var(--k) * var(--tx, 1)); } .st-card.real.off .pic { background: repeating-linear-gradient(45deg, #eef3fb, #eef3fb 12px, #e3ebf7 12px, #e3ebf7 24px); } .st-card.real.off .pic .e { filter: grayscale(.5); }
body.calm .st-card, body.calm .st-card:hover { transition: none; transform: none; }

/* ---------- the studio ---------- */
.st, .st * { text-shadow: none; }
/* The frame is ONE grid: the top bar, the band (building together, a challenge), the picture and the tools. The picture gets every pixel the others do not need.
   .st-main only groups the picture and the tools in the markup; it has no box of its own. Sizes of words follow --tx (the child's text size: 1 · 1.12 · 1.25). */
/* (the root is written .st[data-tier]: the game “Story Steps” has a tray with the class “st” too, and the studio's page grid must not reach it) */
.st[data-tier] { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "band" "stage" "panel"; color: var(--text); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.st-main { display: contents; }
.st-top { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 6px calc(10px + var(--safe-r)) 6px calc(10px + var(--safe-l)); min-width: 0; }
.st-ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-size: 21px; font-weight: 800; line-height: 1; cursor: pointer; text-decoration: none; box-shadow: 0 3px 0 var(--line); padding: 0; }
.st-ic svg { width: 22px; height: 22px; } .st-ic:active { transform: translateY(2px); box-shadow: none; } .st-ic[disabled] { opacity: .4; cursor: default; } .st-ic.on { background: #ffe9a8; border-color: #f5a800; color: #3b2500; } .st-ic[hidden] { display: none; }
.st-ic.big { width: 54px; height: 54px; font-size: 26px; background: #2f7dff; color: #fff; border-color: transparent; box-shadow: 0 4px 0 #1c4fb3; } [data-tier="0"] .st-ic.big { width: 64px; height: 64px; font-size: 34px; }
.st-title { flex: 0 1 auto; min-width: 44px; min-height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; overflow: hidden; }
.st-title b { font-size: calc(17px * var(--k) * var(--tx, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-save { flex: 1 1 0; min-width: 0; font-size: calc(13.5px * var(--tx, 1)); font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-save[data-s="waiting"] { color: #b56400; }
.st-play { flex: none; min-height: 46px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; border: 0; background: #1fb863; color: #fff; font: inherit; font-weight: 800; font-size: calc(14.5px * var(--tx, 1)); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 0 #128a47; } .st-play:active { transform: translateY(2px); box-shadow: 0 1px 0 #128a47; } .st-play[hidden] { display: none; } .st-play i { font-style: normal; } .st-play[disabled] { opacity: .6; } @media (max-width: 1199px) { .st-play i { display: none; } }
.st-stage { grid-area: stage; position: relative; min-height: 0; min-width: 0; overflow: hidden; margin: 0 calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l)); border-radius: 20px; background: linear-gradient(180deg, #a9d3f7, #dff0fd); touch-action: none; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 6px 18px rgba(20, 40, 110, .16); }
.st-views { position: absolute; inset: 0; display: flex; }
.st-view { flex: 1 1 0; min-width: 0; min-height: 0; position: relative; overflow: hidden; } .st-view[hidden] { display: none; }
.st[data-split="1"] .st-view.plan { flex: 0 0 42%; border-left: 4px solid #fff; }
.st-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; object-fit: cover; outline-offset: -4px; }
/* the hint: a bubble with a small lamp. The lamp folds the bubble away and brings it back — on a phone it folds by itself once it has been read */
.st-hint { position: absolute; z-index: 3; left: 8px; top: 8px; max-width: calc(100% - 132px); display: flex; align-items: center; gap: 6px; padding: 3px 5px 3px 3px; min-height: 44px; border-radius: 24px; background: rgba(255, 255, 255, .95); color: #17224f; font-weight: 700; font-size: calc(14.5px * var(--k) * var(--tx, 1)); line-height: 1.2; box-shadow: 0 3px 10px rgba(20, 40, 110, .2); }
.st-hint[hidden] { display: none; } .st-hint .st-read { flex: none; width: 44px; min-width: 44px; min-height: 44px; margin: 0; box-shadow: 0 3px 0 #b97700; font-size: 18px; }
.st-hintbtn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff3cc; color: #3b2500; font: inherit; font-size: 21px; line-height: 1; cursor: pointer; }
.st-hint[data-folded="1"] { padding: 0; min-height: 0; background: none; box-shadow: none; } .st-hint[data-folded="1"] > :not(.st-hintbtn) { display: none; } .st-hint[data-folded="1"] .st-hintbtn { background: rgba(255, 255, 255, .95); box-shadow: 0 3px 8px rgba(20, 40, 110, .22); }
.st-cam { position: absolute; z-index: 3; right: 8px; top: 8px; display: grid; gap: 6px; grid-template-rows: repeat(5, auto); grid-auto-flow: column; direction: rtl; } .st-cam > * { direction: ltr; }
.st-cam .st-ic { width: 46px; height: 46px; background: rgba(255, 255, 255, .95); color: #17224f; border-color: transparent; box-shadow: 0 3px 8px rgba(20, 40, 110, .22); }
.st-cam .st-ic.on { background: #ffe9a8; } .st-cam .st-ic[data-c="more"] { display: none; }
.st[data-view="walk"] .st-cam [data-c="left"], .st[data-view="walk"] .st-cam [data-c="right"], .st[data-view="walk"] .st-cam [data-c="in"], .st[data-view="walk"] .st-cam [data-c="out"], .st[data-view="walk"] .st-cam [data-c="home"], .st[data-view="plan"] .st-cam [data-c="left"], .st[data-view="plan"] .st-cam [data-c="right"], .st[data-view="plan"] .st-cam [data-c="roof"], .st[data-view="plan"] .st-cam [data-c="night"] { display: none; }
/* the buttons for the chosen thing. Over the picture they step aside while the thing is being moved; on an upright phone they stand in the row of the tool tabs */
.st-selbar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 8px; display: flex; gap: 8px; padding: 4px 10px 6px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; pointer-events: none; } .st-selbar[hidden] { display: none; } .st-selbar::-webkit-scrollbar { display: none; }
.st[data-drag="1"] .st-stage .st-selbar { visibility: hidden; }
.st-act { pointer-events: auto; flex: none; min-width: 62px; min-height: 58px; padding: 4px 8px; display: grid; justify-items: center; align-content: center; gap: 1px; border: 0; border-radius: 16px; background: #fff; color: #17224f; font: inherit; font-weight: 800; font-size: calc(12.5px * var(--tx, 1)); cursor: pointer; box-shadow: 0 4px 0 rgba(20, 40, 110, .28), 0 6px 14px rgba(20, 40, 110, .18); }
.st-act .e { font-size: 22px; line-height: 1.1; } .st-act:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20, 40, 110, .28); } .st-act.on { background: #ffe9a8; } .st-act.danger { background: #ffe4e6; color: #8f1226; }
[data-tier="0"] .st-act { min-width: 78px; min-height: 72px; font-size: calc(14.5px * var(--tx, 1)); border-radius: 20px; } [data-tier="0"] .st-act .e { font-size: 30px; }
.st-panel > .st-selbar { position: static; flex: none; box-sizing: border-box; min-height: 54px; align-items: center; padding: 2px; gap: 6px; justify-content: flex-start; pointer-events: auto; } .st-panel > .st-selbar .st-act { min-width: 56px; min-height: 48px; padding: 2px 6px; border-radius: 14px; box-shadow: 0 3px 0 rgba(20, 40, 110, .28); } .st-panel > .st-selbar .st-act .e { font-size: 19px; }
.st-panel > .st-selbar:not([hidden]) ~ .st-tabs { display: none; }
/* ages 4–6 (no tabs): there the buttons take the place of the strip of kinds — the same height, so the picture does not jump — and the pieces stay in view */
.st[data-tier="0"] .st-panel > .st-selbar { min-height: 70px; padding: 0 0 8px; gap: 6px; justify-content: space-between; } .st[data-tier="0"] .st-panel > .st-selbar .st-act { flex: 1 1 0; min-width: 60px; min-height: 60px; } .st[data-tier="0"] .st-panel > .st-selbar .st-act .e { font-size: 24px; }
.st[data-tier="0"] .st-panel > .st-selbar:not([hidden]) ~ .st-tray .st-groups { display: none; }
.st-over { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.st-spark { position: absolute; font-size: 30px; transform: translate(-50%, -50%); animation: st-spark .7s ease-out forwards; }
@keyframes st-spark { from { opacity: 1; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(-50%, -150%) scale(1.5) rotate(40deg); } }
.st-who { position: absolute; transform: translate(-50%, -100%); padding: 2px 10px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 12.5px; white-space: nowrap; box-shadow: 0 0 0 3px #fff; }
.st-loading { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 10px; background: linear-gradient(180deg, #a9d3f7, #dff0fd); color: #17224f; }
.st-stage > .empty { position: absolute; inset: 0; z-index: 6; background: var(--panel); }
.st-slow { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .96); color: #17224f; font-weight: 700; font-size: calc(14px * var(--tx, 1)); box-shadow: 0 4px 14px rgba(20, 40, 110, .25); } .st-slow span { flex: 1 1 180px; min-width: 0; } .st-slow .st-chip { min-height: 44px; }

.st-panel { grid-area: panel; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l)); }
.st-tabs { flex: none; display: flex; gap: 6px; padding: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; } .st-tabs::-webkit-scrollbar { display: none; } .st-tabs[hidden] { display: none; }
.st-tab { flex: none; min-width: 62px; min-height: 48px; padding: 3px 9px; display: grid; justify-items: center; align-content: center; gap: 1px; border-radius: 14px; border: 2px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-size: calc(12.5px * var(--tx, 1)); font-weight: 700; cursor: pointer; }
.st-tab .e { font-size: 20px; line-height: 1; } .st-tab.on { background: var(--c-room); border-color: var(--c-room); color: #fff; }
.st-tray { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; max-height: calc(34 * var(--dvh)); overflow-y: auto; overscroll-behavior: contain; } .st-tray > * { flex: none; }
.st-row { display: flex; gap: 8px; padding: 3px 2px 5px; overflow-x: auto; min-width: 0; scrollbar-width: thin; align-items: stretch; }
.st-chip { flex: none; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-weight: 700; font-size: calc(14px * var(--k) * var(--tx, 1)); white-space: nowrap; cursor: pointer; }
.st-chip .e { font-size: 1.25em; line-height: 1; } .st-chip.on { background: #ffe9a8; border-color: #f5a800; color: #3b2500; } .st-chip[disabled] { opacity: .45; cursor: default; }
.st-chip.big { min-height: 62px; min-width: 76px; flex-direction: column; gap: 2px; border-radius: 18px; font-size: calc(14px * var(--tx, 1)); padding: 4px 10px; } .st-chip.big .e { font-size: 26px; }
.st-item { flex: none; position: relative; width: calc(86px + (var(--tx, 1) - 1) * 64px); min-height: 86px; padding: 4px 4px 5px; display: grid; justify-items: center; align-content: center; gap: 2px; border-radius: 16px; border: 3px solid transparent; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.st-item .pic { display: grid; place-items: center; width: 60px; height: 58px; } .st-item .pic canvas { display: block; } .st-item .pic .e { font-size: 38px; line-height: 1; }
.st-item .nm { max-width: calc(78px + (var(--tx, 1) - 1) * 64px); font-size: calc(11.5px * var(--tx, 1)); font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item.on { border-color: #f5a800; background: #fff3cc; color: #3b2500; } .st-item.locked .pic { filter: grayscale(.7); opacity: .6; }
.st-item .lock { position: absolute; top: 3px; right: 3px; padding: 1px 6px; border-radius: 999px; background: #17224f; color: #fff; font-size: 10.5px; font-weight: 800; } .st-item .left { position: absolute; top: 3px; left: 3px; padding: 1px 6px; border-radius: 999px; background: #1fb863; color: #fff; font-size: 10.5px; font-weight: 800; }
[data-tier="0"] .st-item { width: 96px; min-height: 92px; border-radius: 20px; } [data-tier="0"] .st-item .pic { width: 72px; height: 72px; }
.st-sw { flex: none; width: 54px; height: 54px; padding: 0; overflow: hidden; border-radius: 14px; border: 3px solid var(--panel); box-shadow: 0 0 0 2px var(--line2); background: none; cursor: pointer; } .st-sw canvas { display: block; width: 100% !important; height: 100% !important; } .st-sw.on { box-shadow: 0 0 0 4px #f5a800; }
.st-col { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line2); background: none; cursor: pointer; } .st-col i { display: block; width: 100%; height: 100%; border-radius: 50%; } .st-col.on { box-shadow: 0 0 0 4px #f5a800; }
.st-gname { display: none; } .st-gbtn { display: none; } .st-subs.none { display: none; } .st-search.in-subs { display: none; }
.st-th { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 0; font-size: calc(14px * var(--k) * var(--tx, 1)); min-width: 0; } .st-th b { min-width: 0; }
.st-fact, .st-none, .st-lookmsg { margin: 2px 4px; color: var(--muted); font-size: calc(13.5px * var(--k) * var(--tx, 1)); line-height: 1.3; }
.st label.st-search, .st label.st-num, .st label.st-range { margin: 0; color: var(--text); }   /* (labels elsewhere in the app have a margin of their own) */
.st-search { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--line2); background: var(--panel); } .st .st-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { width: 130px; min-width: 0; min-height: 44px; height: 44px; padding: 0 4px; border: 0; border-radius: 0; box-shadow: none; background: none; color: var(--text); font: inherit; font-size: 16px; outline: none; } .st .st-search:focus-within { border-color: #f5a800; box-shadow: 0 0 0 3px rgba(245, 168, 0, .25); }
.st-num { flex: none; display: grid; gap: 2px; font-size: calc(12.5px * var(--tx, 1)); font-weight: 700; } .st-num input { width: 108px; min-height: 44px; padding: 4px 10px; border-radius: 12px; border: 2px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-size: 16px; }
.st-range { display: grid; gap: 2px; padding: 2px 6px; font-size: calc(13.5px * var(--k) * var(--tx, 1)); } .st-range input { width: 100%; min-height: 44px; }
.st-facts { display: grid; gap: 4px; padding: 2px 2px 4px; } .st-kv { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 12px; border-radius: 12px; background: var(--panel); font-size: calc(13.5px * var(--k) * var(--tx, 1)); } .st-kv span { min-width: 0; } .st-kv b { text-align: right; } .st-kv.hint { background: #fff7d6; color: #3b2500; }
.st-allgood { display: grid; justify-items: center; gap: 2px; padding: 10px; text-align: center; } .st-allgood .e { font-size: 34px; }

/* wide screens, and a phone on its side: the tools stand beside the picture, from the top bar down — a band (a challenge, building together) takes room only
   above the picture, never above the tools */
@media (min-width: 1000px), (max-height: 520px) and (orientation: landscape) {
  .st[data-tier] { grid-template-columns: minmax(0, 1fr) clamp(236px, 30%, 400px); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top top" "band panel" "stage panel"; }
  .st-stage { margin-right: 0; margin-bottom: calc(8px + var(--safe-b)); }
  .st-panel { padding-top: 0; }
  .st-tray { max-height: none; flex: 1 1 0; } .st-row { flex-wrap: wrap; overflow-x: visible; }
  .st-item { flex: 1 1 86px; max-width: 120px; } .st .st-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { width: 100%; } .st-search { flex: 1 1 100%; }
  .st-gname { display: flex; } .st-subs { flex-wrap: nowrap; overflow-x: auto; }
  .st[data-tier="0"] .st-groups { flex-wrap: nowrap; overflow-x: auto; }
}
@media (min-width: 1000px) {
  .st-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; overflow: visible; } .st-tab { min-width: 0; padding: 3px 2px; }
  .st:not([data-tier="0"]) .st-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; } .st:not([data-tier="0"]) .st-groups .st-chip { min-width: 0; padding: 0; border-radius: 14px; } .st:not([data-tier="0"]) .st-groups .st-chip span:not(.e) { display: none; } .st-groups .st-chip .e { font-size: 22px; } .st-groups .st-search { grid-column: 1 / -1; }
}
@media (min-width: 1400px) { .st-cam { grid-template-rows: repeat(9, auto); } }

/* a phone (upright or on its side): the camera buttons hide behind one button, the hint is smaller, and the kinds of things open from one button as a sheet
   of pictures — so that the picture keeps its room */
@media (max-width: 700px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  .st-cam .st-ic[data-c="more"] { display: grid; } .st:not([data-camopen="1"]) .st-cam > .st-ic:not([data-c="more"]) { display: none; }
  .st-cam .st-ic { width: 44px; height: 44px; } .st-cam { gap: 4px; grid-template-rows: repeat(5, auto); }
  .st-hint { font-size: calc(13.5px * var(--tx, 1)); max-width: calc(100% - 64px); }
  .st-search.in-subs { display: inline-flex; flex: none; } .st .st-search.in-subs input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { width: 104px; } .st-search.in-groups { display: none; }
  .st-row { scrollbar-width: none; } .st-row::-webkit-scrollbar { display: none; }   /* rows slide under the finger; a scroll bar would only take height from the picture */
  .st:not([data-tier="0"]) .st-groups { display: none; } .st:not([data-tier="0"]) .st-gbtn { display: inline-flex; } .st:not([data-tier="0"]) .st-subs.none { display: flex; } .st:not([data-tier="0"]) .st-gname { display: none; }
  .st:not([data-tier="0"]) .st-groups.open { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; align-content: start; position: absolute; z-index: 8; left: 6px; right: 6px; bottom: 6px; max-height: min(calc(62 * var(--dvh)), 440px); overflow-y: auto; padding: 10px; border-radius: 20px; background: var(--panel); box-shadow: 0 0 0 2px var(--line2), 0 -6px 26px rgba(20, 40, 110, .32); }
  .st-groups.open .st-chip { flex-direction: column; gap: 2px; min-width: 0; min-height: 60px; padding: 4px; border-radius: 16px; font-size: calc(12.5px * var(--tx, 1)); line-height: 1.1; white-space: normal; text-align: center; } .st-groups.open .st-chip .e { font-size: 24px; } .st-groups.open .st-search { grid-column: 1 / -1; }
}
/* a phone on its side */
@media (max-height: 520px) and (orientation: landscape) {
  .st[data-tier] { grid-template-columns: minmax(0, 1fr) 240px; }
  .st-top { padding-top: 2px; padding-bottom: 2px; } .st-ic { width: 44px; height: 44px; } .st-ic.big, [data-tier="0"] .st-ic.big { width: 46px; height: 46px; font-size: 24px; } .st-title { min-height: 44px; } .st-play { min-height: 44px; }
  .st-stage { margin-bottom: calc(4px + var(--safe-b)); }
  [data-tier="0"] .st-act { min-width: 66px; min-height: 58px; font-size: calc(12.5px * var(--tx, 1)); } [data-tier="0"] .st-act .e { font-size: 22px; } [data-tier="0"] .st-item { width: 86px; min-height: 84px; }
  .st-act { min-height: 52px; } .st-selbar { bottom: 4px; }
  .st:not([data-tier="0"]) .st-groups.open { left: auto; right: 4px; top: 4px; bottom: 4px; width: min(calc(68 * var(--vw)), 560px); max-height: none; }
}
/* a phone held upright: smaller buttons in the top bar and the whole name of the place (two lines when it is long); the tray keeps ONE height whatever tool
   is open, so the picture never jumps */
@media (max-width: 700px) and (orientation: portrait) {
  .st-top { gap: 5px; padding: 4px calc(8px + var(--safe-r)) 4px calc(8px + var(--safe-l)); } .st-top .st-ic { width: 44px; height: 44px; } .st-top .st-ic.big { width: 46px; height: 46px; font-size: 24px; } [data-tier="0"] .st-top .st-ic.big { width: 60px; height: 60px; font-size: 32px; }   /* for the youngest Undo stays a BIG arrow */
  .st-top [data-redo] { display: none; }   /* “Redo” is in the “More” list on a phone */
  .st-title { min-height: 44px; padding: 2px 12px; } .st-title > span { display: none; }
  .st-title b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: calc(14.5px * var(--tx, 1)); line-height: 1.12; text-align: left; overflow-wrap: anywhere; }
  .st-save .w { display: none; } .st-save { flex: 0 1 auto; min-width: 1.4em; overflow: visible; font-size: 12px; } .st-play span { display: none; } .st-play { padding: 4px 12px; min-height: 44px; min-width: 46px; justify-content: center; }
  .st-top > .st-save + * { margin-left: auto; }
  .st-panel { padding: 4px calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l)); }
  .st:not([data-tier="0"]) .st-tray { height: calc(152px + (var(--tx, 1) - 1) * 40px); max-height: none; }
  .st-selbar { gap: 6px; padding-left: 6px; padding-right: 6px; } [data-tier="0"] .st-act { min-width: 62px; padding: 4px 4px; font-size: calc(13px * var(--tx, 1)); }
}

/* dialogs of the studio */
.st-more { display: grid; gap: 8px; } .st-moreitem { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 16px; border: 2px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .st-moreitem .e { font-size: 26px; } .st-moreitem span { display: grid; min-width: 0; } .st-moreitem small { color: var(--muted); }
.st-sched { display: grid; gap: 14px; overflow-x: auto; } .st-table { width: 100%; border-collapse: collapse; font-size: 14px; } .st-table th, .st-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line2); } .st-table td:nth-child(n+2), .st-table th:nth-child(n+2) { text-align: right; } .st-table .sum td { font-weight: 700; } .st-table .total td { border-top: 2px solid var(--text); }
.st-dress { display: grid; gap: 10px; } .st-dress .pv { width: 130px; height: 160px; margin: 0 auto; position: relative; } .st-dress .pv > * { width: 100%; height: 100%; } .st-drow { display: grid; gap: 2px; } .st-drow b { font-size: 13.5px; }
body.calm .st-spark { display: none; } body.calm .st-ic:active, body.calm .st-act:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .st-spark { display: none; } .st-card, .st-card:hover { transition: none; transform: none; } }

/* ---------- My Place: the way to the challenges, and brothers' and sisters' places ---------- */
.st-wide { display: flex; align-items: center; gap: calc(14px * var(--k)); min-height: 64px; padding: calc(12px * var(--k)) calc(16px * var(--k)); border-radius: var(--kr); background: linear-gradient(135deg, #fff3cc, #ffe2a6); border: 2px solid #f5a800; box-shadow: 0 5px 0 #c98a00; color: #3b2500; text-decoration: none; }
.st-wide .e { font-size: calc(38px * var(--k) * var(--tx, 1)); line-height: 1; } .st-wide .t { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; } .st-wide b { font-size: calc(18px * var(--k) * var(--tx, 1)); } .st-wide small { font-size: calc(13.5px * var(--k) * var(--tx, 1)); line-height: 1.25; } .st-wide .go { font-size: 22px; } .st-wide:active { transform: translateY(3px); box-shadow: 0 2px 0 #c98a00; }
.st-card.live { border-color: #2ec46d; box-shadow: 0 5px 0 #1f8f4f; } .st-card.live .nm small { color: #127a3d; font-weight: 700; }
.st .sr-only, .st-ch .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- building together: the band under the top bar ---------- */
.st-band { grid-area: band; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l)); padding: 6px 10px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line2); max-height: calc(38 * var(--dvh)); overflow-y: auto; overscroll-behavior: contain; min-width: 0; }
.st-band[hidden] { display: none; } .st-band > * { min-width: 0; }
.st-tbtext { flex: 1 1 280px; display: grid; gap: 6px; } .st-tbrow { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .st-tbmore { flex: 1 1 100%; display: grid; gap: 4px; }
.st-tg { position: relative; } .st-tg i { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #2ec46d; color: #fff; font-size: 12px; font-weight: 800; font-style: normal; line-height: 20px; text-align: center; } .st-tg i[hidden] { display: none; }
.st-people, .st-turns, .st-tgacts, .st-phrases { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-person { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 12px 4px 8px; border-radius: 999px; border: 2px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-weight: 700; font-size: calc(14px * var(--k) * var(--tx, 1)); }
.st-person i { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0, 0, 0, .12); } .st-person small { color: var(--muted); font-weight: 700; } .st-person .tb { font-size: 18px; color: var(--muted); }
button.st-person { cursor: pointer; } .st-person b { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-said { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: 14px; border: 3px solid; background: #fff; color: #17224f; font-weight: 800; font-size: 14.5px; white-space: nowrap; box-shadow: 0 4px 12px rgba(20, 40, 110, .25); animation: st-pop .25s ease-out; }
@keyframes st-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.st-chip.turn.on.t-me { background: #d6ecff; border-color: #3fa9ff; color: #0b3a66; } .st-chip.turn.on.t-helper { background: #ffeeb8; border-color: #f5b301; color: #3b2500; }
.st[data-turn="helper"] .st-stage { box-shadow: inset 0 0 0 5px #f5b301, 0 6px 18px rgba(20, 40, 110, .16); } .st[data-turn="me"] .st-stage { box-shadow: inset 0 0 0 5px #3fa9ff, 0 6px 18px rgba(20, 40, 110, .16); }
.st-tgnote { flex: 1 1 260px; font-size: calc(14px * var(--k) * var(--tx, 1)); line-height: 1.3; } .st-tgnote b { display: inline; } .st-tgnote span { color: var(--muted); }
.st-tghelp { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--muted); }
.st-tgnotice { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; min-height: 30px; font-weight: 700; font-size: calc(14px * var(--k) * var(--tx, 1)); } .st-tgnotice i, .st-ask > i { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.st-ask { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #fff7d6; color: #3b2500; font-size: calc(14.5px * var(--k) * var(--tx, 1)); } .st-ask > span { flex: 1 1 200px; min-width: 0; } .st-ask .kbtn, .st-ask .btn { min-height: 44px; margin: 0; }
.st-grown .st-band { background: #f4f7fb; } .st-grown .st-ask { background: #eef3fb; color: var(--text); }
/* marks on the picture */
.st-mark { position: absolute; width: 0; height: 0; } .st-mark i { position: absolute; left: -8px; top: -20px; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .3); } .st-mark b { position: absolute; left: 14px; top: -24px; padding: 2px 10px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 12.5px; white-space: nowrap; box-shadow: 0 0 0 3px #fff; }
.st-holdpin { position: absolute; transform: translate(-50%, -130%); padding: 3px 10px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 12.5px; white-space: nowrap; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .3); }
.st-pointpin { position: absolute; width: 0; height: 0; } .st-pointpin i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 5px solid var(--c, #8a63d2); box-shadow: 0 0 0 3px #fff, inset 0 0 0 3px #fff; animation: st-pulse 1.1s ease-in-out infinite; } .st-pointpin b { position: absolute; left: 0; top: -44px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 12.5px; white-space: nowrap; box-shadow: 0 0 0 3px #fff; }
@keyframes st-pulse { 0%, 100% { transform: scale(.7); opacity: 1; } 50% { transform: scale(1.25); opacity: .65; } }
.st-hand { position: absolute; z-index: 7; font-size: 44px; line-height: 1; transform: translate(-30%, -8%); transition: left 1s ease-in-out, top 1s ease-in-out; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25)); } .st-hand.tap { animation: st-tap .5s ease-in-out 2; }
@keyframes st-tap { 50% { transform: translate(-30%, -8%) scale(.8); } }
.st-stepmark { position: absolute; z-index: 7; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 50%; background: #f5b301; color: #3b2500; font-weight: 900; font-size: 20px; box-shadow: 0 0 0 4px #fff; }
.st-item.show { border-color: #f5b301; box-shadow: 0 0 0 4px #ffe08a; }
/* the sheet behind the button, and the card when somebody starts building in one of the child's places */
.st-tgsheet { display: grid; gap: 12px; } .st-tgopt { display: flex; gap: 12px; padding: 12px; border-radius: 16px; border: 2px solid var(--line2); background: var(--panel); } .st-tgopt > .e { font-size: 34px; line-height: 1; } .st-tgopt > div { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; } .st-tgopt p { margin: 0; line-height: 1.35; } .st-tgopt .st-row { flex-wrap: wrap; overflow: visible; }
.st-invite { position: fixed; z-index: 60; right: calc(12px + var(--safe-r)); bottom: calc(78px + var(--safe-b)); max-width: min(360px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 18px; background: #fff; color: #17224f; border: 3px solid #2ec46d; box-shadow: 0 8px 24px rgba(20, 40, 110, .3); font-size: 15px; animation: st-pop .3s ease-out; }
.st-invite > i { flex: none; width: 18px; height: 18px; border-radius: 50%; } .st-invite > span { flex: 1 1 160px; min-width: 0; } .st-invite .kbtn { min-height: 44px; margin: 0; }

/* ---------- building challenges ---------- */
.st-chnext { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: calc(14px * var(--k)); align-items: center; } .st-chnext .pic { border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: linear-gradient(180deg, #a9d3f7, #dff0fd); } .st-chnext .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-chnext .txt { display: grid; gap: 6px; min-width: 0; } .st-chnext h2 { margin: 0; } .st-chnext p { margin: 0; line-height: 1.35; } .st-chnext small { color: var(--muted); font-weight: 700; } .st-chnext.done { grid-template-columns: 1fr; }
.st-ladder { display: grid; gap: calc(8px * var(--k)); grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(230px * var(--k))), 1fr)); }
a.st-step { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border-radius: 16px; border: 2px solid var(--line2); background: var(--panel); color: var(--text); text-decoration: none; }
a.st-step .n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--line2); font-weight: 800; } a.st-step .e { font-size: calc(26px * var(--k) * var(--tx, 1)); line-height: 1; } a.st-step .t { display: grid; min-width: 0; } a.st-step b { font-size: calc(15.5px * var(--k) * var(--tx, 1)); line-height: 1.15; } a.st-step small { color: var(--muted); font-size: calc(12.5px * var(--k) * var(--tx, 1)); }
a.st-step.done { background: color-mix(in srgb, #2ec46d 12%, var(--panel)); border-color: #2ec46d; } a.st-step.done .n { background: none; font-size: 22px; } a.st-step.next { border-color: #f5a800; box-shadow: 0 4px 0 #c98a00; background: #fff3cc; color: #3b2500; } a.st-step.next small { color: #6b4a00; } a.st-step.next .n { background: #f5a800; color: #3b2500; }
.st-band[data-kind="challenge"] { align-items: flex-start; }
.st-chbrief { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; } .st-chbrief .e { font-size: 26px; line-height: 1.1; } .st-chbrief p { flex: 1 1 auto; margin: 0; min-width: 0; font-weight: 700; font-size: calc(15px * var(--k) * var(--tx, 1)); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .st-chbrief p.open { display: block; overflow: visible; }
.st-chbrief [data-morebrief][hidden] { display: none; }
.st-chbrief .st-read { flex: none; width: 44px; min-width: 44px; min-height: 44px; margin: 0; } .st-chip.sm { min-height: 44px; padding: 2px 10px; font-size: calc(13px * var(--tx, 1)); }
.st-checks { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; } .st-checks li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: var(--chip, rgba(120, 130, 160, .12)); font-size: calc(14px * var(--k) * var(--tx, 1)); line-height: 1.2; } .st-checks li.ok { background: #d9f7e3; color: #0f5a2c; font-weight: 700; }
.st-chacts { flex: 0 1 auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .st-checks { align-self: center; } .st-chinfo { flex: 1 1 160px; min-width: 0; font-size: calc(13.5px * var(--k) * var(--tx, 1)); color: var(--muted); font-weight: 700; }
.st-chip.glow { background: #fff3cc; border-color: #f5a800; color: #3b2500; animation: st-glow 1.6s ease-in-out infinite; } @keyframes st-glow { 50% { box-shadow: 0 0 0 5px rgba(245, 168, 0, .3); } }
.st-chdone { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-radius: 14px; background: #d9f7e3; color: #0f5a2c; } .st-chdone b { font-size: calc(16px * var(--k) * var(--tx, 1)); } .st-chdone .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .st-chdone .kbtn { min-height: 44px; margin: 0; } .st-keptnote { font-weight: 800; align-self: center; }
.st-chmodel { flex: none; display: grid; justify-items: center; gap: 2px; } .st-chmodel img { width: calc(132px * var(--k)); max-width: 30vw; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; border: 3px solid #f5a800; display: block; } .st-chmodel small { font-weight: 800; color: var(--muted); }
/* once building has begun the brief folds away on EVERY screen (its chip brings it back): the checklist and the buttons are what is needed while building */
.st-band.folded .st-chbrief { display: none; } .st-band.folded[data-kind="challenge"] { align-items: center; } .st-band.folded .st-checks { flex: 1 1 220px; min-width: 0; } .st-band.folded .st-chacts { flex-wrap: nowrap; } .st-band.folded .st-chinfo { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-band.folded [data-briefchip] span:not(.e), .st-band.folded [data-again] span:not(.e) { display: none; } .st-band.folded [data-briefchip], .st-band.folded [data-again] { min-width: 46px; padding: 2px 8px; }
/* a narrow screen: what is said in words on top, the buttons in ONE row that slides sideways — the picture keeps its room */
@media (max-width: 700px) { .st-chnext { grid-template-columns: 1fr; } .st-band { padding: 4px 8px; gap: 4px 8px; margin-bottom: 4px; } .st-tgnote { font-size: calc(13px * var(--tx, 1)); } .st-tgnote span[data-ownerstate] { display: block; } .st-checks li { font-size: calc(13.5px * var(--tx, 1)); padding: 3px 8px; white-space: nowrap; } .st-chbrief p { font-size: calc(14px * var(--tx, 1)); }
  .st-tbtext { flex: 1 1 100%; } .st-tbrow, .st-tbrow > *, .st-phrases, .st-checks, .st-chacts { flex-wrap: nowrap; } .st-tbrow, .st-phrases, .st-checks, .st-chacts { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .st-tbrow::-webkit-scrollbar, .st-phrases::-webkit-scrollbar, .st-checks::-webkit-scrollbar, .st-chacts::-webkit-scrollbar { display: none; } .st-tbrow > *, .st-chacts > *, .st-checks > * { flex: none; } .st-chinfo { flex: none; white-space: nowrap; } .st-chmodel img { width: 96px; }
  .st-band .st-chip { min-height: 44px; }
  .st-chacts { margin-left: 0; } .st-chdone { padding: 5px 8px; gap: 4px 8px; } .st-chdone b { font-size: calc(14.5px * var(--tx, 1)); } .st-chdone .row { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .st-chdone .row::-webkit-scrollbar { display: none; } .st-chdone .row > * { flex: none; } .st-chbrief p { -webkit-line-clamp: 3; } .st-band.copy .st-checks { flex: 1 1 0; min-width: 0; align-self: center; } .st-band.copy .st-chmodel small { display: none; } .st-band.copy .st-chmodel img { width: 84px; }
 }
/* a phone on its side: the band is one row that slides sideways */
@media (max-height: 520px) and (orientation: landscape) { .st-band { max-height: 54px; margin-bottom: 3px; padding: 2px 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; align-items: center; scrollbar-width: none; } .st-band > * { flex: none; max-width: 80vw; } .st-people, .st-turns, .st-tgacts, .st-phrases, .st-checks, .st-chacts, .st-tbrow, .st-chdone, .st-chdone .row { flex-wrap: nowrap; } .st-chbrief { flex: 0 0 min(52vw, 380px); } .st-tgnote { flex: 0 0 min(52vw, 360px); } .st-band .st-chip { min-height: 44px; } .st-chdone { padding: 2px 8px; } .st-chmodel img { width: 60px; } .st-chmodel small { display: none; } .st-band .st-ask { flex: none; flex-wrap: nowrap; padding: 2px 8px; } .st-band .st-ask > span { flex: 0 1 auto; max-width: 46vw; } }
/* a phone, upright or on its side — the brief is folded: ONE row. The checklist slides sideways, the buttons are pictures (each still says its name to a screen reader) */
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  .st-band.folded[data-kind="challenge"] { flex-wrap: nowrap; overflow: hidden; } .st-band.folded .st-checks { flex: 1 1 0; min-width: 0; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .st-band.folded .st-checks::-webkit-scrollbar { display: none; } .st-band.folded .st-checks > * { flex: none; white-space: nowrap; }
  .st-band.folded .st-chacts { flex: none; overflow: visible; gap: 4px; padding-bottom: 0; margin-left: 0; } .st-band.folded .st-chinfo { display: none; }
  .st-band.folded .st-chacts .st-chip { min-width: 44px; padding: 2px 6px; } .st-band.folded .st-chacts .st-chip span:not(.e) { display: none; } .st-band.folded.copy .st-chmodel img { width: 60px; } }
body.calm .st-pointpin i, body.calm .st-chip.glow, body.calm .st-said, body.calm .st-invite { animation: none; } body.calm .st-hand { transition: none; }
@media (prefers-reduced-motion: reduce) { .st-pointpin i, .st-chip.glow, .st-said, .st-invite, .st-hand.tap { animation: none; } .st-hand { transition: none; } }
a.st-chip { text-decoration: none; }
@media (min-width: 1000px), (max-height: 520px) and (orientation: landscape) { .st-band { margin-right: 0; } }   /* beside the tools, not above them */

/* My Place, at the foot: the way to the favorite place, and (quietly) to the builders of earlier versions */
.st-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(8px * var(--k)) calc(18px * var(--k)); padding: 4px 0 10px; }
.st-foot .st-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: inherit; opacity: 0.82; font-size: calc(14.5px * var(--k) * var(--tx, 1)); text-decoration: underline; text-underline-offset: 3px; }