/* Habi: exact published foundations/components and consumed utility rules.
 * Source: fit-igloo-66636772.figma.site, approved 1:1. Local fonts; no runtime CDN/build.
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer properties {
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop { --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-translate-z: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scale-z: 1;
  --tw-rotate-x: initial;
  --tw-rotate-y: initial;
  --tw-rotate-z: initial;
  --tw-skew-x: initial;
  --tw-skew-y: initial;
  --tw-space-y-reverse: 0;
  --tw-divide-y-reverse: 0;
  --tw-border-style: solid;
  --tw-leading: initial;
  --tw-font-weight: initial;
  --tw-tracking: initial;
  --tw-ordinal: initial;
  --tw-slashed-zero: initial;
  --tw-numeric-figure: initial;
  --tw-numeric-spacing: initial;
  --tw-numeric-fraction: initial;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-color: initial;
  --tw-shadow-alpha: 100%;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-shadow-color: initial;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-color: initial;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-color: initial;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-inset: initial;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-outline-style: solid;
  --tw-blur: initial;
  --tw-brightness: initial;
  --tw-contrast: initial;
  --tw-grayscale: initial;
  --tw-hue-rotate: initial;
  --tw-invert: initial;
  --tw-opacity: initial;
  --tw-saturate: initial;
  --tw-sepia: initial;
  --tw-drop-shadow: initial;
  --tw-drop-shadow-color: initial;
  --tw-drop-shadow-alpha: 100%;
  --tw-drop-shadow-size: initial;
  --tw-backdrop-blur: initial;
  --tw-backdrop-brightness: initial;
  --tw-backdrop-contrast: initial;
  --tw-backdrop-grayscale: initial;
  --tw-backdrop-hue-rotate: initial;
  --tw-backdrop-invert: initial;
  --tw-backdrop-opacity: initial;
  --tw-backdrop-saturate: initial;
  --tw-backdrop-sepia: initial;
  --tw-duration: initial;
  --tw-ease: initial;
  --tw-content: "";
  }
}
}

@layer theme {
:root, :host { --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --color-yellow-400: #e8b94d;
  --color-green-700: #436d51;
  --color-blue-700: #426a94;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;
  --radius-sm: 4px;
  --animate-spin: spin 1s linear infinite;
  --blur-sm: 8px;
  --blur-md: 12px;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --color-cream-50: #fffcf6;
  --color-fiber-200: #ede1cb;
  --color-brown-900: #352820;
  --radius-control: 6px;
  --radius-panel: 12px;
  --text-display: 48px;
  --text-display--line-height: 1.08;
  --text-h1: 36px;
  --text-h1--line-height: 1.15;
  --text-h2: 28px;
  --text-h2--line-height: 1.15;
  --text-h3: 22px;
  --text-h3--line-height: 1.2;
  --text-body: 16px;
  --text-body--line-height: 1.6;
  --text-small: 14px;
  --text-small--line-height: 1.5;
  --text-caption: 12px;
  --text-caption--line-height: 1.4;
  --ease-weave: var(--ease-weave);
  }
}

@layer base {
*, ::after, ::before, ::backdrop { box-sizing: border-box;
  border: 0px solid;
  margin: 0px;
  padding: 0px;
  }
::file-selector-button { box-sizing: border-box;
  border: 0px solid;
  margin: 0px;
  padding: 0px;
  }
html, :host { text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  font-feature-settings: var(--default-font-feature-settings,normal);
  font-variation-settings: var(--default-font-variation-settings,normal);
  -webkit-tap-highlight-color: transparent;
  }
hr { height: 0px;
  color: inherit;
  border-top-width: 1px;
  }
abbr:where([title]) { text-decoration: underline dotted;
  }
h1, h2, h3, h4, h5, h6 { font-size: inherit;
  font-weight: inherit;
  }
a { color: inherit;
  text-decoration: inherit;
  }
b, strong { font-weight: bolder;
  }
code, kbd, samp, pre { font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-feature-settings: var(--default-mono-font-feature-settings,normal);
  font-variation-settings: var(--default-mono-font-variation-settings,normal);
  font-size: 1em;
  }
small { font-size: 80%;
  }
sub, sup { vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
  }
sub { bottom: -0.25em;
  }
sup { top: -0.5em;
  }
table { text-indent: 0px;
  border-color: inherit;
  border-collapse: collapse;
  }
progress { vertical-align: baseline;
  }
summary { display: list-item;
  }
ol, ul, menu { list-style: none;
  }
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle;
  display: block;
  }
img, video { max-width: 100%;
  height: auto;
  }
button, input, select, optgroup, textarea { font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0px;
  }
::file-selector-button { font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0px;
  }
:where(select:is([multiple], [size])) optgroup { font-weight: bolder;
  }
:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px;
  }
::file-selector-button { margin-inline-end: 4px;
  }
::placeholder { opacity: 1;
  }
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder { color: currentcolor;
  }
@supports (color:color-mix(in lab, red, red)) {
::placeholder { color: color-mix(currentcolor, transparent);
  }
}
}
textarea { resize: vertical;
  }
::-webkit-search-decoration { appearance: none;
  }
::-webkit-date-and-time-value { min-height: 1lh;
  text-align: inherit;
  }
::-webkit-datetime-edit { display: inline-flex;
  }
::-webkit-datetime-edit-fields-wrapper { padding: 0px;
  }
::-webkit-datetime-edit { padding-block: 0px;
  }
::-webkit-datetime-edit-year-field { padding-block: 0px;
  }
::-webkit-datetime-edit-month-field { padding-block: 0px;
  }
::-webkit-datetime-edit-day-field { padding-block: 0px;
  }
::-webkit-datetime-edit-hour-field { padding-block: 0px;
  }
::-webkit-datetime-edit-minute-field { padding-block: 0px;
  }
::-webkit-datetime-edit-second-field { padding-block: 0px;
  }
::-webkit-datetime-edit-millisecond-field { padding-block: 0px;
  }
::-webkit-datetime-edit-meridiem-field { padding-block: 0px;
  }
::-webkit-calendar-picker-indicator { line-height: 1;
  }
button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button;
  }
::file-selector-button { appearance: button;
  }
::-webkit-inner-spin-button { height: auto;
  }
::-webkit-outer-spin-button { height: auto;
  }
[hidden]:where(:not([hidden="until-found"])) { display: none !important;
  }
html { scroll-behavior: smooth;
  scroll-padding-top: 80px;
  }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto;
  }
}
body { background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
  }
h1, h2, h3, h4 { text-wrap: balance;
  line-height: 1.15;
  }
:focus-visible { outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  }
::selection { background: var(--habi-yellow-400);
  color: var(--habi-brown-900);
  }
}

@layer components {
.btn { border-radius: var(--radius-control);
  min-height: 44px;
  font-family: var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) var(--ease-weave), border-color var(--duration-fast) var(--ease-weave), color var(--duration-fast) var(--ease-weave), transform var(--duration-fast) var(--ease-weave);
  border: 1.5px solid rgba(0, 0, 0, 0);
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  }
.btn--sm { min-height: 36px;
  padding: 0px 14px;
  font-size: 14px;
  }
.btn--lg { min-height: 52px;
  padding: 0px 28px;
  font-size: 16px;
  }
.btn:active:not(:disabled), .btn[data-force="active"] { transform: translateY(1px);
  }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed;
  }
.btn[data-force="focus"] { outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  }
.btn--primary { background: var(--color-action-primary);
  color: var(--color-action-foreground);
  }
.btn--primary:hover:not(:disabled), .btn--primary[data-force="hover"] { background: var(--color-action-primary-hover);
  }
.btn--primary:active:not(:disabled), .btn--primary[data-force="active"] { background: rgb(110, 43, 24);
  }
.btn--secondary { background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  }
.btn--secondary:hover:not(:disabled), .btn--secondary[data-force="hover"] { background: var(--color-bg-inset);
  }
.btn--secondary:active:not(:disabled), .btn--secondary[data-force="active"] { background: var(--habi-fiber-300);
  }
.btn--primary:disabled, .btn--destructive:disabled, .btn--secondary:disabled, .btn--tertiary:disabled { background: var(--color-bg-inset);
  color: rgb(117, 104, 92);
  border-color: rgba(0, 0, 0, 0);
  text-decoration-color: rgba(0, 0, 0, 0);
  }
.btn--secondary:disabled { border-color: var(--color-border-default);
  }
.icon-btn { border-radius: var(--radius-control);
  width: 44px;
  height: 44px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-weave);
  border: 1.5px solid rgba(0, 0, 0, 0);
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  }
.icon-btn:hover:not(:disabled), .icon-btn[data-force="hover"] { background: var(--color-bg-inset);
  }
.icon-btn:active:not(:disabled), .icon-btn[data-force="active"] { background: var(--habi-fiber-300);
  }
.icon-btn:disabled { color: rgb(156, 143, 130);
  cursor: not-allowed;
  }
.field-label { color: var(--color-text-primary);
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  display: block;
  }
.field-hint { color: var(--color-text-secondary);
  margin-top: 6px;
  font-size: 13px;
  }
.input { border-radius: var(--radius-control);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg-raised);
  width: 100%;
  min-height: 44px;
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--ease-weave), box-shadow var(--duration-fast) var(--ease-weave);
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.4;
  }
.input::placeholder { color: rgb(138, 123, 109);
  }
.input:hover:not(:disabled) { border-color: var(--color-text-primary);
  }
.input:focus, .input[data-force="focus"] { border-color: var(--color-focus-ring);
  outline: none;
  box-shadow: rgba(66, 106, 148, 0.28) 0px 0px 0px 3px;
  }
.input:disabled { background: var(--color-bg-inset);
  border-color: var(--color-border-default);
  color: rgb(117, 104, 92);
  cursor: not-allowed;
  }
.input[aria-invalid="true"] { border-color: var(--color-status-error);
  }
.input[aria-invalid="true"]:focus { box-shadow: rgba(158, 47, 29, 0.22) 0px 0px 0px 3px;
  }
.input[data-valid="true"] { border-color: var(--color-status-success);
  }
select.input { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23352820' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 40px;
  }
textarea.input { resize: vertical;
  min-height: 104px;
  }
.check { appearance: none;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg-raised);
  cursor: pointer;
  width: 22px;
  height: 22px;
  transition: background-color var(--duration-fast) var(--ease-weave);
  border-radius: 4px;
  flex: 0 0 auto;
  place-content: center;
  display: inline-grid;
  }
.check[type="radio"] { border-radius: 999px;
  }
.check:checked { background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  }
.check[type="checkbox"]:checked::after { content: "";
  border-left: 2px solid var(--habi-cream-50);
  border-bottom: 2px solid var(--habi-cream-50);
  width: 12px;
  height: 7px;
  transform: translateY(-2px) rotate(-45deg);
  }
.check[type="radio"]:checked { background: var(--color-bg-raised);
  }
.check[type="radio"]:checked::after { content: "";
  background: var(--color-text-primary);
  border-radius: 999px;
  width: 10px;
  height: 10px;
  }
.check:disabled { background: var(--color-bg-inset);
  border-color: var(--color-border-default);
  cursor: not-allowed;
  }
.check[aria-invalid="true"] { border-color: var(--color-status-error);
  }
.chip { white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  }
.link { color: var(--color-text-primary);
  text-underline-offset: 3px;
  text-decoration-line: underline;
  text-decoration-style: initial;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--duration-fast);
  }
.link:hover { color: var(--color-action-primary-hover);
  text-decoration-color: currentcolor;
  }
}

@layer utilities {
.\@container { container-type: inline-size;
  }
.pointer-events-none { pointer-events: none;
  }
.visible { visibility: visible;
  }
.sr-only { clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0px;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0px;
  position: absolute;
  overflow: hidden;
  }
.absolute { position: absolute;
  }
.relative { position: relative;
  }
.sticky { position: sticky;
  }
.inset-0 { inset: calc(var(--spacing) * 0);
  }
.inset-x-3 { inset-inline: calc(var(--spacing) * 3);
  }
.inset-y-0 { inset-block: calc(var(--spacing) * 0);
  }
.start { inset-inline-start: var(--spacing);
  }
.-top-3 { top: calc(var(--spacing) * -3);
  }
.top-0 { top: calc(var(--spacing) * 0);
  }
.top-1\/2 { top: 50%;
  }
.top-3 { top: calc(var(--spacing) * 3);
  }
.top-\[30\%\] { top: 30%;
  }
.top-\[74\%\] { top: 74%;
  }
.-right-4 { right: calc(var(--spacing) * -4);
  }
.right-0 { right: calc(var(--spacing) * 0);
  }
.-bottom-3 { bottom: calc(var(--spacing) * -3);
  }
.bottom-0 { bottom: calc(var(--spacing) * 0);
  }
.bottom-1\.5 { bottom: calc(var(--spacing) * 1.5);
  }
.bottom-3 { bottom: calc(var(--spacing) * 3);
  }
.-left-4 { left: calc(var(--spacing) * -4);
  }
.left-0 { left: calc(var(--spacing) * 0);
  }
.left-1\/2 { left: 50%;
  }
.left-3 { left: calc(var(--spacing) * 3);
  }
.left-\[30\%\] { left: 30%;
  }
.left-\[54\%\] { left: 54%;
  }
.z-0 { z-index: 0;
  }
.z-10 { z-index: 10;
  }
.z-20 { z-index: 20;
  }
.z-30 { z-index: 30;
  }
.z-\[15\] { z-index: 15;
  }
.col-span-1 { grid-column: span 1 / span 1;
  }
.col-span-2 { grid-column: span 2 / span 2;
  }
.col-span-3 { grid-column: span 3 / span 3;
  }
.row-span-3 { grid-row: span 3 / span 3;
  }
.row-span-6 { grid-row: span 6 / span 6;
  }
.mx-5 { margin-inline: calc(var(--spacing) * 5);
  }
.mx-auto { margin-inline: auto;
  }
.-mt-1\.5 { margin-top: calc(var(--spacing) * -1.5);
  }
.mt-0\.5 { margin-top: calc(var(--spacing) * .5);
  }
.mt-1 { margin-top: calc(var(--spacing) * 1);
  }
.mt-1\.5 { margin-top: calc(var(--spacing) * 1.5);
  }
.mt-2 { margin-top: calc(var(--spacing) * 2);
  }
.mt-3 { margin-top: calc(var(--spacing) * 3);
  }
.mt-4 { margin-top: calc(var(--spacing) * 4);
  }
.mt-5 { margin-top: calc(var(--spacing) * 5);
  }
.mt-6 { margin-top: calc(var(--spacing) * 6);
  }
.mt-8 { margin-top: calc(var(--spacing) * 8);
  }
.mt-10 { margin-top: calc(var(--spacing) * 10);
  }
.mt-auto { margin-top: auto;
  }
.mt-px { margin-top: 1px;
  }
.-mr-2 { margin-right: calc(var(--spacing) * -2);
  }
.mr-2 { margin-right: calc(var(--spacing) * 2);
  }
.mb-3 { margin-bottom: calc(var(--spacing) * 3);
  }
.mb-8 { margin-bottom: calc(var(--spacing) * 8);
  }
.-ml-2 { margin-left: calc(var(--spacing) * -2);
  }
.ml-8 { margin-left: calc(var(--spacing) * 8);
  }
.ml-auto { margin-left: auto;
  }
.block { display: block;
  }
.flex { display: flex;
  }
.grid { display: grid;
  }
.hidden { display: none;
  }
.inline { display: inline;
  }
.inline-flex { display: inline-flex;
  }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5;
  }
.aspect-\[5\/4\] { aspect-ratio: 5 / 4;
  }
.h-1\.5 { height: calc(var(--spacing) * 1.5);
  }
.h-2 { height: calc(var(--spacing) * 2);
  }
.h-2\.5 { height: calc(var(--spacing) * 2.5);
  }
.h-3 { height: calc(var(--spacing) * 3);
  }
.h-5 { height: calc(var(--spacing) * 5);
  }
.h-7 { height: calc(var(--spacing) * 7);
  }
.h-8 { height: calc(var(--spacing) * 8);
  }
.h-9 { height: calc(var(--spacing) * 9);
  }
.h-10 { height: calc(var(--spacing) * 10);
  }
.h-11 { height: calc(var(--spacing) * 11);
  }
.h-12 { height: calc(var(--spacing) * 12);
  }
.h-14 { height: calc(var(--spacing) * 14);
  }
.h-16 { height: calc(var(--spacing) * 16);
  }
.h-24 { height: calc(var(--spacing) * 24);
  }
.h-\[3px\] { height: 3px;
  }
.h-\[72px\] { height: 72px;
  }
.h-\[340px\] { height: 340px;
  }
.h-full { height: 100%;
  }
.h-px { height: 1px;
  }
.max-h-full { max-height: 100%;
  }
.min-h-11 { min-height: calc(var(--spacing) * 11);
  }
.min-h-14 { min-height: calc(var(--spacing) * 14);
  }
.w-1\/3 { width: 33.3333%;
  }
.w-2 { width: calc(var(--spacing) * 2);
  }
.w-2\.5 { width: calc(var(--spacing) * 2.5);
  }
.w-4 { width: calc(var(--spacing) * 4);
  }
.w-7 { width: calc(var(--spacing) * 7);
  }
.w-8 { width: calc(var(--spacing) * 8);
  }
.w-10 { width: calc(var(--spacing) * 10);
  }
.w-11 { width: calc(var(--spacing) * 11);
  }
.w-16 { width: calc(var(--spacing) * 16);
  }
.w-28 { width: calc(var(--spacing) * 28);
  }
.w-\[60px\] { width: 60px;
  }
.w-auto { width: auto;
  }
.w-full { width: 100%;
  }
.max-w-2xl { max-width: var(--container-2xl);
  }
.max-w-\[400px\] { max-width: 400px;
  }
.max-w-\[1280px\] { max-width: 1280px;
  }
.max-w-lg { max-width: var(--container-lg);
  }
.max-w-md { max-width: var(--container-md);
  }
.max-w-none { max-width: none;
  }
.max-w-xl { max-width: var(--container-xl);
  }
.max-w-xs { max-width: var(--container-xs);
  }
.min-w-\[200px\] { min-width: 200px;
  }
.flex-1 { flex: 1 1 0%;
  }
.flex-none { flex: 0 0 auto;
  }
.origin-left { transform-origin: 0px center;
  }
.-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  }
.-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  }
.scale-110 { --tw-scale-x: 110%;
  --tw-scale-y: 110%;
  --tw-scale-z: 110%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
  }
.rotate-45 { rotate: 45deg;
  }
.cursor-grab { cursor: grab;
  }
.cursor-pointer { cursor: pointer;
  }
.touch-none { touch-action: none;
  }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0px, 1fr));
  }
.grid-cols-\[120px_1fr\] { grid-template-columns: 120px 1fr;
  }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0px, 1fr));
  }
.flex-col { flex-direction: column;
  }
.flex-wrap { flex-wrap: wrap;
  }
.place-items-center { place-items: center;
  }
.content-start { align-content: flex-start;
  }
.items-baseline { align-items: baseline;
  }
.items-center { align-items: center;
  }
.items-end { align-items: flex-end;
  }
.items-start { align-items: flex-start;
  }
.items-stretch { align-items: stretch;
  }
.justify-between { justify-content: space-between;
  }
.justify-center { justify-content: center;
  }
.gap-1 { gap: calc(var(--spacing) * 1);
  }
.gap-1\.5 { gap: calc(var(--spacing) * 1.5);
  }
.gap-2 { gap: calc(var(--spacing) * 2);
  }
.gap-2\.5 { gap: calc(var(--spacing) * 2.5);
  }
.gap-3 { gap: calc(var(--spacing) * 3);
  }
.gap-4 { gap: calc(var(--spacing) * 4);
  }
.gap-6 { gap: calc(var(--spacing) * 6);
  }
.gap-8 { gap: calc(var(--spacing) * 8);
  }
.gap-10 { gap: calc(var(--spacing) * 10);
  }
.gap-px { gap: 1px;
  }
:where(.space-y-0\.5 > :not(:last-child)) { --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }
:where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
.gap-x-4 { column-gap: calc(var(--spacing) * 4);
  }
.gap-x-6 { column-gap: calc(var(--spacing) * 6);
  }
.gap-y-1 { row-gap: calc(var(--spacing) * 1);
  }
.gap-y-2 { row-gap: calc(var(--spacing) * 2);
  }
.gap-y-8 { row-gap: calc(var(--spacing) * 8);
  }
:where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0;
  border-bottom-style: var(--tw-border-style);
  border-top-style: var(--tw-border-style);
  border-top-width: calc(1px * var(--tw-divide-y-reverse));
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
:where(.divide-line > :not(:last-child)) { border-color: var(--color-border-default);
  }
.overflow-auto { overflow: auto;
  }
.overflow-hidden { overflow: hidden;
  }
.overflow-x-auto { overflow-x: auto;
  }
.rounded-\[4px\] { border-radius: 4px;
  }
.rounded-\[6px\] { border-radius: 6px;
  }
.rounded-control { border-radius: var(--radius-control);
  }
.rounded-none { border-radius: 0px;
  }
.rounded-panel { border-radius: var(--radius-panel);
  }
.rounded-sm { border-radius: var(--radius-sm);
  }
.border { border-style: var(--tw-border-style);
  border-width: 1px;
  }
.border-2 { border-style: var(--tw-border-style);
  border-width: 2px;
  }
.border-\[1\.5px\] { border-style: var(--tw-border-style);
  border-width: 1.5px;
  }
.border-x { border-inline-style: var(--tw-border-style);
  border-inline-width: 1px;
  }
.border-y { border-block-style: var(--tw-border-style);
  border-block-width: 1px;
  }
.border-t { border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  }
.border-b { border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  }
.border-current { border-color: currentcolor;
  }
.border-ink { border-color: var(--color-text-primary);
  }
.border-line { border-color: var(--color-border-default);
  }
.border-line-strong, .border-line-strong\/50 { border-color: var(--color-border-strong);
  }
.border-transparent { border-color: rgba(0, 0, 0, 0);
  }
.bg-\[\#F3EEE4\] { background-color: rgb(243, 238, 228);
  }
.bg-action, .bg-action\/80 { background-color: var(--color-action-primary);
  }
.bg-blue-700 { background-color: var(--color-blue-700);
  }
.bg-brown-900 { background-color: var(--color-brown-900);
  }
.bg-cream-50 { background-color: var(--color-cream-50);
  }
.bg-error-bg { background-color: var(--color-status-error-bg);
  }
.bg-fiber-200 { background-color: var(--color-fiber-200);
  }
.bg-green-700 { background-color: var(--color-green-700);
  }
.bg-ink { background-color: var(--color-text-primary);
  }
.bg-inset { background-color: var(--color-bg-inset);
  }
.bg-line { background-color: var(--color-border-default);
  }
.bg-line-strong\/50 { background-color: var(--color-border-strong);
  }
@supports (color:color-mix(in lab, red, red)) {
.bg-line-strong\/50 { background-color: color-mix(in oklab, var(--color-border-strong) 50%, transparent);
  }
}
.bg-page, .bg-page\/95 { background-color: var(--color-bg-page);
  }
@supports (color:color-mix(in lab, red, red)) {
.bg-page\/95 { background-color: color-mix(in oklab, var(--color-bg-page) 95%, transparent);
  }
}
.bg-raised { background-color: var(--color-bg-raised);
  }
.bg-success-bg { background-color: var(--color-status-success-bg);
  }
.bg-surface, .bg-surface\/90 { background-color: var(--color-bg-surface);
  }
@supports (color:color-mix(in lab, red, red)) {
.bg-surface\/90 { background-color: color-mix(in oklab, var(--color-bg-surface) 90%, transparent);
  }
}
.bg-surface\/95 { background-color: var(--color-bg-surface);
  }
@supports (color:color-mix(in lab, red, red)) {
.bg-surface\/95 { background-color: color-mix(in oklab, var(--color-bg-surface) 95%, transparent);
  }
}
.bg-transparent { background-color: rgba(0, 0, 0, 0);
  }
.bg-warning-bg { background-color: var(--color-status-warning-bg);
  }
.bg-yellow-400 { background-color: var(--color-yellow-400);
  }
.p-0 { padding: calc(var(--spacing) * 0);
  }
.p-0\.5 { padding: calc(var(--spacing) * .5);
  }
.p-1 { padding: calc(var(--spacing) * 1);
  }
.p-2 { padding: calc(var(--spacing) * 2);
  }
.p-2\.5 { padding: calc(var(--spacing) * 2.5);
  }
.p-5 { padding: calc(var(--spacing) * 5);
  }
.p-6 { padding: calc(var(--spacing) * 6);
  }
.px-1 { padding-inline: calc(var(--spacing) * 1);
  }
.px-2 { padding-inline: calc(var(--spacing) * 2);
  }
.px-2\.5 { padding-inline: calc(var(--spacing) * 2.5);
  }
.px-3 { padding-inline: calc(var(--spacing) * 3);
  }
.px-3\.5 { padding-inline: calc(var(--spacing) * 3.5);
  }
.px-4 { padding-inline: calc(var(--spacing) * 4);
  }
.px-5 { padding-inline: calc(var(--spacing) * 5);
  }
.py-1 { padding-block: calc(var(--spacing) * 1);
  }
.py-1\.5 { padding-block: calc(var(--spacing) * 1.5);
  }
.py-2 { padding-block: calc(var(--spacing) * 2);
  }
.py-3 { padding-block: calc(var(--spacing) * 3);
  }
.py-4 { padding-block: calc(var(--spacing) * 4);
  }
.py-5 { padding-block: calc(var(--spacing) * 5);
  }
.py-6 { padding-block: calc(var(--spacing) * 6);
  }
.py-8 { padding-block: calc(var(--spacing) * 8);
  }
.py-10 { padding-block: calc(var(--spacing) * 10);
  }
.py-12 { padding-block: calc(var(--spacing) * 12);
  }
.py-14 { padding-block: calc(var(--spacing) * 14);
  }
.pt-2 { padding-top: calc(var(--spacing) * 2);
  }
.pt-4 { padding-top: calc(var(--spacing) * 4);
  }
.pt-6 { padding-top: calc(var(--spacing) * 6);
  }
.pr-3 { padding-right: calc(var(--spacing) * 3);
  }
.pb-6 { padding-bottom: calc(var(--spacing) * 6);
  }
.pl-1 { padding-left: calc(var(--spacing) * 1);
  }
.pl-5 { padding-left: calc(var(--spacing) * 5);
  }
.pl-10 { padding-left: calc(var(--spacing) * 10);
  }
.text-center { text-align: center;
  }
.text-left { text-align: left;
  }
.font-display { font-family: var(--font-display);
  }
.font-sans { font-family: var(--font-sans);
  }
.text-body { font-size: var(--text-body);
  line-height: var(--tw-leading,var(--text-body--line-height));
  }
.text-caption { font-size: var(--text-caption);
  line-height: var(--tw-leading,var(--text-caption--line-height));
  }
.text-h2 { font-size: var(--text-h2);
  line-height: var(--tw-leading,var(--text-h2--line-height));
  }
.text-h3 { font-size: var(--text-h3);
  line-height: var(--tw-leading,var(--text-h3--line-height));
  }
.text-small { font-size: var(--text-small);
  line-height: var(--tw-leading,var(--text-small--line-height));
  }
.text-\[15px\] { font-size: 15px;
  }
.text-\[17px\] { font-size: 17px;
  }
.text-\[30px\] { font-size: 30px;
  }
.text-\[36px\] { font-size: 36px;
  }
.leading-\[1\.08\] { --tw-leading: 1.08;
  line-height: 1.08;
  }
.leading-none { --tw-leading: 1;
  line-height: 1;
  }
.leading-snug { --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
  }
.font-bold { --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  }
.font-medium { --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  }
.font-semibold { --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  }
.tracking-\[-0\.02em\] { --tw-tracking: -.02em;
  letter-spacing: -0.02em;
  }
.tracking-wide { --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
  }
.tracking-wider { --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  }
.whitespace-nowrap { white-space: nowrap;
  }
.text-action { color: var(--color-action-primary);
  }
.text-brown-900 { color: var(--color-brown-900);
  }
.text-error { color: var(--color-status-error);
  }
.text-ink { color: var(--color-text-primary);
  }
.text-ink-2 { color: var(--color-text-secondary);
  }
.text-inverse, .text-inverse\/60 { color: var(--color-text-inverse);
  }
@supports (color:color-mix(in lab, red, red)) {
.text-inverse\/60 { color: color-mix(in oklab, var(--color-text-inverse) 60%, transparent);
  }
}
.text-inverse\/75 { color: var(--color-text-inverse);
  }
@supports (color:color-mix(in lab, red, red)) {
.text-inverse\/75 { color: color-mix(in oklab, var(--color-text-inverse) 75%, transparent);
  }
}
.text-inverse\/80 { color: var(--color-text-inverse);
  }
@supports (color:color-mix(in lab, red, red)) {
.text-inverse\/80 { color: color-mix(in oklab, var(--color-text-inverse) 80%, transparent);
  }
}
.text-inverse\/85 { color: var(--color-text-inverse);
  }
@supports (color:color-mix(in lab, red, red)) {
.text-inverse\/85 { color: color-mix(in oklab, var(--color-text-inverse) 85%, transparent);
  }
}
.text-success { color: var(--color-status-success);
  }
.text-warning { color: var(--color-status-warning);
  }
.text-yellow-400 { color: var(--color-yellow-400);
  }
.uppercase { text-transform: uppercase;
  }
.not-italic { font-style: normal;
  }
.tabular-nums { --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
.decoration-action { text-decoration-color: var(--color-action-primary);
  }
.decoration-2 { text-decoration-thickness: 2px;
  }
.underline-offset-4 { text-underline-offset: 4px;
  }
.opacity-80 { opacity: 0.8;
  }
.opacity-90 { opacity: 0.9;
  }
.shadow-overlay { --tw-shadow: var(--elevation-overlay);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
.shadow-popover { --tw-shadow: var(--elevation-popover);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
.filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
.backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm));
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
.transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
  transition-duration: var(--tw-duration,var(--default-transition-duration));
  }
.duration-\[var\(--duration-fast\)\] { --tw-duration: var(--duration-fast);
  transition-duration: var(--duration-fast);
  }
.select-none { user-select: none;
  }
@media (hover: hover) {
.group-hover\:scale-\[1\.03\]:is(:where(.group):hover *) { scale: 1.03;
  }
.group-hover\:underline:is(:where(.group):hover *) { text-decoration-line: underline;
  }
}
.after\:absolute::after { content: var(--tw-content);
  position: absolute;
  }
.after\:inset-0::after { content: var(--tw-content);
  inset: calc(var(--spacing) * 0);
  }
.after\:rounded-panel::after { content: var(--tw-content);
  border-radius: var(--radius-panel);
  }
@media (hover: hover) {
.hover\:border-ink:hover { border-color: var(--color-text-primary);
  }
.hover\:bg-inset:hover, .hover\:bg-inset\/60:hover { background-color: var(--color-bg-inset);
  }
.hover\:bg-page:hover { background-color: var(--color-bg-page);
  }
.hover\:bg-yellow-400:hover { background-color: var(--color-yellow-400);
  }
.hover\:text-ink:hover { color: var(--color-text-primary);
  }
.hover\:underline:hover { text-decoration-line: underline;
  }
.hover\:opacity-100:hover { opacity: 1;
  }
}
.focus\:outline-none:focus { --tw-outline-style: none;
  outline-style: none;
  }
.focus-visible\:bg-info-bg:focus-visible { background-color: var(--color-status-info-bg);
  }
.focus-visible\:outline-offset-\[-4px\]:focus-visible { outline-offset: -4px;
  }
.focus-visible\:outline-none:focus-visible { --tw-outline-style: none;
  outline-style: none;
  }
.focus-visible\:after\:outline-3:focus-visible::after { content: var(--tw-content);
  outline-style: var(--tw-outline-style);
  outline-width: 3px;
  }
.focus-visible\:after\:outline-offset-4:focus-visible::after { content: var(--tw-content);
  outline-offset: 4px;
  }
.focus-visible\:after\:outline-focus:focus-visible::after { content: var(--tw-content);
  outline-color: var(--color-focus-ring);
  }
.active\:cursor-grabbing:active { cursor: grabbing;
  }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed;
  }
.disabled\:text-ink-2\/50:disabled { color: var(--color-text-secondary);
  }
@supports (color:color-mix(in lab, red, red)) {
.disabled\:text-ink-2\/50:disabled { color: color-mix(in oklab, var(--color-text-secondary) 50%, transparent);
  }
}
@container not (width >= 48rem) {
.\@max-3xl\:hidden { display: none;
  }
}
@container (width >= 900px) {
.\@min-\[900px\]\:sticky { position: sticky;
  }
.\@min-\[900px\]\:top-24 { top: calc(var(--spacing) * 24);
  }
.\@min-\[900px\]\:aspect-\[5\/5\] { aspect-ratio: 5 / 5;
  }
.\@min-\[900px\]\:grid-cols-\[minmax\(0\,1\.15fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr);
  }
.\@min-\[900px\]\:gap-12 { gap: calc(var(--spacing) * 12);
  }
.\@min-\[900px\]\:self-start { align-self: flex-start;
  }
}
@container (width >= 48rem) {
.\@3xl\:block { display: block;
  }
.\@3xl\:hidden { display: none;
  }
.\@3xl\:h-\[480px\] { height: 480px;
  }
.\@3xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
.\@3xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
.\@3xl\:grid-cols-\[1\.3fr_1fr_1fr\] { grid-template-columns: 1.3fr 1fr 1fr;
  }
.\@3xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.1fr\)\] { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.1fr);
  }
.\@3xl\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr) minmax(0px, 1fr);
  }
.\@3xl\:items-end { align-items: flex-end;
  }
.\@3xl\:p-8 { padding: calc(var(--spacing) * 8);
  }
.\@3xl\:px-8 { padding-inline: calc(var(--spacing) * 8);
  }
.\@3xl\:py-10 { padding-block: calc(var(--spacing) * 10);
  }
.\@3xl\:py-12 { padding-block: calc(var(--spacing) * 12);
  }
.\@3xl\:py-16 { padding-block: calc(var(--spacing) * 16);
  }
.\@3xl\:py-20 { padding-block: calc(var(--spacing) * 20);
  }
.\@3xl\:text-display { font-size: var(--text-display);
  line-height: var(--tw-leading,var(--text-display--line-height));
  }
.\@3xl\:text-h1 { font-size: var(--text-h1);
  line-height: var(--tw-leading,var(--text-h1--line-height));
  }
}
@container (width >= 56rem) {
.\@4xl\:col-span-4 { grid-column: span 4 / span 4;
  }
.\@4xl\:col-span-8 { grid-column: span 8 / span 8;
  }
.\@4xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0px, 1fr));
  }
.\@4xl\:grid-cols-\[240px_1fr\] { grid-template-columns: 240px 1fr;
  }
.\@4xl\:grid-cols-\[minmax\(0\,4fr\)_minmax\(0\,7fr\)\] { grid-template-columns: minmax(0px, 4fr) minmax(0px, 7fr);
  }
.\@4xl\:flex-col { flex-direction: column;
  }
.\@4xl\:gap-16 { gap: calc(var(--spacing) * 16);
  }
.\@4xl\:border-r { border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  }
.\@4xl\:border-b-0 { border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
  }
.\@4xl\:border-l-\[3px\] { border-left-style: var(--tw-border-style);
  border-left-width: 3px;
  }
.\@4xl\:border-action { border-color: var(--color-action-primary);
  }
.\@4xl\:border-transparent { border-color: rgba(0, 0, 0, 0);
  }
}
@container (width >= 64rem) {
.\@5xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr));
  }
.\@5xl\:grid-cols-\[minmax\(0\,5fr\)_minmax\(0\,6fr\)\] { grid-template-columns: minmax(0px, 5fr) minmax(0px, 6fr);
  }
.\@5xl\:gap-16 { gap: calc(var(--spacing) * 16);
  }
.\@5xl\:gap-x-6 { column-gap: calc(var(--spacing) * 6);
  }
}
}

:root { --habi-cream-50: #fffcf6;
  --habi-cream-100: #f8f4ea;
  --habi-fiber-200: #ede1cb;
  --habi-fiber-300: #dccbab;
  --habi-fiber-500: #b08f62;
  --habi-brown-900: #352820;
  --habi-brown-600: #6d5a4b;
  --habi-brown-400: #8c7764;
  --habi-rust-600: #a8462c;
  --habi-rust-700: #873620;
  --habi-yellow-400: #e8b94d;
  --habi-green-700: #436d51;
  --habi-blue-700: #426a94;
  --color-bg-page: var(--habi-cream-100);
  --color-bg-surface: var(--habi-cream-50);
  --color-bg-inset: var(--habi-fiber-200);
  --color-bg-raised: #fff;
  --color-text-primary: var(--habi-brown-900);
  --color-text-secondary: var(--habi-brown-600);
  --color-text-inverse: var(--habi-cream-50);
  --color-border-default: #dccfb8;
  --color-border-strong: var(--habi-brown-400);
  --color-action-primary: var(--habi-rust-600);
  --color-action-primary-hover: var(--habi-rust-700);
  --color-action-foreground: var(--habi-cream-50);
  --color-focus-ring: var(--habi-blue-700);
  --color-status-success: #3b6346;
  --color-status-success-bg: #e5eee3;
  --color-status-warning: #7a4e06;
  --color-status-warning-bg: #f9edcf;
  --color-status-error: #9e2f1d;
  --color-status-error-bg: #f8e3dc;
  --color-status-info: #375a80;
  --color-status-info-bg: #e3ebf3;
  --color-decorative-rust: var(--habi-rust-600);
  --color-decorative-yellow: var(--habi-yellow-400);
  --color-decorative-green: var(--habi-green-700);
  --color-decorative-blue: var(--habi-blue-700);
  --duration-fast: .12s;
  --duration-standard: .24s;
  --duration-expressive: .42s;
  --duration-viewer: .7s;
  --ease-weave: cubic-bezier(.2, .7, .2, 1);
  --elevation-overlay: 0 1px 2px #35282014, 0 16px 40px -12px #35282047;
  --elevation-popover: 0 1px 2px #35282014, 0 8px 20px -8px #35282038;
  }

@media (prefers-reduced-motion: reduce) {
:root { --duration-fast: .01ms;
  --duration-standard: .01ms;
  --duration-expressive: .01ms;
  --duration-viewer: .01ms;
  }
}

.anim-fade-up { animation: habi-fade-up var(--duration-standard) var(--ease-weave) both;
  }

.anim-fade { animation: habi-fade var(--duration-standard) var(--ease-weave) both;
  }

@property --tw-translate-x { syntax: "*";
  inherits: false;
  initial-value: 0;
  }

@property --tw-translate-y { syntax: "*";
  inherits: false;
  initial-value: 0;
  }

@property --tw-scale-x { syntax: "*";
  inherits: false;
  initial-value: 1;
  }

@property --tw-scale-y { syntax: "*";
  inherits: false;
  initial-value: 1;
  }

@property --tw-space-y-reverse { syntax: "*";
  inherits: false;
  initial-value: 0;
  }

@property --tw-divide-y-reverse { syntax: "*";
  inherits: false;
  initial-value: 0;
  }

@property --tw-border-style { syntax: "*";
  inherits: false;
  initial-value: solid;
  }

@property --tw-leading { syntax: "*";
  inherits: false;
  }

@property --tw-ordinal { syntax: "*";
  inherits: false;
  }

@property --tw-slashed-zero { syntax: "*";
  inherits: false;
  }

@property --tw-numeric-figure { syntax: "*";
  inherits: false;
  }

@property --tw-numeric-spacing { syntax: "*";
  inherits: false;
  }

@property --tw-numeric-fraction { syntax: "*";
  inherits: false;
  }

@property --tw-shadow { syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
  }

@property --tw-inset-shadow { syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
  }

@property --tw-ring-shadow { syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
  }

@property --tw-inset-ring-shadow { syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
  }

@property --tw-ring-offset-shadow { syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
  }

@property --tw-outline-style { syntax: "*";
  inherits: false;
  initial-value: solid;
  }

@property --tw-blur { syntax: "*";
  inherits: false;
  }

@property --tw-brightness { syntax: "*";
  inherits: false;
  }

@property --tw-contrast { syntax: "*";
  inherits: false;
  }

@property --tw-grayscale { syntax: "*";
  inherits: false;
  }

@property --tw-hue-rotate { syntax: "*";
  inherits: false;
  }

@property --tw-invert { syntax: "*";
  inherits: false;
  }

@property --tw-saturate { syntax: "*";
  inherits: false;
  }

@property --tw-sepia { syntax: "*";
  inherits: false;
  }

@property --tw-drop-shadow { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-blur { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-brightness { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-contrast { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-grayscale { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-hue-rotate { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-invert { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-opacity { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-saturate { syntax: "*";
  inherits: false;
  }

@property --tw-backdrop-sepia { syntax: "*";
  inherits: false;
  }

@property --tw-duration { syntax: "*";
  inherits: false;
  }

@property --tw-ease { syntax: "*";
  inherits: false;
  }

@property --tw-content { syntax: "*";
  inherits: false;
  initial-value: "";
  }

@keyframes habi-fade-up { 
  0% { opacity: 0;
  transform: translateY(8px);
  }
}

@keyframes habi-fade { 
  0% { opacity: 0;
  }
}

@keyframes habi-weave-load { 
  0%, 100% { transform: scaleX(0.2);
  }
  50% { transform: scaleX(1);
  }
}

@keyframes spin { 
  100% { transform: rotate(360deg);
  }
}

/* Native PHP/Three.js integration; published visual components above stay unchanged. */
[hidden] { display: none !important; }
dialog:not([open]) { display: none; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 300; transform: translateY(-200%); background: var(--color-action-primary); color: var(--color-action-foreground); min-height: 44px; padding: 10px 20px; border-radius: var(--radius-control); }
.skip-link:focus { transform: none; }
#mobile-menu { margin: 0; inset: 0 auto 0 0; padding: 0; border: 0; width: 100%; max-width: 400px; height: 100dvh; max-height: none; color: var(--color-text-primary); overflow-y: auto; overscroll-behavior: contain; }
#mobile-menu::backdrop { background: color-mix(in srgb, var(--habi-brown-900) 45%, transparent); }
.object-contain { object-fit: contain; }
.viewer__stage { position: absolute; inset: 0; }
.viewer__holder { position: absolute; inset: 0; }
.viewer__holder canvas { display: block; width: 100%; height: 100%; }
.viewer__fallback-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
[data-viewer-loading], [data-viewer-error], [data-viewer-nowebgl] { z-index: 5; }
[data-viewer-dialog] { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; border: 0; color: var(--color-text-primary); overflow-y: auto; overscroll-behavior: contain; }
[data-viewer-dialog]::backdrop { background: var(--habi-brown-900); }
[data-viewer-dialog] [data-viewer] { height: 100%; display: flex; flex-direction: column; }
[data-viewer-dialog] [data-viewer] > div { flex: 1; min-height: 0; aspect-ratio: auto; }
[data-viewer-dialog] .viewer__note { min-height: 3.25rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  [data-viewer-loading] [style*="animation"] { animation: none !important; transform: none; }
}

