.demo-page{background:#f4f3ed}.demo-page .site-header nav .active{color:#76c93f}.demo-intro{padding:150px clamp(24px,7vw,120px) 70px;background:radial-gradient(circle at 82% 20%,#314238 0,#1d2924 28%,#101713 70%);color:#fff}.demo-intro h1{max-width:1000px;font-size:clamp(48px,6vw,88px);margin-bottom:28px}.demo-intro h1 em{color:#76c93f;font-style:normal}.demo-intro>p:not(.eyebrow){max-width:950px;color:#dce5df;font-size:20px}.demo-hint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:32px;color:#cad3cd;font-size:14px}.demo-hint span{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:#76c93f;color:#101710;font-weight:900}.demo-hint b{color:#76c93f}.organ-demo{margin:70px auto;width:min(1660px,calc(100% - 40px));background:#222;border:1px solid #555;box-shadow:0 30px 90px rgba(19,27,23,.28);font-family:Segoe UI,Arial,sans-serif;color:#fff}.organ-topbar{min-height:54px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(#363636,#292929);border-bottom:1px solid #111}.organ-logo{font-size:22px;font-weight:900;color:#76c93f}.organ-logo small{margin-left:34px;color:#fff;font-size:10px}.organ-status{display:flex;align-items:center;gap:12px}.organ-status>span{color:#eeb23d;font-size:14px;font-weight:800}.organ-status input{accent-color:#76c93f;width:120px}.organ-status button{border:1px solid #555;padding:7px 12px;color:#fff;font-weight:900}.edit-button{background:#444}.stop-button{background:#ee7d18;cursor:pointer}.category-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;padding:8px;background:#292929}.category-grid button{min-height:38px;padding:5px;background:linear-gradient(#4d5051,#393b3c);border:1px solid #222;color:#fff;font-size:11px;font-weight:800;cursor:pointer}.category-grid button:hover,.category-grid button.active{background:linear-gradient(#65b436,#4b9228)}.song-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;padding:12px;background:#1e1e1e}.song-tile{position:relative;min-height:112px;padding:12px;border:1px solid rgba(255,255,255,.28);border-radius:3px;color:#fff;font-weight:800;font-size:14px;line-height:1.25;text-shadow:0 1px 2px #000;box-shadow:inset 0 0 24px rgba(255,255,255,.13),0 3px 5px #080808;cursor:pointer;transition:transform .15s,filter .15s,box-shadow .15s}.song-tile:hover,.song-tile:focus-visible{transform:translateY(-2px);filter:brightness(1.14);box-shadow:inset 0 0 26px rgba(255,255,255,.18),0 7px 12px #080808}.song-tile.playing{outline:3px solid #fff;animation:pulseTile 1.2s infinite}.song-tile span{position:absolute;right:8px;bottom:7px;font-size:11px}.green{background:linear-gradient(145deg,#245e2c,#51b641)}.teal{background:linear-gradient(145deg,#226b64,#33a495)}.blue{background:linear-gradient(145deg,#125e8b,#18aee2)}.cyan{background:linear-gradient(145deg,#097290,#1bc0d8)}.lime{background:linear-gradient(145deg,#369930,#67ce42)}.turquoise{background:linear-gradient(145deg,#166f75,#23a8ae)}.sand{background:linear-gradient(145deg,#816c57,#c7a889)}.purple{background:linear-gradient(145deg,#57337b,#9b65c7)}.gray{background:linear-gradient(145deg,#555,#8a8a8a)}.orange{background:linear-gradient(145deg,#a35b1f,#e99b36)}.gold{background:linear-gradient(145deg,#9a7b22,#dfbf48)}.burgundy{background:linear-gradient(145deg,#752d43,#ad4f67)}.player-bar{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px;padding:14px 18px;background:#303030;border-top:1px solid #555}.player-bar>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:10px}.player-dot{grid-row:1/3;width:12px;height:12px;margin-top:4px;border-radius:50%;background:#777}.player-dot.on{background:#76c93f;box-shadow:0 0 10px #76c93f}.player-bar strong{font-size:14px}.player-bar small{color:#aaa}.progress-wrap{display:flex;align-items:center;gap:10px;font-size:12px}.progress{height:7px;flex:1;background:#171717;border-radius:10px;overflow:hidden}.progress i{display:block;width:0;height:100%;background:#76c93f}.demo-more{padding:30px clamp(24px,7vw,120px) 100px;text-align:center}.demo-more h2{font-size:clamp(36px,4vw,58px)}.demo-more p{max-width:850px;margin:22px auto 30px;color:#626b65;font-size:18px}@keyframes pulseTile{50%{filter:brightness(1.22)}}@media(max-width:1200px){.category-grid{grid-template-columns:repeat(5,1fr)}.song-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:760px){.demo-intro{padding-top:120px}.demo-intro>p:not(.eyebrow){font-size:17px}.organ-demo{width:calc(100% - 20px);margin:40px auto}.organ-topbar{align-items:flex-start}.organ-logo small{display:none}.organ-status{justify-content:flex-end;flex-wrap:wrap}.organ-status>span{width:100%;text-align:right}.organ-status input{width:90px}.category-grid{grid-template-columns:repeat(3,1fr)}.category-grid button{font-size:9px}.song-grid{grid-template-columns:repeat(2,1fr);gap:7px}.song-tile{min-height:96px;font-size:12px}.player-bar{grid-template-columns:1fr}.demo-hint b{display:none}}@media(max-width:420px){.category-grid{grid-template-columns:repeat(2,1fr)}.organ-status .edit-button{display:none}}