:root{--primary: #c34f2b;--bg: #fdf6ea;--ink: #2b2540;--muted: #757183;--border: #e4ddd6;--teal: #5ea3a3;--teal-bg: #ecf4f4;--teal-text: #4c7780;--gold: #866f45;--surface: #ffffff;--success: var(--teal);--danger: #c53030;font-family:Segoe UI,Roboto,system-ui,sans-serif}*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;background:var(--bg);color:var(--ink)}.screen{min-height:100vh;padding:24px;max-width:720px;margin:0 auto}.screen.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}.big-button{font-size:1.2rem;padding:14px 28px;border:none;border-radius:999px;background:var(--primary);color:#fff;cursor:pointer;min-height:52px}.big-button:disabled{opacity:.6;cursor:default}.big-button.busy{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left}.big-button.busy span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.spinner{width:16px;height:16px;flex-shrink:0;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.text-button{background:none;border:none;color:var(--primary);font-size:1rem;cursor:pointer}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.brand{display:flex;align-items:center;gap:10px}.brand-logo{width:36px;height:36px}.brand-link{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}.brand-link:hover .brand-logo{opacity:.85}.brand h1{margin:0}.search-form{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:24px}.search-bar{position:relative;width:50%}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}.search-bar input{width:100%;height:42px;font-size:.95rem;padding:0 40px 0 44px;border:none;border-radius:999px;background:var(--border);color:var(--ink)}.search-bar input[type=search]::-webkit-search-cancel-button{display:none}.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:none;color:var(--muted);cursor:pointer}.search-clear svg{width:16px;height:16px}.search-clear:hover{background:#0000000f}#search-input:placeholder-shown+.search-clear{display:none}.search-bar input::placeholder{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sort-field{display:flex;align-items:center;gap:4px;flex-shrink:0}.sort-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;background:none;font-size:.95rem;font-family:inherit;padding:0;color:var(--primary);cursor:pointer}.sort-updown-icon{width:16px;height:16px;color:var(--primary);pointer-events:none;flex-shrink:0}@supports (appearance: base-select){.sort-field select{-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select}.sort-field select::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select;border:1px solid var(--border);border-radius:12px;padding:6px;margin-top:6px;background:#fff;box-shadow:0 8px 24px #0000001f}.sort-field select::picker-icon{display:none}.sort-field option{padding:10px 14px;border-radius:8px;color:var(--ink)}.sort-field option:hover{background:var(--teal-bg)}.sort-field option:checked{background:var(--primary);color:#fff}}.tag-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}.tag-filter-option{cursor:pointer}.tag.tag-filter-option{background:#fff;border:1px solid var(--teal);color:var(--teal-text)}.tag.tag-filter-option:hover{background:var(--teal-bg)}.tag.tag-active{background:var(--primary);border:1px solid var(--primary);color:#fff;cursor:pointer}.result-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.result-row{width:100%;text-align:left;padding:16px 18px;border:1px solid transparent;border-radius:14px;background:#fff;box-shadow:0 1px 4px #0000000f;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease}.result-row:hover{box-shadow:0 6px 16px #0000001a;border-color:var(--border);transform:translateY(-1px)}.result-row strong{font-size:1.05rem;line-height:1.3}.result-row span{color:var(--muted);font-size:.9rem}.result-row .highlight-star{color:var(--primary)}.result-meta,.book-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:2px 0 0}.book-meta span,.result-meta .downloads{color:var(--muted);font-size:.85rem}.review-details .book-meta{flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px}.result-meta .rating,.book-meta .rating{color:var(--gold);font-weight:600}.imported-badge{display:inline-block;background:var(--teal-bg);color:var(--teal-text);font-size:.8rem;font-weight:600;padding:2px 10px;border-radius:999px}.result-meta .imported-badge{background:none;color:var(--teal-text);font-weight:600;padding:0;border-radius:0}p.imported-badge{margin:6px 0 0}.tag-list{display:flex;flex-wrap:wrap;gap:6px}.parts-modal{border:none;border-radius:16px;padding:0;max-width:480px;width:calc(100% - 48px);max-height:min(600px,calc(100% - 48px));box-shadow:0 12px 32px #0000002e}.parts-modal::backdrop{background:#2b254073}.parts-modal-content{padding:20px;overflow-y:auto;max-height:min(600px,calc(100vh - 48px));overscroll-behavior:contain}.parts-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.parts-modal-header h3{margin:0;font-size:1.1rem}.parts-modal-header .text-button{font-size:1.1rem;line-height:1;flex-shrink:0}.reviews-modal-content{display:flex;flex-direction:column;overflow:hidden}.reviews-modal-body{overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain}.reviews-modal-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px}.reviews-modal-header h3{margin:0;font-size:1.1rem;flex-shrink:0}.reviews-modal-header .sort-field{flex-shrink:1;min-width:0}.reviews-modal-header .text-button{font-size:1.1rem;line-height:1;flex-shrink:0}.tag{background:var(--teal-bg);color:var(--teal-text);font-size:.75rem;padding:2px 10px;border-radius:999px}.review-header{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.review-header-row{display:flex;gap:16px;align-items:flex-start}.cover-preview{width:120px;height:120px;flex-shrink:0;object-fit:cover;border-radius:12px;background:var(--border)}.review-details{min-width:0;flex:1}.title-label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}.review-header input{font-size:1.2rem;padding:8px 10px;border:1px solid var(--border);border-radius:8px;color:var(--ink)}.author{color:var(--muted);margin:8px 0 0}.track-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:8px}.starter-feature{margin:0 0 16px}.starter-card{border:2px solid var(--primary);background:var(--teal-bg, #edf4f1)}.starter-card .starter-eyebrow{font-size:.8rem;font-weight:700;color:var(--primary)}.starter-card .starter-action{font-size:.9rem;font-weight:700;color:var(--primary);margin-top:8px}.upgrade-steps,.collection-credits{font-size:.85rem;color:var(--muted)}.collection-credits{overflow-wrap:anywhere}.track-content{flex:1;min-width:0}.track-content .track-title-input{width:100%;box-sizing:border-box}.sample-label{margin:0 8px 8px;text-align:right;font-size:.8rem;color:var(--muted)}.sample-play{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:2px solid var(--primary);border-radius:50%;background:transparent;color:var(--primary);cursor:pointer;transition:background .15s,color .15s}.sample-play:hover,.sample-play[aria-pressed=true]{background:var(--primary);color:#fff}.sample-play:focus-visible{outline:3px solid var(--primary);outline-offset:3px}.sample-play svg{width:24px;height:24px;fill:currentColor}.sample-pause-icon,.sample-play[aria-pressed=true] .sample-play-icon{display:none}.sample-play[aria-pressed=true] .sample-pause-icon{display:block}.preview-error{color:var(--danger);font-size:.85rem;margin:4px 6px}.review-upgrade .upgrade-steps{margin:8px 0}.review-upgrade .redeem-form{margin-top:8px}.upgrade-terms{font-size:.9rem}.track-list li{display:flex;align-items:center;gap:12px;padding:8px;background:#fff;border-radius:10px;box-shadow:0 1px 4px #0000000f}.track-icon{width:32px;height:32px;border-radius:6px;background:var(--border);flex-shrink:0}.track-icon-placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted)}.track-icon-placeholder svg{width:18px;height:18px}.track-title-input{flex:1;border:none;font-size:1rem;padding:6px}.track-title-input:focus{outline:1px solid var(--primary);border-radius:4px}.reviews-inline-trigger{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--primary);text-decoration:underline;cursor:pointer}.review-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.review-item{background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 1px 4px #0000000f}.review-item-header{display:flex;align-items:center;gap:8px;margin:0}.review-title{font-weight:600;font-size:.85rem}.review-body{font-size:.85rem;margin:6px 0 0;white-space:pre-line}.review-meta{color:var(--muted);font-size:.78rem;margin:6px 0 0}.content-note{background:var(--teal-bg);color:var(--teal-text);font-size:.85rem;padding:10px 14px;border-radius:10px;margin:8px 0 0}.publish-bar{position:sticky;bottom:0;background:var(--bg);padding:12px 0 20px;border-top:1px solid var(--border);box-shadow:0 -2px 8px #0000000f}.publish-bar .big-button{width:100%}.publish-hint{color:var(--muted);font-size:.8rem;margin:8px 0 0;text-align:center}#publish-status{margin-top:12px;font-size:.95rem;color:var(--muted)}#publish-status.import-success{display:flex;align-items:center;gap:8px;color:var(--primary);font-weight:700;font-size:1.05rem;animation:import-success-pop .4s ease}#publish-status.import-success:before{content:"✓";display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem}@keyframes import-success-pop{0%{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.usage-status{color:var(--muted);font-size:.9rem;text-align:center;margin:0}.publish-bar #usage-retry-btn{display:block;margin:8px auto 0}.loading,.empty,.error{text-align:center;font-size:1.1rem;padding:40px}.error{color:#c53030}.install-hint{color:var(--muted);font-size:.85rem;max-width:320px}.install-tip{color:var(--muted);font-size:.85rem;margin:16px 0 4px}.credit-link{color:var(--muted);font-size:.8rem;text-decoration:none;margin-top:24px}.credit-link:hover{text-decoration:underline}body.tab-bar-visible .screen{padding-bottom:calc(88px + env(safe-area-inset-bottom))}.coming-soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:60px 20px;color:var(--muted)}.coming-soon svg{width:40px;height:40px;color:var(--border)}.coming-soon h2{color:var(--ink);margin:0}.about-content h2{color:var(--ink);font-size:1.3rem;margin:4px 0 14px}.about-content h3{color:var(--ink);font-size:1rem;margin:0 0 12px}.about-intro{color:var(--ink);margin:0 0 20px}.about-card{background:#fff;border-radius:12px;padding:18px 20px;margin:0 0 16px;box-shadow:0 1px 4px #0000000f}.about-update{border-left:4px solid var(--teal)}.about-update p{color:var(--ink);margin:0 0 10px}.about-update p:last-child{margin-bottom:0}.about-update .about-update-date{color:var(--teal-text);font-size:.85em;font-weight:600;margin:0 0 4px}.about-steps{color:var(--ink);font-size:.9rem;margin:0;padding:0;list-style:none;counter-reset:step}.about-steps li{counter-increment:step;position:relative;padding-left:36px;margin-bottom:8px}.about-steps li:last-child{margin-bottom:0}.about-steps li:before{content:counter(step);position:absolute;left:0;top:-1px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700}.about-usage-note{color:var(--muted);margin:0}.usage-numbers{color:var(--ink);margin:0 0 10px}.usage-numbers strong{color:var(--ink)}.usage-near-limit .usage-numbers strong{color:var(--primary)}.usage-remaining{color:var(--muted);font-size:.85rem}.usage-bar{height:8px;background:var(--border);border-radius:999px;overflow:hidden}.usage-bar-fill{height:100%;background:var(--ink);border-radius:999px;transition:width .4s ease,background-color .3s ease}.usage-near-limit .usage-bar-fill{background:var(--primary)}.usage-confirmed{display:flex;align-items:center;gap:8px;margin:0;color:var(--primary);font-weight:700}.usage-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem}.about-supporter{background:var(--teal-bg)}.family-app-promo{display:flex;gap:12px;align-items:flex-start}.family-app-promo:not(:last-child){margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)}.family-app-icon{width:40px;height:40px;border-radius:8px;flex-shrink:0}.family-app-copy h4{margin:0 0 4px;font-size:1rem}.family-app-copy p{margin:0 0 8px;color:var(--ink);font-size:.9rem}.family-app-link{color:var(--primary);font-weight:600;text-decoration:none}.about-supporter h3{color:var(--teal-text)}.about-supporter p{color:var(--teal-text);margin:0 0 12px}.supporter-buy-btn{display:block;width:100%;text-align:center;text-decoration:none;margin:0 0 16px}.redeem-label{display:block;font-size:.85rem;color:var(--teal-text);margin-bottom:6px}.redeem-row{display:flex;gap:8px}.redeem-row input{flex:1;min-width:0;font-size:1rem;padding:8px 10px;border:1px solid var(--border);border-radius:8px;color:var(--ink);text-transform:uppercase}.redeem-row button{flex-shrink:0;padding:0 4px}.redeem-error{color:#c53030;font-size:.85rem;margin:8px 0 0}.redeem-error:empty{display:none}.about-footer{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:8px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:16px}.stat-tile{background:#fff;border-radius:12px;padding:16px;text-align:center;box-shadow:0 1px 4px #0000000f}.stat-tile strong{display:block;font-size:1.6rem;color:var(--primary)}.stat-tile span{color:var(--muted);font-size:.8rem}.trend-card{background:#fff;border-radius:12px;padding:16px 20px;margin-top:16px;box-shadow:0 1px 4px #0000000f}.trend-card h3{margin:0 0 8px;font-size:.9rem;color:var(--ink)}.trend-chart{display:block;width:100%;height:auto}.trend-gridline{stroke:var(--border);stroke-width:1}.trend-axis-label{fill:var(--muted);font-size:8px}.trend-area{fill:var(--primary);fill-opacity:.1;stroke:none}.trend-line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.trend-hit{fill:transparent}.trend-hit:hover{fill:var(--primary);fill-opacity:.15}.trend-end-ring{fill:var(--surface)}.trend-end-dot{fill:var(--primary)}.trend-end-label{fill:var(--ink);font-size:10px;font-weight:700}.connection-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px #0000000f}.connection-card-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.connection-icon{width:22px;height:20px;flex-shrink:0}.connection-card-header h2{margin:0;font-size:1.05rem}.connection-status-text{margin:0 0 14px;color:var(--muted);font-size:.9rem}.connection-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 0;color:var(--muted);font-size:.9rem}.connection-connect-btn{display:inline-flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:10px 18px;font-size:.95rem;font-weight:600;cursor:pointer;box-shadow:0 1px 2px #00000014;transition:box-shadow .15s ease,border-color .15s ease}.connection-connect-btn:hover:not(:disabled){border-color:var(--primary);box-shadow:0 2px 8px #0000001f}.connection-connect-btn:disabled{opacity:.6;cursor:default}.connection-icon-small{width:18px;height:16px;flex-shrink:0}.connection-row{display:flex;align-items:flex-start;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px}.connection-status-dot{width:8px;height:8px;flex-shrink:0;margin-top:7px;border-radius:50%;background:var(--success)}.connection-row-icon{width:20px;height:20px;flex-shrink:0;color:var(--primary)}.connection-name{flex:1;min-width:0;font-weight:600;overflow-wrap:break-word}.connection-disconnect-btn{margin-left:auto;flex-shrink:0;background:none;border:none;color:var(--muted);font-size:.85rem;padding:4px 8px;border-radius:6px;cursor:pointer}.connection-disconnect-btn:disabled{opacity:.5;cursor:default}.connection-disconnect-btn:hover{color:var(--danger);background:#c5303014}.connection-error{color:var(--danger);margin:12px 0 0}.connection-error:empty{display:none}.connection-loading-spinner{display:inline-block;width:16px;height:16px;flex-shrink:0;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:mfu-spin .7s linear infinite}@keyframes mfu-spin{to{transform:rotate(360deg)}}#tab-bar{display:none;justify-content:center;width:100%;position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--bg);border-top:1px solid var(--border);box-shadow:0 -2px 8px #0000000f;padding:8px 0 calc(10px + env(safe-area-inset-bottom))}.tab-bar-inner{display:flex;width:100%;max-width:720px}.tab-button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;padding:6px 4px;color:var(--muted);cursor:pointer;font:inherit}.tab-button svg{width:22px;height:22px}.tab-button span{font-size:.72rem}.tab-button.active{color:var(--primary)}.loading-state{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 0;color:var(--muted);font-size:.95rem}
