@layer reset,base,components,utilities;:root{--bg-main:#0e1117;--bg-card:#161b22;--border-card:#30363d;--emerald-main:#10b981;--emerald-dark:#059669;--red-main:#ef4444;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-main);color:#f0f6fc;-webkit-font-smoothing:antialiased;min-height:100vh}.studio-container{max-width:640px;margin:0 auto;padding:24px 16px 60px}.app-version{color:#484f58;font-family:var(--font-mono);letter-spacing:.04em;text-align:center;-webkit-user-select:none;user-select:none;margin-top:4px;font-size:9px}[hidden]{display:none!important}button:disabled{opacity:.5;cursor:not-allowed}.app-notice{color:#f5dea6;overflow-wrap:anywhere;background:#282417;border:1px solid #645128;border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;padding:12px;font-size:13px;line-height:1.6;display:flex}.recorder-status{color:#d1d5db;margin:8px 0;font-size:13px;line-height:1.6}.draft-actions{color:#f5dea6;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:12px 0;font-size:13px;display:flex}.draft-actions a{align-items:center;text-decoration:none;display:inline-flex}.awake-bar{background:#161b22;border:1px solid #30363d;border-radius:14px;justify-content:space-between;align-items:center;gap:8px;margin-bottom:20px;padding:10px 12px;font-size:13px;display:flex}.awake-bar small{color:#9ca3af;margin-top:3px;display:block}.awake-bar button{color:#fff;cursor:pointer;background:#21262d;border:1px solid #4b5563;border-radius:8px;flex-shrink:0;min-height:44px;padding:8px 12px}.awake-dot{background:#6e7681;border-radius:50%;width:8px;height:8px;margin-right:8px;display:inline-block}.awake-dot.active{background:#10b981}.beat-unit{color:#d1d5db;margin:12px 0;font-size:13px}.tap-tempo{color:#b0f5cf;width:100%;min-height:48px;font:inherit;cursor:pointer;touch-action:manipulation;background:#183e2f;border:1px solid #3b7660;border-radius:12px;padding:12px;font-weight:700}.rhythm-options{background:#1e242e;border-radius:16px;flex-wrap:wrap;gap:8px;margin-bottom:12px;padding:12px;display:flex}.rhythm-options button{color:#fff;min-height:44px;font:inherit;cursor:pointer;touch-action:manipulation;background:#2b333e;border:1px solid #4b5563;border-radius:10px;flex:1 0 44px;padding:8px;font-size:13px}.rhythm-options button[aria-pressed=true]{background:#10b98133;border-color:#10b981}.rhythm-grouping>span{color:#9ca3af;margin:8px;font-size:13px;display:block}@media (width<=380px){.hardware-card{padding:16px}.hardware-card .btn-green{padding:12px!important;font-size:13px!important}.tuning-string{min-height:44px}}.hardware-card{background-color:var(--bg-card);border:1px solid var(--border-card);text-align:center;border-radius:24px;margin-bottom:24px;padding:24px;box-shadow:0 8px 24px #00000080}.card-header{border-bottom:1px solid var(--border-card)!important;text-align:left!important;justify-content:space-between!important;align-items:center!important;margin-bottom:20px!important;padding-bottom:14px!important;display:flex!important}.card-title{color:#fff!important;font-size:20px!important;font-weight:800!important}.btn-green{color:#fff!important;cursor:pointer!important;background:linear-gradient(#1f6e43 0%,#144f2e 100%)!important;border:1px solid #2ea043!important;border-radius:12px!important;justify-content:center!important;align-items:center!important;gap:8px!important;padding:14px 22px!important;font-size:15px!important;font-weight:700!important;text-decoration:none!important;transition:all .15s!important;display:inline-flex!important;box-shadow:inset 0 1px #ffffff26,0 4px 8px #0006!important}.btn-green:hover:not(:disabled){background:linear-gradient(#238650 0%,#196138 100%)!important;border-color:#3fb950!important;transform:translateY(-1px)!important}.btn-green:active:not(:disabled){transform:translateY(0)!important}.btn-record-huge{cursor:pointer!important;background:#ef4444!important;border:4px solid #f87171!important;border-radius:50%!important;outline:none!important;justify-content:center!important;align-items:center!important;width:100px!important;height:100px!important;margin:24px auto!important;transition:all .15s!important;display:flex!important;box-shadow:0 0 30px #ef444499!important}.btn-record-huge:hover{background:#dc2626!important;transform:scale(1.05)!important}.btn-record-huge.recording{background:#e11d48!important;border-color:#fda4af!important;animation:1.2s infinite pulse-ring!important}@keyframes pulse-ring{0%{box-shadow:0 0 #f43f5eb3}70%{box-shadow:0 0 0 20px #f43f5e00}to{box-shadow:0 0 #f43f5e00}}.screen-box{background-color:#0b0e14!important;border:2px solid #30363d!important;border-radius:16px!important;position:relative!important;overflow:hidden!important;box-shadow:inset 0 2px 12px #000c!important}.charango-course-badge{color:#6ee7b7;letter-spacing:.02em;background:#10b9811f;border:1px solid #10b9818c;border-radius:999px;align-items:center;min-height:26px;margin-top:8px;padding:4px 10px;font-size:12px;font-weight:800;display:inline-flex}.tuning-guides{text-align:left;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px;display:grid}.tuning-guide{border:1px solid var(--border-card);background:#0b0e14;border-radius:12px;min-width:0;padding:12px}.tuning-guide-title{color:#d1d5db;margin-bottom:9px;font-size:12px;font-weight:800}.tuning-strings{grid-template-columns:repeat(var(--string-count), minmax(0, 1fr));gap:6px;display:grid}.tuning-string{min-width:0;color:inherit;font:inherit;cursor:pointer;appearance:none;background:#161b22;border:1px solid #30363d;border-radius:7px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 3px;transition:border-color .15s,background-color .15s,box-shadow .15s,transform .1s;display:flex}.tuning-string:hover{background:#21262d;border-color:#4b5563}.tuning-string:focus-visible{outline-offset:2px;outline:2px solid #6ee7b7}.tuning-string:active{transform:scale(.96)}.tuning-string-active{background:#10b98124;border-color:#10b981;box-shadow:0 0 10px #10b9812e}.tuning-string-number{color:#8b949e;white-space:nowrap;font-size:9px;font-weight:700}.tuning-string-note{color:#f0f6fc;font-family:var(--font-mono);white-space:nowrap;font-size:12px;font-weight:800}.tuning-string-active .tuning-string-number,.tuning-string-active .tuning-string-note,.tuning-string-playing .tuning-string-number,.tuning-string-playing .tuning-string-note{color:#6ee7b7}.tuning-string-playing{background:#10b98133;border-color:#34d399;animation:.7s ease-in-out infinite alternate tuning-tone-pulse;box-shadow:0 0 14px #10b98159}.tuning-guide-hint{color:#6b7280;text-align:center;margin-top:7px;font-size:9px}@keyframes tuning-tone-pulse{0%{box-shadow:0 0 6px #10b98133}to{box-shadow:0 0 16px #10b98180}}@media (width<=520px){.tuning-guides{grid-template-columns:1fr}}.row-nowrap{flex-flow:row!important;justify-content:center!important;align-items:center!important;gap:12px!important;margin:16px 0!important;display:flex!important}.tempo-controls{grid-template-columns:44px minmax(0,180px) 44px;justify-content:center;align-items:center;gap:8px;margin-top:16px;display:grid}.tempo-controls .btn-plus-minus{touch-action:manipulation;width:44px!important;height:52px!important}.tempo-field{background:#0b0e14;border:1px solid #30363d;border-radius:14px;align-items:center;gap:4px;min-width:0;padding:6px 8px;display:flex}.tempo-field:focus-within{border-color:#34d399;box-shadow:0 0 0 2px #34d39933}.tempo-field input{color:#fff;width:100%;min-width:0;min-height:44px;font:bold 32px var(--font-mono);text-align:center;background:0 0;border:0;outline:none}.tempo-edit-actions{color:#9ca3af;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:8px;font-size:12px;display:flex}.tempo-done{color:#f0f6fc;min-height:44px;font:inherit;cursor:pointer;touch-action:manipulation;background:#21262d;border:1px solid #4b5563;border-radius:10px;padding:8px 16px}.tempo-done:focus-visible{outline-offset:2px;outline:2px solid #34d399}.tempo-feedback{color:#9ca3af;margin-top:4px;font-size:12px;line-height:1.5}.btn-plus-minus{color:#fff!important;cursor:pointer!important;background:#21262d!important;border:1px solid #30363d!important;border-radius:12px!important;flex-shrink:0!important;justify-content:center!important;align-items:center!important;width:52px!important;height:52px!important;font-size:24px!important;font-weight:800!important;transition:background .15s!important;display:flex!important}.btn-plus-minus:hover{background:#30363d!important}.input-dark{color:#fff!important;font-family:var(--font-mono)!important;background:#0b0e14!important;border:1px solid #30363d!important;border-radius:10px!important;outline:none!important;padding:8px 12px!important}.input-dark:focus{border-color:#10b981!important}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}.animate-fade-in{animation:.35s cubic-bezier(.16,1,.3,1) forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}