#principles{
  --ink: #180a24;
  --plum: #2d103f;
  --violet: #522168;
  --purple: #753790;
  --orchid: #b589ca;
  --gold: #d9b66f;
  --gold-bright: #f1d89d;
  --cream: #f8f1e6;
  --paper: #fffaf2;
  --muted: #cabed0;
  --white: #fffdf9;
  --line: rgba(217, 182, 111, 0.28);
  --shadow: 0 30px 80px rgba(7, 2, 12, 0.34);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:normal;}
#principles *{
  box-sizing: border-box;
}
#principles button,#principles textarea{
  font: inherit;
}
#principles button{
  color: inherit;
}
#principles button:focus-visible,#principles a:focus-visible,#principles textarea:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}
#principles .eyebrow{
  margin: 0 0 24px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
#principles h1,#principles h2,#principles h3,#principles blockquote{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}
#principles h1{
  margin: 0;
  font-size: clamp(3.4rem, 8vw, 7.4rem);
  line-height: 0.91;
  letter-spacing: -0.05em;
}
#principles h1 em{
  display: block;
  margin-top: 16px;
  color: transparent;
  background: linear-gradient(120deg, #b58b43 0%, #f2dda7 45%, #c99d51 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 400;
}
#principles .button{
  border: 0;
  cursor: pointer;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
#principles .button:hover{
  transform: translateY(-2px);
}
#principles .button-primary{
  min-height: 55px;
  padding: 0 29px;
  color: #281431;
  background: linear-gradient(120deg, #cda656, #f1d99e 50%, #c59b48);
  box-shadow: 0 16px 40px rgba(217, 182, 111, 0.2);
}
#principles .button-primary span,#principles .button-next span{
  margin-left: 10px;
}
#principles .journey{
  position: relative;
  padding: 110px max(20px, calc((100% - 1180px) / 2)) 120px;
  background:
    linear-gradient(rgba(249, 243, 233, 0.98), rgba(249, 243, 233, 0.98)),
    radial-gradient(circle at 20% 20%, #ffffff, transparent 30%);
  color: #281432;
}
#principles .journey-heading{
  max-width: 710px;
  margin-bottom: 54px;
}
#principles .journey-heading .eyebrow{
  margin-bottom: 14px;
  color: #9b702d;
}
#principles .journey-heading h2{
  margin: 0;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
#principles .journey-heading > p:last-child{
  max-width: 630px;
  color: #6c5a71;
  line-height: 1.7;
}
#principles .journey-shell{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
#principles .principle-rail{
  position: sticky;
  top: 24px;
  padding: 22px;
  background: #2a1039;
  border: 1px solid rgba(217, 182, 111, 0.25);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
#principles .progress-card{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 96px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
#principles .progress-ring{
  width: 70px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--gold) calc(var(--progress) * 1%), rgba(255, 255, 255, 0.1) 0);
  position: relative;
}
#principles .progress-ring::before{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #2a1039;
}
#principles .progress-ring div{
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
  line-height: 1;
}
#principles .progress-ring strong{
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
}
#principles .progress-ring span,#principles .progress-card > div > span{
  color: #a999b0;
  font-size: 0.62rem;
}
#principles .progress-card > div > p{
  margin: 0 0 6px;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}
#principles .progress-card > div > span{
  line-height: 1.5;
}
#principles .principle-nav{
  display: grid;
  gap: 3px;
  margin-top: 14px;
}
#principles .nav-principle{
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
  color: #c6b7cb;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}
#principles .nav-principle:hover{
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
}
#principles .nav-principle.active{
  color: var(--gold-bright);
  background: rgba(217, 182, 111, 0.1);
}
#principles .nav-number{
  color: #7f6a85;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
}
#principles .nav-principle.active .nav-number{
  color: var(--gold);
}
#principles .nav-title{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.93rem;
}
#principles .nav-check{
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: transparent;
  font-size: 0.55rem;
}
#principles .nav-principle.explored .nav-check{
  color: #261332;
  border-color: var(--gold);
  background: var(--gold);
}
#principles .reset-button{
  margin: 16px 0 0 10px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: none;
  color: #8f7d94;
  cursor: pointer;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#principles .principle-stage{
  background: var(--paper);
  border: 1px solid rgba(119, 76, 130, 0.13);
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(48, 18, 61, 0.14);
  overflow: hidden;
}
#principles .stage-topline{
  min-height: 60px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(84, 38, 96, 0.1);
  color: #8c728f;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#principles .stage-theme{
  color: #a77d33;
}
#principles .principle-content{
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 34px;
  padding: 46px 48px 40px;
}
#principles .principle-symbol{
  width: 136px;
  height: 180px;
  display: grid;
  place-items: center;
  position: relative;
  color: #734a7d;
  background:
    radial-gradient(circle, rgba(217, 182, 111, 0.3) 0 2px, transparent 3px),
    linear-gradient(150deg, rgba(82, 33, 104, 0.08), rgba(217, 182, 111, 0.09));
  background-size: 18px 18px, auto;
  border: 1px solid rgba(190, 150, 74, 0.34);
  border-radius: 68px 68px 18px 18px;
}
#principles .principle-symbol::before,#principles .principle-symbol::after{
  content: "";
  position: absolute;
  border: 1px solid rgba(160, 115, 44, 0.35);
  border-radius: 50%;
}
#principles .principle-symbol::before{
  width: 72px;
  height: 72px;
}
#principles .principle-symbol::after{
  width: 44px;
  height: 44px;
  transform: rotate(45deg);
  border-radius: 8px;
}
#principles .principle-symbol span{
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}
#principles .principle-kicker{
  margin: 0 0 8px;
  color: #9b712e;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#principles .principle-copy h3{
  margin: 0;
  color: #3a1846;
  font-size: clamp(3.3rem, 6vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}
