/* A quiet studio: the work has the space, the controls have a place. */
body.mode-toy{background:#eae7df;font-size:16px;--page:#eae7df;--ink-3:#72695e}
.mode-toy .grain{opacity:.018;animation:none}
.toy{padding:24px 36px 12px;gap:14px;grid-template-rows:auto minmax(0,1fr) auto auto}
.toy-head{border-bottom:1px solid #2a232020;padding-bottom:18px}
.toy-mark{display:flex;align-items:baseline;gap:8px;font-size:32px;white-space:nowrap}
.toy-mark small{font:14px var(--toy);letter-spacing:0;margin-left:16px;color:var(--ink-2)}
.toy-acts{gap:8px}.pill{font-size:14px;min-height:42px;box-shadow:none}.pill.icon{min-width:42px;justify-content:center}
.studio-workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:40px;width:min(1500px,100%);margin:auto;height:100%}
.art-space{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
.art-heading,.art-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2)}
.art-heading{padding:0 2px}.art-heading>span{font-family:var(--serif);font-size:24px;color:var(--ink)}
.art-caption{font-size:13px}.art-caption span:last-child{color:#557460}
.text-action{border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer;padding:8px 0;text-underline-offset:4px}.text-action:hover{text-decoration:underline}
.toy-stage{min-width:0;container-type:size;padding:20px;background:#f8f6ef;box-shadow:0 12px 36px #3c302114,0 1px 3px #3c302115;overflow:hidden}
body.mode-toy .plate{width:min(100cqw,100cqh);height:auto;max-height:none;flex-shrink:0;animation:none}
.studio-rail{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;padding:0 2px 4px}
.rail-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.rail-heading>span{font-size:12px;letter-spacing:.14em;font-weight:600}.rail-heading .text-action{font-size:14px}#gallery-count{font-size:12px;border-radius:20px;background:#d7d3c9;padding:2px 6px;margin-left:3px}
.photo-card{padding:10px;background:#f6f3ec;border:1px solid #2a23201c;border-radius:14px}
.photo-preview{display:block;width:100%;height:clamp(78px,13vh,146px);position:relative;padding:0;border:0;overflow:hidden;border-radius:7px;cursor:pointer;background:#dedbd1}.photo-preview img{width:100%;height:100%;display:block;object-fit:cover}.photo-preview>span{position:absolute;bottom:9px;right:9px;border-radius:20px;padding:5px 10px;color:#fff;background:#171813ab;font-size:12px;backdrop-filter:blur(8px)}
.photo-info{display:flex;align-items:center;gap:10px;margin:12px 2px}.step-number{align-self:flex-start;line-height:26px;font-size:12px;color:var(--ink-2)}.photo-info h2{font:400 24px/1.1 var(--serif);margin:0 0 5px}.photo-info p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.3;overflow-wrap:anywhere}
.photo-actions{display:flex;gap:5px}.photo-actions .pill{padding:5px 8px;flex:1;justify-content:center;background:transparent;border:1px solid #2a232028;border-radius:7px}.photo-actions .pill:hover{background:white}
.journey-line{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);margin-left:18px}.journey-line span{font-size:20px}
.wall-invitation{margin-top:auto;padding-top:8px}.wall-invitation button{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-radius:8px;padding:14px;background:var(--ink);color:var(--paper);font:inherit;font-size:15px;cursor:pointer}.wall-invitation button:hover{background:#443b32}.wall-invitation p{font-size:12px;color:var(--ink-2);text-align:center;margin:8px 0 0}
.toy-bar{padding:6px 14px;border-radius:16px;background:#f8f6ef;box-shadow:0 3px 8px #30251b08;animation:none}.toy-foot{margin:0;min-height:18px;font-size:13px}.toy-foot.dim{opacity:.7}
body.gallery .studio-workspace{display:block;width:100%;height:100%;margin:0}body.gallery .art-space{display:block;width:100%;height:100%}body.gallery .studio-rail,body.gallery .art-heading,body.gallery .art-caption{display:none}body.gallery .toy-stage{height:100%;width:100%;background:transparent;box-shadow:none;padding:0}body.gallery .toy{display:block}body.mode-toy.gallery .plate{width:min(100vw,100dvh)}
body.gallery[data-mat="paper"] .toy-stage{padding:4vmin;background:#f6f3ec}body.gallery[data-mat="paper"] .plate{width:min(92vw,92dvh)}body.gallery[data-mat="ink"]{background:#171919}body.gallery[data-mat="ink"] .toy-stage{padding:4vmin}body.gallery[data-mat="ink"] .plate{width:min(92vw,92dvh)}
@media(max-width:1050px){.toy{padding:18px 20px 10px}.studio-workspace{gap:24px;grid-template-columns:minmax(0,1fr) 236px}.toy-mark small{display:none}.photo-actions .pill{font-size:13px}.toy-bar{gap:10px}.dot{width:23px;height:23px}.grp-colors{gap:5px}}
@media(max-width:760px){body.mode-toy{overflow:auto}.toy{height:auto;min-height:100dvh;padding:16px 14px;gap:16px;display:flex;flex-direction:column}.toy-head{flex-wrap:nowrap;justify-content:space-between;padding:0 0 14px}.toy-mark{font-size:26px;gap:5px}.toy-acts{flex:0 0 auto;gap:5px}.toy-acts .utils{gap:3px}.pill span{display:inline}.pill.icon{padding:8px;min-width:40px}.studio-workspace{display:flex;flex-direction:column;gap:20px;height:auto}.art-space{display:flex;flex-direction:column;gap:10px}.toy-stage{width:100%;height:calc(100vw - 28px);padding:16px;flex:none}.art-heading>span{font-size:22px}.art-caption{font-size:12px}body.mode-toy .plate{width:min(100cqw,100cqh)}.studio-rail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;overflow:visible}.rail-heading,.wall-invitation{grid-column:1/-1}.journey-line{display:none}.photo-preview{height:112px}.photo-preview>span{font-size:11px;bottom:6px;right:6px;padding:4px 7px}.photo-card{padding:8px}.photo-info{gap:6px}.photo-info h2{font-size:23px}.photo-actions{flex-wrap:wrap}.photo-actions .pill{font-size:13px;min-height:40px;padding:6px}.wall-invitation{padding-top:4px}.wall-invitation p{margin-top:7px}.toy-bar{order:2;max-width:100%;padding:8px;gap:10px}.toy-foot{order:3;text-align:center}.grp-sizes{order:1}.grp-colors{order:2}.tool-btn{width:40px;height:40px}.dot{width:25px;height:25px}.grp-colors{gap:7px;max-width:100%}body.gallery{overflow:hidden}body.gallery .toy{height:100dvh;min-height:0;position:fixed;inset:0;padding:0}body.gallery .toy-stage{height:100dvh}body.gallery .toy-bar,body.gallery .toy-foot{display:none}}
@media(max-width:420px){.toy{padding:12px 10px}.toy-mark{font-size:23px}.toy-head .pill.icon{min-width:36px;padding:7px}.toy-head .pill{min-height:38px}.toy-acts .utils{gap:1px}.toy-stage{height:calc(100vw - 20px);padding:12px}.photo-actions{gap:4px}.photo-actions .pill{font-size:12px;padding:5px;min-height:40px}.photo-preview{height:100px}}
@media(prefers-reduced-motion:reduce){.plate{transition:none}.grain{display:none}}
/* Native dialog supplies focus containment, Escape, and background inertness. */
#studio-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 48px);border:1px solid #c9c2b3;border-radius:20px;padding:28px;background:#f8f6ef;color:var(--ink);font:16px/1.5 var(--toy);box-shadow:0 28px 100px #241f1940;overscroll-behavior:contain}
#studio-dialog::backdrop{background:#28251e70;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.dialog-top h2{font:400 36px/1.1 var(--serif);margin:4px 0 20px}.eyebrow{font-size:12px;letter-spacing:.15em;margin:0;color:var(--ink-2)}.dialog-close{border:1px solid #d8d2c7;border-radius:50%;background:transparent;font:26px/1 var(--toy);width:42px;height:42px;cursor:pointer;flex-shrink:0}.dialog-close:hover{background:white}
.studio-tabs{display:flex;gap:4px;border-bottom:1px solid #d9d4c9;padding-bottom:12px;margin-bottom:20px}.studio-tabs button{flex:1;padding:10px 8px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:14px;cursor:pointer;color:var(--ink-2)}.studio-tabs button[aria-current="page"]{background:var(--ink);color:#fff}.dialog-intro{margin:0 0 20px;color:var(--ink-2);font-size:16px;line-height:1.6}.studio-button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;min-height:44px;border:1px solid #cfc8bb;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}.studio-button:hover{background:white}.studio-button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.studio-button.primary:hover{background:#4c4239}.studio-button:disabled,.text-action:disabled{opacity:.45;cursor:not-allowed}.studio-button.wide{width:100%}.import-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.url-section{border:1px solid #d9d2c4;border-radius:10px;padding:12px 16px;margin-bottom:24px;background:#f0ede4}.url-section summary{cursor:pointer;font-size:15px;min-height:24px}.url-section summary span{float:right}.url-section label{display:block;font-size:14px;margin:16px 0 8px}.url-section label small{float:right;color:var(--ink-2);font-size:12px}.url-submit{display:flex;align-items:center;justify-content:space-between;gap:12px}.input-help{font-size:13px;line-height:1.6;color:var(--ink-2);margin:10px 0 16px}
#studio-dialog textarea{width:100%;resize:vertical;padding:12px;border:1px solid #bfb7a6;border-radius:7px;background:#fffdf8;color:var(--ink);font:14px/1.5 var(--toy)}#studio-dialog select{max-width:100%;min-height:42px;font:14px var(--toy);padding:7px 28px 7px 10px;border:1px solid #cfc7b8;border-radius:7px;background:#fffdf8;color:var(--ink)}.collection-meta{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:12px;margin:0 0 14px}.collection-meta>span{letter-spacing:.12em}.collection-meta label{font-size:14px}.collection-meta select{margin-left:5px}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}.collection-tile{min-width:0}.collection-pick{position:relative;width:100%;padding:5px;border-radius:10px;background:transparent;border:2px solid transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:left}.collection-pick[aria-pressed="true"]{border-color:#94714a;background:#eee5d4}.collection-pick:hover{background:#eae6dc}.collection-pick img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:5px}.collection-pick>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding:7px 2px 0}.collection-pick>b{position:absolute;top:12px;left:12px;background:#28251dcc;color:white;font-size:10px;font-weight:500;letter-spacing:.04em;border-radius:4px;padding:4px 6px}.tile-controls{display:flex;justify-content:space-between;gap:4px}.tile-controls .text-action{font-size:12px;padding:5px 2px;min-height:36px}.tile-credit{display:block;color:var(--ink-2);font-size:11px;line-height:1.4;padding:0 3px}.studio-message{font-size:14px;color:#45644d;margin:18px 0 0}.studio-message:empty{display:none}.studio-message.error{color:#a03525}.field-label{display:block;font-size:14px;margin-bottom:8px}.mat-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 22px}.mat-options button{height:94px;border:2px solid #d0c8b9;border-radius:8px;font:14px var(--toy);cursor:pointer}.mat-paper{background:#efebe0;color:#3d362e}.mat-ink{background:#1c2020;color:white}.mat-none{background:#cfcbbe;color:#3d362e}.mat-options button[aria-pressed="true"]{outline:2px solid #967248;outline-offset:3px}.studio-check{display:flex;gap:10px;align-items:center;font-size:16px;margin:18px 0 10px}.studio-check input{width:20px;height:20px}.export-section{border-top:1px solid #d6cfc1;margin-top:26px;padding-top:20px}.export-section h3{font:28px var(--serif);margin:0 0 14px}.export-section label{font-size:14px;margin-right:12px}
#cam-video.in-frame.rear{transform:none}.cam-card{max-height:calc(100dvh - 32px);overflow:auto}.cam-btns{flex-wrap:wrap}.cam-note{font-size:15px}.photo-card[data-drop-role]:hover{border-color:#b8a58b}.drop-on .photo-card{outline:2px dashed #a58458;outline-offset:3px}.drop-on .plate{outline-color:#a58458}
@media(max-width:600px){#studio-dialog{padding:20px 16px;border-radius:14px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.dialog-top h2{font-size:30px}.studio-tabs{gap:0}.studio-tabs button{font-size:13px;padding:10px 5px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}.collection-meta{align-items:flex-start;flex-direction:column;gap:10px}.url-submit{flex-direction:column;align-items:stretch}.import-actions{gap:6px}.import-actions .studio-button{font-size:13px;padding:10px}.mat-options{gap:8px}.mat-options button{font-size:13px}.export-section select{width:100%;margin-top:8px}}
/* Keep the mat even; a wide viewport should not stretch the picture's frame. */
body.mode-toy:not(.gallery) .toy-stage{background:transparent;box-shadow:none}
body.mode-toy:not(.gallery) .plate{box-shadow:0 0 0 18px #f8f6ef,0 12px 38px #3c302122}
@media(min-width:761px) and (max-height:850px){.photo-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:10px}.photo-preview{height:76px}.photo-info{margin:0;align-self:center;gap:7px}.photo-info h2{font-size:25px}.photo-info p{font-size:13px}.photo-actions{grid-column:1/-1}.photo-actions .pill{min-height:40px}.photo-preview>span{font-size:0;padding:4px 7px;bottom:5px;right:5px}.photo-preview>span::after{content:'↗';font-size:14px}.journey-line{margin:0 0 0 16px}.studio-rail{gap:10px}}
@media(max-width:760px){body.mode-toy:not(.gallery) .plate{box-shadow:0 0 0 12px #f8f6ef,0 8px 24px #3c30211a}}
.studio-message{margin:0 0 18px;padding:10px 12px;border-radius:8px;background:#e9eee5}.studio-message.error{background:#f7e6df}