/* apps/web/src/hub.css */
@font-face {
  font-family: Jakarta;
  src: url(/assets/jakarta-400.ttf);
}
@font-face {
  font-family: Jakarta;
  src: url(/assets/jakarta-600.ttf);
  font-weight: 600;
}
@font-face {
  font-family: Jakarta;
  src: url(/assets/jakarta-700.ttf);
  font-weight: 700;
}
:root {
  font-family: Jakarta, sans-serif;
  color: #262923;
  background: #f8f8f5;
  font-synthesis: none;
  --stone: #e4ded4;
  --green: #354f3b;
  --line: #eaece7;
  --muted: #7b7f75;
  --sage: #ebf5ec;
  --sarah: #8ebfa2;
  --alex: #80b5dc;
  --maya: #e693b3;
  --leo: #b392d5;
  --hour: 48px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button {
  border: 0;
  background: none;
}
a {
  color: inherit;
  text-decoration: none;
}
p,
h1,
h2,
h3 {
  margin: 0;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #588bca;
  outline-offset: 3px;
}
button:hover {
  filter: brightness(0.97);
}
[hidden] {
  display: none !important;
}
.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  vertical-align: middle;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.skip {
  position: fixed;
  top: -100px;
  z-index: 200;
  background: white;
  padding: 15px;
}
.skip:focus {
  top: 8px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.8px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #354f3b;
  color: #fff;
  font-size: 20px;
  letter-spacing: -4px;
  padding-right: 4px;
}
.toolbar {
  height: 67px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fcfcfa;
  border-bottom: 1px solid #dddeda;
}
.toolbar-left,
.toolbar-right,
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toolbar .context {
  font-size: 11px;
  color: var(--muted);
  border-left: 1px solid #ddd;
  padding-left: 16px;
}
.toolbar a:last-child {
  font-size: 12px;
}
.switcher {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 99px;
  background: #e9ebe6;
}
.switcher button {
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 12px;
  white-space: nowrap;
}
.switcher button[aria-pressed=true] {
  background: #fff;
  box-shadow: 0 2px 6px #0000000d;
  color: #284832;
}
.pill {
  padding: 10px 17px;
  border-radius: 99px;
  background: #f5f5f2;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  white-space: nowrap;
}
.primary {
  background: var(--green);
  color: white;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #7b7d6c;
}
.avatar {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--member, #eceee5);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.sarah {
  --member: var(--sarah);
  --pastel: #dceee2;
}
.alex {
  --member: var(--alex);
  --pastel: #cde6f5;
}
.maya {
  --member: var(--maya);
  --pastel: #f9d5e3;
}
.leo {
  --member: var(--leo);
  --pastel: #e6d2f2;
}
.house {
  --member: #768363;
  --pastel: #edf2e8;
}
.avatar.house {
  color: #46543d;
}
.avatar:not(.house) {
  background: var(--member);
}
.face {
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background: #f1eee8;
  display: grid;
  place-items: center;
  font-size: 30px;
  box-shadow: inset 0 0 0 6px #fbfaf7;
}
.site-back {
  font-size: 11px;
  color: #72766b;
}
.surface {
  min-width: 0;
}
.calendar-shell {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  background: white;
  min-height: calc(100vh - 67px);
}
.icon-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #edf4f7;
  padding: 16px 5px;
  color: #727e82;
}
.rail-mark {
  font-family: Georgia, serif;
  font-size: 35px;
  margin: 0 0 16px;
  color: #6e8b87;
  line-height: 1;
}
.icon-rail button {
  width: 76px;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10px;
  border-radius: 12px;
}
.icon-rail button[aria-pressed=true] {
  background: white;
  color: #3d554a;
}
.icon-rail .bottom {
  margin-top: auto;
}
.calendar-main {
  min-width: 0;
  position: relative;
}
.family-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 25px 15px;
  gap: 15px;
}
.family-header h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -1px;
  white-space: nowrap;
}
.family-header time {
  font-size: 27px;
  margin-left: 15px;
}
.header-members {
  display: flex;
  gap: 8px;
}
.header-members .avatar {
  width: 42px;
  height: 42px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.progress-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  padding: 19px 26px 24px;
}
.member-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.member-progress .avatar {
  height: 47px;
  width: 47px;
  font-size: 17px;
}
.progress-info {
  flex: 1;
}
.progress-info .row {
  justify-content: space-between;
  font-size: 14px;
  gap: 5px;
}
.progress-info output,
#home-panel [data-preview-count] {
  font-size: 12px;
  color: #92968e;
}
.progress-track {
  height: 9px;
  border-radius: 99px;
  background: #e8ebef;
  overflow: hidden;
  margin-top: 9px;
}
.progress-track span {
  display: block;
  background: var(--member);
  height: 100%;
  border-radius: 99px;
  transition: width 0.2s;
}
.calendar-scroll {
  overflow: auto;
  padding-right: 15px;
}
.week-grid {
  min-width: 780px;
  display: grid;
  grid-template-columns: 65px repeat(5, minmax(0, 1fr));
}
.day-head {
  text-align: center;
  padding: 7px 3px 12px;
  font-family: Georgia, serif;
  font-size: 29px;
  border-bottom: 1px solid var(--line);
}
.day-head b {
  font-weight: 400;
}
.day-head.today b {
  background: #df957f;
  color: white;
  border-radius: 50%;
  padding: 4px 7px;
  margin-left: 3px;
}
.meal-pill {
  display: block;
  text-align: left;
  font: 12px Jakarta, sans-serif;
  padding: 7px 10px;
  background: #ffccb6;
  border-radius: 99px;
  margin-top: 14px;
  width: 100%;
  white-space: nowrap;
}
.meal-pill.empty {
  background: #f4f3ee;
  color: #93968d;
}
.time-axis {
  height: calc(var(--hour) * 11);
  position: relative;
}
.time-label {
  position: absolute;
  right: 9px;
  font-size: 12px;
  color: #62665f;
  top: calc(var(--h) * var(--hour));
  transform: translateY(-4px);
}
.day-track {
  height: calc(var(--hour) * 11);
  border-left: 1px solid #eceee8;
  position: relative;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--hour) - 1px),
      #eceee8 calc(var(--hour) - 1px),
      #eceee8 var(--hour));
}
.calendar-event {
  position: absolute;
  top: calc(var(--start) * var(--hour));
  height: max(48px, calc(var(--duration) * var(--hour) - 3px));
  left: 2px;
  right: 2px;
  background: var(--pastel);
  border-radius: 18px;
  padding: 11px 12px 31px;
  text-align: left;
  line-height: 1.3;
  overflow: hidden;
}
.calendar-event {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.calendar-event strong {
  font-size: 14px;
  display: block;
  font-weight: 600;
}
.calendar-event small {
  font-size: 11px;
  display: block;
  margin-top: 3px;
}
.calendar-event .avatar {
  position: absolute;
  bottom: 7px;
  right: 9px;
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.calendar-event:hover {
  box-shadow: 0 5px 16px #313a3a20;
  z-index: 2;
  filter: brightness(0.98);
}
.fab {
  position: fixed;
  bottom: 25px;
  right: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #8b69bd;
  color: white;
  font-size: 43px;
  line-height: 1;
  box-shadow: 0 6px 20px #6c4c9430;
  z-index: 5;
}
.board-panel {
  padding: 30px;
  min-height: 610px;
}
.board-panel h2 {
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  margin-bottom: 22px;
}
.chore-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.chore-column {
  background: #fafbf8;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.chore-column h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
  font-size: 15px;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.check-row:last-child {
  border: 0;
}
.check-row input {
  accent-color: #65856b;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.check-row input:checked + span {
  text-decoration: line-through;
  color: #899183;
}
.meal-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}
.meal-day {
  background: #fff0e7;
  border-radius: 18px;
  padding: 25px 17px;
  min-height: 190px;
}
.meal-day h3 {
  font-size: 14px;
}
.meal-day p {
  font-family: Georgia, serif;
  font-size: 24px;
  margin: 20px 0;
}
.meal-day img {
  width: 100%;
  border-radius: 10px;
}
.list-card {
  max-width: 600px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 15px 25px;
  background: white;
}
.inline-add {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.inline-add input {
  min-width: 0;
  flex: 1;
  padding: 12px;
  border: 1px solid #dedfd8;
  border-radius: 12px;
}
.inbox-note {
  max-width: 600px;
  padding: 22px;
  border-radius: 18px;
  background: #f4f5ed;
  line-height: 1.8;
  margin-bottom: 15px;
  font-size: 14px;
}
.stone-frame {
  background-color: var(--stone);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23887b66' opacity='.07' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  padding: 22px;
  min-height: calc(100vh - 67px);
}
.kylon-shell {
  display: grid;
  grid-template-columns: 56px 218px minmax(300px, 1fr) minmax(355px, 1.08fr);
  min-height: 740px;
  height: calc(100vh - 111px);
  background: white;
  border: 1px solid #d6d1c8;
  border-radius: 22px;
  overflow: hidden;
  max-width: 1800px;
  margin: auto;
}
.kylon-rail {
  border-right: 1px solid #f1f1ed;
  padding: 19px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  color: #676b5c;
}
.kylon-rail button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.kylon-rail button[aria-pressed=true] {
  background: #f0f2eb;
}
.kylon-rail .brand-mark {
  width: 28px;
  height: 28px;
  font-size: 17px;
}
.kylon-rail .bottom {
  margin-top: auto;
}
.channels {
  border-right: 1px solid #f0f0ec;
  padding: 24px 14px;
  overflow: auto;
}
.channels h2 {
  font-size: 20px;
  margin: 0 7px 20px;
}
.filter-tabs {
  display: flex;
  gap: 2px;
  justify-content: space-between;
  margin-bottom: 30px;
}
.filter-tabs button {
  font-size: 10px;
  padding: 7px 6px;
  border-radius: 99px;
  white-space: nowrap;
}
.filter-tabs button[aria-pressed=true] {
  background: #f1f3ec;
  font-weight: 600;
}
.channels h3 {
  font-size: 12px;
  margin: 22px 7px 13px;
}
.dm {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 7px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  position: relative;
}
.dm .avatar {
  width: 33px;
  height: 33px;
  font-size: 11px;
}
.dm .dm-copy {
  flex: 1;
  min-width: 0;
}
.dm strong {
  font-size: 12px;
  display: block;
}
.dm small {
  display: block;
  font-size: 10px;
  color: #94968a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 125px;
  margin-top: 4px;
}
.unread {
  font-size: 9px;
  display: inline-grid;
  place-items: center;
  background: #788660;
  color: white;
  border-radius: 99px;
  width: 17px;
  height: 17px;
}
.presence {
  position: absolute;
  height: 8px;
  width: 8px;
  background: #729768;
  border: 2px solid white;
  left: 32px;
  top: 36px;
  border-radius: 50%;
}
.channel {
  padding: 12px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 12px;
  text-align: left;
  border-radius: 8px;
}
.channel[aria-pressed=true],
.dm[aria-pressed=true] {
  background: #f2f3ee;
}
.channel span:first-child {
  font-size: 19px;
  color: #8e9482;
}
.chat-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #fff;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid #f1f1ed;
}
.chat-head h2 {
  font-size: 17px;
}
.chat-head p {
  font-size: 10px;
  color: #8a8d80;
  margin-top: 5px;
}
.chat-head .icon {
  margin-left: auto;
  color: #7d8372;
}
.chat-scroll {
  overflow: auto;
  flex: 1;
  padding: 20px 22px;
  scroll-behavior: smooth;
}
.chat-date {
  text-align: center;
  font-size: 9px;
  color: #92978a;
  margin-bottom: 20px;
}
.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 19px;
}
.message > .avatar {
  height: 31px;
  width: 31px;
  font-size: 10px;
  margin-top: 2px;
}
.message-body {
  min-width: 0;
  flex: 1;
}
.message-byline {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.message-byline time {
  color: #96998e;
  font-size: 9px;
}
.bot-badge {
  font-size: 8px;
  padding: 3px 5px;
  background: #eeeee7;
  border-radius: 4px;
  color: #6e785d;
}
.bubble {
  background: #f3f4f0;
  border-radius: 5px 17px 17px 17px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.75;
}
.message.sarah .bubble {
  background: #f4f4f0;
}
.mini-app {
  border: 1px solid #c8d6bc;
  border-radius: 15px;
  background: #ebf5ec;
  padding: 6px;
  margin-top: 12px;
}
.app-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  color: #4e6345;
  font-size: 11px;
  min-width: 0;
}
.app-chrome strong {
  font-size: 11px;
  white-space: nowrap;
}
.app-chrome .app-tag {
  border-left: 1px solid #bbc8b5;
  padding-left: 7px;
  font-size: 10px;
}
.app-chrome .icon {
  width: 16px;
  height: 16px;
}
.app-chrome button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}
.app-body {
  background: white;
  border-radius: 10px;
  border: 1px solid #e5e9df;
  padding: 16px;
}
.app-body h3 {
  font-size: 16px;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.app-body > p {
  font-size: 9px;
  color: #8c9287;
  line-height: 1.7;
  margin-bottom: 15px;
}
.mini-schedule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.mini-schedule > div {
  background: #fafbf8;
  padding: 7px;
  border-radius: 8px;
  font-size: 8px;
}
.mini-schedule b {
  display: block;
  font-size: 9px;
  font-weight: 600;
}
.mini-event {
  display: block;
  padding: 12px 7px;
  border-radius: 8px;
  background: var(--pastel);
  margin-top: 8px;
  min-height: 50px;
  font-size: 9px;
  text-align: left;
  width: 100%;
}
.mini-event small {
  display: block;
  font-size: 7px;
  margin-top: 4px;
}
.mini-members {
  display: flex;
  gap: 7px;
  margin: 14px 0 0;
}
.mini-members .avatar {
  width: 20px;
  height: 20px;
  font-size: 8px;
}
.mini-app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
  font-size: 9px;
  color: #859075;
}
.mini-app-footer button {
  text-decoration: underline;
  font-size: 9px;
}
.composer {
  border: 1px solid #dcded6;
  background: #f5f5f1;
  border-radius: 18px;
  margin: 8px 22px 21px;
  padding: 10px 13px;
}
.composer-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.composer input {
  border: 0;
  background: none;
  width: 100%;
  outline: 0;
  font-size: 12px;
  padding: 10px 0;
}
.composer input::placeholder {
  color: #a0a18e;
}
.composer .composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8a8c7d;
  padding-top: 7px;
}
.composer .composer-actions span {
  display: flex;
  align-items: center;
  gap: 15px;
}
.composer .icon {
  width: 17px;
  height: 17px;
}
.composer .send {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #4d6545;
  color: white;
  display: grid;
  place-items: center;
}
.live-canvas {
  margin: 9px 9px 9px 0;
  border: 1px solid #c9d8bc;
  border-radius: 17px;
  background: #f0f8e9;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6px;
}
.live-canvas > .app-chrome {
  padding: 8px 5px 12px;
  flex-wrap: wrap;
}
.live-canvas .app-chrome .scope {
  font-size: 8px;
  border: 1px solid #d4dfcc;
  background: white;
  padding: 6px 8px;
  border-radius: 99px;
}
.live-canvas .publish {
  background: #4b6040;
  color: white;
  padding: 7px 11px;
  border-radius: 99px;
  margin-left: auto;
}
.canvas-content {
  background: white;
  border: 1px solid #e3e8db;
  border-radius: 12px;
  padding: 29px 22px;
  overflow: auto;
  flex: 1;
}
.canvas-content h2 {
  font-size: 28px;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.canvas-content > p {
  font-size: 11px;
  line-height: 1.8;
  color: #878c7e;
  margin-bottom: 25px;
}
.canvas-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 19px;
}
.canvas-tabs button {
  font-size: 10px;
  border-radius: 99px;
  padding: 7px 11px;
  background: #f7f7f2;
}
.canvas-tabs button[aria-pressed=true] {
  background: #e9f1e2;
  color: #49643a;
}
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  text-align: left;
}
.schedule-table th {
  font-size: 8px;
  color: #858b7b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 12px 7px;
  background: #fafbf8;
}
.schedule-table td {
  padding: 16px 7px;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}
