:root{color-scheme:light;font-family:system-ui,sans-serif;color:#292b43;background:#f6f0df}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:12px;align-items:center;background:#292b43;color:#fff4d7;padding:12px 20px}header img{height:52px;width:52px;object-fit:contain}h1{font-size:20px;margin:0 0 4px}small{font-size:12px}#controls{padding:12px 20px;border-bottom:3px solid #292b43}p{line-height:1.7;margin:8px 0}button,a,input{font:inherit}button{padding:10px 14px;background:#fff9e8;border:2px solid #292b43;color:#292b43;cursor:pointer;min-height:44px}button:disabled{opacity:.5;cursor:wait}#login,#createFamily{background:#55b4a1}a{color:#294d76}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}form{display:flex;align-items:end;gap:10px;margin:14px 0;flex-wrap:wrap}label{display:grid;gap:6px;flex:1;min-width:220px}input{padding:10px;border:1px solid #777;width:100%;font-size:16px}summary{cursor:pointer;padding:12px 0;font-weight:bold}code{overflow-wrap:anywhere}#error{color:#9e2424;background:#fff0ee;padding:12px;border:2px solid #ad3939}#help{font-size:12px;color:#57576a}.import-card{border:1px dashed #727286;padding:12px;margin:10px 0}.import-card button{margin:4px}iframe{width:100%;height:calc(100dvh - 190px);min-height:560px;border:0;display:block}.paused{pointer-events:none;opacity:.45}[hidden]{display:none!important}@media(max-width:570px){header,#controls{padding:10px 12px}h1{font-size:18px}iframe{height:75dvh;min-height:500px}button{font-size:14px}.actions{gap:6px}}
:root{--cloud-top-height:100px}
body>header{padding:6px 12px;gap:8px}
body>header img{width:32px;height:32px}
body>header h1{font-size:16px;margin:0}
body>header small{display:none}
#controls{position:relative;padding:4px 12px;border-bottom-width:2px;min-height:46px}
#status{margin:0;padding:8px 92px 8px 0;min-height:36px;font-size:12px;overflow-wrap:anywhere}
#syncSettings>summary{position:absolute;right:12px;top:0;min-height:44px;display:flex;align-items:center;padding:6px 10px;font-size:13px;list-style:none;cursor:pointer}
#syncSettings>summary::-webkit-details-marker{display:none}
#syncSettings>summary:focus-visible{outline:2px solid #292b43;outline-offset:-3px}
#syncSettings[open]>summary{background:#eee4c9}
#syncSettings[open]{padding:10px 0 4px}
#bookHost iframe{height:calc(100dvh - var(--cloud-top-height));min-height:320px}
.danger-zone{border:2px solid #9e2424;background:#fff0ee;padding:12px;margin:14px 0;color:#6e1717}.danger-zone button{border-color:#9e2424;margin:4px;background:#fff}