/* One tutorial layout for both roles, with reachable controls at every text size. */
html[data-theme] .modal-backdrop.sg-backdrop{position:fixed;inset:0;z-index:150;display:grid;place-items:center;box-sizing:border-box;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));overflow:hidden;background:#15102088}
html[data-theme] .sg-backdrop .modal-card.sg-dialog{box-sizing:border-box;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;width:min(700px,100%);height:min(780px,calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));max-height:100%;max-width:700px;overflow:hidden!important;padding:0!important;border:1px solid var(--es-line);border-radius:16px;background:var(--es-panel)!important;color:var(--es-ink)!important;font-family:var(--elan-ui-font,system-ui);letter-spacing:0;text-transform:none}
html[data-theme] .sg-dialog *,html[data-theme] .sg-dialog *::before{box-sizing:border-box}
html[data-theme] .sg-dialog .sg-top,html[data-theme] .sg-dialog .sg-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:12px 18px;position:static;margin:0;background:var(--es-panel)!important;color:var(--es-ink)!important;border-color:var(--es-line)!important}
html[data-theme] .sg-dialog .sg-top{border-bottom:1px solid var(--es-line)}
html[data-theme] .sg-dialog .sg-footer{border-top:1px solid var(--es-line);flex-wrap:wrap}
html[data-theme] .sg-dialog .sg-heading{min-width:0;display:grid;gap:4px}
html[data-theme] .sg-dialog .sg-heading span{font:600 calc(.875rem * var(--elan-ui-scale,1))/1.35 var(--elan-ui-font,system-ui);overflow-wrap:break-word}
html[data-theme] .sg-dialog .sg-heading small{font:400 calc(.8125rem * var(--elan-ui-scale,1))/1.45 var(--elan-ui-font,system-ui);color:var(--es-muted)!important}
html[data-theme] .sg-dialog .sg-body{min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:12px;padding:18px 22px;background:var(--es-panel)!important;color:var(--es-ink)!important}
html[data-theme] .sg-dialog h2{max-width:none;font:650 calc(1.5rem * var(--elan-ui-scale,1))/1.25 var(--elan-ui-font,system-ui);letter-spacing:-.025em;text-transform:none;margin:8px 0 12px;overflow-wrap:break-word;color:var(--es-ink)!important}
html[data-theme] .sg-dialog h3{font:600 calc(1.05rem * var(--elan-ui-scale,1))/1.4 var(--elan-ui-font,system-ui);margin:16px 0 8px;color:var(--es-ink)!important}
html[data-theme] .sg-dialog p,html[data-theme] .sg-dialog li{font:400 calc(.9375rem * var(--elan-ui-scale,1))/1.6 var(--elan-ui-font,system-ui);letter-spacing:0;color:var(--es-muted)!important;overflow-wrap:break-word}
html[data-theme] .sg-dialog .sg-intro{margin:0 0 18px;color:var(--es-ink)!important}
html[data-theme] .sg-dialog .sg-kicker{font:600 calc(.8125rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);letter-spacing:0;color:var(--es-accent-ink)!important}
html[data-theme] .sg-dialog .sg-progress{height:3px;border-radius:4px;overflow:hidden;background:var(--es-line);margin-bottom:12px}
html[data-theme] .sg-dialog .sg-progress span{display:block;height:100%;background:var(--es-accent-ink)}
html[data-theme] .sg-dialog .sg-body .sg-instructions{list-style:none;margin:8px 0 16px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;counter-reset:none}
html[data-theme] .sg-dialog .sg-body .sg-instructions li{display:block;min-width:0;padding:0;background:var(--es-soft)!important;border:1px solid var(--es-line);border-radius:10px;counter-increment:none}
html[data-theme] .sg-dialog .sg-body .sg-instructions li::before{content:none}
html[data-theme] .sg-dialog .sg-instructions strong{font:600 calc(.9375rem * var(--elan-ui-scale,1))/1.4 var(--elan-ui-font,system-ui);color:var(--es-ink)!important}
html[data-theme] .sg-dialog .sg-instructions p{font-size:calc(.875rem * var(--elan-ui-scale,1));margin:0;padding:0 14px 14px}
html[data-theme] .sg-dialog .sg-note{margin:18px 0 14px;padding:12px;border-left:3px solid var(--es-accent-ink);border-radius:0 8px 8px 0;background:var(--es-soft);font-size:calc(.8125rem * var(--elan-ui-scale,1))}
html[data-theme] .sg-dialog button,html[data-theme] .sg-chapters button{height:auto;min-height:44px;max-width:100%;padding:10px 12px;white-space:normal;overflow-wrap:break-word;border:1px solid var(--es-line);border-radius:10px;box-shadow:none!important;transform:none!important;cursor:pointer;font:600 calc(.875rem * var(--elan-ui-scale,1))/1.4 var(--elan-ui-font,system-ui);background:var(--es-panel)!important;color:var(--es-ink)!important;text-transform:none;letter-spacing:0}
html[data-theme] .sg-dialog .sg-top>button{border-color:transparent;font-weight:500;flex-shrink:0}
html[data-theme] .sg-dialog .sg-footer>.sg-primary{margin-left:auto;min-width:0;background:var(--es-accent)!important;border-color:var(--es-accent)!important;color:#fff!important}
html[data-theme] .sg-dialog .sg-action{font-size:calc(.875rem * var(--elan-ui-scale,1));border-color:var(--es-accent-ink)!important;color:var(--es-accent-ink)!important;width:100%}
html[data-theme] .sg-dialog .sg-action-note{font-size:calc(.75rem * var(--elan-ui-scale,1));line-height:1.5;margin:8px 0 0}
html[data-theme] .sg-dialog :is(button,summary):focus-visible,html[data-theme] .sg-settings :is(button,summary):focus-visible{outline:2px solid var(--es-focus);outline-offset:3px}
html[data-theme] .sg-dialog :is(.sg-contents,.sg-framing){margin:0 0 16px;min-width:0}
html[data-theme] :is(.sg-contents,.sg-framing,.sg-settings-chapters)>summary{cursor:pointer;min-height:44px;align-content:center;font:500 calc(.875rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);color:var(--es-ink)!important;overflow-wrap:break-word}
html[data-theme] .sg-dialog .sg-body .sg-chapters,html[data-theme] .sg-settings .sg-chapters{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px;counter-reset:none}
html[data-theme] .sg-dialog .sg-body .sg-chapters li,html[data-theme] .sg-settings .sg-chapters li{display:block;padding:0;margin:0;border:0;background:transparent!important;counter-increment:none}
html[data-theme] .sg-dialog .sg-body .sg-chapters li::before{content:none}
html[data-theme] .sg-chapters button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;font-weight:500}
html[data-theme] .sg-chapters button span:first-child{flex:none;width:1.75em;font-variant-numeric:tabular-nums;color:var(--es-muted)!important}
html[data-theme] .sg-chapters button span:last-child{color:inherit!important;font:inherit;grid-column:auto}
html[data-theme] .sg-chapters button[aria-current="step"],html[data-theme] .sg-dialog button[aria-pressed="true"]{background:var(--es-accent-soft)!important;color:var(--es-accent-ink)!important;border-color:var(--es-accent-ink)!important}
html[data-theme] .sg-framing fieldset{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:12px 0;min-width:0}
html[data-theme] .sg-framing legend{font:500 calc(.8125rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);margin:0 0 6px;color:var(--es-muted)}
html[data-theme] .sg-dialog .sg-framing .ag-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
html[data-theme] .sg-dialog .sg-framing-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;margin:18px 0}
html[data-theme] .sg-dialog .sg-framing-examples figure{min-width:0;margin:0}
html[data-theme] .sg-dialog .sg-framing-photo{position:relative;overflow:hidden;width:min(100%,280px,calc(360px * var(--sg-photo-ratio)));aspect-ratio:var(--sg-photo-ratio);margin:0 auto;border-radius:10px;background:#b5b2ad;isolation:isolate}
html[data-theme] .sg-dialog .sg-framing-photo img{position:absolute;display:block;width:var(--sg-photo-width);height:var(--sg-photo-height);left:var(--sg-photo-left);top:var(--sg-photo-top);max-width:none;max-height:none;margin:0;border:0;border-radius:0;object-fit:fill;filter:none}
html[data-theme] .sg-dialog .sg-framing-examples figcaption{display:grid;gap:4px;margin:10px 0 0;font:400 calc(.8125rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);color:var(--es-muted)!important;overflow-wrap:break-word}
html[data-theme] .sg-dialog .sg-framing-examples figcaption strong{color:var(--es-ink)!important;font-weight:600}
html[data-theme] .sg-settings .sg-saved-step{font:500 calc(.8125rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);color:var(--es-muted);margin:8px 0}
html[data-theme] .sg-settings-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
html[data-theme] .sg-settings-actions .ea-action{margin:0;white-space:normal}
/* Custom disclosure controls, with native keyboard and screen-reader behavior. */
html[data-theme] .sg-dialog :is(.sg-contents,.sg-tip,.sg-more)>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px;color:var(--es-ink)!important;font:500 calc(.875rem * var(--elan-ui-scale,1))/1.45 var(--elan-ui-font,system-ui);overflow-wrap:break-word}
html[data-theme] .sg-dialog :is(.sg-contents,.sg-tip,.sg-more)>summary::-webkit-details-marker{display:none}
html[data-theme] .sg-dialog :is(.sg-contents,.sg-tip,.sg-more)>summary::marker{content:""}
html[data-theme] .sg-dialog .sg-contents>summary{width:fit-content;max-width:100%;padding:8px 12px;border:1px solid var(--es-line);border-radius:999px;background:var(--es-soft);font-size:calc(.8125rem * var(--elan-ui-scale,1))}
html[data-theme] .sg-dialog .sg-contents>summary svg{flex:none;width:18px;height:18px}
html[data-theme] .sg-dialog .sg-contents-count{display:grid;place-items:center;min-width:25px;min-height:25px;padding:2px 5px;border-radius:50%;background:var(--es-panel);color:var(--es-muted);font-size:calc(.75rem * var(--elan-ui-scale,1))}
html[data-theme] .sg-dialog .sg-contents[open]>summary{border-color:var(--es-accent-ink);background:var(--es-accent-soft)}
html[data-theme] .sg-dialog .sg-contents>nav{margin-top:8px;padding:8px;border:1px solid var(--es-line);border-radius:12px;background:var(--es-soft)}
html[data-theme] .sg-dialog .sg-contents .sg-chapters{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-theme] .sg-dialog .sg-contents .sg-chapters button{height:100%;gap:6px;font-size:calc(.8125rem * var(--elan-ui-scale,1))}
html[data-theme] .sg-dialog .sg-contents .sg-chapters button span:last-child{min-width:0}
html[data-theme] .sg-dialog .sg-reading-hint{margin:14px 0 4px;font-size:calc(.75rem * var(--elan-ui-scale,1))}
html[data-theme] .sg-dialog .sg-tip>summary{padding:8px 12px}
html[data-theme] .sg-dialog .sg-tip-number{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--es-panel);color:var(--es-accent-ink);font-size:calc(.75rem * var(--elan-ui-scale,1))}
html[data-theme] .sg-dialog .sg-tip>summary strong{flex:1;min-width:0;font-size:calc(.875rem * var(--elan-ui-scale,1))}
html[data-theme] .sg-dialog .sg-tip-plus{flex:none;font-size:20px;font-weight:400;color:var(--es-muted)}
html[data-theme] .sg-dialog .sg-tip[open] .sg-tip-plus{font-size:0}
html[data-theme] .sg-dialog .sg-tip[open] .sg-tip-plus::after{content:"−";font-size:20px}
html[data-theme] .sg-dialog .sg-more{margin:0 0 14px;border-top:1px solid var(--es-line)}
html[data-theme] .sg-dialog .sg-more>summary{justify-content:space-between;padding:8px 0;font-size:calc(.8125rem * var(--elan-ui-scale,1))}
html[data-theme] .sg-dialog .sg-more>summary::after{content:"+";font-size:20px}
html[data-theme] .sg-dialog .sg-more[open]>summary::after{content:"−"}
html[data-theme] .sg-dialog .sg-more .sg-note{margin:8px 0}
@media(max-width:600px){html[data-theme] .sg-dialog .sg-body{padding:16px}html[data-theme] .sg-dialog .sg-top,html[data-theme] .sg-dialog .sg-footer{padding:10px 12px}}
@media(max-width:600px){html[data-theme] .sg-dialog .sg-framing-examples{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){html[data-theme] .sg-dialog .sg-contents .sg-chapters{grid-template-columns:minmax(0,1fr)}}
@media(max-height:500px){html[data-theme] .sg-dialog .sg-top,html[data-theme] .sg-dialog .sg-footer{padding-block:6px}html[data-theme] .sg-dialog .sg-heading{gap:1px}}
html[data-theme] #app .sg-backdrop,html[data-theme] #app .sg-backdrop .sg-dialog,html[data-theme] #app .sg-backdrop .sg-dialog *,html[data-theme] #app .sg-backdrop .sg-dialog *::before,html[data-theme] #app .sg-backdrop .sg-dialog *::after{animation:none!important;transition:none!important}
/* First visit: one introduction, then an explicit choice to begin the walkthrough. */
html[data-theme] .sg-backdrop .modal-card.sg-welcome{grid-template-rows:minmax(0,1fr) auto;width:min(640px,100%);max-width:640px;height:auto;max-height:min(780px,calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)))}
html[data-theme] .sg-welcome h2{font-size:calc(1.375rem * var(--elan-ui-scale,1));margin:0 0 10px}
html[data-theme] .sg-welcome .sg-body{padding:18px 22px}
html[data-theme] .sg-welcome .sg-welcome-purpose{font-size:calc(.875rem * var(--elan-ui-scale,1));line-height:1.5;color:var(--es-ink)!important;margin:0 0 18px}
html[data-theme] .sg-welcome .sg-body .sg-welcome-features{list-style:none;display:grid;gap:14px;padding:0;margin:0 0 18px;counter-reset:none}
html[data-theme] .sg-welcome .sg-body .sg-welcome-features li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;padding:0;margin:0;background:transparent!important;border:0;counter-increment:none}
html[data-theme] .sg-welcome .sg-body li::before{content:none}
html[data-theme] .sg-welcome .sg-welcome-number{display:grid;place-items:center;min-height:28px;border-radius:8px;background:var(--es-accent-soft);color:var(--es-accent-ink);font:600 calc(.75rem * var(--elan-ui-scale,1))/1.4 var(--elan-ui-font,system-ui)}
html[data-theme] .sg-welcome .sg-welcome-features strong{display:block;font:600 calc(.875rem * var(--elan-ui-scale,1))/1.4 var(--elan-ui-font,system-ui);color:var(--es-ink)!important;overflow-wrap:break-word}
html[data-theme] .sg-welcome .sg-welcome-features p{font-size:calc(.8125rem * var(--elan-ui-scale,1));line-height:1.5;margin:3px 0 0}
html[data-theme] .sg-welcome .sg-welcome-protection{padding:12px 14px;border:1px solid var(--es-line);border-radius:12px;background:var(--es-accent-soft);margin:0 0 14px;min-width:0}
html[data-theme] .sg-welcome .sg-welcome-protection h3{font-size:calc(.875rem * var(--elan-ui-scale,1));margin:0 0 8px}
html[data-theme] .sg-welcome .sg-welcome-protection ul{display:grid;gap:5px;list-style:disc;padding:0 0 0 18px;margin:0;counter-reset:none}
html[data-theme] .sg-welcome .sg-body .sg-welcome-protection li{display:list-item;padding:0;margin:0;border:0;background:transparent!important;font-size:calc(.8125rem * var(--elan-ui-scale,1));line-height:1.5;color:var(--es-ink)!important;counter-increment:none}
html[data-theme] .sg-welcome .sg-welcome-conditions,html[data-theme] .sg-welcome .sg-welcome-reminder{font-size:calc(.75rem * var(--elan-ui-scale,1));line-height:1.5;margin:0 0 10px}
html[data-theme] .sg-welcome .sg-welcome-reminder{margin:0}
html[data-theme] .sg-welcome .sg-welcome-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 18px}
html[data-theme] .sg-welcome .sg-welcome-footer>button{width:100%;margin:0}
html[data-theme] .sg-welcome .sg-welcome-footer>[data-tour-welcome-skip]{border-color:transparent;background:transparent!important;color:var(--es-muted)!important;font-weight:500}
@media(max-width:600px){html[data-theme] .sg-welcome .sg-body{padding:16px}html[data-theme] .sg-welcome .sg-welcome-footer{padding:10px 12px}}
@media(max-height:500px){html[data-theme] .sg-welcome .sg-welcome-footer{padding-block:6px}}
/* « Conseils de cadrage par vue » folds like the other guide sections: « + » / « − », no browser triangle. */
html[data-theme] .sg-dialog .sg-framing>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;list-style:none;cursor:pointer;color:var(--sg-text,var(--es-ink));font-weight:650}
html[data-theme] .sg-dialog .sg-framing>summary::-webkit-details-marker{display:none}
html[data-theme] .sg-dialog .sg-framing>summary::marker{content:""}
html[data-theme] .sg-dialog .sg-framing>summary::after{content:"+";flex:none;font-size:20px;font-weight:400;color:var(--es-muted)}
html[data-theme] .sg-dialog .sg-framing[open]>summary::after{content:"−"}
/* Red « ! » callout that opens « Comment prendre vos photos » (tutorial card, Photos page, guide chapter).
   Compact: one line of title and one link. Its icon flashes to invite a tap; static when motion is reduced. */
