.family-page{max-width:1000px;padding:max(18px, env(safe-area-inset-top)) 18px 110px;color:var(--play-ink,#3d3442);margin:0 auto}.family-page-head{justify-content:space-between;margin-bottom:20px;font-weight:700;display:flex}.family-panel{border:1px solid var(--play-border,#e8dfd6);background:var(--play-surface,#fffdf8);border-radius:26px;margin:20px 0;padding:22px;box-shadow:0 14px 40px #4d24630d}.family-panel h2{margin-bottom:10px;font-size:1.35rem;font-weight:800}.family-action{background:var(--play-plum,#725572);color:#fff;border-radius:18px;justify-content:center;align-items:center;gap:8px;min-height:48px;margin:8px 6px 0 0;padding:12px 20px;font-weight:800;display:inline-flex}.family-action:disabled{opacity:.5}.family-action.secondary{color:var(--play-plum,#725572);border:1px solid var(--play-border,#e8dfd6);background:#fff}.family-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;display:grid}.family-modal{z-index:220;background:#20102d99;place-items:center;padding:20px;display:grid;position:fixed;inset:0;overflow:auto}.family-modal section{background:var(--play-paper,#faf6ef);width:min(100%,460px);max-height:90dvh;color:var(--play-ink,#3d3442);border-radius:26px;padding:24px;overflow:auto;box-shadow:0 20px 80px #20102d55}.family-modal input{border:1px solid var(--play-border,#e8dfd6);width:100%;min-height:48px;color:var(--play-ink,#3d3442);background:#fff;border-radius:16px;padding:12px}.family-observation{border-bottom:1px solid var(--play-border,#e8dfd6);flex-wrap:wrap;justify-content:space-between;gap:10px;padding:12px 0;display:flex}.family-choices{flex-wrap:wrap;gap:12px;display:flex}.family-choices button{border:2px solid var(--play-border,#e8dfd6);background:#fff;border-radius:20px;min-width:64px;min-height:60px;padding:10px;font-size:1.4rem;font-weight:900}.family-choices button[aria-pressed=true]{border-color:var(--play-plum,#725572);background:#efe5eb}@media (prefers-reduced-motion:reduce){.family-page *{transition:none!important;animation:none!important}}.family-navigation{bottom:max(12px, env(safe-area-inset-bottom));z-index:110;border:1px solid var(--play-border,#e8dfd6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fff9f4ed;border-radius:30px;gap:8px;padding:6px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #2e17382e}.family-navigation button,.family-navigation a{width:48px;height:48px;color:var(--play-plum,#725572);border-radius:50%;place-items:center;display:grid}.family-navigation .family-logo{background:var(--play-plum,#725572);color:#fff;-webkit-user-select:none;user-select:none;touch-action:manipulation;font-weight:900}.family-navigation-room{top:max(12px, env(safe-area-inset-top));padding:4px;bottom:auto}body:has([data-testid=room-zone-card]) .family-navigation-room{visibility:hidden;pointer-events:none}html[data-storybook-reader=open] .family-navigation{display:none}body[data-marina-family=true] .app-main,body[data-marina-family=true] .mobile-content{padding-bottom:112px}.family-panel select{border:1px solid var(--play-border,#e8dfd6);max-width:100%;min-height:48px;color:var(--play-ink,#3d3442);background:#fffafc;border-radius:14px;padding:8px 12px;font-weight:700}.family-offline-status{top:calc(76px + env(safe-area-inset-top,0px));z-index:40;color:#5a3d66;pointer-events:none;background:#fffaf3ee;border-radius:12px;max-width:calc(100vw - 24px);margin:0;padding:6px 12px;font-size:12px;position:fixed;left:12px}.family-sync-status{z-index:115;color:#5a3d66;border:1px solid var(--play-border,#e8dfd6);background:#fffaf3ee;border-radius:18px;max-width:calc(100vw - 24px);padding:8px 14px;font-size:12px;position:fixed;bottom:90px;left:12px;box-shadow:0 4px 20px #34204416}.family-sync-status button{min-height:36px;margin-left:8px;font-weight:800;text-decoration:underline}body[data-marina-family=true] .storybooks-page-shell:not(.storybooks-page-shell--reader){height:calc(100dvh - 180px);min-height:0}body[data-marina-family=true][data-marina-room-module=true] .storybooks-page-shell:not(.storybooks-page-shell--reader){height:calc(100dvh - 90px)}