.welcome-screen{position:relative;width:100vw;height:100vh;background:radial-gradient(circle at center,#06080f,#020105 35%,#000);overflow:hidden;cursor:pointer;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none}.wave-panel{position:absolute;top:0;bottom:0;width:30vw;min-width:220px;overflow:hidden;pointer-events:none}.wave-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,rgba(0,0,0,.9),transparent 55%);pointer-events:none}.wave-right:before{background:linear-gradient(to left,rgba(0,0,0,.9),transparent 55%)}.wave-left{left:0}.wave-right{right:0}.content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.logo-image{width:496px;max-width:85vw;filter:drop-shadow(0 0 30px rgba(57,215,255,.35));animation:float 5s ease-in-out infinite}.content h2{margin:0;color:transparent;background-image:linear-gradient(90deg,#3de8ff,#8b6cff);background-clip:text;-webkit-background-clip:text;font-size:clamp(2.8rem,4vw,5rem);font-weight:700;letter-spacing:.9rem;text-transform:uppercase;text-shadow:0 0 30px rgba(62,228,255,.25)}.content p{margin:0;color:#ffffffb8;font-size:1rem;letter-spacing:.16rem;animation:pulse 2s infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse{0%,to{opacity:.45}50%{opacity:1}}:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#050507;color:#f4f2ef;--accent: #2c77d9;--cyan: #00d9ff;--purple: #d946ff;--blue: #00b4ff}*{box-sizing:border-box}body,html,#root{margin:0;min-height:100%}button,input{font:inherit}.app-shell{min-height:100vh;background:radial-gradient(circle at top,rgba(0,217,255,.05),transparent 30%),radial-gradient(circle at 20% 50%,rgba(0,217,255,.04),transparent 40%),radial-gradient(circle at 80% 60%,rgba(217,70,255,.04),transparent 50%),linear-gradient(180deg,#070708,#050507)}.app-nav{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.5rem}.nav-select-label{color:#ffffffbf;font-size:.95rem;text-transform:uppercase;letter-spacing:.2em}.nav-select{min-width:180px;padding:.7rem .95rem;border-radius:999px;border:1px solid rgba(44,119,217,.3);background:#0c1220bf;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#fff;box-shadow:0 10px 24px #00000040,inset 0 1px 1px #ffffff14;font-size:.95rem;cursor:pointer;transition:all .25s ease}.nav-select:hover{border-color:#2c77d98c;box-shadow:0 10px 28px #0000004d,inset 0 1px 1px #ffffff1a}.nav-select:focus{outline:none;border-color:#2c77d9d9;box-shadow:0 10px 28px #2c77d92e,inset 0 1px 1px #ffffff1f}.nav-select option{color:#fff;background:#06080ff2}.nav-select option:hover,.nav-select option:checked{background:linear-gradient(135deg,#2c77d933,#00d9ff2e);color:#a8d9ff}.welcome-page{position:relative;min-height:calc(100vh - 56px);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}.welcome-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,rgba(255,196,135,.15),transparent 25%),radial-gradient(circle at 40% 20%,rgba(255,255,255,.06),transparent 14%),linear-gradient(180deg,#050507,#0a0a0cf2)}.particles-wrap{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:none!important}.particle{position:absolute;width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;color:#ffffffe6;display:block;pointer-events:none;font-size:clamp(.9rem,1.8vw,1.4rem);font-weight:600;text-shadow:none}.welcome-copy{position:relative;text-align:center;z-index:10;max-width:560px}.logo-image{display:block;margin:0 auto 1rem;max-width:240px;width:min(70vw,240px)}.welcome-copy h1{font-size:clamp(2rem,5vw,4.5rem);letter-spacing:.35em;margin:0;font-weight:300;color:#fff;line-height:1.2}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.welcome-copy p{margin:.8rem 0 0;font-size:1.1rem;letter-spacing:.3em;color:#ffb65a;font-weight:500}.subcopy{display:block;margin-top:2rem;font-size:.95rem;color:#ffffffa6;letter-spacing:.15em;font-weight:400}.pads-page{min-height:calc(100vh - 56px);padding:1.5rem;background:radial-gradient(circle at 50% 20%,rgba(0,217,255,.05),transparent 50%),radial-gradient(circle at 20% 80%,rgba(217,70,255,.04),transparent 50%),linear-gradient(180deg,#070708,#050507)}.pads-topbar{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1rem;align-items:center;margin-bottom:1.5rem}.topbar-panel{padding:.45rem .6rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#ffffff0d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 16px #0003,inset 0 1px 1px #ffffff14}.topbar-label{display:block;color:#ffffffb8;margin-bottom:.45rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}.topbar-control{display:flex;align-items:center;gap:.5rem}.topbar-control input[type=range]{width:100%;height:6px;background:transparent;-webkit-appearance:none;cursor:pointer}.topbar-control input[type=range]::-webkit-slider-runnable-track{height:6px;background:#ffffff1f;border-radius:6px;box-shadow:inset 0 1px 2px #0000004d}.topbar-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#00d9ff,#00b4ff);box-shadow:0 0 12px #00d9ff99,0 4px 12px #00d9ff4d,inset 0 1px 1px #fff6;margin-top:-4px;border:1px solid rgba(255,255,255,.2)}.topbar-control input[type=range]::-moz-range-track{height:6px;background:#ffffff1f;border-radius:6px;box-shadow:inset 0 1px 2px #0000004d;border:none}.topbar-control input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#00d9ff,#00b4ff);box-shadow:0 0 12px #00d9ff99,0 4px 12px #00d9ff4d,inset 0 1px 1px #fff6;border:1px solid rgba(255,255,255,.2)}.fade-row{display:flex;align-items:center;gap:.6rem}.fade-row span{color:#ffffffc7;min-width:40px;text-align:right;font-size:.88rem}.volume-panel,.fade-panel{min-width:0}.pads-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.pad-tile{min-height:180px;border-radius:28px;border:2px solid rgba(0,217,255,.3);background:#ffffff0a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#f8f6f0;display:grid;place-items:center;gap:.5rem;padding:1.5rem;text-align:center;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;box-shadow:0 4px 16px #0000004d,inset 0 1px 1px #ffffff14,inset 0 0 0 1px #00d9ff33}.pad-tile:hover{transform:translateY(-3px);border-color:#00d9ff99;box-shadow:0 8px 24px #00d9ff26,inset 0 1px 1px #ffffff1a,inset 0 0 0 1px #00d9ff4d}.pad-tile.active{background:#00d9ff26;border-color:var(--cyan);box-shadow:0 8px 24px #00d9ff40,inset 0 1px 1px #ffffff1a,inset 0 0 0 1px #00d9ff66}.pad-tile span:first-child{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700}.tile-status{font-size:.9rem;color:#ffffff8c}.add-chords-page{min-height:calc(100vh - 56px);display:flex;align-items:flex-start;justify-content:center;padding:1.5rem;background:radial-gradient(circle at 50% 20%,rgba(0,217,255,.05),transparent 50%),radial-gradient(circle at 20% 80%,rgba(217,70,255,.04),transparent 50%),linear-gradient(180deg,#070708,#050507)}.panel{width:100%;max-width:1280px;padding:2rem;border-radius:32px;background:#ffffff0f;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(44,119,217,.18);box-shadow:0 8px 32px #2c77d91a,inset 0 1px 1px #ffffff14}.add-chords-content{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:1.5rem}@media (min-width: 1024px){.add-chords-content{grid-template-columns:1fr 1fr}}.upload-section,.pads-section{display:flex;flex-direction:column}.panel h1{margin:0;margin-bottom:.5rem;font-size:2rem}.panel p{margin:0 0 1.75rem;color:#ffffffbd}.field-label{display:block;margin-bottom:.5rem;color:#ffffffb3}.panel input[type=text],.panel input[type=file]{width:100%;padding:.9rem 1rem;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;margin-bottom:1.25rem;box-shadow:inset 0 1px 1px #ffffff14;transition:border-color .2s ease,background .2s ease}.panel input[type=text]:focus,.panel input[type=file]:focus{outline:none;border-color:#00d9ff80;background:#ffffff14}.primary-button{width:100%;padding:.95rem 1rem;border-radius:18px;border:1px solid rgba(44,119,217,.45);background:linear-gradient(135deg,#2c77d9f2,#2c77d9bf);color:#fff;font-weight:700;cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .15s ease;box-shadow:0 6px 20px #2c77d940}.primary-button:hover{background:linear-gradient(135deg,#2c77d9,#00d9fff2);box-shadow:0 12px 28px #00d9ff59;transform:translateY(-1px)}.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1rem;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:#ffffff0d;color:#fff;cursor:pointer;transition:all .2s ease;box-shadow:inset 0 1px 1px #ffffff14,0 6px 18px #00000029}.secondary-button:hover{background:#ffffff14;border-color:#2c77d973}.welcome-link-card{margin-bottom:1.5rem;padding:1.35rem 1.25rem;border-radius:22px;background:#ffffff0d;border:1px solid rgba(44,119,217,.18);box-shadow:inset 0 1px 1px #ffffff14,0 8px 20px #00d9ff0f}.welcome-link-card p{margin:0 0 .9rem;color:#ffffffbf}.upload-preview{padding:.85rem 1rem;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#fffc;margin-bottom:1rem}.upload-preview:hover{border-color:#00d9ff4d;box-shadow:inset 0 1px 1px #ffffff14,0 6px 16px #00d9ff26;background:#ffffff0f}.status-message{margin-top:.75rem;padding:.75rem 1rem;color:#ffffffe6;background:#00d9ff1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(0,217,255,.3);border-radius:12px;box-shadow:inset 0 1px 1px #ffffff14,0 4px 12px #00d9ff26}.saved-chords{margin-top:2rem}.saved-chords h2{margin:0 0 1rem;color:#fff}.empty-state{color:#ffffffa6}.saved-grid{display:grid;gap:.9rem}.window-launch{padding:.45rem .75rem;border-radius:10px;background:#ffffff0f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;box-shadow:inset 0 1px 1px #ffffff14,0 4px 12px #00000026;transition:all .2s ease}.window-launch:hover{background:#ffffff14;box-shadow:inset 0 1px 1px #ffffff1a,0 4px 16px #00d9ff1a}.window{position:fixed;z-index:1200;background:linear-gradient(180deg,#0a0a0cd9,#060608cc);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 8px 32px #00d9ff26,inset 0 1px 1px #ffffff14;overflow:hidden}.window-titlebar{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;cursor:grab;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border-bottom:1px solid rgba(255,255,255,.02)}.window-title{font-weight:700;color:#fff}.window-actions button{margin-left:.5rem;background:transparent;border:none;color:#fffc;cursor:pointer}.window-body{padding:.9rem;color:#ffffffeb;height:calc(100% - 56px);overflow:auto}.window-resize{position:absolute;right:6px;bottom:6px;width:16px;height:16px;cursor:nwse-resize}.window-minimized .window-body{display:none}.window-minimized{height:48px!important}.window-minimized .window-titlebar{cursor:default}.saved-item{display:flex;justify-content:space-between;align-items:center;padding:.95rem 1rem;border-radius:18px;background:#ffffff0d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 12px #00000026,inset 0 1px 1px #ffffff14}.saved-item.saved-active{background:#00d9ff26;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:#00d9ff59;color:#00d9fff2;box-shadow:0 4px 16px #00d9ff2e,inset 0 1px 1px #ffffff1a}.saved-item button{border:none;background:transparent;color:#00d9ffe6;cursor:pointer}@media (max-width: 900px){.pads-topbar{grid-template-columns:1fr}.pads-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 650px){.app-nav{justify-content:center;flex-wrap:wrap}.pads-topbar{grid-template-columns:1fr}.pads-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pad-tile{min-height:150px}.nav-select{width:100%}}