:root{--font-heading: "Reem Kufi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body: "Noto Naskh Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;--paper: #F3F5F2;--sheet: #FFFFFF;--ink: #1C2A3F;--muted: #5B6878;--brass: #A8812F;--brass-text: #553D0A;--line: #D9DED8;--need-physical: #D2693C;--need-social: #3F8F7A;--need-mental: #3C6FB5;--need-spiritual: #8A5DB8;--bg-app: var(--paper);--bg-card: var(--sheet);--bg-surface: var(--sheet);--bg-subtle: #E8ECE6;--border: var(--line);--border-focus: var(--brass);--text-main: var(--ink);--text-muted: var(--muted);--text-light: var(--muted);--primary: var(--ink);--primary-hover: #2B3D55;--primary-active: #152030;--primary-contrast: #FFFFFF;--primary-subtle: rgba(168, 129, 47, .1);--primary-strong: var(--brass);--btn-primary-bg: var(--ink);--btn-primary-text: #FFFFFF;--btn-primary-hover: #2B3D55;--btn-primary-active: #152030;--accent-brass: var(--brass);--accent-brass-hover: #BF9538;--danger: #D32F2F;--danger-bg: #FDEDED;--danger-border: #F5C6CB;--danger-text: #C62828;--success: #2E7D32;--success-bg: #EDF7ED;--success-border: #C8E6C9;--success-text: #1B5E20;--radius-sm: 8px;--radius-btn: 12px;--radius-md: 12px;--radius-sheet: 20px;--radius-lg: 20px;--radius-full: 9999px;--radius-chip: 9999px;--shadow-sm: 0 1px 2px rgba(28, 42, 63, .04);--shadow-md: 0 2px 5px rgba(28, 42, 63, .06);--shadow-lg: 0 6px 16px rgba(28, 42, 63, .08)}@media(prefers-color-scheme:dark){:root{--paper: #141B26;--sheet: #1B2432;--ink: #E6EAF0;--muted: #9AA6B6;--brass: #D2AE5E;--brass-text: #F0D695;--line: #2C3848;--need-physical: #E27F55;--need-social: #52AA94;--need-mental: #5587CB;--need-spiritual: #A276D0;--bg-app: var(--paper);--bg-card: var(--sheet);--bg-surface: var(--sheet);--bg-subtle: #222D3D;--border: var(--line);--border-focus: var(--brass);--text-main: var(--ink);--text-muted: var(--muted);--text-light: var(--muted);--primary: var(--ink);--primary-hover: #F0F3F7;--primary-active: #D9DFE8;--primary-contrast: #141B26;--primary-subtle: rgba(210, 174, 94, .14);--primary-strong: var(--brass);--btn-primary-bg: var(--ink);--btn-primary-text: #141B26;--btn-primary-hover: #FFFFFF;--btn-primary-active: #D9DFE8;--accent-brass: var(--brass);--accent-brass-hover: #DFC075;--danger: #EF5350;--danger-bg: #3E1B1D;--danger-border: #5C2529;--danger-text: #FF8A80;--success: #66BB6A;--success-bg: #1B3624;--success-border: #285536;--success-text: #A5D6A7;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);--shadow-md: 0 2px 6px rgba(0, 0, 0, .35);--shadow-lg: 0 6px 16px rgba(0, 0, 0, .45)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background-color:var(--bg-app);color:var(--text-main);font-family:var(--font-body);font-size:18px;line-height:1.9;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100%;display:flex;flex-direction:column;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;text-transform:none;letter-spacing:normal}h1{font-size:2rem;line-height:1.3}h2{font-size:1.5rem;line-height:1.4}h3{font-size:1.25rem;line-height:1.4}h4{font-size:1.1rem;line-height:1.4}button,input,select,textarea,label,.badge,.tag{text-transform:none!important;letter-spacing:normal!important}:focus-visible{outline:2px solid var(--brass);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.app-container{width:100%;max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg-app);box-shadow:var(--shadow-sm);overflow-x:hidden;position:relative}.content-pad{padding:24px 20px}.btn-primary{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:14px 20px;background-color:var(--btn-primary-bg);color:var(--btn-primary-text);font-family:var(--font-heading);font-size:1.05rem;font-weight:600;border:1px solid transparent;border-radius:var(--radius-btn);cursor:pointer;transition:background-color .15s ease,transform .05s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none;text-decoration:none}.btn-primary:hover:not(:disabled){background-color:var(--btn-primary-hover)}.btn-primary:active:not(:disabled){background-color:var(--btn-primary-active);transform:scale(.99)}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;background:transparent;color:var(--text-main);font-family:var(--font-body);font-size:.95rem;font-weight:600;border:1px solid transparent;border-radius:var(--radius-btn);cursor:pointer;transition:color .15s ease,background-color .15s ease}.btn-ghost:hover:not(:disabled){color:var(--brass-text);background-color:var(--bg-subtle)}.btn-ghost:disabled{opacity:.5;cursor:not-allowed}.card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sheet);padding:24px;box-shadow:var(--shadow-sm)}.input-field{width:100%;padding:14px 16px;background-color:var(--bg-card);color:var(--text-main);border:1.5px solid var(--border);border-radius:var(--radius-btn);font-family:var(--font-body);font-size:1rem;line-height:1.6;transition:border-color .15s ease,box-shadow .15s ease}.input-field:focus{border-color:var(--brass);outline:none;box-shadow:0 0 0 3px #a8812f33}.alert-error{background-color:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-text);padding:12px 16px;border-radius:var(--radius-btn);font-size:.95rem;margin-bottom:16px}.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--radius-chip);font-size:.85rem;font-weight:600}.badge-done{background-color:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}.badge-available{background-color:#a8812f1a;color:var(--ink);border:1px solid var(--brass);font-weight:700}.badge-in-progress{background-color:var(--ink);color:var(--sheet)}.badge-locked{background-color:var(--bg-subtle);color:var(--text-light);border:1px solid var(--border)}.spinner{display:inline-block;width:32px;height:32px;border:3px solid rgba(168,129,47,.2);border-radius:50%;border-top-color:var(--brass);animation:spin .8s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes segmentGainPulse{0%{transform:scale(.92);opacity:.5}50%{transform:scale(1.06);opacity:1}to{transform:scale(1);opacity:1}}.compass-segment-animate{transform-origin:50px 50px;animation:segmentGainPulse .7s cubic-bezier(.16,1,.3,1) forwards}.compass-progress-pill{display:inline-flex;align-items:center;padding:6px 18px;background-color:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-chip);color:var(--brass-text, #785817);font-size:.95rem;font-weight:700}.compass-hero-card{background:radial-gradient(circle at center,rgba(168,129,47,.08) 0%,transparent 70%),var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sheet);padding:32px 20px;text-align:center;box-shadow:var(--shadow-sm)}.journey-path{position:relative;display:flex;flex-direction:column;padding:12px 0 24px}.journey-path:before{content:"";position:absolute;top:36px;bottom:44px;right:32px;width:3px;border-inline-end:2.5px dotted var(--line);z-index:0}.journey-station-wrapper{position:relative;z-index:1;margin-bottom:20px}.journey-station-row{display:flex;align-items:flex-start;gap:16px;padding:12px 14px;border-radius:var(--radius-sheet);transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent}.journey-station-row.clickable{cursor:pointer}.journey-station-row.clickable:hover{background-color:var(--bg-card);border-color:var(--line);box-shadow:var(--shadow-sm)}.journey-station-row.clickable:active{transform:translateY(1px)}.journey-station-row.locked{opacity:.6;cursor:not-allowed}.journey-node-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-heading);font-size:1.25rem;font-weight:700;transition:all .25s ease;z-index:2;background-color:var(--bg-card)}.journey-node-circle.done{background-color:var(--brass);border:2px solid var(--brass);color:#fff;box-shadow:0 2px 6px #a8812f40}.journey-node-circle.available,.journey-node-circle.in_progress{background-color:var(--sheet);border:3px solid var(--ink);color:var(--ink);animation:nodeSoftPulse 1.8s ease-out 1}@keyframes nodeSoftPulse{0%{box-shadow:0 0 #1c2a3f59}70%{box-shadow:0 0 0 10px #1c2a3f00}to{box-shadow:0 0 #1c2a3f00}}.journey-node-circle.locked{background-color:var(--paper);border:2px dashed var(--line);color:var(--muted)}.journey-node-content{flex:1;min-width:0;padding-top:4px}.journey-node-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px}.journey-station-title{font-size:1.2rem;font-weight:700;color:var(--text-main);margin:0}.journey-station-minutes{display:inline-block;font-size:.85rem;color:var(--text-muted);margin-bottom:6px}.journey-station-intro{font-size:.95rem;color:var(--text-muted);line-height:1.6;margin:0}.station-runner-step{animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.station-progress-bar-container{margin-bottom:18px}.station-progress-track{width:100%;height:6px;background-color:var(--line);border-radius:var(--radius-chip);overflow:hidden}.station-progress-fill{height:100%;background-color:var(--brass);border-radius:var(--radius-chip);transition:width .3s cubic-bezier(.16,1,.3,1)}.story-card,.story-aside{background-color:#d2693c12;border:1px solid rgba(210,105,60,.2);border-inline-start:4px solid var(--need-physical);border-radius:var(--radius-sheet);padding:20px}.story-card-tag{font-size:.85rem;font-weight:700;color:var(--need-physical);margin-bottom:6px}.story-card-title{font-family:var(--font-heading);font-size:1.25rem;margin-bottom:10px;color:var(--text-main)}.story-card-text{font-size:1.02rem;color:var(--text-main);line-height:1.8;font-style:italic}.question-prompt{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;line-height:1.5;color:var(--ink);margin-bottom:20px}.question-runner-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.question-counter{font-size:.95rem;font-weight:700;color:var(--text-main)}.save-status-indicator{font-size:.85rem}.question-sticky-bottom-bar{position:sticky;bottom:0;z-index:50;background-color:var(--bg-card);border-top:1px solid var(--border);padding:12px 20px;margin-left:-20px;margin-right:-20px;margin-bottom:-48px;box-shadow:0 -4px 16px #1c2a3f0f;display:flex;flex-direction:column;gap:10px}.question-sticky-nav-row{display:flex;gap:12px;align-items:center}.hints-trigger-btn{font-size:.95rem;font-weight:600;color:var(--brass-text, #785817);background-color:#a8812f14;border:1px dashed var(--brass);border-radius:var(--radius-btn);padding:10px 16px;width:100%;cursor:pointer;transition:all .15s ease}.hints-trigger-btn:hover{background-color:#a8812f24}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#141b2699;display:flex;align-items:flex-end;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:backdropFade .2s ease}@keyframes backdropFade{0%{opacity:0}to{opacity:1}}.sheet-container{width:100%;max-width:480px;max-height:85vh;background-color:var(--bg-card);border-top-left-radius:var(--radius-sheet);border-top-right-radius:var(--radius-sheet);padding:18px 22px 28px;display:flex;flex-direction:column;box-shadow:0 -8px 24px #1c2a3f26;animation:sheetSlideUp .25s cubic-bezier(.16,1,.3,1);overflow-y:auto}@keyframes sheetSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-handle{width:44px;height:5px;background-color:var(--border);border-radius:var(--radius-chip);margin:0 auto 16px}.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.sheet-title{font-size:1.35rem;margin:0}.sheet-counter{font-size:.85rem;font-weight:700;color:var(--muted);background-color:var(--bg-subtle);padding:4px 12px;border-radius:var(--radius-chip)}.sheet-close-btn{background:transparent;border:none;font-size:1.6rem;color:var(--text-light);cursor:pointer;padding:0 4px;line-height:1}.sheet-close-btn:hover{color:var(--text-main)}.sheet-dots{display:flex;justify-content:center;gap:8px;margin-bottom:14px}.sheet-dot{width:8px;height:8px;border-radius:50%;border:none;background-color:var(--border);cursor:pointer;padding:0;transition:all .2s ease}.sheet-dot.active{width:24px;border-radius:4px;background-color:var(--brass)}.hint-card{background-color:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-btn);padding:20px;margin-bottom:16px;min-height:180px;display:flex;flex-direction:column}.hint-card-kind-badge{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--brass-text, #785817);background-color:#a8812f1f;border:1px solid rgba(168,129,47,.25);border-radius:var(--radius-chip);padding:2px 10px;width:fit-content;margin-bottom:8px}.hint-card-title{font-family:var(--font-heading);font-size:1.15rem;margin-bottom:12px;color:var(--text-main)}.hint-card-body{font-size:1rem;line-height:1.7;color:var(--text-main)}.hint-card-list{list-style:disc inside;padding:0;margin:0}.hint-card-list-item{font-size:.95rem;line-height:1.6;margin-bottom:8px;color:var(--text-main)}.hint-card-template-box{background-color:var(--bg-card);border:1.5px dashed var(--brass);border-radius:var(--radius-btn);padding:16px;font-size:1rem;line-height:1.8;color:var(--text-main)}.sheet-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px}.swipe-affordance-cue{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.8rem;color:var(--text-muted);margin-top:8px;-webkit-user-select:none;user-select:none}.today-rocks-list{display:flex;flex-direction:column;gap:14px}.today-rock-card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sheet);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--shadow-sm);transition:all .2s ease}.today-rock-card.done{background-color:var(--bg-subtle);opacity:.85}.rock-done-btn{width:44px;height:44px;border-radius:var(--radius-full);border:2px solid var(--border);background-color:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:1.25rem;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);flex-shrink:0}.rock-done-btn:hover{border-color:var(--brass)}.rock-done-btn.done{background-color:var(--brass);border-color:var(--brass);color:#fff;animation:brassConfirmPulse .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes brassConfirmPulse{0%{transform:scale(.85)}50%{transform:scale(1.18)}to{transform:scale(1)}}.streak-tree-card{display:flex;flex-direction:column;align-items:center;padding:24px 20px;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sheet);box-shadow:var(--shadow-sm);text-align:center;width:100%;margin:0 auto 24px}
