@page {
  size: A4;
  margin: 0;
}

@page cv-standard {
  size: A4;
  margin: 0;
}

@page cv-bleed {
  size: 216mm 303mm;
  margin: 0;
}

:root {
  --ink: #152c33;
  --muted: #5d6b6f;
  --teal: #0f4c55;
  --teal-deep: #0b3940;
  --copper: #c77945;
  --paper: #fbfaf7;
  --line: #d9dfdc;
  --soft: #eef2ef;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #dfe4e2;
  color: var(--ink);
  font-family: "Aptos", "Segoe UI", sans-serif;
  font-size: 10px;
  line-height: 1.36;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

body {
  padding: 24px;
}

.resume {
  page: cv-standard;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 12px 45px rgba(21, 44, 51, .18);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 34mm 1fr 64mm;
  align-items: center;
  min-height: 53mm;
  padding: 10mm 13mm 9mm 15mm;
  color: #fff;
  background: var(--teal);
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72mm;
  height: 2.4mm;
  content: "";
  background: var(--copper);
}

.portrait {
  position: relative;
  width: 29mm;
  height: 29mm;
  overflow: hidden;
  border: 1.2mm solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: var(--teal-deep);
  cursor: grab;
  touch-action: none;
}

.portrait.is-positioning {
  cursor: grabbing;
}

.portrait.is-dragover {
  box-shadow: 0 0 0 1.2mm var(--copper);
}

.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.portrait-add {
  position: absolute;
  z-index: 2;
  right: 1.5mm;
  bottom: 1.5mm;
  display: grid;
  width: 7mm;
  height: 7mm;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 42, 48, .82);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .24);
  font: 600 13pt/1 Arial, sans-serif;
}

.portrait-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(255, 255, 255, .92);
  font-family: Georgia, serif;
  font-size: 22pt;
}

.identity {
  padding-left: 3mm;
}

.eyebrow {
  margin: 0 0 1.6mm;
  color: #d7e6e5;
  font-size: 7.2pt;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.resume-name {
  margin: 0;
  font-family: var(--title-font);
  font-size: 26pt;
  font-weight: 400;
  letter-spacing: 0;
  line-height: .82;
  text-transform: uppercase;
}

.resume-name strong {
  font-weight: 700;
}

.role {
  margin: 3mm 0 0;
  color: #f2d5c2;
  font-size: 10pt;
  font-weight: 650;
  letter-spacing: .2px;
}

.contact {
  display: grid;
  gap: 2.4mm;
  padding-left: 7mm;
  border-left: 1px solid rgba(255, 255, 255, .24);
  font-size: 8.2pt;
  font-style: normal;
}

.contact a,
.contact span {
  color: #fff;
  text-decoration: none;
}

.contact b,
.job-meta b {
  color: var(--copper);
  font-weight: 700;
}

.content {
  display: grid;
  grid-template-columns: 64mm 1fr;
  min-height: 244mm;
}

.sidebar {
  padding: 9mm 7mm 8mm 12mm;
  background: var(--soft);
}

.sidebar section + section {
  margin-top: 6mm;
}

h2 {
  margin: 0 0 3mm;
  color: var(--teal);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11pt;
  line-height: 1.05;
}

.sidebar h2 {
  display: flex;
  align-items: center;
  gap: 2.5mm;
  text-transform: uppercase;
}

.sidebar h2::before {
  flex: 0 0 5mm;
  height: .8mm;
  content: "";
  background: var(--copper);
}

.sidebar p {
  margin: 0 0 2.2mm;
  color: #34484e;
  font-size: 7.4pt;
}

.skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6mm;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skills li {
  display: flex;
  min-height: 8.5mm;
  align-items: center;
  padding: 1.2mm 1.5mm;
  border: 1px solid #c7d3d0;
  color: var(--teal-deep);
  background: rgba(255, 255, 255, .58);
  font-size: 6.25pt;
  font-weight: 650;
  line-height: 1.18;
}

.compact-list {
  display: grid;
  gap: 2.3mm;
}

.compact-list p {
  display: grid;
  grid-template-columns: 10mm 1fr;
  margin: 0;
}

.compact-list time {
  color: var(--copper);
  font-size: 7pt;
  font-weight: 800;
}

.languages p {
  margin-bottom: 1mm;
}

.interests small {
  color: var(--muted);
  font-size: 6.7pt;
}

.experience {
  position: relative;
  padding: 8mm 12mm 7mm 10mm;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 4mm;
  margin-bottom: 4mm;
  padding-bottom: 3mm;
  border-bottom: 1px solid var(--line);
}

.section-heading > span {
  color: var(--copper);
  font-family: Georgia, serif;
  font-size: 24pt;
  font-weight: 700;
  line-height: 1;
}

.section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14pt;
}