/* M4 cart: published cart drawer/page/toast components and the exact
 * reference utilities they consume (fit-igloo-66636772.figma.site). */

.btn--tertiary { background: rgba(0, 0, 0, 0); color: var(--color-text-primary); text-underline-offset: 4px; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--color-border-strong); padding-left: 10px; padding-right: 10px; }
.btn--tertiary:hover:not(:disabled), .btn--tertiary[data-force="hover"] { color: var(--color-action-primary-hover); text-decoration-color: var(--color-action-primary); }
.btn--tertiary:active:not(:disabled), .btn--tertiary[data-force="active"] { background: var(--color-bg-inset); }
.btn--tertiary:disabled { background: rgba(0, 0, 0, 0); text-decoration-color: rgba(0, 0, 0, 0); }

.anim-slide-in { animation: habi-slide-in var(--duration-standard) var(--ease-weave) both; }
@keyframes habi-slide-in { 0% { transform: translate(100%); } }

/* Utilities consumed by the cart templates, ported from the reference build. */
.w-3 { width: calc(var(--spacing) * 3); }
.w-20 { width: calc(var(--spacing) * 20); }
.w-24 { width: calc(var(--spacing) * 24); }
.px-6 { padding-inline: calc(var(--spacing) * 6); }
.py-0\.5 { padding-block: calc(var(--spacing) * .5); }
.mb-4 { margin-bottom: calc(var(--spacing) * 4); }
.-right-1 { right: calc(var(--spacing) * -1); }
.-bottom-1 { bottom: calc(var(--spacing) * -1); }
.overflow-y-auto { overflow-y: auto; }
.overscroll-contain { overscroll-behavior: contain; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-\[1180px\] { max-width: 1180px; }
.h-\[18px\] { height: 18px; }
.min-w-\[18px\] { min-width: 18px; }
.font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }
.text-on-action { color: var(--color-action-foreground); }
.text-cream-50 { color: var(--color-cream-50); }
.text-cream-50\/80 { color: color-mix(in srgb, var(--color-cream-50) 80%, transparent); }
.bg-brown-900\/45 { background-color: color-mix(in srgb, var(--color-brown-900) 45%, transparent); }
.self-start { align-self: flex-start; }
.rounded-l-\[4px\] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.rounded-r-\[4px\] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
:where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); }
@container (width >= 56rem) {
  .\@4xl\:grid-cols-\[minmax\(0\,1fr\)_360px\] { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* Cart drawer: native dialog, right panel, full width on narrow screens.
   display:flex only while open so the closed dialog never paints. */
#cart-drawer { margin: 0; inset: 0 0 0 auto; padding: 0; border: 0; width: 100%; max-width: 400px; height: 100dvh; max-height: none; color: var(--color-text-primary); overflow-y: auto; overscroll-behavior: contain; }
#cart-drawer[open] { display: flex; flex-direction: column; }
#cart-drawer:not([open]) { display: none; }
#cart-drawer::backdrop { background: color-mix(in srgb, var(--habi-brown-900) 45%, transparent); }

/* Transient confirmation toasts (reference dark bar, check/alert glyph). */
.toast-region { position: fixed; bottom: 16px; left: 16px; z-index: 60; display: flex; flex-direction: column; gap: 12px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast-region > * { pointer-events: auto; }

/* Reference 40px stepper anatomy with a ≥44px touch/keyboard hit target. */
[data-cart-step]::after { content: ""; position: absolute; inset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .anim-slide-in, .anim-fade, .anim-fade-up { animation: none !important; }
}
.top-1 { top: var(--spacing); }
.right-1 { right: var(--spacing); }

/* M5 checkout: published checkout application example and the exact
 * reference utilities it consumes (fit-igloo-66636772.figma.site). */

.py-2\.5 { padding-block: calc(var(--spacing) * 2.5); }
.mb-2 { margin-bottom: calc(var(--spacing) * 2); }
.mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.ml-1 { margin-left: calc(var(--spacing) * 1); }
.gap-5 { gap: calc(var(--spacing) * 5); }
.p-4 { padding: calc(var(--spacing) * 4); }
.pt-3 { padding-top: calc(var(--spacing) * 3); }
.pb-4 { padding-bottom: calc(var(--spacing) * 4); }
.min-w-0 { min-width: 0; }
.min-w-4 { min-width: calc(var(--spacing) * 4); }
.w-12 { width: calc(var(--spacing) * 12); }
.w-\[52px\] { width: 52px; }
.h-fit { height: fit-content; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.max-w-\[640px\] { max-width: 640px; }
.max-w-\[720px\] { max-width: 720px; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.font-mono { font-family: var(--font-mono); }
.underline { text-decoration-line: underline; }
.underline-offset-2 { text-underline-offset: 2px; }
.border-dashed { --tw-border-style: dashed; border-style: dashed; }
.transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }
.duration-\[var\(--duration-standard\)\] { --tw-duration: var(--duration-standard); transition-duration: var(--duration-standard); }
.last\:flex-none:last-child { flex: none; }
:where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); }
.text-info { color: var(--color-status-info); }
.bg-info-bg { background-color: var(--color-status-info-bg); }
.border-info\/30 { border-color: var(--color-status-info); }
.border-error\/30 { border-color: var(--color-status-error); }
@supports (color:color-mix(in lab, red, red)) {
  .border-info\/30 { border-color: color-mix(in oklab, var(--color-status-info) 30%, transparent); }
  .border-error\/30 { border-color: color-mix(in oklab, var(--color-status-error) 30%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:animate-spin { animation: spin 1s linear infinite; }
}

@container (width >= 42rem) {
  .\@2xl\:col-span-2 { grid-column: span 2 / span 2; }
  .\@2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@container (width >= 48rem) {
  .\@3xl\:col-span-2 { grid-column: span 2 / span 2; }
  .\@3xl\:p-10 { padding: calc(var(--spacing) * 10); }
  .\@3xl\:py-10 { padding-block: calc(var(--spacing) * 10); }
  .\@3xl\:py-16 { padding-block: calc(var(--spacing) * 16); }
  .\@3xl\:text-h1 { font-size: var(--text-h1); line-height: var(--text-h1--line-height); }
}
@container (width >= 56rem) {
  .\@4xl\:hidden { display: none; }
  .\@4xl\:block { display: block; }
  .\@4xl\:sticky { position: sticky; }
  .\@4xl\:top-24 { top: calc(var(--spacing) * 24); }
  .\@4xl\:grid-cols-\[minmax\(0\,1fr\)_380px\] { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* Order summary disclosure: native <details>, no marker, chevron flips open. */
[data-checkout-summary] > summary { list-style: none; }
[data-checkout-summary] > summary::-webkit-details-marker { display: none; }
[data-checkout-summary][open] [data-checkout-chevron] { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  [data-checkout-processing] [style] { animation: none !important; }
}

/* M6 admin: published Admin application example (dashboard, products,
 * inventory, orders, stock audit, dialogs) and the exact reference
 * utilities it consumes (fit-igloo-66636772.figma.site). */

.btn--destructive { background: var(--color-status-error); color: #fff; }
.btn--destructive:hover:not(:disabled), .btn--destructive[data-force="hover"] { background: #7f2414; }
.btn--destructive:active:not(:disabled), .btn--destructive[data-force="active"] { background: #651c10; }
/* File inputs live inside a labelled .btn; show the keyboard focus on it. */
.btn:has(> input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.fixed { position: fixed; }
.z-50 { z-index: 50; }
.align-middle { vertical-align: middle; }
.col-start-2 { grid-column-start: 2; }
.gap-x-3 { column-gap: calc(var(--spacing) * 3); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; }
.justify-end { justify-content: flex-end; }
.justify-self-start { justify-self: start; }
.max-w-\[420px\] { max-width: 420px; }
.max-w-\[520px\] { max-width: 520px; }
.min-h-0 { min-height: 0; }
.min-h-dvh { min-height: 100dvh; }
.min-w-\[420px\] { min-width: 420px; }
.min-w-\[640px\] { min-width: 640px; }
.mb-5 { margin-bottom: calc(var(--spacing) * 5); }
.ml-1\.5 { margin-left: calc(var(--spacing) * 1.5); }
.mr-auto { margin-right: auto; }
.p-3 { padding: calc(var(--spacing) * 3); }
.pb-3 { padding-bottom: calc(var(--spacing) * 3); }
.pr-20 { padding-right: calc(var(--spacing) * 20); }
.pt-1 { padding-top: calc(var(--spacing) * 1); }
.px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); }
.w-6 { width: calc(var(--spacing) * 6); }
.w-44 { width: calc(var(--spacing) * 44); }
.w-52 { width: calc(var(--spacing) * 52); }
.text-\[26px\] { font-size: 26px; }
.bg-success { background-color: var(--color-status-success); }
.bg-warning { background-color: var(--color-status-warning); }
.break-words { overflow-wrap: break-word; }
.border-success\/30 { border-color: var(--color-status-success); }
@supports (color:color-mix(in lab, red, red)) {
  .border-success\/30 { border-color: color-mix(in oklab, var(--color-status-success) 30%, transparent); }
}

@container (width >= 42rem) {
  .\@2xl\:col-start-3 { grid-column-start: 3; }
  .\@2xl\:grid-cols-\[auto_1fr_auto\] { grid-template-columns: auto 1fr auto; }
  .\@2xl\:grid-cols-\[minmax\(0\,1fr\)_200px\] { grid-template-columns: minmax(0, 1fr) 200px; }
  .\@2xl\:items-end { align-items: flex-end; }
}
@container (width >= 48rem) {
  .\@3xl\:p-6 { padding: calc(var(--spacing) * 6); }
}
@container (width >= 56rem) {
  .\@4xl\:flex { display: flex; }
  .\@4xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .\@4xl\:grid-cols-\[232px_1fr\] { grid-template-columns: 232px 1fr; }
  .\@4xl\:h-full { height: 100%; }
  .\@4xl\:mt-auto { margin-top: auto; }
  .\@4xl\:p-3 { padding: calc(var(--spacing) * 3); }
}
@container (width >= 64rem) {
  .\@5xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.4fr\)\] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .\@5xl\:grid-cols-\[minmax\(0\,1\.4fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* M7 (R25): on touch (coarse-pointer) devices compact reference controls
 * grow to a 44 px target; fine-pointer layouts keep the published sizes.
 * .touch-link does the same for inline text links without changing their
 * fine-pointer line layout. .touch-stepper wraps 44 px stepper buttons
 * inside a 1.5 px border. */
@media (pointer: coarse) {
  .btn--sm, .touch-target { min-height: 44px; }
  .touch-target { min-width: 44px; }
  .touch-link { display: inline-flex; align-items: center; min-height: 44px; }
  .touch-stepper { min-height: 47px; }
}