/* generated by scripts/sync-ds.sh — do not edit */
/* src/tokens.css */
:root {
  --cream: #fff9f4;
  --paper: #ffffff;
  --paper-2: #fdf2f5;
  --paper-3: #fff3e9;
  --ink: #3e2f35;
  --ink-2: #857078;
  --ink-3: #b9a7ad;
  --rule: #f0e2e7;
  --edge: #3e2f35;
  --edge-soft: rgba(62, 47, 53, 0.14);
  --edge-hard: rgba(62, 47, 53, 0.22);
  --accent: #ff5c93;
  --accent-mix-base: #ffffff;
  --accent-milk-pct: 14%;
  --accent-tint-pct: 26%;
  --accent-deep-pct: 26%;
  --accent-deep-mix: #000000;
  --soda: #64bee8;
  --honey: #ffb629;
  --melon: #6fcf97;
  --lavender: #b9a0e8;
  --success: #2e9e63;
  --success-milk: #e4f7ec;
  --warn: #c2790a;
  --warn-milk: #fff3dc;
  --danger: #e2452f;
  --danger-milk: #ffe9e3;
  --info: #2b8fbd;
  --info-milk: #e4f4fb;
  --font:
    "M PLUS Rounded 1c",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    system-ui,
    sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 800;
  --text-hero: 32px;
  --text-title: 23px;
  --text-section: 17px;
  --text-lead: 16px;
  --text-body: 14.5px;
  --text-label: 13.5px;
  --text-caption: 12px;
  --leading-body: 1.75;
  --leading-tight: 1.35;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --page-width: 880px;
  --page-gutter: 22px;
  --hit-target: 44px;
  --r-pill: 999px;
  --r-card: 18px;
  --r-panel: 14px;
  --r-btn: 14px;
  --r-field: 12px;
  --r-chip: 9px;
  --lift-press: 2px;
  --shadow-pop: 0 3px 0 var(--edge-soft);
  --shadow-pop-deep: 0 4px 0 var(--edge-hard);
  --shadow-pressed: 0 1px 0 var(--edge-soft);
  --shadow-paper: 0 6px 16px rgba(62, 47, 53, 0.07);
  --shadow-paper-lift: 0 10px 22px rgba(62, 47, 53, 0.1);
  --shadow-pop-accent: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
  --ring-danger: 0 0 0 3px rgba(226, 69, 47, 0.3);
  --dur-fast: 130ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.3, 0.8, 0.4, 1);
  --ease-pop: cubic-bezier(0.3, 1.5, 0.5, 1);
  --star-tile: 96px 84px;
  --star-opacity: 0.55;
  --tilt: -2deg;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme=light]) {
    --cream: #1c1519;
    --paper: #271e23;
    --paper-2: #322730;
    --paper-3: #302420;
    --ink: #f6ecef;
    --ink-2: #b3a1a8;
    --ink-3: #7d6c73;
    --rule: #3b2e35;
    --edge: #000000;
    --edge-soft: rgba(0, 0, 0, 0.45);
    --edge-hard: rgba(0, 0, 0, 0.6);
    --accent-mix-base: #271e23;
    --accent-milk-pct: 22%;
    --accent-tint-pct: 34%;
    --accent-deep-pct: 30%;
    --accent-deep-mix: #ffffff;
    --success-milk: #163126;
    --warn-milk: #33260f;
    --danger-milk: #351914;
    --info-milk: #142b36;
    --shadow-paper: 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-paper-lift: 0 10px 22px rgba(0, 0, 0, 0.45);
  }
}
[data-scheme=dark] {
  --cream: #1c1519;
  --paper: #271e23;
  --paper-2: #322730;
  --paper-3: #302420;
  --ink: #f6ecef;
  --ink-2: #b3a1a8;
  --ink-3: #7d6c73;
  --rule: #3b2e35;
  --edge: #000000;
  --edge-soft: rgba(0, 0, 0, 0.45);
  --edge-hard: rgba(0, 0, 0, 0.6);
  --accent-mix-base: #271e23;
  --accent-milk-pct: 22%;
  --accent-tint-pct: 34%;
  --accent-deep-pct: 30%;
  --accent-deep-mix: #ffffff;
  --success-milk: #163126;
  --warn-milk: #33260f;
  --danger-milk: #351914;
  --info-milk: #142b36;
  --shadow-paper: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-paper-lift: 0 10px 22px rgba(0, 0, 0, 0.45);
}
.ohp-root[data-density=compact] {
  --text-body: 13px;
  --text-label: 12.5px;
  --text-caption: 11.5px;
  --leading-body: 1.55;
  --r-card: 12px;
  --r-panel: 10px;
  --r-btn: 10px;
  --r-field: 9px;
  --hit-target: 34px;
  --page-width: none;
  --page-gutter: 20px;
  --lift-press: 1px;
  --shadow-paper: 0 2px 6px rgba(62, 47, 53, 0.06);
  --shadow-paper-lift: 0 4px 12px rgba(62, 47, 53, 0.09);
  --star-opacity: 0.25;
}
.ohp-root {
  --accent-milk: color-mix(in srgb, var(--accent) var(--accent-milk-pct), var(--accent-mix-base));
  --accent-tint: color-mix(in srgb, var(--accent) var(--accent-tint-pct), var(--accent-mix-base));
  --accent-deep: color-mix(in srgb, var(--accent-deep-mix) var(--accent-deep-pct), var(--accent));
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* src/components.css */
.ohp-root *,
.ohp-root *::before,
.ohp-root *::after {
  box-sizing: border-box;
}
:where(.ohp-root button, .ohp-root input, .ohp-root textarea, .ohp-root select) {
  font: inherit;
  color: inherit;
}
:where(.ohp-root button) {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
:where(.ohp-root h1, .ohp-root h2, .ohp-root h3, .ohp-root p) {
  margin: 0;
}
.ohp-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--star-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cg fill='none'%3E%3Cpath d='M18 8c.6 4.2 1.9 5.5 6.1 6.1-4.2.6-5.5 1.9-6.1 6.1-.6-4.2-1.9-5.5-6.1-6.1 4.2-.6 5.5-1.9 6.1-6.1z' fill='%23FF5C93' fill-opacity='.30'/%3E%3Cpath d='M70 22c.5 3.4 1.5 4.4 4.9 4.9-3.4.5-4.4 1.5-4.9 4.9-.5-3.4-1.5-4.4-4.9-4.9 3.4-.5 4.4-1.5 4.9-4.9z' fill='%2364BEE8' fill-opacity='.34'/%3E%3Cpath d='M44 54c.5 3.8 1.7 5 5.5 5.5-3.8.5-5 1.7-5.5 5.5-.5-3.8-1.7-5-5.5-5.5 3.8-.5 5-1.7 5.5-5.5z' fill='%23FFB629' fill-opacity='.30'/%3E%3Ccircle cx='84' cy='66' r='2.4' fill='%23B9A0E8' fill-opacity='.32'/%3E%3Ccircle cx='8' cy='48' r='1.8' fill='%236FCF97' fill-opacity='.34'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: var(--star-tile);
}
.ohp-stars--fixed {
  position: fixed;
}
.ohp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--hit-target);
  padding: 0 22px;
  border-radius: var(--r-btn);
  font-size: var(--text-lead);
  font-weight: var(--weight-heavy);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.ohp-btn:active {
  transform: translateY(var(--lift-press));
  box-shadow: var(--shadow-pressed);
}
.ohp-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-pop), var(--ring);
}
.ohp-btn[disabled],
.ohp-btn[aria-disabled=true] {
  opacity: 0.4;
  pointer-events: none;
}
.ohp-btn > svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
}
.ohp-btn--primary {
  color: var(--on-accent, #fff);
  background: var(--accent);
  box-shadow: var(--shadow-pop-accent);
}
.ohp-btn--primary:hover {
  background: color-mix(in srgb, #000 6%, var(--accent));
}
.ohp-btn--primary:active {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000);
}
.ohp-btn--primary:focus-visible {
  box-shadow: var(--shadow-pop-accent), var(--ring);
}
.ohp-btn--secondary {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--rule);
  box-shadow: var(--shadow-pop);
}
.ohp-btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.ohp-btn--ghost {
  color: var(--ink-2);
  padding: 0 12px;
  min-height: 34px;
}
.ohp-btn--ghost:hover {
  color: var(--accent-deep);
  background: var(--accent-milk);
}
.ohp-btn--ghost:active {
  transform: none;
  box-shadow: none;
}
.ohp-btn--danger {
  color: #fff;
  background: var(--danger);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--danger) 55%, #000);
}
.ohp-btn--danger:hover {
  background: color-mix(in srgb, #000 7%, var(--danger));
}
.ohp-btn--danger:active {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--danger) 55%, #000);
}
.ohp-btn--danger:focus-visible {
  box-shadow: 0 3px 0 color-mix(in srgb, var(--danger) 55%, #000), var(--ring-danger);
}
.ohp-btn--sm {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: var(--text-label);
  gap: 5px;
  box-shadow: none;
}
.ohp-btn--sm:active {
  transform: none;
  box-shadow: none;
}
.ohp-btn--sm > svg {
  width: 14px;
  height: 14px;
}
.ohp-btn--block {
  display: flex;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .ohp-btn:active {
    transform: none;
  }
}
.ohp-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-paper);
  padding: var(--space-6);
  color: inherit;
}
.ohp-card--flat {
  box-shadow: none;
}
.ohp-card--interactive {
  display: block;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.ohp-card--interactive:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  box-shadow: var(--shadow-paper-lift);
}
.ohp-card--interactive:active {
  transform: translateY(var(--lift-press));
  box-shadow: var(--shadow-paper);
}
.ohp-card--accent {
  background: var(--accent-milk);
  border-color: transparent;
  border-left: 4px solid var(--accent);
  padding-left: calc(var(--space-6) - 3px);
}
.ohp-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--cream) 84%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.ohp-nav__in {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 10px var(--page-gutter);
  display: flex;
  align-items: center;
  gap: 18px;
}
.ohp-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15.5px;
  font-weight: var(--weight-heavy);
  color: var(--ink);
  text-decoration: none;
}
.ohp-nav__brand img {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 2px solid var(--paper);
  box-shadow: var(--shadow-pop);
}
.ohp-nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.ohp-nav__links a {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.ohp-nav__links a:hover {
  color: var(--accent-deep);
}
.ohp-nav__links a[aria-current=page] {
  color: var(--ink);
  box-shadow: inset 0 -6px 0 var(--accent-milk);
}
.ohp-nav__links a[data-cta] {
  color: var(--on-accent, #fff);
  background: var(--accent);
  padding: 7px 15px;
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-pop-accent);
}
.ohp-nav__links a[data-cta]:hover {
  color: var(--on-accent, #fff);
  background: color-mix(in srgb, #000 6%, var(--accent));
}
.ohp-nav__links a[data-cta]:active {
  transform: translateY(var(--lift-press));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000);
}
@media (max-width: 560px) {
  .ohp-nav__in {
    gap: var(--space-3);
    padding: 9px 18px;
  }
  .ohp-nav__brand {
    flex: none;
    white-space: nowrap;
  }
  .ohp-nav__links {
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
  .ohp-nav__links a {
    font-size: var(--text-caption);
    white-space: nowrap;
  }
}
.ohp-sticker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 2px solid var(--paper);
  border-radius: var(--r-chip);
  font-size: var(--text-caption);
  font-weight: var(--weight-heavy);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: var(--shadow-pop);
  transform: rotate(var(--tilt));
}
.ohp-sticker--right {
  transform: rotate(calc(var(--tilt) * -1));
}
.ohp-sticker--flat {
  transform: none;
}
.ohp-sticker--accent {
  color: var(--on-accent, #fff);
  background: var(--accent);
}
.ohp-sticker--soda {
  background: color-mix(in srgb, var(--soda) 40%, var(--paper));
}
.ohp-sticker--honey {
  background: color-mix(in srgb, var(--honey) 42%, var(--paper));
}
.ohp-sticker--melon {
  background: color-mix(in srgb, var(--melon) 40%, var(--paper));
}
.ohp-sticker--lavender {
  background: color-mix(in srgb, var(--lavender) 40%, var(--paper));
}
.ohp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--text-caption);
  font-weight: var(--weight-heavy);
  line-height: 1.7;
  white-space: nowrap;
}
.ohp-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex: none;
}
.ohp-badge--neutral {
  color: var(--ink-2);
  background: color-mix(in srgb, var(--rule) 60%, var(--paper));
}
.ohp-badge--accent {
  color: var(--accent-deep);
  background: var(--accent-milk);
}
.ohp-badge--success {
  color: var(--success);
  background: var(--success-milk);
}
.ohp-badge--warn {
  color: var(--warn);
  background: var(--warn-milk);
}
.ohp-badge--danger {
  color: var(--danger);
  background: var(--danger-milk);
}
.ohp-badge--info {
  color: var(--info);
  background: var(--info-milk);
}
.ohp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ohp-field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  color: var(--ink);
  line-height: 1.4;
}
.ohp-field__req {
  width: 9px;
  height: 9px;
  flex: none;
  color: var(--accent);
}
.ohp-field__optional {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
}
.ohp-field__note {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--ink-2);
}
.ohp-field__note--error {
  color: var(--danger);
}
.ohp-control {
  width: 100%;
  min-height: var(--hit-target);
  padding: 9px 13px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--rule);
  border-radius: var(--r-field);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ohp-control::placeholder {
  color: var(--ink-3);
  font-weight: var(--weight-medium);
}
.ohp-control:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
}
.ohp-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.ohp-control:disabled {
  background: var(--paper-2);
  color: var(--ink-3);
  cursor: not-allowed;
}
.ohp-control[aria-invalid=true] {
  border-color: var(--danger);
}
.ohp-control[aria-invalid=true]:focus {
  box-shadow: var(--ring-danger);
}
.ohp-control--textarea {
  min-height: 104px;
  resize: vertical;
  line-height: var(--leading-body);
}
.ohp-control--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.6 6 6.2l4.6-4.6' fill='none' stroke='%23FF5C93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
}
.ohp-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 26px;
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--ink);
}
.ohp-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ohp-check__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--rule);
  border-radius: 7px;
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ohp-check__box svg {
  width: 11px;
  height: 11px;
  stroke: var(--on-accent, #fff);
  stroke-width: 2.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease-pop);
}
.ohp-check:hover .ohp-check__box {
  border-color: var(--accent);
}
.ohp-check input:checked + .ohp-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.ohp-check input:checked + .ohp-check__box svg {
  opacity: 1;
  transform: scale(1);
}
.ohp-check input:focus-visible + .ohp-check__box {
  box-shadow: var(--ring);
}
.ohp-check input:disabled + .ohp-check__box {
  background: var(--paper-2);
  border-color: var(--rule);
}
.ohp-check--disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .ohp-check__box svg {
    transition: opacity var(--dur-fast) var(--ease);
    transform: scale(1);
  }
}
.ohp-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ohp-group__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ohp-group__title {
  font-size: var(--text-section);
  font-weight: var(--weight-heavy);
  color: var(--ink);
  line-height: var(--leading-tight);
}
.ohp-group__desc {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--ink-2);
}
.ohp-group__fields {
  display: grid;
  gap: var(--space-4);
}
.ohp-group__fields[data-columns="2"] {
  grid-template-columns: 1fr 1fr;
}
.ohp-group__fields > [data-span=full] {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .ohp-group__fields[data-columns="2"] {
    grid-template-columns: 1fr;
  }
}
.ohp-group__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-1);
}
.ohp-group__actions--split {
  justify-content: space-between;
}
@media (max-width: 560px) {
  .ohp-group__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .ohp-group__actions .ohp-btn {
    width: 100%;
  }
}