.section-heading p {
  margin: 1mm 0 0;
  color: var(--muted);
  font-size: 6.8pt;
  font-weight: 650;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.job {
  position: relative;
  margin-left: 4mm;
  padding: 0 0 3.2mm 7mm;
  border-left: 1px solid #b9c6c3;
}

.job::before {
  position: absolute;
  top: 1.8mm;
  left: -1.65mm;
  width: 2.7mm;
  height: 2.7mm;
  content: "";
  border: .6mm solid var(--paper);
  border-radius: 50%;
  background: var(--copper);
}

.job .date {
  margin-bottom: .5mm;
  color: var(--copper);
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: .4px;
}

.job h3 {
  margin: 0;
  color: var(--teal-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10.3pt;
  line-height: 1.15;
}

.job h3 i {
  color: var(--copper);
  font-weight: 400;
}

.job-meta {
  margin: .7mm 0 1.4mm;
  color: var(--muted);
  font-size: 7.2pt;
  font-weight: 650;
}

.job ul {
  display: grid;
  gap: .8mm;
  margin: 0;
  padding-left: 4mm;
  color: #36494e;
  font-size: 7.25pt;
}

.job li::marker {
  color: var(--copper);
}

.job.concise {
  padding-bottom: 2.8mm;
}

.job.concise h3 {
  display: inline;
  margin-right: 1.5mm;
  font-family: "Aptos", "Segoe UI", sans-serif;
  font-size: 8.2pt;
}

.job.concise p {
  display: inline;
  margin: 0;
  color: #46575b;
  font-size: 7.05pt;
}

.job.last {
  padding-bottom: 3mm;
}

.management-note {
  display: grid;
  grid-template-columns: 26mm 1fr;
  gap: 3mm;
  margin-top: 2mm;
  padding: 3mm 4mm;
  border: 1px solid #c7d3d0;
  border-left: 1.2mm solid var(--copper);
  color: var(--teal-deep);
  background: var(--soft);
  font-size: 7.2pt;
}

.management-note strong {
  color: var(--copper);
  text-transform: uppercase;
}

.management-note span {
  color: #34484e;
}

@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;
    background: var(--paper);
  }

  body {
    padding: 0;
  }

  .resume {
    min-height: 297mm;
    box-shadow: none;
  }
}

@media screen and (max-width: 860px) {
  body {
    padding: 0;
  }

  .resume {
    transform-origin: top left;
  }
}

/* CV editor */
:root {
  --title-font: Georgia, "Times New Roman", serif;
  --body-font: "Aptos", "Segoe UI", sans-serif;
  --ui-ink: #172328;
  --ui-muted: #68777b;
  --ui-line: #d8dfdc;
}

body {
  padding: 0;
  background: #e6ebe8;
  font-family: var(--body-font);
}

.appbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  height: 68px;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid #d4dcda;
  background: rgba(250, 251, 249, .96);
  box-shadow: 0 3px 16px rgba(18, 38, 42, .06);
}

