:root{--bg-0:#0b1220;--bg-1:#0d172a;--bg-2:#0f1b31;--card:#0b121dcc;--stroke:#243142;--text:#eaf2ff;--muted:#9fb2cc;--accent:#4ea1ff;--mint:#57f9c8;--danger:#ff6b6b}#login-view,#login-view *{box-sizing:border-box}#login-view{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:32px;background:radial-gradient(1200px 800px at 0% 0%,#17233d 0%,transparent 60%),radial-gradient(900px 700px at 100% 100%,#111c2f 0%,transparent 55%),linear-gradient(180deg,var(--bg-0),var(--bg-1) 30%,var(--bg-2) 100%);color:var(--text)}#login-view[hidden]{display:none!important}.login-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:22px 22px 18px;box-shadow:0 20px 60px #00000073;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.login-card header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.login-logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#142036;border:1px solid var(--stroke);font-weight:700;color:var(--mint)}.login-title{font-size:18px;font-weight:700;letter-spacing:.3px}.login-sub{font-size:12px;color:var(--muted);margin-top:2px}#email-form{display:grid;gap:10px;margin-top:6px}.form-row{display:grid;gap:6px}.form-row label{font-size:12px;color:var(--muted)}.input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #2b3a52;background:#0f1520;color:var(--text);outline:none;font-size:16px}.input::placeholder{color:#7f90ab}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4ea1ff26}.btn{all:unset;display:inline-flex;justify-content:center;align-items:center;gap:8px;cursor:pointer;padding:10px 12px;border-radius:10px;border:1px solid #2b3a52;background:#162134;color:var(--text);font-weight:600}.btn:hover{background:#1a2740}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn[disabled]{opacity:.55;cursor:default}.btn-primary{width:100%;background:linear-gradient(180deg,#233251,#1a2740);border-color:#314563}.btn-primary:hover{background:linear-gradient(180deg,#2a3b5e,#213152)}.login-sep{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:10px 0 8px}.login-sep:before,.login-sep:after{content:"";height:1px;background:#243142}#google-btn{position:relative;display:flex;justify-content:center;align-items:center;width:100%;max-width:280px;margin:0 auto;background:#fff;color:#111827;border-color:#e5e7eb}#google-btn:hover{background:#f7f7f7}#google-btn:before{content:"";width:18px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M24 9.5c3.54 0 6.72 1.22 9.22 3.6l6.9-6.9C35.9 2.05 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.2C12.39 13.58 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%2334A853' d='M46.5 24.5c0-1.55-.15-3.05-.43-4.5H24v9.02h12.7c-.55 2.98-2.23 5.5-4.75 7.2l7.3 5.67C43.98 37.86 46.5 31.64 46.5 24.5z'/%3E%3Cpath fill='%23FBBC05' d='M10.54 28.42A14.49 14.49 0 019.5 24c0-1.54.26-3.02.74-4.42l-7.98-6.2A23.93 23.93 0 000 24c0 3.88.93 7.55 2.56 10.78l7.98-6.36z'/%3E%3Cpath fill='%23EA4335' d='M24 48c6.48 0 11.94-2.13 15.92-5.8l-7.3-5.67c-2.03 1.37-4.65 2.17-8.62 2.17-6.26 0-11.61-4.08-13.46-9.7l-7.98 6.36C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");margin-right:6px}#login-error{min-height:18px;color:var(--danger);font-size:12px;margin-top:8px;white-space:pre-wrap}.login-foot{margin-top:10px;color:var(--muted);font-size:11px;text-align:center}html.is-logged-in #login-view{display:none!important}@media (max-width: 480px){#login-view{padding:16px}.login-card{padding:18px 16px;border-radius:14px}#google-btn{max-width:100%}}html,body,#app{height:100%;margin:0;background:#181818;color:#eaf2ff;font-family:sans-serif}#stage{position:relative!important;inset:auto!important;width:100%;height:100%;background:#181818!important;overflow:hidden}#composer-panel{flex:0 0 auto;height:100%;background:#000;color:#fff;box-sizing:border-box;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1001}#composer-list{flex:1 1 0;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden}.gutter{background:#444;cursor:col-resize;z-index:1001}.chord-item{display:flex;align-items:flex-start;background:#000;border:0px solid #ccc;border-radius:0;-webkit-user-select:none;user-select:none;min-width:100px;border-bottom:#494949 1px solid}.drag-handle{width:26px;flex:0 0 26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:grab;font-size:18px;margin-right:8px;color:#ccc}.chord-header{display:flex;justify-content:space-between;align-items:center;font-size:large;color:#f7f7f7}.chord-label em{font-style:italic;color:#b4b4b4;font-size:small}.item-buttons{display:flex;gap:0px}.item-buttons button{all:unset;cursor:pointer;font-size:20px;line-height:1;padding:4px;border-radius:6px;color:#cfcfcf;transition:background .15s,color .15s}.item-buttons button:hover{background:#2c2c2c;color:#fff}.item-buttons button:active{transform:scale(.92)}.content{flex:1 1 0;min-width:0;background-color:#333}.instrument-section{position:relative;margin-top:0;padding-top:0;background-color:#1e1e1e}.instrument-toggle{position:absolute;top:4px;right:4px;border:none;background:transparent;cursor:pointer;font-size:20px;line-height:1}.instrument-content{width:100%;overflow:hidden;max-height:0;transition:max-height .35s ease}.instrument-content.no-transition{transition:none!important}.mini-piano{width:100%;height:120px;display:flex;align-items:flex-start}.inline-piano canvas{width:100%!important;height:auto!important}.chord-label{display:inline-block;white-space:nowrap}.mini-piano-container{min-height:48px;width:100%}#synth-controls{position:absolute;bottom:52px;left:40px;display:flex;gap:8px;z-index:5;pointer-events:none}.syc-wrap{position:relative;display:flex;gap:8px;align-items:flex-end;pointer-events:none}.syc-btn{position:relative;pointer-events:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:2px solid #7df9ff;color:#7df9ff;border-radius:6px;cursor:pointer;transition:box-shadow .2s,border-color .2s,color .2s,opacity .2s}.syc-btn:hover{box-shadow:0 0 8px currentColor}.syc-btn.active{border-color:#ffb3ff;color:#ffb3ff}.syc-btn:disabled{opacity:.55;cursor:default}.syc-panel{position:absolute;left:44px;bottom:0;width:300px;max-width:calc(100vw - 48px);background:#0e1320;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 6px 28px #00000073;padding:10px;color:#eaf2ff;opacity:0;transform:translateY(6px) scale(.98);pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:10}.syc-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.syc-panel h4{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;font-size:13px;color:#9feaff;font-weight:600}.syc-chip{font-size:11px;padding:2px 6px;border-radius:999px;background:#152033;border:1px solid #283652;color:#9fc3ff}.syc-close{width:28px;height:28px;border-radius:6px;cursor:pointer;border:1px solid #2b3446;background:#101626;color:#9db2d0}.syc-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin:8px 0;align-items:center}.syc-row>label{font-size:11px;color:#9db2d0}.syc-row .inline{grid-column:1 / -1;display:flex;gap:8px}.syc-row input[type=range]{width:100%}.syc-row input[type=number]{width:72px}.syc-row select,.syc-row input,.syc-row button{background:#0b101b;color:#eaf2ff;border:1px solid #2b3446;border-radius:6px;padding:6px 8px}.syc-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}.syc-actions button{cursor:pointer}.syc-inst-grid{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow:auto;padding-bottom:2px}.syc-inst-btn{position:relative;border:1px solid #2b3446;background:#0b101b;color:#eaf2ff;border-radius:999px;padding:6px 28px 6px 10px;font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.syc-inst-btn:hover{background:#0f1626}.syc-inst-btn.active{border-color:#9feaff;box-shadow:0 0 0 2px #9feaff26}.syc-inst-btn:disabled{opacity:.55;cursor:default}.syc-inst-btn.is-loading:after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:syc-spin .8s linear infinite}@keyframes syc-spin{to{transform:rotate(360deg)}}.syc-panel[aria-busy=true]{opacity:.85}.syc-panel[aria-busy=true] *{cursor:wait!important}