:root{--space-zero: 0px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--text-xs: .75rem;--text-sm: .875rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--background: hsl(36, 33%, 97%);--surface: hsl(36, 25%, 94%);--text-primary: hsl(24, 15%, 15%);--text-secondary: hsl(24, 10%, 45%);--border: hsl(24, 10%, 85%);--gold-accent: hsl(38, 75%, 50%);--gold-accent-hover: hsl(38, 80%, 45%);--mask-bg: rgba(36, 25%, 94%, .75);--font-family-display: "Outfit", sans-serif;--font-family-body: "Inter", sans-serif}[data-theme=dark]{--background: hsl(240, 10%, 8%);--surface: hsl(240, 8%, 14%);--text-primary: hsl(0, 0%, 93%);--text-secondary: hsl(240, 4%, 65%);--border: hsl(240, 6%, 20%);--gold-accent: hsl(38, 70%, 55%);--gold-accent-hover: hsl(38, 75%, 50%);--mask-bg: rgba(8, 8, 10, .75)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;background-color:var(--background);color:var(--text-primary);font-family:var(--font-family-body);overflow:hidden;transition:background-color .3s ease,color .3s ease}h1,h2,h3{font-family:var(--font-family-display);font-weight:600;letter-spacing:-.02em}button{font-family:var(--font-family-body);background:none;border:none;cursor:pointer;color:inherit;transition:all .2s ease}.app-container{display:flex;flex-direction:column;height:100%;max-width:600px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border);position:relative;background-color:var(--background)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border);background-color:var(--background);z-index:10}.logo{font-family:var(--font-family-display);font-size:var(--text-lg);font-weight:700;color:var(--gold-accent)}.header-controls{display:flex;gap:var(--space-sm);align-items:center}.icon-btn{padding:var(--space-xs) var(--space-sm);border-radius:var(--space-sm);font-size:var(--text-sm);font-weight:500;display:flex;align-items:center;gap:var(--space-xs);border:1px solid var(--border)}.icon-btn:hover{background-color:var(--surface)}.app-workspace{display:flex;flex:1;overflow:hidden;position:relative}.bead-column{width:20%;min-width:80px;max-width:120px;background-color:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-xs);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;position:relative;overflow:hidden}.bead-column.collapsed{width:0px;min-width:0px;padding:0;border-right:none;opacity:0;pointer-events:none}.bead-glow{position:absolute;top:0;left:0;right:0;height:20px;background:radial-gradient(ellipse at top,var(--gold-accent) 0%,transparent 75%);opacity:0;pointer-events:none;z-index:5;animation:glow-pulse .5s ease-out}@keyframes glow-pulse{0%{opacity:.9;transform:scaleY(1.5);filter:blur(2px)}to{opacity:0;transform:scaleY(1);filter:blur(0px)}}.bead-display{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.bead-visual{transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.bead-helper-label{font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-sm);text-align:center}.collapse-trigger{width:32px;height:32px;border-radius:50%;background-color:var(--surface);border:1px solid var(--border);display:flex;justify-content:center;align-items:center;color:var(--text-secondary);font-size:var(--text-md);margin-top:auto}.expand-floating-trigger{position:absolute;left:var(--space-sm);bottom:var(--space-md);width:36px;height:36px;border-radius:50%;background-color:var(--surface);border:1px solid var(--border);display:flex;justify-content:center;align-items:center;color:var(--gold-accent);box-shadow:0 4px 12px #0000001a;z-index:12}.reading-pane{flex:1;display:flex;flex-direction:column;padding:var(--space-lg);overflow-y:auto;background-color:var(--background);transition:width .3s ease}.reading-header{margin-bottom:var(--space-md)}.reading-mystery-type{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--gold-accent);font-weight:600;margin-bottom:var(--space-xs)}.reading-mystery-title{font-size:var(--text-xl);line-height:1.3;margin-bottom:var(--space-sm);cursor:pointer}.reading-mystery-title:hover{text-decoration:underline;text-decoration-color:var(--gold-accent)}.progress-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;margin:var(--space-sm) 0 var(--space-lg) 0;padding:var(--space-sm);background-color:var(--surface);border-radius:var(--space-sm)}.progress-cell{aspect-ratio:1;border-radius:2px;background-color:var(--border);transition:background-color .2s ease,transform .2s ease}.progress-cell.completed{background-color:var(--gold-accent)}.progress-cell.active{background-color:var(--background);border:2px solid var(--gold-accent);transform:scale(1.15)}.progress-cell.decade-start{border-radius:50%}.progress-cell.decade-start.completed{background-color:#d92644}.progress-cell.decade-start.active{background-color:var(--background);border:2px solid hsl(350,70%,50%);transform:scale(1.2)}.script-body{flex:1;line-height:1.6;font-size:var(--text-lg);color:var(--text-primary);display:flex;flex-direction:column;justify-content:flex-start;transition:font-size .2s ease}.script-title{font-family:var(--font-family-display);font-size:var(--text-md);color:var(--gold-accent);margin-bottom:var(--space-sm)}.script-text{font-size:inherit;white-space:pre-wrap}.completion-view{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:var(--space-2xl);text-align:center;animation:fadeIn .6s ease}.completion-icon{width:80px;height:80px;color:var(--gold-accent);margin-bottom:var(--space-lg)}.completion-title{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}.completion-subtitle{font-size:var(--text-md);color:var(--text-secondary);margin-bottom:var(--space-2xl)}.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--mask-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:100;padding:var(--space-lg);animation:fadeIn .2s ease}.modal-window{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--space-lg);width:100%;max-width:400px;padding:var(--space-lg);box-shadow:0 10px 25px #00000026;animation:scaleUp .3s cubic-bezier(.175,.885,.32,1.275)}.modal-title{font-size:var(--text-lg);margin-bottom:var(--space-md);border-bottom:1px solid var(--border);padding-bottom:var(--space-sm);color:var(--gold-accent)}.primary-btn{background-color:var(--gold-accent);color:#fff;font-weight:600;padding:var(--space-md) var(--space-lg);border-radius:var(--space-sm);width:100%;text-align:center}.primary-btn:hover{background-color:var(--gold-accent-hover)}.secondary-btn{border:1px solid var(--border);color:var(--text-primary);font-weight:500;padding:var(--space-sm) var(--space-md);border-radius:var(--space-sm);width:100%;text-align:center}.secondary-btn:hover{background-color:var(--background)}.list-item{width:100%;text-align:left;padding:var(--space-md);border-radius:var(--space-sm);margin-bottom:var(--space-xs);border:1px solid transparent;display:flex;justify-content:space-between;align-items:center}.list-item:hover{background-color:var(--background)}.list-item.selected{background-color:var(--background);border-color:var(--gold-accent);color:var(--gold-accent)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.settings-drawer{position:absolute;top:0;right:0;bottom:0;width:260px;background-color:var(--surface);border-left:1px solid var(--border);z-index:105;display:flex;flex-direction:column;padding:var(--space-lg);box-shadow:-4px 0 15px #0000001a;transform:translate(0);transition:transform .3s ease}.settings-drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl)}.drawer-section{margin-bottom:var(--space-lg)}.drawer-section-title{font-size:var(--text-xs);text-transform:uppercase;color:var(--text-secondary);font-weight:600;margin-bottom:var(--space-sm)}.theme-switch{display:flex;background-color:var(--background);border-radius:var(--space-sm);padding:2px;border:1px solid var(--border)}.theme-switch-btn{flex:1;padding:var(--space-sm);font-size:var(--text-xs);font-weight:600;border-radius:calc(var(--space-sm) - 2px);text-align:center}.theme-switch-btn.active{background-color:var(--surface);color:var(--gold-accent);box-shadow:0 2px 4px #0000000d}.about-scroll-container{max-height:180px;overflow-y:auto;font-size:var(--text-sm);line-height:1.5;color:var(--text-secondary)}.about-scroll-container p{margin-bottom:var(--space-sm)}.swipe-up-indicator{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--space-sm);opacity:.85;animation:bounceUp 2s infinite ease-in-out;pointer-events:none;-webkit-user-select:none;user-select:none}.swipe-arrow{font-size:var(--text-md);color:var(--gold-accent)}.swipe-text{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-top:2px;font-weight:600}@keyframes bounceUp{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}.mystery-image{width:100%;max-height:260px;object-fit:contain;background-color:var(--background-secondary);border-radius:var(--space-sm);border:1px solid var(--border);margin-top:var(--space-sm);margin-bottom:var(--space-md);box-shadow:0 4px 12px #0000000d}.install-banner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);background-color:var(--background-secondary);border-bottom:1px solid var(--border);padding:var(--space-sm) var(--space-md);font-family:var(--font-family-body);animation:slideDown .3s ease-out}.install-banner-content{display:flex;align-items:center;gap:var(--space-sm);text-align:left}.install-banner-icon{font-size:var(--text-xl)}.install-banner-title{font-weight:600;font-size:var(--text-sm);color:var(--text-primary)}.install-banner-desc{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.3}.install-banner-actions{display:flex;align-items:center;gap:var(--space-sm)}.btn-sm{padding:6px 12px;font-size:var(--text-xs);border-radius:4px}.close-btn{background:none;border:none;font-size:var(--text-md);color:var(--text-secondary);cursor:pointer;padding:4px 8px;transition:color .2s}.close-btn:hover{color:var(--text-primary)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 600px){.install-banner{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.install-banner-actions{width:100%;justify-content:flex-end}}.manual-view{display:flex;flex-direction:column;height:100%;animation:fadeIn .4s ease}.manual-mysteries-list{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-md)}.manual-mystery-item{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--space-sm);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs);transition:transform .2s ease,border-color .2s ease}.manual-mystery-item:hover{transform:translateY(-2px);border-color:var(--gold-accent)}.manual-mystery-number{font-family:var(--font-family-display);font-size:var(--text-xs);text-transform:uppercase;color:var(--gold-accent);font-weight:600}.manual-mystery-name{font-family:var(--font-family-body);font-size:var(--text-md);color:var(--text-primary);font-weight:500}.walkthrough-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#0f0a05a6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:150;animation:fadeIn .3s ease}.walkthrough-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;z-index:170;pointer-events:none;padding:var(--space-lg);transition:all .3s ease;animation:fadeIn .3s ease}.walkthrough-overlay.align-center{justify-content:center;align-items:center}.walkthrough-overlay.align-right{justify-content:flex-end;align-items:center}.walkthrough-overlay.align-left{justify-content:flex-start;align-items:center}.walkthrough-overlay.align-bottom{justify-content:center;align-items:flex-end;padding-bottom:var(--space-3xl)}.walkthrough-highlight{position:relative!important;z-index:160!important;box-shadow:0 0 0 3px var(--gold-accent),0 8px 30px #0000004d!important;border-color:var(--gold-accent)!important;background-color:var(--surface)!important;transition:all .3s ease!important}.walkthrough-card{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--space-lg);width:100%;max-width:380px;padding:var(--space-lg);box-shadow:0 15px 35px #0000004d;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;pointer-events:all;animation:scaleUp .3s cubic-bezier(.175,.885,.32,1.275)}.walkthrough-indicator-dots{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg)}.walkthrough-dot{width:8px;height:8px;border-radius:50%;background-color:var(--border);transition:background-color .2s ease,transform .2s ease}.walkthrough-dot.active{background-color:var(--gold-accent);transform:scale(1.25)}.walkthrough-title{font-size:var(--text-xl);color:var(--gold-accent);margin-bottom:var(--space-md);font-family:var(--font-family-display)}.walkthrough-description{font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary);margin-bottom:var(--space-xl);height:80px;display:flex;align-items:center;justify-content:center}.walkthrough-actions{display:flex;width:100%;gap:var(--space-sm)}.rating-stars{display:flex;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.rating-star-btn{font-size:2.2rem;color:var(--border);transition:transform .15s ease,color .15s ease;-webkit-user-select:none;user-select:none}.rating-star-btn:hover{transform:scale(1.15)}.rating-star-btn.active{color:var(--gold-accent)}.feedback-textarea{width:100%;height:110px;padding:var(--space-sm) var(--space-md);border-radius:var(--space-sm);border:1px solid var(--border);background-color:var(--background);color:var(--text-primary);font-family:var(--font-family-body);font-size:var(--text-sm);line-height:1.5;resize:none;outline:none;transition:border-color .2s ease;margin-bottom:var(--space-md)}.feedback-textarea:focus{border-color:var(--gold-accent)}.feedback-status-message{font-size:var(--text-sm);margin-bottom:var(--space-md);text-align:center;line-height:1.4}.feedback-status-message.success{color:#2e7d32}[data-theme=dark] .feedback-status-message.success{color:#81c784}.feedback-status-message.error{color:#d92644}