.projects-recorder-main{flex-direction:column;height:100svh;padding-top:clamp(72px,9svh,104px);padding-bottom:12px;display:flex;overflow:clip}.projects-recorder-intro{width:var(--site-content-width);margin-inline:auto;flex-shrink:0;margin-bottom:clamp(16px,2.4svh,28px)}.projects-recorder-intro h1{font-family:var(--font-display);letter-spacing:-.04em;font-size:clamp(2rem,2.5vw,4.5rem);font-weight:650;font-stretch:110%;line-height:1.15}.cassette-playground{--recorder-width:min(var(--site-content-width), calc((100svh - 150px) * 1.9));isolation:isolate;flex:1;grid-template-rows:auto minmax(0,1fr);width:100%;min-height:0;display:grid;position:relative;container-type:inline-size}.cassette-explore-hint{left:50%;top:calc(var(--recorder-width) * .19);z-index:6;border:1px solid var(--border);background:var(--background);width:min(30rem,100% - 2rem);color:var(--foreground);font-family:var(--font-mono);pointer-events:none;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.7rem;line-height:1.6;display:flex;position:absolute;transform:translate(-50%)}.cassette-explore-hint p span{color:var(--dim)}.cassette-explore-hint button{pointer-events:auto;flex-shrink:0;place-items:center;width:44px;height:44px;font-size:1.3rem;display:grid}.cassette-explore-hint button:focus-visible{outline:1px solid}.project-recorder{width:var(--recorder-width);aspect-ratio:1530/389;color:var(--foreground);margin-inline:auto;position:relative;container-type:inline-size}.project-recorder-shell{pointer-events:none;opacity:.75;width:100%;height:100%;display:block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1530 389'%3E%3Cpath fill='white' d='M0 0h1530v389H0z'/%3E%3Cpath fill='black' d='M45 70h265v82H45zM374 55h783v103H374zM1220 70h268v82h-268zM467 207h597v117H467z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1530 389'%3E%3Cpath fill='white' d='M0 0h1530v389H0z'/%3E%3Cpath fill='black' d='M45 70h265v82H45zM374 55h783v103H374zM1220 70h268v82h-268zM467 207h597v117H467z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-source-type:luminance;mask-mode:luminance}.recorder-slot{border:1px solid color-mix(in srgb, var(--foreground) 65%, transparent);width:50.9804%;height:25.7069%;color:var(--dim);font-family:var(--font-mono);border-radius:.78cqw;place-items:center;font-size:max(11px,1.05cqw);transition:border-color .22s ease-out;display:grid;position:absolute;top:14.5244%;left:24.5425%}.project-recorder[data-status=DETECTED] .recorder-slot,.project-recorder[data-status=LOAD] .recorder-slot{border-color:var(--foreground)}.recorder-control,.recorder-track-decoration{width:5.0545%;height:21%;font-family:var(--font-mono);color:var(--dim);background:0 0;border:0;flex-direction:column;align-items:center;padding:0;font-size:max(11px,1.05cqw);line-height:1;display:flex;position:absolute;top:19.0231%}.recorder-control>span:first-child,.recorder-track-decoration>span:first-child{border:1px solid color-mix(in srgb, var(--foreground) 24%, transparent);font-variant-emoji:text;border-radius:.27cqw;flex-shrink:0;place-items:center;width:100%;height:59%;font-family:sans-serif;font-size:1.5cqw;display:grid}.recorder-control>span:last-child,.recorder-track-decoration>span:last-child{padding-top:.8cqw}.recorder-control:disabled,.recorder-track-decoration{opacity:.38;cursor:default}.recorder-control:not(:disabled):hover,.recorder-control:focus-visible{color:var(--foreground)}.recorder-track-decoration{width:7.9739%;left:3.2353%}.recorder-project-led{pointer-events:none;border-radius:50%;width:.5cqw;height:.5cqw;position:absolute;top:25.2181%;left:9.25%;transform:translateY(-50%)}.recorder-project-led[data-lit=true]{background:var(--project-led-color);box-shadow:0 0 8px color-mix(in srgb, var(--project-led-color) 65%, transparent)}.recorder-eject{width:7.9739%;left:11.9935%}.recorder-eject>span:first-child{transition:color .2s,border-color .2s,box-shadow .2s,background .2s}.project-recorder[data-needs-eject=true] .recorder-eject{color:var(--foreground)}.project-recorder[data-needs-eject=true] .recorder-eject>span:first-child{border-color:var(--foreground);background:color-mix(in srgb, var(--foreground) 12%, transparent);box-shadow:0 0 16px color-mix(in srgb, var(--foreground) 24%, transparent)}.recorder-feet{display:none}.recorder-rew{left:80.098%}.project-recorder .recorder-play{left:85.9366%;translate:none}.recorder-forward{left:91.7758%}.recorder-display{text-align:center;width:39.2157%;height:30.8483%;font-family:var(--font-mono);grid-template-columns:repeat(3,1fr);align-items:center;font-size:max(11px,1.05cqw);line-height:1.5;display:grid;position:absolute;top:52.8278%;left:30.4248%}.recorder-display>div{color:var(--dim);gap:.15em;display:grid}.recorder-display>div>span:first-child{opacity:.45}.cassette-grid{border-top:1px solid var(--border);pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='72' viewBox='0 0 80 72'%3E%3Cpath d='M28 36h24M40 24v24' stroke='%23888888' stroke-opacity='.3' stroke-width='1'/%3E%3C/svg%3E");background-position:0 18px;min-height:0;position:relative}.cassette-objects{pointer-events:none;position:absolute;inset:0}.project-cassette{width:calc(var(--recorder-width) * .497);aspect-ratio:761/77;pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab;will-change:transform;text-align:left;transform-origin:50%;background:0 0;border:0;border-radius:.8vw;padding:0;position:absolute;top:0;left:0;container-type:inline-size}.cassette-playground:not([data-physics-ready=true]) .project-cassette{visibility:hidden}.project-cassette[data-held=true]{z-index:4;cursor:grabbing}.project-cassette:hover,.project-cassette:focus-visible{z-index:3}.project-cassette:focus-visible{outline:2px solid var(--foreground);outline-offset:5px}.project-cassette-visual,.project-cassette-outline,.project-cassette-physical{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.project-cassette-visual{transition:transform .22s cubic-bezier(.2,.65,.3,1)}.project-cassette-outline{opacity:1;color:var(--foreground);transition:opacity .22s ease-out,transform .22s ease-out,filter .22s ease-out}.project-cassette-outline>img{width:100%;height:100%}.project-cassette-number,.project-cassette-title,.project-cassette-meta{position:absolute;top:50%;transform:translateY(-50%)}.project-cassette-number{text-align:center;width:11.63%;font:150 3.25cqw / 1 var(--font-display);color:var(--dim);font-stretch:110%;left:0}.project-cassette-title{font-family:var(--font-display);letter-spacing:-.04em;white-space:nowrap;font-size:3.6cqw;font-weight:650;font-stretch:110%;line-height:1;left:16.9%}.project-cassette-meta{font-family:var(--font-mono);gap:.1em;font-size:1.45cqw;font-weight:300;font-stretch:80%;line-height:1.15;display:grid;left:60.85%}.project-cassette-meta>span:first-child{color:var(--dim)}.project-cassette-physical{opacity:0;transition:opacity .22s ease-out,transform .22s ease-out,filter .22s ease-out;transform:scale(.985)}.project-cassette-physical picture{width:100%;height:100%;display:block}.project-cassette-image{object-fit:fill;width:100%;height:100%}.project-cassette[data-ready=true]:is(:hover,:focus-visible,[data-held=true]) .project-cassette-outline{opacity:0;filter:contrast(.9);transform:scale(.992)}.project-cassette[data-ready=true]:is(:hover,:focus-visible,[data-held=true]) .project-cassette-physical{opacity:1;filter:brightness(1.035)drop-shadow(0 5px 5px #0006);transform:scale(1)}.project-cassette[data-held=true] .project-cassette-visual{transform:scale(1.018)}.cassette-playground:is([data-phase=capturing],[data-phase=playing],[data-phase=ejecting]) .project-cassette[data-held=true] .project-cassette-visual{transform:scale(1)}.cassette-fallback{gap:1rem;display:grid;position:absolute;inset:50% 1rem auto}.cassette-playground[data-fallback=true] .cassette-objects{display:none}@media (width<=1023px),(width<=1279px) and (orientation:portrait){.projects-recorder-main{min-height:690px;padding-top:64px;padding-bottom:54px}.projects-recorder-intro{margin-bottom:clamp(24px,4svh,40px)}.projects-recorder-intro h1{font-size:clamp(1.5rem,6.4vw,2rem)}.cassette-playground{min-height:0}.project-recorder{aspect-ratio:auto;width:92%;height:clamp(184px,24svh,210px)}.cassette-explore-hint{width:82%;padding:.3rem .6rem;font-size:.625rem;top:calc(clamp(184px,24svh,210px)/1.42857)}.cassette-explore-hint p span{display:none}.project-recorder:before{content:"";border:1px solid var(--border);pointer-events:none;border-radius:10px;position:absolute;inset:0 0 9px}.recorder-feet{pointer-events:none;justify-content:space-between;height:10px;display:flex;position:absolute;bottom:0;left:5%;right:5%}.recorder-feet>span{border:1px solid var(--border);border-top:0;border-radius:0 0 4px 4px;width:11%}.project-recorder-shell,.recorder-track-decoration{display:none}.recorder-slot{border-radius:7px;width:94%;height:24%;min-height:32px;font-size:10px;top:10%;left:3%}.recorder-control{width:18%;height:29%;font-size:10px;top:38%}.recorder-control>span:first-child{border-radius:3px;min-height:26px;font-size:18px}.recorder-control>span:last-child{padding-top:7px}.recorder-eject{left:6%}.recorder-rew{left:29%}.project-recorder .recorder-play{left:52%}.recorder-forward{left:75%}.recorder-display{width:90%;height:16%;font-size:10px;top:70%;left:5%}.recorder-project-led{width:5px;height:5px;top:20%;left:auto;right:5%;transform:none}.project-cassette{touch-action:none;cursor:grab;width:calc(100% - 8px)}.project-cassette[data-held=true] .project-cassette-visual{transform:scale(1.065)}.project-cassette:not([data-held=true]):not(:focus-visible) .project-cassette-outline{opacity:1;filter:none;transform:none}.project-cassette:not([data-held=true]):not(:focus-visible) .project-cassette-physical{opacity:0}}@media (width>=768px) and (width<=1023px),(width>=768px) and (width<=1279px) and (orientation:portrait){.projects-recorder-main{min-height:860px;padding-top:88px;padding-bottom:24px}.projects-recorder-intro h1{font-size:2rem}.project-recorder{width:min(92%,680px);height:clamp(220px,24svh,260px)}.cassette-explore-hint{width:min(82%,600px);font-size:.75rem;top:calc(clamp(220px,24svh,260px)/1.42857)}.recorder-slot,.recorder-control,.recorder-display{font-size:12px}.project-cassette{width:640px}}.cassette-playground[data-reduced=true] .project-cassette{touch-action:pan-y}.cassette-playground[data-reduced=true] .project-cassette-visual{transition:none}@media (prefers-reduced-motion:reduce){.project-cassette-visual{transition:none}}.recorder-control .control-icon{width:max(16px,1.3cqw);height:max(16px,1.3cqw)}@media (width<=1023px),(width<=1279px) and (orientation:portrait){.recorder-control .control-icon{width:18px;height:18px}}.negative .project-recorder-shell,.negative .project-cassette-outline>img{filter:invert()}.recorder-play:not(:disabled)>span:first-child{color:var(--background);background:var(--foreground);border-color:var(--foreground)}.recorder-play:not(:disabled):is(:hover,:focus-visible)>span:first-child{background:color-mix(in srgb, var(--foreground) 88%, var(--background))}.recorder-control:focus-visible{outline:2px solid var(--foreground);outline-offset:4px}