.brand,
.app-actions,
.page-status,
.workspace-topline {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  background: #173f46;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
}

.brand h1,
.brand small {
  display: block;
}

.brand h1 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 14px;
  font-family: var(--body-font);
  line-height: 1.1;
}

.brand small {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 11px;
}

.app-actions {
  gap: 9px;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #bcc9c6;
  color: #23363b;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.button:hover {
  border-color: #728783;
}

.button.primary {
  border-color: #173f46;
  color: #fff;
  background: #173f46;
}

.button.paypal {
  display: inline-flex;
  align-items: center;
  border-color: #0070ba;
  color: #005ea6;
  text-decoration: none;
}

.button.paypal:hover {
  color: #fff;
  background: #0070ba;
}

.studio {
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  min-height: calc(100vh - 68px);
}

.seo-content {
  border-top: 1px solid #ccd7d3;
  color: #314449;
  background: #f7f9f7;
}

.seo-content-inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 54px 0 64px;
}

.seo-intro {
  max-width: 820px;
}

.seo-kicker {
  margin: 0 0 8px;
  color: #ad5f38;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.seo-content h2 {
  margin: 0 0 14px;
  color: #173f46;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.18;
}

.seo-content p {
  margin: 0 0 11px;
  font-size: 14px;
  line-height: 1.65;
}

.seo-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 34px;
  padding: 28px 0;
  border-top: 1px solid #d8e0dd;
  border-bottom: 1px solid #d8e0dd;
}

.seo-features h3 {
  margin: 0 0 7px;
  color: #173f46;
  font-size: 15px;
}

.seo-features p {
  margin: 0;
  color: #596b6e;
  font-size: 12px;
}

.seo-faq {
  max-width: 820px;
  margin-top: 34px;
}

.seo-faq h2 {
  font-size: 21px;
}

.seo-faq details {
  padding: 13px 0;
  border-top: 1px solid #d8e0dd;
}

.seo-faq summary {
  color: #203b41;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.seo-faq details p {
  margin: 9px 0 0;
  color: #596b6e;
  font-size: 12px;
}

.editor {
  z-index: 2;
  padding: 26px 24px 40px;
  border-right: 1px solid #d4dcda;
  background: #f8faf8;
  box-shadow: 8px 0 24px rgba(18, 38, 42, .04);
}

.editor-heading p {
  margin: 0 0 4px;
  color: #b36137;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.editor-heading h2 {
  margin: 0 0 22px;
  color: var(--ui-ink);
  font-family: Georgia, serif;
  font-size: 22px;
  text-transform: none;
}

.editor details,
.editor fieldset {
  margin: 0;
  padding: 17px 0;
  border: 0;
  border-top: 1px solid var(--ui-line);
}

.editor details > summary,
.editor legend {
  color: #273b40;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.editor details > summary {
  cursor: pointer;
  list-style-position: outside;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  padding-top: 15px;
}

.field.full,
.photo-tool.full {
  grid-column: 1 / -1;
}

.field span {
  display: block;
  margin-bottom: 5px;
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 650;
}

.field input {
  width: 100%;
  height: 37px;
  padding: 0 10px;
  border: 1px solid #cad4d1;
  border-radius: 2px;
  outline: 0;
  color: #203238;
  background: #fff;
  font-size: 12px;
}

.field input:focus {
  border-color: #1d6871;
  box-shadow: 0 0 0 2px rgba(29, 104, 113, .1);
}

