#shareCardDialog{box-sizing:border-box;width:min(1200px,calc(100vw - 32px));height:min(900px,94dvh);max-height:94dvh;padding:22px;border-radius:12px;overflow:hidden}
#shareCardDialog[open]{display:flex;flex-direction:column;gap:16px}
.share-head{display:flex;justify-content:space-between;align-items:center;flex:none;gap:12px}.share-head small{font:12px var(--sans);color:var(--muted)}.share-head h2{font:26px var(--serif);margin:6px 0 0}
#shareCardDialog button,#shareCardDialog select,#shareCardDialog input:not([type=range]):not([type=checkbox]):not([type=file]){min-height:40px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:5px;padding:7px 10px;font:12px var(--sans);box-sizing:border-box}
#shareCardDialog button{cursor:pointer}#shareCardDialog button:disabled{opacity:.45;cursor:wait}
.share-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;min-height:0;flex:1}.share-settings{overflow:auto;min-height:0;padding-right:12px;overscroll-behavior:contain}.share-settings fieldset{border:0;border-bottom:1px solid var(--line);padding:0 0 18px;margin:0 0 18px;min-width:0}.share-settings legend{font:600 13px var(--sans);margin-bottom:12px}.share-settings label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:12px var(--sans);margin:10px 0}.share-settings label select{margin-left:auto;max-width:180px}.share-settings input[type=range]{width:100%;accent-color:var(--accent)}.share-settings output{margin-left:auto}.share-settings input[type=text],#shareNote{width:100%}.share-settings small{display:block;font:11px/1.6 var(--sans);color:var(--muted)}.share-check{flex-wrap:nowrap!important}.share-check input{accent-color:var(--accent)}
.background-groups{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}.background-groups button{min-height:34px!important;padding:5px 8px!important;font-size:11px!important}.background-groups button[aria-pressed=true]{color:var(--accent)!important;border-color:var(--accent)!important}
#shareBackgrounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:250px;overflow:auto;padding:3px}#shareCardDialog #shareBackgrounds button{padding:3px;display:flex;flex-direction:column;gap:5px;min-width:0}#shareBackgrounds button>span{width:100%;height:50px;display:grid;place-items:center;font:22px var(--serif);border-radius:3px}#shareBackgrounds small{font-size:10px;width:100%;text-align:center;padding-bottom:4px}#shareBackgrounds [aria-pressed=true]{outline:2px solid var(--accent);outline-offset:0}
.share-upload{border:1px dashed var(--line);padding:10px;border-radius:5px}.share-upload input{max-width:100%;font:11px var(--sans);color:var(--muted)}
.share-preview{min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px}.share-canvas-wrap{display:flex;justify-content:center;align-items:flex-start;overflow:auto;min-height:0;flex:1;padding:20px;background:repeating-conic-gradient(#8881 0% 25%,transparent 0% 50%) 0 0/20px 20px;border:1px solid var(--line);border-radius:8px}#shareCanvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 10px 32px #0004}#sharePreviewStatus{font:11px var(--sans);color:var(--muted);margin:0;min-height:16px}
.share-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:none;border-top:1px solid var(--line);padding-top:12px}.share-output{display:flex;gap:10px;flex-wrap:wrap}.share-output label{font:11px var(--sans);display:flex;align-items:center;gap:5px}.share-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}#shareCardDialog .share-primary{background:var(--ink);color:var(--panel);border-color:var(--ink)}#shareStatus{font:12px/1.5 var(--sans);color:var(--muted);width:100%;margin:0}#shareStatus:empty{display:none}
.atelier .preview-stage[data-reading-background]:not([data-reading-background=default]){background-size:var(--reading-image-size,cover)!important}
#backgroundDialog .background-choices{max-height:55dvh;overflow:auto;padding:4px}
@media(max-width:850px){.share-workspace{grid-template-columns:240px minmax(0,1fr);gap:12px}#shareCardDialog{padding:16px}.share-canvas-wrap{padding:10px}.share-settings{padding-right:8px}.share-actions{margin-left:0}}
@media(max-width:600px){#shareCardDialog{width:calc(100vw - 12px);height:96dvh;max-height:96dvh;padding:12px;gap:10px}.share-workspace{display:flex;flex-direction:column;overflow:auto;gap:16px}.share-preview{order:-1;flex:none;height:40dvh}.share-settings{overflow:visible;padding:0;flex:none}.share-settings label select{max-width:200px}.share-head small{display:none}.share-head h2{font-size:22px}.share-bottom{gap:6px;padding-top:8px}.share-output{gap:8px}.share-output label{font-size:10px}#shareCardDialog .share-output select{min-height:34px;padding:4px}.share-actions{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}.share-actions button{font-size:11px!important;padding:6px!important}#shareBackgrounds{grid-template-columns:repeat(4,minmax(0,1fr));max-height:210px}.atelier .reading-footer button{padding-inline:4px;font-size:10px}}

#shareCardDialog [hidden]{display:none!important}.share-output{max-width:100%}#shareOutputSize{flex-basis:100%;font:11px/1.5 var(--sans);color:var(--muted)}
/* Shared control spacing: text, value and arrow each get their own room. */
.atelier select{appearance:none;min-height:44px;padding:10px 38px 10px 14px!important;line-height:1.5!important;border-radius:7px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8173' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;max-width:100%;box-sizing:border-box}
.atelier label:has(>select){gap:12px}
.atelier-tagline{display:none}
#shareCardDialog{padding:24px;gap:20px}
.share-head h2{font-size:24px;margin:0}
.share-workspace{grid-template-columns:300px minmax(0,1fr);gap:28px}
.share-settings{padding-inline-end:16px}
.share-settings fieldset{border:0;padding:0;margin:0 0 24px}
.share-settings label{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:16px 0;font-size:12px}
.share-settings label select{margin:0;width:100%;max-width:none}
#shareCardDialog select{background-color:var(--card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8173' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.share-settings .share-check{display:flex;gap:10px}
.share-settings details{margin-block:20px;border-top:1px solid var(--line);padding-top:16px}
.share-settings summary,.share-extra summary{cursor:pointer;font:13px/1.5 var(--sans);padding:8px 0;color:var(--ink)}
.share-settings details fieldset{margin:12px 0 0}
#practiceFont{width:100%}
#practiceFontStatus:empty{display:none}
#practiceFontStatus,#practiceFontSource{font:11px/1.6 var(--sans);color:var(--muted);margin-block:8px}
#practicePreset{width:100%;margin-top:14px;border-color:var(--accent)!important;color:var(--accent)!important}
.share-output{gap:16px}
.share-output label{display:grid;gap:8px}
.share-actions{align-items:center;gap:16px}
.share-extra{position:relative}
.share-extra[open]{display:flex;flex-wrap:wrap;gap:8px}
.share-extra button{margin:6px}
.share-bottom{gap:16px;padding-top:18px}
#shareOutputSize{font-size:10px}
.share-canvas-wrap{background-color:var(--panel);padding:24px}
@media(max-width:850px){.share-workspace{grid-template-columns:250px minmax(0,1fr);gap:16px}.share-actions{margin-left:auto}}
@media(max-width:600px){
 #shareCardDialog{padding:16px;gap:14px;height:96dvh}
 .share-workspace{display:flex;flex-direction:column;overflow:auto}
 .share-settings{padding:0;overflow:visible}
 .share-preview{order:0;height:44dvh;min-height:280px}
 .share-settings label select{max-width:none}
 .share-output{gap:12px;flex:1}
 .share-output label{flex:1;min-width:100px}
 .share-actions{display:flex;width:100%;justify-content:flex-end;gap:16px}
 .share-extra[open]{flex-wrap:wrap}
 .share-bottom{gap:10px;padding-top:12px}
 .share-head h2{font-size:21px}
}
#shareCardDialog .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.share-workspace{grid-template-columns:minmax(0,1fr) 300px}
#shareCardDialog select{min-height:44px}
@media(max-width:850px){.share-workspace{grid-template-columns:minmax(0,1fr) 250px}}
@media(max-width:600px){.share-preview{height:32dvh;min-height:220px}.share-canvas-wrap{padding:12px}}