#principles blockquote{
  margin: 26px 0 20px;
  max-width: 670px;
  color: #633c6d;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-style: italic;
  line-height: 1.45;
}
#principles .principle-body{
  max-width: 670px;
  margin: 0;
  color: #635268;
  font-size: 0.98rem;
  line-height: 1.8;
}
#principles .golden-move{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 670px;
  margin-top: 28px;
  padding: 18px 20px;
  background: linear-gradient(100deg, rgba(217, 182, 111, 0.16), rgba(217, 182, 111, 0.05));
  border-left: 2px solid var(--gold);
}
#principles .golden-move > span{
  color: #a97727;
  margin-top: 2px;
}
#principles .golden-move p{
  margin: 0 0 5px;
  color: #9b712e;
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#principles .golden-move strong{
  color: #49324f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
#principles .reflection-box{
  max-width: 670px;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid rgba(82, 33, 104, 0.13);
}
#principles .reflection-heading{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
#principles .reflection-heading p{
  margin: 0 0 4px;
  color: #452152;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
}
#principles .reflection-heading > div > span,#principles .saved-status,#principles .privacy-note{
  color: #8a7b8e;
  font-size: 0.72rem;
}
#principles .saved-status{
  color: #96712d;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#principles .prompts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
#principles .prompt-card{
  min-height: 118px;
  padding: 18px;
  border: 1px solid rgba(82, 33, 104, 0.1);
  border-radius: 16px;
  color: #5f4a65;
  background: rgba(255, 255, 255, 0.58);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  line-height: 1.55;
}
#principles .prompt-card span{
  display: block;
  margin-bottom: 8px;
  color: #ae8337;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#principles .journal-label{
  display: block;
  margin-bottom: 8px;
  color: #715977;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#principles textarea{
  width: 100%;
  resize: vertical;
  padding: 15px 17px;
  color: #39283e;
  background: #fffdf8;
  border: 1px solid rgba(82, 33, 104, 0.16);
  border-radius: 14px;
  line-height: 1.6;
}
#principles textarea::placeholder{
  color: #ad9daf;
}
#principles .privacy-note{
  margin: 6px 0 0;
}
#principles .stage-actions{
  min-height: 84px;
  padding: 16px 30px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  background: #2a1039;
}
#principles .button-quiet{
  margin-right: auto;
  padding-left: 0;
  color: #ad9bb2;
  background: transparent;
}
#principles .button-quiet:disabled{
  opacity: 0.25;
  cursor: default;
  transform: none;
}
#principles .button-complete{
  color: var(--gold-bright);
  background: transparent;
  border: 1px solid rgba(217, 182, 111, 0.35);
}
#principles .button-complete.is-complete{
  color: #24112e;
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}
#principles .complete-icon{
  margin-right: 6px;
}
#principles .button-next{
  color: #2a1233;
  background: var(--cream);
}
#principles .principle-stage.switching .principle-content{
  animation: stageIn 0.45s ease both;
}
@keyframes stageIn{
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 900px){#principles .journey-shell{
    grid-template-columns: 1fr;
  }
#principles .principle-rail{
    position: static;
  }
#principles .principle-nav{
    grid-template-columns: repeat(3, 1fr);
  }
#principles .nav-principle{
    grid-template-columns: 22px 1fr 14px;
  }}
@media (max-width: 680px){#principles h1{
    font-size: clamp(3.2rem, 16vw, 5rem);
  }
#principles .journey{
    padding: 82px 14px 90px;
  }
#principles .journey-heading{
    padding: 0 7px;
  }
#principles .principle-rail{
    padding: 16px;
    border-radius: 22px;
  }
#principles .principle-nav{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
#principles .nav-principle{
    min-height: 46px;
    padding: 0 7px;
  }
#principles .nav-title{
    font-size: 0.78rem;
  }
#principles .principle-stage{
    border-radius: 22px;
  }
#principles .stage-topline{
    min-height: 52px;
    padding: 0 18px;
    font-size: 0.54rem;
  }
#principles .principle-content{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 20px 30px;
  }
#principles .principle-symbol{
    width: 78px;
    height: 78px;
    border-radius: 50%;
  }