.photo-tool {
  padding: 10px;
  border: 1px dashed #aebdb9;
  background: #fff;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.photo-tool:hover,
.photo-tool.is-dragover {
  border-color: #1d6871;
  background: #f3f8f6;
}

.photo-tool.is-dragover {
  box-shadow: 0 0 0 3px rgba(29, 104, 113, .12);
}

.photo-tool-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.photo-preview {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: #dce7e3;
}

.photo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.photo-preview > span {
  position: absolute;
  right: -2px;
  bottom: -1px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #174f58;
  font: 600 16px/1 Arial, sans-serif;
}

.photo-instructions strong,
.photo-instructions small {
  display: block;
}

.photo-instructions strong {
  color: #263b40;
  font-size: 11px;
}

.photo-instructions small {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 9px;
}

.photo-adjustments {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 10px;
  align-items: center;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid #e0e7e4;
}

.photo-adjustments label {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  color: #40565a;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.photo-adjustments input {
  width: 100%;
  accent-color: #174f58;
}

.photo-adjustments button {
  height: 27px;
  padding: 0 9px;
  border: 1px solid #bdcbc7;
  border-radius: 2px;
  color: #263b40;
  background: #fff;
  font-size: 9px;
  font-weight: 700;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  border: 1px solid #cbd5d2;
}

.segmented button {
  min-height: 35px;
  padding: 0 4px;
  border: 0;
  border-right: 1px solid #cbd5d2;
  color: #5e6e72;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button.selected {
  color: #fff;
  background: #254f57;
}

.swatches,
.type-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.swatches button,
.type-picker button {
  padding: 6px 3px;
  border: 1px solid transparent;
  color: #56666a;
  background: transparent;
  font-size: 9px;
}

.swatches button.selected,
.type-picker button.selected {
  border-color: #aebdb9;
  background: #fff;
}

.swatches i {
  display: block;
  width: 27px;
  height: 27px;
  margin: 0 auto 5px;
  border: 4px solid #fff;
  border-radius: 50%;
  outline: 1px solid #c5cecc;
  background: var(--swatch);
}

.type-picker {
  grid-template-columns: repeat(3, 1fr);
}

.type-picker b,
.type-picker span {
  display: block;
}

.type-picker b {
  margin-bottom: 2px;
  color: #263c41;
  font-size: 20px;
}

.font-classic {
  font-family: Georgia, serif;
}

.font-modern {
  font-family: "Trebuchet MS", sans-serif;
}

.font-humanist {
  font-family: "Palatino Linotype", serif;
}

.page-status {
  gap: 10px;
  margin-top: 16px;
  padding: 11px;
  color: #496066;
  background: #edf2ef;
  font-size: 10px;
}

.page-status span {
  padding: 3px 5px;
  color: #fff;
  background: #6f827d;
  font-size: 8px;
  font-weight: 800;
}

.page-status.overflow {
  color: #8a3f2f;
  background: #faeae5;
}

.workspace {
  min-width: 0;
  overflow: auto;
  padding: 22px 32px 50px;
  background-color: #dde4e1;
  background-image: linear-gradient(rgba(255, 255, 255, .34) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .34) 1px, transparent 1px);
  background-size: 24px 24px;
}

.workspace-topline {
  width: min(100%, 794px);
  justify-content: space-between;
  margin: 0 auto 12px;
  color: #627176;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.page-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 auto;
}

.resume-page-wrap {
  position: relative;
  flex: 0 0 auto;
}

.page-number {
  position: absolute;
  z-index: 4;
  top: 8px;
  right: 10px;
  padding: 4px 7px;
  border: 1px solid rgba(23, 63, 70, .18);
  color: #52676b;
  background: rgba(255, 255, 255, .9);
  font-size: 9px;
  font-weight: 750;
  pointer-events: none;
}

.resume {
  width: 210mm;
  height: 297mm;
  min-height: 0;
  font-family: var(--body-font);
  transform-origin: top left;
}

.resume-page > .content {
  height: 244mm;
  min-height: 0;
}

.continuation-page > .content {
  height: 297mm;
  min-height: 0;
}

.resume-page .sidebar,
.resume-page .experience {
  min-height: 0;
  overflow: hidden;
}

.continuation-page .sidebar {
  padding-top: 12mm;
}

.continuation-page .experience {
  padding-top: 12mm;
}

.continuation-heading > span {
  font-size: 14pt;
}

