/* Small delights, with the same quiet space to think. */
:root { --bg: #fbfaf7; --play-coral: #de856b; --play-ink: #374b43; }
.brand-mark { transition: transform .35s ease; }
.brand:hover .brand-mark { transform: rotate(45deg); }
.button.primary { border-radius: 13px; box-shadow: 0 3px 0 #a94e3320; }
.button.primary:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #a94e3320; }
.button.primary:active { transform: translateY(1px); box-shadow: none; }
.category-card { border-radius: 17px; }
.category-card:nth-child(4n+1) { background: #f5f2fb; border-color: #e6dff2; }
.category-card:nth-child(4n+2) { background: #eff5ef; border-color: #dce7dc; }
.category-card:nth-child(4n+3) { background: #fff6ec; border-color: #f0dfce; }
.category-card:nth-child(4n) { background: #fff9e7; border-color: #ede5c8; }
.category-card:hover .category-icon { transform: rotate(-9deg); }
.category-icon { transition: transform .22s ease; }
.sample-card { transform: rotate(1deg); border-radius: 20px; }
.sample-card:hover { transform: rotate(0deg) translateY(-3px); }
.home-content .welcome-copy h1 em, .self-intro .page-title em { position: relative; isolation: isolate; white-space: nowrap; }
.home-content .welcome-copy h1 em::after, .self-intro .page-title em::after { content: ''; position: absolute; z-index: -1; inset: auto -4px 0; height: 13px; background: #f2d69b99; border-radius: 50% 25% 45% 20%; transform: rotate(-2deg); }
.self-home-card { background: #edf3e8; border-radius: 19px; border-color: #d9e3d1; }
.self-home-symbol { background: none; border: 0; width: 64px; height: 64px; color: var(--play-coral); }
.flower-doodle { display: block; width: 100%; height: auto; overflow: visible; }
.flower-head { transform-origin: 67px 70px; }
.self-home-card:hover .flower-head, .compass-summary:hover .flower-head, .compass-summary.celebrate .flower-head { animation: flower-hello .75s ease both; }
.self-intro { align-items: center; gap: 30px; }
.self-intro > div > .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #637e58; }
.self-intro > div > .eyebrow::before { content: '✳'; font-size: 18px; line-height: 1; color: #c77d60; }
.self-intro .page-title { margin-bottom: 23px; }
.self-intro > div > p { color: #717a6b; }
.compass-summary { background: #fff3cf; border: 1px solid #eadfbb; border-radius: 22px 22px 36px 22px; padding: 26px; transform: rotate(1.3deg); box-shadow: 4px 5px 0 #eadfbb3d; overflow: visible; }
.compass-summary .eyebrow { color: #887746; font-size: 8px; }
.compass-summary h2 { font-size: 30px; margin: 22px 0 11px; max-width: 285px; }
.compass-summary .compass-toy { position: absolute; width: 91px; right: -12px; top: -23px; color: var(--play-coral); transform: rotate(9deg); }
.self-intro .compass-summary p { color: #807452; max-width: 225px; }
.reflection-progress { border-color: #dfd0a7; color: #817148; }
.progress-pebbles { display: flex; gap: 7px; margin-bottom: 11px; }
.progress-pebbles i { display: block; width: 23px; height: 8px; border-radius: 6px; background: #e7ddbd; transform: rotate(-5deg); transition: background .25s, transform .25s; }
.progress-pebbles i:nth-child(even) { transform: rotate(5deg); }
.progress-pebbles i.filled { background: #91a582; transform: rotate(0); }
.reflection-progress > span { color: #786442; }
.curiosity-card { display: flex; align-items: center; gap: 19px; background: #f0edf7; border: 1px solid #e2daee; border-radius: 17px; padding: 20px 23px; margin-top: 28px; }
.curiosity-spark { color: #a68ab9; font-size: 43px; line-height: 1; flex-shrink: 0; transform: rotate(-13deg); }
.curiosity-copy { flex: 1; min-width: 0; }
.curiosity-card .eyebrow { font-size: 8px; color: #81708f; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
#curiosity-number { font-size: 9px; letter-spacing: 0; opacity: .75; }
.curiosity-card p { font-family: var(--serif); font-size: 20px; line-height: 1.4; color: #665672; margin: 6px 0; max-width: 570px; }
.curiosity-caption { font-size: 10px; color: #82758b; }
.curiosity-card .button { background: #fffafc; color: #756080; border: 1px solid #d9cce4; font-size: 11px; gap: 8px; border-radius: 11px; white-space: nowrap; padding: 12px 15px; }
.curiosity-card .button:hover { background: #fff; border-color: #bca6cc; }
.curiosity-card .button .icon { width: 16px; height: 16px; }
.curiosity-card.fresh-angle .curiosity-spark { animation: angle-spin .45s ease both; }
.curiosity-card.fresh-angle #curiosity-question { animation: prompt-arrive .3s ease both; }
.values-section { padding-top: 31px; padding-bottom: 6px; }
.curiosity-card + .reflection-section { padding-top: 30px; }
.value-count { border-radius: 20px; background: #fff4d5; color: #857049; border-color: #eadcb8; padding: 5px 11px; font-size: 11px; transform: rotate(4deg); }
.values-grid { gap: 12px; }
.value-chip { --card-tint: #eff5ea; --card-border: #dce6d4; --card-color: #637b54; position: relative; overflow: visible; min-height: 151px; padding: 18px; background: var(--card-tint); border-color: var(--card-border); border-radius: 17px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.value-chip:nth-child(4n+2) { --card-tint: #fdf0e8; --card-border: #efdccf; --card-color: #ac7157; }
.value-chip:nth-child(4n+3) { --card-tint: #f1edf8; --card-border: #e1d9ef; --card-color: #84709d; }
.value-chip:nth-child(4n+4) { --card-tint: #fdf6df; --card-border: #ece2bf; --card-color: #9a8249; }
.value-art { display: block; width: 33px; height: 33px; color: var(--card-color); margin: 0 0 13px; transition: transform .25s ease; }
.value-art svg { width: 100%; height: 100%; }
.value-chip-top { margin-bottom: 5px; }
.value-chip-top strong { font-size: 13px; color: var(--play-ink); }
.value-chip-top > .icon { position: absolute; top: 17px; right: 16px; width: 21px; height: 21px; padding: 4px; border-radius: 50%; border: 1px solid var(--card-border); color: var(--card-color); background: #ffffff7a; }
.value-chip > span:last-child { color: #74776e; font-size: 11px; }
.value-chip:hover { background: var(--card-tint); border-color: var(--card-color); transform: translateY(-3px) rotate(-.7deg); box-shadow: 2px 5px 0 var(--card-border); }
.value-chip:nth-child(even):hover { transform: translateY(-3px) rotate(.7deg); }
.value-chip:hover .value-art { transform: rotate(-8deg); }
.value-chip.selected { background: var(--card-tint); border-color: var(--card-color); box-shadow: inset 0 0 0 1px var(--card-color), 2px 3px 0 var(--card-border); }
.value-chip.selected .value-chip-top > .icon { color: #fff; border-color: var(--card-color); background: var(--card-color); }
.value-chip.just-picked { animation: value-pop .35s ease both; }
.value-chip.just-picked::after { content: '✧'; color: var(--card-color); font-size: 28px; position: absolute; top: -16px; right: -7px; pointer-events: none; animation: little-spark .65s ease both; }
.reflection-card { border-radius: 18px; border-top: 3px solid #c6d9bc; }
.reflection-card.reflection-1 { border-top-color: #d7cae8; }
.reflection-card.reflection-2 { border-top-color: #ebc8af; }
.reflection-card .category-icon { transform: rotate(-6deg); border-radius: 11px; }
.reflection-card:focus-within .category-icon { transform: rotate(5deg); }
.intention-card { border-radius: 18px; background: #fff6e6; border-color: #eddebf; }
.intention-star { transform: rotate(-11deg); }
.lesson-empty { border-style: dashed; background: #fffcf5; }
.stepper li.current > span { transform: rotate(-7deg); border-radius: 10px; }
.stepper li.done > span { transform: rotate(5deg); border-radius: 10px; }
.wizard-card { border-radius: 20px; }
@keyframes flower-hello { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 65% { transform: rotate(8deg); } }
@keyframes value-pop { 0% { transform: scale(1); } 45% { transform: scale(1.035) rotate(-1deg); } 100% { transform: scale(1); } }
@keyframes little-spark { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-13px) scale(1.1) rotate(15deg); } }
@keyframes angle-spin { from { transform: rotate(-13deg); } to { transform: rotate(167deg); } }
@keyframes prompt-arrive { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1150px) { .compass-summary { padding: 23px; } .compass-summary h2 { font-size: 28px; } .compass-summary .compass-toy { width: 75px; top: -24px; right: -8px; } .self-intro { gap: 26px; } .curiosity-card { gap: 15px; padding: 19px; } .curiosity-card p { font-size: 18px; } }
@media (max-width: 950px) { .self-intro .page-title { font-size: 33px; } .compass-summary h2 { font-size: 25px; } .compass-summary .eyebrow { font-size: 7px; max-width: calc(100% - 37px); line-height: 1.8; } .curiosity-card { flex-wrap: wrap; } .curiosity-card .button { margin-left: 49px; } .curiosity-copy { min-width: calc(100% - 65px); } }
@media (max-width: 730px) { .self-intro .page-title { font-size: 36px; } .self-home-symbol { width: 52px; height: 52px; } .value-chip { padding: 16px; } }
@media (max-width: 510px) { .self-intro .page-title { font-size: 39px; } .self-intro > div > .eyebrow { font-size: 8px; letter-spacing: 1.1px; } .compass-summary { transform: rotate(.7deg); margin-top: 33px; padding: 23px; } .compass-summary h2 { font-size: 27px; max-width: 220px; margin: 18px 0 10px; } .compass-summary .compass-toy { width: 90px; right: -7px; top: -21px; } .compass-summary h2 br { display: inline; } .self-intro .compass-summary p { font-size: 11px; max-width: 235px; } .curiosity-card { gap: 12px; padding: 18px; margin-top: 24px; } .curiosity-spark { font-size: 33px; } .curiosity-copy { min-width: calc(100% - 50px); } .curiosity-card .eyebrow { font-size: 7px; letter-spacing: 1px; gap: 9px; } .curiosity-card p { font-size: 19px; } .curiosity-card .button { margin-left: 40px; min-height: 42px; } .value-chip { min-height: 158px; padding: 16px; } .value-chip > span:last-child { font-size: 11px; } .value-art { width: 32px; height: 32px; } .values-grid { gap: 11px; } .self-home-symbol { width: 39px; height: 39px; } .self-home-card .self-button { margin-left: 53px; } .sample-card { transform: none; } }
@media (prefers-reduced-motion: reduce) { .brand-mark, .button.primary, .category-card, .category-icon, .sample-card, .value-chip, .value-art, .progress-pebbles i { transition: none; } .flower-head, .value-chip.just-picked, .value-chip.just-picked::after, .curiosity-card.fresh-angle .curiosity-spark, .curiosity-card.fresh-angle #curiosity-question { animation: none !important; } .value-chip.just-picked::after { display: none; } .value-chip:hover, .value-chip:nth-child(even):hover, .button.primary:hover { transform: none; } }