@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Outfit:wght@300;400;600&display=swap";:root{--bg-color:#050505;--neon-cyan:#00f3ff;--neon-magenta:#f0f;--text-color:#e0e0e0;--stave-color:#333;--segment-inactive:#0d0d0d}*{box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none;margin:0;padding:0}::-webkit-scrollbar{display:none}body{background-color:var(--bg-color);color:var(--text-color);background-image:linear-gradient(#000c,#000c),url(/bg.png);background-position:50%;background-size:cover;justify-content:center;align-items:flex-start;min-height:100vh;font-family:Outfit,sans-serif;display:flex;overflow:hidden auto}#root{width:100%}.vintage-overlay{pointer-events:none;z-index:10;background:radial-gradient(circle,#0000 30%,#0006 100%);width:100%;height:100%;position:fixed;top:0;left:0}.scanlines{pointer-events:none;z-index:11;background:linear-gradient(#12101000 50%,#0000001a 50%) 0 0/100% 2px,linear-gradient(90deg,#ff000008,#00ff0003,#0000ff08) 0 0/3px 100%;width:100%;height:100%;position:fixed;top:0;left:0}.app-container{z-index:1;flex-direction:column;justify-content:flex-start;align-items:center;gap:.5rem;width:100%;min-height:100vh;padding:.5rem;transition:justify-content 1s,align-items 1s;display:flex;overflow:visible}.zen-mode.app-container{justify-content:center!important;align-items:center!important}.clock-title{letter-spacing:.4rem;text-transform:uppercase;color:var(--neon-magenta);text-shadow:0 0 10px #ff00ff80;opacity:.8;margin:0;font-family:Orbitron,sans-serif;font-size:1.2rem;transition:opacity .8s,transform .8s}.top-controls,.controls{transition:opacity 1s,transform 1s,top 1s,bottom 1s}.ui-hidden{z-index:-1;opacity:0!important;pointer-events:none!important;position:absolute!important}.top-controls.ui-hidden{top:-100px}.controls.ui-hidden{bottom:-100px}.clock-title.ui-hidden{top:-50px}.main-symbol-container{z-index:5;justify-content:center;align-items:center;width:100%;max-width:calc(100vw - 350px);height:70vh;margin:auto;transition:all 1s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.zen-mode .main-symbol-container{margin:0;width:90vw!important;max-width:90vw!important;height:90vh!important}.zen-mode .multi-layout{gap:5vw!important;width:100%!important;height:100%!important}.cistercian-svg{width:auto;max-width:100%;height:100%;max-height:100%;transition:filter .3s}.glow-mode .cistercian-svg{filter:drop-shadow(0 0 2px #fffc)drop-shadow(0 0 8px #00f3ff99)drop-shadow(0 0 25px #00f3ff4d)}.stave{stroke:var(--neon-cyan);stroke-width:6px;stroke-linecap:butt;filter:drop-shadow(0 0 10px var(--neon-glow));opacity:.9;animation:4s ease-in-out infinite stavePulse}@keyframes stavePulse{0%,to{opacity:.8;filter:drop-shadow(0 0 8px var(--neon-glow))}50%{opacity:1;filter:drop-shadow(0 0 15px var(--neon-glow))}}.segment{stroke:var(--segment-inactive);stroke-width:6px;stroke-linecap:butt;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.segment.active{stroke:var(--neon-cyan);filter:drop-shadow(0 0 12px var(--neon-glow));stroke-dasharray:100;stroke-dashoffset:100px;animation:.5s ease-out forwards drawSegment}.segment.active-flicker{animation:.5s ease-out forwards drawSegment,4s infinite flicker}@keyframes drawSegment{to{stroke-dashoffset:0}}@keyframes flicker{0%,19.999%,22%,62.999%,64%,64.999%,70%,to{opacity:1;filter:drop-shadow(0 0 12px var(--neon-glow))}20%,21.999%,63%,63.999%,65%,69.999%{opacity:.4;filter:none}}.controls{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;flex-direction:row;gap:1.5rem;margin-top:.5rem;padding:.8rem 1.5rem;display:flex}@media (width<=1200px){.controls-side{margin-top:.5rem}}.control-item{flex-direction:column;align-items:center;gap:.5rem;display:flex}.control-label{text-transform:uppercase;color:#888;font-size:.7rem}.control-value{color:var(--neon-magenta);font-family:Orbitron,sans-serif;font-size:1rem}.top-controls{flex-direction:column;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.mode-selector,.format-selector{gap:1rem;display:flex}.multi-layout{justify-content:center;align-items:center;gap:2rem;flex-direction:row!important;width:90vw!important;height:70vh!important;display:flex!important}.symbol-group{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.5rem;min-width:0;height:100%;display:flex}.symbol-group .small-symbol{width:100%;max-width:300px;height:100%}.symbol-label{color:#666;text-transform:uppercase;letter-spacing:.2rem;margin-top:-1rem;font-family:Orbitron,sans-serif;font-size:.8rem}.mode-btn{color:#666;text-transform:uppercase;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;padding:.5rem 1.2rem;font-family:Orbitron,sans-serif;font-size:.7rem;transition:all .3s}.mode-btn.active{color:var(--neon-cyan);border-color:var(--neon-cyan);background:#00f3ff1a}.demo-controls{flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:400px;display:flex}.neon-input{color:var(--neon-magenta);text-align:center;background:#ffffff0d;border:1px solid #ff00ff4d;border-radius:12px;outline:none;width:180px;padding:.5rem;font-family:Orbitron,sans-serif;font-size:2.2rem;transition:all .3s}.neon-input:focus{border-color:var(--neon-magenta);background:#ff00ff1a}.neon-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.neon-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.neon-input[type=number]{appearance:none;-moz-appearance:textfield}.neon-slider{appearance:none;background:#1a1a1a;border:1px solid #ffffff0d;border-radius:5px;outline:none;width:100%;height:4px}.neon-slider::-webkit-slider-thumb{appearance:none;background:var(--neon-cyan);cursor:pointer;border:2px solid #fff;border-radius:50%;width:20px;height:20px}.neon-slider::-moz-range-thumb{background:var(--neon-cyan);cursor:pointer;width:20px;height:20px;box-shadow:0 0 15px var(--neon-glow);border:2px solid #fff;border-radius:50%}.info-section{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:left;z-index:100;background:#ffffff05;border:1px solid #ffffff0d;border-radius:24px;width:200px;padding:1.5rem;position:fixed;top:50%;right:2rem;transform:translateY(-50%)}.info-section h3{color:var(--neon-cyan);letter-spacing:.2rem;text-transform:uppercase;margin-bottom:1rem;font-family:Orbitron,sans-serif;font-size:.9rem}.quadrants-guide{flex-direction:column;gap:.8rem;margin-bottom:1rem;display:flex}.guide-item-btn{color:#aaa;cursor:pointer;background:0 0;border:none;border-radius:12px;align-items:center;gap:.8rem;width:100%;padding:.4rem;font-size:.8rem;transition:all .3s;display:flex}.guide-item-btn:hover{color:var(--neon-cyan);background:#ffffff0d}.guide-item-btn.active{color:var(--neon-cyan);background:#00f3ff1a}.guide-box{color:#000;border:1px solid #0000004d;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:25px;height:25px;font-size:.6rem;font-weight:700;display:flex}.guide-box.cyan{background:var(--neon-cyan)}.guide-box.magenta{background:var(--neon-magenta)}.glyph-reference-overlay{pointer-events:none;z-index:2000;background:0 0;width:100vw;height:100vh;position:fixed;top:0;left:0}.glyph-reference-modal{pointer-events:auto;-ms-overflow-style:none;scrollbar-width:none;background:#0a0a0af2;border:1px solid #ffffff1a;border-radius:40px;width:350px;max-height:80vh;padding:2rem;animation:.4s cubic-bezier(.175,.885,.32,1.275) slideInRight;position:fixed;top:50%;right:16rem;overflow-y:auto;transform:translateY(-50%)}.glyph-reference-modal::-webkit-scrollbar{display:none}@media (width<=900px){.info-section{width:90%;max-width:400px;margin:1rem auto;position:relative;top:auto;right:auto;transform:none}.glyph-reference-modal{width:90%!important;max-width:none!important;right:5%!important}}@media (width<=768px){.multi-layout{margin:2rem 0;flex-direction:column!important;gap:3rem!important;height:auto!important}.clock-title{letter-spacing:.2rem;margin-bottom:1rem;font-size:1.5rem}.main-symbol-container{flex:1;padding:0 5px;width:98vw!important;max-width:100vw!important;height:auto!important}.multi-layout{gap:1.5rem!important;width:100%!important}.symbol-group .small-symbol{max-width:95vw}.symbol-label{display:none}.control-value{font-size:2.2rem}.top-controls{flex-direction:column;gap:1rem;width:100%;padding:.5rem}.mode-selector,.format-selector{flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%;display:flex}.mode-btn{white-space:nowrap;flex:30%;min-width:70px;padding:.5rem .8rem;font-size:.75rem}.controls{flex-wrap:wrap;justify-content:center;gap:1.2rem;width:98%;padding:1rem}}.modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:.8rem;display:flex}.modal-header h4{color:var(--neon-cyan);text-transform:uppercase;font-family:Orbitron,sans-serif}.close-btn{color:#666;cursor:pointer;background:0 0;border:none;font-size:2rem}.glyph-grid{grid-template-columns:repeat(2,1fr);justify-items:center;gap:1rem;display:grid}.glyph-card{background:#ffffff05;border:1px solid #ffffff0d;border-radius:20px;flex-direction:column;align-items:center;gap:.5rem;width:100%;padding:.8rem;transition:all .3s;display:flex}.glyph-card:hover{border-color:var(--neon-cyan);background:#ffffff0d;transform:scale(1.05)}.small-svg-wrapper{justify-content:center;width:60px;height:90px;display:flex}.glyph-val{color:var(--neon-magenta);font-family:Orbitron,sans-serif;font-size:.8rem}.description{color:#777;font-size:.75rem;font-style:italic}