html.yh555-page{min-height:100%;background-color:#dfeeea;background-image:linear-gradient(#ffffff99,#ffffff99),url('../assets/wallpaper/nyc-subway-map.png');background-position:center top;background-size:auto,120% auto;background-repeat:repeat,repeat-y}
/* Extend the map beyond both viewport edges for iPhone toolbar resizing and pull. */
html.yh555-page::before{content:'';position:fixed;inset:-100lvh 0;z-index:-1;pointer-events:none;background-color:inherit;background-image:inherit;background-size:inherit;background-repeat:inherit;background-position:center 100lvh}
body#yh-sp555{position:relative;isolation:isolate;margin:0;min-height:100svh;min-height:100dvh;box-sizing:border-box;padding:20px max(12px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:transparent;color:#242b2d;font:13px/1.45 Arial,Helvetica,sans-serif;color-scheme:light}
#yh-sp555 *{box-sizing:border-box}
#yh-sp555 [hidden]{display:none!important}
#yh-sp555 button,#yh-sp555 input,#yh-sp555 select,#yh-sp555 summary{font:inherit}
#yh-sp555 button,#yh-sp555 select,#yh-sp555 input[type=number],#yh-sp555 input[type=text]{min-height:44px;min-width:0;border:1px solid #a6adad;border-radius:7px;background:#e6e8e6;color:#283235;padding:8px 12px}
#yh-sp555 button{font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 1px 1px #17252918}
#yh-sp555 button:hover{background:#f4f5f2}
#yh-sp555 button:active{transform:translateY(1px)}
#yh-sp555 button[aria-pressed=true]{background:#c2e8e5;border-color:#538c8d;color:#15464c}
#yh-sp555 button:disabled{opacity:.4;cursor:not-allowed}
#yh-sp555 :focus-visible{outline:3px solid #127c91;outline-offset:3px}
#yh-sp555 label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px;color:#455258}
#yh-sp555 input[type=range]{width:100%;min-width:0;min-height:44px;margin:0;accent-color:#2a7d85;cursor:pointer}
#yh-sp555 input[type=number]{width:100%}
#yh-sp555 input[type=checkbox]{width:19px;height:19px;flex-shrink:0;accent-color:#277e83}
#yh-sp555 .yh555-check{flex-direction:row;align-items:center;min-height:44px;gap:7px}
#yh-sp555 meter{width:100%;height:14px;accent-color:#2c9b8b}
#yh-sp555 h2{font-size:17px;line-height:1.3;margin:0 0 8px;font-weight:650;letter-spacing:-.02em}
#yh-sp555 p{margin:8px 0}
#yh-sp555 .yh555-machine{position:relative;width:100%;max-width:760px;margin:0 auto;padding:20px 24px 16px;border:1px solid #939b9c;border-radius:18px;background:linear-gradient(115deg,#cdd0ce,#e2e3df 45%,#c2c8c7);box-shadow:inset 4px 0 #596262,inset -4px 0 #586161,inset 0 2px #f7f9f6,0 5px 0 #5d6869,0 16px 38px #132a2b30}
#yh-sp555 .yh555-machine:before,#yh-sp555 .yh555-machine:after{content:'+';position:absolute;top:7px;width:9px;height:9px;border-radius:50%;background:#adb5b3;color:#697171;font:10px/9px Arial;text-align:center}
#yh-sp555 .yh555-machine:before{left:9px}#yh-sp555 .yh555-machine:after{right:9px}
#yh-sp555 .yh555-brand{display:flex;align-items:center;gap:12px;min-height:44px;margin-bottom:14px}
#yh-sp555 .yh555-logo{flex:1}
#yh-sp555 .yh555-wordmark{display:block;font-size:27px;line-height:1;font-weight:900;font-style:italic;letter-spacing:-1.6px}
#yh-sp555 .yh555-wordmark span{color:#277d82}
#yh-sp555 .yh555-subtitle{font-size:7px;letter-spacing:.23em;display:block;margin-top:4px}
#yh-sp555 .yh555-exit{display:flex;align-items:center;justify-content:center;min-width:30px;min-height:44px;font-size:20px;text-decoration:none;color:#4e5d60}
#yh-sp555 .yh555-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#yh-sp555 .yh555-quiet{background:transparent;border-color:transparent;box-shadow:none}
#yh-sp555 #help{font-size:15px;letter-spacing:2px;width:44px;padding:0}
#yh-sp555 .yh555-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:#28383d;padding:4px;border-radius:9px;margin-bottom:14px}
#yh-sp555 .yh555-modes button{border:0;box-shadow:none;background:transparent;color:#c6d0d1;font-size:13px;letter-spacing:.015em}
#yh-sp555 .yh555-modes button[aria-pressed=true]{background:#d2ece7;color:#1a4b50}
#yh-sp555 .yh555-transport{position:relative;padding:0 0 4px;border-bottom:1px solid #afb7b5;margin-bottom:8px}
#yh-sp555 .yh555-main-controls{display:grid;grid-template-columns:52px minmax(0,1fr) 60px 86px;gap:10px;align-items:center}
#yh-sp555 .yh555-play{background:#c0e3dd;border-color:#87aaa6;font-size:18px}
#yh-sp555 .yh555-play svg{display:block;width:24px;height:24px;margin:auto;fill:currentColor}
#yh-sp555 .yh555-record-slot button{width:100%;background:#e7e4df;border-color:#b4aaa3}
#yh-sp555 .yh555-record-slot button[aria-pressed=true]{background:#b94b4f;border-color:#92363a;color:#fff}
#yh-sp555 .yh555-rec{color:#8b353a}
#yh-sp555 .yh555-tempo{display:flex;flex-direction:row;align-items:center;gap:3px;justify-content:center;background:#263b40;border:1px solid #152a2d;border-radius:7px;padding:0 7px;color:#a0bcbf;font-size:8px}
#yh-sp555 .yh555-tempo input{width:48px;min-height:42px;font:25px/1 ui-monospace,Menlo,monospace;letter-spacing:-1px;text-align:center;color:#f2b78d;background:transparent;border:0;box-shadow:none;padding:0;appearance:textfield;-moz-appearance:textfield}
#yh-sp555 .yh555-tempo input::-webkit-inner-spin-button{appearance:none}
#yh-sp555 .yh555-session-line{display:flex;align-items:center;gap:9px;min-height:40px;font:10px/1.4 ui-monospace,Menlo,monospace;padding-right:120px;color:#58696c}
#yh-sp555 #effect-indicator{padding:0 5px;min-height:32px;background:#d1e8df;border:0;color:#285d55;font:10px Arial}
#yh-sp555 .yh555-disclosure{border-top:1px solid #b1bcb9;margin-top:10px;min-width:0}
#yh-sp555 summary{display:flex;align-items:center;gap:9px;cursor:pointer;min-height:44px;font-weight:600;font-size:12px;list-style:none}
#yh-sp555 summary::-webkit-details-marker{display:none}
#yh-sp555 summary:before{content:'+';font-size:16px;color:#66817d;font-weight:400}
#yh-sp555 details[open]>summary:before{content:'−'}
#yh-sp555 details[open]>summary{margin-bottom:8px}
#yh-sp555 .yh555-beat-settings{border:0;margin:0}
#yh-sp555 .yh555-beat-settings>summary{position:absolute;right:0;top:47px;min-height:36px;font-weight:400;color:#516565}
#yh-sp555 .yh555-beat-settings[open]{padding:10px 0}
#yh-sp555 .yh555-beat-settings[open]>summary{margin:0}
#yh-sp555 .yh555-formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
#yh-sp555 .yh555-formgrid input,#yh-sp555 .yh555-formgrid select{width:100%}
#yh-sp555 .yh555-bankbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
#yh-sp555 .yh555-banks{display:flex;gap:3px}
#yh-sp555 .yh555-banks button{min-height:44px;padding:6px 12px;border-color:transparent;background:transparent;box-shadow:none;color:#586665}
#yh-sp555 .yh555-banks button[aria-pressed=true]{background:#b6c6c2;border-color:#91a7a0;color:#1f4644}
#yh-sp555 #pad-hint{font-size:11px;color:#617270}
#yh-sp555 .yh555-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;background:#2c393b;padding:10px;border-radius:10px;box-shadow:inset 0 2px 4px #12232655}
#yh-sp555 .yh555-pad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:84px;padding:7px 3px 6px;border-radius:6px;border:1px solid #788180;background:linear-gradient(145deg,#e7e6df,#c7cac4);box-shadow:0 3px 0 #182727;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
#yh-sp555 .yh555-pad:hover{background:#efeee8}
#yh-sp555 .yh555-badge{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;flex-shrink:0;background:var(--badge);color:#fff;font:bold 33px/1 Arial,Helvetica,sans-serif;margin:2px 0 4px;box-shadow:inset 0 1px 1px #ffffff30}
#yh-sp555 .yh555-badge.dark-text{color:#172423}
#yh-sp555 .yh555-badge.diamond{border-radius:2px;transform:rotate(45deg) scale(.77)}
#yh-sp555 .yh555-badge.diamond>span{transform:rotate(-45deg)}
#yh-sp555 .yh555-pad-meta{position:absolute;top:5px;left:6px;right:6px;display:flex;justify-content:space-between;font:8px ui-monospace,Menlo,monospace;color:#6e7873;pointer-events:none}
#yh-sp555 .yh555-pad-meta>span:last-child{display:none}
#yh-sp555 .yh555-sound-label{font-size:10px;line-height:1.3;font-weight:500;color:#34403c;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%}
#yh-sp555 .yh555-pad.empty .yh555-badge{opacity:.24}
#yh-sp555 .yh555-pad.selected{border-color:#f6e3ad;box-shadow:0 3px 0 #182727,inset 0 0 0 1px #b6a069}
#yh-sp555 .yh555-pad.playing{transform:translateY(2px);background:#d4ede3;box-shadow:0 1px 0 #182727,inset 0 0 0 2px #6aa89b}
#yh-sp555 .yh555-pad.muted:after{content:'M';position:absolute;right:5px;top:5px;color:#9c343d;font-size:9px}
#yh-sp555 .yh555-pad.held:before{content:'HOLD';position:absolute;right:4px;top:5px;color:#2c776d;font-size:7px}
#yh-sp555 .yh555-sample-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;align-items:start}
#yh-sp555 .yh555-sample-tools>button,#yh-sp555 .yh555-input>summary{background:#d2d9d5;border:1px solid #a3b1ab;border-radius:7px;padding:8px 6px;text-align:center;justify-content:center;font-size:12px}
#yh-sp555 .yh555-input{margin:0;border:0}
#yh-sp555 .yh555-input>summary{gap:5px}
#yh-sp555 .yh555-input[open]{grid-column:1/-1}
#yh-sp555 .yh555-input[open]>summary{justify-content:flex-start;border:0;background:transparent;padding-left:0}
#yh-sp555 .yh555-input-body{border:1px solid #abbcb5;background:#d8e1dc;border-radius:8px;padding:12px}
#yh-sp555 .yh555-link-button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#yh-sp555 .yh555-link-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#yh-sp555 .yh555-link-import input[type=url]{width:100%;min-height:44px;border:1px solid #a6adad;border-radius:7px;background:#e6e8e6;color:#283235;padding:8px 12px;font-size:16px}
#yh-sp555 #audio-link-status{min-height:1.6em;font-weight:600}
#yh-sp555 .yh555-note{font-size:12px;color:#647570;line-height:1.55}
#yh-sp555 .yh555-active-recordings{display:flex;gap:8px;flex-wrap:wrap}
#yh-sp555 .yh555-active-recordings button{background:#b8464c;color:#fff;margin:4px 0 10px}
#yh-sp555 .yh555-drawer-shell{min-width:0}
#yh-sp555 .yh555-back{background:transparent;border:0;box-shadow:none;padding-left:0;color:#376b65;margin-bottom:4px}
#yh-sp555 .yh555-drawer{background:#e2e7e2;border:1px solid #b2bfb7;border-radius:9px;padding:16px;min-width:0}
#yh-sp555[data-view=sequence] .yh555-drawer{background:transparent;border:0;padding:0 0 10px}
#yh-sp555 .yh555-wave{display:block;width:100%;height:110px;margin:14px 0 6px;border-radius:6px;touch-action:pan-y}
#yh-sp555 .yh555-editor-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#yh-sp555 .yh555-editor-title>label{max-width:240px}
#yh-sp555 .yh555-editor-title h2{margin-bottom:2px}
#yh-sp555 .yh555-editor-title p{margin:0;color:#657870;font-size:11px}
#yh-sp555 .yh555-sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:18px 0 8px}
#yh-sp555 .yh555-slider-title{display:flex;justify-content:space-between;align-items:center;gap:5px}
#yh-sp555 .yh555-slider-title output{font-size:10px;color:#66857a}
#yh-sp555 .yh555-trim-times{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
#yh-sp555 .yh555-trim-times input{background:transparent;min-height:40px}
#yh-sp555 .yh555-patterns{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
#yh-sp555 .yh555-pattern-card{padding:5px;min-height:60px;background:#cbd6d0;border:1px solid #a3b5ac;text-align:left}
#yh-sp555 .yh555-pattern-card span{display:block;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#yh-sp555 .yh555-pattern-card canvas{width:100%;height:24px;display:block;margin-top:4px}
#yh-sp555 .yh555-pattern-card.queued{outline:2px dashed #38877c;outline-offset:1px}
#yh-sp555 .yh555-sequence-more{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
#yh-sp555 .yh555-sequence-more>details[open]{grid-column:1/-1}
#yh-sp555 .yh555-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;margin:12px 0}
#yh-sp555 .yh555-step{padding:0;min-height:44px;font-size:10px;background:#c2d0c8}
#yh-sp555 .yh555-step:nth-child(4n+1){border-left:3px solid #68867a}
#yh-sp555 .yh555-step.on{background:#6bb1a2;color:#163f35}
#yh-sp555 .yh555-events{display:grid;gap:7px;max-height:340px;overflow:auto;margin-top:12px}
#yh-sp555 .yh555-event{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px;background:#d3ddd6;border:1px solid #bac8bd;border-radius:6px;min-width:0}
#yh-sp555 .yh555-event>strong{flex:1;min-width:90px}
#yh-sp555 .yh555-event label{min-width:90px;flex:1}
#yh-sp555 .yh555-event input{max-width:100%}
#yh-sp555 .yh555-mini-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:28px;height:28px;color:#fff;background:var(--badge);font-size:18px;font-weight:bold}
#yh-sp555 .yh555-perform{padding:8px 0}
#yh-sp555 .yh555-perform-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 16px}
#yh-sp555 .yh555-perform-heading p{font-size:12px;color:#61756d;margin:0}
#yh-sp555 .yh555-perform-heading h2{margin:0 0 5px}
#yh-sp555 .yh555-effect-pads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#yh-sp555 .yh555-effect-pad{min-height:125px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#2f4749;color:#e1eee8;border-color:#213638;box-shadow:0 3px 0 #192d2e;touch-action:none;user-select:none;-webkit-user-select:none}
#yh-sp555 .yh555-effect-pad:hover{background:#395958}
#yh-sp555 .yh555-effect-pad strong{font-size:15px;font-weight:500}
#yh-sp555 .yh555-effect-pad>span:last-child{font-size:10px;color:#a9c0b6;font-weight:400}
#yh-sp555 .yh555-effect-symbol{font-size:31px;line-height:1.1;font-weight:400;color:#92c6b9}
#yh-sp555 .yh555-effect-pad[aria-pressed=true]{background:linear-gradient(to top,#9dcdbd calc(var(--strength,.5)*100%),#b6d9ce calc(var(--strength,.5)*100%));color:#123b36;border-color:#649c8b}
#yh-sp555 .yh555-effect-pad[aria-pressed=true]>span{color:#275f50}
#yh-sp555 .yh555-perform-readout{display:flex;align-items:center;gap:12px;font-size:11px;color:#557466;margin:14px 0}
#yh-sp555 .yh555-perform-readout meter{flex:1;min-width:20px}
#yh-sp555 .yh555-knobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:16px 0}
#yh-sp555 .yh555-knob{align-items:center;text-align:center;font-size:10px}
#yh-sp555 .yh555-knob-face{position:relative;display:block;width:48px;height:48px;border-radius:50%;border:3px solid #263b3c;background:linear-gradient(140deg,#657b76,#2f4644);box-shadow:0 2px 3px #182d2a40;touch-action:none;cursor:ns-resize}
#yh-sp555 .yh555-knob-face:after{content:'';position:absolute;width:3px;height:14px;left:19px;top:3px;border-radius:2px;background:#cbe4d7;transform-origin:1px 18px;transform:rotate(var(--angle,-120deg))}
#yh-sp555 .yh555-knob output{font:11px ui-monospace,Menlo,monospace;color:#477366}
#yh-sp555 #fx-type{width:100%}
#yh-sp555 #take-status{display:block;font-size:11px;color:#576a63}
#yh-sp555 .yh555-capture .yh555-row{margin-top:12px}
#yh-sp555 .yh555-statusbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;margin-top:12px;border-top:1px solid #b4c0b8;font-size:10px;line-height:1.5;color:#5c7067}
#yh-sp555 #status{flex:1}
#yh-sp555 #save-status{max-width:180px;text-align:right}
#yh-sp555 dialog{width:min(620px,calc(100% - 24px));max-height:90svh;overflow:auto;border:1px solid #93a69b;border-radius:13px;padding:24px;background:#e3e9e1;color:#253e33;box-shadow:0 20px 80px #14292060}
#yh-sp555 dialog::backdrop{background:#172f2bcc}
#yh-sp555 dialog p{font-size:13px;line-height:1.6}
#yh-sp555 dialog h2{font-size:20px}
#yh-sp555 #dialog-actions{justify-content:flex-end;margin-top:20px}
#yh-sp555 dialog select,#yh-sp555 dialog input[type=text]{width:100%;max-width:100%}
#yh-sp555 .yh555-arrival{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;text-align:center;padding:25px;background:#dfe6dfee;color:#274537;font:clamp(20px,4vw,34px)/1.4 Georgia,serif;pointer-events:none;animation:yh555-arrival-exit .25s ease 1.5s forwards}
@keyframes yh555-arrival-exit{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@media(max-width:620px){body#yh-sp555{padding-top:12px}#yh-sp555 .yh555-machine{padding:16px 16px 14px;border-radius:14px}#yh-sp555 .yh555-brand{gap:6px;margin-bottom:12px}#yh-sp555 .yh555-brand .yh555-row{gap:3px}#yh-sp555 .yh555-wordmark{font-size:25px}#yh-sp555 .yh555-subtitle{font-size:6px}#yh-sp555 .yh555-modes{margin-bottom:12px}#yh-sp555 .yh555-modes button{padding:7px 3px;font-size:12px}#yh-sp555 .yh555-main-controls{grid-template-columns:44px minmax(0,1fr) 44px 67px;gap:6px}#yh-sp555 .yh555-main-controls button{padding:6px 4px;font-size:11px}#yh-sp555 .yh555-play{font-size:17px!important}#yh-sp555 .yh555-tempo{padding:0 3px;font-size:7px}#yh-sp555 .yh555-tempo input{font-size:23px;width:39px}#yh-sp555 #pad-hint{font-size:9px}#yh-sp555 .yh555-banks button{padding:6px 8px;font-size:11px}#yh-sp555 .yh555-pads{gap:7px;padding:8px}#yh-sp555 .yh555-pad{min-height:83px;padding:6px 2px}#yh-sp555 .yh555-badge{width:43px;height:43px;font-size:31px}#yh-sp555 .yh555-sound-label{font-size:8px}#yh-sp555 .yh555-pad-meta{font-size:7px;top:3px;left:4px}#yh-sp555 .yh555-sample-tools{gap:6px;margin-top:10px}#yh-sp555 .yh555-sample-tools>button,#yh-sp555 .yh555-input>summary{font-size:11px;padding:6px 3px}#yh-sp555 .yh555-statusbar{font-size:9px;padding-top:10px;margin-top:10px;align-items:start}#yh-sp555 #save-status{max-width:90px}#yh-sp555 .yh555-drawer{padding:12px}#yh-sp555 .yh555-editor-title{display:block}#yh-sp555 .yh555-editor-title>label{max-width:none;margin-top:10px}#yh-sp555 .yh555-sliders{gap:10px}#yh-sp555 .yh555-slider-title{flex-direction:column;align-items:start;gap:0}#yh-sp555 .yh555-patterns{grid-template-columns:repeat(4,minmax(0,1fr))}#yh-sp555 .yh555-steps{grid-template-columns:repeat(8,minmax(0,1fr))}#yh-sp555 .yh555-effect-pads{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}#yh-sp555 .yh555-effect-pad{min-height:108px}#yh-sp555 .yh555-perform-heading h2{font-size:16px}#yh-sp555 .yh555-perform-heading p{font-size:11px}#yh-sp555 .yh555-session-line{font-size:9px;gap:5px;padding-right:103px}#yh-sp555 .yh555-beat-settings>summary{font-size:11px;gap:5px}#yh-sp555 .yh555-knobs{gap:8px}#yh-sp555 dialog{padding:18px}}
@media(max-width:345px){#yh-sp555 .yh555-machine{padding-left:12px;padding-right:12px}#yh-sp555 .yh555-wordmark{font-size:23px}#yh-sp555 .yh555-exit{min-width:24px}#yh-sp555 .yh555-brand #export{padding:6px 8px;font-size:11px}#yh-sp555 .yh555-pads{gap:6px;padding:6px}#yh-sp555 .yh555-pad{min-height:78px}#yh-sp555 .yh555-badge{width:39px;height:39px;font-size:28px}#yh-sp555 .yh555-sound-label{font-size:7px}#yh-sp555 .yh555-sample-tools>button,#yh-sp555 .yh555-input>summary{font-size:10px}#yh-sp555 #pad-hint{font-size:8px}#yh-sp555 .yh555-main-controls{grid-template-columns:40px minmax(0,1fr) 40px 64px;gap:5px}}
@media(prefers-reduced-motion:reduce){#yh-sp555 .yh555-arrival{animation-duration:0s}#yh-sp555 button{transform:none!important}}
/* YNG-140: brushed hardware, original route colors and a fine sand surface. */
@font-face{font-family:YNGStreet;src:url('../assets/sp555/visuals/yng-street-labels.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
#yh-sp555 .yh140-wordmark{display:block;width:min(216px,100%);height:auto;max-height:72px;object-fit:contain;object-position:left;mix-blend-mode:multiply}
#yh-sp555 .yh555-logo{min-width:0}
#yh-sp555 .yh555-brand{margin-bottom:12px}
#yh-sp555 .yh555-subtitle{color:#46585d;font-size:7px;margin:2px 0 0 12px}
#yh-sp555 #pad-stage{position:relative;isolation:isolate;overflow:hidden;padding:8px 5px 4px}
#yh-sp555 #grains{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#yh-sp555 .yh555-pads{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 10px;background:none;box-shadow:none;padding:6px 0;border:0;overflow:visible}
#yh-sp555 .yh140-pad-cell{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;gap:2px;padding:2px 0 0}
#yh-sp555 .yh555-pad,#yh-sp555 .yh555-pad:hover,#yh-sp555 .yh555-pad:active,#yh-sp555 .yh555-pad.selected,#yh-sp555 .yh555-pad.playing{display:block;position:relative;flex:0 0 auto;width:70px;height:70px;min-height:70px;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;transform:none;overflow:visible;outline:none}
#yh-sp555 .yh140-fallback{position:absolute;inset:6%;display:block;width:88%;height:88%;object-fit:contain}
#yh-sp555 .yh140-fallback svg{width:100%;height:100%}
#yh-sp555 .has-grains .yh140-fallback{visibility:hidden}
/* Selection and keyboard focus live under the sound name, never around a train. */
#yh-sp555 .yh555-pad::after{content:none!important;border:0!important;outline:0!important;box-shadow:none!important}
#yh-sp555 .yh555-pad.selected+.yh555-sound-label{background:linear-gradient(#38838a,#38838a) center bottom/70% 2px no-repeat}
#yh-sp555 .yh555-pad:focus-visible+.yh555-sound-label{outline:2px solid #166b82;outline-offset:4px;border-radius:1px}
#yh-sp555 .yh555-pad.muted::before{content:'M';position:absolute;left:calc(50% - 4px);top:calc(100% - 9px);font:9px Arial;color:#7e3438;z-index:3}
#yh-sp555 .yh555-pad.held::before{content:'HOLD';position:absolute;right:auto;left:calc(50% - 12px);top:calc(100% - 9px);font:8px Arial;color:#28565e;z-index:3}
#yh-sp555 .yh555-pad.empty{opacity:.55}
#yh-sp555 .yh555-pad-meta{display:none}
#yh-sp555 .yh555-sound-label{position:relative;z-index:3;user-select:text;font:800 15px/1.15 YNGStreet,Arial,sans-serif;letter-spacing:.025em;text-transform:uppercase;color:#f8fbfc;-webkit-text-stroke:1.15px #08213b;paint-order:stroke fill;text-shadow:0 1px 0 #00bce7,1px 2px 0 #08213b;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px 3px}
#yh-sp555 .yh140-emblem-preview{display:block;max-width:100%;margin:12px auto}
#yh-sp555 input[type=color]{width:80px;height:44px;padding:4px;border:1px solid #8d9b9e;background:#eef0ef;border-radius:6px}
#yh-sp555 #pad-appearance[open]>label,#yh-sp555 #visual-settings>label{margin:12px 0}
#yh-sp555 .yh555-pad[data-shape=custom]{border-radius:0}
@media(max-width:620px){#yh-sp555 .yh140-wordmark{width:190px}#yh-sp555 .yh555-logo{flex:1}#yh-sp555 .yh555-brand{gap:4px}#yh-sp555 .yh555-brand .yh555-row{gap:0}#yh-sp555 .yh555-brand #export{font-size:10px;padding:6px}#yh-sp555 .yh555-brand #help{width:34px}#yh-sp555 .yh555-subtitle{font-size:6px}#yh-sp555 .yh555-pads{gap:6px}#yh-sp555 .yh555-pad,#yh-sp555 .yh555-pad:hover,#yh-sp555 .yh555-pad:active,#yh-sp555 .yh555-pad.selected,#yh-sp555 .yh555-pad.playing{width:56px;height:56px;min-height:56px}#yh-sp555 .yh555-sound-label{font-size:10.5px;-webkit-text-stroke:.95px #08213b;letter-spacing:0}#yh-sp555 .yh140-pad-cell{padding-bottom:5px;gap:5px}#yh-sp555 #pad-stage{padding:8px 1px 4px}}
@media(max-width:345px){#yh-sp555 .yh555-pad,#yh-sp555 .yh555-pad:hover,#yh-sp555 .yh555-pad:active,#yh-sp555 .yh555-pad.selected,#yh-sp555 .yh555-pad.playing{width:50px;height:50px;min-height:50px}#yh-sp555 .yh555-sound-label{font-size:9px}#yh-sp555 .yh555-exit{min-width:20px}#yh-sp555 .yh555-pads{gap:4px}}
@media(min-width:621px){body#yh-sp555{padding-bottom:20px}}