.schedule-table td small {
  display: block;
  font-size: 8px;
  color: #8f9486;
}
.schedule-table .avatar {
  width: 23px;
  height: 23px;
  font-size: 8px;
}
.status {
  padding: 6px 9px;
  border-radius: 99px;
  background: #eaf0e4;
  color: #617054;
  white-space: nowrap;
  font-size: 8px;
}
.status.pending {
  background: #fae9b8;
  color: #8c783d;
}
.new-entry {
  margin-top: 19px;
  border: 1px solid #e0e4da;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 10px;
}
.canvas-progress {
  margin-top: 29px;
  padding: 17px;
  border-radius: 12px;
  background: #f6f8f1;
}
.canvas-progress h3 {
  font-size: 11px;
  margin-bottom: 14px;
}
.canvas-progress .progress-strip {
  padding: 0;
  gap: 13px;
  grid-template-columns: 1fr 1fr;
}
.canvas-progress .avatar {
  width: 24px;
  height: 24px;
  font-size: 9px;
}
.canvas-progress .member-progress {
  gap: 7px;
}
.canvas-progress .progress-info .row {
  font-size: 9px;
}
.canvas-progress .progress-info output {
  font-size: 8px;
}
.canvas-progress .progress-track {
  height: 5px;
  margin-top: 6px;
}
.assistant-light .kylon-shell {
  grid-template-columns: 56px 205px minmax(340px, 650px);
  max-width: 1000px;
}
.assistant-light .chat-scroll {
  padding: 22px 45px;
}
.assistant-light .mini-app {
  max-width: 470px;
}
.assistant-light .chat-pane {
  min-height: 760px;
}
.muse-shell {
  display: grid;
  grid-template-columns: 80px 1fr;
  background: #141414;
  color: #e8e8e8;
  min-height: calc(100vh - 67px);
  position: relative;
}
.muse-rail {
  border-right: 1px solid #303030;
  padding: 28px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.muse-rail .traffic {
  display: flex;
  gap: 6px;
  margin-bottom: 65px;
}
.traffic i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6259;
}
.traffic i:nth-child(2) {
  background: #ffbf2f;
}
.traffic i:nth-child(3) {
  background: #29cb41;
}
.muse-rail button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #dedede;
}
.muse-rail button[aria-pressed=true] {
  background: #2a2a2a;
}
.muse-rail button:last-child {
  margin-top: auto;
}
.muse-rail .icon {
  width: 25px;
  height: 25px;
}
.muse-main {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 800px;
}
.muse-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 24px;
  position: relative;
  height: 138px;
}
.muse-header .pill {
  background: #303030;
  color: #eee;
  font-size: 15px;
}
.muse-agent {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.muse-agent .face {
  width: 64px;
  height: 64px;
  background: #e8dfd2;
  font-size: 40px;
  box-shadow: inset 0 0 0 5px #f7f5ef;
}
.muse-agent small {
  background: #333637;
  border-radius: 99px;
  display: inline-block;
  padding: 5px 10px;
  font-size: 11px;
}
.muse-stream {
  width: min(780px, calc(100% - 80px));
  margin: 0 auto;
  padding: 10px 0 140px;
  flex: 1;
}
.muse-time {
  text-align: center;
  color: #777;
  font-size: 10px;
  margin: 17px 0 27px;
}
.muse-bubble {
  background: #202020;
  border-radius: 25px;
  padding: 21px 25px;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 23px;
}
.muse-bubble.user {
  background: #292929;
  margin-left: 100px;
  font-size: 14px;
}
.artifact {
  padding: 9px;
  background: #252525;
  border-radius: 20px;
  max-width: 610px;
  margin-top: 20px;
}
.artifact .app-body {
  background: #191919;
  color: #e7e7e7;
  border: 0;
  border-radius: 14px;
  padding: 20px;
}
.artifact .app-body h3 {
  font-size: 19px;
  margin-bottom: 8px;
}
.artifact .mini-schedule {
  gap: 8px;
}
.artifact .mini-schedule > div {
  background: #252525;
}
.artifact .mini-event {
  color: #353532;
  font-size: 11px;
  padding: 16px 8px;
  min-height: 70px;
}
.artifact .mini-event small {
  font-size: 9px;
}
.artifact-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 13px;
}
.md-badge {
  background: #e3e4e4;
  color: #777;
  width: 34px;
  height: 42px;
  border-radius: 5px;
  display: grid;
  place-items: end center;
  padding-bottom: 7px;
  font-size: 10px;
  clip-path: polygon(0 0, 70% 0, 100% 25%, 100% 100%, 0 100%);
}
.artifact-footer strong {
  display: block;
  font-size: 13px;
}
.artifact-footer small {
  font-size: 10px;
  color: #858585;
}
.artifact-footer button {
  margin-left: auto;
  color: #bcbcbc;
  font-size: 10px;
}
.muse-composer {
  position: sticky;
  bottom: 20px;
  margin: -110px auto 24px;
  width: min(900px, calc(100% - 60px));
  background: #303030;
  border: 0;
  border-radius: 99px;
  padding: 10px 14px 10px 20px;
  z-index: 5;
}
.muse-composer .composer-line {
  gap: 16px;
}
.muse-composer input {
  color: white;
  font-size: 16px;
  padding: 11px 0;
}
.muse-composer .send {
  background: #37689d;
  width: 42px;
  height: 42px;
}
.muse-composer .send .icon {
  width: 25px;
  height: 25px;
}
.muse-composer button {
  color: #d1d1d1;
}
.preview-mode .toolbar {
  display: none;
}
.preview-mode .calendar-shell,
.preview-mode .stone-frame,
.preview-mode .muse-shell {
  min-height: 100vh;
}
.preview-mode .kylon-shell {
  height: calc(100vh - 44px);
}
.preview-mode .muse-main {
  min-height: 100vh;
}
.editorial {
  max-width: 1440px;
  padding: 0 48px;
  margin: auto;
}
.site-nav {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #e3e4dc;
}
.site-nav nav {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 12px;
}
.hero {
  padding: 78px 0 54px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: end;
}
.hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(44px, 5.8vw, 78px);
  letter-spacing: -3px;
  line-height: 1.03;
  font-weight: 400;
  max-width: 760px;
  margin-top: 15px;
}
.hero h1 em {
  font-weight: 400;
  color: #718262;
}
.hero p {
  font-size: 13px;
  line-height: 1.9;
  max-width: 310px;
  color: #7c8175;
}
.marketing-body {
  background: #f4f3ed;
}
.surface-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.product-card {
  min-width: 0;
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  border: 1px solid #dfdfd6;
  overflow: hidden;
}
.product-card.dark {
  background: #242422;
  color: #eee;
  border-color: #242422;
}
.product-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 10px 19px;
  font-size: 13px;
  gap: 6px;
}
.product-title span {
  font-size: 9px;
  color: #909684;
}
.scaled-preview {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #ebe9e1;
}
.scaled-preview iframe {
  border: 0;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}
.product-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 7px 7px;
  gap: 8px;
}
.product-controls button {
  font-size: 10px;
  padding: 8px 10px;
  border: 1px solid #dddcd3;
  border-radius: 99px;
}
.product-controls button[aria-pressed=true] {
  background: #e9eddf;
  color: #3d5438;
}
.product-card.dark .product-controls button {
  border-color: #51534a;
}
.product-card.dark .product-controls button[aria-pressed=true] {
  background: #454b3d;
  color: #fff;
}
.product-card > p {
  font-size: 11px;
  line-height: 1.8;
  color: #8a8e80;
  padding: 10px 8px 14px;
  min-height: 66px;
}
.live-section {
  padding: 65px 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}
