*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;width:100%;background:#cfc9c0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#fff;-webkit-user-select:none;user-select:none}canvas{display:block;touch-action:none}.app{position:fixed;inset:0;overflow:hidden}.site-header{position:fixed;top:24px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:15;pointer-events:none}.site-logo{display:block;width:60px;flex:none;pointer-events:auto}.site-logo svg{display:block;width:100%;height:auto}.site-title{margin:0;font-family:Gasoek One,sans-serif;font-weight:400;font-size:100px;line-height:1;color:#000;letter-spacing:.01em}.controls{position:fixed;bottom:28px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:10px 14px;background:#000;border-radius:999px;z-index:10}.btn{appearance:none;border:none;background:none;color:#ffffffd9;font-size:14px;font-weight:500;width:42px;height:42px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .15s ease,opacity .15s ease,transform .05s ease}.btn:hover{color:#fff}.btn:active{transform:scale(.92)}.btn:disabled{opacity:.3;cursor:default;pointer-events:none}.btn-text{width:auto;padding:0 14px}.btn svg{display:block}.ico{width:20px;height:20px;display:block;background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.ico-link{-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_352_9214)'%3e%3cpath%20d='M6.02533%2018.4281C5.91706%2018.4281%205.80825%2018.4245%205.6987%2018.4174C4.50227%2018.3385%203.36179%2017.8373%202.56973%2017.0427L2.55429%2017.0266L2.41405%2016.8783C1.50282%2015.9599%201.02723%2014.7567%201.07464%2013.4889C1.12042%2012.2602%201.65142%2011.0763%202.56973%2010.155L5.21766%207.49848C6.13506%206.5781%207.33513%206.05796%208.59678%206.03408C9.87987%206.00948%2011.0914%206.50283%2012.0079%207.4223C12.339%207.75454%2012.339%208.2931%2012.0079%208.62534C11.6767%208.95759%2011.1399%208.95759%2010.8087%208.62534C9.59865%207.41136%207.66939%207.44489%206.41682%208.70171L3.76889%2011.3582C3.15414%2011.975%202.79917%2012.7543%202.76938%2013.5527C2.73977%2014.3461%203.04242%2015.1028%203.62138%2015.6836L3.63682%2015.6996L3.77616%2015.8471C4.27428%2016.3426%205.03382%2016.6687%205.81006%2016.7199C6.41391%2016.7598%207.28826%2016.6523%208.02418%2015.914L9.6348%2014.2981C9.96598%2013.9659%2010.5028%2013.9659%2010.834%2014.2981C11.1651%2014.6304%2011.1651%2015.1689%2010.834%2015.5012L9.22334%2017.117C8.37388%2017.9692%207.24829%2018.4283%206.02552%2018.4283L6.02533%2018.4281Z'%20fill='black'/%3e%3cpath%20d='M11.426%2012.8878C10.1829%2012.8878%208.93979%2012.413%207.99332%2011.4636L7.50973%2010.9785C7.17856%2010.6462%207.17856%2010.1077%207.50973%209.77544C7.8409%209.44319%208.37772%209.44319%208.70889%209.77544L9.1923%2010.2604C10.4238%2011.4959%2012.4277%2011.4959%2013.6594%2010.2604L16.3073%207.60391C16.9039%207.00539%2017.2324%206.20968%2017.2324%205.36312C17.2324%204.51655%2016.9037%203.72084%2016.3071%203.12233C15.8117%202.62532%2015.0442%202.30875%2014.2538%202.2754C13.6272%202.24897%2012.7108%202.38694%2011.9063%203.19395L10.4819%204.62281C10.1508%204.95505%209.61394%204.95505%209.28277%204.62281C8.95159%204.29056%208.95159%203.75201%209.28277%203.41976L10.707%201.9909C11.6747%201.02078%2012.9596%200.518307%2014.3254%200.575717C15.5472%200.627294%2016.7068%201.11701%2017.5065%201.91946C18.4233%202.83929%2018.9284%204.06238%2018.9284%205.3633C18.9284%206.66421%2018.4233%207.88731%2017.5065%208.80713L14.8586%2011.4636C13.9121%2012.4132%2012.669%2012.8878%2011.4258%2012.8878H11.426Z'%20fill='black'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_352_9214'%3e%3crect%20width='17.8571'%20height='17.8572'%20fill='white'%20transform='translate(1.07141%200.571289)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_352_9214)'%3e%3cpath%20d='M6.02533%2018.4281C5.91706%2018.4281%205.80825%2018.4245%205.6987%2018.4174C4.50227%2018.3385%203.36179%2017.8373%202.56973%2017.0427L2.55429%2017.0266L2.41405%2016.8783C1.50282%2015.9599%201.02723%2014.7567%201.07464%2013.4889C1.12042%2012.2602%201.65142%2011.0763%202.56973%2010.155L5.21766%207.49848C6.13506%206.5781%207.33513%206.05796%208.59678%206.03408C9.87987%206.00948%2011.0914%206.50283%2012.0079%207.4223C12.339%207.75454%2012.339%208.2931%2012.0079%208.62534C11.6767%208.95759%2011.1399%208.95759%2010.8087%208.62534C9.59865%207.41136%207.66939%207.44489%206.41682%208.70171L3.76889%2011.3582C3.15414%2011.975%202.79917%2012.7543%202.76938%2013.5527C2.73977%2014.3461%203.04242%2015.1028%203.62138%2015.6836L3.63682%2015.6996L3.77616%2015.8471C4.27428%2016.3426%205.03382%2016.6687%205.81006%2016.7199C6.41391%2016.7598%207.28826%2016.6523%208.02418%2015.914L9.6348%2014.2981C9.96598%2013.9659%2010.5028%2013.9659%2010.834%2014.2981C11.1651%2014.6304%2011.1651%2015.1689%2010.834%2015.5012L9.22334%2017.117C8.37388%2017.9692%207.24829%2018.4283%206.02552%2018.4283L6.02533%2018.4281Z'%20fill='black'/%3e%3cpath%20d='M11.426%2012.8878C10.1829%2012.8878%208.93979%2012.413%207.99332%2011.4636L7.50973%2010.9785C7.17856%2010.6462%207.17856%2010.1077%207.50973%209.77544C7.8409%209.44319%208.37772%209.44319%208.70889%209.77544L9.1923%2010.2604C10.4238%2011.4959%2012.4277%2011.4959%2013.6594%2010.2604L16.3073%207.60391C16.9039%207.00539%2017.2324%206.20968%2017.2324%205.36312C17.2324%204.51655%2016.9037%203.72084%2016.3071%203.12233C15.8117%202.62532%2015.0442%202.30875%2014.2538%202.2754C13.6272%202.24897%2012.7108%202.38694%2011.9063%203.19395L10.4819%204.62281C10.1508%204.95505%209.61394%204.95505%209.28277%204.62281C8.95159%204.29056%208.95159%203.75201%209.28277%203.41976L10.707%201.9909C11.6747%201.02078%2012.9596%200.518307%2014.3254%200.575717C15.5472%200.627294%2016.7068%201.11701%2017.5065%201.91946C18.4233%202.83929%2018.9284%204.06238%2018.9284%205.3633C18.9284%206.66421%2018.4233%207.88731%2017.5065%208.80713L14.8586%2011.4636C13.9121%2012.4132%2012.669%2012.8878%2011.4258%2012.8878H11.426Z'%20fill='black'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_352_9214'%3e%3crect%20width='17.8571'%20height='17.8572'%20fill='white'%20transform='translate(1.07141%200.571289)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e")}.ico-shuffle{-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_356_9260)'%3e%3cmask%20id='mask0_356_9260'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='20'%20height='20'%3e%3crect%20width='20'%20height='20'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_356_9260)'%3e%3cpath%20d='M12%2018L12%2016L14.6%2016L11.425%2012.825L12.85%2011.4L16%2014.55L16%2012L18%2012L18%2018L12%2018ZM3.4%2018L2%2016.6L14.6%204L12%204L12%202L18%202L18%208L16%208L16%205.4L3.4%2018ZM7.175%208.575L2%203.4L3.4%202L8.575%207.175L7.175%208.575Z'%20fill='%231C1B1F'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_356_9260'%3e%3crect%20width='20'%20height='20'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_356_9260)'%3e%3cmask%20id='mask0_356_9260'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='20'%20height='20'%3e%3crect%20width='20'%20height='20'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_356_9260)'%3e%3cpath%20d='M12%2018L12%2016L14.6%2016L11.425%2012.825L12.85%2011.4L16%2014.55L16%2012L18%2012L18%2018L12%2018ZM3.4%2018L2%2016.6L14.6%204L12%204L12%202L18%202L18%208L16%208L16%205.4L3.4%2018ZM7.175%208.575L2%203.4L3.4%202L8.575%207.175L7.175%208.575Z'%20fill='%231C1B1F'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_356_9260'%3e%3crect%20width='20'%20height='20'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e")}.ico-close{-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M4.5%204.5L15.5%2015.5M15.5%204.5L4.5%2015.5'%20stroke='%231C1B1F'%20stroke-width='1.5'%20stroke-linecap='round'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M4.5%204.5L15.5%2015.5M15.5%204.5L4.5%2015.5'%20stroke='%231C1B1F'%20stroke-width='1.5'%20stroke-linecap='round'/%3e%3c/svg%3e")}.ico-bolt{-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon%20points='13%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202'%20stroke='%231C1B1F'%20stroke-width='1.5'%20stroke-linejoin='round'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon%20points='13%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202'%20stroke='%231C1B1F'%20stroke-width='1.5'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.ico-info{-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='10'%20cy='10'%20r='7.25'%20stroke='%231C1B1F'%20stroke-width='1.5'/%3e%3cpath%20d='M10%209V13.75'%20stroke='%231C1B1F'%20stroke-width='1.5'%20stroke-linecap='round'/%3e%3ccircle%20cx='10'%20cy='6.25'%20r='0.95'%20fill='%231C1B1F'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='10'%20cy='10'%20r='7.25'%20stroke='%231C1B1F'%20stroke-width='1.5'/%3e%3cpath%20d='M10%209V13.75'%20stroke='%231C1B1F'%20stroke-width='1.5'%20stroke-linecap='round'/%3e%3ccircle%20cx='10'%20cy='6.25'%20r='0.95'%20fill='%231C1B1F'/%3e%3c/svg%3e")}.divider{width:1px;height:28px;background:#ffffff24;margin:0 2px}.bpm-wrap{display:flex;flex-direction:row;align-items:center;gap:6px;color:#ffffffd9}.bpm-bolt{width:18px;height:18px}.bpm-input{width:48px;padding:4px 0;text-align:center;font:inherit;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:#fff;background:#ffffff14;border:1.5px solid rgba(255,255,255,.25);border-radius:8px;cursor:ew-resize;touch-action:none;outline:none;-webkit-user-select:none;user-select:none}.bpm-input.editing{cursor:text;background:#ffffff29;border-color:#ffffff80;-webkit-user-select:text;user-select:text}.toast{position:fixed;bottom:92px;left:50%;transform:translate(-50%);padding:8px 16px;background:#fffffff2;color:#111;font-size:13px;font-weight:600;border-radius:999px;z-index:20;animation:toastIn .18s ease;opacity:0!important}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%)}}.modal-backdrop{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:#0009;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:toastIn .15s ease}.modal{width:min(520px,100%);max-height:80vh;overflow-y:auto;background:#16161af5;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px 24px 26px;box-shadow:0 24px 60px #00000080}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.modal-head h2{margin:0;font-size:17px;font-weight:600}.modal-intro{margin:0 0 18px;font-size:13px;line-height:1.5;color:#ffffff9e}.modal-intro em{font-style:italic;color:#fffc}.modal-intro a{color:#fff!important;font-weight:600}.modal-close{appearance:none;border:none;background:transparent;color:#fff9;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}.modal-close:hover{color:#fff}.modal-list{margin:0}.modal-row{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}.modal-row dt{font-weight:600;font-size:13px;color:#fff}.modal-row dd{margin:0;font-size:13px;line-height:1.45;color:#ffffff9e}@media(max-width:820px){.site-header{top:12px}.site-logo{width:38px}.site-title{font-size:40px}.controls{left:0;right:0;bottom:0;transform:none;border-radius:0;max-width:none;gap:6px;padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;row-gap:8px}.btn{width:38px;height:38px;font-size:13px}.play-fab{position:fixed;left:50%;bottom:calc(66px + env(safe-area-inset-bottom));transform:translate(-50%);width:56px;height:56px;background:#000;border-radius:999px;z-index:11}.play-fab:active{transform:translate(-50%) scale(.92)}.btn-text{width:auto;padding:0 10px}.bpm-input{width:40px}.divider{margin:0}.toast{bottom:calc(135px + env(safe-area-inset-bottom))}}