#principles .principle-symbol::before{
    width: 48px;
    height: 48px;
  }
#principles .principle-symbol::after{
    width: 29px;
    height: 29px;
  }
#principles .principle-copy h3{
    font-size: clamp(3.3rem, 17vw, 5rem);
  }
#principles .prompts{
    grid-template-columns: 1fr;
  }
#principles .prompt-card{
    min-height: auto;
  }
#principles .stage-actions{
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
#principles .button-quiet{
    display: none;
  }
#principles .button-complete,#principles .button-next{
    min-height: 50px;
    padding: 0 12px;
    font-size: 0.6rem;
  }}
@media (prefers-reduced-motion: reduce){#principles *,#principles *::before,#principles *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }}
#principles .journey{padding-top:85px;padding-bottom:75px}#principles .journey-heading>p:not(.eyebrow){margin:20px 0 0;line-height:1.75;max-width:670px}#principles .journey-heading .journey-saving{font-size:.72rem;color:#8a7b8e;margin-top:12px}#principles .principle-nav{padding:0;border:0;background:none}#principles .nav-principle{min-height:52px;margin:0;grid-template-columns:28px 1fr 16px}#principles .nav-principle .principle-label{font-family:Georgia,"Times New Roman",serif;font-size:.93rem;color:inherit}#principles .nav-principle small{display:block;font:8px/1.4 Inter,Arial,sans-serif;letter-spacing:.1em;opacity:.7;margin-top:3px}#principles .nav-principle.active{color:var(--gold-bright);background:rgba(217,182,111,.1)}#principles .nav-principle .done{display:grid;color:transparent;margin:0;width:15px;height:15px;border:1px solid #ffffff2e;border-radius:50%;font-size:.55rem;place-items:center}#principles .nav-principle.explored .done{color:#261332;background:var(--gold);border-color:var(--gold)}#principles .stage-topline{margin:0}#principles .principle-kicker{margin:0 0 8px}#principles .golden-move p{margin:0 0 5px}#principles .reflection-heading p{margin:0 0 4px}#principles .reflection-box{margin-top:38px}#principles input{box-sizing:border-box;width:100%;padding:15px 17px;background:#fffdf8;border:1px solid #52216829;border-radius:14px;color:#39283e;font:inherit;line-height:1.6}#principles .action-label{margin-top:20px}#principles .privacy-note a{color:#715977;text-decoration:underline}#principles .rail-caption{margin:23px 0 0 10px;font:9px/1.9 Inter,Arial,sans-serif;color:#a68faf;letter-spacing:.14em}#principles .journey-download{margin-top:32px;border-top:1px solid #52216821;padding-top:25px;display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:end}#principles .download-personalization{margin:0}#principles .download-personalization label{display:block;font:12px/1.5 Inter,Arial,sans-serif;color:#715977;margin-bottom:10px}#principles .journey-download p{font:16px/1.7 Georgia,serif;color:#6c5a71;margin:0 0 10px}#principles .text-link{font:13px/1.6 Inter,Arial,sans-serif;color:#633c6d;text-decoration:underline;text-underline-offset:4px}#principles .status{font:12px/1.7 Inter,Arial,sans-serif;margin-top:15px}#principles .overview-invitation{margin-top:28px;padding:22px;background:#f4edf6;border-left:2px solid #d9b66f}#principles .overview-invitation .eyebrow{margin:0 0 12px}#principles .overview-invitation p{font-size:15px;line-height:1.8}#principles .progress-card #progressText{font-size:.65rem;color:#cabed0}#principles .button{font-family:Inter,Arial,sans-serif;display:inline-block}#principles .principle-copy h3{overflow-wrap:anywhere}#principles .principle-symbol{margin:0}#principles .stage-actions{margin:0}#principles .principle-stage{padding:0}#principles .journey-shell{margin:0}#principles .principle-rail{color:var(--cream)}
@media(max-width:900px){#principles .journey-download{grid-template-columns:1fr;gap:20px}#principles .nav-principle{grid-template-columns:22px 1fr 14px}#principles .journey-heading{max-width:710px}}
@media(max-width:680px){#principles .journey{padding:65px 14px}#principles .principle-nav{grid-template-columns:repeat(2,minmax(0,1fr))}#principles .nav-principle .principle-label{font-size:.78rem}#principles .stage-actions .button-quiet{display:block;grid-column:1/-1;margin:0;text-align:left;min-height:32px}#principles .principle-copy h3{font-size:clamp(2.9rem,14vw,4.8rem)}#principles .journey-download{padding:24px 7px 0}#principles .rail-caption{display:none}}

#principles #principlePrompts{display:block}#principles .prompt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:680px){#principles .prompt-grid{grid-template-columns:1fr}}

#principles>.journey{display:block;grid-template-columns:none;gap:0;width:auto;max-width:none;margin:0}#principles .stage-actions .button-quiet{border-radius:999px}#principles .prompt-grid .prompt-card{margin:0}