.section-heading h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -1px;
}
.large-preview {
  width: 100%;
  height: 870px;
  border: 1px solid #dadcd1;
  border-radius: 22px;
  background: white;
  overflow: hidden;
}
.large-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.story-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  padding: 45px 0 70px;
  border-top: 1px solid #dddcd1;
}
.story-strip h3 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  margin: 12px 0;
}
.story-strip p {
  font-size: 12px;
  color: #7c8274;
  line-height: 1.9;
}
.footer {
  padding: 28px 0;
  border-top: 1px solid #dddcd1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #818576;
}
.studio-body {
  background: #f6f5ef;
}
.launch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 65px;
}
.launch-card {
  border: 1px solid #ddded3;
  border-radius: 18px;
  padding: 24px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.15s;
}
.launch-card:hover {
  transform: translateY(-3px);
}
.launch-card h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}
.launch-card p {
  font-size: 12px;
  color: #808677;
  line-height: 1.8;
}
.launch-card .launch-arrow {
  margin-top: 15px;
  font-size: 12px;
  font-weight: 600;
  color: #4b6641;
}
.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.reference-card {
  border-radius: 16px;
  background: white;
  padding: 10px;
  border: 1px solid #deded3;
  min-width: 0;
}
.reference-card img {
  width: 100%;
  height: 245px;
  object-fit: contain;
  display: block;
  background: #eae7de;
  border-radius: 9px;
}
.reference-card button,
.concept-card button {
  width: 100%;
  padding: 0;
  display: block;
}
.reference-card h3 {
  font-size: 13px;
  padding: 17px 8px 8px;
}
.reference-card p {
  font-size: 11px;
  color: #848a7b;
  padding: 0 8px 13px;
  line-height: 1.8;
}
.gallery-section {
  margin: 60px 0;
}
.concept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.concept-card {
  background: #fff;
  border: 1px solid #d8dace;
  border-radius: 18px;
  padding: 10px;
}
.concept-card img {
  display: block;
  width: 100%;
  border-radius: 10px;
}
.concept-card h3 {
  font-size: 14px;
  padding: 18px 10px 8px;
}
.concept-card p {
  font-size: 11px;
  line-height: 1.8;
  padding: 0 10px 12px;
  color: #848b7c;
}
.reference-note {
  font-size: 12px;
  line-height: 1.8;
  color: #858a7d;
  max-width: 620px;
}
dialog {
  border: 1px solid #dbded2;
  border-radius: 23px;
  width: 450px;
  max-width: calc(100vw - 30px);
  padding: 27px;
  background: #fcfcf8;
  color: #30352b;
  box-shadow: 0 30px 100px #0003;
}
dialog::backdrop {
  background: #252d2859;
  backdrop-filter: blur(5px);
}
dialog .close {
  float: right;
  width: 30px;
  height: 30px;
  background: #eeefe7;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
dialog .close .icon {
  width: 16px;
  height: 16px;
}
dialog h2 {
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 400;
  margin: 20px 0 12px;
}
dialog p {
  font-size: 13px;
  line-height: 1.9;
  margin: 10px 0 18px;
  color: #838975;
}
.dialog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.entry-form {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}
.entry-form label {
  display: grid;
  gap: 7px;
  font-size: 11px;
}
.entry-form input,
.entry-form select {
  padding: 11px;
  border: 1px solid #d9ded1;
  border-radius: 9px;
  background: white;
  width: 100%;
}
.entry-form .row > * {
  flex: 1;
}
.lightbox {
  width: 1280px;
  background: #f0eee7;
  padding: 12px;
  max-height: 95vh;
}
.lightbox img {
  display: block;
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
}
.lightbox .close {
  margin-bottom: 10px;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 13px 22px;
  border-radius: 99px;
  background: #354d39;
  color: white;
  font-size: 12px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  box-shadow: 0 6px 20px #0002;
  max-width: 90vw;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 1550px) {
  :root {
    --hour: 54px;
  }
  .family-header h1 {
    font-size: 39px;
  }
  .kylon-shell {
    grid-template-columns: 60px 250px minmax(360px, 1fr) minmax(450px, 1.1fr);
  }
}
@media (max-width: 1200px) {
  .family-header h1 {
    font-size: 26px;
  }
  .family-header time {
    font-size: 22px;
    margin-left: 8px;
  }
  .header-actions {
    gap: 9px;
  }
  .header-members .avatar {
    width: 32px;
    height: 32px;
  }
  .progress-strip {
    gap: 18px;
  }
  .kylon-shell {
    grid-template-columns: 48px 170px minmax(270px, 1fr) minmax(310px, 1fr);
  }
  .channels {
    padding: 22px 8px;
  }
  .filter-tabs button {
    font-size: 8px;
    padding: 7px 4px;
  }
  .canvas-content {
    padding: 24px 15px;
  }
  .chat-head,
  .chat-scroll {
    padding-left: 16px;
    padding-right: 16px;
  }
  .composer {
    margin-left: 16px;
    margin-right: 16px;
  }
  .app-chrome strong {
    font-size: 9px;
  }
  .toolbar .context {
    display: none;
  }
  .editorial {
    padding: 0 28px;
  }
  .product-controls button {
    font-size: 9px;
  }
  .hero {
    gap: 25px;
  }
  .reference-card img {
    height: 190px;
  }
}
@media (max-width: 950px) {
  .toolbar {
    height: auto;
    min-height: 67px;
    padding: 12px 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .toolbar-left {
    margin-right: auto;
  }
  .toolbar-right {
    margin-left: auto;
  }
  .toolbar .switcher button {
    font-size: 10px;
    padding: 8px 12px;
  }
  .family-header {
    flex-wrap: wrap;
    padding: 20px;
  }
  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
  .family-header h1 {
    font-size: 29px;
  }
  .progress-strip {
    gap: 15px;
    padding: 20px;
  }
  .member-progress {
    gap: 6px;
  }
  .member-progress .avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .progress-info .row {
    font-size: 11px;
  }
  .progress-info output,
  #home-panel [data-preview-count] {
    font-size: 9px;
  }
  .calendar-shell {
    grid-template-columns: 65px 1fr;
  }
  .icon-rail button {
    width: 54px;
    font-size: 8px;
  }
  .calendar-scroll {
    padding: 0;
  }
  .stone-frame {
    padding: 12px;
  }
  .kylon-shell {
    grid-template-columns: 48px minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .channels {
    display: none;
  }
  .chat-pane {
    min-height: 700px;
  }
  .live-canvas {
    grid-column: 2;
    min-height: 600px;
    margin: 0 10px 10px;
  }
  .kylon-rail {
    grid-row: 1/3;
  }
  .assistant-light .kylon-shell {
    grid-template-columns: 48px 1fr;
  }
  .assistant-light .chat-scroll {
    padding: 22px 25px;
  }
  .chore-columns {
    grid-template-columns: 1fr 1fr;
  }
  .meal-list {
    grid-template-columns: 1fr 1fr;
  }
  .hero {
    display: block;
    padding: 50px 0 35px;
  }
  .hero p {
    margin-top: 25px;
    max-width: 480px;
  }
  .hero h1 {
    letter-spacing: -2px;
  }
  .surface-trio {
    gap: 10px;
  }
  .product-title {
    display: block;
    padding: 10px 5px;
  }
  .product-title span {
    display: block;
    margin-top: 5px;
  }
  .product-controls {
    display: block;
    padding: 10px 0 0;
  }
  .product-controls button {
    padding: 6px;
    font-size: 8px;
    margin-bottom: 4px;
  }
  .product-card > p {
    font-size: 9px;
  }
  .section-heading {
    flex-wrap: wrap;
  }
  .section-heading h2 {
    font-size: 30px;
  }
  .launch-card {
    padding: 18px;
  }
  .launch-card h2 {
    font-size: 24px;
  }
  .reference-grid {
    gap: 10px;
  }
  .reference-card img {
    height: 150px;
  }
}
@media (max-width: 600px) {
  .toolbar .brand {
    font-size: 16px;
  }
  .toolbar .brand-mark {
    width: 27px;
    height: 27px;
  }
  .toolbar-right > a {
    display: none;
  }
  .toolbar .switcher button {
    font-size: 9px;
  }
  .family-header h1 {
    font-size: 23px;
    white-space: normal;
  }
  .family-header time {
    font-size: 19px;
    display: inline-block;
    margin-left: 4px;
  }
  .header-actions {
    gap: 5px;
  }
  .header-actions > .pill {
    padding: 8px 10px;
    font-size: 9px;
  }
  .header-members {
    gap: 4px;
  }
  .header-members .avatar {
    width: 25px;
    height: 25px;
    font-size: 9px;
  }
  .progress-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 15px;
    gap: 15px;
  }
  .calendar-shell {
    grid-template-columns: 52px 1fr;
  }
  .icon-rail {
    padding: 18px 2px;
    gap: 8px;
  }
  .icon-rail button {
    width: 46px;
    min-height: 64px;
    font-size: 7px;
  }
  .icon-rail .icon {
    width: 20px;
    height: 20px;
  }
  .rail-mark {
    font-size: 28px;
  }
  .family-header {
    padding: 17px 12px 6px;
  }
  .week-grid {
    min-width: 750px;
  }
  .day-head {
    font-size: 24px;
  }
  .fab {
    width: 53px;
    height: 53px;
    font-size: 35px;
    right: 17px;
    bottom: 18px;
  }
  .board-panel {
    padding: 20px 14px;
  }
  .board-panel h2 {
    font-size: 28px;
  }
  .chore-columns,
  .meal-list {
    grid-template-columns: 1fr;
  }
  .chore-column {
    padding: 15px;
  }
  .muse-shell {
    grid-template-columns: 52px 1fr;
  }
  .muse-rail {
    padding: 25px 3px;
    gap: 17px;
  }
  .muse-rail button {
    width: 40px;
    height: 40px;
  }
  .muse-rail .traffic {
    gap: 4px;
    margin-bottom: 58px;
  }
  .traffic i {
    width: 7px;
    height: 7px;
  }
  .muse-header {
    padding: 17px 12px;
    height: 135px;
  }
  .muse-header .pill {
    font-size: 11px;
    padding: 9px 12px;
  }
  .muse-header > .pill:last-child {
    display: none;
  }
  .muse-agent {
    left: 65%;
  }
  .muse-stream {
    width: calc(100% - 25px);
  }
  .muse-bubble {
    padding: 17px 15px;
    font-size: 13px;
    border-radius: 19px;
  }
  .muse-bubble.user {
    margin-left: 20px;
    font-size: 12px;
  }
  .artifact .app-body {
    padding: 12px;
  }
  .artifact .app-body h3 {
    font-size: 15px;
  }
  .artifact .mini-schedule {
    grid-template-columns: 1fr;
  }
  .artifact .mini-schedule > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .artifact .mini-event {
    margin: 0;
    min-height: 0;
    font-size: 9px;
    padding: 10px;
    width: 70%;
  }
  .artifact .mini-event small {
    font-size: 8px;
  }
  .artifact-footer {
    padding: 13px 5px;
    gap: 8px;
  }
  .artifact-footer strong {
    font-size: 10px;
  }
  .artifact-footer button {
    font-size: 8px;
  }
  .muse-composer {
    width: calc(100% - 16px);
    padding: 7px 9px;
    bottom: 10px;
  }
  .muse-composer .composer-line {
    gap: 8px;
  }
  .muse-composer input {
    font-size: 12px;
  }
  .muse-composer .send {
    width: 33px;
    height: 33px;
  }
  .muse-composer .mic {
    display: none;
  }
  .stone-frame {
    padding: 8px;
  }
  .kylon-shell {
    border-radius: 16px;
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .kylon-rail {
    padding: 18px 3px;
  }
  .kylon-rail button {
    width: 32px;
    height: 32px;
  }
  .chat-head {
    padding: 17px 12px;
    gap: 8px;
  }
  .chat-head h2 {
    font-size: 14px;
  }
  .chat-scroll {
    padding: 18px 12px;
  }
  .message {
    gap: 7px;
  }
  .message > .avatar {
    width: 25px;
    height: 25px;
    font-size: 8px;
  }
  .message-byline {
    font-size: 10px;
    gap: 5px;
    flex-wrap: wrap;
  }
  .message-byline time {
    font-size: 8px;
  }
  .bubble {
    font-size: 11px;
    padding: 11px;
  }
  .app-body {
    padding: 11px;
  }
  .mini-schedule {
    gap: 3px;
  }
  .mini-event {
    padding: 8px 4px;
    font-size: 8px;
  }
  .mini-event small {
    font-size: 6px;
  }
  .app-chrome {
    gap: 5px;
    padding: 7px 5px;
  }
  .app-chrome strong {
    font-size: 9px;
  }
  .composer {
    margin: 8px 12px 16px;
  }
  .assistant-light .kylon-shell {
    grid-template-columns: 40px 1fr;
  }
  .assistant-light .chat-scroll {
    padding: 18px 12px;
  }
  .live-canvas {
    margin-right: 7px;
    margin-left: 0;
  }
  .canvas-content h2 {
    font-size: 25px;
  }
  .schedule-table td {
    padding: 13px 4px;
    font-size: 9px;
  }
  .schedule-table th {
    padding: 10px 4px;
    font-size: 7px;
  }
  .site-nav {
    height: 74px;
  }
  .site-nav nav {
    gap: 12px;
    font-size: 10px;
  }
  .site-nav .pill {
    padding: 9px 12px;
    font-size: 10px;
  }
  .site-nav nav > a:first-child {
    display: none;
  }
  .editorial {
    padding: 0 18px;
  }
  .hero {
    padding-top: 40px;
  }
  .hero h1 {
    font-size: 44px;
  }
  .surface-trio {
    grid-template-columns: 1fr;
  }
  .product-title {
    display: flex;
    padding: 12px 8px;
  }
  .product-title span {
    display: inline;
    font-size: 10px;
  }
  .product-controls {
    display: flex;
    padding: 12px 4px 4px;
  }
  .product-controls button {
    font-size: 10px;
    padding: 8px 12px;
  }
  .product-card > p {
    font-size: 11px;
    min-height: 0;
  }
  .large-preview {
    height: 1050px;
    border-radius: 14px;
  }
  .live-section {
    padding: 40px 0;
  }
  .story-strip,
  .launch-grid,
  .reference-grid,
  .concept-grid {
    grid-template-columns: 1fr;
  }
  .story-strip {
    gap: 24px;
    padding: 30px 0;
  }
  .launch-grid {
    margin-bottom: 40px;
  }
  .reference-card img {
    height: 245px;
  }
  .reference-grid {
    gap: 16px;
  }
  .gallery-section {
    margin: 40px 0;
  }
  .footer {
    font-size: 9px;
    gap: 15px;
  }
  .section-heading .switcher {
    max-width: 100%;
    overflow: auto;
  }
  .section-heading .switcher button {
    font-size: 10px;
    padding: 9px 12px;
  }
  .reference-note {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
@media (max-width: 600px) {
  .calendar-shell {
    --hour: 62px;
  }
  .week-grid {
    min-width: 950px;
  }
  .calendar-event {
    padding: 9px 10px 25px;
  }
  .calendar-event strong {
    font-size: 12px;
  }
  .calendar-event small {
    font-size: 9px;
    max-width: calc(100% - 19px);
  }
}
.agent-avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  font-size: 15px;
  background: #f5e5bd;
  color: #9a6924;
  border: 1px solid #e7d6a6;
  box-shadow: inset 0 2px 3px #fff9;
}
.agent-avatar.mint {
  background: #dcebe0;
  color: #4b7c5c;
  border-color: #c2d9c6;
}
.agent-avatar.sky {
  background: #e3e8fb;
  color: #5769a5;
  border-color: #ccd4ef;
}
.agent-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 4px;
  background: #fbf5e9;
  border: 1px solid #eadfc9;
  border-radius: 99px;
  font-size: 10px;
  white-space: nowrap;
}
.agent-chip.mint {
  background: #eef5ef;
  border-color: #d9e4d9;
}
.agent-chip.sky {
  background: #f0f2fb;
  border-color: #dce0f0;
}
.agent-chip.custom {
  background: #f3edf3;
  max-width: 150px;
  white-space: normal;
}
.agent-chip .agent-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
}
.agent-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-family-header {
  flex-wrap: wrap;
  align-items: center;
  padding: 23px 28px 17px;
  border-bottom: 1px solid #f2f1eb;
  background: #fffefb;
}
.agent-family-header h1 {
  font-size: 31px;
  white-space: normal;
}
.home-subtitle {
  font-size: 10px;
  color: #8c907f;
  margin-top: 7px;
}
.agent-family-header .header-actions {
  flex-wrap: wrap;
  gap: 12px;
  width: auto;
}
.agent-family-header .header-members {
  gap: 4px;
}
.agent-family-header .header-members .avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
  border: 2px solid white;
  box-shadow: 0 0 0 1px #e7e8df;
}
.roster-divider {
  width: 1px;
  height: 30px;
  background: #e4e3d9;
}
.connect-button {
  font-size: 10px;
  border: 1px solid #d9ddcd;
  background: #f7f8ee;
  padding: 10px 13px;
}
.icon-rail .rail-connect {
  margin-top: 22px;
  color: #52694a;
}
.agent-whisper {
  background: #fcfbf6;
  border: 1px solid #eae7dc;
  border-radius: 17px;
  margin: 0 25px 20px;
  padding: 13px 16px 15px;
}
.whisper-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #83846f;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}
.live-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #8a9d6e;
}
.whisper-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.whisper-pills > button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  min-width: 0;
  padding: 4px;
  border-radius: 12px;
}
.whisper-pills > button + button {
  border-left: 1px solid #e9e5d9;
  padding-left: 16px;
}
.whisper-pills strong,
.whisper-pills small,
.whisper-pills em {
  display: block;
}
.whisper-pills strong {
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 5px;
}
.whisper-pills small {
  font-size: 10px;
  line-height: 1.65;
  color: #7d806f;
}
.whisper-pills em {
  font-size: 9px;
  font-style: normal;
  color: #5c7351;
  margin-top: 5px;
}
.event-provenance {
  font-size: 8px;
  color: #5e6c59;
  line-height: 1.4;
  margin-top: auto;
  max-width: calc(100% - 20px);
  padding-top: 4px;
}
.calendar-event {
  padding: 8px 10px 8px;
  min-height: 65px;
}
.calendar-event:has(.event-provenance:not(:empty)) {
  min-height: 78px;
}
.calendar-event .avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
}
.calendar-event strong {
  font-size: 12px;
}
.calendar-event small {
  font-size: 10px;
}
.calendar-event .event-provenance:empty {
  display: none;
}
.board-agent-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #7a826d;
  margin-bottom: 24px;
}
.future-plans {
  margin: 0 15px 16px 65px;
  padding: 16px;
  background: #eff3e7;
  border-radius: 12px;
  font-size: 10px;
  display: grid;
  gap: 8px;
}
.future-plans span {
  display: block;
}
.project-shell {
  background: #fbfaf6;
}
.projects-workspace {
  padding: 24px 30px 45px;
  max-width: 1650px;
  margin: auto;
}
.project-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}
.project-switcher button {
  text-align: left;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 5px 10px;
  border: 1px solid #e3e1d5;
  border-radius: 12px;
  padding: 14px;
  background: #fffefa;
  min-width: 0;
}
.project-switcher button[aria-pressed=true] {
  background: #edf1e6;
  border-color: #b1bba0;
  box-shadow: 0 3px 10px #69774d0b;
}
.project-switcher button > span {
  grid-row: 1/3;
  font-size: 24px;
  color: #a39771;
  align-self: center;
}
.project-switcher strong {
  font-size: 12px;
}
.project-switcher small {
  font-size: 9px;
  color: #858672;
}
.project-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin: 20px 0 26px;
}
.project-heading h2 {
  font: 400 clamp(28px, 2.6vw, 42px)/1.15 Georgia, serif;
  letter-spacing: -1px;
  margin: 12px 0;
}
.project-heading p {
  font-size: 11px;
  color: #888a7a;
}
.project-heading p span {
  padding: 0 7px;
}
.project-team {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.project-team > span:last-child {
  font-size: 9px;
  color: #8d917f;
  max-width: 65px;
  margin-left: 7px;
  line-height: 1.6;
}
.project-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #e1e2d8;
  margin-bottom: 24px;
  overflow: auto;
  padding-bottom: 10px;
}
.project-tabs button {
  font-size: 11px;
  white-space: nowrap;
  padding: 11px 17px;
  border-radius: 99px;
}
.project-tabs button[aria-selected=true] {
  background: #e8eddf;
  color: #4b6344;
}
.project-summary {
  padding: 21px 24px;
  background: #edf2e6;
  border: 1px solid #e0e6d6;
  border-radius: 15px;
  margin-bottom: 20px;
}
.readiness {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.readiness strong {
  font: 400 24px Georgia, serif;
  color: #4b6241;
}
.readiness span {
  font-size: 10px;
  color: #7a826e;
}
.tax-track {
  height: 6px;
  border-radius: 99px;
  background: #dce3d1;
  margin: 13px 0;
}
.tax-track span {
  display: block;
  height: 100%;
  background: #8ca279;
  border-radius: 99px;
  transition: width 0.3s;
}
.project-summary p {
  font-size: 11px;
  color: #79816d;
  line-height: 1.8;
  margin-top: 8px;
}
.agent-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 24px;
}
.agent-work {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #ebe3ce;
  background: #fffcf4;
  border-radius: 15px;
  padding: 17px;
}
.agent-work:nth-child(2) {
  background: #f3f7ef;
  border-color: #e0e7d9;
}
.agent-work:nth-child(3) {
  background: #f3f5fc;
  border-color: #e1e4f0;
}
.agent-work span:not(.agent-avatar) {
  font-size: 9px;
  color: #8b8c76;
}
.agent-work h3 {
  font-size: 12px;
  line-height: 1.6;
  margin: 7px 0;
}
.agent-work p {
  font-size: 10px;
  line-height: 1.8;
  color: #8b8f7f;
}
.project-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.paper-card {
  padding: 23px;
  border: 1px solid #e4e1d6;
  background: #fffefb;
  border-radius: 16px;
  min-width: 0;
}
.paper-card h3,
.decision-card h3,
.comparison-heading h3 {
  font: 400 24px/1.25 Georgia, serif;
  letter-spacing: -0.3px;
}
.paper-card .section-heading {
  margin-bottom: 14px;
  gap: 15px;
}
.paper-card .section-heading button {
  font-size: 10px;
  color: #738262;
}
.paper-card .section-heading p {
  font-size: 11px;
  color: #8b8f80;
  margin-top: 9px;
}
.paper-card .check-row {
  font-size: 11px;
  padding: 20px 0;
}
.paper-card .check-row small {
  margin-left: auto;
  font-size: 9px;
  color: #91937e;
}
.paper-foot {
  border-top: 1px solid #eeeade;
  margin-top: 20px;
  padding-top: 16px;
  font-size: 9px;
  color: #949783;
  line-height: 1.8;
}
.decision-card {
  background: #fbf4e7;
  border: 1px solid #ebdebe;
  padding: 23px;
  border-radius: 16px;
}
.decision-card h3 {
  margin: 12px 0 5px;
}
.human-decision {
  padding: 18px 0;
  border-bottom: 1px solid #e9dfcb;
}
.human-decision > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #8a8167;
}
.human-decision .agent-avatar {
  height: 24px;
  width: 24px;
  font-size: 12px;
  border-radius: 9px;
}
.human-decision p {
  font-size: 11px;
  line-height: 1.9;
  margin: 10px 0 14px;
  color: #7a7869;
}
.human-decision .pill {
  font-size: 10px;
  white-space: normal;
  text-align: left;
  padding: 11px 14px;
}
.decision-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.text-action {
  font-size: 10px;
  color: #7f795f;
}
.decision-note {
  display: block;
  font-size: 8px;
  color: #a39b84;
  margin-top: 12px;
}
.decision-intro {
  padding: 10px 0 24px;
}
.decision-intro h3 {
  font: 400 30px Georgia, serif;
}
.decision-intro p {
  font-size: 12px;
  color: #8d907d;
  margin-top: 10px;
}
#project-panel > .decision-card {
  max-width: 760px;
}
.document-table-wrap {
  overflow: auto;
}
.document-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 11px;
}
.document-table th {
  padding: 15px 12px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #989784;
  background: #f7f7f0;
}
.document-table td {
  padding: 20px 12px;
  border-bottom: 1px solid #eeede5;
  color: #878b78;
  line-height: 1.8;
}
.document-table strong {
  font-weight: 600;
  color: #4f5747;
}
.doc-status {
  font-size: 10px;
  color: #647859;
  padding: 7px 10px;
  background: #eef3e8;
  border-radius: 99px;
  display: inline-block;
}
.doc-status.waiting {
  background: #faedce;
  color: #9b8250;
}
.activity-view > p {
  font-size: 12px;
  color: #858b78;
  line-height: 1.8;
  margin: 10px 0 20px;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid #eeece1;
}
.activity-row > div {
  flex: 1;
}
.activity-row strong {
  font-size: 11px;
}
.activity-row p {
  font-size: 11px;
  color: #858a76;
  line-height: 1.9;
  margin-top: 6px;
}
.activity-row time {
  font-size: 9px;
  color: #969b86;
  white-space: nowrap;
}
.comparison-heading {
  margin: 10px 0 22px;
}
.comparison-heading p {
  font-size: 11px;
  color: #90937f;
  margin-top: 10px;
  line-height: 1.8;
}
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.comparison-card {
  padding: 23px;
  border: 1px solid #e1dfd1;
  border-radius: 16px;
  background: #fffefb;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.comparison-card.selected {
  border-color: #95a483;
  box-shadow: 0 0 0 2px #e0e7d7;
  background: #fbfff5;
}
.comparison-card h3 {
  font: 400 26px Georgia, serif;
}
.comparison-price {
  font-size: 17px;
  color: #5c7051;
  font-weight: 600;
}
.comparison-card p {
  font-size: 10px;
  line-height: 1.9;
  color: #888d77;
}
.comparison-card dl {
  font-size: 10px;
  line-height: 1.9;
  margin: 0;
}
.comparison-card dt {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a1a18e;
  margin-top: 12px;
}
.comparison-card dd {
  margin: 4px 0 0;
}
.comparison-card .status {
  align-self: start;
  font-size: 9px;
}
.comparison-card .pill {
  margin-top: auto;
  font-size: 10px;
  white-space: normal;
}
.calendar-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
}
.calendar-action p {
  font-size: 11px;
  color: #868c77;
  line-height: 1.8;
}
.calendar-action .pill {
  font-size: 11px;
  white-space: normal;
}
.tahoe-card {
  margin-top: 15px;
}
.tahoe-card h3 {
  margin-top: 12px;
}
.tahoe-card p {
  font-size: 11px;
  color: #868e78;
  margin: 12px 0;
  line-height: 1.9;
}
.tahoe-card > small {
  font-size: 9px;
  color: #999b89;
}
.cabin-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.cabin-options button {
  display: grid;
  gap: 10px;
  text-align: left;
  background: #f6f5ed;
  border: 1px solid #e4e3d7;
  border-radius: 12px;
  padding: 18px;
}
.cabin-options button[aria-pressed=true] {
  background: #edf2e2;
  border-color: #a9b796;
}
.cabin-options strong {
  font-size: 13px;
}
.cabin-options span {
  font-size: 11px;
}
.cabin-options small,
.cabin-options em {
  font-size: 9px;
  color: #8a907a;
  line-height: 1.8;
}
.chat-house-header .family-header {
  padding: 15px 27px;
}
.chat-house-header .family-header h1 {
  font-size: 24px;
}
.chat-house-header .home-subtitle {
  display: none;
}
.agent-dm .agent-avatar {
  margin-right: 0;
}
.channels h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 20px;
}
.channels > .pill {
  font-size: 10px;
  margin: 12px 0;
}
.chat-head h2 {
  font-size: 17px;
}
.chat-head p {
  font-size: 10px;
}
.mobile-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 18px;
  background: #fcfcf8;
}
.mobile-channels button {
  font-size: 9px;
  padding: 6px 9px;
  border-radius: 99px;
  background: #f2f3ec;
}
.mobile-channels button[aria-pressed=true] {
  background: #e6edda;
  color: #5b704b;
}
.message > .agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
}
.artifact-agent {
  font-size: 10px;
  color: #8d937e;
  line-height: 1.9;
  margin: 8px 0 15px;
}
.artifact-summary {
  background: #f2f5e8;
  padding: 18px;
  border-radius: 12px;
}
.artifact-summary strong {
  font: 400 22px Georgia, serif;
  color: #4d6441;
}
.artifact-summary p {
  font-size: 10px;
  color: #8a937b;
  margin-top: 10px;
}
.assistant-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 28px;
  background: #fbfaf5;
  border-bottom: 1px solid #e5e2d6;
}
.assistant-controls label {
  font-size: 10px;
  color: #858774;
  display: flex;
  align-items: center;
  gap: 12px;
}
.assistant-controls select {
  padding: 10px 15px;
  border-radius: 99px;
  background: white;
  border: 1px solid #dedfce;
  font-size: 11px;
  max-width: 280px;
}
.assistant-controls .switcher button {
  font-size: 10px;
}
.dark-agent-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: #20211f;
  border-bottom: 1px solid #35372e;
  padding-right: 22px;
}
.dark-agent-tools .assistant-controls {
  background: none;
  border: 0;
  flex: 1;
}
.dark-agent-tools .assistant-controls label {
  color: #a7ad9d;
}
.dark-agent-tools select {
  background: #30322d;
  border-color: #484c3f;
  color: #e1e5d7;
}
.dark-agent-tools .switcher {
  background: #31342d;
}
.dark-agent-tools .switcher button {
  color: #c4c8bb;
}
.dark-agent-tools .switcher button[aria-pressed=true] {
  background: #505c43;
  color: white;
}
.dark-agent-tools > .pill {
  background: #363a2e;
  color: #d5ddc8;
  font-size: 10px;
}
.muse-agent > .agent-avatar {
  height: 58px;
  width: 58px;
  border-radius: 50%;
  font-size: 28px;
}
.muse-agent > small {
  display: block;
  white-space: nowrap;
  font-size: 10px;
  margin-top: 10px;
  color: #b9b8a6;
}
.muse-bubble .mini-app {
  margin-top: 24px;
  border-color: #4c5b3d;
  background: #252a22;
}
.muse-bubble .app-chrome {
  background: #2d3625;
  color: #c3d2b1;
}
.muse-bubble .app-body {
  background: #1c1e1a;
  border: 1px solid #3c4534;
  color: #e1e5da;
}
.muse-bubble .mini-schedule > div {
  background: #2d3028;
}
.muse-bubble .app-tag {
  color: #b1bf9a;
}
.muse-bubble .artifact-summary {
  background: #283122;
}
.muse-bubble .artifact-summary strong {
  color: #c2d3af;
}
.muse-bubble .mini-app-footer {
  color: #94a080;
}
.muse-bubble .mini-event {
  color: #414b35;
}
.live-canvas .agent-whisper {
  margin: 25px 0 0;
  padding: 12px;
}
.live-canvas .whisper-pills {
  grid-template-columns: 1fr;
  gap: 12px;
}
.live-canvas .whisper-pills > button + button {
  border-left: 0;
  border-top: 1px solid #e5e8db;
  padding: 12px 4px 0;
}
.docked-project-panel .agent-work-grid,
.docked-project-panel .project-overview-grid,
.docked-project-panel .comparison-grid,
.docked-project-panel .cabin-options {
  grid-template-columns: 1fr;
}
.docked-project-panel .readiness,
.docked-project-panel .calendar-action {
  flex-wrap: wrap;
}
.docked-project-panel .project-summary {
  padding: 15px;
}
.docked-project-panel .paper-card,
.docked-project-panel .decision-card {
  padding: 15px;
}
.docked-project-panel .project-summary .readiness strong {
  font-size: 21px;
}
.docked-project-panel .document-table {
  min-width: 480px;
}
.connect-dialog {
  width: 640px;
  max-height: 92vh;
  overflow: auto;
}
.connect-dialog fieldset {
  border: 0;
  padding: 0;
  margin: 22px 0;
}
.connect-dialog legend {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 14px;
}
.agent-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.agent-presets label,
.permission-pills label {
  position: relative;
  cursor: pointer;
}
.agent-presets input,
.permission-pills input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.agent-presets label > span,
.permission-pills label > span {
  display: block;
  padding: 13px 9px;
  border: 1px solid #dedfce;
  background: #fffefa;
  border-radius: 12px;
  font-size: 11px;
  text-align: center;
}
.agent-presets input:checked + span,
.permission-pills input:checked + span {
  background: #eaf0de;
  border-color: #9aab80;
  box-shadow: inset 0 0 0 1px #b7c4a3;
  color: #4a6238;
}
.agent-presets input:focus-visible + span,
.permission-pills input:focus-visible + span {
  outline: 3px solid #588bca;
  outline-offset: 3px;
}
.pair-owner {
  display: grid;
  gap: 10px;
  font-size: 11px;
}
.pair-owner select {
  padding: 13px;
  border-radius: 12px;
  background: #fffefa;
  border: 1px solid #dedfce;
  max-width: 100%;
  width: 100%;
  font-size: 12px;
}
.permission-pills {
  display: grid;
  gap: 9px;
}
.permission-pills label > span {
  text-align: left;
  padding: 13px 15px;
}
.permission-pills .locked-permission {
  cursor: default;
  opacity: 0.55;
}
.connect-dialog .pairing-note {
  font-size: 10px;
  line-height: 1.9;
  color: #91977e;
}
.pairing-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.pairing-buttons .pill {
  font-size: 11px;
}
.connected-success {
  padding: 16px;
  border-radius: 12px;
  background: #edf3e2;
  color: #617c48;
  font-size: 13px;
  margin: 18px 0;
}
.pair-link {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e1e2d4;
  font-size: 10px;
  margin-bottom: 15px;
}
.review-list {
  font-size: 13px;
  line-height: 2.2;
  margin-bottom: 22px;
  color: #7e876e;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
  filter: none;
}
.agent-hero {
  align-items: center;
  padding-top: 62px;
  gap: 35px;
}
.agent-hero h1 {
  font-size: clamp(42px, 4.8vw, 68px);
  max-width: 910px;
}
.hero-agents {
  margin-top: 26px;
}
.hero-agents .agent-chip {
  font-size: 12px;
}
.hero-agents .agent-avatar {
  width: 28px;
  height: 28px;
}
.pairing-preview {
  padding: 20px 15px;
  text-align: center;
  min-height: 270px;
  background: #f5f4e9;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
}
.pairing-house {
  font: 400 35px Georgia, serif;
  color: #8a976e;
}
.pairing-preview h3 {
  font: 400 24px Georgia, serif;
}
.preset-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.preset-pill {
  border: 1px solid #e4dfc7;
  background: #fffdf6;
  border-radius: 99px;
  padding: 8px 12px;
  font-size: 10px;
}
.preset-pill.p1 {
  background: #e9f1e5;
}
.preset-pill.p2 {
  background: #e9edf9;
}
.pairing-preview p {
  font-size: 10px;
  color: #8c927a;
  line-height: 1.8;
}
.pairing-preview small {
  font-size: 9px;
  color: #989c86;
}
.hub-launch {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 25px;
}
.hub-launch .launch-card {
  padding: 20px;
}
.hub-launch .launch-card h2 {
  font-size: 24px;
}
.top-concepts {
  margin-bottom: 30px;
}
.top-concepts img {
  aspect-ratio: 3/2;
  object-fit: cover;
}
.studio-body .hero {
  padding: 50px 0 35px;
}
.studio-body .reference-note {
  margin: 20px 0 45px;
}
.agent-hero .agent-roster {
  padding-top: 5px;
}
@media (min-width: 1400px) {
  .agent-family-header {
    flex-wrap: nowrap;
  }
  .agent-family-header .header-actions {
    justify-content: flex-end;
  }
  .kylon-shell {
    min-height: 800px;
    height: calc(100vh - 205px);
  }
}
@media (max-width: 1200px) {
  .agent-family-header .header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .hub-launch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .project-heading {
    align-items: flex-start;
  }
  .project-team > span:last-child {
    display: none;
  }
  .project-overview-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .agent-work {
    padding: 14px;
    gap: 8px;
  }
  .agent-work > .agent-avatar {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
  .agent-work h3 {
    font-size: 11px;
  }
  .agent-work p {
    font-size: 9px;
  }
}
@media (max-width: 950px) {
  .projects-workspace {
    padding: 22px 20px;
  }
  .project-switcher button {
    padding: 12px;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .project-switcher button > span {
    grid-row: auto;
  }
  .agent-work-grid {
    gap: 9px;
  }
  .agent-work {
    display: block;
  }
  .agent-work > div {
    margin-top: 8px;
  }
  .project-overview-grid {
    grid-template-columns: 1fr;
  }
  .project-heading h2 {
    font-size: 32px;
  }
  .comparison-grid {
    grid-template-columns: 1fr;
  }
  .comparison-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .comparison-card dl {
    grid-column: 1/3;
  }
  .comparison-card h3 {
    font-size: 25px;
  }
  .comparison-card .pill {
    align-self: end;
  }
  .assistant-controls {
    flex-wrap: wrap;
    gap: 12px;
  }
  .dark-agent-tools {
    align-items: flex-start;
    padding-right: 12px;
  }
  .dark-agent-tools > .pill {
    margin-top: 15px;
  }
  .agent-hero h1 {
    font-size: 54px;
  }
  .agent-hero p {
    max-width: 550px;
  }
  .hub-launch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-switcher small {
    line-height: 1.6;
  }
  .docked-project-panel .comparison-card {
    display: flex;
  }
}
@media (max-width: 600px) {
  .toolbar {
    padding: 10px 12px;
    gap: 10px;
  }
  .toolbar-right {
    width: 100%;
    margin: 0;
  }
  .toolbar .switcher {
    width: 100%;
    justify-content: center;
    border-radius: 15px;
    padding: 3px;
  }
  .toolbar .switcher button {
    font-size: 9px;
    padding: 10px 7px;
    flex: 1;
  }
  .agent-family-header {
    padding: 18px 13px;
    gap: 13px;
  }
  .agent-family-header h1 {
    font-size: 25px;
  }
  .agent-family-header .header-actions {
    gap: 10px;
  }
  .agent-family-header .header-members .avatar {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }
  .agent-family-header .header-members {
    gap: 3px;
  }
  .agent-family-header .agent-roster {
    order: 3;
    width: 100%;
  }
  .agent-family-header .roster-divider {
    display: none;
  }
  .agent-family-header .connect-button {
    margin-left: auto;
    font-size: 9px;
    padding: 9px;
  }
  .agent-family-header .agent-chip {
    font-size: 9px;
  }
  .agent-whisper {
    margin: 0 12px 14px;
    padding: 12px;
  }
  .whisper-pills {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .whisper-pills > button + button {
    border-left: 0;
    border-top: 1px solid #e9e5d9;
    padding: 11px 4px 0;
  }
  .whisper-pills strong {
    font-size: 10px;
    margin-bottom: 3px;
  }
  .whisper-pills small {
    font-size: 9px;
    line-height: 1.7;
  }
  .whisper-pills em {
    font-size: 9px;
    margin-top: 3px;
  }
  .whisper-label {
    font-size: 9px;
  }
  .whisper-pills .agent-avatar {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 9px;
  }
  .event-provenance {
    font-size: 8px;
  }
  .calendar-event {
    padding-bottom: 7px;
  }
  .calendar-event small {
    max-width: 100%;
  }
  .calendar-event .avatar {
    width: 20px;
    height: 20px;
  }
  .projects-workspace {
    padding: 18px 13px 30px;
  }
  .project-switcher {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-bottom: 24px;
  }
  .project-switcher button {
    grid-template-columns: 26px 1fr;
    gap: 3px 8px;
    padding: 10px 12px;
  }
  .project-switcher button > span {
    grid-row: 1/3;
    font-size: 22px;
  }
  .project-switcher strong {
    font-size: 11px;
  }
  .project-switcher small {
    font-size: 8px;
  }
  .project-heading {
    display: block;
    margin-top: 0;
  }
  .project-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .project-heading h2 {
    font-size: 29px;
    line-height: 1.2;
    margin: 10px 0;
  }
  .project-heading p {
    font-size: 10px;
  }
  .project-team {
    margin-top: 18px;
  }
  .project-team > span:last-child {
    display: block;
    max-width: none;
  }
  .project-tabs {
    gap: 5px;
    margin-bottom: 17px;
  }
  .project-tabs button {
    font-size: 9px;
    padding: 10px 12px;
  }
  .readiness {
    display: block;
  }
  .readiness strong {
    font-size: 23px;
  }
  .readiness span {
    display: block;
    margin-top: 10px;
    font-size: 9px;
  }
  .project-summary {
    padding: 17px;
  }
  .project-summary p {
    font-size: 10px;
  }
  .agent-work-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .agent-work {
    display: flex;
    gap: 11px;
    padding: 12px;
  }
  .agent-work > div {
    margin-top: 0;
  }
  .agent-work p {
    font-size: 9px;
  }
  .agent-work h3 {
    font-size: 11px;
    margin: 4px 0;
  }
  .agent-work span:not(.agent-avatar) {
    font-size: 8px;
  }
  .paper-card,
  .decision-card {
    padding: 17px;
  }
  .paper-card h3,
  .decision-card h3 {
    font-size: 23px;
  }
  .paper-card .section-heading {
    display: block;
  }
  .paper-card .section-heading button {
    margin-top: 10px;
    font-size: 9px;
  }
  .paper-card .check-row {
    flex-wrap: wrap;
    font-size: 10px;
    padding: 14px 0;
    gap: 8px;
  }
  .paper-card .check-row small {
    font-size: 8px;
  }
  .human-decision p {
    font-size: 10px;
  }
  .decision-card .eyebrow {
    font-size: 9px;
  }
  .comparison-card {
    display: flex;
    padding: 18px;
    gap: 12px;
  }
  .comparison-card h3 {
    font-size: 26px;
  }
  .comparison-card .pill {
    align-self: stretch;
  }
  .calendar-action {
    display: block;
  }
  .calendar-action .pill {
    margin-top: 15px;
    width: 100%;
    font-size: 10px;
  }
  .cabin-options {
    grid-template-columns: 1fr;
  }
  .activity-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 9px;
  }
  .activity-row > div {
    min-width: 130px;
  }
  .activity-row time {
    margin-left: 39px;
    font-size: 8px;
  }
  .activity-row p {
    font-size: 10px;
  }
  .document-table {
    min-width: 540px;
  }
  .chat-house-header .family-header {
    padding: 16px 13px;
  }
  .assistant-controls {
    padding: 13px 12px;
    gap: 10px;
    min-width: 0;
  }
  .assistant-controls label {
    font-size: 9px;
    display: block;
    max-width: 100%;
  }
  .assistant-controls select {
    display: block;
    margin-top: 8px;
    width: 100%;
    max-width: 255px;
    font-size: 10px;
  }
  .assistant-controls .switcher {
    max-width: 100%;
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 2px;
  }
  .assistant-controls .switcher button {
    font-size: 8px;
    white-space: normal;
    padding: 9px;
  }
  .dark-agent-tools {
    flex-wrap: wrap;
    padding: 0 0 13px;
    gap: 0;
  }
  .dark-agent-tools .assistant-controls {
    width: 100%;
    flex: auto;
  }
  .dark-agent-tools > .pill {
    margin: 0 12px;
  }
  .muse-agent {
    left: 61%;
  }
  .muse-agent > small {
    font-size: 8px;
    white-space: normal;
    width: 120px;
  }
  .muse-agent > .agent-avatar {
    height: 45px;
    width: 45px;
    font-size: 23px;
  }
  .muse-bubble .mini-schedule {
    grid-template-columns: 1fr;
  }
  .muse-bubble .mini-schedule > div {
    padding: 9px;
  }
  .muse-bubble .mini-app {
    margin-top: 18px;
  }
  .muse-bubble .app-chrome {
    flex-wrap: wrap;
  }
  .muse-bubble .app-body {
    padding: 12px;
  }
  .muse-bubble .app-body h3 {
    font-size: 17px;
  }
  .muse-bubble .mini-app-footer {
    flex-wrap: wrap;
    font-size: 9px;
  }
  .artifact-summary strong {
    font-size: 20px;
  }
  .muse-composer {
    position: sticky;
    margin-top: 0;
    bottom: 12px;
  }
  .muse-stream {
    padding-bottom: 25px;
  }
  .muse-main {
    min-height: 800px;
  }
  .agent-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .connect-dialog {
    padding: 22px 18px;
  }
  .connect-dialog h2 {
    font-size: 27px;
  }
  .agent-presets label > span {
    font-size: 10px;
    padding: 12px 8px;
  }
  .permission-pills label > span {
    font-size: 10px;
    line-height: 1.7;
  }
  .pairing-buttons {
    flex-wrap: wrap;
  }
  .pairing-buttons .pill {
    flex: 1;
    font-size: 10px;
    white-space: normal;
  }
  .site-nav nav {
    gap: 7px;
  }
  .site-nav nav .pill {
    font-size: 9px;
    padding: 9px;
  }
  .site-nav nav a:first-child {
    display: none;
  }
  .site-nav .brand {
    font-size: 17px;
  }
  .site-nav .brand-mark {
    width: 27px;
    height: 27px;
  }
  .agent-hero h1 {
    font-size: 43px;
  }
  .agent-hero .eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px;
  }
  .agent-hero p {
    font-size: 12px;
  }
  .hero-agents .agent-chip {
    font-size: 10px;
  }
  .hero-agents .agent-avatar {
    width: 24px;
    height: 24px;
  }
  .hub-launch {
    grid-template-columns: 1fr;
  }
  .studio-body .hero h1 {
    font-size: 43px;
  }
  .product-title strong {
    font-size: 12px;
  }
  .product-title span {
    font-size: 8px;
  }
  .pairing-preview {
    min-height: 0;
    padding: 28px 15px;
  }
  .future-plans {
    margin: 0 10px 15px;
    font-size: 9px;
  }
  .canvas-content {
    min-width: 0;
  }
  .canvas-tabs {
    flex-wrap: wrap;
  }
  .canvas-content > .agent-whisper {
    margin: 20px 0;
  }
  .app-chrome .scope {
    display: none;
  }
  .section-heading .switcher {
    flex-wrap: wrap;
    border-radius: 16px;
  }
  .section-heading .switcher button {
    white-space: normal;
  }
  .review-list {
    font-size: 12px;
  }
}
.row-provenance {
  font-size: 8px;
  color: #89967b;
  margin-left: auto;
  line-height: 1.7;
  max-width: 95px;
  text-align: right;
}
.check-row:has(.row-provenance) {
  flex-wrap: wrap;
}
.chore-column .row-provenance {
  flex-basis: 100%;
  max-width: none;
  margin-left: 28px;
  text-align: left;
}
.paper-card .check-row small {
  max-width: 110px;
}
.canvas-content .row-provenance {
  font-size: 7px;
}
@media (min-width: 951px) {
  .kylon-shell {
    grid-template-rows: minmax(0, 1fr);
  }
  .chat-pane,
  .channels,
  .live-canvas {
    max-height: 100%;
    min-height: 0;
  }
  .composer {
    flex-shrink: 0;
  }
  .canvas-content {
    overflow: auto;
  }
  .assistant-light .chat-pane {
    min-height: 0;
  }
}
@media (max-width: 600px) {
  .row-provenance {
    font-size: 8px;
    flex-basis: 100%;
    max-width: none;
    text-align: left;
    margin-left: 28px;
  }
  .canvas-content .row-provenance {
    font-size: 8px;
  }
  .list-card {
    padding: 14px;
  }
  .check-row input {
    width: 17px;
    height: 17px;
  }
  .human-decision .text-action {
    font-size: 10px;
  }
}
:root {
  --muted: #60675b;
}
body {
  background: #f8f8f5;
}
h1,
h2,
h3,
.family-header h1,
.project-heading h2,
.paper-card h3,
.decision-card h3,
.hero h1,
.hero em {
  font-family: Jakarta, sans-serif !important;
}
textarea:focus-visible {
  outline: 3px solid #588bca;
  outline-offset: 3px;
}
.hub {
  max-width: 1600px;
  margin: auto;
}
.hub .toolbar {
  height: auto;
  min-height: 67px;
  flex-wrap: wrap;
}
.hub-layout {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  min-height: 85vh;
}
.hub-main {
  min-width: 0;
  padding: 0 28px 40px;
}
.hub .icon-rail {
  background: #edf4f7;
  align-items: stretch;
}
.hub .icon-rail button {
  width: 100%;
  font-size: 12px;
  min-height: 58px;
}
.hub-grid {
  display: grid;
  align-items: start;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}
.hub-card {
  background: #fffefb;
  border: 1px solid #e4e1d6;
  border-radius: 20px;
  padding: 24px;
  min-width: 0;
}
.hub-card:nth-child(3n+2) {
  background: #f1f5eb;
}
.hub-card:nth-child(3n) {
  background: #faf1e8;
}
.hub h2 {
  font-size: 23px;
  margin-bottom: 18px;
}
.hub h3 {
  font-size: 17px;
  margin: 15px 0;
}
.hub p {
  line-height: 1.8;
  font-size: 13px;
}
.hub .family-header {
  padding: 30px 0;
  flex-wrap: wrap;
}
.hub .family-header h1 {
  font-size: 30px;
}
.hub time,
.hub small {
  font-size: 12px;
  color: #60675b;
}
.hub input:not([type=checkbox]),
.hub textarea,
.hub select {
  border: 1px solid #b8c0b1;
  border-radius: 12px;
  background: #fffefb;
  padding: 12px;
  max-width: 100%;
  min-width: 0;
}
.hub label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  margin: 12px 0;
}
.hub .check-row {
  flex-wrap: wrap;
  font-size: 14px;
  gap: 12px;
}
.hub .check-row span {
  flex: 1;
  overflow-wrap: anywhere;
}
.hub .check-row button {
  font-size: 12px;
  text-decoration: underline;
}
.hub .pill {
  min-height: 44px;
  white-space: normal;
}
.hub form .pill {
  margin-top: 12px;
}
.hub .notice {
  margin: 16px 0;
  padding: 15px;
  border-radius: 14px;
  background: #edf2e8;
  color: #354f3b;
  overflow-wrap: anywhere;
}
.hub .error {
  background: #faeddf;
  color: #703b25;
}
.hub .agent-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 4px;
  padding: 10px 14px;
  border-radius: 99px;
  background: #edf2e8;
  font-size: 12px;
}
.hub .agent-chip:nth-child(2n) {
  background: #f9e9d4;
}
.hub .agent-chip:nth-child(3n) {
  background: #e8eaf6;
}
.hub .project-tabs {
  flex-wrap: wrap;
}
.hub .project-tabs button {
  min-height: 44px;
  font-size: 12px;
}
.hub .project-switcher {
  display: flex;
  flex-wrap: wrap;
}
.hub .project-switcher button {
  display: block;
  min-height: 44px;
}
.hub .row {
  flex-wrap: wrap;
}
.hub ul {
  padding-left: 20px;
}
.hub li {
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.hub .empty {
  color: #60675b;
  padding: 16px 0;
}
.hub .section-heading {
  gap: 16px;
  flex-wrap: wrap;
}
.hub .inbox-note {
  max-width: none;
  background: #fffaf1;
  border: 1px solid #e5dfcc;
}
.hub details {
  margin-top: 20px;
}
.hub summary {
  cursor: pointer;
  padding: 14px;
}
.hub a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hub .brand {
  text-decoration: none;
}
.hub button:disabled {
  opacity: 0.65;
}
.hub [role=status] {
  min-height: 20px;
}
.hub[data-mode=assistant] .hub-layout {
  display: block;
}
.hub[data-mode=assistant] .icon-rail {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 8px;
}
.hub[data-mode=assistant] .icon-rail button {
  width: auto;
  padding: 10px 16px;
  min-height: 44px;
}
.hub[data-mode=assistant] .hub-grid {
  grid-template-columns: 1fr;
}
.hub[data-mode=assistant] .hub-main {
  padding: 0 16px 24px;
}
.hub[data-mode=assistant] .family-header h1 {
  font-size: 24px;
}
.marketing-body .hero {
  padding: 65px 0 45px;
}
.marketing-body .hero h1 {
  max-width: 850px;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.15;
}
.marketing-body .hero em {
  color: #718763;
  font-style: normal;
}
.marketing-body .surface-trio {
  align-items: stretch;
}
.marketing-body .product-card {
  padding: 24px;
}
.marketing-body .product-card h2 {
  font-size: 22px;
  margin: 20px 0;
}
.marketing-body .product-card p {
  font-size: 14px;
  line-height: 1.8;
}
.marketing-body .hero p {
  max-width: 450px;
  font-size: 15px;
  line-height: 1.9;
}
.marketing-body footer {
  padding: 45px 0;
  font-size: 13px;
}
.marketing-body .hero form {
  margin-top: 25px;
}
.marketing-body .pill {
  min-height: 44px;
}
.marketing-body a {
  text-decoration: underline;
}
.marketing-body .brand {
  text-decoration: none;
}
@media (max-width: 800px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }
  .hub-main {
    padding: 0 16px 28px;
  }
  .hub-layout {
    display: block;
  }
  .hub .icon-rail {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
  }
  .hub .icon-rail button {
    width: auto;
    min-height: 44px;
    padding: 10px 14px;
  }
  .hub .family-header {
    padding: 23px 0;
  }
  .hub .family-header h1 {
    font-size: 25px;
  }
  .hub .toolbar .context {
    border: 0;
    padding: 0;
  }
  .hub-card {
    padding: 18px;
  }
  .marketing-body .surface-trio {
    grid-template-columns: 1fr;
  }
  .marketing-body .hero {
    display: block;
  }
  .marketing-body .hero p {
    margin-top: 25px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.hub .icon-rail,
.hub .eyebrow,
.hub .project-heading p,
.marketing-body .product-card > p,
.hero h1 em,
.marketing-body .hero em,
.marketing-body .eyebrow,
.marketing-body .hero p,
.hub .check-row input:checked + span {
  color: #60675b;
}
.hub input:not([type=hidden]),
.hub textarea,
.hub select {
  border-color: #60675b;
}
.hub input[type=checkbox] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #60675b;
  border-radius: 4px;
  background: #fffefb;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.hub input[type=checkbox]:checked {
  background: #354f3b;
  border-color: #354f3b;
}
.hub input[type=checkbox]:checked::after {
  content: "\2713";
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.hub :is(button, a, input, select, textarea, summary):focus-visible,
.marketing-body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #354f3b;
  outline-offset: 3px;
}
.hub button:hover,
.marketing-body button:hover {
  filter: none;
}
.hub .hub-dialog {
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  margin: auto;
  padding: 24px;
  color: #262923;
  background: #fffefb;
  border: 1px solid var(--stone);
  border-radius: 20px;
}
.hub .hub-dialog::backdrop {
  background: rgb(38 41 35 / 35%);
}
.hub .hub-dialog input {
  width: 100%;
}
.hub .hub-dialog .row {
  justify-content: flex-end;
  gap: 12px;
}
.hub :is(.icon-rail, .project-tabs) button[aria-pressed=true] {
  text-decoration: underline;
  text-decoration-color: #354f3b;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (min-width: 801px) {
  .hub[data-mode=web] .hub-grid {
    grid-template-rows: auto auto 1fr;
  }
  .hub[data-mode=web] .hub-grid > .hub-card:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .hub[data-mode=web] .hub-grid > .hub-card:not(:first-child) {
    grid-column: 2;
    max-height: 410px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .hub[data-mode=web] .hub-grid > .hub-card:nth-child(2) {
    grid-row: 1;
  }
  .hub[data-mode=web] .hub-grid > .hub-card:nth-child(3) {
    grid-row: 2;
  }
  .hub[data-mode=web] .hub-grid > .hub-card:nth-child(4) {
    grid-row: 3;
  }
}
.marketing-body .hero-agents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.marketing-body .agent-chip {
  background: #f4eddb;
  border: 1px solid #ded7c5;
  color: #454b3d;
  border-radius: 99px;
  padding: 8px 12px;
}
.marketing-body .agent-chip.mint {
  background: #e9f1e5;
}
.marketing-body .agent-chip.sky {
  background: #e9edf9;
}
.marketing-body .product-title {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 20px;
}
.marketing-body .product-title h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.4;
}
.marketing-body .product-title > span {
  font-size: 11px;
  color: #60675b;
}
.marketing-body .preview-caption {
  color: #60675b;
  font-size: 13px;
  line-height: 1.8;
  max-width: 850px;
  margin-bottom: 22px;
}
.marketing-body .northstar-preview,
.marketing-body .pairing-preview {
  min-height: 350px;
  padding: 18px;
  border: 1px solid #e4e1d6;
  border-radius: 13px;
  background: #f5f4e9;
  color: #454b3d;
  margin-bottom: 20px;
}
.marketing-body .preview-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.marketing-body .preview-heading > strong {
  font-size: 17px;
}
.marketing-body .preview-heading > span,
.marketing-body .preview-whisper,
.marketing-body .preview-progress span {
  color: #60675b;
  font-size: 11px;
}
.marketing-body .preview-week {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.marketing-body .preview-week > div {
  display: grid;
  align-content: start;
  gap: 12px;
  font-size: 12px;
}
.marketing-body .preview-event {
  background: #e0edde;
  padding: 10px 7px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.8;
}
.marketing-body .preview-event small {
  font-size: 10px;
}
.marketing-body .preview-event.lilac {
  background: #e9e3f1;
}
.marketing-body .preview-event.peach {
  background: #f4e4d7;
}
.marketing-body .preview-list {
  display: grid;
  gap: 10px;
  font-size: 12px;
  padding: 18px 0;
}
.marketing-body .preview-list > span {
  border-bottom: 1px solid #dddfd1;
  padding-bottom: 7px;
}
.marketing-body .preview-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.marketing-body .preview-tabs span {
  padding: 8px 10px;
  border-radius: 99px;
  background: #e7ecdc;
  font-size: 11px;
}
.marketing-body .project-preview > p {
  font-size: 12px;
  line-height: 1.8;
}
.marketing-body .preview-progress {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}
.marketing-body .pairing-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  text-align: center;
}
.marketing-body .pairing-house {
  font-size: 35px;
  color: #60675b;
}
.marketing-body .pairing-preview h3 {
  font-size: 24px;
  line-height: 1.4;
}
.marketing-body .preset-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.marketing-body .preset-pill {
  border: 1px solid #ddd8c8;
  background: #fffdf6;
  border-radius: 99px;
  padding: 8px 12px;
  font-size: 11px;
}
.marketing-body .preset-pill.p1 {
  background: #e9f1e5;
}
.marketing-body .preset-pill.p2 {
  background: #e9edf9;
}
.marketing-body .pairing-preview p {
  color: #60675b;
  font-size: 12px;
}
.marketing-body .pairing-preview small {
  color: #60675b;
  font-size: 11px;
}
.marketing-body .story-strip {
  margin-top: 45px;
}
.marketing-body .story-strip h3 {
  font-size: 24px;
}
.marketing-body .story-strip p,
.marketing-body .footer {
  color: #60675b;
}
.marketing-body .site-nav nav > a {
  display: inline;
  padding: 12px 0;
}
@media (max-width: 800px) {
  .marketing-body .site-nav {
    height: auto;
    padding: 20px 0;
    flex-wrap: wrap;
  }
  .marketing-body .site-nav nav {
    flex-wrap: wrap;
    gap: 12px;
  }
  .marketing-body .story-strip {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .marketing-body .northstar-preview,
  .marketing-body .pairing-preview {
    min-height: 0;
  }
}
#home-panel {
  color: #191b1f;
  margin: 0 0 24px;
  min-width: 0;
}
#home-panel .preview-heading {
  padding: 20px 0 12px;
  max-width: 850px;
}
#home-panel .preview-heading p,
#home-panel .preview-caption,
#home-panel .eyebrow,
#home-panel [data-preview-count],
#home-panel [data-preview-dinner],
#home-panel small,
#home-panel .event-provenance {
  color: #303946;
}
#home-panel .preview-heading .eyebrow {
  font-weight: 700;
  letter-spacing: 0.06em;
}
#home-panel .preview-heading h2 {
  font-size: 28px;
  margin: 8px 0;
}
#home-panel .preview-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 16px;
}
#home-panel .preview-switcher button,
#home-panel .preview-meal-day {
  border: 1px solid #60675b;
  border-radius: 14px;
  background: #fffefb;
  color: #191b1f;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13px;
}
#home-panel button[aria-pressed=true] {
  border: 2px solid #354f3b;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  background: #e5eee2;
}
#home-panel :is(button, input, [tabindex]):focus-visible {
  outline: 3px solid #354f3b;
  outline-offset: 3px;
}
#home-panel .progress-strip {
  padding: 0;
  gap: 12px;
  margin-bottom: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#home-panel .sarah {
  --pastel: #dceee2;
  --member: #354f3b;
}
#home-panel .alex {
  --pastel: #cfe7f3;
  --member: #28506c;
}
#home-panel .maya {
  --pastel: #f8d7c9;
  --member: #763e2d;
}
#home-panel .leo {
  --pastel: #e5d7f0;
  --member: #58416e;
}
#home-panel .member-progress {
  padding: 14px;
  border: 1px solid #697589;
  border-radius: 18px;
  background: var(--pastel);
  gap: 10px;
}
#home-panel .progress-info {
  min-width: 0;
}
#home-panel .avatar {
  background: var(--pastel);
  color: #191b1f;
  border: 1px solid #697589;
  width: 32px;
  height: 32px;
  font-size: 14px;
  flex-shrink: 0;
}
#home-panel .progress-info .row {
  flex-wrap: wrap;
  font-size: 13px;
}
#home-panel .progress-track {
  background: #fffefb;
  border: 1px solid #60675b;
  height: 10px;
}
#home-panel .progress-bar-fill {
  background: var(--member);
}
#home-panel [data-percent="0"] .progress-bar-fill {
  width: 0;
}
#home-panel [data-percent="25"] .progress-bar-fill {
  width: 25%;
}
#home-panel [data-percent="33"] .progress-bar-fill {
  width: 33%;
}
#home-panel [data-percent="50"] .progress-bar-fill {
  width: 50%;
}
#home-panel [data-percent="67"] .progress-bar-fill {
  width: 67%;
}
#home-panel [data-percent="75"] .progress-bar-fill {
  width: 75%;
}
#home-panel [data-percent="100"] .progress-bar-fill {
  width: 100%;
}
#home-panel .hub-card {
  margin-bottom: 18px;
  background: #fffefb;
}
#home-panel .calendar-card {
  padding: 20px 12px;
}
#home-panel .calendar-card > :is(h3, p) {
  margin-left: 8px;
}
#calendar-week-grid {
  overflow-x: auto;
  max-width: 100%;
  padding: 8px 4px;
}
#home-panel .week-grid {
  --preview-hour: 116px;
  min-width: 1100px;
  grid-template-columns: 58px repeat(5, minmax(0, 1fr));
}
#home-panel .day-head {
  font: 700 20px Jakarta, sans-serif;
  padding: 12px 5px;
  border-bottom: 1px solid #697589;
  color: #191b1f;
}
#home-panel .meal-pill {
  background: #ffccb6;
  color: #191b1f;
  border: 1px solid #697589;
  padding: 8px;
  min-height: 44px;
  white-space: normal;
  line-height: 1.5;
}
#home-panel .time-axis,
#home-panel .day-track {
  height: calc(var(--preview-hour) * 11);
  background-image: none;
}
#home-panel .day-track {
  border-left: 1px solid #c1c7cd;
}
#home-panel .time-label {
  top: calc(var(--preview-hour) * var(--preview-offset));
  color: #303946;
  font-size: 12px;
  right: 6px;
  transform: none;
}
#home-panel .calendar-event {
  top: calc(var(--preview-hour) * var(--preview-start));
  height: auto;
  min-height: max(148px, calc(var(--preview-hour) * var(--preview-duration) - 6px));
  padding: 10px;
  left: 4px;
  right: 4px;
  gap: 5px;
  border: 1px solid #697589;
  border-radius: 15px;
  color: #191b1f;
  background: var(--pastel);
  overflow: visible;
}
#home-panel .calendar-event strong {
  font-size: 13px;
  line-height: 1.4;
}
#home-panel .calendar-event small {
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}
#home-panel .preview-location {
  font-size: 12px;
  line-height: 1.4;
}
#home-panel .event-provenance {
  font-size: 11px;
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
#home-panel .preview-event-member {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: auto;
}
#home-panel .calendar-event .avatar {
  position: static;
  width: 22px;
  height: 22px;
  font-size: 11px;
}
#home-panel .preview-chore-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
#home-panel .preview-chore-column {
  padding: 14px;
  background: var(--pastel);
  border: 1px solid #697589;
  border-radius: 16px;
  min-width: 0;
}
#home-panel h4 {
  margin: 0 0 12px;
  font-size: 14px;
}
#home-panel .preview-chore-column h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}
#home-panel .preview-chore-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
}
#home-panel .preview-chore-row small {
  display: block;
  font-size: 11px;
}
#home-panel .preview-chore-row.completed > span {
  text-decoration: line-through;
}
#home-panel .preview-chore-row input {
  margin: 2px 0 0;
}
#home-panel .preview-meals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  background: #fff0e7;
}
#home-panel .preview-meals img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 16px;
  margin-top: 16px;
}
#home-panel .preview-meal-days {
  display: grid;
  gap: 8px;
}
#home-panel .preview-meal-day {
  text-align: left;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 1000px) {
  #home-panel .progress-strip,
  #home-panel .preview-chore-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  #home-panel .member-progress {
    padding: 10px;
    gap: 6px;
  }
  #home-panel .preview-chore-columns,
  #home-panel .preview-meals {
    grid-template-columns: minmax(0, 1fr);
  }
  #home-panel .preview-switcher button {
    padding: 10px;
  }
}
#home-panel [data-hour="0"] {
  --preview-offset: 0;
}
#home-panel [data-hour="1"] {
  --preview-offset: 1;
}
#home-panel [data-hour="2"] {
  --preview-offset: 2;
}
#home-panel [data-hour="3"] {
  --preview-offset: 3;
}
#home-panel [data-hour="4"] {
  --preview-offset: 4;
}
#home-panel [data-hour="5"] {
  --preview-offset: 5;
}
#home-panel [data-hour="6"] {
  --preview-offset: 6;
}
#home-panel [data-hour="7"] {
  --preview-offset: 7;
}
#home-panel [data-hour="8"] {
  --preview-offset: 8;
}
#home-panel [data-hour="9"] {
  --preview-offset: 9;
}
#home-panel [data-hour="10"] {
  --preview-offset: 10;
}
#home-panel [data-preview-event=school] {
  --preview-start: 0;
  --preview-duration: 1;
}
#home-panel [data-preview-event=doctor] {
  --preview-start: 6;
  --preview-duration: 1;
}
#home-panel [data-preview-event=soccer] {
  --preview-start: 8;
  --preview-duration: 1.5;
}
#home-panel [data-preview-event=focus] {
  --preview-start: 1;
  --preview-duration: 2;
}
#home-panel [data-preview-event=lunch] {
  --preview-start: 5.5;
  --preview-duration: 1.5;
}
#home-panel [data-preview-event=piano] {
  --preview-start: 7.5;
  --preview-duration: 1;
}
#home-panel [data-preview-event=violin] {
  --preview-start: 9;
  --preview-duration: 1;
}
#home-panel [data-preview-event=market] {
  --preview-start: 2;
  --preview-duration: 1.5;
}
#home-panel [data-preview-event=haircut] {
  --preview-start: 6;
  --preview-duration: 1.5;
}
#home-panel [data-preview-event=movie] {
  --preview-start: 9;
  --preview-duration: 2;
}
#home-panel [data-preview-event=beach] {
  --preview-start: 6;
  --preview-duration: 4;
}
#home-panel [data-preview-event=library] {
  --preview-start: 1;
  --preview-duration: 1;
}
#home-panel [data-preview-event=football] {
  --preview-start: 5.5;
  --preview-duration: 2;
}
#home-panel [data-preview-event=cleaning] {
  --preview-start: 9;
  --preview-duration: 1;
}
#home-panel .calendar-event:hover {
  filter: none;
}
:root:has(> body.kylon-home) {
  background: #f4efe6;
}
body.kylon-home {
  --kh-canvas: #f4efe6;
  --kh-surface: #fbf8f2;
  --kh-ink: #1b1712;
  --kh-ink-2: #26211b;
  --kh-soft: #4a4238;
  --kh-tag: #5e5246;
  --kh-em: #7d6b58;
  --kh-line: rgba(58, 37, 25, 0.13);
  --kh-line-2: rgba(58, 37, 25, 0.22);
  --kh-lime: #dfe5e3;
  --kh-frame: #e8dfd1;
  --kh-terra: #a8442a;
  --kh-max: 1240px;
  --kh-gutter: clamp(16px, 2.6vw, 32px);
  --kh-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.2), 0 18px 40px -28px rgba(70, 42, 20, 0.35);
  --kh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .15 0 0 0 2.4 -1.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --kh-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 1 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.22'/%3E%3C/svg%3E");
  margin: 0;
  background: transparent;
  color: var(--kh-ink);
  font-family: Jakarta, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.kylon-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--kh-grain);
  background-size: 240px 240px;
}
.kylon-home ul,
.kylon-home ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kylon-home figure {
  margin: 0;
}
.kylon-home h2,
.kylon-home h3 {
  margin: 0;
}
.kylon-home em,
.kylon-home i {
  font-style: normal;
}
.kylon-home [id] {
  scroll-margin-top: 96px;
}
.kylon-home :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #1b1712;
  outline-offset: 3px;
}
.kylon-home button:hover {
  filter: none;
}
.kylon-home .skip {
  left: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--kh-ink);
  font-weight: 600;
  box-shadow: var(--kh-shadow);
}
.kylon-home .sarah {
  --kh-p: #dfe8d8;
  --kh-i: #2f4a35;
}
.kylon-home .alex {
  --kh-p: #d7e6f1;
  --kh-i: #23506d;
}
.kylon-home .maya {
  --kh-p: #f6d8cb;
  --kh-i: #7a3a26;
}
.kylon-home .leo {
  --kh-p: #e7def1;
  --kh-i: #533f6d;
}
.kylon-home .agent {
  --kh-p: #26211b;
  --kh-i: #fff;
}
.kylon-home .agent.muse {
  --kh-p: #3b2f5c;
}
.kylon-home .agent.dot {
  --kh-p: #2f4a35;
}
.kylon-home .agent.grok {
  --kh-p: #22303f;
}
.kylon-home .agent.claude {
  --kh-p: #a8442a;
}
.kylon-home .agent.gpt {
  --kh-p: #1f3b33;
}
.kylon-home :is(.kh-face, .kh-mini) {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--kh-p, #eee6da);
  color: var(--kh-i, #1b1712);
  font-weight: 700;
  line-height: 1;
}
.kylon-home .kh-mini {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.kylon-home .site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: block;
  height: auto;
  padding: 0;
  background: rgba(246, 244, 239, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid rgba(58, 37, 25, 0.12);
}
.kylon-home .kh-nav-inner {
  width: min(var(--kh-max), calc(100% - 2 * var(--kh-gutter)));
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.kylon-home .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  color: var(--kh-ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.kylon-home .brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  border-radius: 9px;
  background: var(--kh-ink-2);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.kylon-home .kh-brand-tag {
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px rgba(58, 37, 25, 0.35);
  color: var(--kh-tag);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kylon-home .site-nav nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-size: 14px;
}
.kylon-home .site-nav nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--kh-soft);
  font-weight: 600;
  text-decoration: none;
}
.kylon-home .site-nav nav > a:hover {
  background: rgba(58, 37, 25, 0.06);
  color: var(--kh-ink);
}
.kylon-home .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #7d6b58;
  border-radius: 12px;
  background: #fff;
  color: var(--kh-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.kylon-home .pill:hover {
  background: #f8f3eb;
}
.kylon-home .pill.primary {
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid #26211b;
  border-radius: 14px;
  background: #26211b;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 12px 24px -14px rgba(38, 33, 27, 0.7);
}
.kylon-home .pill.primary:hover {
  background: #3a3129;
}
.kylon-home .hero {
  display: block;
  padding: clamp(40px, 6vw, 80px) 0 0;
}
:where(.kylon-home) .hero p {
  margin: 0;
  max-width: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.kylon-home .kh-hero-copy {
  width: min(var(--kh-max), calc(100% - 2 * var(--kh-gutter)));
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
}
.kylon-home .kh-hero-head {
  flex: 1 1 auto;
  min-width: 0;
}
.kylon-home .kh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: #fbf8f2;
  box-shadow: inset 0 0 0 0.5px rgba(58, 37, 25, 0.3);
  color: var(--kh-soft);
  font-size: 13px;
  font-weight: 600;
}
.kylon-home .kh-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5d7a4f;
  box-shadow: 0 0 0 3px #dfe8d8;
}
.kylon-home .hero h1 {
  max-width: none;
  margin: 22px 0 0;
  color: var(--kh-ink);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.kylon-home .kh-hero-lede {
  max-width: 30ch;
  margin-top: 22px;
  color: var(--kh-soft);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.kylon-home .kh-hero-lede mark {
  padding: 0 0.15em;
  border-radius: 0.2em;
  background: var(--kh-lime);
  color: var(--kh-ink);
  font-weight: 600;
  box-shadow: 0 0 0 0.5px rgba(62, 74, 46, 0.3);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.kylon-home .kylon-hero-side {
  flex: 0 0 min(410px, 40%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 6px;
}
.kylon-home .kylon-hero-side > p:first-child {
  color: var(--kh-soft);
  font-size: 17px;
  line-height: 1.55;
}
.kylon-home .kh-roster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.kylon-home .kh-faces {
  display: flex;
}
.kylon-home .kh-face {
  width: 38px;
  height: 38px;
  margin-left: -9px;
  box-shadow: 0 0 0 2.5px var(--kh-canvas);
  font-size: 14px;
}
.kylon-home .kh-face:first-child {
  margin-left: 0;
}
.kylon-home .kh-roster-note {
  max-width: 240px;
  color: var(--kh-soft);
  font-size: 13px;
  line-height: 1.45;
}
.kylon-home .kh-auth-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(58, 37, 25, 0.28);
  color: var(--kh-ink);
  font-size: 13px;
  font-weight: 600;
}
.kylon-home .kh-auth-g {
  display: inline-grid;
  place-items: center;
}
.kylon-home .kh-auth-mail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--kh-line-2);
  color: var(--kh-soft);
}
.kylon-home .kh-auth-mail svg {
  width: 16px;
  height: 16px;
}
.kylon-home .kh-auth-note {
  margin-top: -8px;
  color: var(--kh-tag);
  font-size: 13px;
}
.kylon-home .kylon-frame {
  position: relative;
  isolation: isolate;
  width: min(1320px, calc(100% - 2 * var(--kh-gutter)));
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding: clamp(10px, 2.2vw, 30px);
  border-radius: clamp(18px, 2vw, 30px);
  background: var(--kh-frame);
}
.kylon-home .kylon-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--kh-grain), var(--kh-mottle);
  background-size: 240px 240px, 720px 720px;
  pointer-events: none;
}
.kylon-home .kylon-frame figcaption {
  max-width: 820px;
  margin: 16px auto 2px;
  color: var(--kh-soft);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}
.kylon-home .kylon-shell {
  display: grid;
  grid-template-columns: 52px 220px 340px minmax(0, 1fr);
  grid-template-rows: auto;
  height: auto;
  min-height: 640px;
  max-width: none;
  margin: 0;
  overflow: clip;
  border: 0;
  border-radius: clamp(14px, 1.4vw, 20px);
  background: #fff;
  box-shadow:
    0 0 0 0.5px rgba(58, 37, 25, 0.22),
    0 34px 70px -34px rgba(70, 42, 20, 0.45),
    0 12px 24px -14px rgba(70, 42, 20, 0.2);
  text-align: left;
}
.kylon-home .kylon-shell svg {
  display: block;
}
.kylon-home .kh-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-right: 1px solid var(--kh-line);
  background: #faf8f4;
  color: var(--kh-soft);
}
.kylon-home .kh-rail-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: var(--kh-ink-2);
  color: #fff;
  font-size: 17px;
}
.kylon-home .kh-rail-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.kylon-home .kh-rail-icon.is-active {
  background: #ece5d9;
  color: var(--kh-ink);
}
.kylon-home .kh-rail-me {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: auto;
  border-radius: 50%;
  background: #dfe8d8;
  color: #2f4a35;
  font-size: 12px;
  font-weight: 700;
}
.kylon-home .kh-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 12px;
  border-right: 1px solid var(--kh-line);
  background: #fbf9f5;
}
.kylon-home .kh-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 6px;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.kylon-home .kh-side-head span {
  color: var(--kh-soft);
}
.kylon-home .kh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 0 8px;
  font-size: 12.5px;
}
.kylon-home .kh-filters span {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--kh-soft);
  white-space: nowrap;
}
.kylon-home .kh-filters .is-active {
  background: #ece5d9;
  color: var(--kh-ink);
  font-weight: 600;
}
.kylon-home .kh-filters b {
  font-weight: 700;
}
.kylon-home .kh-side-label {
  margin: 10px 6px 2px;
  color: var(--kh-tag);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kylon-home .kh-rooms li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--kh-ink-2);
  font-size: 13.5px;
}
.kylon-home .kh-rooms li.is-active {
  background: #ece5d9;
  font-weight: 600;
}
.kylon-home .kh-hash {
  color: var(--kh-tag);
  font-weight: 600;
}
.kylon-home .kh-rooms :is(em, b) {
  margin-left: auto;
  font-size: 11.5px;
}
.kylon-home .kh-rooms em {
  color: var(--kh-tag);
  font-weight: 400;
}
.kylon-home .kh-rooms b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #2f4a35;
  color: #fff;
}
.kylon-home .kh-people li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 6px;
}
.kylon-home .kh-people strong,
.kylon-home .kh-people small {
  display: block;
}
.kylon-home .kh-people strong {
  font-size: 13px;
}
.kylon-home .kh-people small {
  color: var(--kh-soft);
  font-size: 11.5px;
}
.kylon-home .kh-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--kh-line);
  background: #fff;
}
.kylon-home .kh-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kh-line);
}
.kylon-home .kh-thread-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3efe8;
  color: var(--kh-soft);
}
.kylon-home .kh-thread-head strong,
.kylon-home .kh-thread-head small {
  display: block;
}
.kylon-home .kh-thread-head strong {
  font-size: 15px;
  letter-spacing: -0.01em;
}
.kylon-home .kh-thread-head small {
  color: var(--kh-soft);
  font-size: 12px;
}
.kylon-home .kh-thread-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.kylon-home .kh-msg {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
}
.kylon-home .kh-msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}
.kylon-home .kh-agent-tag {
  padding: 2px 6px;
  border-radius: 6px;
  background: #eee8de;
  color: var(--kh-tag);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kylon-home .kh-time {
  color: var(--kh-soft);
  font-size: 11.5px;
}
.kylon-home .kh-bubble {
  padding: 10px 12px;
  border-radius: 4px 14px 14px 14px;
  background: #f3efe8;
  color: var(--kh-ink);
  font-size: 13.5px;
  line-height: 1.5;
}
.kylon-home .kh-bubble-human {
  background: #edf2e8;
}
.kylon-home .kh-at {
  padding: 0 4px;
  border-radius: 5px;
  background: #dbe6d3;
  color: #2f4a35;
  font-weight: 700;
}
.kylon-home .kh-appcard {
  margin-top: 10px;
  padding: 0 8px 8px;
  border: 1.5px solid #c8d8bb;
  border-radius: 14px;
  background: #f4f8ef;
}
.kylon-home .kh-appcard-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  font-size: 12.5px;
}
.kylon-home .kh-appcard-icon {
  color: #2f4a35;
}
.kylon-home .kh-appcard-icon svg {
  width: 16px;
  height: 16px;
}
.kylon-home .kh-appcard-kind {
  margin-left: auto;
  padding-left: 8px;
  border-left: 1px solid #b9c9ac;
  color: #2f4a35;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kylon-home .kh-appcard-body {
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.2);
}
.kylon-home .kh-appcard-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}
.kylon-home .kh-mini-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.kylon-home .kh-mini-day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--kh-soft);
  font-size: 10.5px;
  font-weight: 600;
}
.kylon-home .kh-mini-day i {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: var(--kh-p, #eee6da);
}
.kylon-home .kh-mini-day i.agent {
  background: #ece5d9;
}
.kylon-home .kh-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 16px 16px;
  padding: 12px 14px;
  border: 1px solid var(--kh-line-2);
  border-radius: 14px;
  color: var(--kh-soft);
  font-size: 13px;
}
.kylon-home .kh-composer-icons {
  display: flex;
  gap: 10px;
}
.kylon-home .kh-composer-icons svg {
  width: 18px;
  height: 18px;
}
.kylon-home .kh-canvas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 10px 10px;
  background: #eef4e8;
}
.kylon-home .kh-canvas-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px;
}
.kylon-home .kh-canvas-app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2f4a35;
  font-size: 13px;
}
.kylon-home .kh-canvas-app strong {
  color: var(--kh-ink);
}
.kylon-home .kh-canvas-app svg {
  width: 16px;
  height: 16px;
}
.kylon-home .kh-canvas-kind {
  padding-left: 8px;
  border-left: 1px solid #b9c9ac;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kylon-home .kh-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #2f4a35;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kylon-home .kh-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9e3a4;
}
.kylon-home .kh-board {
  flex: 1;
  min-width: 0;
  padding: 18px 16px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.2);
}
.kylon-home .kh-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.kylon-home .kh-board-head strong {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.kylon-home .kh-board-head span {
  color: var(--kh-soft);
  font-size: 14px;
}
.kylon-home .kh-chores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.kylon-home .kh-chore {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--kh-p);
}
.kylon-home .kh-chore .kh-mini {
  width: 26px;
  height: 26px;
  background: var(--kh-i);
  color: #fff;
}
.kylon-home .kh-chore-info {
  display: grid;
  flex: 1;
  gap: 5px;
  min-width: 0;
}
.kylon-home .kh-chore-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: var(--kh-ink);
  font-size: 12.5px;
}
.kylon-home .kh-chore-row span {
  white-space: nowrap;
}
.kylon-home .kh-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
}
.kylon-home .kh-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--kh-i, #2f4a35);
}
.kylon-home .kh-fill.f100 {
  width: 100%;
}
.kylon-home .kh-fill.f75 {
  width: 75%;
}
.kylon-home .kh-fill.f67 {
  width: 67%;
}
.kylon-home .kh-fill.f60 {
  width: 60%;
}
.kylon-home .kh-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.kylon-home .kh-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kylon-home .kh-day-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--kh-line);
  color: var(--kh-ink-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.kylon-home .kh-date {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
}
.kylon-home .today .kh-date {
  background: var(--kh-terra);
  color: #fff;
}
.kylon-home .kh-dinner {
  padding: 5px 8px;
  border-radius: 8px;
  background: #f6d3bd;
  color: var(--kh-ink);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.kylon-home .kh-event {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
  padding: 8px 8px 26px;
  border-radius: 10px;
  background: var(--kh-p);
  color: var(--kh-ink);
}
.kylon-home .kh-event b {
  font-size: 12.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.kylon-home .kh-event span {
  color: var(--kh-soft);
  font-size: 11.5px;
}
.kylon-home .kh-event i {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kh-i);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.kylon-home .kh-event.agent {
  min-height: 0;
  padding-bottom: 8px;
  border: 1px dashed #8a7b6a;
  background: #faf6ef;
}
.kylon-home .kh-event.agent span {
  color: #2f4a35;
  font-weight: 600;
}
.kylon-home .kh-works {
  width: min(var(--kh-max), calc(100% - 2 * var(--kh-gutter)));
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
}
.kylon-home .kh-works p {
  width: 100%;
  color: var(--kh-tag);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.kylon-home .kh-works ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  color: var(--kh-ink-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.kylon-home .kh-section {
  width: min(var(--kh-max), calc(100% - 2 * var(--kh-gutter)));
  margin: 0 auto;
  padding-top: clamp(88px, 10vw, 144px);
}
.kylon-home .kh-section h2 {
  color: var(--kh-ink);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.kylon-home .kh-section h2 em {
  color: var(--kh-em);
}
.kylon-home .kh-matrix {
  text-align: center;
}
.kylon-home .kh-sub {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--kh-soft);
  font-size: 17px;
  line-height: 1.55;
}
.kylon-home .kh-quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 48px;
}
.kylon-home .kh-cell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 250px;
  padding: 64px 28px 32px;
  border-radius: 22px;
  background: #efe7da;
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.16);
}
.kylon-home .kh-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--kh-grain);
  background-size: 240px 240px;
  pointer-events: none;
}
.kylon-home .kh-cell-b {
  background: #f1e3d3;
}
.kylon-home .kh-cell-c {
  background: #e6e5d4;
}
.kylon-home .kh-cell-hero {
  min-height: 330px;
  background: var(--kh-lime);
}
.kylon-home .kh-cell .kh-tag {
  position: absolute;
  top: 20px;
  left: 22px;
  color: var(--kh-tag);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kylon-home .kh-cell > p:last-child {
  max-width: 34ch;
  color: var(--kh-soft);
  font-size: 15px;
  line-height: 1.55;
}
.kylon-home .kh-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.kylon-home .kh-marks span {
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.25);
  color: var(--kh-ink);
  font-size: 14px;
  font-weight: 600;
}
.kylon-home .kh-cell-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--kh-ink);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.kylon-home .kh-cell-brand .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 26px;
}
.kylon-home .kh-cell-hero .kh-cell-lede {
  max-width: none;
  color: #3c4d51;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.kylon-home .kh-crew {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 520px;
}
.kylon-home .kh-crew li {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--kh-ink);
  font-size: 13px;
  font-weight: 600;
}
.kylon-home .kh-crew li.agent {
  background: #26211b;
  color: #fff;
}
.kylon-home .kh-show {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.kylon-home .kh-show-flip {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}
.kylon-home .kh-show-flip .kh-show-copy {
  order: 2;
}
.kylon-home .kh-show-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.kylon-home .kh-show-copy h2 {
  font-size: clamp(32px, 3.8vw, 54px);
}
.kylon-home .kh-show-copy > p:not(.kh-num, .kh-fine) {
  color: var(--kh-soft);
  font-size: 17px;
  line-height: 1.6;
}
.kylon-home .kh-num {
  padding: 5px 12px;
  border-radius: 999px;
  background: #fbf8f2;
  box-shadow: inset 0 0 0 0.5px rgba(58, 37, 25, 0.3);
  color: var(--kh-tag);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kylon-home .kh-points {
  display: grid;
  gap: 10px;
}
.kylon-home .kh-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--kh-ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.kylon-home .kh-points svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: #dfe8d8;
  color: #2f4a35;
}
.kylon-home .kh-fine {
  max-width: 46ch;
  color: var(--kh-tag);
  font-size: 13px;
  line-height: 1.55;
}
.kylon-home .kh-card {
  min-width: 0;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--kh-shadow);
}
.kylon-home .kh-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.kylon-home .kh-card-head strong {
  font-size: 16px;
  letter-spacing: -0.01em;
}
.kylon-home .kh-card-head span {
  color: var(--kh-tag);
  font-size: 12px;
  font-weight: 600;
}
.kylon-home .kh-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px;
}
.kylon-home .kh-card-week {
  grid-column: 1 / -1;
}
.kylon-home .kh-card-dinner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kylon-home .kh-card-dinner img,
.kylon-home .kh-dinner-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin-bottom: 10px;
  border-radius: 14px;
  object-fit: cover;
}
.kylon-home .kh-card-kicker,
.kylon-home .kh-list-title {
  color: var(--kh-tag);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kylon-home .kh-dinner-title {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.kylon-home :is(.kh-market, .kh-check) li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--kh-line);
  color: var(--kh-ink-2);
  font-size: 14px;
}
.kylon-home :is(.kh-market, .kh-check) li:last-child {
  border-bottom: 0;
}
.kylon-home :is(.kh-market, .kh-check) li > span {
  width: 18px;
  color: var(--kh-soft);
  font-weight: 700;
}
.kylon-home :is(.kh-market, .kh-check) li.done > span {
  color: #2f4a35;
}
.kylon-home .kh-rings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
}
.kylon-home .kh-rings li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
}
.kylon-home .kh-ring {
  position: relative;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
}
.kylon-home .kh-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.kylon-home .kh-ring circle {
  fill: none;
  stroke-width: 5;
}
.kylon-home .kh-ring-track {
  stroke: var(--kh-p);
}
.kylon-home .kh-ring-fill {
  stroke: var(--kh-i);
  stroke-linecap: round;
}
.kylon-home .kh-ring-star {
  position: relative;
  color: var(--kh-i);
  font-size: 17px;
}
.kylon-home .kh-rings b {
  align-self: end;
  font-size: 14px;
}
.kylon-home .kh-rings li > span:last-child {
  align-self: start;
  color: var(--kh-soft);
  font-size: 13px;
}
.kylon-home .kh-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  padding: 12px;
}
.kylon-home .kh-split-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: #f7f3ec;
}
.kylon-home .kh-split-label {
  margin: 0 4px 4px;
  color: var(--kh-tag);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kylon-home .kh-proj {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
}
.kylon-home .kh-proj.is-active {
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.22), 0 6px 14px -10px rgba(70, 42, 20, 0.4);
}
.kylon-home .kh-proj strong {
  font-size: 14px;
}
.kylon-home .kh-proj small {
  color: var(--kh-soft);
  font-size: 12.5px;
}
.kylon-home .kh-proj .kh-bar {
  margin-top: 4px;
  background: #e8e0d3;
}
.kylon-home .kh-split-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 6px;
}
.kylon-home .kh-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.kylon-home .kh-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: #dfe8d8;
  color: #2f4a35;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.kylon-home .kh-ask {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #d9c9b4;
  border-radius: 14px;
  background: #fbf6ee;
}
.kylon-home .kh-ask-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kh-tag);
  font-size: 12px;
  font-weight: 700;
}
.kylon-home .kh-ask-meta svg {
  width: 15px;
  height: 15px;
}
.kylon-home .kh-ask-q {
  font-size: 16px;
  font-weight: 600;
}
.kylon-home .kh-ask-choices {
  display: flex;
  gap: 8px;
}
.kylon-home .kh-ask-choices span {
  padding: 6px 12px;
  border: 1px solid #8a7b6a;
  border-radius: 10px;
  background: #fff;
  color: var(--kh-ink);
  font-size: 13px;
  font-weight: 600;
}
.kylon-home .kh-ask-choices .yes {
  border-color: #2f4a35;
  background: #2f4a35;
  color: #fff;
}
.kylon-home .kh-ask-note {
  color: var(--kh-soft);
  font-size: 12.5px;
}
.kylon-home .kh-audit {
  display: grid;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--kh-line);
}
.kylon-home .kh-audit li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--kh-ink-2);
  font-size: 12.5px;
}
.kylon-home .kh-audit .kh-time {
  min-width: 64px;
}
.kylon-home .kh-show form {
  margin-top: 4px;
}
.kylon-home .kh-agents-card {
  padding: 22px;
}
.kylon-home .kh-agents {
  display: grid;
}
.kylon-home .kh-agents li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kh-line);
}
.kylon-home .kh-agents .kh-mini {
  width: 34px;
  height: 34px;
  font-size: 15px;
}
.kylon-home .kh-agent-name strong,
.kylon-home .kh-agent-name small {
  display: block;
}
.kylon-home .kh-agent-name strong {
  font-size: 15px;
}
.kylon-home .kh-agent-name small {
  color: var(--kh-soft);
  font-size: 13px;
}
.kylon-home .kh-scopes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.kylon-home .kh-scopes code {
  padding: 3px 8px;
  border-radius: 7px;
  background: #f3efe8;
  color: var(--kh-ink-2);
  font:
    600 12px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.kylon-home .kh-boundary {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: #edf2e8;
}
.kylon-home .kh-boundary-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2f4a35;
  color: #fff;
}
.kylon-home .kh-boundary p {
  color: var(--kh-soft);
  font-size: 14px;
  line-height: 1.5;
}
.kylon-home .kh-boundary strong {
  display: block;
  color: var(--kh-ink);
  font-size: 15px;
}
.kylon-home .kh-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 48px;
}
.kylon-home .kh-faq-head {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 14px;
}
.kylon-home .kh-faq-head p {
  color: var(--kh-soft);
  font-size: 17px;
}
.kylon-home .kh-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.kylon-home .kh-faq-grid article {
  padding: 24px;
  border-radius: 20px;
  background: var(--kh-surface);
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.2);
}
.kylon-home .kh-faq-grid h3 {
  color: var(--kh-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.kylon-home .kh-faq-grid p {
  margin-top: 10px;
  color: var(--kh-soft);
  font-size: 15px;
  line-height: 1.6;
}
.kylon-home .kh-footer {
  margin-top: clamp(96px, 10vw, 144px);
  border-top: 0.5px solid rgba(58, 37, 25, 0.2);
}
.kylon-home .kh-footer-inner {
  width: min(var(--kh-max), calc(100% - 2 * var(--kh-gutter)));
  margin: 0 auto;
  padding: 40px 0 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 32px;
}
.kylon-home .kh-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.kylon-home .kh-footer-inner > p:nth-child(2) {
  color: var(--kh-soft);
  font-size: 15px;
}
.kylon-home .kh-footer .kh-fine {
  grid-column: 1 / -1;
  max-width: none;
}
@media (prefers-reduced-motion: no-preference) {
  .kylon-home :is(.pill, .site-nav nav > a) {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
}
@media (max-width: 1180px) {
  .kylon-home .kylon-shell {
    grid-template-columns: 52px minmax(260px, 320px) minmax(0, 1fr);
  }
  .kylon-home .kh-side {
    display: none;
  }
}
@media (max-width: 960px) {
  .kylon-home .kh-hero-copy {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .kylon-home .kylon-hero-side {
    flex-basis: auto;
  }
  .kylon-home .kylon-shell {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 0;
  }
  .kylon-home .kh-thread {
    display: none;
  }
  .kylon-home .kh-show,
  .kylon-home .kh-faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .kylon-home .kh-show-flip .kh-show-copy {
    order: 0;
  }
  .kylon-home .kh-faq-head {
    position: static;
  }
}
@media (max-width: 720px) {
  .kylon-home .kh-nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 10px 0 6px;
  }
  .kylon-home .site-nav nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 0 0 -12px;
  }
  .kylon-home .kh-nav-inner > form {
    grid-column: 2;
    grid-row: 1;
  }
  .kylon-home .kylon-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .kylon-home .kh-rail {
    display: none;
  }
  .kylon-home .kh-quad,
  .kylon-home .kh-bento,
  .kylon-home .kh-split,
  .kylon-home .kh-faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .kylon-home .kh-chores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kylon-home .kh-week {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kylon-home .kh-week .kh-day:nth-child(n+4) {
    display: none;
  }
  .kylon-home .kh-agents li {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .kylon-home .kh-scopes {
    grid-column: 2;
    justify-content: flex-start;
  }
  .kylon-home .kh-footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 440px) {
  .kylon-home .kh-brand-tag {
    display: none;
  }
  .kylon-home .kh-cell {
    padding: 60px 18px 26px;
  }
  .kylon-home .kh-board {
    padding: 14px 10px;
  }
}
:root:has(.hub[data-mode=web]) {
  background: #f4efe6;
}
body:has(> .hub[data-mode=web]) {
  background: transparent;
}
body:has(> .hub[data-mode=web])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .15 0 0 0 2.4 -1.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
body:has(> .hub[data-mode=web]) > .skip {
  left: 16px;
  border-radius: 12px;
  color: #1b1712;
  font-weight: 600;
}
body:has(> .hub[data-mode=web]) > .skip:focus-visible {
  outline: 3px solid #1b1712;
  outline-offset: 3px;
}
.hub[data-mode=web] {
  width: calc(100% - 40px);
  max-width: 1560px;
  margin: 20px auto 40px;
  overflow: clip;
  border-radius: 22px;
  background: #fff;
  color: #1b1712;
  box-shadow:
    0 0 0 0.5px rgba(58, 37, 25, 0.22),
    0 34px 70px -40px rgba(70, 42, 20, 0.45),
    0 12px 24px -16px rgba(70, 42, 20, 0.18);
}
.hub[data-mode=web] .toolbar {
  min-height: 60px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(58, 37, 25, 0.12);
  background: #fff;
}
.hub[data-mode=web] .brand {
  font-size: 19px;
  letter-spacing: -0.03em;
}
.hub[data-mode=web] .brand-mark {
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  border-radius: 9px;
  background: #26211b;
  font-size: 18px;
  letter-spacing: 0;
}
.hub[data-mode=web] .toolbar .context {
  border-left-color: rgba(58, 37, 25, 0.18);
  color: #4a4238;
  font-size: 12px;
}
.hub[data-mode=web] .pill {
  border: 1px solid #8a7b6a;
  border-radius: 12px;
  background: #fff;
  color: #1b1712;
  font-weight: 600;
}
.hub[data-mode=web] .pill.primary {
  border-color: #26211b;
  background: #26211b;
  color: #fff;
}
.hub[data-mode=web] .pill:not(.primary):hover {
  background: #f8f3eb;
}
.hub[data-mode=web] .pill.primary:hover {
  background: #3a3129;
}
.hub[data-mode=web] .hub-layout {
  grid-template-columns: 92px minmax(0, 1fr);
}
.hub[data-mode=web] .icon-rail {
  gap: 6px;
  padding: 14px 10px;
  border-right: 1px solid rgba(58, 37, 25, 0.12);
  background: #faf8f4;
  color: #4a4238;
}
.hub[data-mode=web] .icon-rail button {
  gap: 6px;
  min-height: 66px;
  border-radius: 14px;
  color: #4a4238;
  font-size: 12px;
  font-weight: 600;
}
.hub[data-mode=web] .icon-rail button::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--rail-icon) center / contain no-repeat;
  mask: var(--rail-icon) center / contain no-repeat;
}
.hub[data-mode=web] .icon-rail button[aria-pressed=true] {
  background: #fff;
  color: #1b1712;
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.22), 0 6px 14px -10px rgba(70, 42, 20, 0.4);
}
.hub[data-mode=web] .icon-rail [data-value=today] {
  --rail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5V19a1 1 0 0 1-1 1h-4.5v-5h-5v5H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.hub[data-mode=web] .icon-rail [data-value=lists] {
  --rail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='3'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.8-5'/%3E%3C/svg%3E");
}
.hub[data-mode=web] .icon-rail [data-value=projects] {
  --rail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5a2 2 0 0 1 2-2h3.6l2 2H18a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.hub[data-mode=web] .icon-rail [data-value=inbox] {
  --rail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5 6.2 6.3A2 2 0 0 1 8.1 5h7.8a2 2 0 0 1 1.9 1.3L20 13.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 13.5h4.5l1 2h5l1-2H20'/%3E%3C/svg%3E");
}
.hub[data-mode=web] .hub-main {
  padding: 0 32px 44px;
}
.hub[data-mode=web] .family-header {
  padding: 30px 0 22px;
  border-bottom: 1px solid rgba(58, 37, 25, 0.1);
  background: transparent;
}
.hub[data-mode=web] .family-header h1 {
  color: #1b1712;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.hub[data-mode=web] .family-header time {
  color: #4a4238;
  font-size: 14px;
}
.hub[data-mode=web] .family-header label {
  color: #4a4238;
  font-weight: 600;
}
.hub[data-mode=web] :is(input:not([type=checkbox]), textarea, select) {
  min-height: 44px;
  border-radius: 12px;
  background: #fff;
}
.hub[data-mode=web] h2 {
  color: #1b1712;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hub[data-mode=web] .hub-card {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.2), 0 18px 40px -32px rgba(70, 42, 20, 0.35);
}
.hub[data-mode=web] .hub-card:nth-child(3n+2) {
  background: #f3f6ee;
}
.hub[data-mode=web] .hub-card:nth-child(3n) {
  background: #fbf3ea;
}
.hub[data-mode=web] .agent-whisper {
  margin: 22px 0 6px;
  padding: 16px 18px;
  border: 0;
  border-radius: 18px;
  background: #f7f3ec;
}
.hub[data-mode=web] .agent-whisper h2 {
  margin-bottom: 10px;
  font-size: 18px;
}
.hub[data-mode=web] .agent-chip,
.hub[data-mode=web] .agent-chip:nth-child(2n),
.hub[data-mode=web] .agent-chip:nth-child(3n) {
  background: #fff;
  color: #26211b;
  font-weight: 600;
  box-shadow: 0 0 0 0.5px rgba(58, 37, 25, 0.28);
}
.hub[data-mode=web] .agent-chip small {
  color: #4a4238;
  font-weight: 400;
}
.hub[data-mode=web] .inbox-note {
  border: 0;
  border-radius: 4px 18px 18px 18px;
  background: #f7f3ec;
}
.hub[data-mode=web] footer details {
  padding: 4px 6px;
  border-radius: 16px;
  background: #faf8f4;
}
.hub[data-mode=web] #home-panel {
  color: #1b1712;
}
.hub[data-mode=web] #home-panel .preview-heading {
  padding: 26px 0 10px;
}
.hub[data-mode=web] #home-panel .preview-heading .eyebrow {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f7f3ec;
  box-shadow: inset 0 0 0 0.5px rgba(58, 37, 25, 0.3);
  color: #5e5246;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.hub[data-mode=web] #home-panel .preview-heading h2 {
  margin: 12px 0 8px;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.hub[data-mode=web] #home-panel .preview-heading p,
.hub[data-mode=web] #home-panel .preview-caption,
.hub[data-mode=web] #home-panel small,
.hub[data-mode=web] #home-panel .event-provenance,
.hub[data-mode=web] #home-panel [data-preview-count],
.hub[data-mode=web] #home-panel [data-preview-dinner] {
  color: #4a4238;
}
.hub[data-mode=web] #home-panel .preview-heading .eyebrow {
  color: #5e5246;
}
.hub[data-mode=web] #home-panel :is(.preview-switcher button, .preview-meal-day) {
  border: 1px solid #8a7b6a;
  border-radius: 12px;
  background: #fff;
  color: #1b1712;
  font-weight: 600;
}
.hub[data-mode=web] #home-panel :is(.preview-switcher button, .preview-meal-day)[aria-pressed=true] {
  border: 1.5px solid #26211b;
  background: #ece5d9;
  color: #1b1712;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #1b1712;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.hub[data-mode=web] #home-panel :is(button, input, [tabindex]):focus-visible {
  outline-color: #1b1712;
}
.hub[data-mode=web] #home-panel .member-progress {
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 0.5px rgba(58, 37, 25, 0.12);
}
.hub[data-mode=web] #home-panel .avatar {
  border: 0;
  background: var(--member);
  color: #fff;
  font-weight: 700;
}
.hub[data-mode=web] #home-panel .progress-track {
  height: 8px;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(58, 37, 25, 0.16);
}
.hub[data-mode=web] #home-panel .hub-card {
  background: #fff;
}
.hub[data-mode=web] #home-panel .calendar-card {
  padding: 22px 14px 16px;
}
.hub[data-mode=web] #home-panel .calendar-card > h3,
.hub[data-mode=web] #home-panel .preview-chores > h3,
.hub[data-mode=web] #home-panel .preview-meals h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hub[data-mode=web] #home-panel .day-head {
  border-bottom: 1px solid rgba(58, 37, 25, 0.14);
  color: #1b1712;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hub[data-mode=web] #home-panel .meal-pill {
  border: 1px solid #a0583a;
  border-radius: 10px;
  background: #f6d3bd;
  font-weight: 600;
}
.hub[data-mode=web] #home-panel .day-track {
  border-left-color: rgba(58, 37, 25, 0.1);
}
.hub[data-mode=web] #home-panel .time-label {
  color: #4a4238;
}
.hub[data-mode=web] #home-panel .calendar-event {
  border: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 0.5px rgba(58, 37, 25, 0.14);
}
.hub[data-mode=web] #home-panel .preview-chore-column {
  border: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 0.5px rgba(58, 37, 25, 0.12);
}
.hub[data-mode=web] #home-panel .preview-meals {
  background: #fff4ec;
}
.hub[data-mode=web] #home-panel .preview-meals img {
  border-radius: 18px;
}
@media (max-width: 800px) {
  .hub[data-mode=web] {
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hub[data-mode=web] .icon-rail {
    border-right: 0;
    border-bottom: 1px solid rgba(58, 37, 25, 0.12);
  }
  .hub[data-mode=web] .icon-rail button {
    flex-direction: row;
    min-height: 44px;
  }
  .hub[data-mode=web] .icon-rail button::before {
    width: 18px;
    height: 18px;
  }
  .hub[data-mode=web] .hub-main {
    padding: 0 16px 28px;
  }
}