*{box-sizing:border-box}:root{--wood-dark: #3d2817;--wood-medium: #5c3d2e;--wood-light: #8b5a2b;--wood-highlight: #a0522d;--wood-grain: repeating-linear-gradient(90deg, transparent 0px, rgba(0, 0, 0, .03) 1px, transparent 2px, rgba(0, 0, 0, .02) 4px, transparent 5px);--wood-base: linear-gradient(180deg, #5c3d2e 0%, #4a3225 20%, #3d2817 50%, #4a3225 80%, #5c3d2e 100%);--wood-panel: linear-gradient(180deg, #6b4423 0%, #5c3d2e 15%, #4a3225 50%, #5c3d2e 85%, #6b4423 100%);--wood-button: linear-gradient(180deg, #8b5a2b 0%, #6b4423 30%, #5c3d2e 70%, #4a3225 100%);--gold-accent: #d4a857;--gold-dark: #b8942d;--ivory: #fffff0;--ivory-dark: #f5f5dc;--stop-ivory: #f8f4e8;--stop-ivory-dark: #e8e0d0}body{font-family:Georgia,Times New Roman,serif;margin:0;padding:20px;background-image:url(ash-3200-mm-architextures.jpg);background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;color:#f0e6d3;min-height:100vh}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#1e140a66;pointer-events:none;z-index:-1}h1{text-align:center;color:var(--gold-accent);margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.7);font-weight:400;letter-spacing:3px;font-variant:small-caps}button{font-family:Georgia,Times New Roman,serif}.top-controls{display:flex;justify-content:center;align-items:center;gap:30px;margin-bottom:20px;padding:16px 24px;background:var(--wood-panel),var(--wood-grain);background-color:var(--wood-medium);border-radius:8px;max-width:950px;flex-wrap:wrap;margin-left:auto;margin-right:auto;border:3px solid #2a1a0f;box-shadow:inset 0 1px #ffffff1a,0 4px 8px #0006}#btn-init{background:var(--wood-button),var(--wood-grain);background-color:var(--wood-light);border:2px solid #2a1a0f;color:var(--ivory);padding:10px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);box-shadow:inset 0 1px #fff3,0 2px 4px #0000004d;transition:all .15s}#btn-init:hover:not(:disabled){background:linear-gradient(180deg,sienna,#8b5a2b 30%,#6b4423 70%,#5c3d2e);background-color:var(--wood-highlight)}#btn-init:disabled{opacity:.6;cursor:default}.reverb-control{display:flex;align-items:center;gap:12px}.reverb-control label{color:var(--gold-accent);font-size:14px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.reverb-control input[type=range]{width:150px;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(180deg,#2a1a0f,#3d2817,#2a1a0f);border-radius:4px;cursor:pointer;border:1px solid #1a0f08}.reverb-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:radial-gradient(circle at 30% 30%,#e8c252,var(--gold-accent),var(--gold-dark));border-radius:50%;cursor:pointer;border:2px solid #8b6914;box-shadow:0 2px 4px #0006}.reverb-control .value{min-width:45px;text-align:right;font-size:13px;color:var(--ivory-dark)}.organ-console{display:grid;grid-template-columns:420px 1fr 420px;gap:15px;max-width:1800px;margin:0 auto;align-items:stretch}@media(max-width:1400px){.organ-console{grid-template-columns:320px 1fr 320px;gap:10px}}@media(max-width:1000px){.organ-console{grid-template-columns:1fr}.stops-jamb{order:1}.manuals-center{order:0}}.stops-jamb{display:flex;flex-direction:column;background:var(--wood-panel),var(--wood-grain);background-color:var(--wood-medium);border-radius:10px;padding:12px;border:3px solid #2a1a0f;box-shadow:inset 0 1px #ffffff1a,0 4px 8px #0006;min-height:400px}.jamb-header{margin:0 0 10px;text-align:center;font-size:14px;letter-spacing:2px;text-transform:uppercase;font-weight:400;border-bottom:2px solid rgba(212,168,87,.4);padding-bottom:8px;color:var(--gold-accent);text-shadow:1px 1px 2px rgba(0,0,0,.5)}.stops-columns-container{display:none;gap:4px;flex:1}.stops-columns-container.visible{display:flex}.stops-column{display:flex;flex-direction:column;gap:8px;flex:1}.stops-columns-container .stops-column:nth-child(odd){padding-top:35px}.stops-columns-container .stops-column:nth-child(2n){padding-top:0}.stops-placeholder{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:flex-start;padding:10px;flex:1}.stops-placeholder.hidden{display:none}.placeholder-stop{width:65px;height:65px;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,rgba(255,255,255,.3) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,var(--stop-ivory) 0%,var(--stop-ivory-dark) 60%,#d0c8b8 80%,#c0b8a8 100%);border:3px solid #8b7355;box-shadow:0 3px 6px #0000004d,inset 0 -2px 4px #0000001a,inset 0 2px 4px #ffffff4d;opacity:.5}.organ-stop{width:70px;height:70px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease;margin:0 auto}.organ-stop:hover{transform:scale(1.05)}.organ-stop .stop-knob{width:65px;height:65px;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,rgba(255,255,255,.4) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,var(--stop-ivory) 0%,var(--stop-ivory-dark) 60%,#d0c8b8 80%,#c0b8a8 100%);border:3px solid #7a6548;box-shadow:0 4px 8px #0006,0 2px 4px #0003,inset 0 -3px 6px #00000026,inset 0 3px 6px #fff6;transition:all .15s ease;position:relative;display:flex;align-items:center;justify-content:center}.organ-stop .stop-knob:before{content:"";position:absolute;top:5px;left:8px;width:18px;height:10px;background:radial-gradient(ellipse,rgba(255,255,255,.6) 0%,transparent 70%);border-radius:50%}.organ-stop .stop-label{position:absolute;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:3px;font-size:11px;font-family:Palatino Linotype,Book Antiqua,Palatino,Times New Roman,serif;color:#2a1a0f;font-weight:600;line-height:1.1;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;background:radial-gradient(ellipse at 40% 30%,rgba(255,255,255,.3) 0%,transparent 60%),linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 40%,rgba(0,0,0,.05) 100%);text-shadow:0 1px 0 rgba(255,255,255,.5);letter-spacing:.2px}.organ-stop.active .stop-knob{transform:translateY(-10px);box-shadow:0 12px 20px #00000080,0 6px 10px #0000004d,inset 0 -3px 6px #00000026,inset 0 3px 6px #fff6}.stops-left .organ-stop.active .stop-knob{background:radial-gradient(ellipse at 35% 25%,rgba(255,255,255,.3) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,#ffe8c0,#e8a862 60%,#d49040,#c07830);border-color:#8b5014}.stops-right .organ-stop.active .stop-knob{background:radial-gradient(ellipse at 35% 25%,rgba(255,255,255,.3) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,#c0f0e8,#7ec8c0 60%,#5eb8ae,#4aa89c);border-color:#2a7868}.organ-stop.active .stop-label{font-weight:700;color:#1a0f05}.manuals-center{display:flex;flex-direction:column;gap:15px}.manual-card{background:var(--wood-panel),var(--wood-grain);background-color:var(--wood-medium);border-radius:10px;padding:15px 20px;border:4px solid #2a1a0f;box-shadow:inset 0 1px #ffffff1a,0 6px 12px #00000080}.manual-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid rgba(212,168,87,.3);flex-wrap:wrap;gap:10px}.manual-header h2{margin:0;font-weight:400;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,.5);font-size:18px}.manual-card.manual1 h2{color:#e8a862}.manual-card.manual2 h2{color:#7ec8c0}.manual-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.manual-controls select{padding:6px 10px;border-radius:4px;border:2px solid #2a1a0f;background:linear-gradient(180deg,#4a3225,#3d2817,#2a1a0f);color:var(--ivory);font-size:12px;cursor:pointer;font-family:Georgia,serif;box-shadow:inset 0 2px 4px #0000004d;min-width:100px}.manual-controls select:focus{outline:none;border-color:var(--gold-dark)}.load-btn{padding:6px 14px;font-size:11px;background:var(--wood-button),var(--wood-grain);background-color:var(--wood-light);border:2px solid #2a1a0f;color:var(--ivory);border-radius:4px;cursor:pointer;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);box-shadow:inset 0 1px #fff3,0 2px 4px #0000004d;transition:all .15s}.load-btn:hover:not(:disabled){background:linear-gradient(180deg,sienna,#8b5a2b 30%,#6b4423 70%,#5c3d2e)}.load-btn:disabled{opacity:.5;cursor:default}.keyboard-section{margin:10px 0}.keyboard-container{overflow-x:auto;padding:8px;background:linear-gradient(180deg,#1a0f08,#2a1a0f);border-radius:6px;border:2px solid #3d2817;display:flex;justify-content:center}.keyboard{display:flex;position:relative;height:50px;-webkit-user-select:none;user-select:none;margin:0 auto}.white-key{width:12px;height:50px;background:linear-gradient(to bottom,var(--ivory) 0%,var(--ivory-dark) 85%,#d4d4c4 100%);border:1px solid #8b8878;border-radius:0 0 2px 2px;cursor:pointer;position:relative;z-index:1;flex-shrink:0;box-shadow:0 2px 3px #0000004d}.white-key:hover{background:linear-gradient(to bottom,#fffff8 0%,var(--ivory) 85%,var(--ivory-dark) 100%)}.white-key.active{background:linear-gradient(to bottom,#f0d890,#e8c860);box-shadow:inset 0 1px 3px #0003}.manual1 .white-key.active{background:linear-gradient(to bottom,#f0c878,#e8a862)}.manual2 .white-key.active{background:linear-gradient(to bottom,#a0e0d8,#7ec8c0)}.black-key{width:8px;height:32px;background:linear-gradient(to bottom,#2a2a2a,#1a1a1a 60%,#0a0a0a);border:1px solid #000;border-radius:0 0 2px 2px;cursor:pointer;position:absolute;z-index:2;margin-left:-4px;box-shadow:0 2px 4px #00000080}.black-key:hover{background:linear-gradient(to bottom,#3a3a3a,#2a2a2a 60%,#1a1a1a)}.black-key.active{background:linear-gradient(to bottom,#c8a030,#a88820);box-shadow:inset 0 1px 2px #0000004d}.manual1 .black-key.active{background:linear-gradient(to bottom,#d49040,#c07830)}.manual2 .black-key.active{background:linear-gradient(to bottom,#5eb8ae,#4aa89c)}.key-label{position:absolute;bottom:2px;left:50%;transform:translate(-50%);font-size:7px;font-weight:700;color:#8b8878;pointer-events:none;font-family:-apple-system,sans-serif}.black-key .key-label{color:#666;bottom:1px;font-size:6px}.white-key.active .key-label{color:#5c4a28}.black-key.active .key-label{color:#3d2817}.octave-control{display:flex;align-items:center;gap:8px;margin-bottom:8px}.octave-control button{width:28px;height:28px;padding:0;font-size:16px;font-weight:700;background:var(--wood-button);background-color:var(--wood-light);border:2px solid #2a1a0f;border-radius:4px;color:var(--ivory);cursor:pointer;text-shadow:1px 1px 2px rgba(0,0,0,.5);box-shadow:inset 0 1px #fff3,0 2px 4px #0000004d}.octave-control button:hover{background:linear-gradient(180deg,sienna,#8b5a2b,#6b4423)}.octave-control .octave-display{font-size:13px;color:var(--gold-accent);min-width:30px;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.4)}.octave-control .hint{font-size:11px;color:#a89070;margin-left:8px;font-style:italic}.status{margin-top:8px;padding:6px 10px;background:linear-gradient(180deg,#2a1a0f,#1a0f08);border-radius:4px;font-size:11px;border:1px solid #3d2817;color:var(--ivory-dark);font-style:italic}#init-status{font-size:12px;color:var(--ivory-dark);font-style:italic}.pedals-section{display:flex;justify-content:center;gap:60px;margin-top:15px;padding:20px;background:linear-gradient(180deg,#1a0f08,#2a1a0f,#1a0f08);border-radius:8px;border:3px solid #3d2817}.pedal-container{display:flex;flex-direction:column;align-items:center;gap:10px}.pedal-container label{font-size:12px;color:var(--gold-accent);text-shadow:1px 1px 2px rgba(0,0,0,.5);margin:0}.pedal-wrapper{position:relative;width:80px;height:120px;perspective:300px}.pedal{position:absolute;width:70px;height:100px;left:5px;bottom:0;transform-origin:bottom center;transform:rotateX(0);transition:transform .1s ease-out}.pedal-surface{width:100%;height:100%;background:linear-gradient(180deg,#4a4a4a,#3a3a3a 20%,#2a2a2a,#3a3a3a 80%,#4a4a4a);border:2px solid #1a1a1a;border-radius:4px 4px 8px 8px;box-shadow:inset 0 2px 4px #ffffff1a,inset 0 -2px 4px #0000004d,0 4px 8px #00000080;position:relative}.pedal-surface:before{content:"";position:absolute;top:10px;left:10px;right:10px;bottom:20px;background:repeating-linear-gradient(0deg,transparent 0px,transparent 4px,rgba(0,0,0,.3) 4px,rgba(0,0,0,.3) 6px);border-radius:2px}.pedal-surface:after{content:"";position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:30px;height:8px;background:linear-gradient(180deg,#5a5a5a,#3a3a3a);border-radius:2px;border:1px solid #2a2a2a}.pedal-input{position:absolute;width:120px;height:30px;left:50%;bottom:0;transform:translate(-50%) rotate(-90deg);transform-origin:center center;opacity:0;cursor:pointer;z-index:10}.pedal-value{font-size:14px;color:var(--ivory-dark);font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.loading-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1000;justify-content:center;align-items:center}.loading-modal.visible{display:flex}.loading-modal-content{background:var(--wood-panel),var(--wood-grain);background-color:var(--wood-medium);border:4px solid #2a1a0f;border-radius:12px;padding:30px 40px;text-align:center;box-shadow:0 8px 32px #0009;min-width:280px;position:relative}.loading-modal-close{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--gold-accent);font-size:24px;cursor:pointer;opacity:.7;transition:opacity .15s}.loading-modal-close:hover{opacity:1}.loading-spinner{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.loading-spinner span{width:12px;height:12px;background:var(--gold-accent);border-radius:50%;animation:bounce 1.4s ease-in-out infinite}.loading-spinner span:nth-child(1){animation-delay:0s}.loading-spinner span:nth-child(2){animation-delay:.2s}.loading-spinner span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}.loading-status{color:var(--ivory-dark);font-size:14px}.welcome-banner{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:1001;justify-content:center;align-items:center;padding:20px}.welcome-banner.visible{display:flex}.welcome-content{background:var(--wood-panel),var(--wood-grain);background-color:var(--wood-medium);border:4px solid #2a1a0f;border-radius:12px;padding:30px 40px;max-width:550px;box-shadow:0 8px 32px #0009;position:relative}.welcome-content h2{color:var(--gold-accent);margin:0 0 16px;font-weight:400;letter-spacing:2px;text-align:center;font-variant:small-caps}.welcome-content .alpha-badge{display:inline-block;background:linear-gradient(180deg,#c07830,#a86428);color:#2a1a0f;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;margin-left:8px;vertical-align:middle;letter-spacing:1px}.welcome-content p{color:var(--ivory-dark);font-size:14px;line-height:1.6;margin:0 0 14px}.welcome-content ul{color:var(--ivory-dark);font-size:13px;line-height:1.7;margin:0 0 20px;padding-left:20px}.welcome-content li{margin-bottom:6px}.welcome-content strong{color:var(--gold-accent)}.welcome-content .highlight{background:#d4a85726;border-left:3px solid var(--gold-accent);padding:10px 14px;margin:16px 0;border-radius:0 6px 6px 0}.welcome-content .highlight p{margin:0;font-size:13px}.welcome-btn{display:block;width:100%;padding:12px 24px;background:var(--wood-button);background-color:var(--wood-light);border:2px solid #2a1a0f;border-radius:6px;color:var(--ivory);font-size:15px;font-weight:700;cursor:pointer;font-family:Georgia,serif;text-shadow:1px 1px 2px rgba(0,0,0,.5);box-shadow:inset 0 1px #fff3,0 2px 4px #0000004d;transition:all .15s}.welcome-btn:hover{background:linear-gradient(180deg,sienna,#8b5a2b 30%,#6b4423 70%,#5c3d2e)}.welcome-content .midi-note{font-size:12px;color:#a89070;margin-top:16px;padding-top:14px;border-top:1px solid rgba(212,168,87,.2)}.welcome-content code{background:#0000004d;padding:2px 6px;border-radius:3px;font-family:monospace;font-size:11px;color:var(--gold-accent)}.help-btn{background:none;border:1px solid var(--gold-dark);color:var(--gold-accent);width:28px;height:28px;border-radius:50%;font-size:14px;font-weight:700;cursor:pointer;font-family:Georgia,serif;transition:all .15s}.help-btn:hover{background:#d4a85733;border-color:var(--gold-accent)}.stops-grid{display:none}label{display:block;margin-bottom:6px;color:var(--gold-accent);font-size:13px;text-shadow:1px 1px 2px rgba(0,0,0,.4);letter-spacing:1px}select option{background:#3d2817;color:var(--ivory);padding:8px}