@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600&display=swap";*{box-sizing:border-box}body{margin:0;font-family:Montserrat,sans-serif}:root,[data-theme=dark]{--hw-surface-void:#111;--hw-surface-wall:#1a1a1a;--hw-surface-wall-raised:#1f1f20;--hw-border:#2c3e50;--hw-border-faint:#2c3e5073;--hw-ink:#fdfdfd;--hw-silver:silver;--hw-silver-dim:#7d8383}[data-theme=light]{--hw-surface-void:#fdfdfd;--hw-surface-wall:#f8f9f9;--hw-surface-wall-raised:#fff;--hw-border:#e5e8e8;--hw-border-faint:#e5e8e8b3;--hw-ink:#111;--hw-silver:#5b6060;--hw-silver-dim:#9aa0a0}[data-accent=amethyst]{--hw-accent:#9b59b6;--hw-accent-wash:#9b59b624;--hw-accent-wash-strong:#9b59b647;--hw-accent-glow:#9b59b68c;--hw-accent-border:#9b59b659}[data-accent=lumen]{--hw-accent:#e67e22;--hw-accent-wash:#e67e2224;--hw-accent-wash-strong:#e67e2247;--hw-accent-glow:#e67e228c;--hw-accent-border:#e67e2259}[data-accent=bronze]{--hw-accent:#a0815e;--hw-accent-wash:#a0815e24;--hw-accent-wash-strong:#a0815e47;--hw-accent-glow:#a0815e8c;--hw-accent-border:#a0815e59}[data-accent=flow]{--hw-accent:#1abc9c;--hw-accent-wash:#1abc9c24;--hw-accent-wash-strong:#1abc9c47;--hw-accent-glow:#1abc9c8c;--hw-accent-border:#1abc9c59}:root{--hw-font-mono:"JetBrains Mono", ui-monospace, monospace;--hw-font-sans:"Montserrat", sans-serif;--hw-font-serif:"Playfair Display", serif;--hw-space-1:4px;--hw-space-2:8px;--hw-space-3:14px;--hw-space-4:22px;--hw-space-5:34px;--hw-space-6:52px;--hw-radius-sm:8px;--hw-radius-md:14px;--hw-radius-lg:22px}.hw-app{background:var(--hw-surface-void);width:100%;min-height:100vh;color:var(--hw-ink);flex-direction:column;display:flex}.hw-app-header{padding:var(--hw-space-4) var(--hw-space-4) var(--hw-space-3);border-bottom:1px solid var(--hw-border-faint);justify-content:space-between;align-items:center;display:flex}.hw-app-header .hw-wordmark{font-family:var(--hw-font-sans);letter-spacing:.2px;font-size:15px;font-weight:600}.hw-app-header .hw-role-badge{font-family:var(--hw-font-mono);color:var(--hw-silver-dim);border:1px solid var(--hw-border);border-radius:var(--hw-radius-sm);padding:4px 9px;font-size:10px}.hw-app-content{width:100%;max-width:720px;padding:var(--hw-space-5) var(--hw-space-4) var(--hw-space-6);flex:1;margin:0 auto}.hw-page-title{font-family:var(--hw-font-sans);margin-bottom:var(--hw-space-2);font-size:22px;font-weight:600}.hw-page-subtitle{font-family:var(--hw-font-sans);color:var(--hw-silver-dim);margin-bottom:var(--hw-space-5);font-size:13.5px;font-weight:400}.hw-card{background:var(--hw-surface-wall);border:1px solid var(--hw-border-faint);border-radius:var(--hw-radius-md);padding:var(--hw-space-4);margin-bottom:var(--hw-space-3)}.hw-card-title{font-family:var(--hw-font-sans);margin-bottom:4px;font-size:14.5px;font-weight:500}.hw-card-meta{font-family:var(--hw-font-mono);color:var(--hw-silver-dim);font-size:11px}.hw-card-link{margin-top:var(--hw-space-3);font-family:var(--hw-font-sans);color:var(--hw-accent);font-size:12.5px;font-weight:500;text-decoration:none;display:inline-block}.hw-tabbar{border-top:1px solid var(--hw-border-faint);background:var(--hw-surface-wall);padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px));display:flex;position:sticky;bottom:0}.hw-tab{cursor:pointer;color:var(--hw-silver-dim);font-family:var(--hw-font-mono);letter-spacing:.3px;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:6px 0;font-size:9.5px;text-decoration:none;display:flex}.hw-tab.active{color:var(--hw-accent)}.hw-tab .hw-tab-dot{background:0 0;border-radius:50%;width:4px;height:4px}.hw-tab.active .hw-tab-dot{background:var(--hw-accent);box-shadow:0 0 6px var(--hw-accent-glow)}.hw-accent-swatch-row{gap:10px;margin-top:8px;display:flex}.hw-accent-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:34px;height:34px}.hw-accent-swatch.active{border-color:var(--hw-ink)}.hw-form-row{margin-bottom:var(--hw-space-3);flex-direction:column;gap:6px;display:flex}.hw-form-row label{font-family:var(--hw-font-mono);color:var(--hw-silver-dim);letter-spacing:.4px;font-size:10.5px}.hw-form-row input,.hw-form-row select,.hw-form-row textarea{font-family:var(--hw-font-sans);color:var(--hw-ink);background:var(--hw-surface-wall-raised);border:1px solid var(--hw-border);border-radius:var(--hw-radius-sm);padding:9px 11px;font-size:13.5px}.hw-form-row textarea{font-family:var(--hw-font-mono);resize:vertical;min-height:120px;font-size:12px}.hw-form-row-inline{gap:10px;display:flex}.hw-form-row-inline>.hw-form-row{flex:1}.hw-btn-primary{font-family:var(--hw-font-sans);color:#fdfdfd;background:var(--hw-accent);border-radius:var(--hw-radius-sm);cursor:pointer;border:none;padding:10px 16px;font-size:13px;font-weight:500}.hw-btn-quiet{font-family:var(--hw-font-sans);color:var(--hw-accent);border:1px dashed var(--hw-border);border-radius:var(--hw-radius-sm);cursor:pointer;text-align:center;background:0 0;width:100%;padding:10px 14px;font-size:12.5px;font-weight:500}.hw-mini{border:1px solid var(--hw-border);color:var(--hw-silver);font-family:var(--hw-font-mono);cursor:pointer;background:0 0;border-radius:8px;padding:5px 10px;font-size:11px}.hw-chip{font-family:var(--hw-font-mono);color:var(--hw-silver);background:var(--hw-accent-wash);border:1px solid var(--hw-accent-border);border-radius:20px;align-items:center;gap:8px;margin:0 6px 6px 0;padding:5px 10px;font-size:11px;display:inline-flex}.hw-chip button{color:var(--hw-silver-dim);cursor:pointer;background:0 0;border:none;padding:0}.hw-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.hw-tab{justify-content:center;min-height:48px}.hw-wordmark{align-items:center;gap:10px;display:inline-flex}.hw-card,.hw-btn-primary,.hw-btn-quiet,.hw-mini,.hw-tab,.hw-chip,.hw-view-toggle button,.hw-icon-btn,.hw-line,.hw-accent-swatch{transition:background .6s,border-color .6s,color .5s,box-shadow .6s,opacity .5s}.hw-card:hover{border-color:var(--hw-accent-border);box-shadow:0 0 28px var(--hw-accent-wash)}.hw-btn-primary{background:linear-gradient(135deg, var(--hw-accent), color-mix(in srgb, var(--hw-accent) 70%, #fff))}.hw-btn-primary:hover{box-shadow:0 0 20px var(--hw-accent-glow)}.hw-mini:hover,.hw-btn-quiet:hover{border-color:var(--hw-accent-border);color:var(--hw-accent);background:var(--hw-accent-wash)}:focus-visible{outline:2px solid var(--hw-accent);outline-offset:2px}.hw-app-content{animation:.7s both hw-in}@keyframes hw-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.hw-device{background:var(--hw-surface-void);border:1px solid var(--hw-border-faint);width:390px;height:780px;color:var(--hw-ink);border-radius:38px;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 40px 90px #00000073}.hw-topnav{border-bottom:1px solid var(--hw-border-faint);flex-shrink:0;justify-content:space-between;align-items:center;padding:22px 20px 16px;display:flex}.hw-topnav .hw-title{font-family:var(--hw-font-sans);font-size:14.5px;font-weight:600}.hw-topnav .hw-subtitle{font-family:var(--hw-font-mono);color:var(--hw-silver-dim);text-align:center;font-size:10px}.hw-keypill{font-family:var(--hw-font-mono);color:var(--hw-accent);background:var(--hw-accent-wash);border:1px solid var(--hw-accent-border);border-radius:var(--hw-radius-sm);text-align:center;min-width:44px;padding:5px 10px;font-size:12px}.hw-setlist-track{flex-shrink:0;justify-content:center;align-items:center;gap:7px;padding:12px 0 6px;display:flex}.hw-dot{background:var(--hw-border);border-radius:50%;width:5px;height:5px}.hw-dot--done{background:var(--hw-silver-dim)}.hw-dot--active{background:var(--hw-accent);width:6px;height:6px;box-shadow:0 0 0 4px var(--hw-accent-wash)}.hw-stage{flex:1;padding:6px 26px 0;position:relative;overflow:hidden}.hw-stage:before,.hw-stage:after{content:"";z-index:2;pointer-events:none;position:absolute;left:0;right:0}.hw-stage:before{background:linear-gradient(var(--hw-surface-void), transparent);height:36px;top:0}.hw-stage:after{background:linear-gradient(transparent, var(--hw-surface-void));height:60px;bottom:0}.hw-lyric-scroll{height:100%;padding-top:18px;transition:transform .7s cubic-bezier(.4,0,.2,1);overflow:hidden}.hw-section-label{font-family:var(--hw-font-mono);color:var(--hw-silver-dim);letter-spacing:1px;margin:22px 0 10px;font-size:10.5px}.hw-line{border-radius:10px;margin-bottom:26px;padding:8px 14px 8px 16px;transition:background .6s;position:relative}.hw-chord{font-family:var(--hw-font-mono);color:var(--hw-silver-dim);letter-spacing:.3px;font-size:12px;transition:color .5s}.hw-lyric{font-family:var(--hw-font-sans);color:var(--hw-silver);line-height:1.5;transition:color .5s}.hw-line--past .hw-lyric{color:#4a4a4a}.hw-line--past .hw-chord{color:#3a3a3a}.hw-line--current{background:linear-gradient(90deg, var(--hw-accent-wash) 0%, #0000 70%);border-left:2px solid var(--hw-accent)}.hw-line--current .hw-lyric{color:var(--hw-ink)}.hw-line--current .hw-chord{color:var(--hw-accent)}.hw-halo-mark{border:1.5px solid var(--hw-accent);width:16px;height:16px;box-shadow:0 0 10px var(--hw-accent-glow);border-radius:50%;position:absolute;top:50%;left:-2px;transform:translate(-50%,-50%)}.hw-dock{border-top:1px solid var(--hw-border-faint);background:var(--hw-surface-wall);flex-shrink:0;padding:14px 22px 26px}.hw-view-toggle{justify-content:center;gap:6px;margin-bottom:16px;display:flex}.hw-view-toggle button{font-family:var(--hw-font-sans);color:var(--hw-silver-dim);border:1px solid var(--hw-border);cursor:pointer;background:0 0;border-radius:20px;padding:6px 14px;font-size:11.5px;font-weight:500}.hw-view-toggle button.active{color:var(--hw-accent);border-color:var(--hw-accent-border);background:var(--hw-accent-wash)}.hw-transport{justify-content:space-between;align-items:center;gap:14px;display:flex}.hw-transport .hw-side{color:var(--hw-silver-dim);font-family:var(--hw-font-mono);letter-spacing:.5px;flex-direction:column;align-items:center;gap:4px;font-size:9.5px;display:flex}.hw-icon-btn{border:1px solid var(--hw-border);width:38px;height:38px;color:var(--hw-silver);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;display:flex}.hw-icon-btn--accent{border-color:var(--hw-accent-border);background:var(--hw-accent-wash);color:var(--hw-accent)}.hw-prevnext{align-items:center;gap:22px;display:flex}.hw-play-main{background:var(--hw-accent);width:58px;height:58px;box-shadow:0 0 22px var(--hw-accent-wash-strong);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.hw-perform{z-index:100;background:var(--hw-surface-void);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.hw-device{width:100%;max-width:480px;height:100%;box-shadow:none;padding-top:env(safe-area-inset-top,0px);border:none;border-radius:0}@media (width>=700px){.hw-device{border:1px solid var(--hw-border-faint);border-radius:32px;height:min(100%,860px)}}.hw-stage{min-height:0}.hw-lyric-scroll{scrollbar-width:none;padding-bottom:40vh;transition:none;overflow-y:auto}.hw-lyric-scroll::-webkit-scrollbar{display:none}.hw-line{cursor:pointer}.hw-chords-flow{flex-wrap:wrap;gap:18px;display:flex}.hw-dock{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}.hw-tools{justify-content:space-between;gap:6px;margin-bottom:12px;display:flex}.hw-step{border:1px solid var(--hw-border);font-family:var(--hw-font-mono);color:var(--hw-silver);border-radius:20px;align-items:center;font-size:10.5px;display:flex}.hw-step button{color:var(--hw-silver);cursor:pointer;background:0 0;border:none;width:32px;height:34px;font-size:15px}.hw-step span{text-align:center;min-width:40px}.hw-icon-btn:disabled{opacity:.3;cursor:default}