html[data-theme] .sg-attention,html[data-theme] .sg-dialog .sg-attention,html[data-theme] #app .sg-attention{display:flex!important;align-items:center;gap:10px;width:100%;max-width:100%;min-height:52px;height:auto;box-sizing:border-box;margin:10px 0 0;padding:8px 12px 8px 10px!important;border:1px solid #EFB7BF!important;border-radius:14px!important;background:#FDF1F2!important;color:#3D3546!important;box-shadow:none!important;text-align:left;text-transform:none;letter-spacing:0;font-family:inherit;white-space:normal;cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-theme] .sg-attention-icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#C8102E;color:#FFFFFF;font:800 15px/1 var(--elan-ui-font,system-ui)}
html[data-theme] :is(.sg-attention.is-flashing .sg-attention-icon,.sg-attention-icon.is-flashing){animation:sg-attention-flash 1.6s ease-out infinite}
html[data-theme] .sg-attention-copy{display:grid;gap:1px;flex:1;min-width:0}
html[data-theme] .sg-attention-copy strong{color:#A1203E;font-size:calc(.8rem * var(--elan-ui-scale,1));font-weight:700;line-height:1.35}
html[data-theme] .sg-attention-copy span{color:#3D3546;font-size:calc(.82rem * var(--elan-ui-scale,1));font-weight:500;line-height:1.4;text-decoration:underline;text-underline-offset:3px}
html[data-theme] .sg-attention-go{flex:none;color:#A1203E;font-size:22px;line-height:1}
html[data-theme] .sg-attention:active,html[data-theme] #app .sg-attention:active{background:#FBE4E8!important}
@media(hover:hover){html[data-theme] .sg-attention:hover,html[data-theme] #app .sg-attention:hover{background:#FBE4E8!important}}
html[data-theme] .sg-attention:focus-visible{outline:2px solid #A1203E!important;outline-offset:2px}
html[data-theme="dark"] .sg-attention,html[data-theme="dark"] .sg-dialog .sg-attention,html[data-theme="dark"] #app .sg-attention{background:#3B232A!important;border-color:#8F4553!important;color:#F3EAF8!important}
html[data-theme="dark"] :is(.sg-attention:active,#app .sg-attention:active){background:#4A2A33!important}
@media(hover:hover){html[data-theme="dark"] :is(.sg-attention:hover,#app .sg-attention:hover){background:#4A2A33!important}}
html[data-theme="dark"] .sg-attention-icon{background:#D42A43}
html[data-theme="dark"] :is(.sg-attention-copy strong,.sg-attention-go){color:#FFB0BC}
html[data-theme="dark"] .sg-attention-copy span{color:#F3EAF8}
html[data-theme="dark"] .sg-attention:focus-visible{outline-color:#FFB0BC!important}
@keyframes sg-attention-flash{0%{box-shadow:0 0 0 0 rgba(227,52,77,.65);transform:scale(1)}12%{transform:scale(1.16)}26%{transform:scale(1)}70%{box-shadow:0 0 0 10px rgba(227,52,77,0)}100%{box-shadow:0 0 0 0 rgba(227,52,77,0);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){html[data-theme] :is(.sg-attention.is-flashing .sg-attention-icon,.sg-attention-icon.is-flashing){animation:none!important;box-shadow:0 0 0 3px rgba(200,16,46,.22)}}
html[data-app-motion="reduced"] :is(.sg-attention.is-flashing .sg-attention-icon,.sg-attention-icon.is-flashing){animation:none!important;box-shadow:0 0 0 3px rgba(200,16,46,.22)}
/* Guide dialogs switch every animation off (see above): the red « ! » is the one exception, still off when motion is reduced. */
html[data-theme] #app .sg-backdrop .sg-dialog :is(.sg-attention.is-flashing .sg-attention-icon,.sg-attention-icon.is-flashing){animation:sg-attention-flash 1.6s ease-out infinite!important}
@media(prefers-reduced-motion:reduce){html[data-theme] #app .sg-backdrop .sg-dialog :is(.sg-attention.is-flashing .sg-attention-icon,.sg-attention-icon.is-flashing){animation:none!important}}
html[data-app-motion="reduced"][data-theme] #app .sg-backdrop .sg-dialog :is(.sg-attention.is-flashing .sg-attention-icon,.sg-attention-icon.is-flashing){animation:none!important}
/* « Comment prendre vos photos »: one step per screen, the example photo beside (or above) its checklist. */
html[data-theme] .sg-photo-guide .sg-pg-attention{display:flex;align-items:flex-start;gap:12px;margin:10px 0 4px;padding:12px 14px;border:1px solid #EFB7BF;border-radius:14px;background:#FDF1F2}
html[data-theme] .sg-photo-guide .sg-pg-attention strong{display:block;color:#A1203E;font:700 calc(.875rem * var(--elan-ui-scale,1))/1.4 var(--elan-ui-font,system-ui)}
html[data-theme] .sg-photo-guide .sg-pg-attention p{margin:4px 0 0;color:#3D3546;font:400 calc(.84rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui)}
html[data-theme="dark"] .sg-photo-guide .sg-pg-attention{background:#3B232A;border-color:#8F4553}
html[data-theme="dark"] .sg-photo-guide .sg-pg-attention strong{color:#FFB0BC}
html[data-theme="dark"] .sg-photo-guide .sg-pg-attention p{color:#F3EAF8}
html[data-theme] .sg-photo-guide .sg-pg-kicker{margin:4px 0 0;font:600 calc(.8125rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);color:var(--es-accent-ink)!important}
html[data-theme] .sg-photo-guide h2{margin:4px 0 6px}
html[data-theme] .sg-photo-guide .sg-pg-lead{margin:0 0 14px;font:400 calc(.9375rem * var(--elan-ui-scale,1))/1.55 var(--elan-ui-font,system-ui);color:var(--es-ink)!important}
html[data-theme] .sg-photo-guide .sg-pg-subtitle{margin:18px 0 10px;font:600 calc(.9375rem * var(--elan-ui-scale,1))/1.4 var(--elan-ui-font,system-ui)}
html[data-theme] .sg-photo-guide :is(.sg-pg-strip,.sg-pg-checks,.sg-pg-avoid){list-style:none;margin:0;padding:0}
html[data-theme] .sg-photo-guide .sg-pg-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html[data-theme] .sg-photo-guide .sg-pg-strip li{min-width:0;margin:0}
html[data-theme] .sg-photo-guide :is(.sg-pg-thumb,.sg-pg-frame){position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:10px;background:#D9D6D0;isolation:isolate}
html[data-theme] .sg-photo-guide :is(.sg-pg-thumb,.sg-pg-frame) img{display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;border-radius:0;object-fit:cover;filter:none}
html[data-theme] .sg-photo-guide .sg-pg-strip span{display:flex;align-items:flex-start;gap:5px;margin-top:6px;font:500 calc(.75rem * var(--elan-ui-scale,1))/1.35 var(--elan-ui-font,system-ui);color:var(--es-ink);overflow-wrap:anywhere}
html[data-theme] .sg-photo-guide :is(.sg-pg-strip b){flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--es-accent);color:#FFFFFF;font:700 11px/1 var(--elan-ui-font,system-ui)}
html[data-theme] .sg-photo-guide .sg-pg-checks{display:grid;gap:10px}
html[data-theme] .sg-photo-guide :is(.sg-pg-checks,.sg-pg-avoid) li{position:relative;margin:0;padding-left:30px;font:400 calc(.875rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);color:var(--es-ink)}
html[data-theme] .sg-photo-guide :is(.sg-pg-checks,.sg-pg-avoid) li::before{position:absolute;left:0;top:1px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 12px/1 var(--elan-ui-font,system-ui)}
html[data-theme] .sg-photo-guide .sg-pg-checks li::before{content:"✓";background:var(--es-accent-soft);color:var(--es-accent-ink)}
html[data-theme] .sg-photo-guide .sg-pg-avoid{display:grid;gap:8px}
html[data-theme] .sg-photo-guide .sg-pg-avoid li::before{content:"✕";background:#FDF1F2;color:#A1203E}
html[data-theme="dark"] .sg-photo-guide .sg-pg-avoid li::before{background:#3B232A;color:#FFB0BC}
html[data-theme] .sg-photo-guide .sg-pg-avoid-title{color:#A1203E!important}
html[data-theme="dark"] .sg-photo-guide .sg-pg-avoid-title{color:#FFB0BC!important}
html[data-theme] .sg-photo-guide .sg-pg-view{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:start;gap:20px}
html[data-theme] .sg-photo-guide :is(.sg-pg-shot,.sg-pg-crop){min-width:0;margin:0}
html[data-theme] .sg-photo-guide .sg-pg-corners{position:absolute;inset:10px;pointer-events:none;opacity:.92;background:linear-gradient(#FFF,#FFF) 0 0/18px 2px,linear-gradient(#FFF,#FFF) 0 0/2px 18px,linear-gradient(#FFF,#FFF) 100% 0/18px 2px,linear-gradient(#FFF,#FFF) 100% 0/2px 18px,linear-gradient(#FFF,#FFF) 0 100%/18px 2px,linear-gradient(#FFF,#FFF) 0 100%/2px 18px,linear-gradient(#FFF,#FFF) 100% 100%/18px 2px,linear-gradient(#FFF,#FFF) 100% 100%/2px 18px;background-repeat:no-repeat}
html[data-theme] .sg-photo-guide :is(.sg-pg-shot,.sg-pg-crop) figcaption{margin:6px 0 0;text-align:center;font:400 calc(.75rem * var(--elan-ui-scale,1))/1.4 var(--elan-ui-font,system-ui);color:var(--es-muted)!important}
html[data-theme] .sg-photo-guide .sg-pg-note{margin:16px 0 0;padding:10px 12px;border-radius:10px;background:var(--es-soft);font:400 calc(.84rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);color:var(--es-ink)}
html[data-theme] .sg-photo-guide .sg-pg-crops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px}
html[data-theme] .sg-photo-guide .sg-pg-crop .sg-framing-photo{width:100%;max-width:200px}
html[data-theme] .sg-photo-guide .sg-pg-credit{margin:16px 0 0;font:400 calc(.75rem * var(--elan-ui-scale,1))/1.5 var(--elan-ui-font,system-ui);color:var(--es-muted)!important}
@media(max-width:600px){html[data-theme] .sg-photo-guide .sg-pg-view{grid-template-columns:minmax(0,1fr);gap:14px}html[data-theme] .sg-photo-guide .sg-pg-shot{width:min(100%,200px);margin-inline:auto}}
/* Photos page: the callout sits between the page title and the first group of photos. */
html[data-theme] #app .sg-attention.elan-photo-attention{margin:6px 0 20px}