.ped-tools-page #main-content > .page-article > .page-header { display: none; }

:is(.ped-tools-journal-presentation-page, .ped-tools-generator-presentation-page) #main-content > .page-article { max-width: none; }
:is(.ped-tools-journal-presentation-page, .ped-tools-generator-presentation-page) #main-content > .page-article > .entry-content {
  width: min(100%, 880px);
  max-width: none;
  margin-inline: auto;
}

.ped-tools-generator-page #main-content > .page-article > .page-header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ped-tools {
  --ped-tools-purple: #5d50ac;
  --ped-tools-purple-hover: #4e4195;
  --ped-tools-ink: #302047;
  --ped-tools-muted: #685a78;
  --ped-tools-border: #dfd3ee;
  --ped-tools-surface: #f6f1fc;
  box-sizing: border-box;
  max-width: 1120px;
  margin: 0 auto;
  padding-block: clamp(18px, 4vw, 52px);
  color: var(--ped-tools-ink);
}

.ped-tools *, .ped-tools *::before, .ped-tools *::after { box-sizing: inherit; }
.ped-tools [hidden] { display: none !important; }
.ped-tools h1, .ped-tools h2, .ped-tools p { color: inherit; }
.ped-tools .ped-tools-intro { margin: 0 0 clamp(26px, 4.3vw, 52px); }
.ped-tools .ped-tools-intro h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 5.1vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
.ped-tools .ped-tools-intro > p {
  max-width: 65ch;
  margin: 0 0 22px;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.45;
}
.ped-tools .ped-tools-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ped-tools .ped-tools-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 9px 19px;
  border: 1px solid var(--ped-tools-purple);
  border-radius: 11px;
  background: #fff;
  color: var(--ped-tools-purple);
  font: inherit;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}
