.strudel-page{background:#e5e4dc}.strudel-title-image{vertical-align:.08em;filter:grayscale(.65)contrast(1.2)saturate(.8);background:url(https://picsum.photos/seed/trance-green-pulse/500/220) 50%/cover;border:.07em solid #ffffffd1;border-radius:999px;width:clamp(4.8rem,8vw,8.8rem);height:clamp(2.1rem,4.4vw,4.8rem);margin:0 .05em;display:inline-block;box-shadow:0 0 0 1px #18191426}.strudel-signal{color:#f3f3eb;background:#151611;padding:1.9rem 0;overflow:hidden}.strudel-signal>div{align-items:center;gap:1.8rem;width:max-content;animation:28s cubic-bezier(.45,0,.55,1) infinite strudel-signal;display:flex}.strudel-signal span{letter-spacing:-.035em;white-space:nowrap;font-size:clamp(1.2rem,2.5vw,2.2rem);font-weight:500}.strudel-signal i{background:#d8ff73;border-radius:50%;width:.42rem;height:.42rem}@keyframes strudel-signal{to{transform:translate(-50%)}}.strudel-experiment{grid-template-columns:minmax(11rem,.2fr) minmax(0,1fr)}.strudel-experiment__note{max-width:14rem;font-size:.72rem;line-height:1.6;color:#73746c!important}.strudel-embed{background:#17181417;border-radius:2.2rem;padding:.45rem;box-shadow:inset 0 1px #ffffffb3,0 30px 80px #191a151f}.strudel-embed__toolbar{justify-content:space-between;align-items:center;gap:1rem;min-height:4.3rem;padding:.55rem .65rem .55rem 1.2rem;display:flex}.strudel-embed__status{color:#62635c;align-items:center;gap:.6rem;font-size:.7rem;display:flex}.strudel-embed__status>span{background:#d8ff73;border-radius:50%;width:.48rem;height:.48rem;box-shadow:0 0 1rem #d8ff7359}.strudel-embed__actions{align-items:center;gap:.4rem;display:flex}.strudel-embed__actions :is(button,a){color:#20211d;min-height:2.65rem;font:inherit;cursor:pointer;background:#17181414;border:0;border-radius:999px;align-items:center;gap:.55rem;padding:.65rem .9rem;font-size:.7rem;text-decoration:none;transition:transform .65s cubic-bezier(.32,.72,0,1),background-color .65s cubic-bezier(.32,.72,0,1);display:inline-flex}.strudel-embed__actions a,.strudel-embed__actions .strudel-embed__action--play{color:#fff;background:#20211d}.strudel-embed__actions button:disabled{opacity:.42;cursor:default;transform:none}.strudel-embed__actions .strudel-embed__action--play[aria-pressed=true]{color:#151611;background:#d8ff73}.strudel-embed__feedback{color:#696a62;text-align:right;width:100%;margin:.55rem 0 0;font-size:.68rem}.strudel-embed__feedback[data-kind=pending]{color:#795e00}.strudel-embed__feedback[data-kind=live]{color:#456f30}.strudel-embed__feedback[data-kind=error]{color:#9c332b}.strudel-embed__play-icon{border-top:.28rem solid #0000;border-bottom:.28rem solid #0000;border-left:.45rem solid;width:0;height:0}.strudel-embed__stop-icon{background:currentColor;border-radius:.08rem;width:.52rem;height:.52rem}.strudel-embed__actions :is(button,a):is(:hover,:focus-visible){transform:translateY(-2px)}.strudel-embed__actions :is(button,a):focus-visible{outline-offset:3px;outline:2px solid #20211d}.strudel-embed__presets{border-top:1px solid #17181414;gap:.7rem;padding:.55rem .65rem .85rem 1.2rem;display:grid}.strudel-embed__presets-label{color:#696a62;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem}.strudel-embed__preset-list{scrollbar-width:thin;gap:.5rem;min-width:0;display:flex;overflow-x:auto}.strudel-embed__preset-list button{color:#292a25;min-width:10rem;font:inherit;text-align:left;cursor:pointer;background:#17181412;border:1px solid #0000;border-radius:.9rem;padding:.7rem .8rem;transition:transform .5s cubic-bezier(.32,.72,0,1),background-color .5s cubic-bezier(.32,.72,0,1),border-color .5s cubic-bezier(.32,.72,0,1);display:grid}.strudel-embed__preset-list button:hover{transform:translateY(-2px)}.strudel-embed__preset-list button.is-active{color:#fff;background:#20211d;border-color:#20211d}.strudel-embed__preset-list button:focus-visible{outline-offset:3px;outline:2px solid #20211d}.strudel-embed__preset-list button span{font-size:.78rem;font-weight:600}.strudel-embed__preset-list button small{color:#73746c;margin-top:.25rem;font-size:.65rem}.strudel-embed__preset-list button.is-active small{color:#ffffff9e}.strudel-embed__shell{background:radial-gradient(circle at 50% 30%,#d8ff731a,#0000 28rem),#171814;border-radius:1.75rem;grid-template-columns:clamp(10rem,18vw,13rem) minmax(0,1fr);min-height:46rem;display:grid;position:relative;overflow:hidden}.strudel-embed__stage{min-width:0;min-height:46rem;position:relative;overflow:hidden}.strudel-embed__editor{display:none}.strudel-embed__editor-surface{background:#171814;width:100%;height:46rem;min-height:46rem;overflow:hidden}.strudel-embed__editor-surface>div,.strudel-embed__editor-surface .cm-editor{height:100%}.strudel-embed__editor-surface .cm-scroller{min-height:100%}.strudel-visualizer{color:#f5f5ed;min-width:0;min-height:46rem;font-family:var(--font-sans);background:radial-gradient(circle at 50% 20%,#d8ff7321,#0000 38%),#11120f;border-right:1px solid #d8ff7321;grid-template-rows:auto minmax(0,1fr) auto;gap:1rem;padding:1.15rem 1rem;display:grid;position:relative;overflow:hidden}.strudel-visualizer:after{opacity:.18;content:"";pointer-events:none;background-image:linear-gradient(#ffffff0d 1px,#0000 1px);background-size:100% 2.5rem;position:absolute;inset:0}.strudel-visualizer__header,.strudel-visualizer__footer{z-index:1;color:#f5f5ed80;letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;gap:.7rem;font-size:.62rem;display:flex;position:relative}.strudel-visualizer__header strong{color:#f5f5ed80;font-weight:600}.strudel-visualizer__header strong[data-signal=live]{color:#d8ff73}.strudel-visualizer canvas{z-index:1;width:100%;height:100%;display:block;position:relative}.strudel-visualizer__footer{text-align:right;flex-direction:column;align-items:end}.strudel-visualizer__footer span:first-child{color:#f5f5eddb;letter-spacing:0;text-transform:none;font-size:.72rem}.strudel-embed__state{z-index:1;color:#f5f5ed99;text-align:center;pointer-events:none;background:#171814;place-content:center;justify-items:center;gap:1rem;padding:2rem;display:grid;position:absolute;inset:0}.strudel-embed__state>span{background:#d8ff73;border-radius:50%;width:2.7rem;height:2.7rem;animation:1.2s cubic-bezier(.32,.72,0,1) infinite strudel-loader}.strudel-embed__state a{color:#f5f5ed;pointer-events:auto}.strudel-embed[data-state=ready] .strudel-embed__state{display:none}.strudel-embed[data-state=error] .strudel-embed__state>span{background:#bc6157;animation:none}@keyframes strudel-loader{to{opacity:.22;transform:scale(1.35)}}.strudel-embed__hints{color:#696a62;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;padding:.85rem 1rem .55rem;font-size:.67rem;display:grid}.strudel-embed__hints p{align-items:center;gap:.35rem;display:flex}.strudel-embed__hints p:last-child{justify-content:end}.strudel-embed__hints kbd{color:#292a25;font:inherit;background:#17181414;border-radius:.35rem;padding:.22rem .34rem}.strudel-embed__hints p>span:last-child{margin-left:.3rem}.strudel-embed__audio-dot{background:#62a84c;border-radius:50%;width:.42rem;height:.42rem}.strudel-embed__shell:fullscreen{background:#171814;border-radius:0;width:100vw;height:100dvh}.strudel-embed__shell:fullscreen .strudel-embed__editor-surface{height:100dvh}.strudel-embed__shell:fullscreen .strudel-embed__stage,.strudel-embed__shell:fullscreen .strudel-visualizer{min-height:100dvh}.strudel-embed--fullscreen{z-index:20;background:#e5e4dc;border-radius:0;flex-direction:column;display:flex;position:fixed;inset:0}.strudel-embed--fullscreen .strudel-embed__shell{border-radius:1.5rem;flex:1;min-height:0}.strudel-embed--fullscreen .strudel-embed__editor-surface{height:100%;min-height:0}.strudel-instructions>div{min-width:0}.strudel-instructions{z-index:2;isolation:isolate;position:relative}.strudel-instructions>div{z-index:1;position:relative}.strudel-experiment>[data-strudel-frame]{z-index:0;min-width:0;position:relative}.strudel-guide{gap:.7rem;min-height:18rem;margin-top:3rem;display:flex}.strudel-guide details{background:#17181414;border-radius:1.5rem;flex:1;min-width:0;min-height:0;padding:1.4rem;transition:flex .7s cubic-bezier(.32,.72,0,1),transform .7s cubic-bezier(.32,.72,0,1);overflow:hidden}.strudel-guide details[open]{z-index:1;color:#f5f5ed;background:#181914;flex:2;position:relative}.strudel-guide details:hover{transform:translateY(-4px)}.strudel-guide summary{cursor:pointer;justify-content:space-between;align-items:start;gap:1rem;min-height:3rem;font-size:1rem;list-style:none;display:flex}.strudel-guide summary::-webkit-details-marker{display:none}.strudel-guide summary>span:last-child{font-size:1.3rem;transition:transform .5s cubic-bezier(.32,.72,0,1)}.strudel-guide details[open] summary>span:last-child{transform:rotate(45deg)}.strudel-guide details p{color:#f5f5ed94;margin-top:4rem;font-size:.8rem;line-height:1.65}@media (width<=56rem){.strudel-experiment{grid-template-columns:1fr}.strudel-experiment__note{max-width:32rem}.strudel-embed__toolbar{flex-direction:column;align-items:start}.strudel-embed__presets{padding-left:.8rem}.strudel-embed__actions{width:100%;overflow-x:auto}.strudel-embed__shell{grid-template-columns:8.5rem minmax(0,1fr)}}@media (width<=40rem){.strudel-title-image{width:4.7rem;height:2.25rem}.strudel-experiment{padding-left:1rem;padding-right:1rem}.strudel-embed{border-radius:1.5rem}.strudel-embed__shell{border-radius:1.05rem;grid-template-columns:1fr;min-height:38rem}.strudel-embed__stage{min-height:38rem}.strudel-embed__editor-surface{height:38rem;min-height:38rem}.strudel-visualizer{border-bottom:1px solid #d8ff7321;border-right:0;grid-template-rows:1fr;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-height:8rem;padding:.85rem 1rem}.strudel-visualizer canvas{height:5rem}.strudel-visualizer__header{flex-direction:column}.strudel-visualizer__footer{align-items:end}.strudel-embed__actions :is(button,a){flex:none}.strudel-embed__hints{grid-template-columns:1fr}.strudel-embed__hints p:last-child{justify-content:start}.strudel-guide{flex-direction:column;min-height:0}.strudel-guide details,.strudel-guide details[open]{flex:none}.strudel-guide details p{margin-top:1.5rem}}@media (prefers-reduced-motion:reduce){.strudel-signal>div,.strudel-embed__state>span{animation:none}}
