/* Loopyti: a quiet, image-first workbench. Public pages only; the admin keeps its own layout. */
:root {
  --paper: #ffffff;
  --ink: #1d1d1f;
  --muted: #626269;
  --line: #e5e5e9;
  --surface: #ffffff;
  --accent: #0071e3;
  --rust: #0066cc;
  --focus: #0066cc;
  --type-body: 14px;
  --type-label: 13px;
  --type-caption: 12px;
  --type-section: 16px;
  --type-lead: 17px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
}
html { background: var(--paper); color: var(--ink); }
.studio { background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-size: var(--type-body); line-height: 1.6; letter-spacing: -.01em; }
.studio button, .studio input, .studio select { font: inherit; }
.studio strong { font-weight: 500; }
.studio p { word-break: keep-all; text-wrap: pretty; }
.studio :is(output, .card-bottom p, .queue small, .coloring-file-info span, .coloring-comparison figcaption span) { font-variant-numeric: tabular-nums; }
.studio [hidden] { display: none !important; }
.studio a { color: inherit; }
.studio :is(button, a, input, select, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.studio button, .studio a, .studio summary { touch-action: manipulation; }
.studio .topbar { min-height: 72px; height: auto; background: #fff; color: var(--ink); padding: 16px max(32px, calc((100vw - 1120px) / 2)); gap: 32px; border-bottom: 1px solid var(--line); }
.studio .brand { gap: 0; flex: 0 1 auto; min-height: 44px; font-weight: 600; }
.brand-symbol { flex-shrink: 0; color: var(--ink); }
.brand-lockup { display: grid; gap: 2px; }
.brand-word { font-family: inherit; font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.brand-dot { color: var(--rust); }
.brand-description { font-size: var(--type-caption); font-weight: 400; letter-spacing: 0; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.studio .tool-nav { margin: 0 0 0 auto; padding: 0; gap: 8px; align-self: center; align-items: center; }
.studio .tool-nav a { padding: 10px 16px; min-height: 44px; border-radius: 24px; color: var(--muted); font-size: var(--type-label); font-weight: 400; }
.studio .tool-nav a:hover { color: var(--ink); background: none; }
.studio .tool-nav a[aria-current=page] { background: #f5f5f7; color: var(--ink); font-weight: 600; box-shadow: none; }
.header-note { font-size: var(--type-caption); color: var(--muted); flex-shrink: 0; }
.studio main { max-width: 1248px; padding: 48px 32px 24px; }
.studio main:focus { outline: none; }
.studio-heading { display: block; text-align: center; padding-bottom: 36px; max-width: 800px; margin-inline: auto; }
.studio-kicker { font-size: var(--type-caption); color: var(--rust); font-weight: 600; letter-spacing: .015em; margin-bottom: 16px; }
.studio h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.2; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.heading-description { padding: 0; margin: 18px auto 0; max-width: 560px; width: 100%; }
.heading-description > p:first-child { font-size: var(--type-lead); line-height: 1.65; color: var(--muted); letter-spacing: -.01em; }
.privacy-line { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--type-caption); color: var(--muted); margin-top: 14px; }
.privacy-line svg { flex-shrink: 0; }
.studio .intro { margin: 0; }
.studio .intro-copy { font-size: 16px; color: var(--muted); }
.studio .workspace { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 8px 40px #1d1d1f05; overflow: hidden; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: 0; align-items: stretch; }
.studio .controls { gap: 0; padding: 28px; border-right: 1px solid var(--line); background: #fbfbfd; }
.studio .panel { padding: 0; border: 0; background: none; border-radius: 0; }
.studio .section-title { gap: 0; }
.studio .section-title h2 { font-size: var(--type-section); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
.studio .dropzone { margin-top: 16px; padding: 18px 0; gap: 8px; border: 0; border-radius: 12px; background: transparent; text-align: center; }
.studio .dropzone.drag { background: #e8f2ff; outline: 2px solid var(--focus); outline-offset: 2px; }
.studio .dropzone svg { width: 32px; height: 32px; color: var(--muted); margin-bottom: 8px; }
.studio .dropzone strong { font-size: var(--type-body); font-weight: 500; letter-spacing: -.025em; }
.studio .dropzone > span { font-size: var(--type-caption); color: var(--muted); line-height: 1.7; max-width: 190px; }
.studio .button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 980px; font-size: var(--type-body); font-weight: 500; line-height: 1.5; transition: background .15s, color .15s; }
.studio .button:disabled { opacity: 1; background: #e8e8ed; color: #64646a; cursor: not-allowed; }
.studio .button:not(:disabled):hover { filter: none; background: #0077ed; color: white; }
.studio .button:not(:disabled):active { background: #0066cc; color: white; }
.studio .dark { background: var(--accent); color: white; }
.studio .dropzone .button { margin-top: 8px; }
.studio .accent { width: 100%; min-height: 46px; background: var(--accent); color: white; font-size: var(--type-body); margin-top: 16px; }
.studio .accent:not(:disabled):hover { background: #0077ed; color: white; }
.studio .accent:disabled { background: #e8e8ed; color: #64646a; }
.studio .secondary { background: #e8e8ed; color: var(--ink); }
.studio .small-note { font-size: var(--type-label); color: var(--muted); line-height: 1.65; margin-top: 12px; }
.local-note { color: var(--muted); font-size: var(--type-caption); text-align: center; margin-top: 10px; }
.studio .settings-panel { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 0; padding: 0; }
.studio details { border-top: 0; padding-top: 0; }
.studio summary { min-height: 44px; display: flex; align-items: center; font-size: var(--type-label); color: var(--ink); gap: 8px; list-style: none; }
.studio summary::-webkit-details-marker { display: none; }
.studio summary::after { content: ''; margin-left: auto; margin-right: 4px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.studio details[open] > summary::after { content: ''; transform: rotate(225deg); }
.studio .options-title { min-height: 56px; font-size: var(--type-label); font-weight: 500; gap: 8px; }
.options-meta { font-size: var(--type-caption); color: var(--muted); font-weight: 400; }
.studio .settings-panel[open] { padding-bottom: 20px; }
.studio .setting { padding: 12px 0 16px; }
.studio .setting strong, .studio .setting p { font-size: var(--type-label); }
.studio .setting p { color: var(--muted); }
.studio .on-label { border-radius: 6px; background: #e8e8ed; color: #4c4c52; font-size: var(--type-caption); }
.studio .flow-note { background: transparent; padding: 0; margin-bottom: 16px; font-size: var(--type-caption); color: var(--muted); }
.studio #advanced { border-top: 1px solid var(--line); }
.studio .mode-switch { background: #e8e8ed; border-radius: 8px; gap: 4px; }
.studio .mode-button { min-height: 44px; border-radius: 6px; color: var(--muted); }
.studio .mode-button.active { background: white; color: var(--ink); box-shadow: 0 1px 4px #00000015; }
.studio .field { font-size: var(--type-body); }
.studio .field span { color: var(--muted); font-size: var(--type-label); }
.studio input[type=number] { border-radius: 8px; border-color: #a0a0a8; min-height: 44px; font-size: 16px; background: white; }
.field-error { font-size: var(--type-label); color: #9e3027; margin-top: 8px; }
.studio .noise-setting { margin-top: 16px; border-color: var(--line); }
.studio .noise-setting > label { font-size: var(--type-label); gap: 8px; }
.studio input[type=checkbox] { accent-color: var(--ink); width: 18px; height: 18px; }
.studio .usage-note { padding: 0; margin-top: 16px; font-size: var(--type-label); color: var(--muted); line-height: 1.65; }
.studio .queue { max-height: 240px; gap: 8px; margin-top: 12px; }
.studio .queue:empty { display: none; }
.studio .queue li { background: #f0f0f3; border-radius: 8px; padding: 8px; }
.studio .queue img { border-radius: 0; }
.studio .queue strong { font-size: var(--type-label); font-weight: 500; }
.studio .queue small { color: var(--muted); }
.studio .remove-file { color: var(--ink); background: none; }
.studio .results-panel { min-height: 0; overflow: visible; padding: 28px 32px; }
.studio .results-header { padding: 0 0 24px; gap: 16px; border: 0; align-items: center; flex-direction: row; flex-wrap: nowrap; }
.studio .results-header > div { flex: 1 1 auto; }
.studio .results-header p { color: var(--muted); font-size: var(--type-caption); margin-top: 6px; }
.studio .results-header .button { max-width: 200px; width: auto; flex: 0 1 auto; font-size: var(--type-caption); min-height: 44px; padding: 10px 16px; }
.studio .status { margin: 0 0 20px; background: #f5f5f7; color: var(--ink); font-size: var(--type-body); line-height: 1.65; padding: 12px 16px; border-radius: 10px; }
.studio .status.error { background: #fff0ef; color: #a32823; }
.studio .empty.demo-empty { padding: 0; min-height: 0; text-align: left; display: block; }
.example-caption { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 20px; font-size: var(--type-label); color: var(--muted); letter-spacing: -.015em; }
.example-tag { font-size: var(--type-caption); color: var(--muted); border: 0; padding: 0; letter-spacing: 0; }
.demo-stage { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr); gap: 16px; align-items: center; }
.demo-stage figure { min-width: 0; margin: 0; }
.demo-stage figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--type-caption); color: var(--ink); margin-bottom: 12px; }
.demo-stage figcaption span { color: var(--muted); font-size: var(--type-caption); }
.demo-paper { position: relative; overflow: hidden; height: 290px; aspect-ratio: auto; background: #f5f5f7; display: grid; place-items: center; padding: 14px; border: 0; border-radius: 14px; }
.demo-paper img { position: absolute; inset: 14px; display: block; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.demo-arrow { color: var(--muted); margin-top: 26px; }
.demo-pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 290px; aspect-ratio: auto; }
.demo-pieces > div { position: relative; overflow: hidden; background: #f5f5f7; display: grid; place-items: center; border: 0; border-radius: 12px; padding: 16px; min-width: 0; min-height: 0; }
.demo-pieces img { position: absolute; inset: 16px; display: block; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; }
.demo-lineart { background: #f5f5f7; }
.demo-footer { display: flex; justify-content: space-between; gap: 24px; align-items: center; border-top: 0; margin-top: 20px; padding-top: 0; }
.studio .demo-footer p { margin: 0; color: var(--muted); font-size: var(--type-caption); line-height: 1.8; white-space: pre-line; }
.studio .demo-footer h3 { font-size: 15px; font-weight: 500; color: var(--ink); }
.studio .example-button { background: transparent; border: 0; color: #0066cc; white-space: nowrap; flex-shrink: 0; font-size: var(--type-label); padding: 10px 0; }
.example-button span { font-size: 18px; }
.studio .result-tools { padding: 0; margin-bottom: 16px; font-size: var(--type-label); }
.studio .result-tools > label { gap: 8px; cursor: pointer; }
.studio .text-button { color: var(--muted); font-size: var(--type-label); min-height: 44px; }
.studio .text-button:hover { color: var(--ink); text-decoration: underline; }
.studio .undo-button { color: var(--rust); }
.studio .preview-note { color: var(--muted); margin: 0 0 20px; font-size: var(--type-caption); }
.studio .results-grid { padding: 0; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(175px,100%),1fr)); }
.studio .result-card { border: 1px solid var(--line); border-radius: 12px; background: white; }
.studio .preview { height: 180px; padding: 30px 20px 20px; background: repeating-conic-gradient(#eeeeF1 0% 25%, #fafafa 0% 50%) 0/16px 16px; }
.studio .preview img { outline: none; filter: none; }
.result-select { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.studio .preview .result-select input { position: static; margin: 0; width: 18px; height: 18px; }
.studio .card-bottom { padding: 12px; }
.studio .card-bottom strong { font-size: var(--type-label); font-weight: 500; }
.studio .card-bottom p { color: var(--muted); font-size: var(--type-caption); }
.studio .card-bottom a, .studio .card-bottom button { border-radius: 8px; background: #f5f5f7; color: #0066cc; font-size: var(--type-label); font-weight: 500; }
.studio .card-bottom button { background: none; border-color: var(--line); }
.studio footer { border-top: 1px solid var(--line); margin-top: 36px; padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; color: var(--muted); font-size: var(--type-caption); line-height: 1.8; }
.studio footer .footer-brand { font-family: inherit; font-weight: 600; font-size: var(--type-caption); letter-spacing: -.025em; color: var(--ink); }
.studio footer > p { flex: 1 1 300px; }
.studio footer > a { min-height: 44px; min-width: 44px; justify-content: center; color: var(--muted); }
.visitor-disclosure { flex: 1 1 100%; border-top: 1px solid var(--line) !important; }
.studio .visitor-disclosure > summary { justify-content: start; color: var(--muted); font-size: var(--type-caption); min-height: 44px; }
.studio .visitor-disclosure > summary::after { margin-left: 12px; width: 5px; height: 5px; }
.studio .visitor-counter { margin: 0 0 16px; border: 0; padding: 0; background: transparent; border-radius: 0; color: var(--muted); max-width: 600px; }
.studio .visitor-counter h2, .studio .visitor-hint { color: var(--muted); }
.studio .visitor-counter h2 { font-size: var(--type-caption); font-weight: 500; }
.studio .visitor-stats dt, .studio footer .visitor-hint { font-size: var(--type-caption); }
.studio .visitor-stats dd { color: var(--ink); font-size: 18px; font-weight: 600; }
.studio .coloring-field { margin: 8px 0 8px; font-size: var(--type-label); font-weight: 500; }
.studio .coloring-workspace select { min-height: 44px; font-size: 16px; border-color: #a0a0a8; border-radius: 8px; background: white; color: var(--ink); }
.studio .coloring-range-label { font-size: var(--type-label); font-weight: 500; margin: 20px 0 4px; }
.studio .coloring-range-label output { font-size: var(--type-caption); color: var(--muted); }
.studio .coloring-workspace input[type=range] { height: 44px; accent-color: var(--ink); }
.studio .coloring-range-ends { color: var(--muted); font-size: var(--type-caption); margin: 0; }
.studio .coloring-setting-actions { color: var(--muted); font-size: var(--type-caption); }
.studio .coloring-file-info { background: #f0f0f3; border-radius: 8px; }
.studio .coloring-file-info strong { font-size: var(--type-label); font-weight: 500; }
.studio .coloring-file-info span { color: var(--muted); font-size: var(--type-caption); }
.studio .coloring-cancel { margin-top: 8px; }
.studio .coloring-comparison { padding: 0; gap: 20px; }
.studio .coloring-comparison figure { border: 1px solid var(--line); border-radius: 12px; }
.studio .coloring-comparison figcaption { background: #fbfbfd; border-bottom: 1px solid var(--line); padding: 12px; }
.studio .coloring-comparison figcaption strong { font-size: var(--type-label); font-weight: 500; }
.studio .coloring-comparison figcaption span { color: var(--muted); font-size: var(--type-caption); }
.studio .coloring-picture { padding: 16px; height: clamp(260px,30vw,480px); min-height: 260px; }
.studio .coloring-source-picture { background: repeating-conic-gradient(#eeeef1 0% 25%, #fafafa 0% 50%) 0/16px 16px; }
.studio .coloring-picture p { color: var(--muted); }
.studio .coloring-output-note { margin: 20px 0 0; color: var(--muted); font-size: var(--type-label); line-height: 1.65; }
.studio .coloring-progress-wrap { padding: 0 0 16px; }
.studio .coloring-progress-wrap progress { accent-color: var(--rust); }
.studio dialog { background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 80px #00000030; }
.studio dialog::backdrop { background: #1d1d1f50; }
.studio dialog .crop-heading { justify-content: space-between; }
.studio .crop-heading h2 { font-size: 22px; font-weight: 600; line-height: 1.3; }
.studio .icon-button { border-radius: 22px; color: var(--ink); background: #f5f5f7; }
.studio .crop-selection { border-color: var(--focus); clip-path: inset(-30px); }
.studio .crop-handle::after { background: var(--focus); }
.studio .crop-handle { width: 44px; height: 44px; }
.studio .crop-handle::after { margin: 16px; }
.studio .crop-handle.nw { left: -23px; top: -23px; }
.studio .crop-handle.ne { right: -23px; top: -23px; }
.studio .crop-handle.sw { left: -23px; bottom: -23px; }
.studio .crop-handle.se { right: -23px; bottom: -23px; }
.studio .crop-coordinates label { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: 8px; left: 16px; z-index: 100; padding: 12px 16px; background: var(--ink); color: white !important; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 1100px) {
  .header-note { display: none; }
  .studio .tool-nav { margin-left: auto; margin-right: 0; }
  .studio .workspace { grid-template-columns: minmax(240px,280px) minmax(0,1fr); }
  .studio .controls { padding: 24px; }
  .studio .results-panel { padding: 24px; }
  .demo-stage { gap: 10px; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); }
  .demo-arrow { width: 24px; }
  .demo-pieces { gap: 8px; }
  .demo-pieces > div { padding: 10px; }
  .demo-pieces img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .demo-stage figcaption { flex-wrap: wrap; }
  .studio .results-header .button { max-width: 170px; }
}
@media (max-width: 800px) {
  .studio .topbar { padding: 14px 24px; gap: 16px; min-height: 64px; flex-wrap: nowrap; }
  .studio .brand { flex: 1; max-width: 40%; }
  .brand-word { font-size: 24px; }
  .studio .tool-nav { order: 0; width: auto; gap: 4px; margin-left: auto; justify-content: flex-end; }
  .studio .tool-nav a { flex: 0 1 auto; font-size: var(--type-caption); padding: 10px 12px; }
  .studio main { padding: 36px 24px 16px; }
  .studio-heading { padding-bottom: 28px; }
  .studio h1 { font-size: 36px; }
  .studio-kicker { margin-bottom: 12px; }
  .heading-description { padding: 0; max-width: none; margin-top: 14px; }
  .heading-description > p:first-child { font-size: 16px; }
  .privacy-line { margin-top: 12px; font-size: var(--type-caption); }
  .studio .workspace { grid-template-columns: minmax(0,1fr); }
  .studio .controls { padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .studio .dropzone { padding: 12px 0; }
  .studio .dropzone > span { max-width: none; }
  .studio .dropzone svg { display: none; }
  .studio .settings-panel { margin-top: 16px; }
  .studio .options-title { min-height: 52px; }
  .studio .results-panel { border-top: 0; padding: 24px; }
  .studio .results-header { padding-bottom: 20px; }
  .studio .results-header .button { width: auto; max-width: 150px; }
  .example-caption { font-size: var(--type-body); margin-bottom: 16px; }
  .example-tag { font-size: var(--type-caption); }
  .demo-paper { padding: 8px; height: auto; aspect-ratio: 1; }
  .demo-pieces { height: auto; aspect-ratio: 1; }
  .demo-pieces > div { padding: 8px; }
  .demo-paper img, .demo-pieces img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .demo-stage figcaption { font-size: var(--type-caption); gap: 4px; min-height: 32px; margin-bottom: 8px; }
  .demo-stage figcaption span { font-size: var(--type-caption); }
  .demo-footer { gap: 16px; margin-top: 20px; padding-top: 16px; }
  .studio .demo-footer p { font-size: var(--type-caption); }
  .studio .example-button { padding: 10px 0; font-size: var(--type-caption); }
  .studio .results-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .studio .preview { height: 180px; padding: 30px 16px 16px; }
  .studio .coloring-comparison { gap: 12px; padding: 0; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio .coloring-picture { min-height: 180px; height: 240px; padding: 8px; }
  .studio .coloring-comparison figcaption strong { font-size: var(--type-caption); }
  .studio .coloring-comparison figcaption span { font-size: var(--type-caption); }
  .studio footer { margin-top: 16px; flex-direction: row; gap: 8px 16px; }
  .studio footer > p { flex: 1 1 100%; order: 3; }
  .visitor-disclosure { order: 4; }
  .studio footer > a { margin-left: auto; }
}
@media (max-width: 400px) {
  .studio .topbar { padding-left: 16px; padding-right: 16px; }
  .studio main { padding-left: 16px; padding-right: 16px; }
  .studio h1 { font-size: 32px; }
  .demo-stage { gap: 8px; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); }
  .demo-arrow { width: 20px; }
  .demo-pieces { gap: 6px; }
  .demo-pieces > div { padding: 5px; }
  .demo-pieces img { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .studio .preview { height: 140px; }
  .studio .coloring-picture { height: 190px; }
  .studio .crop-coordinates { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio dialog { padding: 20px; }
  .studio .controls, .studio .results-panel { padding: 20px; }
  .studio .tool-nav a { padding: 10px 8px; font-size: var(--type-caption); }
  .brand-word { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio *, .studio *::before, .studio *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.studio .example-button:not(:disabled):hover { background: transparent; color: #004f9f; text-decoration: underline; }

@media (max-width: 600px) {
  .studio .results-header { flex-direction: column; align-items: stretch; gap: 14px; }
  .studio .results-header > div { flex: none; }
  .studio .results-header .button { width: 100%; max-width: none; flex: none; font-size: var(--type-body); }
  .demo-stage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .demo-stage figcaption { font-size: var(--type-label); min-height: 0; margin-bottom: 10px; }
  .demo-stage figcaption span { font-size: var(--type-caption); }
  .demo-paper { height: 240px; aspect-ratio: auto; }
  .demo-pieces { height: 280px; aspect-ratio: auto; gap: 12px; }
  .demo-arrow { width: 24px; height: 24px; margin: 0 auto; transform: rotate(90deg); }
  .demo-footer { flex-wrap: wrap; gap: 8px 20px; padding-top: 0; }
  .studio .demo-footer p { font-size: var(--type-caption); }
  .studio .example-button { font-size: var(--type-body); }
  .studio .coloring-comparison { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .studio .coloring-picture { height: auto; min-height: 0; aspect-ratio: 1; padding: 16px; }
  .studio .coloring-comparison figcaption strong { font-size: var(--type-body); }
  .studio .coloring-comparison figcaption span { font-size: var(--type-caption); }
  .studio .crop-coordinates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}