:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: #343533;
  background: #eeede9;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --ink: #292c2b;
  --muted: #767874;
  --paper: #faf9f5;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; min-height: 520px; overflow: hidden; }
button, input, select { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; color: inherit; background: none; }
button, select { transition: background-color 160ms, color 160ms, box-shadow 180ms, scale 150ms; }
button:active:not(:disabled) { scale: .96; }
button:disabled { cursor: wait; opacity: .5; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #777c72; outline-offset: 4px; }
.header { position: absolute; top: 30px; left: 3.4%; right: 3.4%; display: flex; justify-content: space-between; align-items: flex-start; z-index: 50; pointer-events: none; }
.header > * { pointer-events: auto; }
h1 { font: 40px/.95 Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -1.6px; margin: 0 0 10px; }
.identity p { font-size: 13px; color: var(--muted); margin: 0; letter-spacing: .005em; }
.primary, .secondary { padding: 0 22px; height: 44px; border-radius: 7px; white-space: nowrap; }
.primary { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 #ffffff0c, 0 1px 2px #23251b15; }
.primary:hover { background: #424642; }
.secondary { box-shadow: inset 0 0 0 1px #373a322c; background: #ffffff1a; }
.secondary:hover { background: #ffffff6a; box-shadow: inset 0 0 0 1px #373a3240; }
.upload { display: flex; gap: 12px; align-items: center; }
.plus { font-size: 24px; font-weight: 300; line-height: 1; margin-top: -2px; }
#table { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #f6f5f1 0%, #eeede9 74%); overflow: hidden; }
#table::after { content: ''; position: absolute; inset: 0; background-image: var(--noise); opacity: .22; pointer-events: none; }
#stage { position: absolute; top: 115px; bottom: 155px; left: 0; right: 0; isolation: isolate; }
.print { position: absolute; top: 0; left: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; transform-origin: center; }
.print-paper { position: absolute; inset: 0; background-color: var(--paper); background-image: var(--noise), linear-gradient(137deg, #fff8, #dad7cb0a 55%, #bbb7a910); box-shadow: 0 1px 1px #35312423, 0 4px 5px -2px #3935262a, 0 10px 18px -8px #37332635; transition: box-shadow 250ms; border: 1px solid #fff9; }
.print:hover .print-paper { box-shadow: 0 1px 2px #35312420, 0 5px 8px -3px #3935262a, 0 16px 25px -9px #37332638; }
.print.dragging { cursor: grabbing; }
.print.dragging .print-paper { box-shadow: 0 2px 3px #35312412, 0 15px 26px -8px #3935262c, 0 36px 48px -20px #37332645; }
.print:focus-visible .print-paper { outline: 1px solid #6f776e; outline-offset: 5px; }
.print canvas { position: absolute; pointer-events: none; outline: 1px solid #0000000c; }
.print-caption { position: absolute; bottom: 10px; left: 13px; right: 10px; display: flex; align-items: center; justify-content: space-between; height: 20px; color: #a3a098; font-size: 9px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pin { font-size: 9px; letter-spacing: .02em; color: #6a6d64; opacity: 0; height: 34px; min-width: 78px; margin-bottom: 2px; padding: 0 3px; }
.print:hover .pin, .print:focus-within .pin, .print.pinned .pin { opacity: 1; }
.print.pinned .pin { color: #5a6155; }
.print.pinned .pin::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #777d6c; margin: 0 6px 1px 0; }
.controls { position: absolute; bottom: 77px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 13px 16px; background: #f9f9f7f5; border-radius: 13px; box-shadow: 0 1px 2px #252b2010, 0 8px 24px #33372b0c; border: 1px solid #fff9; z-index: 100; }
.controls .primary { min-width: 143px; }
.select-wrap { position: relative; }
select { border: 1px solid #373a3228; background: transparent; color: inherit; appearance: none; border-radius: 7px; height: 44px; padding: 0 36px 0 18px; cursor: pointer; }
.select-wrap::after { content: ''; position: absolute; right: 15px; top: 18px; width: 6px; height: 6px; border-right: 1px solid #63675e; border-bottom: 1px solid #63675e; rotate: 45deg; pointer-events: none; }
.divider { width: 1px; height: 23px; background: #33392e13; }
.patina { display: flex; align-items: center; gap: 13px; font-size: 12px; color: #676b63; }
.patina output { display: none; font-variant-numeric: tabular-nums; }
input[type=range] { --fill: 55%; width: 142px; height: 28px; margin: 0; appearance: none; background: transparent; cursor: pointer; touch-action: pan-y; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, #555c52 var(--fill), #d4d7d0 var(--fill)); border-radius: 2px; }
input[type=range]::-moz-range-track { height: 2px; background: #d4d7d0; }
input[type=range]::-moz-range-progress { height: 2px; background: #555c52; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; margin-top: -5px; background: #4e554b; box-shadow: 0 1px 2px #0002; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #4e554b; border: 0; }
footer { position: absolute; left: 3.4%; right: 3.4%; bottom: 28px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #85877f; pointer-events: none; z-index: 50; }
footer p { margin: 0; }
#edition { font-variant-numeric: tabular-nums; font-size: 10px; letter-spacing: .04em; }
.mobile-help { display: none; }
.toast { position: absolute; bottom: 166px; left: 50%; translate: -50% 8px; max-width: calc(100% - 40px); width: max-content; padding: 12px 18px; border-radius: 8px; background: #353b32ed; color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 180ms, translate 220ms; z-index: 150; }
.toast.visible { opacity: 1; translate: -50% 0; }
.loading { position: absolute; top: 48%; width: 100%; text-align: center; color: #8a8c85; letter-spacing: .02em; font-size: 13px; transition: opacity 250ms; }
.loading.hidden { opacity: 0; pointer-events: none; }
.drop-target { display: none; position: absolute; inset: 18px; z-index: 200; background: #eeede9ee; border: 1px dashed #8f9589; border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; gap: 16px; pointer-events: none; }
.drop-target span { font: 28px Georgia, serif; }
.drop-target small { color: #7e8378; }
.dropping .drop-target { display: flex; }
dialog { border: 0; padding: 0; border-radius: 14px; background: #f5f4ef; color: inherit; box-shadow: 0 24px 100px #1b201c38; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
dialog::backdrop { background: #24282148; backdrop-filter: blur(9px); }
.crop-panel { padding: 25px; }
.crop-heading { display: flex; align-items: center; justify-content: space-between; }
h2 { margin: 0; font: 24px Georgia, serif; letter-spacing: -.5px; }
.crop-panel p { font-size: 12px; color: #7c8076; margin: 10px 0 22px; }
.text-button { min-height: 40px; color: #6c7265; padding: 0 4px; font-size: 12px; }
.text-button:hover { color: #252a22; }
.crop-preview { position: relative; margin: 0 auto; width: min(100%, 310px); cursor: move; touch-action: none; outline: 1px solid #313c2920; overflow: hidden; }
.crop-preview canvas { display: block; width: 100%; height: 100%; }
.crop-preview::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 160ms; background: linear-gradient(90deg, transparent 33.1%, #fff6 33.3%, transparent 33.5%, transparent 66.4%, #fff6 66.6%, transparent 66.8%), linear-gradient(transparent 33.1%, #fff6 33.3%, transparent 33.5%, transparent 66.4%, #fff6 66.6%, transparent 66.8%); }
.crop-preview:active::after, .crop-preview:focus-visible::after { opacity: 1; }
.zoom-label { display: flex; align-items: center; gap: 18px; margin: 20px 0 14px; font-size: 12px; color: #71776b; }
.zoom-label input { flex: 1; min-width: 80px; }
.zoom-label output { min-width: 32px; font-variant-numeric: tabular-nums; text-align: right; }
.crop-actions { display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 800px) {
  .header { top: 24px; left: 24px; right: 24px; }
  .identity p { font-size: 11px; max-width: 190px; line-height: 1.5; }
  .controls { gap: 12px; padding: 11px; }
  .divider { display: none; }
  input[type=range] { width: 105px; }
  .controls .primary { min-width: 124px; }
  .controls { gap: 8px; }
  .controls button { padding: 0 13px; font-size: 12px; }
  .controls input[type=range] { width: 80px; }
  .primary, .secondary { padding: 0 16px; }
  footer { left: 24px; right: 24px; }
}
@media (max-width: 800px) {
  body { min-height: 580px; }
  .header { top: 23px; left: 21px; right: 21px; align-items: flex-start; }
  h1 { font-size: 34px; margin-bottom: 7px; }
  .identity p { width: 160px; line-height: 1.5; font-size: 10px; }
  .upload { font-size: 11px; height: 40px; padding: 0 12px; gap: 7px; }
  .upload .plus { font-size: 20px; }
  #stage { top: 128px; bottom: 232px; }
  .controls { bottom: 54px; width: calc(100% - 32px); max-width: 390px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 9px; row-gap: 9px; padding: 12px; }
  .controls .primary { min-width: 0; padding: 0 11px; font-size: 12px; }
  .controls select { width: 100%; padding-left: 12px; font-size: 12px; }
  #recut { grid-column: 2; grid-row: 1; font-size: 12px; padding: 0 10px; }
  .controls .select-wrap { grid-column: 1; grid-row: 2; }
  .controls .save { grid-column: 2; grid-row: 2; padding: 0 9px; font-size: 12px; }
  .patina { grid-column: 1 / -1; grid-row: 3; gap: 16px; padding: 0 4px; }
  .patina input { flex: 1; }
  .patina output { display: block; font-size: 10px; min-width: 19px; }
  footer { bottom: 22px; left: 21px; right: 21px; font-size: 9px; }
  .desktop-help, #edition { display: none; }
  .mobile-help { display: block; }
  .print-caption { bottom: 7px; left: 8px; right: 5px; font-size: 7px; }
  .pin { min-width: 63px; font-size: 8px; }
  .toast { bottom: 230px; font-size: 11px; }
  .crop-panel { padding: 19px; }
  .crop-preview { max-height: 48dvh; width: auto; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Editing marks belong only to the active print. */
.transform-handle { position: absolute; z-index: 3; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: #565c50; background: #fbfaf6; border: 1px solid #6b72604a; box-shadow: 0 2px 7px #222a1b19; opacity: 0; visibility: hidden; pointer-events: none; font-size: 20px; touch-action: none; transition: opacity 160ms, background-color 160ms; }
.resize-handle { right: -17px; bottom: -17px; cursor: nwse-resize; }
.rotate-handle { left: calc(50% - 18px); top: -44px; cursor: grab; }
.rotate-handle::after { content: ''; position: absolute; height: 9px; width: 1px; background: #6b726080; top: 35px; left: 17px; }
.print.selected:not(.pinned) .transform-handle, .print:focus-within:not(.pinned) .transform-handle { opacity: 1; visibility: visible; pointer-events: auto; }
.print.selected:not(.pinned) .print-paper { outline: 1px solid #6b72605c; outline-offset: 4px; }
.print.transforming .transform-handle { cursor: grabbing; }
.print.selected .pin { opacity: 1; }

/* A shallow editing dock reserves its own space below the photograph table. */
#stage { bottom: calc(var(--dock-height, 175px) + 74px); }
.editing-dock { position: absolute; z-index: 100; bottom: 54px; left: 50%; translate: -50% 0; width: min(740px, calc(100% - 40px)); max-height: calc(100dvh - 220px); overflow: auto; padding: 0 16px; border: 1px solid #fff9; border-radius: 13px; background: #f9f8f4fa; box-shadow: 0 2px 4px #252b2008, 0 10px 30px #33372b0b; }
.film-rail { padding: 13px 0 12px; }
.film-rail-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; min-height: 14px; }
#film-current { font: 15px Georgia, serif; color: #494d43; }
#film-preview-status { font-size: 10px; color: #93968a; }
.film-rail-body { display: flex; gap: 15px; align-items: stretch; }
.film-stocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1; min-width: 0; }
.film-stock { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 4px; border: 1px solid transparent; border-radius: 5px; text-align: left; transition: border-color 160ms, background-color 160ms; }
.film-stock canvas { display: block; width: 48px; height: 42px; object-fit: cover; border-radius: 2px; }
.film-stock span { font-size: 10px; line-height: 1.35; }
.film-stock[aria-pressed=true] { border-color: #929786; background: #eeeee5; }
.film-stock:hover, .film-stock.previewing { background: #ecece3; }
.film-stock.previewing:not([aria-pressed=true]) { border: 1px dashed #929786; }
.film-adjust { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 66px; flex-shrink: 0; border-left: 1px solid #4a50221a; color: #787f6e; font-size: 9px; padding: 0 0 0 10px; }
.film-adjust[aria-expanded=true] { color: #343c2d; }
.editing-dock .controls { position: static; transform: none; display: flex; width: auto; max-width: none; gap: 9px; padding: 11px 0; border: 0; border-top: 1px solid #4a502216; border-radius: 0; box-shadow: none; background: none; }
.editing-dock .controls .primary, .editing-dock .controls .secondary { height: 39px; min-width: 0; flex: 1; padding: 0 15px; font-size: 12px; }
.editing-dock .controls select { height: 39px; font-size: 12px; }
.editing-dock .select-wrap::after { top: 15px; }
.film-panel { display: grid; grid-template-columns: 210px 1fr; column-gap: 35px; padding: 7px 0 10px; border-top: 1px solid #4a502216; }
.film-panel[hidden] { display: none; }
.mood-control { grid-row: 1 / 3; }
.mood-label { display: flex; align-items: center; justify-content: space-between; height: 23px; font-size: 10px; color: #707767; }
.mood-label .text-button { min-height: 23px; font-size: 9px; color: #95998d; }
.mood-field { position: relative; padding: 12px 0; margin: 0 5px; }
.mood-pad { position: relative; height: 56px; border-radius: 4px; touch-action: none; cursor: crosshair; outline: 1px solid #3b402510; background: linear-gradient(to bottom, #f5f0e6d9, transparent 80%), linear-gradient(100deg, #889996, #c6bdab 48%, #c69c70); }
.mood-pad:focus-visible { outline: 2px solid #777c72; outline-offset: 3px; }
.mood-top, .mood-bottom { position: absolute; left: 0; right: 0; text-align: center; font-size: 8px; color: #929688; }
.mood-top { top: 0; }.mood-bottom { bottom: 0; }
.mood-cool, .mood-warm { position: absolute; top: calc(50% - 5px); font-size: 8px; color: #4d554d9e; pointer-events: none; }
.mood-cool { left: 10px; }.mood-warm { right: 10px; }
.mood-cross { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; translate: -50% -50%; opacity: .3; background: linear-gradient(transparent 4px, #fff 4px, #fff 5px, transparent 5px), linear-gradient(90deg, transparent 4px, #fff 4px, #fff 5px, transparent 5px); }
.mood-point { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px #343b3340; background: #ffffff20; pointer-events: none; }
.film-sliders { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 7px; padding-top: 12px; }
.film-panel .patina { display: flex; grid-area: auto; min-width: 0; padding: 0; gap: 14px; font-size: 11px; }
.film-panel .patina > span { width: 48px; }
.film-panel .patina input { flex: 1 1 0; min-width: 0; width: 0; }
.film-panel .patina output { display: block; width: 22px; text-align: right; font-size: 10px; }
.film-note { margin: 0; align-self: end; padding-bottom: 5px; color: #989c90; font-size: 9px; }
.toast { bottom: calc(var(--dock-height, 175px) + 68px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 800px) {
  #stage { bottom: calc(var(--dock-height, 188px) + 60px); }
  .editing-dock { bottom: 46px; width: calc(100% - 28px); max-width: 540px; padding: 0 10px; }
  .film-rail { padding: 10px 0; }
  .film-rail-heading { margin-bottom: 6px; }
  #film-current { font-size: 13px; }
  #film-preview-status { display: none; }
  .film-rail-heading::after { content: 'Нажмите на плёнку'; font-size: 9px; color: #93968a; }
  .film-rail-body { gap: 6px; }
  .film-stocks { gap: 3px; }
  .film-stock { display: block; padding: 3px; text-align: center; }
  .film-stock canvas { width: 100%; height: 33px; }
  .film-stock span { display: block; font-size: 8px; margin-top: 5px; white-space: nowrap; letter-spacing: -.2px; }
  .film-adjust { width: 46px; padding-left: 6px; font-size: 8px; }
  .editing-dock .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 0; }
  .editing-dock .controls .primary, .editing-dock .controls .secondary, .editing-dock .controls select { height: 34px; padding: 0 10px; font-size: 11px; }
  .editing-dock .controls .select-wrap { grid-column: 1; grid-row: 2; }
  .editing-dock .controls .save { grid-column: 2; grid-row: 2; box-shadow: inset 0 0 0 1px #373a322c; }
  .editing-dock .select-wrap::after { top: 13px; }
  .film-panel { grid-template-columns: minmax(115px, .85fr) minmax(0, 1fr); column-gap: 17px; padding: 5px 0 8px; }
  .film-sliders { gap: 9px; padding-top: 10px; }
  .film-panel .patina { gap: 6px; font-size: 10px; }
  .film-panel .patina > span { width: 40px; }
  .film-panel .patina output { width: 18px; font-size: 9px; }
  .film-note { display: none; }
  .mood-control { grid-row: auto; }
  .mood-pad { height: 50px; }
  .mood-label { font-size: 9px; }
  footer { bottom: 20px; }
  .toast { bottom: calc(var(--dock-height, 188px) + 60px); }
}

/* Both tool modes occupy the same two rows, leaving the photo geometry untouched. */
:root { --dock-height: 112px; --dock-bottom: 40px; }
#stage { bottom: calc(var(--dock-height) + var(--dock-bottom) + 24px); }
.editing-dock { height: var(--dock-height); bottom: var(--dock-bottom); padding: 7px 12px; overflow: visible; max-height: none; }
.film-rail { height: 46px; padding: 0 0 6px; }
.film-rail-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.film-rail-heading::after { display: none; }
.film-rail-body { height: 40px; gap: 10px; }
.film-stock { padding: 3px; gap: 8px; }
.film-stock canvas { width: 40px; height: 32px; }
.film-adjust { flex-direction: row; gap: 5px; width: 85px; padding-left: 9px; font-size: 9px; }
.editing-dock .controls { height: 50px; padding: 8px 0 0; }
.editing-dock .controls[hidden] { display: none; }
.editing-dock .controls .primary, .editing-dock .controls .secondary, .editing-dock .controls select { height: 34px; }
.editing-dock .select-wrap::after { top: 13px; }
.film-panel { height: 50px; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 20px; padding: 7px 0 0; animation: tools-in 150ms ease-out; }
.mood-control { grid-row: auto; display: flex; align-items: center; gap: 3px; min-width: 0; }
.mood-label { order: 2; width: 25px; height: 32px; flex-shrink: 0; }
.mood-label > span { display: none; }
.mood-label .text-button { width: 25px; height: 32px; font-size: 19px; line-height: 1; }
.mood-field { flex: 1; min-width: 0; padding: 0; margin: 0 3px; }
.mood-pad { height: 34px; }
.mood-top, .mood-bottom { z-index: 1; font-size: 7px; pointer-events: none; color: #56604b9e; }
.mood-top { top: 2px; }.mood-bottom { bottom: 2px; }
.mood-point { width: 14px; height: 14px; }
.film-sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0; }
.film-panel .patina { gap: 7px; font-size: 10px; }
.film-panel .patina > span { width: 42px; flex-shrink: 0; }
.film-panel .patina output { width: 20px; flex-shrink: 0; font-size: 9px; }
.film-note { display: none; }
.toast { bottom: calc(var(--dock-height) + var(--dock-bottom) + 12px); }
footer { bottom: 17px; }
@keyframes tools-in { from { opacity: 0; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 800px) {
  :root { --dock-height: 158px; }
  .editing-dock { padding: 7px 10px; }
  .film-rail { height: 62px; padding-bottom: 6px; }
  .film-rail-body { height: 55px; gap: 6px; }
  .film-stocks { gap: 3px; }
  .film-stock { padding: 3px; }
  .film-stock canvas { width: 100%; height: 30px; }
  .film-stock span { margin-top: 3px; }
  .film-adjust { flex-direction: column; width: 46px; padding-left: 5px; gap: 4px; font-size: 8px; }
  .editing-dock .controls { height: 80px; padding: 6px 0 0; row-gap: 5px; }
  .editing-dock .controls .primary, .editing-dock .controls .secondary, .editing-dock .controls select { height: 32px; }
  .film-panel { height: 80px; grid-template-columns: minmax(115px, .85fr) minmax(0, 1fr); gap: 10px; padding: 6px 0 0; }
  .mood-pad { height: 60px; }
  .mood-top { top: 3px; }.mood-bottom { bottom: 3px; }
  .mood-label { width: 22px; }.mood-label .text-button { width: 22px; }
  .film-sliders { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .film-panel .patina { gap: 6px; }
  .film-panel .patina > span { width: 40px; }
  .film-panel .patina output { width: 18px; }
  .mood-point { width: 17px; height: 17px; }
}
/* A quiet full-width toolbar frames the table without covering the prints. */
:root { --header-height: 68px; }
.header { inset: 0 0 auto; height: var(--header-height); padding: 0 26px; display: flex; gap: 28px; align-items: center; pointer-events: auto; background: #f5f4ef; border-bottom: 1px solid #4a49391a; }
.identity { display: flex; align-items: center; gap: 17px; flex-shrink: 0; }
.identity h1 { font-size: 32px; margin: 0; letter-spacing: -1.3px; }
.identity p { width: auto; max-width: none; font-size: 10px; line-height: 1.5; }
.header .upload { height: 32px; padding: 0 12px; gap: 8px; border-radius: 5px; font-size: 11px; flex-shrink: 0; }
.header .plus { font-size: 19px; }
#table { top: 0; }
#stage { top: calc(var(--header-height) + 60px); }
.surfaces { position: absolute; inset: 0; pointer-events: none; overflow: hidden; isolation: isolate; }
.surface-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms cubic-bezier(.22,.61,.36,1); }
.surface-image.active { opacity: 1; }
.glass-reflections { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 600ms; clip-path: var(--glass-clip); }
.glass-reflection { position: absolute; left: 0; top: 0; transform-origin: center; opacity: var(--reflection-opacity, var(--glass-reflection-opacity)); filter: blur(var(--reflection-blur, var(--glass-reflection-blur))) var(--glass-reflection-color); }
.glass-reflection canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body[data-surface=hotel] .glass-reflections { opacity: 1; }
body:not([data-surface=original]) #table::after { opacity: 0; }
.surface-picker { position: static; transform: none; display: flex; align-items: center; gap: 3px; margin-left: auto; padding: 4px; border-radius: 8px; background: #e9e8e04d; }
.surface-choice { display: flex; align-items: center; gap: 6px; padding: 5px 8px; min-height: 30px; border-radius: 5px; font-size: 10px; white-space: nowrap; color: #69695f; }
.surface-choice:hover { background: #ffffff80; color: #242920; }
.surface-choice[aria-pressed=true] { background: #fffdf7; box-shadow: 0 1px 4px #27261c0f, inset 0 0 0 1px #777c6230; color: #292c23; }
.surface-swatch { flex: 0 0 20px; height: 20px; border-radius: 50%; background: #eeede6 center / cover; box-shadow: inset 0 0 0 1px #00000015; }
.surface-choice[aria-pressed=true] .surface-swatch { outline: 1px solid currentColor; outline-offset: 2px; }
.print-paper { box-shadow: var(--surface-shadow); transition: background-color 600ms, box-shadow 400ms; background-image: var(--noise); border: 0; }
.print:hover .print-paper { box-shadow: var(--surface-shadow); }
.print.dragging .print-paper { box-shadow: 0 3px 6px #160e0730, 4px 25px 35px -8px #160e0770; }
.print-light, .print-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 600ms; }
.print-light { mix-blend-mode: multiply; }
.surface-light-field { position: absolute; left: 0; top: 0; width: var(--light-width); height: var(--light-height); transform-origin: 0 0; transform: var(--light-transform); background-size: 100% 100%; background-repeat: no-repeat; }
.light-hotel .surface-light-field, .sheen-hotel .surface-light-field { width: var(--hotel-light-width); height: var(--hotel-light-height); transform: var(--hotel-light-transform); }
.paper-finish { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-size: 100% 100%; box-shadow: inset .6px .6px .3px #fffdf449, inset -.6px -.6px .3px #54452f20; opacity: var(--paper-finish-opacity, 1); transition: opacity 600ms; }
.print { isolation: isolate; }
#stage:focus { outline: none; }
body[data-surface=hotel] .light-hotel, body[data-surface=white] .light-white,
body[data-surface=board] .light-board, body[data-surface=cozy] .light-cozy,
body[data-surface=hotel] .sheen-hotel { opacity: 1; }
.board-tack { position: absolute; top: calc(var(--paper-pad) / 2 - var(--tack-size) * 1.5); left: calc(var(--tack-x) - var(--tack-size) * 1.5); width: calc(var(--tack-size) * 3); height: calc(var(--tack-size) * 3); z-index: 2; pointer-events: none; background-size: 100% 100%; transform: rotate(var(--tack-light-angle, 0deg)); opacity: 0; transition: opacity 400ms; }
.board-lift { position: absolute; left: 4%; width: 94%; height: 4.6px; bottom: -2px; border-radius: 50%; background: #10170b30; filter: blur(2.2px); z-index: -1; pointer-events: none; opacity: 0; transition: opacity 400ms; }
body[data-surface=board] .board-tack, body[data-surface=board] .board-lift { opacity: 1; }
.print.dragging .board-lift { opacity: 0; }
.dark-surface footer { color: #f4ebd9; text-shadow: 0 1px 8px #170e07b3; }
.dark-surface .print.selected:not(.pinned) .print-paper { outline-color: #fff5d3a0; }
@media (max-width: 1100px) {
  :root { --header-height: 110px; }
  .header { padding: 0 22px 49px; gap: 16px; }
  .surface-picker { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); margin: 0; }
  #stage { top: calc(var(--header-height) + 24px); }
}
@media (max-width: 800px) {
  :root { --header-height: 112px; }
  .header { padding: 0 17px 56px; }
  .identity { gap: 11px; min-width: 0; }
  .identity h1 { font-size: 29px; flex-shrink: 0; }
  .identity p { width: auto; max-width: 160px; font-size: 9px; line-height: 1.4; }
  .header .upload { height: 31px; padding: 0 10px; font-size: 10px; gap: 6px; }
  .surface-picker { top: 57px; gap: 2px; padding: 3px; max-width: calc(100% - 28px); width: 390px; }
  .surface-choice { flex: 1; min-width: 0; flex-direction: column; gap: 4px; padding: 4px 2px; font-size: 8px; }
  .surface-swatch { flex-basis: 18px; width: 18px; height: 18px; }
  #stage { top: calc(var(--header-height) + 28px); }
}
@media (max-width: 380px) {
  .header { padding-left: 12px; padding-right: 12px; gap: 10px; }
  .identity { gap: 9px; }
  .identity p { font-size: 8px; }
  .header .upload { padding: 0 8px; font-size: 9px; }
}
/* Paper is a separate material from the developed image. */
.print-paper { isolation: isolate; border-radius: .6px; }
.print-paper::before { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, #ffffff38, #ffffff00 40%, #88786209); box-shadow: inset .7px .7px #fffef1a6, inset -.7px -.7px #82745b30; opacity: var(--paper-relief-opacity, 1); transition: opacity 600ms; }
.photo-light { clip-path: var(--photo-window); }
body[data-surface=hotel] .print-paper .light-hotel,
body[data-surface=hotel] .print-paper .sheen-hotel,
body[data-surface=board] .print-paper .light-board,
body[data-surface=cozy] .print-paper .light-cozy { opacity: var(--paper-light-opacity); }
body[data-surface=hotel] .print-paper .sheen-hotel { opacity: var(--paper-sheen-opacity); }
.print-label { appearance: none; background: transparent; border: 0; border-radius: 2px; outline: none; padding: 0 24px 0 0; margin: 0; width: 100%; min-width: 0; height: 24px; color: #928d81; font: inherit; font-size: var(--caption-size, 9px); letter-spacing: .08em; text-overflow: ellipsis; cursor: text; user-select: text; -webkit-user-select: text; transition: background-color 140ms, box-shadow 140ms; }
.print-label:hover { box-shadow: 0 1px #766f5733; }
.print-label:focus-visible { outline: none; background: #fffdf480; box-shadow: 0 1px #766f5770; }
.print-caption .pin { position: absolute; right: -4px; bottom: -3px; width: 24px; min-width: 24px; height: 26px; margin: 0; font-size: 0; }
.print-caption .pin::before { content: ''; display: block; width: 6px; height: 6px; border: 1px solid #7e806f; border-radius: 50%; background: transparent; margin: auto; }
.print.pinned .print-caption .pin::before { background: #777d6c; box-shadow: 0 0 0 3px #777d6c18; }
.print-caption .pin::after { content: ''; position: absolute; inset: -7px; }

/* Equal paper margins; caption values survive this temporary visual direction. */
.print-caption[hidden] { display: none; }
.uniform-frame > .pin { position: absolute; left: -14px; top: -14px; z-index: 3; display: grid; place-items: center; width: 28px; min-width: 28px; height: 28px; margin: 0; padding: 0; border: 1px solid #6b72604a; border-radius: 50%; background: #fbfaf6; box-shadow: 0 2px 7px #222a1b19; font-size: 0; transition: opacity 160ms, background-color 160ms; }
.print.uniform-frame > .pin::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; margin: 0; background: transparent; }
.uniform-frame.pinned > .pin::before { background: currentColor; }
.uniform-frame > .pin::after { content: ''; position: absolute; inset: -7px; }
.uniform-frame > .pin:hover { background: #e9eadf; }
.uniform-frame > .pin:focus-visible { outline: 2px solid #66715d; outline-offset: 3px; }
/* One continuous, reversible gesture. The board itself never moves. */
.view-toggle { position: fixed; z-index: 115; left: 50%; bottom: 14px; translate: -50% 0; transform: translateY(calc(-1 * (var(--dock-height) + var(--dock-bottom) + 10px - 14px))); display: flex; align-items: center; justify-content: center; gap: 6px; width: 98px; height: 28px; padding: 0 12px; border-radius: 20px; background: #f8f7f0ed; color: #686b60; box-shadow: 0 1px 2px #161c1710, 0 3px 12px #181e1710, inset 0 1px #ffffffa3; font-size: 10px; transition: transform 620ms cubic-bezier(.22,.8,.18,1), width 420ms cubic-bezier(.22,.8,.18,1), gap 420ms, background-color 180ms, scale 150ms; }
.view-toggle::before { content: ''; position: absolute; inset: -7px -3px; }
.view-toggle:hover { background: #fffdf5; }
.view-toggle span { overflow: hidden; max-width: 70px; opacity: 1; transition: max-width 400ms, opacity 180ms; }
.view-toggle svg { flex-shrink: 0; transition: transform 460ms cubic-bezier(.22,.8,.18,1); }
.editing-dock { transform-origin: 50% 100%; transform: translateY(0) scale(1); opacity: 1; transition: transform 620ms cubic-bezier(.22,.8,.18,1), opacity 300ms 80ms, visibility 0s; }
.header { transition: transform 500ms cubic-bezier(.22,.8,.18,1), opacity 280ms; }
footer { transition: opacity 220ms, transform 400ms cubic-bezier(.22,.8,.18,1); }
.quiet-view .editing-dock { transform: translateY(calc(100% + var(--dock-bottom) + 24px)) scale(.92); opacity: 0; visibility: hidden; transition: transform 620ms cubic-bezier(.22,.8,.18,1), opacity 280ms 60ms, visibility 0s 620ms; pointer-events: none; }
.quiet-view .header { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.quiet-view footer { opacity: 0; transform: translateY(12px); }
.quiet-view .view-toggle { width: 44px; gap: 0; transform: translateY(0); background: #f8f7f0c9; }
.quiet-view .view-toggle span { max-width: 0; opacity: 0; }
.quiet-view .view-toggle svg { transform: rotate(180deg); }
.quiet-view .print-label { box-shadow: none; }
.quiet-view .toast { bottom: 58px; }
@media (prefers-reduced-motion: reduce) {
  .view-toggle, .view-toggle span, .view-toggle svg, .header, .editing-dock, footer { transition: none !important; }
}

/* Small, self-contained introductions and export choices. */
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.help-button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #77796b38; border-radius: 50%; color: #747669; font-size: 12px; }
.help-button:hover { background: #fffdf7; color: var(--ink); }
.welcome-dialog, .export-dialog { background: #fbfaf7; border: 1px solid #fff9; border-radius: 22px; box-shadow: 0 24px 100px #1b201c2b, 0 2px 12px #1b201c0c; }
.welcome-dialog[open], .export-dialog[open] { animation: dialog-in 300ms cubic-bezier(.2,.8,.2,1) both; }
.welcome-dialog::backdrop, .export-dialog::backdrop { background: #24282135; backdrop-filter: blur(12px); }
.dialog-close { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font: 23px/1 Arial, sans-serif; color: #86877d; }
.dialog-close:hover { background: #eeede6; color: #34382e; }
.dialog-eyebrow { font-size: 9px; letter-spacing: .13em; line-height: 1.6; color: #85867c; font-weight: 500; }
.welcome-dialog { width: min(462px, calc(100vw - 32px)); }
.welcome-top { display: flex; align-items: center; justify-content: space-between; padding: 23px 25px 0 29px; }
.welcome-brand { font: 27px/.95 Georgia, serif; letter-spacing: -1.2px; }
.welcome-art { position: relative; height: 210px; margin: 0 28px; isolation: isolate; }
.welcome-orbit { position: absolute; left: 50%; top: 48%; width: 236px; height: 150px; translate: -50% -50%; border: 1px solid #d7d8cd72; border-radius: 50%; rotate: -16deg; }
.welcome-orbit::after { content: ''; position: absolute; inset: 15px -18px; border: 1px solid #d7d8cd55; border-radius: 50%; rotate: 34deg; }
.welcome-print { position: absolute; left: calc(50% - 49px); top: 28px; width: 98px; height: 120px; padding: 6px; background: #fffefa; box-shadow: 0 2px 3px #3337270b, 0 10px 24px #33372716; transition: transform 650ms cubic-bezier(.22,.8,.18,1), filter 600ms; }
.welcome-print img { width: 100%; height: 100%; object-fit: cover; }
.print-one { transform: translate(-65px, 13px) rotate(-16deg); }
.print-one img { object-position: 28% 50%; }
.print-two { transform: translate(63px, 10px) rotate(13deg); }
.print-two img { object-position: 80% 50%; }
.print-three { transform: translate(0, -2px) rotate(-3deg); }
.print-three img { object-position: 55% 50%; }
.welcome-art[data-step="1"] .print-one { transform: translate(-81px, 12px) rotate(-12deg); filter: sepia(.55); }
.welcome-art[data-step="1"] .print-two { transform: translate(82px, 18px) rotate(17deg); filter: grayscale(1); }
.welcome-art[data-step="1"] .print-three { transform: translate(0, 0) rotate(2deg); filter: sepia(.3) saturate(.8); }
.welcome-art[data-step="2"] .print-one { transform: translate(-47px, 11px) rotate(-12deg); }
.welcome-art[data-step="2"] .print-two { transform: translate(42px, 10px) rotate(10deg); }
.welcome-art[data-step="2"] .print-three { transform: translate(0, 0) rotate(-2deg); }
.welcome-art-note { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 10px; color: #8a8a80; letter-spacing: .02em; }
.welcome-badge { position: absolute; left: calc(50% + 35px); top: 122px; padding: 10px 13px; background: #333d32; color: #fcfcf6; border-radius: 9px; font-size: 10px; letter-spacing: .06em; box-shadow: 0 4px 12px #33372718; opacity: 0; transform: translateY(8px) rotate(3deg); transition: opacity 300ms, transform 450ms; }
.welcome-badge span { margin-left: 15px; }
.welcome-art[data-step="2"] .welcome-badge { opacity: 1; transform: translateY(0) rotate(3deg); }
.welcome-copy { padding: 10px 36px 0; text-align: center; min-height: 181px; }
.welcome-copy .dialog-eyebrow { margin: 0 0 12px; font-size: 8px; }
#welcome-title { font: 500 29px/1.17 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: -1.15px; white-space: pre-line; }
#welcome-description { max-width: 350px; margin: 15px auto 0; font-size: 12px; line-height: 1.75; color: #7c7e73; }
.welcome-bottom { display: flex; align-items: center; justify-content: space-between; padding: 23px 32px 0; }
.welcome-progress { display: flex; align-items: center; gap: 3px; }
.welcome-progress button { display: grid; place-items: center; width: 22px; height: 32px; padding: 0; }
.welcome-progress button::after { content: ''; width: 5px; height: 5px; border-radius: 5px; background: #d7d8cf; transition: width 250ms, background 250ms; }
.welcome-progress button[aria-current]::after { width: 19px; background: #636e57; }
#welcome-next { display: flex; align-items: center; justify-content: center; gap: 28px; min-width: 137px; height: 42px; border-radius: 10px; font-size: 11px; }
.welcome-privacy { margin: 21px 15px 23px; text-align: center; font-size: 9px; color: #93958b; }
.export-dialog { width: min(440px, calc(100vw - 32px)); }
.export-panel { padding: 23px 28px 28px; }
.export-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
#export-title { font: 500 27px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.9px; }
#export-description { font-size: 12px; line-height: 1.6; margin: 10px 0 24px; color: #828479; }
.export-options { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.export-option { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px; min-height: 86px; border: 1px solid #e1e2d9; border-radius: 12px; cursor: pointer; transition: border-color 150ms, background 150ms; }
.export-option:hover { background: #f5f5ee; }
.export-option:has(input:checked) { border-color: #909982; background: #f1f3eb; }
.export-option:has(input:focus-visible) { outline: 2px solid #777c72; outline-offset: 3px; }
.export-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.export-option-copy { flex: 1; min-width: 0; }
.export-option strong { display: block; font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.export-option small { display: block; font-size: 10px; color: #83867a; line-height: 1.5; }
.option-check { width: 16px; height: 16px; border: 1px solid #ced0c5; border-radius: 50%; flex-shrink: 0; }
input:checked ~ .option-check { border: 5px solid #67745c; background: #fff; }
.export-thumbnail { width: 60px; height: 55px; flex-shrink: 0; border-radius: 5px; position: relative; overflow: hidden; background: #deddd0; }
.export-thumbnail.transparent { background-color: #fff; background-image: conic-gradient(#e8e9e3 25%, transparent 0 50%, #e8e9e3 0 75%, transparent 0); background-size: 12px 12px; }
.export-details { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 20px 0; color: #92968a; font-size: 10px; font-variant-numeric: tabular-nums; }
.export-details span { color: #b9bdb0; }
.export-download { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; border-radius: 9px; font-size: 12px; }
.export-error { color: #a34f3e; font-size: 11px; line-height: 1.6; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 800px) {
  .header-actions { gap: 9px; }
  .help-button { width: 27px; height: 27px; }
  .welcome-copy { padding-inline: 24px; min-height: 195px; }
  #welcome-title { font-size: 27px; }
  .welcome-art { height: 198px; margin-inline: 12px; }
  .welcome-bottom { padding: 17px 25px 0; }
  .export-panel { padding: 19px 20px 23px; }
  .export-option { gap: 11px; padding: 11px; }
  .export-thumbnail { width: 51px; }
}
@media (max-height: 650px) {
  .welcome-top { padding-top: 15px; }
  .welcome-art { height: 156px; }
  .welcome-print { top: 9px; width: 76px; height: 94px; left: calc(50% - 38px); }
  .welcome-orbit { width: 204px; height: 104px; top: 43%; }
  .welcome-badge { top: 90px; }
  .welcome-copy { min-height: 170px; }
  .welcome-bottom { padding-top: 12px; }
  .welcome-privacy { margin-block: 15px; }
}
@media (max-width: 600px) {
  .header .identity p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-dialog[open], .export-dialog[open] { animation: none; }
  .welcome-print, .welcome-badge, .welcome-progress button::after { transition: none; }
}

/* The preview is the actual export, including its exact framing and alpha. */
.language-toggle { min-width: 31px; height: 30px; padding: 0 5px; font-size: 10px; letter-spacing: .06em; color: #747669; border-radius: 5px; }
.language-toggle:hover { background: #e9e8e0; color: var(--ink); }
.export-dialog { width: min(548px, calc(100vw - 32px)); }
.export-preview { position: relative; display: grid; place-items: center; min-height: 130px; height: clamp(140px, 25vh, 230px); margin: 0 0 16px; background: #efeee8; border: 1px solid #e1e2d9; border-radius: 10px; overflow: hidden; }
.export-preview.transparent, .export-thumbnail.transparent { background-color: #fff; background-image: conic-gradient(#e8e9e3 25%, transparent 0 50%, #e8e9e3 0 75%, transparent 0); background-size: 14px 14px; }
.export-preview img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.export-preview img[hidden], .export-thumbnail img[hidden] { display: none; }
.export-preview figcaption { position: absolute; inset: 0; display: grid; place-items: center; color: #828479; font-size: 11px; }
.export-preview figcaption[hidden] { display: none; }
.export-retry { display: block; margin: 0 auto 10px; }
.export-retry[hidden] { display: none; }
.export-option { min-height: 73px; padding: 10px 13px; }
#export-description { margin-bottom: 17px; }
.export-details { margin-block: 16px; }
@media (max-width: 1250px) and (min-width: 1101px) {
  .header .identity p { display: none; }
}
@media (max-width: 800px) {
  .header-actions { gap: 7px; }
  .export-preview { height: 180px; }
  .export-option { padding: 9px; }
  .export-option small { font-size: 9px; }
  .export-details { gap: 7px; font-size: 9px; }
}
@media (max-height: 700px) {
  .export-preview { height: 135px; min-height: 100px; }
  .export-panel { padding-block: 16px; }
  .export-heading { margin-bottom: 9px; }
  .export-option { min-height: 62px; padding-block: 6px; }
  .export-details { margin-block: 12px; }
}

/* Touch-sized controls and room for the table on short screens. */
body { min-height: 0; }
button, select { touch-action: manipulation; }
.transform-handle { touch-action: none; }
.export-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.export-thumbnail img[hidden] { display: none; }
.card-actions { display: none; }
.film-stock span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
:root { --dock-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.view-toggle { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateY(calc(-1 * (var(--dock-height) + 36px))); }
footer { bottom: calc(17px + env(safe-area-inset-bottom, 0px)); }
dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
@media (max-width: 800px), (pointer: coarse) {
  .header .upload, .header .help-button, .header .language-toggle { height: 44px; }
  .header .help-button, .header .language-toggle { min-width: 44px; }
  .header-actions { gap: 4px; }
  .header { gap: 10px; padding-top: env(safe-area-inset-top, 0px); }
  :root { --header-height: calc(112px + env(safe-area-inset-top, 0px)); }
  .surface-picker { top: calc(57px + env(safe-area-inset-top, 0px)); }
  .surface-choice { min-height: 44px; }
  .editing-dock .controls .primary, .editing-dock .controls .secondary, .editing-dock .controls select { height: 44px; }
  .editing-dock .select-wrap::after { top: 18px; }
  .transform-handle { width: 44px; height: 44px; }
  .resize-handle { right: -21px; bottom: -21px; }
  .rotate-handle { left: calc(50% - 22px); top: -50px; }
  .rotate-handle::after { top: 43px; left: 21px; }
  .card-actions:not([hidden]) { display: flex; position: fixed; top: calc(var(--header-height) + 8px); left: 50%; translate: -50% 0; z-index: 110; max-width: calc(100% - 24px); padding: 0 5px; background: #f9f8f4f5; border: 1px solid #fff9; border-radius: 24px; box-shadow: 0 3px 16px #24271d12; }
  .card-actions button { min-width: 72px; height: 44px; padding: 0 14px; font-size: 11px; white-space: nowrap; border-radius: 20px; }
  .card-actions button:disabled { cursor: default; opacity: .35; }
  .card-actions button:not(:disabled):hover { background: #e9e8e0; }
  .quiet-view .card-actions { top: calc(12px + env(safe-area-inset-top, 0px)); }
  input[type=range] { touch-action: none; }
  input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -9px; }
  input[type=range]::-moz-range-thumb { width: 20px; height: 20px; }
  .dialog-close, .crop-heading .text-button, .crop-actions .text-button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 800px) {
  :root { --dock-height: 182px; }
  .editing-dock .controls, .film-panel { height: 104px; }
  .film-panel .patina input { height: 44px; }
  .film-sliders { gap: 0; }
  .mood-label, .mood-label .text-button { width: 32px; height: 44px; }
  .mood-pad { height: 76px; }
  .film-panel { grid-template-columns: minmax(105px, .85fr) minmax(0, 1fr); gap: 8px; }
  footer { left: 14px; right: 14px; }
}
/* Landscape phones use a side dock so the photos keep their working space. */
@media (max-height: 520px) and (min-width: 480px) {
  :root { --header-height: calc(56px + env(safe-area-inset-top, 0px)); --dock-height: 182px; --dock-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .header { padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); gap: 10px; align-items: center; }
  .identity p { display: none; }
  .identity h1 { font-size: 29px; }
  .surface-picker { position: static; transform: none; width: auto; max-width: none; margin-left: auto; padding: 2px; gap: 2px; }
  .surface-choice { flex-direction: column; font-size: 8px; gap: 3px; padding: 3px; }
  .surface-swatch { width: 18px; height: 18px; flex-basis: 18px; }
  .header-actions { margin-left: 0; }
  .header .upload { font-size: 10px; padding-inline: 8px; }
  .editing-dock { width: 264px; max-width: none; left: auto; right: max(12px, env(safe-area-inset-right, 0px)); translate: none; padding: 7px 10px; }
  #stage { top: calc(var(--header-height) + 24px); right: calc(288px + env(safe-area-inset-right, 0px)); left: env(safe-area-inset-left, 0px); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .film-rail { height: 62px; padding-bottom: 6px; }
  .film-rail-body { height: 55px; gap: 6px; }
  .film-stocks { gap: 3px; }
  .film-stock { display: block; padding: 3px; text-align: center; }
  .film-stock canvas { width: 100%; height: 30px; }
  .film-stock span { display: block; font-size: 8px; white-space: nowrap; margin-top: 3px; letter-spacing: -.2px; }
  .film-adjust { flex-direction: column; width: 44px; font-size: 8px; padding-left: 4px; gap: 4px; }
  .editing-dock .controls { display: grid; grid-template-columns: 1fr 1fr; height: 104px; gap: 5px; padding-top: 6px; }
  .editing-dock .controls .primary { min-width: 0; }
  .editing-dock .controls button, .editing-dock .controls select { width: 100%; font-size: 10px; padding-inline: 8px; height: 44px; }
  .editing-dock .controls .select-wrap { grid-column: 1; grid-row: 2; }
  .editing-dock .controls .save { grid-column: 2; grid-row: 2; }
  .film-panel { height: 104px; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
  .mood-label, .mood-label .text-button { width: 28px; height: 44px; }
  .mood-pad { height: 76px; }
  .film-sliders { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .film-panel .patina { gap: 4px; }
  .film-panel .patina > span { width: 35px; font-size: 9px; }
  .film-panel .patina input { height: 44px; }
  .film-panel .patina output { width: 18px; font-size: 8px; }
  .view-toggle { left: auto; right: calc(95px + max(12px, env(safe-area-inset-right, 0px))); translate: none; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .quiet-view .view-toggle { right: calc(122px + max(12px, env(safe-area-inset-right, 0px))); }
  .card-actions:not([hidden]) { left: max(12px, env(safe-area-inset-left, 0px)); top: calc(var(--header-height) + 4px); translate: none; }
  .quiet-view .card-actions { top: calc(8px + env(safe-area-inset-top, 0px)); }
  footer { display: none; }
  .toast { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 320px); left: calc((100% - 288px) / 2); }
}
@media (max-height: 520px) and (min-width: 480px) and (max-width: 620px) {
  .surface-choice { font-size: 0; gap: 0; padding-inline: 5px; }
  .header .upload { font-size: 9px; }
}