:root{--color-bg: #0A0A0A;--color-bg-card: #141414;--color-bg-elevated: #1A1A1A;--color-gold: #D4AF37;--color-gold-light: #F2E8C4;--color-gold-dim: rgba(212, 175, 55, .3);--color-gold-glow: rgba(212, 175, 55, .2);--color-midnight: #1E3D59;--color-cream: #F2F0E4;--color-muted: #888888;--color-success: #4CAF50;--color-error: #CF6679;--font-display: "Marcellus", "Georgia", serif;--font-body: "Josefin Sans", "Helvetica Neue", sans-serif;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--glow-sm: 0 0 10px var(--color-gold-glow);--glow-md: 0 0 20px var(--color-gold-glow);--glow-lg: 0 0 30px rgba(212, 175, 55, .3);--border-gold: 1px solid var(--color-gold-dim);--border-gold-bright: 1px solid var(--color-gold);--transition-base: .3s ease-out;--transition-slow: .5s ease-in-out}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);font-weight:300;background-color:var(--color-bg);color:var(--color-cream);line-height:1.6;min-height:100dvh;letter-spacing:.02em}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.04;background:repeating-linear-gradient(45deg,var(--color-gold) 0,var(--color-gold) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(-45deg,var(--color-gold) 0,var(--color-gold) 1px,transparent 1px,transparent 40px)}#root{min-height:100dvh;display:flex;flex-direction:column;position:relative;z-index:1}.app-container{width:100%;max-width:1152px;margin:0 auto;padding:var(--space-md);flex:1}@media(min-width:768px){.app-container{padding:var(--space-lg) var(--space-xl)}}@media(min-width:1024px){.app-container{padding:var(--space-xl) var(--space-2xl)}}.app-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg) 0;margin-bottom:var(--space-xl);border-bottom:var(--border-gold);position:relative}.app-header:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:var(--color-gold-dim)}.app-title{font-family:var(--font-display);font-size:1.5rem;color:var(--color-gold);text-transform:uppercase;letter-spacing:.2em}@media(min-width:768px){.app-title{font-size:2rem}}.app-header-actions{display:flex;gap:var(--space-sm);align-items:center}.btn{font-family:var(--font-body);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;padding:12px 24px;min-height:48px;min-width:48px;border:2px solid var(--color-gold);background:transparent;color:var(--color-gold);cursor:pointer;transition:all var(--transition-base);position:relative}.btn:hover:not(:disabled){background:var(--color-gold);color:var(--color-bg);box-shadow:var(--glow-md)}.btn:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px}.btn:disabled{opacity:.35;cursor:not-allowed}.btn--solid{background:var(--color-gold);color:var(--color-bg)}.btn--solid:hover:not(:disabled){background:var(--color-gold-light);box-shadow:var(--glow-lg)}.btn--icon{padding:10px;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}.deco-card{background:var(--color-bg-card);border:var(--border-gold);padding:var(--space-xl);position:relative;transition:all var(--transition-slow)}.deco-card:hover{border-color:var(--color-gold);box-shadow:var(--glow-sm);transform:translateY(-2px)}.deco-card:before,.deco-card:after{content:"";position:absolute;width:20px;height:20px;border-color:var(--color-gold);border-style:solid;opacity:.5;transition:opacity var(--transition-base)}.deco-card:before{top:6px;left:6px;border-width:2px 0 0 2px}.deco-card:after{bottom:6px;right:6px;border-width:0 2px 2px 0}.deco-card:hover:before,.deco-card:hover:after{opacity:1}.deco-divider{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-xl) 0}.deco-divider:before,.deco-divider:after{content:"";flex:1;height:1px;background:var(--color-gold-dim)}.deco-divider__diamond{width:10px;height:10px;background:var(--color-gold);transform:rotate(45deg);flex-shrink:0}.upload-dropzone{border:2px dashed var(--color-gold-dim);padding:var(--space-3xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-base);position:relative;background:var(--color-bg-card)}.upload-dropzone:hover,.upload-dropzone--active{border-color:var(--color-gold);box-shadow:var(--glow-md);background:var(--color-bg-elevated)}.upload-dropzone:before,.upload-dropzone:after{content:"";position:absolute;width:28px;height:28px;border-color:var(--color-gold);border-style:solid;opacity:.4;transition:opacity var(--transition-base)}.upload-dropzone:before{top:8px;right:8px;border-width:2px 2px 0 0}.upload-dropzone:after{bottom:8px;left:8px;border-width:0 0 2px 2px}.upload-dropzone:hover:before,.upload-dropzone:hover:after,.upload-dropzone--active:before,.upload-dropzone--active:after{opacity:1}.upload-dropzone__icon{font-size:3rem;color:var(--color-gold);margin-bottom:var(--space-md);display:block}.upload-dropzone__title{font-family:var(--font-display);font-size:1.25rem;color:var(--color-cream);text-transform:uppercase;letter-spacing:.15em;margin-bottom:var(--space-sm)}.upload-dropzone__subtitle{font-size:.85rem;color:var(--color-muted);letter-spacing:.05em}.progress-bar{width:100%;height:4px;background:var(--color-bg-elevated);margin-top:var(--space-md);position:relative;overflow:hidden}.progress-bar__fill{height:100%;background:linear-gradient(90deg,var(--color-gold),var(--color-gold-light));transition:width .2s ease-out;box-shadow:var(--glow-sm)}.progress-bar__text{font-size:.8rem;color:var(--color-gold);text-transform:uppercase;letter-spacing:.15em;margin-top:var(--space-sm)}.processing-status{text-align:center;padding:var(--space-2xl) var(--space-xl)}.processing-status__announcement{font-family:var(--font-display);font-size:1.1rem;color:var(--color-cream);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-lg)}.processing-status__spinner{display:inline-block;margin-bottom:var(--space-lg);color:var(--color-gold)}.processing-status__skeleton{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.processing-status__skeleton-line{height:3px;background:var(--color-gold-dim);position:relative;overflow:hidden}.processing-status__skeleton-line:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,var(--color-gold),transparent);animation:skeleton-shimmer 2s ease-in-out infinite}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.processing-status__estimate{font-size:.8rem;color:var(--color-muted);letter-spacing:.05em}.processing-status__error{margin-top:var(--space-lg)}.processing-status__error-message{color:var(--color-error);margin-bottom:var(--space-md)}.processing-status__success{color:var(--color-gold);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em}.playback-layout{display:flex;flex-direction:column;gap:var(--space-lg)}@media(min-width:768px){.playback-layout{flex-direction:row;gap:var(--space-xl)}.sheet-panel{flex:2}.controls-panel{flex:1;max-width:380px}}.playback-controls{padding:var(--space-lg);background:var(--color-bg-card);border:var(--border-gold);position:relative}.playback-controls:before,.playback-controls:after{content:"";position:absolute;width:16px;height:16px;border-color:var(--color-gold);border-style:solid;opacity:.4}.playback-controls:before{top:5px;left:5px;border-width:2px 0 0 2px}.playback-controls:after{bottom:5px;right:5px;border-width:0 2px 2px 0}.playback-controls__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.playback-controls__transport{display:flex;gap:var(--space-sm);justify-content:center;margin-bottom:var(--space-lg)}.playback-controls__button{font-family:var(--font-body);font-size:1.4rem;width:56px;height:56px;border:2px solid var(--color-gold);background:transparent;color:var(--color-gold);cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center}.playback-controls__button:hover:not(:disabled){background:var(--color-gold);color:var(--color-bg);box-shadow:var(--glow-md)}.playback-controls__button:disabled{opacity:.3;cursor:not-allowed}.playback-controls__button:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px}.playback-controls__position{text-align:center;font-family:var(--font-display);font-size:1rem;color:var(--color-gold);text-transform:uppercase;letter-spacing:.15em;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-gold-dim)}.playback-controls__label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--color-muted);margin-bottom:var(--space-xs)}.playback-controls__seek,.playback-controls__tempo,.playback-controls__volume{margin-bottom:var(--space-md)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--color-bg-elevated);outline:none;cursor:pointer;min-height:48px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--color-gold);border:none;cursor:pointer;transform:rotate(45deg);box-shadow:var(--glow-sm);transition:box-shadow var(--transition-base)}input[type=range]::-webkit-slider-thumb:hover{box-shadow:var(--glow-md)}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--color-gold);border:none;cursor:pointer;transform:rotate(45deg);box-shadow:var(--glow-sm)}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--glow-lg)}.instrument-selector{display:flex;gap:0;margin-bottom:var(--space-lg)}.instrument-selector__option{flex:1;font-family:var(--font-body);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;padding:14px 16px;min-height:48px;min-width:48px;border:1px solid var(--color-gold-dim);background:transparent;color:var(--color-muted);cursor:pointer;transition:all var(--transition-base)}.instrument-selector__option:first-child{border-right:none}.instrument-selector__option--active{background:var(--color-gold);color:var(--color-bg);border-color:var(--color-gold);box-shadow:var(--glow-sm)}.instrument-selector__option:hover:not(:disabled):not(.instrument-selector__option--active){background:var(--color-midnight);color:var(--color-cream);border-color:var(--color-gold)}.instrument-selector__option:disabled{opacity:.3;cursor:not-allowed}.instrument-selector__option:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.sheet-viewer{position:relative;width:100%;background:var(--color-bg-card);border:var(--border-gold);min-height:300px}.sheet-viewer__badge{position:absolute;top:var(--space-md);right:var(--space-md);background:var(--color-bg);color:var(--color-gold);border:1px solid var(--color-gold);padding:4px 14px;font-family:var(--font-display);font-size:.85rem;letter-spacing:.1em;z-index:10;box-shadow:var(--glow-sm)}.sheet-viewer__zoom{position:absolute;top:var(--space-md);left:var(--space-md);background:var(--color-bg);color:var(--color-muted);border:1px solid var(--color-gold-dim);padding:4px 10px;font-size:.75rem;letter-spacing:.1em;z-index:10}.sheet-viewer__content{padding:var(--space-2xl) var(--space-md) var(--space-md);overflow:auto;min-height:200px}.sheet-viewer__comparison{display:flex;gap:var(--space-md)}.sheet-viewer__comparison>*{flex:1;overflow:auto}.sheet-viewer__comparison img{width:100%;height:auto;filter:grayscale(30%);border:1px solid var(--color-gold-dim)}.toast-container{position:fixed;bottom:var(--space-lg);left:50%;transform:translate(-50%);z-index:9999;display:flex;flex-direction:column;gap:var(--space-sm);pointer-events:none;width:calc(100% - 32px);max-width:440px}.toast{pointer-events:auto;background:var(--color-bg-card);color:var(--color-cream);border:1px solid var(--color-gold-dim);padding:14px 18px;font-size:.85rem;letter-spacing:.03em;display:flex;align-items:center;gap:var(--space-sm);animation:toastIn .4s ease-out;box-shadow:var(--glow-sm)}.toast--exiting{animation:toastOut .3s ease-in forwards}.toast--success{border-left:3px solid var(--color-success)}.toast--error{border-left:3px solid var(--color-error)}.toast--info{border-left:3px solid var(--color-gold)}.toast__message{flex:1}.toast__dismiss{background:none;border:1px solid var(--color-gold-dim);color:var(--color-muted);cursor:pointer;padding:6px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);font-size:.85rem}.toast__dismiss:hover{color:var(--color-gold);border-color:var(--color-gold)}@keyframes toastIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.view-enter{animation:decoReveal .5s ease-out}@keyframes decoReveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}button,[role=button],select{min-height:44px;min-width:44px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-gold-dim)}::-webkit-scrollbar-thumb:hover{background:var(--color-gold)}