/* Shared family menu: scoped selectors preserve each service's visual identity. */
.family-menu-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:9px;border:0;background:transparent;color:#1a2240;touch-action:manipulation}
.family-menu-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
#help.family-menu-button{width:44px;min-height:44px}
dialog.family-menu{--family-ink:#1a2240;--family-blue:#365ce5;--family-line:#dce3ef;box-sizing:border-box;position:fixed;inset:0 0 0 auto;margin:0;width:440px;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:max(20px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:#f7f9fc;color:var(--family-ink);box-shadow:-12px 0 40px #1a22401a;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;text-align:left;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;line-height:1.5}
dialog.family-menu::backdrop{background:#17234366}
.family-menu .family-top{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.family-menu .family-top h2{display:flex;align-items:center;gap:9px;flex:1;min-width:0;margin:0;font-size:19px;letter-spacing:0;font-weight:750}
.family-menu .family-brand-mark{width:24px;height:24px;flex:none;color:var(--family-blue)}
.family-menu .family-close{position:static;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:8px;flex:none;border:0;background:transparent;color:var(--family-ink);border-radius:10px;font-size:28px;line-height:1}
.family-menu .language-toggle{min-width:44px;min-height:44px;padding:7px;border:0;background:transparent;color:var(--family-ink);border-radius:10px;font-size:13px}
.family-menu .family-primary{display:flex;gap:4px;padding:4px;margin-bottom:28px;background:#e9edf5;border:1px solid var(--family-line);border-radius:12px}
.family-menu .family-primary button{flex:1;min-width:0;min-height:46px;padding:8px 12px;border:0;border-radius:9px;font:inherit;font-weight:700;background:transparent;color:var(--family-ink);touch-action:manipulation}
.family-menu .family-primary button[aria-pressed=true]{background:var(--family-blue);color:#fff}
.family-menu .family-primary button:disabled{opacity:.45;cursor:default}
.family-menu .family-heading{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:750;margin:0 0 14px}
.family-menu .family-heading:after{content:'';height:1px;background:var(--family-line);flex:1}
.family-menu .family-services{display:grid;gap:12px}
.family-menu .family-card{display:flex;align-items:center;gap:13px;min-height:98px;padding:12px;border:1px solid var(--family-line);border-radius:14px;background:#fff;color:var(--family-ink);text-decoration:none;box-shadow:0 2px 7px #1a224003;touch-action:manipulation}
.family-menu .family-card.is-current{background:#eef3ff;border-color:#c8d6f8}
.family-menu .family-art{width:70px;height:70px;flex:none}
.family-menu .family-copy{flex:1;min-width:0}.family-menu .family-copy strong{display:block;font-size:16px;line-height:1.5;font-weight:750;overflow-wrap:anywhere}.family-menu .family-copy small{display:block;font-size:12px;color:#586580;margin-top:3px}
.family-menu .family-current{font-size:10px;line-height:1.5;white-space:nowrap;background:#d5f4e9;color:#17634f;padding:5px 7px;border-radius:8px;flex:none}
.family-menu .family-chevron{width:20px;height:20px;fill:none;stroke:var(--family-blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.family-menu .family-new-tab{font-size:11px;color:#65718a;margin:10px 0 24px}
.family-menu .family-footer{border-top:1px solid var(--family-line);padding-top:10px}
.family-menu .family-help{padding:0;border:0;border-radius:0;background:transparent;margin:0}
.family-menu .family-help summary{cursor:pointer;padding:12px 4px;min-height:44px;font-size:14px;font-weight:600;color:#465574}
.family-menu .family-help button{margin:0 0 8px;min-height:44px;font-size:13px;background:#fff;border:1px solid var(--family-line);color:var(--family-ink)}
.family-menu .family-privacy{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 4px;font-size:14px;text-decoration:none;color:#465574}
.family-menu :is(a,button,summary):focus-visible{outline:3px solid var(--family-blue);outline-offset:3px}
@media(hover:hover){.family-menu a.family-card:hover{background:#f0f5ff;border-color:#94adee}.family-menu :is(.family-close,.language-toggle,.family-privacy):hover{background:#e9eef8}.family-menu .family-primary button:not([aria-pressed=true]):not(:disabled):hover{background:#dce4f4}}
@media(max-width:480px){dialog.family-menu{width:100%;padding-right:max(18px,env(safe-area-inset-right));padding-left:max(18px,env(safe-area-inset-left));box-shadow:none}}
@media(max-width:350px){.family-menu .family-art{width:52px;height:60px}.family-menu .family-card{gap:9px;padding:10px}.family-menu .family-copy strong{font-size:14px}.family-menu .family-copy small{font-size:11px}.family-menu .family-top h2{font-size:17px}}

.family-menu *{box-sizing:border-box}dialog.family-menu::backdrop{backdrop-filter:none}
/* Studio integration: the editor keeps its original header and canvas height. */
#help.family-menu-button{width:44px;height:44px;flex:0 0 44px;border-radius:9px}
.family-menu .family-top{flex-wrap:wrap;gap:4px}
.family-menu .family-top h2{font-size:17px}
.family-menu .family-top .language-toggle[aria-pressed=true]{background:#e5ecff;color:#365ce5}
.family-menu .family-help p{font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.download-followup{border-top:1px solid #dce3ef;margin-top:22px;padding-top:18px;color:#1a2240}
.download-followup[hidden]{display:none}
.download-followup .continue-design{width:100%;min-height:48px;border-radius:9px;background:#2347e7;color:white;font-weight:700;padding:12px}
.download-followup h3{font-size:15px;margin:22px 0 10px}
.download-followup a{color:#365ce5;text-decoration:none;overflow-wrap:anywhere}
.download-followup .puzzle-invite{display:flex;flex-direction:column;gap:4px;border:1px solid #dce3ef;border-radius:10px;padding:12px;background:#f7f9fc;font-size:14px}
.download-followup .puzzle-invite small{color:#586580}
.download-followup .logo-invite{display:block;padding:12px 0;font-size:13px;min-height:44px}
.download-followup .new-tab-note{font-size:12px;color:#586580;margin:0}
.download-followup a:focus-visible{outline:3px solid #365ce5;outline-offset:3px}
@media(max-width:380px){header .brand b{display:none}}
#export-dialog:has(.download-followup:not([hidden])) #export-save{background:#edf0f8;color:#33425f}