.family-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;margin:32px 0 52px}.family-hero h1{font-size:clamp(34px,4.5vw,58px);line-height:1.08}.family-hero figure{margin:0}.family-hero img{width:100%;height:auto;border-radius:20px}.family-hero figcaption{font-size:13px;color:#625e55;margin-top:10px}.family-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.family-field{display:flex;flex-direction:column;gap:7px;font-weight:600;margin:0 0 16px}.family-field input,.family-field select,.family-field textarea{box-sizing:border-box;width:100%;min-width:0;font:400 16px/1.5 Arial,sans-serif;padding:11px;border:1px solid #b4b6aa;border-radius:9px;background:white;color:#232d2a}.family-field textarea{min-height:90px;resize:vertical}.family-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.family-stage{position:relative;width:100%;background:#ede9df;border:1px solid #c1c7b9;border-radius:14px;overflow:hidden;isolation:isolate}.family-stage>button{position:absolute;padding:0;border:2px solid #687971;border-radius:8px;background:#fffdf8;cursor:grab;touch-action:none;min-width:0;min-height:0;overflow:hidden;color:#0d514c}.family-stage>button[aria-pressed=true]{border-color:#0d514c;box-shadow:0 0 0 3px #bbd8ca;z-index:2}.family-stage>button>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.family-stage>button>span{position:absolute;top:0;left:0;background:#0d514c;color:white;padding:2px 7px;font-size:14px}.family-stage>button.empty:after{content:'Нет фото';font-size:clamp(8px,1.6vw,18px)}.family-roster{display:flex;gap:8px;flex-wrap:wrap;padding:0;list-style:none;margin:16px 0}.family-roster button{border:1px solid #b4b6aa;background:white;border-radius:9px;padding:10px 13px;color:#0d514c;min-height:44px;font:inherit}.family-roster button[aria-pressed=true]{background:#0d514c;color:white}.family-editor{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:24px 0;border-block:1px solid #d4d8ca;margin:24px 0;scroll-margin-top:18px}.family-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px}.family-source{display:block;width:100%;border:2px solid #b4b6aa;border-radius:12px;background:#faf7ef;padding:8px;color:#0d514c;font:inherit;min-height:48px}.family-source[aria-pressed=true]{border-color:#0d514c;background:#e3eee5}.family-source img{display:block;width:100%;height:200px;object-fit:contain;margin-bottom:8px}.family-source img:not([src]){display:none}.family-control{display:block;margin:16px 0;font-size:15px}.family-control input{display:block;width:100%;min-height:44px;accent-color:#0d514c}.family-error{color:#a02d26;overflow-wrap:anywhere}.family-handoff{max-width:900px;margin:24px auto;padding:22px;background:#f3efe2;border:1px solid #bfcbc0;border-radius:16px;color:#263e36}.family-handoff p{line-height:1.55}.family-handoff button{min-height:46px;padding:12px 18px;border:0;border-radius:10px;background:#0d514c;color:white;font:600 16px Arial;cursor:pointer}.family-handoff summary{cursor:pointer;padding:10px 0}.family-handoff pre{white-space:pre-wrap;font:14px/1.55 Arial}.family-link-box{max-width:1080px;margin:48px auto;padding:24px;background:#f3efe2;border-radius:16px}.family-link-box a{color:#0d514c;font-weight:700}.family-field input:focus-visible,.family-field select:focus-visible,.family-field textarea:focus-visible,.family-stage button:focus-visible,.family-roster button:focus-visible,.family-source:focus-visible{outline:3px solid #0d514c;outline-offset:3px}.family-stage button:focus-visible{outline-offset:-5px}.family-stage button:disabled,.family-source:disabled{cursor:default}.family-field input[type=file]{font-size:14px}.family-help{padding:16px;background:#f6f3e9;border-left:3px solid #0d514c}.family-undo{margin:10px 0}.family-count{font-size:15px;color:#43594e}.family-small{font-size:14px;color:#625e55}.family-hero a:not(.btn),.family-help a{color:#0d514c}.family-stage,.family-comparison{contain:layout}.family-fields>*{min-width:0}
@media(max-width:700px){.family-hero{grid-template-columns:1fr;gap:24px;margin:24px 0}.family-hero h1{font-size:36px}.family-hero figure{max-width:520px}.family-fields,.family-editor{grid-template-columns:1fr}.family-editor{gap:20px}.family-source img{height:170px}.family-actions .btn{flex:1 1 210px}.family-stage>button>span{font-size:12px;padding:1px 4px}.family-link-box{margin:24px 12px}.family-handoff{margin:20px 12px}.family-fields{gap:0}}
@media(prefers-reduced-motion:reduce){.family-stage *{transition:none!important;scroll-behavior:auto!important}}