@charset "UTF-8";
:root {
  color-scheme: light;
  --paper: #f7f6f2; --paper-deep: #eeede7; --white: #fffefa;
  --ink: #20231f; --muted: #777a73; --line: #deded6; --line-dark: #c9cbc2;
  --blue: #3158e8; --blue-dark: #2547c7; --blue-wash: #e9edff; --acid: #e7f08b;
  --serif: Georgia, "Times New Roman", serif; --sans: Arial, Helvetica, sans-serif;
  --mono: "Courier New", monospace;
  --shadow: 0 18px 54px rgb(32 35 31 / 10%), 0 2px 8px rgb(32 35 31 / 5%);
  font-family: var(--sans); font-synthesis: none; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--paper); color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgb(49 88 232 / 34%); outline-offset: 2px; }
a { color: inherit; }
[hidden] { display: none !important; }

.site-header {
  height: 66px; display: flex; align-items: center; justify-content: space-between;
  max-width: 1440px; margin: 0 auto; padding: 0 42px; border-bottom: 1px solid var(--line);
}
.brand, .site-header .brand, .brand-lockup {
  display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -.8px;
}
.brand-mark { display: inline-grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--blue); color: white; font: 700 13px var(--sans); }
.site-nav { display: flex; align-items: center; gap: 25px; }
.site-nav a, .site-nav button { padding: 7px 0; border: 0; background: none; color: #5f625c; text-decoration: none; font-size: 12px; font-weight: 600; }
.site-nav a:hover, .site-nav button:hover { color: var(--blue); }
main, .page-shell { width: min(1356px, calc(100% - 84px)); margin: 0 auto; }
.page-heading { padding: 38px 0 27px; }
.eyebrow, .page-heading .eyebrow { margin: 0 0 10px; color: var(--blue); font: 700 10px var(--mono); letter-spacing: 1.8px; text-transform: uppercase; }
.page-heading h1 { margin: 0; font: 400 clamp(30px, 3.2vw, 43px)/1.05 var(--serif); letter-spacing: -1.8px; }
.page-heading .subheading { max-width: 650px; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.category-tabs { display: flex; width: fit-content; gap: 4px; margin: 0 0 22px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #f1f0eb; }
.category-tabs a, .category-tabs button {
  display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px;
  padding: 0 13px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: #686b64; text-decoration: none; font-size: 12px; font-weight: 600;
}
.category-tabs a:hover, .category-tabs button:hover { color: var(--ink); }
.category-tabs [aria-current="page"], .category-tabs [aria-selected="true"], .category-tabs .active { border-color: #e0e0d8; background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgb(25 29 23 / 5%); }
.studio-grid { display: grid; grid-template-columns: minmax(360px, 425px) minmax(0, 1fr); align-items: start; gap: clamp(32px, 5.5vw, 84px); padding-bottom: 60px; }
.editor-panel, .preview-panel { min-width: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; margin-bottom: 11px; }
.panel-heading h2, .panel-heading h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.25px; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.editor-tabs { display: flex; gap: 20px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.editor-tabs button { position: relative; min-height: 38px; padding: 0 1px; border: 0; background: none; color: #85877f; font-size: 12px; font-weight: 600; }
.editor-tabs button:hover { color: var(--ink); }
.editor-tabs button[aria-selected="true"], .editor-tabs button.active { color: var(--blue); }
.editor-tabs button[aria-selected="true"]::after, .editor-tabs button.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); content: ""; }
#content-panel, #style-panel { min-width: 0; }
.form-section { margin: 0 0 21px; }
.section-kicker, .field-label, .field-row label, label.field-label { display: block; margin: 0 0 7px; color: #51544e; font-size: 11px; font-weight: 700; letter-spacing: .15px; }
.field-help, .hint, .form-hint { margin: 6px 0 0; color: #888a83; font-size: 10px; line-height: 1.45; }
.field-row { display: grid; grid-template-columns: 1fr 112px; gap: 11px; margin-bottom: 14px; }
.field-row > div { min-width: 0; }
input[type="text"], input[type="number"], textarea, select, .text-input {
  width: 100%; min-height: 39px; padding: 9px 11px; border: 1px solid var(--line-dark); border-radius: 5px;
  background: #fffefa; color: var(--ink); font-size: 12px; transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #a5a69f; }
input[type="text"]:hover, input[type="number"]:hover, textarea:hover, select:hover { border-color: #aeb0a7; }
input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px rgb(49 88 232 / 11%); }
textarea { min-height: 68px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 4.5 3.5 3 3.5-3' fill='none' stroke='%23777a73' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.items-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 27px 0 10px; padding-top: 17px; border-top: 1px solid var(--line); }
.items-heading h3, .items-heading strong { margin: 0; font-size: 12px; font-weight: 700; }
.items-heading p, .items-heading span { margin: 0; color: var(--muted); font-size: 10px; }
#items-list { display: grid; gap: 9px; }
.item-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) 26px; align-items: start; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 254 250 / 72%); transition: border-color .15s ease, background .15s ease; }
.item-card:hover { border-color: #c7c9c0; background: var(--white); }
.item-card.dragging { opacity: .45; }
.item-card.drag-over, .item-card.drop-target { border-color: var(--blue); background: var(--blue-wash); }
.item-card [draggable="true"] { cursor: grab; }
.item-thumb, .item-image, .upload-thumb, .item-card .thumb { position: relative; display: grid; width: 58px; height: 58px; overflow: hidden; place-items: center; border: 1px solid #dedfd7; border-radius: 4px; background: linear-gradient(145deg, #ebeaff, #d8dcfb 53%, #e7e4d6); color: var(--blue); font-size: 20px; }
.item-thumb img, .item-image img, .upload-thumb img, .item-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-thumb input[type="file"], .item-image input[type="file"], .upload-thumb input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.item-fields { display: grid; min-width: 0; grid-template-columns: 1fr; gap: 6px; }
.item-fields input, .item-fields select { min-width: 0; min-height: 32px; padding: 6px 8px; border-radius: 4px; font-size: 11px; }
.item-fields .item-title { font-weight: 600; }
.item-controls, .item-actions { display: grid; grid-template-columns: 1fr; gap: 3px; }
.item-controls button, .item-actions button, .move-up, .move-down, .remove-item { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #83867d; font-size: 13px; line-height: 1; }
.item-controls button:hover, .item-actions button:hover, .move-up:hover, .move-down:hover { border-color: var(--line); background: white; color: var(--ink); }
.item-controls .remove-item:hover, .item-actions .remove-item:hover, .remove-item:hover { color: #b73e3b; }
.item-card .award-row { grid-column: 2 / -1; }

.button-row, .editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.button, button.primary, button.secondary, button.text-button, #add-item, #paste-list, #download, #copy-caption { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid var(--line-dark); border-radius: 5px; background: var(--white); color: #3d403a; font-size: 11px; font-weight: 700; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.button:hover, button.secondary:hover, #add-item:hover, #paste-list:hover, #copy-caption:hover { border-color: #9da097; background: white; color: var(--ink); }
button.primary, #download { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 2px 4px rgb(49 88 232 / 14%); }
button.primary:hover, #download:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
button.text-button { min-height: 30px; padding: 0 5px; border-color: transparent; background: transparent; color: var(--blue); }
button.text-button:hover { border-color: transparent; background: var(--blue-wash); }
.photos-only, label.photos-only { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; padding: 0 13px; border: 1px dashed #bfc1b7; border-radius: 5px; color: #5e615a; font-size: 11px; font-weight: 700; cursor: pointer; }
.photos-only:hover { border-color: var(--blue); background: var(--blue-wash); color: var(--blue); }
input[type="file"][hidden], .hidden-upload { display: none !important; }
.editor-foot { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: #878981; font-size: 10px; line-height: 1.45; }
.editor-foot::before { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #68a675; content: ""; }

.template-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 4px 0 25px; }
.template-option { display: flex; min-width: 0; flex-direction: column; gap: 8px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: transparent; text-align: left; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.template-option:hover { border-color: #aeb0a7; background: #fffefa; }
.template-option[aria-pressed="true"], .template-option[aria-selected="true"], .template-option.active { border-color: var(--blue); background: white; box-shadow: 0 0 0 1px var(--blue); }
.template-sample, .template-preview, .template-option .sample { display: block; width: 100%; aspect-ratio: 1.12; overflow: hidden; border: 1px solid rgb(31 35 31 / 8%); border-radius: 3px; background: #3158e8; }
.template-option[data-template="signal"] .template-sample, .template-option[data-template="signal"] .template-preview, .template-option[data-template="signal"] .sample { background: linear-gradient(148deg, #3158e8 0 65%, #e7f08b 65%); }
.template-option[data-template="after-hours"] .template-sample, .template-option[data-template="after-hours"] .template-preview, .template-option[data-template="after-hours"] .sample { background: linear-gradient(155deg, #f0e9d9 0 71%, #d4583b 71%); }
.template-option[data-template="keepsake"] .template-sample, .template-option[data-template="keepsake"] .template-preview, .template-option[data-template="keepsake"] .sample { background: linear-gradient(140deg, #e7e4d8 0 45%, #75826b 45% 72%, #bd684a 72%); }
.template-option .template-name, .template-option strong { display: block; overflow: hidden; color: #4c4f49; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.template-option[aria-pressed="true"] strong, .template-option.active strong { color: var(--blue); }
.format-options, .format-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: #eeede7; }
.format-options button, .format-switch button, button[data-format] { min-height: 29px; padding: 0 11px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #74766f; font-size: 10px; font-weight: 700; }
.format-options button[aria-pressed="true"], .format-switch button[aria-pressed="true"], .format-options button.active, .format-switch button.active, button[data-format].active { border-color: #e0e0d8; background: white; color: var(--ink); box-shadow: 0 1px 2px rgb(25 29 23 / 7%); }

.preview-toolbar { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.live-label, .preview-toolbar .live-label { display: inline-flex; align-items: center; gap: 8px; color: #5e615b; font-size: 11px; font-weight: 700; }
.live-label::before { width: 6px; height: 6px; border-radius: 50%; background: #6aae7b; content: ""; box-shadow: 0 0 0 3px rgb(106 174 123 / 12%); }
.preview-stage { position: relative; display: grid; min-height: 360px; place-items: center; overflow: hidden; padding: clamp(20px, 3.3vw, 44px); border: 1px solid #e0dfd7; border-radius: 7px; background-color: #efeee9; background-image: radial-gradient(#d8d7cf .7px, transparent .7px); background-size: 13px 13px; }
#preview, canvas#preview { display: block; width: auto; max-width: 100%; max-height: min(72vh, 820px); height: auto; aspect-ratio: 4 / 5; object-fit: contain; border: 1px solid rgb(29 32 29 / 10%); background: #3158e8; box-shadow: var(--shadow); transition: aspect-ratio .2s ease, opacity .15s ease; }
.preview-stage[data-format="story"] #preview, .preview-stage.story #preview, .preview-stage[data-format="story"] canvas#preview { aspect-ratio: 9 / 16; }
.preview-stage.is-rendering #preview { opacity: .72; }
.preview-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.preview-actions #download { min-width: 142px; }
.preview-caption { max-width: 590px; margin: 12px 0 0; color: #82847c; font-size: 10px; line-height: 1.55; }
#quick-templates { margin-top: 27px; padding-top: 18px; border-top: 1px solid var(--line); }
#quick-templates > p, #quick-templates .quick-template-label { margin: 0 0 11px; color: #666962; font-size: 10px; font-weight: 700; }
#quick-templates .template-options, #quick-templates .quick-template-row { display: flex; gap: 10px; }
#quick-templates .template-option { width: 95px; }
.mobile-edit-link, .edit-jump, a[href="#content-panel"] { display: none; }
.site-footer, footer { display: flex; max-width: 1356px; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 18px 0 28px; border-top: 1px solid var(--line); color: #8a8c84; font-size: 10px; }
.site-footer a, footer a { color: #777a73; text-decoration: none; }
.site-footer a:hover, footer a:hover { color: var(--blue); }

.toast, #toast { position: fixed; z-index: 30; right: 24px; bottom: 24px; max-width: min(380px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid #343832; border-radius: 5px; background: #292c27; color: white; box-shadow: 0 8px 24px rgb(20 22 20 / 20%); font-size: 12px; line-height: 1.4; }
dialog { width: min(500px, calc(100vw - 32px)); max-height: min(80vh, 700px); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 80px rgb(0 0 0 / 24%); }
dialog::backdrop { background: rgb(23 26 23 / 45%); backdrop-filter: blur(2px); }
dialog .dialog-content, dialog form, dialog > div { padding: 23px; }
dialog h2, dialog h3 { margin: 0 0 11px; font: 400 25px var(--serif); letter-spacing: -.6px; }
dialog p { color: #686b64; font-size: 12px; line-height: 1.6; }
dialog textarea { min-height: 180px; margin: 10px 0; font: 11px var(--mono); }
dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

@media (min-width: 1450px) { .site-header { padding-right: 0; padding-left: 0; } }
@media (max-width: 1000px) {
  .site-header { padding-right: 28px; padding-left: 28px; }
  main, .page-shell { width: calc(100% - 56px); }
  .studio-grid { grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); gap: 32px; }
  .preview-stage { min-height: 320px; padding: 24px; }
  #preview, canvas#preview { max-height: 68vh; }
}
@media (max-width: 760px) {
  .site-header { height: 58px; padding: 0 20px; }
  .brand, .site-header .brand, .brand-lockup { font-size: 20px; }
  .site-nav { gap: 15px; }
  .site-nav a, .site-nav button { font-size: 11px; }
  main, .page-shell { width: calc(100% - 40px); }
  .page-heading { padding: 27px 0 20px; }
  .page-heading h1 { font-size: 34px; }
  .page-heading .subheading { font-size: 13px; }
  .category-tabs { width: 100%; justify-content: space-between; margin-bottom: 16px; }
  .category-tabs a, .category-tabs button { flex: 1; min-width: 0; padding: 0 6px; font-size: 11px; }
  .studio-grid { display: flex; flex-direction: column; gap: 28px; padding-bottom: 38px; }
  .preview-panel { order: -1; width: 100%; }
  .editor-panel { order: 1; width: 100%; }
  .preview-toolbar { min-height: 37px; margin-bottom: 8px; }
  .preview-stage { min-height: 0; padding: 17px; }
  #preview, canvas#preview { max-height: min(62vh, 650px); }
  .preview-actions { margin-top: 10px; }
  .preview-actions #download { flex: 1; }
  .mobile-edit-link, .edit-jump, a[href="#content-panel"] { display: inline-flex; min-height: 33px; align-items: center; justify-content: center; gap: 6px; margin-left: auto; padding: 0 10px; border: 1px solid #d7d9d1; border-radius: 4px; background: var(--white); color: var(--blue); text-decoration: none; font-size: 10px; font-weight: 700; }
  .panel-heading { margin-top: 2px; }
  .editor-tabs { margin-bottom: 17px; }
  .site-footer, footer { width: calc(100% - 40px); align-items: flex-start; padding-top: 15px; }
}
@media (max-width: 480px) {
  .site-header { padding: 0 16px; }
  .site-nav { gap: 11px; }
  .site-nav a, .site-nav button { font-size: 10px; }
  main, .page-shell { width: calc(100% - 32px); }
  .page-heading { padding-top: 23px; }
  .page-heading h1 { font-size: 31px; }
  .category-tabs { gap: 2px; padding: 3px; }
  .category-tabs a, .category-tabs button { min-height: 32px; font-size: 10px; }
  .studio-grid { gap: 24px; }
  .preview-stage { padding: 13px; }
  #preview, canvas#preview { max-height: min(56vh, 560px); }
  .field-row { grid-template-columns: minmax(0, 1fr) 88px; gap: 8px; }
  .item-card { grid-template-columns: 50px minmax(0, 1fr) 24px; gap: 8px; padding: 8px; }
  .item-thumb, .item-image, .upload-thumb, .item-card .thumb { width: 50px; height: 50px; }
  .template-options { gap: 6px; }
  .template-option { padding: 5px; gap: 6px; }
  .preview-actions { gap: 6px; }
  .preview-actions button { padding: 0 9px; }
  .site-footer, footer { width: calc(100% - 32px); flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Polished against the shipped editor markup. */
main { width: min(1180px, calc(100% - 80px)); }
.site-header { max-width: 1260px; }
.brand { gap: 0; font-size: 23px; letter-spacing: -1.1px; }
.brand-symbol {
  display: inline-grid; width: 29px; height: 29px; place-items: center; margin-right: 10px;
  border-radius: 50%; background: var(--blue); color: white; font: italic 700 20px var(--serif);
}
.brand-dot { margin-left: 5px; color: var(--blue); font: 13px var(--sans); }
.header-note { margin-left: auto; margin-right: 30px; color: #85877f; font: italic 12px var(--serif); }
.site-header > .text-button { min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; color: #555851; }
.page-heading { padding-top: 41px; }
.page-heading h1 em, .how-it-works h2 em, dialog h2 em { color: var(--blue); font-weight: 400; }
.tiny-star { margin-right: 5px; color: var(--blue); }
.category-tabs { margin-bottom: 21px; }
.category-tabs a.active { border-color: #e0e0d8; background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgb(25 29 23 / 5%); }
.studio-grid { grid-template-columns: minmax(365px, 420px) minmax(0, 1fr); gap: clamp(38px, 6vw, 76px); }
.section-kicker { display: block; margin-bottom: 5px; color: #8a8c83; font: 700 9px var(--mono); letter-spacing: 1.25px; }
.panel-heading { min-height: 51px; margin-bottom: 7px; }
.panel-heading h2 { font: 400 22px var(--serif); letter-spacing: -.55px; }
.editor-tabs { gap: 23px; }
.field-row { grid-template-columns: minmax(0,1fr) 93px; gap: 10px; }
.field-row label { margin: 0; color: #555851; font-size: 10px; }
.field-row input { display: block; margin-top: 6px; }
input:not([type]), input[type="text"], input[type="number"] { min-height: 38px; }
.field-label { margin: 13px 0 6px; color: #555851; font-size: 10px; }
.optional { margin-left: 4px; color: #a0a198; font-size: 9px; font-weight: 400; }
#note { min-height: 57px; }
.suggestion-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.suggestion {
  min-height: 24px; padding: 0 8px; border: 1px solid #e2e2db; border-radius: 20px;
  background: transparent; color: #777a73; font-size: 9px; transition: all .15s ease;
}
.suggestion:hover { border-color: #bbc5f2; background: var(--blue-wash); color: var(--blue); }
.items-heading { align-items: center; margin-top: 23px; padding-top: 15px; }
.items-heading h3 { font-size: 12px; }
.items-heading p { margin-top: 4px; font-size: 10px; }
.items-heading #paste-list { min-height: 29px; padding: 0 7px; font-size: 10px; }
#items-list { gap: 8px; }
.item-card {
  display: block; padding: 0; overflow: hidden; border-radius: 6px;
  background: rgb(255 254 250 / 75%);
}
.item-card-top { display: flex; min-height: 29px; align-items: center; gap: 8px; padding: 3px 9px; border-bottom: 1px solid #eeede7; }
.item-number { color: var(--blue); font: 700 9px var(--mono); letter-spacing: .4px; }
.item-type { color: #a1a299; font: 700 8px var(--mono); letter-spacing: .8px; }
.item-controls { display: flex; grid-template-columns: none; gap: 1px; margin-left: auto; }
.item-controls button, .move-up, .move-down, .remove-item { width: 23px; height: 22px; font-size: 12px; }
.item-main { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: start; gap: 9px; padding: 9px; }
.item-thumb, .item-image, .upload-thumb, .item-card .thumb { width: 54px; height: 54px; }
.item-thumb.portrait { height: 68px; }
.cover-placeholder { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(145deg,#e9eaff,#d9def9 60%,#eee9da); color: #626fca; font: 700 15px var(--serif); }
.cover-placeholder small { color: #7c80a8; font: 8px var(--sans); }
.item-fields { gap: 5px; }
.item-fields > input { min-height: 30px; padding: 6px 8px; font-size: 10px; }
.item-meta { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 5px; }
.item-meta select { min-height: 29px; padding: 5px 24px 5px 7px; font-size: 9px; background-position: right 7px center; }
.crop-row { display: flex; align-items: center; gap: 10px; padding: 1px 10px 8px 72px; }
.crop-row label { display: flex; flex: 1; align-items: center; gap: 8px; color: #777a73; font-size: 9px; }
.crop-row input[type="range"] { width: 100%; height: 15px; accent-color: var(--blue); }
.crop-row .remove-image { min-height: 25px; font-size: 9px; }
.item-card .item-controls button:disabled { opacity: .28; }
#add-item.add-item { width: 100%; min-height: 37px; margin-top: 9px; border-style: dashed; background: transparent; color: #666a61; box-shadow: none; }
#add-item.add-item:hover { border-color: var(--blue); background: var(--blue-wash); color: var(--blue); }
.bulk-upload.photos-only { width: 100%; flex-direction: column; gap: 3px; margin-bottom: 10px; padding: 12px; border-color: #c8c9c1; }
.bulk-upload span { font-size: 11px; }
.bulk-upload small { color: #8a8c83; font-size: 9px; font-weight: 400; }
.editor-foot { gap: 5px; font-size: 9px; }
.save-indicator { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #70a77a; }
.format-options { display: flex; width: 100%; margin-top: 7px; }
.format-options button { display: flex; flex: 1; min-height: 48px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 5px 11px; }
.format-options button b { color: var(--ink); font-size: 11px; }
.format-options button small { color: #868880; font-size: 9px; }
.format-options button[aria-pressed="true"] b, .format-options button.selected b { color: var(--blue); }
.style-intro { margin: 2px 0 14px; }
.style-intro h3 { margin: 0 0 5px; font: 400 20px var(--serif); }
.style-intro p, .style-footnote { margin: 0; color: #82847c; font-size: 10px; line-height: 1.5; }
.template-options { grid-template-columns: 1fr; gap: 7px; margin: 0 0 20px; }
.template-option { display: grid; grid-template-columns: 69px minmax(0,1fr) 16px; align-items: center; gap: 10px; padding: 6px; border-radius: 5px; }
.template-art { position: relative; display: flex; width: 69px; height: 57px; overflow: hidden; flex-direction: column; justify-content: center; padding: 6px; border-radius: 3px; }
.template-art b { font: 700 11px/1.02 var(--sans); letter-spacing: -.5px; }
.template-art em { font: italic 12px var(--serif); }
.template-art i { margin-top: 4px; font: 6px var(--mono); font-style: normal; letter-spacing: .3px; }
.signal-art { background: linear-gradient(145deg,#3158e8 0 75%,#e7f08b 75%); color: white; }
.signal-art i { color: #e7f08b; }
.hours-art { background: linear-gradient(150deg,#eee7d8 0 75%,#d4583b 75%); color: #322e29; }
.hours-art i { color: #9c5442; }
.keepsake-art { background: linear-gradient(145deg,#e9e4d5 0 50%,#75826b 50% 79%,#bd684a 79%); color: #3d443a; }
.keepsake-art i { color: #52604d; }
.template-option > span:nth-child(2) { min-width: 0; }
.template-option strong { margin-bottom: 4px; font-size: 11px; }
.template-option small { display: block; color: #81837c; font-size: 9px; line-height: 1.35; }
.template-option.selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.template-check { color: var(--blue); font-size: 12px; opacity: 0; }
.template-option.selected .template-check { opacity: 1; }
.style-footnote { margin-top: 10px; }
.preview-panel { display: flex; flex-direction: column; align-items: center; }
.preview-toolbar, .preview-stage, .preview-actions, .preview-caption, .quick-templates, .mobile-edit-link { width: 100%; max-width: 510px; }
.preview-toolbar { min-height: 39px; }
.live-label i { width: 6px; height: 6px; border-radius: 50%; background: #6aae7b; box-shadow: 0 0 0 3px rgb(106 174 123 / 12%); }
.live-label::before { display: none; }
.format-switch button { display: inline-flex; align-items: center; gap: 5px; }
.format-switch button span { color: #999b93; font-size: 9px; }
.format-switch button.selected { border-color: #e0e0d8; background: white; color: var(--ink); box-shadow: 0 1px 2px rgb(25 29 23 / 7%); }
.preview-stage { min-height: 0; padding: 22px; border-radius: 5px; background-color: #efeee9; }
#preview, canvas#preview { width: min(100%, 440px); max-height: min(72vh, 690px); }
.preview-stage.story-format #preview { width: auto; max-width: 100%; max-height: min(74vh, 760px); }
.quick-templates { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.quick-templates button { display: inline-flex; min-height: 29px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #777a73; font-size: 9px; }
.quick-templates button:hover, .quick-templates button.selected { border-color: #d9dacf; background: #fffefa; color: var(--ink); }
.swatch { width: 10px; height: 10px; border-radius: 2px; }
.signal-swatch { background: linear-gradient(135deg,#3158e8 65%,#e7f08b 65%); }
.hours-swatch { background: linear-gradient(135deg,#eee7d8 70%,#d4583b 70%); }
.keepsake-swatch { background: linear-gradient(135deg,#e9e4d5 45%,#75826b 45% 75%,#bd684a 75%); }
.preview-actions { justify-content: center; margin-top: 10px; }
.preview-actions .primary-button { min-width: 162px; }
.preview-actions .secondary-button { background: transparent; }
.preview-caption { margin: 8px 0 0; text-align: center; }
.mobile-edit-link { display: none; }

.how-it-works { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9%; margin: 5px 0 0; padding: 53px 0 55px; border-top: 1px solid var(--line); }
.how-it-works h2 { margin: 9px 0 0; font: 400 35px/1.02 var(--serif); letter-spacing: -1px; }
.how-it-works ol { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.how-it-works li { display: grid; grid-template-columns: 31px 1fr; gap: 12px; }
.how-it-works li > span { padding-top: 2px; color: var(--blue); font: 700 10px var(--mono); }
.how-it-works h3 { margin: 0 0 4px; font-size: 12px; }
.how-it-works p { max-width: 450px; margin: 0; color: #7b7d76; font-size: 11px; line-height: 1.55; }
.page-info { max-width: 760px; margin: 0 auto; padding: 34px 0 51px; border-top: 1px solid var(--line); }
.page-info h2 { margin: 0 0 10px; font: 400 24px var(--serif); }
.page-info > p, .page-info details p { color: #767971; font-size: 11px; line-height: 1.65; }
.page-info details { border-top: 1px solid #e4e3dc; }
.page-info details:last-child { border-bottom: 1px solid #e4e3dc; }
.page-info summary { padding: 13px 0; color: #484b45; cursor: pointer; font-size: 11px; font-weight: 600; list-style-position: inside; }
.page-info details p { margin: -2px 0 14px 17px; }
.site-footer { max-width: 1180px; }
.site-footer .brand { font-size: 17px; }
.site-footer .brand-dot { font-size: 11px; }
.site-footer > div { display: flex; gap: 14px; }
.site-footer .text-button { padding: 0; border: 0; background: none; color: #777a73; font-size: 10px; }
.site-footer .text-button:hover { color: var(--blue); }
#toast { visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
#toast.visible { visibility: visible; opacity: 1; transform: none; }
dialog { position: relative; padding: 26px; }
dialog form[method="dialog"] { position: absolute; top: 10px; right: 10px; padding: 0; }
.dialog-close { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; color: #686b64; font-size: 18px; }
dialog .section-kicker { margin: 0 30px 9px 0; }
dialog h2 { margin: 0 0 10px; font: 400 27px var(--serif); }
dialog p { margin: 0 0 13px; }
dialog p small { color: #90928a; font-size: 10px; }
dialog .field-label { margin: 15px 0 7px; }
dialog textarea { min-height: 140px; }
dialog .dialog-help { color: #8b8d85; font-size: 10px; }
dialog .primary-button { min-height: 37px; padding: 0 14px; border: 1px solid var(--blue); border-radius: 5px; background: var(--blue); color: white; font-size: 11px; font-weight: 700; }
dialog #info-dialog-content h2 { margin-top: 0; }
dialog #info-dialog-content textarea { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  main { width: min(100% - 48px, 720px); }
  .studio-grid { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); gap: 28px; }
  .preview-stage { padding: 16px; }
}
@media (max-width: 700px) {
  .site-header { height: 57px; padding: 0 18px; }
  .header-note { display: none; }
  main { width: calc(100% - 36px); }
  .page-heading { padding: 27px 0 18px; }
  .page-heading h1 { font-size: 33px; }
  .page-heading .subheading { max-width: 430px; margin-top: 7px; font-size: 12px; }
  .category-tabs { width: 100%; gap: 2px; margin-bottom: 15px; padding: 3px; }
  .category-tabs a { flex: 1; min-width: 0; padding: 0 5px; font-size: 10px; }
  .studio-grid { display: flex; flex-direction: column; gap: 24px; padding-bottom: 31px; }
  .preview-panel { order: 0; width: 100%; }
  .editor-panel { order: 1; width: 100%; }
  .preview-toolbar { min-height: 32px; margin-bottom: 7px; }
  .preview-stage { padding: 14px; }
  #preview, canvas#preview { width: min(100%, 390px); max-height: min(59vh, 580px); }
  .preview-stage.story-format #preview { width: auto; max-height: min(61vh, 620px); }
  .quick-templates { margin-top: 9px; }
  .preview-actions { margin-top: 8px; }
  .preview-actions button { min-height: 35px; }
  .preview-actions .primary-button { flex: 1; min-width: 0; }
  .mobile-edit-link { display: flex; justify-content: center; margin-top: 8px; color: var(--blue); text-decoration: none; font-size: 10px; font-weight: 700; }
  .how-it-works { grid-template-columns: 1fr; gap: 25px; padding: 35px 0; }
  .how-it-works h2 { font-size: 30px; }
  .how-it-works ol { gap: 16px; }
  .page-info { padding: 27px 0 36px; }
  .site-footer { width: calc(100% - 36px); flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 420px) {
  .site-header { padding: 0 14px; }
  .brand { font-size: 21px; }
  .site-header > .text-button { padding: 0 8px; font-size: 10px; }
  main { width: calc(100% - 28px); }
  .page-heading h1 { font-size: 30px; }
  .category-tabs a { gap: 4px; font-size: 9px; }
  .field-row { grid-template-columns: minmax(0,1fr) 78px; }
  .item-main { grid-template-columns: 47px minmax(0,1fr); gap: 7px; padding: 8px; }
  .item-thumb { width: 47px; height: 50px; }
  .item-meta { grid-template-columns: minmax(0,1fr) 78px; }
  .item-meta select { font-size: 8px; }
  .crop-row { padding-left: 62px; }
  .quick-templates { gap: 2px; }
  .quick-templates button { padding: 0 5px; font-size: 8px; }
  .preview-actions { gap: 5px; }
  .preview-actions button { padding: 0 8px; font-size: 10px; }
}