[data-flow-section][hidden] {
  display: none !important;
}

.block-controls {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 1mm;
  margin-left: auto;
}

.block-button {
  display: inline-grid;
  width: 5.5mm;
  height: 5.5mm;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(15, 76, 85, .28);
  border-radius: 50%;
  color: var(--teal-deep);
  background: rgba(255, 255, 255, .82);
  font: 800 9pt/1 Arial, sans-serif;
  cursor: pointer;
}

.block-button:hover {
  border-color: var(--copper);
  color: #fff;
  background: var(--copper);
}

.block-button:disabled {
  opacity: .28;
  cursor: not-allowed;
}

.section-heading {
  position: relative;
}

.section-heading .experience-controls {
  align-self: flex-start;
}

.timeline-add {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
}

.timeline-remove {
  position: absolute;
  z-index: 3;
  top: .3mm;
  left: -3.05mm;
  width: 5.5mm;
  height: 5.5mm;
  border-color: var(--paper);
  color: #fff;
  background: var(--copper);
  opacity: 0;
  transform: scale(.75);
  transition: opacity .15s ease, transform .15s ease;
}

.job:hover > .timeline-remove,
.timeline-remove:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.resume h1,
.resume h2,
.resume .job h3 {
  font-family: var(--title-font);
}

.resume [contenteditable="true"] {
  outline: 0;
  cursor: text;
}

.resume [contenteditable="true"]:hover {
  box-shadow: inset 0 -1px rgba(199, 121, 69, .55);
}

.resume [contenteditable="true"]:focus {
  background: rgba(255, 245, 204, .7);
  box-shadow: 0 0 0 1px rgba(199, 121, 69, .45);
}

.resume[data-palette="forest"] {
  --ink: #1e332a;
  --muted: #637068;
  --teal: #315b48;
  --teal-deep: #254538;
  --copper: #c58b3f;
  --paper: #fcfbf6;
  --line: #dce1d9;
  --soft: #eef2ea;
}

.resume[data-palette="graphite"] {
  --ink: #252b2f;
  --muted: #626c72;
  --teal: #30363b;
  --teal-deep: #23282c;
  --copper: #3f86a8;
  --paper: #fdfdfc;
  --line: #d9dddf;
  --soft: #eff1f2;
}

.resume[data-palette="bordeaux"] {
  --ink: #3c2830;
  --muted: #75656a;
  --teal: #6d3041;
  --teal-deep: #542432;
  --copper: #d58a7d;
  --paper: #fffafb;
  --line: #e4dadd;
  --soft: #f5edef;
}

.resume[data-font="modern"] {
  --title-font: "Trebuchet MS", "Segoe UI", sans-serif;
  --body-font: "Trebuchet MS", "Segoe UI", sans-serif;
}

.resume[data-font="humanist"] {
  --title-font: "Palatino Linotype", Palatino, serif;
  --body-font: Calibri, "Segoe UI", sans-serif;
}

.resume[data-font="modern"] h1 {
  font-size: 24pt;
  line-height: .88;
}

.resume[data-model="minimal"] .hero {
  color: var(--ink);
  background: var(--paper);
  border-top: 4mm solid var(--teal);
  border-bottom: 1px solid var(--line);
}

.resume[data-model="minimal"] .hero::after {
  width: 42mm;
  height: 1.2mm;
}

.resume[data-model="minimal"] .portrait {
  border-color: var(--soft);
}

.resume[data-model="minimal"] .eyebrow,
.resume[data-model="minimal"] .role,
.resume[data-model="minimal"] .contact a,
.resume[data-model="minimal"] .contact span {
  color: var(--ink);
}

.resume[data-model="minimal"] .contact {
  border-color: var(--line);
}

.resume[data-model="minimal"] .content {
  grid-template-columns: 68mm 1fr;
}

.resume[data-model="minimal"] .sidebar {
  border-right: 1px solid var(--line);
  background: var(--paper);
}

