.example-main{min-height:calc(100vh - 160px);background:linear-gradient(180deg,#0a0a0a,#1a1a2e 50%,#16213e);color:#fff;padding-top:0;padding-bottom:60px;display:flex;flex-direction:column;align-items:center}.example-title{font-size:32px;font-weight:600;background:linear-gradient(135deg,#dd4a9a,#4090ce);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.example-subtitle{color:hsla(0,0%,100%,.6);margin-bottom:30px}.example-canvas{border:2px solid rgba(221,74,154,.3);border-radius:12px;margin-bottom:30px;background:linear-gradient(135deg,#0a0a1a,#16213e 50%,#1a1a2e)}.example-canvas,.example-canvas-circle{box-shadow:0 8px 32px rgba(221,74,154,.15);overflow:hidden}.example-canvas-circle{border:2px solid rgba(221,74,154,.3);border-radius:50%;margin:0 auto 30px;background:radial-gradient(circle,#0a0a1a 0,#16213e 100%);position:relative;transition:box-shadow .3s ease}.example-canvas-circle.active{box-shadow:0 8px 60px rgba(64,144,206,.4)}.example-canvas canvas,.example-canvas-circle canvas{width:100%;height:100%}.example-section-header{color:#dd4a9a;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.example-btn{padding:12px 16px;font-size:14px;font-weight:500;border:none;border-radius:8px;background:#dd4a9a;color:#fff;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px rgba(221,74,154,.3)}.example-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.example-btn-secondary{padding:12px 16px;font-size:14px;font-weight:500;border:1px solid rgba(64,144,206,.3);border-radius:8px;background:rgba(64,144,206,.2);color:#fff;cursor:pointer;transition:all .2s}.example-btn-secondary:hover{background:rgba(64,144,206,.3);border-color:rgba(64,144,206,.5)}.example-btn-lg{padding:16px 32px;font-size:18px;font-weight:600}.example-btn-sm{padding:6px 12px;font-size:12px}.example-btn-danger{padding:16px 32px;font-size:18px;font-weight:600;border:none;border-radius:8px;background:rgba(200,60,60,.8);color:#fff;cursor:pointer}.example-btn-toggle{padding:8px 16px;font-size:14px;border:1px solid hsla(0,0%,100%,.2);border-radius:8px;background:hsla(0,0%,100%,.05);color:#fff;cursor:pointer;transition:all .2s}.example-btn-toggle.active{background:rgba(221,74,154,.3);border-color:#dd4a9a}.example-btn-pill{padding:6px 12px;font-size:12px;border:1px solid hsla(0,0%,100%,.2);border-radius:16px;background:transparent;color:hsla(0,0%,100%,.6);cursor:pointer;transition:all .2s}.example-btn-pill.active{background:rgba(64,144,206,.3);border-color:#4090ce;color:#4090ce}.example-btn-pattern{padding:16px 12px;text-align:center;border:1px solid rgba(221,74,154,.3);border-radius:8px;background:rgba(221,74,154,.2);color:#fff;cursor:pointer;transition:all .2s}.example-btn-pattern.active{background:rgba(64,144,206,.3);border-color:#4090ce}.example-status{padding:8px 16px;border-radius:6px;font-size:14px;text-align:center;background:rgba(132,207,197,.2);border:1px solid rgba(132,207,197,.3);color:#84cfc5}.example-info{max-width:600px;padding:20px;background:rgba(221,74,154,.1);border:1px solid rgba(221,74,154,.3);border-radius:8px;color:hsla(0,0%,100%,.7);font-size:14px;line-height:1.6}.example-info code{background:rgba(0,0,0,.4);padding:2px 6px;border-radius:4px;color:#84cfc5}.example-stat{text-align:center;padding:16px;background:rgba(42,42,42,.6);border-radius:12px}.example-stat-label{font-size:12px;color:#b8b8b8;margin-bottom:8px}.example-stat-value{font-size:24px;font-weight:600;color:#dd4a9a}.example-log{height:400px;overflow-y:auto;background:rgba(0,0,0,.4);border-radius:8px;padding:12px;font-family:Fira Code,Cascadia Code,Consolas,monospace;font-size:12px}.example-log-entry{padding:6px 0;border-bottom:1px solid hsla(0,0%,100%,.1)}.example-log-time{color:hsla(0,0%,100%,.4)}.example-log-type{color:#dd4a9a;margin-left:8px}.example-log-data{color:#84cfc5;margin-left:8px}.example-log-empty{color:hsla(0,0%,100%,.4);text-align:center;padding:20px}.example-phase-badge{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:8px 20px;background:rgba(0,0,0,.7);border-radius:20px;color:#84cfc5;font-size:14px;font-weight:600}.example-range{width:300px;margin-bottom:30px;accent-color:#dd4a9a}.example-bpm{font-size:48px;font-weight:700;color:#dd4a9a;margin-bottom:8px}.example-beat-count{font-size:14px;color:hsla(0,0%,100%,.5);margin-bottom:20px}