.notification-container[data-v-eb6bc579]{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.notification-container .notification-message[data-v-eb6bc579]{pointer-events:auto;position:relative;top:unset;right:unset;margin-bottom:10px}.notification-message[data-v-eb6bc579]{position:fixed;top:20px;right:20px;padding:var(--spacing-md);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);z-index:1000;min-width:280px;max-width:400px;font-weight:500;display:flex;align-items:center;justify-content:flex-start;text-align:left;animation:slide-in-eb6bc579 .3s ease-out forwards}.notification-message .notification-icon[data-v-eb6bc579]{margin-right:12px;display:flex;align-items:center;justify-content:center}.notification-message .notification-content[data-v-eb6bc579]{flex:1}.notification-message.success[data-v-eb6bc579]{background-color:#22c55ee6;color:#fff;border-left:4px solid rgb(22,163,74)}.notification-message.warning[data-v-eb6bc579]{background-color:#f59e0be6;color:#fff;border-left:4px solid rgb(217,119,6)}.notification-message.error[data-v-eb6bc579]{background-color:#ef4444e6;color:#fff;border-left:4px solid rgb(220,38,38)}@keyframes slide-in-eb6bc579{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.notification-fade-enter-active[data-v-eb6bc579]{animation:slide-in-eb6bc579 .3s ease-out}.notification-fade-leave-active[data-v-eb6bc579]{animation:slide-in-eb6bc579 .3s ease-out reverse}.upload-section[data-v-3e6602ed]{margin:var(--spacing-xl) auto;max-width:var(--content-max-width);padding:0 var(--spacing-md)}.upload-intro[data-v-3e6602ed]{text-align:center;margin-bottom:var(--spacing-xl)}.upload-intro h2[data-v-3e6602ed]{font-size:var(--font-size-2xl);font-weight:600;margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.upload-description[data-v-3e6602ed]{color:var(--text-secondary);font-size:var(--font-size-lg);max-width:600px;margin:0 auto;line-height:1.5}.drop-zone[data-v-3e6602ed]{width:100%;margin:var(--spacing-xl) auto;padding:var(--spacing-xl);border:2px dashed var(--border-color);border-radius:var(--border-radius-lg);background:var(--surface-primary);cursor:pointer;transition:all var(--transition-normal)}.drop-zone[data-v-3e6602ed]:hover,.drop-zone.dragover[data-v-3e6602ed]{border-color:var(--primary-color);border-style:solid;transform:translateY(-2px);box-shadow:var(--shadow-hover);background:var(--primary-transparent)}.drop-zone-content[data-v-3e6602ed]{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);text-align:center}.drop-zone-content svg[data-v-3e6602ed]{width:48px;height:48px;color:var(--primary-color);transition:transform var(--transition-normal)}.drop-zone:hover .drop-zone-content svg[data-v-3e6602ed]{transform:translateY(-5px)}.drop-zone-title[data-v-3e6602ed]{font-size:var(--font-size-lg);font-weight:500;color:var(--text-color);margin:0}.drop-zone-subtitle[data-v-3e6602ed]{color:var(--text-secondary);font-size:var(--font-size-md);margin:0}.drop-zone-format[data-v-3e6602ed]{color:var(--text-tertiary);font-size:var(--font-size-sm);font-family:var(--font-mono);margin:0}.drop-zone.uploading[data-v-3e6602ed]{pointer-events:none;opacity:.8;background:linear-gradient(145deg,var(--primary-transparent) 0%,var(--primary-shadow) 100%)}.drop-zone.uploading[data-v-3e6602ed]:after{content:"Uploading...";display:block;margin-top:var(--spacing-md);color:var(--primary-hover);font-weight:500}.drop-zone input[type=file][data-v-3e6602ed]{display:none}@media (max-width: 768px){.drop-zone[data-v-3e6602ed]{width:85%;padding:var(--spacing-lg)}.upload-intro h2[data-v-3e6602ed]{font-size:var(--font-size-xl)}.upload-description[data-v-3e6602ed]{font-size:var(--font-size-md)}}@media (max-width: 480px){.upload-section[data-v-3e6602ed]{padding:var(--spacing-sm)}.drop-zone[data-v-3e6602ed]{width:95%;padding:var(--spacing-md)}.drop-zone-title[data-v-3e6602ed]{font-size:var(--font-size-md)}.drop-zone-subtitle[data-v-3e6602ed],.drop-zone-format[data-v-3e6602ed]{font-size:var(--font-size-sm)}.drop-zone-content svg[data-v-3e6602ed]{width:40px;height:40px}}.upload-modal-overlay[data-v-3e6602ed]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--shadow-color);display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.upload-modal[data-v-3e6602ed]{background-color:var(--container-bg);border-radius:12px;box-shadow:0 8px 24px var(--shadow-color);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;padding:24px;animation:modal-appear-3e6602ed .3s ease-out}.modal-header[data-v-3e6602ed]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-header h2[data-v-3e6602ed]{margin:0;font-size:1.5rem;color:var(--text-primary)}.close-button[data-v-3e6602ed]{background:transparent;border:none;cursor:pointer;color:var(--text-secondary);transition:color .2s}.close-button[data-v-3e6602ed]:hover{color:var(--text-primary)}@keyframes modal-appear-3e6602ed{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tabs-library{width:100%;background:var(--surface-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-normal);position:relative;padding:var(--spacing-lg);padding-bottom:calc(var(--spacing-lg) * 3);display:flex;flex-direction:column;gap:var(--spacing-lg);box-sizing:border-box}.recent-files-list{display:grid;width:100%;position:relative;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);box-sizing:border-box}.no-files{text-align:center;color:var(--text-tertiary);padding:var(--spacing-xl);font-style:italic;width:100%;grid-column:1 / -1}.loading-state{text-align:center;padding:var(--spacing-xl);width:100%;grid-column:1 / -1}@media (max-width: 1023px){.tabs-library{max-width:100%;padding:var(--spacing-md);gap:var(--spacing-md)}.recent-files-list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md)}.no-files,.loading-state{padding:var(--spacing-lg)}}@media (max-width: 767px){.recent-files-list{grid-template-columns:1fr;gap:var(--spacing-md)}}@media (max-width: 479px){.tabs-library{padding:var(--spacing-sm);padding-bottom:calc(var(--spacing-lg) * 2);gap:var(--spacing-sm)}.recent-files-list{gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.no-files,.loading-state{padding:var(--spacing-md)}}.card-content{position:relative;display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-xl);transition:all var(--transition-normal)}.card-content:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.content-main{display:flex;flex-direction:column;gap:var(--spacing-sm)}.card-header{display:flex;flex-direction:column;gap:.25rem;padding:0;min-height:auto;position:relative;align-items:flex-start;padding-right:2.5rem}.piece-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin:0;line-height:1.3;letter-spacing:-.01em;transition:color .2s ease;text-align:left;padding-right:2rem}.arranger,.composer{font-size:.8rem;color:var(--text-secondary);display:inline-flex;align-items:center;gap:.35rem;margin:0;opacity:.85;font-weight:500;letter-spacing:.01em;transition:opacity .2s ease;text-align:left;margin-top:-.1rem;align-self:flex-start}.composer svg,.arranger svg{width:var(--icon-size-sm);height:var(--icon-size-sm);color:currentColor;opacity:.7}.favorite-btn{position:absolute;top:0;right:0;background:var(--surface-secondary);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2;opacity:0;color:var(--text-muted)}@media (hover: none) and (pointer: coarse){.favorite-btn{opacity:1;background:var(--surface-hover);box-shadow:0 2px 4px #0000001a}}.card-content:hover .favorite-btn{box-shadow:0 2px 4px #0000001a;opacity:1}.favorite-btn:hover{transform:scale(1.1);background:var(--surface-secondary);box-shadow:0 4px 8px #00000026}.favorite-btn.active{color:var(--primary-color);opacity:1;background:var(--surface-secondary)}.favorite-btn:hover:not(:disabled){transform:scale(1.1);box-shadow:0 4px 12px #0003}.favorite-btn:disabled{cursor:wait;opacity:.7}.favorite-btn.loading{animation:pulse 1.5s infinite}.favorite-btn.active:hover{color:var(--primary-color);background:var(--surface-secondary);transform:scale(1.1)}.card-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:100px;font-size:.7rem;font-weight:600;color:#fff;background:var(--surface-hover);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);max-height:2em}.badge svg{background:#fff;border-radius:50%;padding:2px;width:20px;height:20px;box-sizing:content-box;margin-left:-10px;border-width:2px;border-style:solid}.badge[data-difficulty="1"]{background:linear-gradient(135deg,var(--difficulty-easy-gradient-start),var(--difficulty-easy-gradient-end))}.badge[data-difficulty="1"] svg{color:var(--difficulty-easy-gradient-end);border:3px solid var(--difficulty-easy-gradient-start)}.badge[data-difficulty="2"]{background:linear-gradient(135deg,var(--difficulty-medium-gradient-start),var(--difficulty-medium-gradient-end))}.badge[data-difficulty="2"] svg{color:var(--difficulty-medium-gradient-end);border:3px solid var(--difficulty-medium-gradient-start)}.badge[data-difficulty="3"]{background:linear-gradient(135deg,var(--difficulty-hard-gradient-start),var(--difficulty-hard-gradient-end))}.badge[data-difficulty="3"] svg{color:var(--difficulty-hard-gradient-end);border:3px solid var(--difficulty-hard-gradient-start)}.badge svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.badge-text{text-shadow:0 1px 2px rgba(0,0,0,.1);letter-spacing:.5px}.card-actions{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-xs);z-index:2;cursor:pointer}@media (hover: none) and (pointer: coarse){.card-actions{opacity:1}}.hover-arrow{width:var(--icon-size-xl);height:var(--icon-size-xl);display:flex;align-items:center;justify-content:center;background:var(--primary-color);padding:var(--spacing-xs);color:var(--text-light);border-radius:var(--border-radius-full);opacity:0;transform:translate(var(--spacing-xs));transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}@media (hover: none) and (pointer: coarse){.hover-arrow{opacity:1;transform:translate(0)}}.card-content:hover .hover-arrow{opacity:1;transform:translate(0)}.library-header{display:flex;flex-direction:column;gap:var(--spacing-xl);padding:var(--spacing-lg);width:100%;box-sizing:border-box}.library-header h2{font-size:var(--font-size-2xl);color:var(--text-color);font-weight:600}.header-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-lg);width:100%}.search-field{flex:1;min-width:200px;display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);background:var(--surface-secondary)}.search-field input{border:none;background:none;outline:none;width:100%;color:var(--text-color)}.button-group{display:flex;gap:var(--spacing-md);align-items:center}.filters{display:flex;flex-direction:row;gap:var(--spacing-lg);width:100%;box-sizing:border-box}.category-filter,.difficulty-filter{display:flex;flex-direction:column;gap:var(--spacing-sm);flex:1;min-width:0}.filter-label{font-weight:500;color:var(--text-color);margin-bottom:var(--spacing-xs)}.category-slider,.difficulty-slider{display:flex;gap:var(--spacing-xs);padding:var(--spacing-xs);background:var(--surface-secondary);border-radius:var(--border-radius-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;width:100%;box-sizing:border-box}.button-group{display:flex;align-items:center;gap:var(--spacing-md)}.fav-filter-btn,.import-btn,.sort-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-xl);background:var(--surface-secondary);color:var(--text-color);border:none;cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.fav-filter-btn:hover,.import-btn:hover,.sort-btn:hover{background:var(--surface-tertiary)}.fav-filter-btn.active,.import-btn.active,.sort-btn.active{background:var(--primary-color);color:var(--text-on-primary)}.sort-buttons{display:flex;gap:var(--spacing-xs)}.search-field{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);background:var(--surface-secondary);color:var(--text-color);width:240px;transition:all var(--transition-normal)}.search-field:focus-within{border-color:var(--primary-color);background:var(--surface-hover);box-shadow:var(--shadow-sm)}.search-field svg{width:var(--icon-size-md);height:var(--icon-size-md);color:var(--text-color);opacity:.5;transition:all var(--transition-normal)}.search-field:focus-within svg{opacity:1;color:var(--primary-color)}.search-field input{border:none;background:none;outline:none;color:var(--text-color);font-size:var(--font-size-sm);width:100%}.search-field input::placeholder{color:var(--text-color);opacity:.5}.fav-filter-btn,.import-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);background:var(--surface-secondary);color:var(--text-color);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-normal)}.fav-filter-btn:hover,.import-btn:hover{background:var(--surface-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.fav-filter-btn.active,.import-btn.active{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.fav-filter-btn svg,.import-btn svg{width:var(--icon-size-md);height:var(--icon-size-md);color:inherit;opacity:.8;transition:opacity var(--transition-normal)}.fav-filter-btn:hover svg,.fav-filter-btn.active svg,.import-btn:hover svg,.import-btn.active svg{opacity:1}.sort-buttons{display:flex;gap:var(--spacing-sm)}.sort-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);background:var(--surface-secondary);color:var(--text-color);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-normal)}.sort-btn:hover{background:var(--surface-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.sort-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.sort-btn svg{color:inherit;opacity:.8;transition:opacity var(--transition-speed)}.sort-btn:hover svg,.sort-btn.active svg{opacity:1}.filters{display:flex;flex-direction:row;gap:var(--spacing-lg);align-items:flex-start}.slider-controls{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%}.slider-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.slider-label{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-2xs);font-weight:500}.category-slider,.difficulty-slider{display:flex;gap:0;padding:var(--spacing-xs);background:var(--surface-secondary);border-radius:var(--border-radius-xl);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;box-shadow:inset 0 1px 2px var(--shadow-color)}.category-slider::-webkit-scrollbar,.difficulty-slider::-webkit-scrollbar{display:none}.category-slider button,.difficulty-slider button,.category-level,.difficulty-level{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;background:none;color:var(--text-color);cursor:pointer;font-size:var(--font-size-sm);white-space:nowrap;transition:all var(--transition-normal);border-radius:var(--border-radius-xl);display:flex;align-items:center;gap:var(--spacing-xs)}.category-slider button:hover,.difficulty-slider button:hover{background:var(--surface-hover);color:var(--primary-color)}.category-slider button.active,.difficulty-slider button.active{background:var(--primary-color);color:var(--text-light)}.category-slider button svg,.difficulty-slider button svg,.category-level svg,.difficulty-level svg,.category-level i,.difficulty-level i{width:var(--icon-size-md);height:var(--icon-size-md);color:currentColor;pointer-events:none;transition:transform var(--transition-speed)}.category-slider button:hover svg,.difficulty-slider button:hover svg{transform:scale(1.1)}.category-slider button.active svg,.difficulty-slider button.active svg{transform:scale(1.1);color:var(--text-light)}.category-level,.difficulty-level{position:relative;z-index:1;flex:1}.category-level:hover,.difficulty-level:hover{background:var(--background-hover)}.category-level span,.difficulty-level span{color:var(--text-secondary);pointer-events:none}.category-level.active{background:var(--primary-color);color:var(--text-light)}.difficulty-level[data-difficulty="1"].active{background:var(--difficulty-easy-gradient-end);color:var(--text-light)}.difficulty-level[data-difficulty="2"].active{background:var(--difficulty-medium-gradient-end);color:var(--text-light)}.difficulty-level[data-difficulty="3"].active{background:var(--difficulty-hard-gradient-end);color:var(--text-light)}.category-level.active,.difficulty-level.active{font-weight:600;background:var(--primary-color);color:var(--text-light);box-shadow:0 1px 2px var(--shadow-color)}.category-level.active span,.difficulty-level.active span{color:var(--text-light)}.difficulty-level[data-difficulty="1"]{--difficulty-color: var(--difficulty-easy-gradient-end)}.difficulty-level[data-difficulty="2"]{--difficulty-color: var(--difficulty-medium-gradient-end)}.difficulty-level[data-difficulty="3"]{--difficulty-color: var(--difficulty-hard-gradient-end)}.difficulty-level[data-difficulty=all]{--difficulty-color: var(--primary-color)}.difficulty-level:not(.active):hover{background:color-mix(in srgb,var(--difficulty-color) 33%,transparent)}.category-level:not(.active):hover{background:color-mix(in srgb,var(--primary-color) 33%,transparent)}@media (max-width: 479px){.library-header{padding:var(--spacing-xs);gap:var(--spacing-lg)}.header-top{display:flex;flex-direction:column;gap:var(--spacing-lg);width:100%}.search-field{width:100%;max-width:none}.button-group{width:100%;display:grid;grid-template-rows:auto auto;gap:var(--spacing-md)}.fav-filter-btn,.import-btn{width:100%}.sort-buttons{width:100%;display:flex;justify-content:flex-start;gap:var(--spacing-md)}.filters{flex-direction:column;gap:var(--spacing-md)}.category-filter,.difficulty-filter{flex:none;width:100%}.category-slider,.difficulty-slider{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm);max-height:none;overflow-x:visible}.category-level,.difficulty-level{width:100%;justify-content:flex-start;padding:var(--spacing-xs) var(--spacing-sm)}}@media (min-width: 480px) and (max-width: 768px){.library-header{padding:var(--spacing-md);gap:var(--spacing-lg)}.filters{flex-direction:column}.category-filter,.difficulty-filter{flex:none;width:100%}.header-top{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%}.search-field{width:100%;max-width:none}.button-group{width:100%;display:grid;grid-template-rows:auto auto;gap:var(--spacing-md)}.fav-filter-btn,.import-btn{width:100%}.sort-buttons{width:100%;display:flex;justify-content:flex-start;gap:var(--spacing-md)}}@media (min-width: 769px) and (max-width: 1024px){.library-header{padding:var(--spacing-md);gap:var(--spacing-lg)}.filters{flex-direction:column}.category-filter,.difficulty-filter{flex:none;width:100%}.header-top{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.search-field{flex:1;min-width:200px;max-width:60%}.button-group{display:flex;align-items:center;gap:var(--spacing-md);justify-content:flex-end}}@media (min-width: 1025px){.library-header{padding:var(--spacing-lg);gap:var(--spacing-xl)}.library-header h2{flex:0 0 auto}.header-top{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--spacing-xl);flex-wrap:nowrap}.search-field{flex:2;max-width:300px}.button-group{flex:1;justify-content:flex-end;gap:var(--spacing-lg)}.filters{display:flex;flex-direction:row;gap:var(--spacing-xl);align-items:flex-start}.category-filter,.difficulty-filter{flex:1;display:flex;justify-content:center;gap:var(--spacing-sm)}.filter-label{margin-bottom:var(--spacing-sm)}}.pagination{position:absolute;bottom:var(--spacing-lg);right:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--container-bg);border-radius:var(--border-radius-lg);z-index:10;transform:translateY(50%)}@media (max-width: 768px){.pagination{padding:var(--spacing-xs);gap:var(--spacing-xs);right:50%;transform:translate(50%,50%)}.page-numbers{font-size:.9rem}.pagination button{padding:var(--spacing-xs)}.pagination button svg{width:16px;height:16px}}@media (max-width: 480px){.pagination{bottom:0;right:0;left:0;transform:none;border-radius:0;justify-content:center;width:100%}}.page-numbers{display:flex;gap:.5rem;align-items:center}.page-numbers .ellipsis{color:var(--text-color);opacity:.6;font-weight:700;padding:0 .25rem;-webkit-user-select:none;user-select:none}.page-btn,.page-number{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;border:none;background:var(--surface-secondary);color:var(--text-color);border-radius:var(--border-radius-lg);cursor:pointer;transition:all var(--transition-normal)}.page-btn:hover:not(:disabled),.page-number:hover:not(:disabled){background:var(--surface-hover);transform:translateY(-2px)}.page-number.active{background:var(--primary-color);color:#fff;font-weight:700}.page-btn:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-disabled)}.upload-features{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg);margin:var(--spacing-xl) auto;max-width:var(--content-max-width);padding:0 var(--spacing-md)}.feature-item{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--surface-primary);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);transition:all var(--transition-normal);position:relative;overflow:hidden;box-shadow:var(--shadow-default)}.feature-item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--primary-transparent) 0%,var(--primary-hover-transparent) 100%);opacity:0;transition:opacity var(--transition-normal)}.feature-item:hover{transform:translateY(-2px);border-color:var(--primary-color);background:var(--surface-hover);box-shadow:var(--shadow-hover)}.feature-item:hover:before{opacity:1}.feature-icon{width:var(--icon-size-lg);height:var(--icon-size-lg);color:var(--primary-color);flex-shrink:0;transition:transform var(--transition-normal)}.feature-item:hover .feature-icon{transform:scale(1.1)}.feature-text{flex:1}.feature-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-color);margin:0 0 var(--spacing-xs);transition:color var(--transition-normal)}.feature-item:hover .feature-title{color:var(--primary-color)}.feature-description{font-size:var(--font-size-md);color:var(--text-secondary);line-height:1.5;margin:0}@media (max-width: 768px){.upload-features{grid-template-columns:1fr;gap:var(--spacing-md);padding:0 var(--spacing-sm)}.feature-item{padding:var(--spacing-md)}.feature-title{font-size:var(--font-size-md)}.feature-description{font-size:var(--font-size-sm)}.feature-item i,.feature-item svg{width:var(--icon-size-md);height:var(--icon-size-md)}}:root{--orbit-size: clamp(300px, 60vh, 500px);--center-size: clamp(120px, 20vw, 180px);--item-size: clamp(50px, 8vw, 80px);--transition-duration: .6s;--transition-timing: cubic-bezier(.34, 1.56, .64, 1);--container-padding: clamp(1rem, 3vw, 2rem);--orbit-item-margin: clamp(-25px, -4vw, -40px);--stage-indicator-gap: clamp(6px, 1vw, 10px)}.heliocentric-container:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2}.heliocentric-container:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-size:100% 100px;z-index:-1}.heliocentric-container{position:relative;width:100%;height:100%;min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--container-padding);overflow:hidden;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-sizing:border-box}.center-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--center-size);height:var(--center-size);border-radius:50%;background-color:var(--surface-primary);box-shadow:0 10px 30px #00000026,0 5px 15px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(.8rem,2vw,1.5rem);z-index:10;transition:box-shadow .3s ease,background-color .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.5);will-change:transform;min-width:100px;min-height:100px}.center-circle h3{margin-bottom:clamp(.3rem,1vw,.5rem);font-size:clamp(.9rem,3vw,1.2rem);color:var(--text-primary);transition:all .3s ease;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis}.center-circle p{font-size:clamp(.75rem,2vw,.9rem);color:var(--text-secondary);transition:all .3s ease;min-height:1.2rem;line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis}.center-circle.call-to-action{cursor:pointer;transform:translate(-50%,-50%) scale(1);transition:transform .3s ease}.center-circle.call-to-action:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:var(--shadow-hover)}.orbit{position:absolute;width:var(--orbit-size);height:var(--orbit-size);border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes orbit-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-10deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}.orbit{animation:orbit-appear var(--transition-duration) var(--transition-timing);will-change:transform,opacity}.inner-orbit,.outer-orbit{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%)}.inner-orbit{width:300px;height:300px}.outer-orbit{width:500px;height:500px}.orbit-item{position:absolute;width:var(--item-size);height:var(--item-size);border-radius:50%;background-color:#ffffffe6;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .5s var(--transition-timing),box-shadow .3s ease,background-color .3s ease;box-shadow:var(--shadow-default);overflow:hidden;transform-origin:center;z-index:5;border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto;top:50%;left:50%;margin-top:calc(var(--item-size) / -2);margin-left:calc(var(--item-size) / -2);min-width:44px;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;will-change:transform}.orbit-item:hover{transform:scale(1.1) translateY(-5px);box-shadow:var(--shadow-hover);z-index:6}.orbit-item.selected{transform:scale(1.2);box-shadow:var(--shadow-elevated);z-index:7}@keyframes go-to-center{0%{transform:translate(0) scale(1.2)}50%{transform:translate(0) scale(.8)}to{transform:translate(0) scale(0)}}.orbit-item.moving-to-center{animation:go-to-center var(--transition-duration) var(--transition-timing) forwards}@keyframes from-center{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.orbit-item.from-center{animation:from-center var(--transition-duration) var(--transition-timing)}.category-abbreviation,.scale-abbreviation{font-size:clamp(.9rem,3vw,1.2rem);font-weight:600;color:var(--text-light);text-shadow:0 1px 2px rgba(0,0,0,.2);max-width:90%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scale-abbreviation{font-size:1.5rem;color:var(--text-light);text-shadow:-1px -1px 0 var(--shadow-helio-element),1px -1px 0 var(--shadow-helio-element),-1px 1px 0 var(--shadow-helio-element),1px 1px 0 var(--shadow-helio-element)}.import-icon,.favorites-icon{width:32px;height:32px;color:var(--text-light);filter:drop-shadow(-1px -1px 0 var(--shadow-helio-element)) drop-shadow(1px -1px 0 var(--shadow-helio-element)) drop-shadow(-1px 1px 0 var(--shadow-helio-element)) drop-shadow(1px 1px 0 var(--shadow-helio-element))}.orbit-item.import-category,.orbit-item.favorites-category{display:flex;align-items:center;justify-content:center}.center-circle.highlight{box-shadow:0 15px 35px #0003,0 8px 20px #00000026;transform:translate(-50%,-50%) scale(1.03)}.orbit-item-label{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);white-space:nowrap;font-size:.8rem;color:var(--text-primary);opacity:0;transition:opacity .3s ease}.orbit-item:hover .orbit-item-label{opacity:1}.back-button{position:absolute;top:clamp(10px,3vh,20px);left:clamp(10px,3vw,20px);width:clamp(40px,8vw,50px);height:clamp(40px,8vw,50px);border-radius:50%;background-color:var(--surface-primary);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;box-shadow:var(--shadow-default);transition:transform .3s ease,box-shadow .3s ease;min-width:44px;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.back-button:hover{background-color:var(--surface-hover);box-shadow:var(--shadow-hover)}.back-button svg{width:24px;height:24px;fill:var(--text-primary)}.stage-indicator{position:absolute;bottom:clamp(10px,3vh,20px);left:0;right:0;display:flex;justify-content:center;gap:var(--stage-indicator-gap);z-index:20;padding:5px}.stage-dot{width:clamp(8px,1.5vw,12px);height:clamp(8px,1.5vw,12px);border-radius:50%;background-color:var(--surface-disabled);transition:all .3s ease;min-width:8px;min-height:8px}.stage-dot.active{background-color:var(--primary-color);transform:scale(1.2)}.stage-dot.completed{background-color:var(--success-color)}@media (max-width: 768px){:root{--orbit-size: min(90vw, 450px);--center-size: 140px;--item-size: 60px}.heliocentric-container{padding:1rem}@media (max-height: 500px) and (orientation: landscape){:root{--orbit-size: min(80vw, 400px);--center-size: min(25vh, 120px);--item-size: min(10vh, 50px)}.heliocentric-container{min-height:90vh;padding:.5rem}.stage-indicator{bottom:5px}.back-button{top:5px;left:5px;width:36px;height:36px}.center-circle{padding:.8rem}.center-circle h3{margin-bottom:.2rem}.orbit{transform:translate(-50%,-50%) scale(.9)}}.orbit-item{transition:transform .4s var(--transition-timing),box-shadow .3s ease,background-color .3s ease}.back-button,.favorite-button,.close-button{padding:8px}@media (max-height: 650px){.orbit{transform:translate(-50%,-50%) scale(.95)}@media (max-width: 560px){.orbit{transform:translate(-50%,-50%) scale(.8)}:root{--orbit-size: min(75vw, 260px);--center-size: 80px;--item-size: 36px}}}@media (max-width: 360px){:root{--orbit-size: min(70vw, 240px);--center-size: 75px;--item-size: 34px}.center-circle{padding:.6rem}.center-circle h3{font-size:.9rem;margin-bottom:.2rem}.center-circle p{font-size:.7rem;line-height:1.1}.orbit-item[style*="var(--helio-category"]:hover{transform:translateY(-1px) scale(1.01);box-shadow:0 3px 10px var(--shadow-color)}.stage-indicator{gap:5px}.stage-dot{width:6px;height:6px}.back-button{width:36px;height:36px}}.orbit-item[style*="var(--helio-category"]:hover{transform:translateY(-3px) scale(1.03)}}@media (max-width: 560px){:root{--orbit-size: min(80vw, 280px);--center-size: 90px;--item-size: 40px}.orbit{transform:translate(-50%,-50%) scale(.85)}.center-circle h3{font-size:.85rem;margin-bottom:.2rem}.center-circle p{font-size:.7rem}}@media (max-width: 480px){:root{--orbit-size: min(75vw, 270px);--center-size: 85px;--item-size: 38px}.center-circle h3{font-size:.95rem;margin-bottom:.3rem}.center-circle p{font-size:.75rem;line-height:1.2}.orbit-item{transition:transform .3s ease,box-shadow .3s ease}.orbit-item[style*="var(--helio-category"]:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 5px 15px var(--shadow-color)}.back-button{top:10px;left:10px}.category-abbreviation,.scale-abbreviation{font-size:.85rem}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.stage-transition-enter-active,.stage-transition-leave-active{transition:opacity .5s ease,transform .5s ease;position:absolute;width:100%;height:100%;top:0;left:0}.stage-transition-enter-from{opacity:0;transform:scale(.9)}.stage-transition-leave-to{opacity:0;transform:scale(1.1)}@media (max-width: 768px){.stage-transition-enter-active,.stage-transition-leave-active{transition:opacity .4s ease,transform .4s ease}}@media (max-width: 480px){.stage-transition-enter-active,.stage-transition-leave-active{transition:opacity .3s ease,transform .3s ease}.stage-transition-enter-from{transform:scale(.95)}.stage-transition-leave-to{transform:scale(1.05)}}.stage-content{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.orbit-item[style*="var(--helio-category"]{--category-color: currentColor;--lighter-color: color-mix(in srgb, var(--category-color) 70%, white);--border-color: var(--category-color);--shadow-color: color-mix(in srgb, var(--category-color) 40%, transparent);background:linear-gradient(135deg,var(--lighter-color),var(--category-color));border-color:var(--border-color);color:var(--text-light);box-shadow:0 4px 15px var(--shadow-color);transition:transform .3s ease,box-shadow .3s ease,filter .3s ease}.orbit-item[style*="var(--helio-category-1)"]{--category-color: var(--helio-category-1)}.orbit-item[style*="var(--helio-category-2)"]{--category-color: var(--helio-category-2)}.orbit-item[style*="var(--helio-category-3)"]{--category-color: var(--helio-category-3)}.orbit-item[style*="var(--helio-category-4)"]{--category-color: var(--helio-category-4)}.orbit-item[style*="var(--helio-category-5)"]{--category-color: var(--helio-category-5)}.orbit-item[style*="var(--helio-category-6)"]{--category-color: var(--helio-category-6)}.orbit-item[style*="var(--helio-category-7)"]{--category-color: var(--helio-category-7)}.orbit-item[style*="var(--helio-category-8)"]{--category-color: var(--helio-category-8)}.orbit-item[style*="var(--helio-category-9)"]{--category-color: var(--helio-category-9)}.orbit-item[style*="var(--helio-category-10)"]{--category-color: var(--helio-category-10)}.orbit-item[style*="var(--helio-category"]:hover{transform:translateY(-5px) scale(1.05);filter:brightness(1.1);--shadow-color: color-mix(in srgb, var(--category-color) 60%, transparent);box-shadow:0 8px 20px var(--shadow-color)}.import-form{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem}.import-form:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:-1}.import-form{background-color:var(--surface-primary);width:min(90%,550px);max-height:min(90vh,700px);border-radius:20px;box-shadow:var(--shadow-default);border:1px solid var(--border-color);display:flex;flex-direction:column;animation:modal-appear .3s ease-out forwards;overflow:auto;position:relative}@keyframes modal-appear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.import-form h3{margin:0;padding:1.5rem 1.5rem 1rem;color:var(--text-color);font-size:1.5rem;font-weight:600;text-align:center;border-bottom:1px solid var(--border-color)}.import-form>:not(.close-button):not(h3){padding:0 1.5rem}.import-form .close-button{position:absolute;top:1rem;right:1rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface-secondary);border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;color:var(--text-light);transition:all .2s ease;z-index:2}.import-form .close-button:hover{background:var(--surface-hover);color:var(--text-light);transform:rotate(90deg)}.import-instructions-toggle{margin:.5rem 0;padding:.5rem 1rem;border-radius:8px;background-color:var(--surface-secondary);cursor:pointer;display:flex;align-items:center;transition:all .2s ease}.import-instructions-toggle:hover{background-color:var(--surface-hover)}.import-instructions-toggle h4{margin:0;font-size:.95rem;color:var(--text-color);display:flex;align-items:center;justify-content:space-between;width:100%}.toggle-icon{font-size:.8rem;margin-left:.5rem;transition:transform .2s ease}.import-instructions{margin:.5rem 0 1rem;padding:.75rem 1rem;border-radius:8px;border-left:3px solid var(--border-color);background-color:var(--surface-secondary);font-size:.9rem;max-height:200px;overflow-y:auto;animation:slideDown .3s ease;transform-origin:top}.import-instructions ul{margin:0;padding-left:1.25rem;color:var(--text-color-secondary);font-size:.9rem;line-height:1.5}.import-instructions li{margin-bottom:.5rem}.import-instructions li:last-child{margin-bottom:0}.import-instructions code{display:inline-block;padding:.15rem .4rem;background-color:var(--surface-active);border-radius:4px;font-family:monospace;color:var(--text-primary);font-size:.85rem}.import-form-group{margin-bottom:1.25rem}.import-form-group:last-of-type{margin-bottom:1.5rem}.import-form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-color);font-size:.95rem}.import-input,.import-textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background-color:var(--surface-secondary);color:var(--text-primary);font-family:inherit;font-size:.95rem;transition:all .2s ease;box-shadow:inset 0 1px 3px var(--shadow-color)}.import-textarea{resize:vertical;min-height:80px}.import-input:focus,.import-textarea:focus{outline:none;border-color:var(--border-focus);background-color:#fff;box-shadow:inset 0 1px 3px var(--shadow-color),0 0 0 3px var(--shadow-color)}.import-actions{display:flex;justify-content:flex-end;gap:.75rem;margin:1.5rem;padding-top:.5rem}.import-actions button{padding:.75rem 1.25rem;border-radius:8px;font-weight:500;font-size:.95rem;cursor:pointer;transition:all .2s ease;border:none}.import-actions .cancel-button{background-color:var(--surface-disabled);color:var(--text-color)}.import-actions .cancel-button:hover{background-color:var(--surface-hover)}.import-actions .import-button{background-color:var(--primary-color);color:var(--text-light);box-shadow:0 2px 5px var(--shadow-color)}.import-actions .import-button:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 8px var(--shadow-color)}.import-actions .import-button:disabled{background-color:var(--surface-disabled);color:var(--text-muted);transform:none;box-shadow:none;cursor:not-allowed}@keyframes slideDown{0%{opacity:0;transform:scaleY(0);max-height:0}to{opacity:1;transform:scaleY(1);max-height:200px}}@media (max-width: 768px){.import-form{width:95%;max-height:95vh}.import-form h3{padding:1.25rem 1rem .75rem;font-size:1.3rem}.import-form>:not(.close-button):not(h3){padding:0 1rem}.import-actions{margin:1.25rem 1rem}.import-instructions{padding:.75rem}.import-instructions h4{font-size:.95rem}.import-instructions ul{font-size:.85rem;padding-left:1rem}.import-form-group label{font-size:.9rem}.import-input,.import-textarea{padding:.6rem .8rem;font-size:.9rem}}@media (max-width: 480px){.import-form{width:100%;border-radius:15px}.import-form h3{font-size:1.2rem}.import-actions{flex-direction:column-reverse;gap:.5rem;margin:1rem}.import-actions button{width:100%;padding:.8rem 1rem}.import-form .close-button{top:.75rem;right:.75rem;width:28px;height:28px;font-size:1rem}}.handpan-display{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;width:100%;min-height:0;height:0;overflow:hidden;display:flex;justify-content:center;align-items:center;margin-bottom:0}.handpan-display.visible{opacity:1;transform:translateY(0);pointer-events:all;min-height:600px;height:auto;position:relative;overflow:visible;margin-bottom:2rem}.handpan-display-content{background-color:var(--surface-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-elevated);border:1px solid var(--border-color);padding:var(--spacing-xl);width:90%;max-width:800px;display:flex;flex-direction:column;gap:var(--spacing-xl)}.handpan-header{text-align:center}.handpan-header h2{margin:0 0 var(--spacing-md);font-size:var(--font-size-2xl);color:var(--primary-color)}.handpan-meta{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.category-badge,.ding-badge,.notes-badge{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-full)}.category-badge{color:var(--text-light)}.ding-badge,.notes-badge{background-color:var(--surface-secondary);color:var(--text-color)}.favorite-button{background:none;border:none;cursor:pointer;color:var(--text-tertiary);transition:color var(--transition-default);padding:var(--spacing-sm)}.favorite-button.active{color:var(--helio-category-9)}.handpan-visualization{display:flex;justify-content:center;align-items:center;height:350px;position:relative;margin:var(--spacing-md) 0}.handpan-circle{width:300px;height:300px;border-radius:50%;background-color:var(--surface-secondary);position:relative;display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow-default)}.ding-note{width:80px;height:80px;border-radius:50%;background-color:var(--primary-color);color:var(--text-light);display:flex;justify-content:center;align-items:center;font-size:var(--font-size-xl);font-weight:700;box-shadow:var(--shadow-default)}.note-item{position:absolute;width:60px;height:60px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow-default);transition:transform var(--transition-default),box-shadow var(--transition-default)}.note-item:hover{transform:scale(1.1)!important;box-shadow:var(--shadow-hover);z-index:2}.note-name{font-weight:700;font-size:var(--font-size-lg)}.note-position{font-size:var(--font-size-xs);opacity:.8}.handpan-actions{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-md)}.action-button{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-full);border:none;font-weight:600;cursor:pointer;transition:all var(--transition-default)}.action-button.primary{background-color:var(--primary-color);color:var(--text-light)}.action-button.secondary{background-color:var(--surface-secondary);color:var(--text-color)}.action-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px var(--shadow-color)}@media (max-width: 768px){.handpan-display-content{padding:var(--spacing-lg);gap:var(--spacing-lg)}.handpan-header h2{font-size:var(--font-size-xl)}.handpan-circle{width:250px;height:250px}.ding-note{width:60px;height:60px;font-size:1.2rem}.note-item{width:50px;height:50px}}@media (max-width: 480px){.handpan-display-content{padding:var(--spacing-md);gap:var(--spacing-md)}.handpan-meta{gap:var(--spacing-sm)}.category-badge,.ding-badge,.notes-badge{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.handpan-circle{width:200px;height:200px}.ding-note{width:50px;height:50px;font-size:1rem}.note-item{width:40px;height:40px}.note-name{font-size:var(--font-size-md)}.note-position{font-size:var(--font-size-xs)}}.handpan-visualization{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--spacing-xl);margin:var(--spacing-xl) 0}.handpan-container{display:flex;flex-direction:column;align-items:center;position:relative;max-width:350px;width:100%}.view-label{margin-bottom:var(--spacing-md);color:var(--text-primary);font-size:var(--font-size-lg);font-weight:600}.handpan-instrument{width:400px;height:400px;position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer}.handpan-shell{width:350px;height:350px;border-radius:50%;position:relative;display:flex;justify-content:center;align-items:center;overflow:visible;transition:transform .3s ease,box-shadow .3s ease}.handpan-top-shell{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--primary-color),white 60%),color-mix(in srgb,var(--primary-color),black 20%));box-shadow:0 10px 25px #0003,inset 0 -5px 10px #0003,inset 0 5px 10px #fff6;z-index:1}.handpan-bottom-shell{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--primary-color),white 50%),color-mix(in srgb,var(--primary-color),black 30%));box-shadow:0 10px 25px #0003,inset 0 -5px 10px #0000004d,inset 0 5px 10px #ffffff4d;z-index:1}.handpan-shell:hover{transform:translateY(-5px);box-shadow:0 15px 30px #0003,inset 0 -5px 10px #0003,inset 0 5px 10px #fff6}.metal-texture{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 80%,rgba(0,0,0,.1) 100%),linear-gradient(45deg,transparent 48%,rgba(255,255,255,.05) 50%,transparent 52%),linear-gradient(-45deg,transparent 48%,rgba(255,255,255,.05) 50%,transparent 52%);background-size:100% 100%,10px 10px,10px 10px;opacity:.4;z-index:2}.light-reflection{position:absolute;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);pointer-events:none;z-index:3}.reflection-1{width:120px;height:80px;top:35px;left:35px;transform:rotate(25deg);opacity:.4}.reflection-2{width:60px;height:40px;bottom:70px;right:40px;transform:rotate(-15deg);opacity:.3}.ding-note{width:100px;height:80px;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--primary-color),black 15%),color-mix(in srgb,var(--primary-color),white 5%));color:var(--text-light);display:flex;justify-content:center;align-items:center;font-size:var(--font-size-xl);font-weight:700;position:relative;z-index:5;cursor:pointer;transition:box-shadow .2s ease,opacity .2s ease}.ding-note:before{content:"";position:absolute;width:50px;height:35px;border-radius:50%;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--primary-color),white 60%),color-mix(in srgb,var(--primary-color),white 20%));box-shadow:inset 1px 1px 3px #ffffff80,inset -1px -1px 3px #0003,0 1px 2px #0000001a;z-index:6}.ding-note .note-name{text-shadow:0 1px 2px rgba(0,0,0,.5)}@media (max-width: 768px){.ding-note{width:80px;height:65px;font-size:var(--font-size-lg)}.ding-note:before{width:30px;height:30px}}@media (max-width: 480px){.ding-note{width:70px;height:55px;font-size:var(--font-size-md)}.ding-note:before{width:25px;height:25px}}.gu-port{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at center,color-mix(in srgb,var(--primary-color),black 50%),color-mix(in srgb,var(--primary-color),black 70%));position:relative;z-index:5;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:transform .2s ease,box-shadow .2s ease;box-shadow:inset 0 2px 5px #00000080,0 0 10px #0000004d}.gu-inner{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at center,#000000b3,#000000e6);box-shadow:inset 0 0 10px #000c}.gu-port:hover{transform:scale(1.05)}.gu-port:active{transform:scale(.95)}.note{position:absolute;display:flex;justify-content:center;align-items:center;transition:all .2s ease;cursor:pointer;z-index:5}.tone-field{width:70px;height:55px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--primary-color),black 15%),color-mix(in srgb,var(--primary-color),white 5%));color:var(--text-light);border-radius:50%;display:flex;justify-content:center;align-items:center;transition:box-shadow .2s ease,opacity .2s ease;position:relative}.tone-field:before{content:"";position:absolute;width:32px;height:25px;border-radius:50%;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--primary-color),black 20%),color-mix(in srgb,var(--primary-color),black 40%));box-shadow:inset -1px -1px 3px #fff3,inset 2px 2px 5px #0000004d;z-index:6}.note.active{transform:scale(.9)!important;box-shadow:inset 0 0 10px #ffffff80,inset 0 0 10px #0000004d,0 0 15px #ffffff80!important;opacity:.9}.note:hover{transform:scale(1.1);z-index:10}.ding-note:hover{transform:none;box-shadow:inset 2px 2px 5px #fff6,inset -2px -2px 5px #0000004d,0 3px 7px #0000004d}.note-content{display:flex;flex-direction:column;align-items:center;color:var(--text-light)}.note-name{font-weight:700;font-size:var(--font-size-md);text-shadow:0 1px 2px rgba(0,0,0,.5);position:relative;z-index:10}@media (max-width: 768px){.handpan-visualization{gap:var(--spacing-lg)}.handpan-instrument{width:280px;height:280px}.handpan-shell{width:260px;height:260px}.gu-port{width:60px;height:60px}.gu-inner{width:40px;height:40px}.tone-field{width:60px;height:45px}.tone-field:before{width:20px;height:20px}.note-name{font-size:var(--font-size-sm)}}@media (max-width: 480px){.handpan-visualization{gap:var(--spacing-md)}.handpan-instrument{width:240px;height:240px}.handpan-shell{width:220px;height:220px}.gu-port{width:50px;height:50px}.gu-inner{width:35px;height:35px}.tone-field{width:50px;height:35px}.tone-field:before{width:18px;height:18px}}[data-theme=dark] .handpan-top-shell{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--primary-color),#2a2a2a 40%),color-mix(in srgb,var(--primary-color),black 60%))}[data-theme=dark] .handpan-bottom-shell{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--primary-color),#2a2a2a 30%),color-mix(in srgb,var(--primary-color),black 70%))}[data-theme=dark] .light-reflection{opacity:.25}[data-theme=dark] .metal-texture{opacity:.3;background:radial-gradient(circle at 50% 50%,transparent 80%,rgba(0,0,0,.3) 100%),linear-gradient(45deg,transparent 48%,rgba(255,255,255,.03) 50%,transparent 52%),linear-gradient(-45deg,transparent 48%,rgba(255,255,255,.03) 50%,transparent 52%)}.home{display:flex;flex-direction:column;gap:var(--spacing-xl);width:100%;max-width:var(--content-max-width);margin:0 auto;padding:var(--spacing-lg);overflow:hidden}.handpan-scale-section{width:100%;margin-bottom:var(--spacing-xl);padding:var(--spacing-md);background-color:var(--surface-secondary);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-default);transition:all var(--transition-normal);position:relative;overflow:hidden;min-height:620px}.handpan-scale-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,rgba(var(--primary-rgb),.05) 0%,transparent 70%);z-index:0}.handpan-scale-section>*{position:relative;z-index:1}.home-content{display:grid;gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.home-section{background:var(--surface-primary);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-default);transition:all var(--transition-normal)}.home-section:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.home-section-title{font-size:var(--font-size-xl);font-weight:600;color:var(--text-color);margin-bottom:var(--spacing-md)}@media (max-width: 768px){.home{padding:var(--spacing-md)}}@media (max-width: 480px){.home{padding:var(--spacing-sm)}.home-section{padding:var(--spacing-md)}}.handpan-scale-section{position:relative;min-height:600px}.hidden{opacity:0;pointer-events:none;transition:opacity .5s ease}:root{--primary-color: #185964;--primary-light: #60a5fa;--primary-dark: #103E4B;--primary-hover: #216B78;--primary-transparent: rgba(24, 89, 100, .1);--accent-color: #10b981;--accent-light: #34d399;--accent-dark: #059669;--difficulty-easy: #4ade80;--difficulty-easy-gradient-start: #22c55e;--difficulty-easy-gradient-end: #16a34a;--difficulty-medium: #fbbf24;--difficulty-medium-gradient-start: #f59e0b;--difficulty-medium-gradient-end: #d97706;--difficulty-hard: #f87171;--difficulty-hard-gradient-start: #ef4444;--difficulty-hard-gradient-end: #dc2626;--status-warning: #f97316;--status-error: #dc2626;--status-info: #2563eb;--status-success: #059669;--text-color: #2c3e50;--text-light: #ffffff;--text-muted: #666666;--text-primary: #185964;--text-secondary: #666666;--text-tertiary: #94a3b8;--surface-primary: #ffffff;--surface-secondary: #f8fafc;--surface-hover: #f1f5f9;--surface-active: #e2e8f0;--surface-disabled: #cbd5e1;--border-color: #e2e8f0;--border-hover: #cbd5e1;--border-focus: #60a5fa;--background-color: #f4f4f9;--container-bg: #ffffff;--shadow-default: 0 4px 6px rgba(0, 0, 0, .1);--shadow-hover: 0 8px 15px rgba(0, 0, 0, .15);--shadow-elevated: 0 10px 25px rgba(0, 0, 0, .2);--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px;--helio-category-1: #FF6B6B;--helio-category-2: #FF85A1;--helio-category-3: #BA7CF9;--helio-category-4: #7B68EE;--helio-category-5: #5DA9E9;--helio-category-6: #66E0E0;--helio-category-7: #6BD490;--helio-category-8: #FFD166;--helio-category-9: #FF9A3C;--helio-category-10: #98D8C8;--background-hover: #e9ecef;--background-light-transparent: rgba(255, 255, 255, .05);--background-hover-light: rgba(255, 255, 255, .15);--shadow-color: rgba(0, 0, 0, .1);--shadow-text: rgba(16, 34, 51, .33);--shadow-helio-element: rgba(34, 34, 34, .2);--shadow-default: 0 2px 10px var(--shadow-color);--shadow-hover: 0 4px 20px rgba(0, 0, 0, .15);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--border-radius-sm: .25rem;--border-radius-md: .375rem;--border-radius-lg: .5rem;--border-radius-xl: 1rem;--border-radius-full: 9999px;--card-radius: var(--border-radius-lg);--font-primary: Arial, sans-serif;--font-display: "Dancing Script", cursive;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--transition-default: .3s ease-in-out;--transition-fast: .15s;--transition-normal: .3s;--transition-slow: .5s;--step-transition: .3s cubic-bezier(.4, 0, .2, 1);--step-timing: .15s ease-in-out;--step-delay: 75ms;--content-max-width: 1200px;--mobile: 480px;--tablet: 768px;--desktop: 1024px;--z-modal: 1000;--z-overlay: 900;--z-dropdown: 800;--z-header: 700;--z-footer: 600;--header-height: 80px;--container-padding: 2rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05)}[data-theme=dark]{--primary-color: #60a5fa;--primary-light: #93c5fd;--primary-dark: #2563eb;--primary-hover: #3b82f6;--primary-transparent: rgba(96, 165, 250, .1);--accent-color: #34d399;--accent-light: #6ee7b7;--accent-dark: #059669;--text-color: #f1f5f9;--text-light: #ffffff;--text-muted: #94a3b8;--text-primary: #60a5fa;--text-secondary: #94a3b8;--background-color: #0f172a;--container-bg: #1e293b;--background-hover: #334155;--background-light-transparent: rgba(255, 255, 255, .03);--background-hover-light: rgba(255, 255, 255, .07);--surface-primary: #1e293b;--surface-secondary: #334155;--surface-hover: #475569;--surface-active: #64748b;--surface-disabled: #475569;--border-color: #334155;--border-hover: #475569;--border-focus: #3b82f6;--shadow-color: rgba(0, 0, 0, .3);--shadow-text: rgba(0, 0, 0, .5);--shadow-default: 0 2px 10px rgba(0, 0, 0, .3);--shadow-hover: 0 4px 20px rgba(0, 0, 0, .4);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .1);--difficulty-easy: #4ade80;--difficulty-easy-gradient-start: #22c55e;--difficulty-easy-gradient-end: #16a34a;--difficulty-medium: #fbbf24;--difficulty-medium-gradient-start: #f59e0b;--difficulty-medium-gradient-end: #d97706;--difficulty-hard: #f87171;--difficulty-hard-gradient-start: #ef4444;--difficulty-hard-gradient-end: #dc2626;--status-warning: #f97316;--status-error: #dc2626;--status-info: #60a5fa;--status-success: #34d399}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}img{max-width:100%;height:auto;display:block}button{border:none;background:none;cursor:pointer;font:inherit;color:inherit}a{text-decoration:none;color:inherit}input,textarea{font:inherit;border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:var(--spacing-sm) var(--spacing-md)}input:focus,textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 2px var(--primary-transparent)}body{font-family:var(--font-primary);font-size:var(--font-size-md);line-height:1.6;color:var(--text-color)}h1,h2,h3,h4,h5,h6{color:var(--text-color);margin:0;font-weight:600;line-height:1.2}h1{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-lg)}h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md)}h3{font-size:var(--font-size-lg);margin-bottom:var(--spacing-sm)}.header-title h1{font-family:Dancing Script,cursive;font-size:60px;font-weight:700;color:var(--primary-color);margin:-.1em 0 0;letter-spacing:0;text-shadow:2px 2px 4px rgba(16,34,51,.33);transition:transform .3s ease-in-out,color .3s ease-in-out;line-height:1}.header-title h2{font-size:var(--font-size-md);font-weight:500;margin:0;color:var(--text-secondary);opacity:.9;transition:all var(--transition-normal)}.title{font-family:var(--font-display);font-size:var(--font-size-2xl);color:var(--primary-color);text-align:center;margin:0;letter-spacing:-.02em;text-shadow:2px 2px 4px var(--shadow-text);transition:transform var(--transition-default),color var(--transition-default)}.sub-title{font-size:var(--font-size-md);color:var(--text-muted);margin-top:var(--spacing-xs);text-align:center}.copyright{font-size:.9rem;color:var(--text-color);opacity:.8}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-light{color:var(--text-light)}@media (max-width: var(--mobile)){h1{font-size:var(--font-size-xl)}h2{font-size:var(--font-size-lg)}h3{font-size:var(--font-size-md)}.title{font-size:var(--font-size-xl)}.sub-title{font-size:var(--font-size-sm)}}@keyframes blink{0%{opacity:1}50%{opacity:.1}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(.95);opacity:.7}to{transform:scale(1);opacity:1}}.animate-blink{animation:blink var(--transition-normal) infinite}.animate-fade-in{animation:fadeIn var(--transition-normal)}.animate-slide-in{animation:slideIn var(--transition-normal)}.transition-default{transition:all var(--transition-default)}.transition-transform{transition:transform var(--transition-default)}.hover-scale:hover{transform:scale(1.05)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-column{display:flex;flex-direction:column}.flex-gap-sm{gap:var(--spacing-sm)}.flex-gap-md{gap:var(--spacing-md)}.flex-gap-lg{gap:var(--spacing-lg)}.transition-all{transition:all var(--transition-normal)}.transition-transform{transition:transform var(--transition-normal)}.transition-colors{transition:color var(--transition-normal),background-color var(--transition-normal),border-color var(--transition-normal)}.hover-highlight:hover{background:var(--surface-hover);border-color:var(--primary-color)}.hover-scale{transition:transform var(--transition-normal)}.hover-scale:hover{transform:scale(1.1)}.gradient-overlay{position:relative;overflow:hidden}.gradient-overlay:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--primary-transparent) 0%,var(--primary-hover-transparent) 100%);opacity:0;transition:opacity var(--transition-normal)}.gradient-overlay:hover:before{opacity:1}.blur-backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.btn-base{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-md);background:var(--surface-secondary);color:var(--text-color);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-normal)}.btn-base:hover{background:var(--surface-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-primary{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.btn-primary:hover{background:var(--primary-hover)}.card-base{background:var(--surface-primary);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);padding:var(--spacing-lg);transition:all var(--transition-normal)}.card-hover:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.text-gradient{background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-base{display:flex;align-items:center;justify-content:center;width:var(--icon-size-md);height:var(--icon-size-md);color:var(--text-color);transition:all var(--transition-normal)}.icon-hover:hover{transform:scale(1.1);color:var(--primary-color)}.icon-lg{width:var(--icon-size-lg);height:var(--icon-size-lg)}@media (max-width: 768px){.hide-mobile{display:none}}.show-mobile{display:none}@media (max-width: 768px){.show-mobile{display:block}}.transition-base{transition:all var(--transition-normal)}.hover-lift{transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.container-base{width:100%;margin:0 auto}.container{width:100%;margin:0 auto;transition:all var(--transition-normal);background-color:var(--container-bg);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-default);max-width:var(--content-max-width);overflow:hidden}.container-centered{text-align:center;display:flex;flex-direction:column;align-items:center}.card-base{width:100%;margin:0 auto;transition:all var(--transition-normal);background:var(--surface-primary);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);padding:var(--spacing-lg)}.card{width:100%;margin:0 auto;transition:transform var(--transition-normal),box-shadow var(--transition-normal);background:var(--surface-primary);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);padding:var(--spacing-lg)}.card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.section{width:100%;margin:var(--spacing-xl) auto;padding:0 var(--spacing-md)}.section-title{font-size:var(--font-size-2xl);font-weight:600;color:var(--text-color);margin-bottom:var(--spacing-lg);text-align:center}.grid{display:grid;gap:var(--spacing-lg);width:100%}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.content{width:100%;margin:0 auto;max-width:var(--content-max-width);padding:var(--spacing-lg)}.main-content{width:100%;margin:0 auto;transition:transform var(--transition-normal),box-shadow var(--transition-normal);background:var(--surface-primary);border-radius:var(--border-radius-xl);border:1px solid var(--border-color);padding:var(--spacing-lg);max-width:var(--content-max-width);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 768px){.container,.content{padding:var(--spacing-md)}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.container,.content{padding:var(--spacing-sm)}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.section-title{font-size:var(--font-size-xl)}}.grid-3{grid-template-columns:repeat(3,1fr)}@media (max-width: 768px){.container{padding:var(--spacing-md)}.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.container{padding:var(--spacing-sm)}.grid-2,.grid-3{grid-template-columns:1fr}}@media (max-width: 768px){:root{--header-height: 100px}}@media (max-width: 480px){:root{--header-height: 80px;--container-padding: 1rem}}.app-wrapper{min-height:100vh;display:flex;flex-direction:column;background-color:var(--background-color);color:var(--text-color)}.app-main{flex:1;width:100%;max-width:var(--content-max-width);margin:0 auto;position:relative;z-index:var(--z-base)}.app-header{position:relative;z-index:var(--z-header)}.header-content{display:flex;justify-content:center;align-items:center;max-width:var(--content-max-width);margin:0 auto;width:100%;padding:0 var(--spacing-lg);min-height:var(--header-height);position:relative}@media (max-width: 480px){.header-content{padding:.5rem 0}}.header-title{display:flex;flex-direction:column;gap:var(--spacing-2xs);text-align:center}.title{font-size:48px}.sub-title{font-size:small}@media (max-width: 480px){.title{font-size:36px}}.logo-link{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-sm);border-radius:var(--border-radius-lg);transition:all var(--transition-normal);text-align:center}.logo{width:var(--logo-width);height:auto;filter:drop-shadow(0 4px 6px var(--shadow-color));transition:transform var(--transition-normal);margin:0}@media (max-width: 768px){.logo-link{width:250px;gap:1rem}.logo{width:80px;height:80px}}@media (max-width: 480px){.logo-link{width:200px;padding:.5rem}.logo{width:60px;height:60px}}.theme-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface-primary);border:1px solid var(--border-color);border-radius:50%;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-sm);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:var(--z-dropdown);position:fixed;top:var(--spacing-md);right:var(--spacing-lg);padding:0}.theme-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-hover);border-color:var(--primary-color);background:var(--surface-hover)}.theme-toggle:active{background:var(--surface-active);transform:translateY(0)}@media (max-width: 480px){.theme-toggle{width:32px;height:32px;top:var(--spacing-sm);right:var(--spacing-md)}}.app-footer{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:var(--spacing-lg) var(--spacing-md);position:relative;z-index:var(--z-footer)}.footer-content{max-width:var(--content-max-width);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);font-size:var(--font-size-sm)}.footer-links{display:flex;align-items:center;justify-content:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-xs)}.github-link{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--text-color);text-decoration:none;font-weight:500;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md);background:var(--background-light-transparent);transition:all var(--transition-normal)}.github-link:hover{background:var(--background-hover-light);transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--primary-color)}.github-icon{width:var(--spacing-lg);height:var(--spacing-lg);color:var(--text-color)}@media (max-width: 480px){.footer-content{font-size:.8rem}}@media (hover: hover){.logo-link:hover .header-title h1{transform:translateY(-1px);color:var(--primary-hover);background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.logo-link:hover .header-title h2{opacity:1;color:var(--text-color)}.logo-link:hover .logo{transform:scale(1.05) rotate(-2deg)}}.copyright{color:var(--text-secondary);margin:0}.notation-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:vargba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--surface-primary);padding:2rem;border-radius:var(--border-radius-md);width:90%;max-width:500px;box-shadow:var(--shadow-elevated);border:1px solid var(--border-color)}.modal-content h3{margin-top:0;color:var(--primary-color)}.notation-text{background-color:var(--surface-secondary);padding:1rem;border-radius:var(--border-radius-sm);font-family:monospace;font-size:1.2rem;word-break:break-all;margin:1rem 0;color:var(--text-color);border:1px solid var(--border-color)}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem}.copy-button,.close-button{padding:.5rem 1rem;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s;font-weight:500}.copy-button{background-color:var(--primary-color);color:var(--text-light);border:none}.copy-button:hover{background-color:var(--primary-hover);box-shadow:var(--shadow-hover)}.close-button{background-color:var(--surface-secondary);border:1px solid var(--border-color);color:var(--text-color)}.close-button:hover{background-color:var(--surface-hover);border-color:var(--border-hover)}.notes-badge{position:relative;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.note-count{color:var(--text-color);margin-left:.5rem}.info-button{background:none;border:none;cursor:pointer;color:var(--primary-color);padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s,color .2s}.info-button:hover{transform:scale(1.1);color:var(--primary-hover)}