:root { --dock-height:calc(64px + env(safe-area-inset-bottom)); --keyboard-inset:0px; --visible-height:100dvh; }
.site-header { height:72px; gap:28px; }
.header-title { margin-left:auto; align-self:center; border:0; }
.orientation { display:flex; gap:3px; background:#f0f1ec; border:1px solid #e5e7dc; padding:3px; border-radius:9px; }
.orientation button { display:flex; align-items:center; gap:6px; min-height:30px; font-size:10px; padding:5px 9px; border:0; background:transparent; border-radius:6px; }
.orientation button[aria-pressed=true] { background:white; box-shadow:0 1px 4px #0000000c; }
.orientation i { display:block; border:1px solid currentColor; border-radius:1px; }
.landscape-icon { width:15px; height:10px; }.portrait-icon { width:10px; height:15px; }
.desktop-tools { display:flex; gap:7px; }.desktop-tools button { min-height:34px; padding:6px 12px; font-size:11px; }
#studio { --sheet-safe-top:env(safe-area-inset-top,0px); display:block; min-height:0; max-width:1180px; }
#studio .preview-panel { padding:26px 34px 20px; }
#studio .stage { display:block; min-height:0; padding:0; border-radius:15px; }
.canvas-viewport { position:relative; width:100%; height:clamp(420px,63dvh,680px); overflow:hidden; touch-action:none; overscroll-behavior:contain; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; isolation:isolate; }
.canvas-viewport :is(input, textarea, [contenteditable]:not([contenteditable="false"])) { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
#paper { position:absolute; left:0; top:0; transform-origin:0 0; max-width:none; will-change:transform; }
#postcard { display:block; width:100%; height:100%; aspect-ratio:auto; touch-action:none; }
#canvas-note { position:absolute; bottom:13px; left:18px; right:18px; text-align:center; font-size:10px; color:#6f7165; margin:0; pointer-events:none; }
#selection { position:absolute; inset:0; pointer-events:none; z-index:3; }
.selection-layer svg { width:100%; height:100%; overflow:visible; position:absolute; inset:0; }
.selection-layer polygon { fill:transparent; stroke:#536a45; stroke-width:1.3; stroke-dasharray:5 3; }
.glyph-handle { position:absolute; transform:translate(-50%,-50%); border:1px solid #748668; background:#fffffff5; box-shadow:0 2px 8px #3333; width:36px; height:36px; min-height:36px; padding:0; border-radius:50%; font-size:18px; pointer-events:auto; touch-action:none; display:grid; place-items:center; }
.glyph-handle:before { content:''; position:absolute; inset:-5px; border-radius:50%; }
.delete-handle { color:#66594d; }
.history { position:absolute; z-index:5; top:12px; left:12px; display:flex; padding:2px; gap:0; border:1px solid #ffffff60; background:#fffdf5bf; backdrop-filter:blur(8px); border-radius:10px; }
.history>button { min-width:38px; min-height:34px; padding:2px 9px; font-size:21px; }
.view-controls { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; align-items:center; padding:3px; z-index:5; background:#fffdf5e8; backdrop-filter:blur(9px); border:1px solid #ffffff90; border-radius:11px; box-shadow:0 2px 10px #594c2b0b; }
.view-controls button { min-width:36px; min-height:32px; padding:4px 9px; border:0; background:transparent; font-size:16px; }
.view-controls output { font-size:10px; width:44px; text-align:center; }
.view-controls #fit-view { font-size:10px; border-left:1px solid #deded4; border-radius:0; white-space:nowrap; margin-left:4px; }
.context-tools { position:absolute; z-index:6; top:12px; right:12px; display:flex; gap:2px; background:#fffef9f2; border:1px solid #ffffff90; border-radius:10px; padding:3px; box-shadow:0 3px 14px #594c2b12; }
.context-tools button { background:none; border:0; font-size:10px; min-height:34px; padding:5px 10px; }
.context-tools #refine { background:#e9eddf; }
.preview-caption { display:flex; justify-content:space-between; gap:12px; margin:12px 0 26px; font-size:10px; color:#85897d; }
.result { padding:7px; border-radius:11px; }.result canvas.result-focus { display:block; width:100%; height:125px; aspect-ratio:auto; object-fit:contain; background:#f5f3eb; border-radius:6px; }
.result strong { font-size:11px; margin:10px 4px 5px; }.result small { font-size:9px; margin:0 4px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result[aria-pressed=true]:after { display:none; }.result[aria-pressed=true] strong:after { content:' ✓'; color:#60744f; }
.sheet { position:fixed; top:90px; bottom:28px; width:300px; z-index:20; border:1px solid #e2e4da; border-radius:15px; background:white; box-shadow:0 12px 45px #2c352019; padding:0; overflow:hidden; }
#studio .sheet:not([hidden]) { display:flex; flex-direction:column; }
.choose-panel { left:20px; }.adjust-panel { right:20px; }.sheet-handle { display:none; }
.panel-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #f0f0e9; flex:none; }
.panel-head h2 { font-size:16px; margin:0; }.panel-head button { min-height:30px; padding:2px 8px; font-size:23px; border:0; background:none; }
.panel-scroll { overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; min-height:0; padding:20px; scroll-padding-bottom:30px; }
.panel-scroll .step:first-child { margin-top:0; padding-top:0; border-top:0; }
.panel-scroll input[type=range] { height:24px; }
.sheet details { border-bottom:1px solid var(--line); padding-bottom:18px; margin:0 0 18px; }
.sheet summary { font-size:12px; font-weight:550; margin-bottom:15px; }.sheet details:not([open]) { padding-bottom:0; }.sheet details:not([open]) summary { margin-bottom:16px; }
.inline-editor { position:fixed; z-index:40; width:380px; left:50%; bottom:30px; transform:translateX(-50%); background:#fffffff7; backdrop-filter:blur(15px); border:1px solid #dce2d2; border-radius:15px; padding:16px; box-shadow:0 10px 40px #2c35202b; max-height:calc(var(--visible-height) - 30px); overflow:auto; }
.inline-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }.inline-head label { font-weight:600; }.inline-head span { font-size:10px; color:var(--muted); }
.inline-editor textarea { font-size:22px; min-height:85px; max-height:150px; resize:none; background:#fdfcf8; }
.inline-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }.inline-bottom p { margin:0; font-size:10px; color:var(--muted); }.inline-bottom button { min-height:42px; padding:9px 14px; white-space:nowrap; }
.sheet-handle:focus-visible { outline:2px solid #5d7057; outline-offset:-4px; }
.canvas-toolbar { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:6px; position:relative; z-index:6; }
.canvas-toolbar .view-controls,.canvas-toolbar .context-tools { position:static; transform:none; flex-wrap:wrap; justify-content:center; }
/* A 32px visual button (previously 40px), with a 44px touch target. */
#studio .canvas-toolbar .view-controls { flex-wrap:nowrap; padding:2px 4px; border-radius:20px; background:#fffdf8; border-color:#eee9df; box-shadow:0 2px 8px #594c2b06; }
#studio .canvas-toolbar .view-controls button { position:relative; display:grid; place-items:center; min-width:44px; height:32px; min-height:32px; padding:0; border:0; margin:0; border-radius:16px; font-size:18px; }
#studio .canvas-toolbar .view-controls button::before { content:''; position:absolute; inset:-6px 0; }
#studio .canvas-toolbar .view-controls button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#studio .canvas-toolbar .view-controls output { width:44px; font-size:11px; font-variant-numeric:tabular-nums; }
#studio .canvas-toolbar #fit-view::after { content:''; position:absolute; left:0; top:6px; bottom:6px; border-left:1px solid #e6e0d5; }
#studio .preview-caption { justify-content:flex-end; margin:6px 0 18px; }
.editing-help { position:fixed; z-index:50; width:300px; max-width:calc(100vw - 24px); margin:0; padding:12px 16px 16px; border:1px solid #eee9df; border-radius:16px; background:#fffdf9; color:#33342e; box-shadow:0 5px 20px #594c2b12; overflow-y:auto; overscroll-behavior:contain; }
.editing-help-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f0ece5; padding-bottom:6px; margin-bottom:10px; }
.editing-help-head h2 { margin:0; font-size:14px; font-weight:600; }
.editing-help-head button { display:grid; place-items:center; position:relative; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; font-size:21px; }
.editing-help-head button::before { content:''; position:absolute; inset:-6px; }
.editing-help ul { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.editing-help li { display:flex; align-items:center; gap:12px; }
.editing-help li svg { flex:none; width:42px; height:48px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.editing-help li strong { display:block; font-size:13px; font-weight:500; line-height:1.5; }
.editing-help li p { margin:4px 0 0; color:#79786f; font-size:12px; line-height:1.6; }
.editing-help .gesture-motion { stroke-dasharray:3 3; }
.marquee { position:absolute; pointer-events:none; border:1px solid #536a45; background:#7e956324; z-index:4; }
.background-sources { margin:14px 0; }.background-sources button{font-size:10px;padding:8px 4px;white-space:nowrap;}
.image-results { display:grid; gap:12px; margin-top:15px; }.image-results:empty { display:none; }.generated-background { padding:7px; display:grid; gap:6px; font-size:11px; }.generated-background img{display:block;width:auto;height:auto;max-width:100%;max-height:200px;justify-self:center;border-radius:5px;}
@media(max-width:900px) {
  :root { --dock-height:calc(51.2px + env(safe-area-inset-bottom)); }
  /* iOS zooms focused form controls below 16px. Keep the existing button typography. */
  #studio input:not(:is([type=range],[type=color],[type=checkbox],[type=radio],[type=file],[type=button],[type=submit],[type=reset],[type=image])),#studio textarea,#studio select { font-size:16px; }
  body.mobile-input-active { position:fixed; top:var(--input-scroll-top); left:0; right:0; overflow:hidden; }
  .site-header { height:58px; padding:0 17px; gap:12px; }.official-logo { width:104px; height:35px; }.brand-name { display:none; }.header-title { font-size:11px; margin-left:auto; }.orientation { margin-left:auto; }.desktop-tools { display:none; }
  #studio .preview-panel { padding:19px 8px calc(var(--dock-height) + 20px); }.preview-top { display:none; }.preview-top .eyebrow { font-size:8px; }.live { font-size:9px; }
  #studio .stage { border-radius:12px; }.canvas-viewport { height:clamp(335px,60dvh,650px); --paper-fit-inset:24px; touch-action:pan-y; overscroll-behavior:auto; }.preview-caption { font-size:9px; margin:11px 0 24px; }.preview-caption .size-note { display:none; }
  .history { top:10px; left:10px; }.history>button { min-width:32px; min-height:30px; padding:2px 7px; font-size:20px; }
  .context-tools { top:54px; left:50%; right:auto; transform:translateX(-50%); white-space:nowrap; }.context-tools button { padding:5px 9px; min-height:34px; }
  .view-controls { bottom:35px; }.view-controls button { min-height:35px; }#canvas-note { font-size:9px; bottom:12px; }
  .canvas-toolbar .context-tools { position:static; transform:none; }
  .results { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 7px; }.result { flex:0 0 44%; scroll-snap-align:start; }.result canvas.result-focus { height:126px; }.result strong { font-size:10px; }.result small { font-size:8px; }
  .save-bar { margin-top:17px; padding-top:18px; flex-direction:row; }.save-bar .primary { display:none; }.save-bar p { font-size:9px; }.save-bar strong { font-size:11px; }
  #studio .sheet { top:auto; left:0; right:0; bottom:var(--sheet-bottom,var(--dock-height)); width:auto; height:var(--sheet-height,225px); max-height:var(--sheet-max-height,var(--visible-height)); border-radius:18px 18px 0 0; box-shadow:0 -8px 30px #302e2515; padding:0; margin:0; }
  #studio[data-sheet-layout] .preview-panel { overflow-anchor:none; }
  #studio[data-sheet-layout] .canvas-viewport { min-height:min(var(--sheet-canvas-limit),calc(var(--canvas-tools-height) + min(8rem,24dvh))); }
  #studio[data-sheet-layout] .stage > .canvas-toolbar { position:absolute; inset-inline:0; bottom:0; margin:0; padding-block:6px; }
  #studio[data-sheet-layout] #canvas-note { bottom:var(--canvas-tools-height); }
  /* Shared mobile header: 48px including the divider. Keep the 28px drag
     strip; overlap its empty space with the 44px title/action row. */
  #studio .sheet {
    --sheet-header-height:48px;
    --sheet-header-action-size:44px;
    --sheet-header-padding-inline:22px;
    --sheet-handle-hit-height:28px;
    --sheet-handle-padding-top:6px;
  }
  #studio .sheet > .sheet-handle { flex:none; display:flex; justify-content:center; align-items:flex-start; height:var(--sheet-handle-hit-height); padding-top:var(--sheet-handle-padding-top); cursor:ns-resize; touch-action:none; }
  .sheet-handle span { width:40px; height:4px; background:#c8cdbe; border-radius:4px; }
  #studio .sheet > .panel-head { position:relative; height:var(--sheet-header-action-size); margin-top:calc(var(--sheet-header-height) - var(--sheet-handle-hit-height) - var(--sheet-header-action-size)); padding:0 var(--sheet-header-padding-inline); pointer-events:none; }
  #studio .sheet > .panel-head h2 { font-size:16px; line-height:20px; }
  /* Let the shared drag strip receive touches through the overlapping row,
     while keeping close/collapse buttons independently operable. */
  #studio .sheet > .panel-head button { display:inline-flex; align-items:center; justify-content:center; width:var(--sheet-header-action-size); height:var(--sheet-header-action-size); min-height:var(--sheet-header-action-size); padding:0; pointer-events:auto; }
  .panel-scroll { padding:10px 22px 24px; }.is-collapsed .panel-scroll { visibility:hidden; }
  .mobile-tools { min-height:var(--dock-height); height:auto; align-items:center; padding:6.4px 12px calc(6.4px + env(safe-area-inset-bottom)); z-index:30; background:#fffffff5; backdrop-filter:blur(12px); border-top:0; box-shadow:0 -3px 12px #302e2508; gap:7px; }
  .mobile-tools::before { content:''; position:absolute; top:0; left:0; right:0; height:0.5px; background:#e2e4da; pointer-events:none; }
  .mobile-tools button { position:relative; flex:1; min-height:37.6px; border:0; border-radius:9px; font-size:11px; padding:6.4px 5px; }.mobile-tools button:last-child { flex:1.35; background:var(--dark); color:white; }.mobile-tools .active { background:#e8eddf; }
  /* Keep the original 47px touch height within each button column. */
  .mobile-tools button::before { content:''; position:absolute; inset:-4.7px 0; }
  .inline-editor { width:calc(100% - 24px); max-width:460px; bottom:calc(max(var(--keyboard-inset),var(--dock-height)) + 10px); padding:14px; }.inline-editor textarea { font-size:22px; max-height:min(140px,25dvh); }
  .text-editing .mobile-tools { visibility:hidden; }.text-editing .inline-editor { bottom:calc(var(--keyboard-inset) + 10px); }
  .keyboard-open .mobile-tools { visibility:hidden; }
  .status { font-size:9px; }.glyph-handle { width:36px; height:36px; }.backgrounds { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:375px) { .header-title { display:none; }.context-tools button { padding:5px 8px; font-size:9px; }.preview-caption { font-size:8px; }.result { flex-basis:47%; } }
/* Actual-font previews are independent from the four recommendation compositions. */
.font-palette{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:3px 2px 10px;scrollbar-width:thin;touch-action:pan-x pan-y;}
.font-card,.font-add{flex:0 0 104px;width:104px;aspect-ratio:1;scroll-snap-align:start;position:relative;}
.font-card-select,.font-add{border:1px solid #deded9;border-radius:10px;background:#fffdf9;padding:0;overflow:hidden;}
.font-card-select{display:block;width:100%;height:100%;}.font-card canvas{display:block;width:100%;height:100%;}
.font-card-select[aria-pressed=true]{border:2px solid #111;box-shadow:0 0 0 1px #111;}.font-card-select:focus-visible,.font-add:focus-visible{outline:2px solid #111;outline-offset:2px;}
.font-add{font-size:11px;color:#333;background:#f5f5f2;white-space:normal;}.font-card.unsupported,.font-card.font-error{opacity:.4;}
.font-delete-menu{position:absolute;right:3px;top:3px;width:28px;height:28px;padding:0;border:1px solid #ddd;background:#fffffff0;border-radius:50%;font-size:18px;}
.font-weights{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0;}.font-current{font-size:11px;flex:1 1 100%;}.font-weights button{font-size:11px;min-width:32px;min-height:32px;padding:4px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;}.font-weights button[aria-pressed=true]{color:white;background:#111;border-color:#111;}.font-mode{font-size:10px;color:#666;}
#font-status:empty{display:none;}.font-controls{margin-top:0;}
@media(max-width:900px){.font-card,.font-add{flex-basis:96px;width:96px;}.font-palette{margin-right:-10px;padding-right:10px;}}

/* Card-local preview work. Only opacity changes on the lettering canvas. */
.font-palette .font-card canvas{opacity:0;transition:opacity .3s ease}
.font-palette .font-card[data-preview-state="ready"] canvas{opacity:1}
.font-palette .font-card[data-preview-state="loading"] canvas{transition:none}
.font-palette .cfap-font-loader{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .3s ease}
.font-palette .cfap-font-loader::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(51,51,51,0) 0deg,rgba(51,51,51,.16) 90deg,rgba(51,51,51,.48) 210deg,#333333 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.6px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.6px));animation:cfap-preview-spin .8s linear infinite;animation-play-state:paused}
.font-palette .font-card[data-preview-state="loading"] .cfap-font-loader{opacity:1;transition:none}
.font-palette .font-card[data-preview-state="loading"] .cfap-font-loader::before{animation-play-state:running}
@keyframes cfap-preview-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.font-palette .font-card canvas,.font-palette .cfap-font-loader{transition:none}.font-palette .cfap-font-loader::before{animation:none}}
/* Only active progress/error content occupies space; results have no placeholder. */
.image-progress{display:none;margin-top:10px;}
.image-progress[data-state=running],.image-progress[data-state=finishing],.image-progress[data-state=error]{display:block;}
.image-progress .help{margin:0;font-size:12px;line-height:20px;}
.image-progress .help:empty{display:none;}
.image-progress-estimate{color:var(--muted,#73776f);}
.image-progress-track{height:4px;width:100%;overflow:hidden;border-radius:3px;background:#e8e9e4;margin-top:10px;}
.image-progress-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .3s linear;overflow:hidden;border-radius:inherit;}
.image-progress-fill span{display:block;width:200%;height:100%;background:repeating-linear-gradient(90deg,#191d1b 0%,#191d1b 40%,#b52d28 45%,#191d1b 50%);animation:cfap-image-gradient 3.6s linear infinite;animation-play-state:paused;}
.image-progress[data-state=running] .image-progress-fill span{animation-play-state:running;}
.image-progress #image-cancel{display:block;margin-left:auto;padding:6px 0;font-size:12px;}
.generated-background-new{animation:cfap-image-reveal .45s ease both;}
@keyframes cfap-image-gradient{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cfap-image-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.image-progress,.image-progress-fill{transition:none;}.image-progress-fill span,.generated-background-new{animation:none;}}

.image-progress[data-state=error] .image-progress-track{display:none;}
.image-progress[data-state=error] #image-progress-message{color:#a43f31;}

/* Extend only the mobile scrollports. Added inner gutters preserve content width,
   percentage card bases, first/last alignment, scroll range and snap offsets. */
@media(max-width:900px) {
  #studio .preview-panel { --results-gutter:14px; }
  #studio .results { margin-inline:calc(-1 * var(--results-gutter)); padding-inline:calc(2px + var(--results-gutter)); scroll-padding-inline:var(--results-gutter); }
  /* Keep the original 1px border + 22px content inset, while allowing the
     font scrollport to paint all the way to the screen edges. */
  #studio #adjust-panel { border-inline:0; }
  #studio #adjust-panel .panel-head { padding-inline:calc(var(--sheet-header-padding-inline) + 1px); }
  #studio #adjust-panel .panel-scroll { padding-inline:23px; }
  #studio #font-palette { margin-inline:-23px; padding-left:25px; padding-right:23px; scroll-padding-left:23px; scroll-padding-right:13px; }
}

.panel-head-actions{display:flex;align-items:center;gap:2px}.panel-head .panel-collapse{display:none;width:40px;height:40px;min-height:40px;padding:10px;align-items:center;justify-content:center;color:inherit}.panel-collapse svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}.is-collapsed .panel-collapse svg{transform:rotate(180deg)}
@media(max-width:900px){
  /* Override the global button hover and native tap highlight only here.
     Keep the shared 44px target and the existing focus-visible outline. */
  #studio .sheet > .panel-head .panel-collapse { background:transparent; border:0; box-shadow:none; -webkit-tap-highlight-color:transparent; }
  #studio .sheet > .panel-head .panel-collapse svg { transform:rotate(0deg); }
  #studio .sheet.is-collapsed > .panel-head .panel-collapse svg { transform:rotate(180deg); }
  .panel-head .panel-collapse{display:inline-flex}#studio .sheet.is-toggling{transition:height .22s ease}.is-collapsed .panel-scroll{visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){#studio .sheet.is-toggling,.panel-collapse svg{transition:none}}