.ped-tools .ped-tools-button:hover { background: #f0e9fb; color: var(--ped-tools-purple-hover); }
.ped-tools .ped-tools-primary { background: var(--ped-tools-purple); color: #fff; }
.ped-tools .ped-tools-primary:hover { background: var(--ped-tools-purple-hover); color: #fff; }
.ped-tools .ped-tools-button:focus-visible { outline: 2px solid var(--ped-tools-purple); outline-offset: 3px; }
.ped-tools .ped-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.ped-tools .ped-tools-card {
  display: grid;
  gap: 17px;
  min-width: 0;
  padding: clamp(15px, 2.4vw, 26px);
  border: 1px solid var(--ped-tools-border);
  border-radius: 20px;
  background: var(--ped-tools-surface);
}
.ped-tools .ped-tools-card-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 20px);
  align-items: start;
}
.ped-tools .ped-tools-card h2 {
  margin: 0 0 7px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.ped-tools .ped-tools-card p { margin: 0; line-height: 1.45; }
.ped-tools .ped-tools-card > .ped-tools-button { align-self: end; }
.ped-tools .ped-tools-icon {
  display: grid;
  width: clamp(51px, 7vw, 88px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 15px;
  background: #ece1fa;
  color: var(--ped-tools-purple);
}
.ped-tools .ped-tools-icon svg { width: 67%; height: 67%; }
.ped-tools .ped-tools-consults { margin-top: 15px; }
.ped-tools .ped-tools-consults-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 16px; margin-bottom: 5px; }
.ped-tools .ped-tools-consults-heading h2 { margin: 0; }
.ped-tools .ped-tools-status { color: var(--ped-tools-muted); font-size: 14px; }
.ped-tools .ped-tools-card .ped-tools-location { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; font-weight: 700; }
.ped-tools .ped-tools-location svg { width: 21px; height: 21px; color: var(--ped-tools-purple); }
.ped-tools[data-ped-tool-presentation="journal"] {
  --ped-tools-ink: #291638;
  display: grid;
  gap: clamp(9px, 1.5vw, 16px);
  padding-block: clamp(16px, 2.5vw, 34px);
}
.ped-tools[data-ped-tool-presentation="generator"] {
  --ped-tools-ink: #291638;
  display: grid;
  padding-block: 0 clamp(16px, 2.5vw, 34px);
}
.ped-tools :is(.ped-tools-journal-hero, .ped-tools-generator-hero) {
  display: grid;
  grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  align-items: center;
  overflow: hidden;
  border-radius: 17px 17px 4px 4px;
  background: #faf7f7;
}
.ped-tools .ped-tools-generator-hero { grid-template-columns: minmax(0, 61fr) minmax(0, 39fr); }
.ped-tools :is(.ped-tools-journal-hero-copy, .ped-tools-generator-hero-copy) {
  padding: clamp(12px, 3.4vw, 34px) 3px clamp(12px, 3.4vw, 34px) clamp(12px, 3.4vw, 34px);
}
.ped-tools :is(.ped-tools-journal-hero, .ped-tools-generator-hero) h1 {
  margin: 0 0 clamp(6px, 1.6vw, 14px);
  font-size: clamp(25px, 6.8vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
}
.ped-tools .ped-tools-generator-hero h1 { font-size: clamp(22px, 5.7vw, 57px); }
.ped-tools :is(.ped-tools-journal-hero, .ped-tools-generator-hero) p {
  margin: 0;
  font-size: clamp(13px, 2.1vw, 21px);
  line-height: 1.4;
}
.ped-tools .ped-tools-journal-photo {
  /* Frame the photograph in the attached 1536 × 936 reference without its text. */
  align-self: end;
  width: 100%;
  aspect-ratio: 328 / 232;
  margin: 0;
  background-image: linear-gradient(90deg, #faf7f7, #faf7f700 16%), url("jurnal-fotografie-demo.webp");
  background-size: 100% 100%, calc(100% * 1536 / 328) auto;
  background-position: 0 0, calc(100% * 432 / 1208) top;
  background-repeat: no-repeat;
}
.ped-tools .ped-tools-generator-photo {
  align-self: end;
  width: 100%;
  aspect-ratio: 269 / 228;
  margin: 0;
  background-image: linear-gradient(90deg, #faf7f7, #faf7f700 12%), url("jurnal-fotografie-demo.webp");
  background-size: 100% 100%, calc(100% * 1536 / 269) auto;
  background-position: 0 0, calc(100% * 1252 / 1267) top;
  background-repeat: no-repeat;
}
.ped-tools :is(.ped-tools-journal-demo, .ped-tools-generator-demo) {
  min-width: 0;
  padding: clamp(8px, 1.8vw, 18px);
  border-radius: clamp(15px, 2.7vw, 24px);
  background: linear-gradient(115deg, #eee5fa, #e1d4f8);
}
.ped-tools :is(.ped-tools-journal-demo, .ped-tools-generator-demo) > h2 {
  margin: clamp(3px, .7vw, 7px) clamp(5px, 1.5vw, 14px) clamp(8px, 1.7vw, 15px);
  font-size: clamp(21px, 3.9vw, 36px);
  font-weight: 800;
  line-height: 1.13;
}
.ped-tools .ped-tools-demo-surface {
  padding: clamp(6px, 1.3vw, 13px);
  border-radius: clamp(12px, 2.1vw, 18px);
  background: #fcfaff;
  box-shadow: 0 3px 10px #5d50ac16;
}
.ped-tools .ped-tools-demo-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ped-tools-border);
  border-radius: 12px;
  background: #faf8fd;
}
.ped-tools .ped-tools-demo-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5vw, 14px);
  min-width: 0;
  min-height: clamp(49px, 6vw, 61px);
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ped-tools-ink);
  font: inherit;
  font-size: clamp(12px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
.ped-tools .ped-tools-demo-tabs button > svg {
  flex: none;
  width: clamp(20px, 3.8vw, 34px);
  height: auto;
  color: var(--ped-tools-purple);
}
.ped-tools .ped-tools-demo-tabs button[aria-selected="true"] {
  background: linear-gradient(125deg, #7151b5, #593c9e);
  color: #fff;
}
.ped-tools .ped-tools-demo-tabs button[aria-selected="true"] > svg { color: inherit; }
.ped-tools .ped-tools-demo-tabs button:focus-visible {
  outline: 2px solid var(--ped-tools-purple);
  outline-offset: 2px;
}
.ped-tools .ped-tools-demo-panel {
  display: grid;
  gap: clamp(8px, 1.5vw, 13px);
  min-width: 0;
  margin-top: clamp(7px, 1.5vw, 13px);
  padding: clamp(9px, 2vw, 20px);
  border: 1px solid var(--ped-tools-border);
  border-radius: clamp(11px, 2vw, 16px);
  background: #fff;
  box-shadow: 0 2px 7px #3020470a;
}
.ped-tools .ped-tools-demo-panel-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(4px, 1.3vw, 12px);
}
.ped-tools .ped-tools-demo-panel-heading > svg {
  width: clamp(23px, 5.5vw, 51px);
  height: auto;
  color: var(--ped-tools-purple);
}
.ped-tools .ped-tools-demo-panel-heading h3 {
  margin: 0;
  color: inherit;
  font-size: clamp(17px, 4.35vw, 35px);
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: break-word;
}
.ped-tools .ped-tools-demo-panel-heading p {
  margin: 3px 0 0;
  font-size: clamp(11px, 1.8vw, 17px);
  line-height: 1.25;
}
.ped-tools .ped-tools-demo-panel-heading > span {
  align-self: start;
  padding: 4px clamp(5px, 1.3vw, 13px);
  border-radius: 99px;
  background: #eee4f9;
  color: #442867;
  font-size: clamp(9px, 1.65vw, 14px);
  line-height: 1.2;
  white-space: nowrap;
}
.ped-tools .ped-tools-demo-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1.45vw, 13px);
}
.ped-tools .ped-tools-demo-stat {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.3vw, 13px);
  min-width: 0;
  padding: clamp(7px, 1.7vw, 16px);
  border-radius: 11px;
  background: #f1ebfa;
}
.ped-tools .ped-tools-demo-stat > svg {
  flex: none;
  width: clamp(21px, 5vw, 46px);
  height: auto;
  color: var(--ped-tools-purple);
}
.ped-tools .ped-tools-demo-stat dl, .ped-tools .ped-tools-demo-stat dd { min-width: 0; margin: 0; }
.ped-tools .ped-tools-demo-stat dt {
  font-size: clamp(12px, 1.9vw, 18px);
  font-weight: 800;
  line-height: 1.12;
}
.ped-tools .ped-tools-demo-stat strong {
  display: block;
  margin-block: 3px;
  font-size: clamp(17px, 3.25vw, 29px);
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: break-word;
}
.ped-tools .ped-tools-demo-stat small {
  display: block;
  font-size: clamp(10px, 1.6vw, 15px);
  line-height: 1.26;
  overflow-wrap: break-word;
}
.ped-tools .ped-tools-demo-chart {
  --ped-tools-plot-height: clamp(64px, 11vw, 105px);
  min-width: 0;
  padding: clamp(7px, 1.4vw, 13px);
  margin: 0;
  border: 1px solid var(--ped-tools-border);
  border-radius: 11px;
  background: #fdfbfe;
}
.ped-tools .ped-tools-demo-chart figcaption {
  margin: 0 0 4px;
  color: inherit;
  font-size: clamp(12px, 1.9vw, 18px);
  font-weight: 800;
  line-height: 1.2;
}
.ped-tools .ped-tools-demo-chart-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px clamp(4px, 1.2vw, 10px);
  font-size: clamp(9px, 1.45vw, 13px);
  line-height: 1.1;
}
.ped-tools .ped-tools-demo-chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: var(--ped-tools-plot-height);
  white-space: nowrap;
}
.ped-tools .ped-tools-demo-plot { position: relative; min-width: 0; height: var(--ped-tools-plot-height); }
.ped-tools .ped-tools-demo-plot > svg { display: block; width: 100%; height: 100%; }
.ped-tools .ped-tools-demo-gridline { stroke: #ded5e8; stroke-width: 1; }
.ped-tools .ped-tools-demo-area { fill: #eee3f9; }
.ped-tools .ped-tools-demo-line { fill: none; stroke: #884bc1; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ped-tools .ped-tools-demo-chart-dates {
  grid-column: 2;
  position: relative;
  height: 1.2em;
}
.ped-tools .ped-tools-demo-chart-dates span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ped-tools .ped-tools-demo-point {
  position: absolute;
  display: grid;
  width: 25px;
  min-width: 0;
  height: 25px;
  min-height: 0;
  place-items: center;
  padding: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.ped-tools .ped-tools-demo-point::after {
  width: 9px;
  height: 9px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #884bc1;
  content: "";
}
.ped-tools .ped-tools-demo-point:hover, .ped-tools .ped-tools-demo-point:focus-visible { background: #a48eed33; }
.ped-tools .ped-tools-demo-point:focus-visible { outline: 2px solid var(--ped-tools-purple); }
.ped-tools .ped-tools-demo-chart-value {
  display: block;
  margin-top: 5px;
  color: var(--ped-tools-purple-hover);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.ped-tools .ped-tools-demo-chart-value:empty { display: none; }
.ped-tools .ped-tools-demo-report-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  color: #733aab;
  font-size: clamp(13px, 2vw, 19px);
  font-weight: 800;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ped-tools .ped-tools-demo-report-link > svg { width: clamp(15px, 2.6vw, 23px); height: auto; flex: none; }
.ped-tools .ped-tools-demo-report-link:focus-visible { outline: 2px solid var(--ped-tools-purple); outline-offset: 2px; }
.ped-tools:is([data-ped-tool-presentation="journal"], [data-ped-tool-presentation="generator"]) .ped-tools-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 20px);
}
.ped-tools:is([data-ped-tool-presentation="journal"], [data-ped-tool-presentation="generator"]) .ped-tools-actions > .ped-tools-button {
  min-width: 0;
  min-height: clamp(46px, 5.5vw, 58px);
  padding-inline: 7px;
  font-size: clamp(15px, 2vw, 22px);
}

.ped-tools .ped-tools-meal-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.28fr);
  gap: clamp(7px, 1.5vw, 16px);
  min-width: 0;
  padding: 0;
  margin: 0 0 clamp(8px, 1.6vw, 16px);
  border: 0;
}
.ped-tools .ped-tools-meal-field { position: relative; display: block; min-width: 0; }
.ped-tools .ped-tools-meal-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ped-tools .ped-tools-meal-field > select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: clamp(44px, 6.2vw, 60px);
  padding: 7px clamp(24px, 3.5vw, 38px) 7px clamp(32px, 5vw, 52px);
  appearance: none;
  border: 1px solid #d8cbe6;
  border-radius: 12px;
  background: #fff;
  color: var(--ped-tools-ink);
  font: inherit;
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  text-overflow: ellipsis;
}
.ped-tools .ped-tools-meal-field > select:focus-visible { outline: 2px solid var(--ped-tools-purple); outline-offset: 2px; }
.ped-tools .ped-tools-meal-field > svg {
  position: absolute;
  inset-inline-start: clamp(8px, 1.4vw, 15px);
  top: 50%;
  width: clamp(18px, 3vw, 30px);
  height: auto;
  transform: translateY(-50%);
  color: var(--ped-tools-purple);
  pointer-events: none;
}
.ped-tools .ped-tools-meal-field::after {
  position: absolute;
  inset-inline-end: clamp(10px, 1.6vw, 17px);
  top: 50%;
  width: 9px;
  height: 9px;
  border-inline-end: 1.5px solid var(--ped-tools-ink);
  border-block-end: 1.5px solid var(--ped-tools-ink);
  transform: translateY(-75%) rotate(45deg);
  content: "";
  pointer-events: none;
}
.ped-tools .ped-tools-meal-example {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: start;
  gap: clamp(11px, 2.2vw, 22px);
  padding: clamp(8px, 1.5vw, 15px);
  border: 1px solid #eee5f5;
  border-radius: clamp(10px, 2vw, 17px);
  background: #fff;
  box-shadow: 0 3px 12px #39246310;
}
.ped-tools .ped-tools-meal-photo {
  position: relative;
  min-width: 0;
  aspect-ratio: 308 / 392;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(7px, 1.3vw, 12px);
  background: #f4edf9;
}
.ped-tools .ped-tools-meal-photo-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% * 392 / 308);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background-image: url("generator-retete-demo.webp");
  background-size: 200% 200%;
  background-repeat: no-repeat;
}
.ped-tools [data-ped-meal-photo="apple-yogurt"] .ped-tools-meal-photo-art { background-position: left top; }
.ped-tools [data-ped-meal-photo="banana-oats"] .ped-tools-meal-photo-art { background-position: right top; }
.ped-tools [data-ped-meal-photo="vegetable-puree"] .ped-tools-meal-photo-art { background-position: left bottom; }
.ped-tools [data-ped-meal-photo="sweet-potato-apple"] .ped-tools-meal-photo-art { background-position: right bottom; }
.ped-tools [data-ped-meal-photo="chicken-zucchini"] .ped-tools-meal-photo-art {
  width: 100%;
  aspect-ratio: 308 / 392;
  background-image: url("jurnal-fotografie-demo.webp");
  background-size: calc(100% * 1536 / 308) auto;
  background-position: calc(100% * 818 / 1228) calc(100% * 417 / 544);
}
.ped-tools .ped-tools-meal-copy { min-width: 0; padding-block: clamp(2px, 1.3vw, 14px); }
.ped-tools .ped-tools-meal-copy > h3 {
  margin: 0 0 clamp(12px, 2.4vw, 22px);
  color: inherit;
  font-size: clamp(22px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.09;
  letter-spacing: -.018em;
}
.ped-tools .ped-tools-meal-copy > h4 {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.4vw, 14px);
  margin: 0 0 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: linear-gradient(100deg, #f0e9f9, #e6dbf4);
  color: inherit;
  font-size: clamp(16px, 2.3vw, 21px);
  font-weight: 800;
  line-height: 1.22;
}
.ped-tools .ped-tools-meal-copy > h4 svg { width: clamp(21px, 3.5vw, 32px); height: auto; flex: none; color: var(--ped-tools-purple); }
.ped-tools .ped-tools-meal-copy > :is(ul, p) {
  margin: 0;
  font-size: clamp(15px, 2.15vw, 20px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ped-tools .ped-tools-meal-copy > ul { margin-block-end: clamp(12px, 2.1vw, 20px); padding-inline-start: 24px; }
.ped-tools .ped-tools-meal-copy > ul li::marker { color: #633490; }
.ped-tools .ped-tools-generator-actions { margin-block-start: clamp(9px, 1.8vw, 16px); }
.ped-tools .ped-tools-generator-actions [data-ped-tool-member] > .ped-tools-button { width: 100%; }

@media (max-width: 700px) {
  .ped-tools .ped-tools-meal-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ped-tools .ped-tools-meal-field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .ped-tools .ped-tools-meal-example { grid-template-columns: minmax(0, 1fr); }
  .ped-tools .ped-tools-meal-photo { aspect-ratio: 16 / 10; }
  .ped-tools .ped-tools-meal-photo-art { width: 100%; }
}
@media (max-width: 510px) {
  .ped-tools .ped-tools-demo-tabs button { flex-direction: column; }
  .ped-tools .ped-tools-demo-stat { align-items: flex-start; }
}

@media (max-width: 630px) {
  .ped-tools .ped-tools-grid { grid-template-columns: minmax(0, 1fr); }
  .ped-tools .ped-tools-actions > .ped-tools-button { flex: 1 1 148px; }
}