.resume[data-model="minimal"] .skills li {
  background: var(--soft);
}

.resume[data-model="contrast"] .hero {
  grid-template-columns: 34mm 1fr;
  min-height: 62mm;
  padding-right: 74mm;
}

.resume[data-model="contrast"] .contact {
  position: absolute;
  top: 10mm;
  right: 12mm;
  width: 54mm;
}

.resume[data-model="contrast"] .content {
  grid-template-columns: 70mm 1fr;
  min-height: 235mm;
}

.resume[data-model="contrast"] .sidebar {
  color: #fff;
  background: var(--teal-deep);
}

.resume[data-model="contrast"] .sidebar h2,
.resume[data-model="contrast"] .sidebar p,
.resume[data-model="contrast"] .sidebar time,
.resume[data-model="contrast"] .sidebar small {
  color: #fff;
}

.resume[data-model="contrast"] .skills li {
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.resume[data-model="contrast"] .experience {
  padding-right: 9mm;
  padding-left: 8mm;
}

@media print {
  .appbar,
  .editor,
  .workspace-topline,
  .portrait-add,
  .seo-content {
    display: none !important;
  }

  .studio,
  .workspace,
  .page-stage {
    display: block;
    width: 210mm !important;
    height: auto !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
  }

  .resume {
    width: 210mm;
    height: 297mm;
    min-height: 0;
    box-shadow: none;
    transform: none !important;
  }

  .resume-page-wrap {
    display: block;
    width: 210mm !important;
    height: 297mm !important;
    break-after: page;
    page-break-after: always;
  }

  .resume-page-wrap:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .edit-control {
    display: none !important;
  }

  .resume [contenteditable="true"]:hover,
  .resume [contenteditable="true"]:focus {
    background: transparent;
    box-shadow: none;
  }
}

@media screen and (max-width: 820px) {
  .appbar {
    height: 60px;
    padding: 0 14px;
  }

  .brand small,
  .button.ghost {
    display: none;
  }

  .studio {
    display: block;
  }

  .editor {
    border-right: 0;
    border-bottom: 1px solid #d4dcda;
  }

  .workspace {
    min-height: 720px;
    padding: 20px 12px 40px;
  }

  .seo-content-inner {
    width: min(100% - 30px, 680px);
    padding: 38px 0 46px;
  }

  .seo-content h2 {
    font-size: 22px;
  }

  .seo-features {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* PDF export options */
.export-dialog {
  width: min(calc(100% - 28px), 470px);
  padding: 0;
  border: 0;
  color: #21363b;
  background: #fbfaf7;
  box-shadow: 0 28px 80px rgba(15, 42, 48, .28);
}

.export-dialog::backdrop {
  background: rgba(15, 35, 40, .58);
  backdrop-filter: blur(3px);
}

.export-dialog form {
  padding: 25px;
}

.dialog-heading,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog-heading small {
  color: #b36137;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.dialog-heading h2 {
  margin: 4px 0 0;
  color: #17353c;
  font-size: 20px;
}

.dialog-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  color: #607175;
  background: #eef2ef;
  font-size: 22px;
}

.export-options {
  display: grid;
  gap: 9px;
  margin: 24px 0;
  padding: 0;
  border: 0;
}

.export-options label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid #cad4d1;
  background: #fff;
  cursor: pointer;
}

.export-options label:has(input:checked) {
  border-color: #1d6871;
  box-shadow: inset 3px 0 #1d6871;
}

.export-options input {
  accent-color: #1d6871;
}

.export-options strong,
.export-options small {
  display: block;
}

.export-options strong {
  color: #263c41;
  font-size: 12px;
}

.export-options small {
  margin-top: 2px;
  color: #738185;
  font-size: 9px;
}

.payment-lock {
  margin-bottom: 18px;
  padding: 14px;
  border-left: 3px solid #0070ba;
  background: #eef6fb;
}

.payment-lock[hidden],
.payment-unlocked[hidden] {
  display: none;
}

.payment-lock strong {
  color: #184f72;
  font-size: 11px;
}

.payment-lock p {
  margin: 5px 0 11px;
  color: #58717f;
  font-size: 10px;
}

.payment-lock .button {
  min-height: 34px;
}

.promo-code {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(0, 112, 186, .18);
}

.promo-code > label {
  display: block;
  margin-bottom: 6px;
  color: #184f72;
  font-size: 10px;
  font-weight: 750;
}

.promo-code-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.promo-code-entry input {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #b9ceda;
  border-radius: 2px;
  outline: 0;
  color: #203d4c;
  background: #fff;
  font-size: 12px;
}

.promo-code-entry input:focus {
  border-color: #0070ba;
  box-shadow: 0 0 0 2px rgba(0, 112, 186, .12);
}

.promo-code-message {
  min-height: 13px;
  margin: 6px 0 0 !important;
  color: #9a4338 !important;
  font-weight: 700;
}

.promo-code-hint {
  display: block;
  margin-top: 2px;
  color: #6d6477;
  font-size: 9px;
}

.promo-code-hint[hidden] {
  display: none;
}

.payment-unlocked {
  margin: 0 0 18px;
  padding: 11px;
  color: #2e6646;
  background: #eaf5ed;
  font-size: 10px;
  font-weight: 750;
}

.button.paypal.unlocked {
  border-color: #4d8a68;
  color: #377050;
  background: #edf6ef;
  cursor: default;
}

.dialog-actions {
  justify-content: flex-end;
  gap: 9px;
  padding-top: 17px;
  border-top: 1px solid #dbe1df;
}

.button:disabled {
  border-color: #cbd2d0;
  color: #8c9895;
  background: #e3e7e5;
  cursor: not-allowed;
}

@media print {
  .export-dialog {
    display: none !important;
  }

  body.export-bleed,
  body.export-bleed .studio,
  body.export-bleed .workspace,
  body.export-bleed .page-stage {
    width: 216mm !important;
    height: auto !important;
  }

  body.export-bleed .resume-page-wrap {
    width: 216mm !important;
    height: 303mm !important;
  }

  body.export-bleed .resume-page {
    page: cv-bleed;
    width: 216mm;
    height: 303mm;
    padding: 3mm;
    background: linear-gradient(to bottom, var(--teal) 0 56mm, transparent 56mm), linear-gradient(to right, var(--soft) 0 67mm, var(--paper) 67mm);
  }
}

/* Autosave, zoom and data exchange */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 3px;
  color: #60716e;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.save-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4d8a68;
}

.save-indicator.saving i {
  background: #c77945;
  animation: save-pulse 750ms ease-in-out infinite alternate;
}

.save-indicator.error {
  color: #994936;
}

.save-indicator.error i {
  background: #b85640;
}

@keyframes save-pulse {
  to { opacity: .25; }
}

.zoom-controls {
  display: grid;
  grid-template-columns: 28px 58px 28px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #b8c5c1;
  background: rgba(250, 251, 249, .9);
}

.zoom-controls button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  color: #294247;
  background: transparent;
  font-size: 17px;
  line-height: 1;
}

.zoom-controls button:hover {
  color: #fff;
  background: #315b61;
}

.zoom-controls output {
  display: block;
  border-right: 1px solid #cbd4d1;
  border-left: 1px solid #cbd4d1;
  color: #52666a;
  font-size: 9px;
  line-height: 28px;
  text-align: center;
}

@media screen and (max-width: 1040px) {
  .save-indicator {
    display: none;
  }

  .button {
    padding-right: 11px;
    padding-left: 11px;
  }
}

@media screen and (max-width: 820px) {
  .appbar {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .app-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .app-actions .button.ghost {
    display: block;
  }

  .app-actions .button {
    flex: 0 0 auto;
  }
}