@font-face { font-family:Montserrat;src:url('/gallery-assets/montserrat.ttf') format('truetype');font-weight:400;font-display:swap; }
@font-face { font-family:Montserrat;src:url('/gallery-assets/montserrat-medium.ttf') format('truetype');font-weight:500;font-display:swap; }
@font-face { font-family:Montserrat;src:url('/gallery-assets/montserrat-semibold.ttf') format('truetype');font-weight:600;font-display:swap; }

/* Values from the iPad HID's controller/style.css and controller/studio.css. */
:root {
  --studio-font:Montserrat,sans-serif;
  --studio-text:#141619;
  --studio-muted:#42484e;
  --studio-border:#ffffff90;
  --studio-panel:#e7e9ec55;
  --studio-photo:#aab0b640;
  --studio-background:radial-gradient(ellipse at 44% 19%,#f1f2f3aa,transparent 54%),linear-gradient(118deg,#bfc4ca,#e2e5e8 38%,#c5cbd2 76%,#dce1e6);
  --studio-metal:linear-gradient(170deg,#f9fafb 1%,#ced2d6 32%,#a8aeb5 57%,#dce0e3 82%,#f4f6f8);
  --studio-primary:linear-gradient(#383d40,#050608 70%,#262b2e);
  --studio-rim:inset 0 2px 3px #fff,inset 0 -3px 4px #63686e,0 0 0 3px #e9ecee,0 0 0 4px #8e9398,0 3px 9px 5px #6a717540;
  --studio-radius-panel:22px;
  --studio-radius-photo:12px;
  --studio-radius-button:100px;
  font-family:var(--studio-font);color:var(--studio-text);background:#c5cbd2;color-scheme:light;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0;min-height:100dvh;background:var(--studio-background); }
main { max-width:960px;margin:auto;padding:38px 32px; }
.brand { display:flex;justify-content:center;padding-bottom:24px;border-bottom:1px solid var(--studio-border);box-shadow:0 1px 0 #9ba0a426; }
.brand img { width:160px;height:auto; }
h1 { margin:30px 0 14px;font-size:clamp(28px,5vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.02em; }
p,footer { color:var(--studio-muted);font-size:14px;line-height:1.6; }
#status { color:var(--studio-text);font-weight:600; }
#expiry { font-size:12px;font-variant-numeric:tabular-nums; }
#save-help { padding:16px 18px;margin:20px 0 24px;border:1px solid var(--studio-border);border-radius:var(--studio-radius-photo);background:var(--studio-panel);box-shadow:inset 0 1px 2px #fff8; }
.gallery-actions { display:flex;flex-wrap:wrap;gap:18px;margin:24px 4px; }
button { min-height:52px;padding:14px 22px;border:1px solid #73787d;border-radius:var(--studio-radius-button);background:var(--studio-metal);box-shadow:var(--studio-rim);color:#101214;font:600 14px/1.4 var(--studio-font);text-shadow:0 1px 1px #ffffff90;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent; }
#save-all,button.primary { color:#fff;background:var(--studio-primary);text-shadow:0 1px 2px #000; }
button:hover:not(:disabled) { filter:brightness(1.04); }
button:active:not(:disabled) { transform:translateY(1px); }
button:focus-visible { outline:3px solid #42484e;outline-offset:7px; }
button:disabled { opacity:.65;cursor:wait;color:#656a70;background:linear-gradient(#e3e6e9,#c3c7cb);text-shadow:none; }
#photos { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin:32px 0; }
article { min-width:0;padding:16px;border:1px solid var(--studio-border);border-radius:var(--studio-radius-panel);background:var(--studio-panel);box-shadow:inset 0 1px 2px #fff8;display:flex;flex-direction:column;gap:18px; }
article img { width:100%;aspect-ratio:9/16;object-fit:contain;display:block;border-radius:var(--studio-radius-photo);background:var(--studio-photo); }
article button { width:calc(100% - 8px);margin:0 4px; }
article button:last-child { margin-bottom:4px; }
footer { border-top:1px solid var(--studio-border);padding-top:20px;font-size:11px; }
@media(max-width:580px) { main { padding:24px 18px; }.brand { padding-bottom:20px; }.brand img { width:125px; }#photos { grid-template-columns:1fr;gap:20px; }.gallery-actions { flex-direction:column; }.gallery-actions button { width:100%; } }