/* Happy Hues 14: bright paper, deep ink, sunshine yellow and soft mint. */
:root {
  color-scheme: light;
  --paper: #fffffe;
  --paper-deep: #e3f6f5;
  --white: #ffffff;
  --ink: #272343;
  --paragraph: #2d334a;
  --muted: #596175;
  --line: #dbe8e8;
  --line-dark: #b9ced1;
  --blue: #ffd803;
  --blue-dark: #e8c400;
  --blue-wash: #e3f6f5;
  --acid: #bae8e8;
  --shadow: 0 20px 56px rgb(39 35 67 / 10%), 0 2px 8px rgb(39 35 67 / 6%);
}
html, body { background: var(--paper); color: var(--ink); }
body { background-image: radial-gradient(ellipse at 74% 0%, rgb(186 232 232 / 28%), transparent 43%); }
.site-header { max-width: 1240px; height: 78px; border-color: var(--line); }
.brand, .site-header .brand, .site-footer .brand { color: var(--ink); font-size: 26px; font-weight: 400; letter-spacing: -1px; }
.brand-symbol { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--blue); color: var(--ink); font: italic 27px Georgia, serif; line-height: 1; }
.brand-dot { align-self: flex-start; margin: 2px 0 0 5px; color: #438184; font-size: 15px; }
.header-note { color: #586075; font-size: 13px; }
main { width: min(1160px, calc(100% - 72px)); }
.page-heading { padding: 40px 0 28px; }
.page-heading h1 { font-size: clamp(34px, 4.2vw, 57px); letter-spacing: -1.9px; line-height: 1.06; color: var(--ink); }
.page-heading h1 em { color: #39777a; font-weight: 400; }
.eyebrow, .page-heading .eyebrow { color: #39777a; font-size: 10px; letter-spacing: 2px; margin-bottom: 15px; }
.tiny-star { color: #39777a; }
.page-heading .subheading { color: var(--paragraph); font-size: 14px; margin-top: 14px; }
.category-tabs { background: #f4fbfa; border-color: var(--line); border-radius: 30px; padding: 5px; margin-bottom: 28px; gap: 4px; }
.category-tabs a { min-height: 39px; padding: 0 20px; border-radius: 22px; color: #525c70; font-size: 13px; }
.category-tabs a span { font-size: 17px; }
.category-tabs a.active, .category-tabs [aria-current="page"] { background: var(--blue); border-color: var(--blue); color: var(--ink); box-shadow: none; }
.category-tabs a:hover { color: var(--ink); }
.category-tabs a.active:hover { color: var(--ink); }
.studio-grid { grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); gap: clamp(32px, 7vw, 90px); padding-bottom: 65px; }
.editor-panel { background: transparent; }
.panel-heading { margin-bottom: 14px; }
.panel-heading h2 { color: var(--ink); font-size: 19px; font-weight: 500; }
.section-kicker { margin-bottom: 8px; color: #526b76; font-size: 9px; letter-spacing: 1.5px; }
.text-button, .site-header > .text-button, #reset-draft, #paste-list { background: transparent; border-color: var(--line-dark); color: #455069; font-size: 12px; }
.text-button:hover, .site-header > .text-button:hover, #reset-draft:hover, #paste-list:hover { background: var(--blue-wash); color: var(--ink); border-color: #7ababc; }
.editor-tabs { gap: 28px; margin-bottom: 22px; border-color: var(--line); }
.editor-tabs button { min-height: 40px; color: #5d667a; font-size: 13px; }
.editor-tabs button[aria-selected="true"] { color: var(--ink); }
.editor-tabs button[aria-selected="true"]::after { background: #39777a; }
.field-label, .field-row label { color: var(--paragraph); font-size: 12px; font-weight: 500; letter-spacing: 0; }
input:not([type]), input[type="text"], input[type="number"], textarea, select, .text-input {
  display: block; width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px;
  border: 1px solid #cbd8dc; border-radius: 6px; background: #fff; color: var(--ink);
  font-size: 14px; line-height: 1.4;
}
input:not([type]):hover, input[type="text"]:hover, textarea:hover, select:hover { border-color: #84bfc1; }
input:not([type]):focus, input[type="text"]:focus, textarea:focus, select:focus { border-color: #438184; outline: 0; box-shadow: 0 0 0 3px rgb(67 129 132 / 16%); }
input::placeholder, textarea::placeholder { color: #737b8b; }
.field-row { grid-template-columns: 1fr 94px; gap: 12px; }
.field-row label { min-width: 0; }
.item-meta:has(select:only-child) { grid-template-columns: minmax(0,1fr); }
.field-label { margin-top: 17px; }
.field-label input, .field-row input, .field-label textarea { margin-top: 8px; }
.optional { color: #6b7485; font-size: 11px; }
.suggestion-row { gap: 7px; margin-top: 10px; }
.suggestion { min-height: 29px; padding: 0 10px; border: 1px solid #c9dfe0; background: #f4fbfa; color: #455069; font-size: 11px; }
.suggestion:hover { border-color: #74b6b8; background: var(--paper-deep); color: var(--ink); }
.items-heading { align-items: center; margin-top: 26px; padding-top: 23px; border-color: var(--line); }
.items-heading h3 { margin-bottom: 6px; color: var(--ink); font-size: 14px; }
.items-heading p { color: #515b70; font-size: 11px; line-height: 1.45; }
#items-list { gap: 12px; }
.item-card { border-color: #e1ebeb; border-radius: 9px; background: #fbfefe; box-shadow: 0 5px 15px rgb(39 35 67 / 5%); }
.item-card:hover { border-color: #9fcfd0; background: #f7fdfc; }
.item-card-top { min-height: 34px; padding: 5px 12px; border-color: #e5eeee; }
.item-number { color: #426f77; font-size: 11px; }
.item-type { color: #667386; font-size: 9px; }
.item-controls { display: flex; gap: 3px; }
.item-controls button { width: 27px; height: 27px; color: #566075; font-size: 16px; }
.item-controls button:hover { border-color: #b5d7d8; background: var(--paper-deep); color: var(--ink); }
.item-controls button:disabled { opacity: .35; }
.item-main { grid-template-columns: 58px minmax(0,1fr); gap: 12px; padding: 12px; }
.item-thumb { width: 58px; height: 70px; border-color: #cbdede; border-radius: 4px; background: #e3f6f5; }
.item-thumb.portrait { height: 86px; }
.cover-placeholder { background: linear-gradient(145deg, #d7efef, #eaf6f4); color: #39777a; font-size: 22px; }
.cover-placeholder small { color: #536f79; font-size: 9px; }
.item-fields { gap: 7px; }
.item-fields input, .item-fields select { min-height: 34px; padding: 7px 9px; font-size: 12px; }
.item-fields input.item-title { font-size: 13px; font-weight: 500; }
.item-meta { gap: 6px; }
.item-meta select { color: #49556a; font-size: 11px; }
.crop-row { gap: 12px; padding: 0 12px 12px 82px; }
.crop-row label { color: #566075; font-size: 11px; }
.crop-row input { accent-color: #438184; }
.crop-row .text-button { font-size: 10px; }
#add-item.add-item, .bulk-upload.photos-only { min-height: 42px; border-color: #9fc7c9; border-radius: 7px; color: #455069; font-size: 12px; }
#add-item.add-item { background: #fff; }
#add-item.add-item:hover, .bulk-upload.photos-only:hover { border-color: #438184; background: var(--paper-deep); color: var(--ink); }
.bulk-upload small { color: #5d687c; font-size: 11px; }
.editor-foot { gap: 7px; color: #5d687c; font-size: 10px; }
.save-indicator { background: #438184; }
.style-intro h3 { color: var(--ink); font-size: 17px; font-weight: 400; }
.style-intro p, .style-footnote { color: #566075; font-size: 12px; }
.template-option { border-color: #d8e8e8; border-radius: 8px; background: #fbfefe; }
.template-option:hover { border-color: #91c5c7; background: #f3fbfa; }
.template-option.selected { border-color: #438184; background: #eef9f8; box-shadow: 0 0 0 1px #438184; }
.template-option strong, .template-option[aria-pressed="true"] strong, .template-option.active strong { color: var(--ink); font-size: 13px; }
.template-option small { color: #566075; font-size: 11px; }
.template-check { color: #39777a; }
/* These samples preview the artwork palette and stay independent of the page chrome. */
.signal-art { background: linear-gradient(145deg, #4f284c 0 75%, #ffd4ac 75%); color: #fff6ef; }
.signal-art i { color: #ffd4ac; }
.signal-swatch { background: linear-gradient(135deg, #4f284c 65%, #ffd4ac 65%); }
.format-options, .format-switch { border-color: var(--line-dark); border-radius: 6px; background: #f4fbfa; }
.format-options button, .format-switch button { min-height: 32px; color: #4f5a70; font-size: 11px; }
.format-options button small, .format-switch button span { color: #667386; font-size: 10px; }
.format-options button.selected, .format-switch button.selected, .format-options button[aria-pressed="true"], .format-switch button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--ink); box-shadow: none; }
.format-switch button.selected span { color: #3d3a45; }
.format-options button.selected b, .format-options button[aria-pressed="true"] b { color: #272343; }
.preview-panel { position: sticky; top: 22px; align-self: start; }
.preview-toolbar { margin-bottom: 10px; }
.live-label, .preview-toolbar .live-label { color: #4e5b70; font-size: 10px; letter-spacing: 1.3px; }
.live-label i { background: #438184; box-shadow: 0 0 0 3px rgb(67 129 132 / 15%); }
.preview-stage { border: 1px solid #cfe1e1; border-radius: 12px; padding: 24px; background-color: #e3f6f5; background-image: radial-gradient(rgb(107 166 168 / 40%) .6px, transparent .6px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%); }
#preview, canvas#preview { width: auto; max-width: 100%; max-height: 660px; aspect-ratio: auto; border: 0; background: #4f284c; box-shadow: 0 16px 36px rgb(39 35 67 / 18%); }
.preview-stage.story-format #preview { width: auto; max-height: 720px; aspect-ratio: auto; }
.quick-templates { gap: 8px; margin-top: 17px; }
.quick-templates button { min-height: 33px; padding: 0 10px; border-radius: 5px; color: #505b70; font-size: 11px; }
.quick-templates button:hover, .quick-templates button.selected { border-color: #b5d8d8; background: var(--paper-deep); color: var(--ink); }
.swatch { width: 13px; height: 13px; border: 1px solid rgb(39 35 67 / 12%); }
.preview-actions { gap: 10px; margin-top: 15px; }
#download, .primary-button { min-height: 45px; padding: 0 25px; border: 1px solid var(--blue); border-radius: 7px; background: var(--blue); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: 0 5px 18px rgb(39 35 67 / 10%); }
#download:hover, .primary-button:hover { transform: translateY(-1px); border-color: var(--blue-dark); background: var(--blue-dark); color: var(--ink); }
#copy-caption { min-height: 45px; padding: 0 17px; border: 1px solid var(--line-dark); border-radius: 7px; background: #fff; color: #3e4960; font-size: 12px; }
#copy-caption:hover { border-color: #85bfc1; background: var(--paper-deep); color: var(--ink); }
.preview-caption { margin-top: 12px; color: #566075; font-size: 10px; }
.how-it-works { gap: 10%; padding: 65px 0; border-color: var(--line); }
.how-it-works h2 { font-size: 44px; line-height: 1.08; color: var(--ink); }
.how-it-works h2 em { color: #39777a; }
.how-it-works h3 { margin-bottom: 8px; color: var(--ink); font-size: 15px; font-weight: 500; }
.how-it-works p, .page-info > p, .page-info details p { color: var(--paragraph); font-size: 13px; line-height: 1.7; }
.how-it-works li > span { color: #39777a; font-size: 12px; }
.page-info h2 { color: var(--ink); font-size: 28px; }
.page-info summary { padding: 17px 0; color: var(--ink); font-size: 13px; }
.page-info details, .page-info details:last-child { border-color: var(--line); }
.page-info a { color: #326f75; text-underline-offset: 3px; }
.site-footer { width: min(1160px, calc(100% - 72px)); padding: 24px 0 32px; color: #596175; font-size: 11px; }
.site-footer .text-button { color: #455069; font-size: 12px; }
.site-footer .brand { font-size: 23px; }
dialog { border-color: #b6d4d5; background: #fffffe; color: var(--ink); box-shadow: 0 30px 100px rgb(39 35 67 / 22%); }
dialog::backdrop { background: rgb(39 35 67 / 40%); backdrop-filter: blur(4px); }
dialog p, dialog .dialog-help, dialog p small { color: #475168; font-size: 13px; }
.dialog-close { border-color: #c9dddf; background: #f4fbfa; color: var(--ink); }
dialog .primary-button { min-height: 42px; border-color: var(--blue); background: var(--blue); color: var(--ink); font-size: 13px; }
#toast { border-color: #d8b800; background: var(--blue); color: var(--ink); box-shadow: 0 12px 35px rgb(39 35 67 / 18%); font-size: 13px; }
.mobile-edit-link { border-color: var(--line-dark); background: transparent; color: #326f75; }

@media (max-width: 900px) {
  main { width: calc(100% - 48px); }
  .studio-grid { grid-template-columns: minmax(290px,.95fr) minmax(0,1fr); gap: 30px; }
  .preview-stage { padding: 17px; }
  .preview-actions { flex-wrap: wrap; }
  #download, #copy-caption { flex: 1; white-space: nowrap; }
  .page-heading h1 { font-size: 43px; }
}
@media (max-width: 700px) {
  .site-header { height: 65px; padding: 0 20px; }
  .site-header .brand { font-size: 24px; }
  .site-header > .text-button { font-size: 11px; }
  .page-heading { padding: 29px 0 22px; }
  .page-heading h1 { font-size: 37px; line-height: 1.1; }
  .page-heading .subheading { font-size: 13px; line-height: 1.6; }
  .category-tabs { margin-bottom: 22px; }
  .category-tabs a { min-height: 37px; padding: 0 8px; font-size: 12px; }
  .studio-grid { display: flex; flex-direction: column; gap: 34px; }
  .preview-panel { position: static; order: 0; width: 100%; }
  .editor-panel { order: 1; width: 100%; }
  main { width: calc(100% - 36px); }
  #preview, canvas#preview { width: 100%; max-width: 400px; max-height: none; }
  .preview-stage { padding: 16px; }
  .preview-stage.story-format #preview { width: 100%; max-width: 300px; max-height: none; }
  .quick-templates button { padding: 0 8px; font-size: 10px; }
  .mobile-edit-link { min-height: 38px; margin-top: 12px; font-size: 12px; }
  .preview-actions { flex-wrap: nowrap; }
  #download { padding: 0 14px; }
  #copy-caption { padding: 0 12px; }
  .how-it-works { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
  .how-it-works h2 { font-size: 36px; }
  .site-footer { width: calc(100% - 36px); }
  .field-row { grid-template-columns: minmax(0,1fr) 88px; }
  .item-main { grid-template-columns: 52px minmax(0,1fr); gap: 10px; padding: 10px; }
  .item-thumb { width: 52px; }
  .item-meta select { font-size: 10px; }
  .crop-row { padding-left: 72px; }
  .editor-foot { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .page-heading h1 { font-size: 33px; }
  .category-tabs a { font-size: 11px; }
  .category-tabs a span { font-size: 14px; }
  .site-header > .text-button { padding: 0 7px; font-size: 10px; }
  .brand-symbol { width: 27px; height: 27px; font-size: 23px; }
  .quick-templates { gap: 4px; }
  .quick-templates button { padding: 0 5px; }
  .preview-actions { gap: 7px; }
  #download, #copy-caption { font-size: 11px; }
  .item-meta { grid-template-columns: 1fr; }
  .item-meta select { font-size: 11px; }
  .crop-row { padding-left: 10px; }
}