.shape{--copy:clamp(330px,28vw,450px);--col-gap:clamp(48px,5.5vw,104px);--inst:clamp(620px,calc(100vw - var(--copy) - var(--col-gap) - 2*var(--gutter)),1040px);--wave-h:clamp(64px,calc(100svh*.14),168px);--graph-h:clamp(120px,calc(100svh*.25 - 16px),300px);--axis:26px;--pad:18px;--reveal:1;--play:0;--pv:0;--glow:0;--inst-x:calc(var(--gutter) + var(--copy) + var(--col-gap) + var(--inst)/2)}.h-mode .shape{width:max(100vw,calc(var(--copy) + var(--col-gap) + var(--inst) + 2*var(--gutter)))}.shape:before,.shape:after{content:"";pointer-events:none;z-index:0;position:absolute;inset:0}.shape:before{background:radial-gradient(calc(var(--inst)*.62) 58% at var(--inst-x) 54%,#d6a85c26,transparent 72%),radial-gradient(calc(var(--inst)*.9) 40% at var(--inst-x) 100%,#d6a85c17,transparent 70%),radial-gradient(125% 100% at var(--inst-x) 50%,#deb2681f,transparent 80%)}.shape:after{background:radial-gradient(calc(var(--inst)*.78) 66% at var(--inst-x) 56%,#ffcc7a2b,transparent 72%);opacity:var(--glow);transition:opacity 1.4s var(--ease);will-change:opacity}.shape[data-playing]:after{transition:none}.h-mode .shape{background:radial-gradient(min(28vw,420px) 62% at 0 52%,#deb26813 0% 8%,#deb26811 24%,#deb2680e 40%,#deb2680a 56%,#deb26805 72%,#deb26802 86%,#0000 100%),radial-gradient(min(28vw,420px) 64% at 100%,#deb26816 0% 8%,#deb26814 24%,#deb26810 40%,#deb2680b 56%,#deb26806 72%,#deb26802 86%,#0000 100%)}.shape:before,.shape:after{-webkit-mask-image:linear-gradient(90deg,#0000 calc(var(--edge,min(20vw,300px))*0),#0000000d calc(var(--edge,min(20vw,300px))*.15),#0000002e calc(var(--edge,min(20vw,300px))*.3),#00000080 calc(var(--edge,min(20vw,300px))*.5),#000000d1 calc(var(--edge,min(20vw,300px))*.7),#000000f2 calc(var(--edge,min(20vw,300px))*.85),#000 calc(var(--edge,min(20vw,300px))*1),#000 calc(100% - var(--edge,min(20vw,300px))*1),#000000f2 calc(100% - var(--edge,min(20vw,300px))*.85),#000000d1 calc(100% - var(--edge,min(20vw,300px))*.7),#00000080 calc(100% - var(--edge,min(20vw,300px))*.5),#0000002e calc(100% - var(--edge,min(20vw,300px))*.3),#0000000d calc(100% - var(--edge,min(20vw,300px))*.15),#0000 calc(100% - var(--edge,min(20vw,300px))*0));-webkit-mask-image:linear-gradient(90deg,#0000 calc(var(--edge,min(20vw,300px))*0),#0000000d calc(var(--edge,min(20vw,300px))*.15),#0000002e calc(var(--edge,min(20vw,300px))*.3),#00000080 calc(var(--edge,min(20vw,300px))*.5),#000000d1 calc(var(--edge,min(20vw,300px))*.7),#000000f2 calc(var(--edge,min(20vw,300px))*.85),#000 calc(var(--edge,min(20vw,300px))*1),#000 calc(100% - var(--edge,min(20vw,300px))*1),#000000f2 calc(100% - var(--edge,min(20vw,300px))*.85),#000000d1 calc(100% - var(--edge,min(20vw,300px))*.7),#00000080 calc(100% - var(--edge,min(20vw,300px))*.5),#0000002e calc(100% - var(--edge,min(20vw,300px))*.3),#0000000d calc(100% - var(--edge,min(20vw,300px))*.15),#0000 calc(100% - var(--edge,min(20vw,300px))*0));mask-image:linear-gradient(90deg,#0000 calc(var(--edge,min(20vw,300px))*0),#0000000d calc(var(--edge,min(20vw,300px))*.15),#0000002e calc(var(--edge,min(20vw,300px))*.3),#00000080 calc(var(--edge,min(20vw,300px))*.5),#000000d1 calc(var(--edge,min(20vw,300px))*.7),#000000f2 calc(var(--edge,min(20vw,300px))*.85),#000 calc(var(--edge,min(20vw,300px))*1),#000 calc(100% - var(--edge,min(20vw,300px))*1),#000000f2 calc(100% - var(--edge,min(20vw,300px))*.85),#000000d1 calc(100% - var(--edge,min(20vw,300px))*.7),#00000080 calc(100% - var(--edge,min(20vw,300px))*.5),#0000002e calc(100% - var(--edge,min(20vw,300px))*.3),#0000000d calc(100% - var(--edge,min(20vw,300px))*.15),#0000 calc(100% - var(--edge,min(20vw,300px))*0))}.v-mode .shape:before,.v-mode .shape:after{-webkit-mask-image:linear-gradient(#0000 0,#000 12% 88%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 12% 88%,#0000 100%)}.shape .panel-inner{z-index:1;grid-template-columns:var(--copy) var(--inst);column-gap:var(--col-gap);place-content:center start;align-items:center;display:grid}.shape .shape-copy{will-change:transform}.shape .shape-copy h2{margin:22px 0 24px}.shape .shape-copy h2 em{padding-right:.1em}.shape .shape-copy .lede{max-width:420px}.shape .shape-specs{border-top:1px solid var(--line-soft);max-width:420px;margin:30px 0 0}.shape .shape-specs div{border-bottom:1px solid var(--line-soft);grid-template-columns:104px minmax(0,1fr);align-items:baseline;gap:16px;padding:11px 0;display:grid}.shape .shape-specs dt{letter-spacing:.2em;text-transform:uppercase;color:#b39a70;font-size:9.5px;font-weight:600}.shape .shape-specs dd{color:var(--ink-2);margin:0;font-size:clamp(12px,.95vw,13px);line-height:1.5}.shape .shape-note{max-width:420px;color:var(--muted);border-left:1px solid #6f5a39;margin-top:24px;padding-left:14px;font-size:12px;line-height:1.65}.shape .shape-inst{z-index:1;width:var(--inst);-webkit-user-select:none;user-select:none;background:linear-gradient(160deg,#211d17,#121210 70%);border:1px solid #6b573a8c;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 0 0 5px #11100d,0 0 0 6px #4a3d2a4d,0 40px 100px -30px #000,0 0 90px -40px #d6a95840,inset 0 1px #ffe6b814;container-type:inline-size}.shape .shape-bar{letter-spacing:.18em;color:#9d8a6a;background:linear-gradient(#2a241b,#1c1914);border-bottom:1px solid #6b573a55;justify-content:space-between;align-items:center;gap:16px;padding:13px 22px;font-size:9.5px;display:flex}.shape .shape-bar-title{color:#f1dfbc;white-space:nowrap;align-items:center;gap:10px;font-weight:600;display:flex}.shape .shape-bar-title i{background:var(--gold);border-radius:50%;width:5px;height:5px;box-shadow:0 0 9px #ffc466}.shape .shape-hint b{white-space:nowrap;font-weight:500}.shape .hint-touch{display:none}@media (pointer:coarse){.shape .hint-fine{display:none}.shape .hint-touch{display:inline}}.shape .shape-section{padding:14px var(--pad) 0}.shape .shape-editor{border-top:1px solid #6b573a33;margin-top:16px;padding-bottom:4px}.shape .shape-head{align-items:center;gap:12px;min-height:30px;margin-bottom:12px;display:flex}.shape .shape-label{letter-spacing:.18em;text-transform:uppercase;color:#cdb285;white-space:nowrap;font-size:10px;font-weight:600}.shape .shape-label em{color:#9d8a6a;letter-spacing:.12em;margin-left:8px;font-style:normal;font-weight:500}.shape .shape-clock{font:12px var(--mono);font-variant-numeric:tabular-nums;color:#f1d9a8;white-space:nowrap;align-items:center;gap:8px;margin-left:auto;display:flex}.shape .shape-clock em{color:#9d8a6a;font-style:normal}.shape .shape-chip{font:600 8.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#a99471;border:1px solid #5a4a3399;border-radius:4px;margin-right:6px;padding:4px 7px}.shape .shape-row{grid-template-columns:var(--axis) minmax(0,1fr);padding-right:6px;display:grid}.shape .shape-axis{font:9.5px var(--mono);color:#9d8a6a}.shape .shape-lr{flex-direction:column;justify-content:space-around;padding:4px 0;display:flex}.shape .shape-btn{color:#e2d2b0;letter-spacing:.02em;white-space:nowrap;background:linear-gradient(#25211a,#181610);border:1px solid #4d412f;border-radius:6px;justify-content:center;align-items:center;gap:8px;height:30px;padding:0 12px;font-size:11px;font-weight:600;transition:border-color .3s,color .3s,background .3s,box-shadow .3s;display:inline-flex;box-shadow:inset 0 1px #ffffff0a}.shape .shape-btn:hover:not(:disabled){color:#fff0d2;border-color:#8a6f44}.shape .shape-btn[aria-pressed=true]{color:#ffe9c0;background:linear-gradient(#3b301f,#241d12);border-color:#c9a66a;box-shadow:inset 0 1px #ffe6b81f,0 0 18px -5px #f2c46f77}.shape .shape-btn:disabled{opacity:.38;cursor:default}.shape .shape-play{color:#f6dfb0;border-color:#8a6f44;min-width:76px;padding:0 14px 0 11px}.shape .shape-play svg{fill:currentColor;width:10px;height:10px}.shape .shape-play.on{color:#1d160b;background:linear-gradient(135deg,#fff0cf,#e6c68d 45%,#b08a54);border-color:#e6c68d;box-shadow:inset 0 1px #fffc,0 0 22px -6px #f2c46faa}.shape .shape-wave{height:var(--wave-h);background:repeating-linear-gradient(90deg,#f1d9a80c 0 1px,#0000 1px 12.5%),linear-gradient(#0c0c0a,#100f0d 50%,#0c0c0a);border:1px solid #3b3429;border-radius:8px;position:relative;overflow:hidden}.shape .shape-wave canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.shape .wave-base{clip-path:inset(0 calc((1 - var(--reveal))*100%) 0 0)}.shape .wave-lit{clip-path:inset(0 calc((1 - var(--play))*100%) 0 0);opacity:0;transition:opacity .9s var(--ease);filter:drop-shadow(0 0 5px #ffc76b66)}.shape[data-playing] .wave-lit{opacity:1;transition:none}.shape .shape-chip-wave{z-index:2;background:#0c0c0acc;margin:0;padding:3px 6px;display:none;position:absolute;top:6px;left:7px}.shape .shape-tools{flex-wrap:wrap}.shape .shape-quick{gap:6px;margin-left:auto;display:flex}.shape .shape-undo{margin-left:6px}.shape .shape-graph{padding-top:10px;position:relative}.shape .shape-plot{height:var(--graph-h);background:linear-gradient(#f1d9a816,#f1d9a816) 0/100% 1px no-repeat,repeating-linear-gradient(0deg,#0000 0 calc(25% - 1px),#f1d9a809 calc(25% - 1px) 25%),repeating-linear-gradient(90deg,#f1d9a812 0 1px,#0000 1px 12.5%),repeating-linear-gradient(90deg,#0000 0 6.25%,#f1d9a806 6.25% calc(6.25% + 1px),#0000 calc(6.25% + 1px) 12.5%),linear-gradient(#0e0e0c,#0b0b0a);border:1px solid #3b3429;border-radius:3px;position:relative}.shape .shape-plot svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.shape .curve-base{clip-path:inset(-14px calc((1 - var(--reveal))*100%) -14px 0)}.shape .curve-base .curve-area{fill:url(#shape-fill)}.shape .curve-line{fill:none;stroke:#e3c690;stroke-width:1.7px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.shape .curve-lit{clip-path:inset(-14px calc((1 - var(--play))*100%) -14px 0);opacity:0;transition:opacity .9s var(--ease)}.shape .curve-lit .curve-area{fill:url(#shape-fill-lit)}.shape .curve-lit .curve-line{stroke:#fff3da;stroke-width:2.2px;filter:drop-shadow(0 0 4px #ffc76b)}.shape[data-playing] .curve-lit{opacity:1;transition:none}.shape .shape-levels{font:9.5px var(--mono);color:#9d8a6a;pointer-events:none;position:absolute;top:0;bottom:0;right:calc(100% + 9px)}.shape .shape-levels span{position:absolute;right:0;transform:translateY(-50%)}.shape .shape-levels span:first-child{top:0}.shape .shape-levels span:nth-child(2){top:50%}.shape .shape-levels span:nth-child(3){top:100%;transform:translateY(-85%)}.shape .shape-times{height:26px;font:9.5px var(--mono);color:#9d8a6a;white-space:nowrap;position:relative}.shape .shape-times span{top:10px;left:calc(var(--i)*100%);position:absolute;transform:translate(-50%)}.shape .shape-playhead{pointer-events:none;transform:translate3d(calc(var(--play)*100%),0,0);opacity:0;transition:opacity .9s var(--ease);z-index:3;position:absolute;inset:0}.shape .shape-playhead:before{content:"";background:linear-gradient(#0000,#fff5e2 18% 82%,#0000);width:1px;position:absolute;top:-1px;bottom:-1px;left:0;box-shadow:0 0 12px 1px #ffc46e}.shape[data-playing] .shape-playhead{opacity:1;transition:none}.shape .shape-ride{transform:translate3d(0,calc((1 - var(--pv))*100%),0);position:absolute;inset:0}.shape .shape-ride:before{content:"";background:#fff6e4;border-radius:50%;width:10px;height:10px;position:absolute;top:-5px;left:-5px;box-shadow:0 0 0 3px #ffd89933,0 0 16px 3px #ffc46e}.shape .shape-pt{left:calc(var(--t)*100%);top:calc((1 - var(--v))*100%);z-index:4;touch-action:none;cursor:grab;width:13px;height:13px;opacity:clamp(0,calc((var(--reveal)*1.1 - var(--t))*14),1);background:#15130f;border:1.5px solid #e9cf9c;border-radius:50%;margin:-6.5px 0 0 -6.5px;padding:0;transition:background .25s,box-shadow .25s,border-color .25s;position:absolute;box-shadow:0 0 0 3px #0b0b0acc}.shape .shape-pt:before{content:"";border-radius:50%;position:absolute;inset:-12px}.shape .shape-pt:hover{border-color:#fff1d4;box-shadow:0 0 0 3px #0b0b0acc,0 0 14px #ffc46e88}.shape .shape-pt:active{cursor:grabbing}.shape .shape-pt[data-selected]{background:radial-gradient(circle at 40% 35%,#fff6e0,#e8c88c 60%,#b8904f);border-color:#fff3da;box-shadow:0 0 0 3px #0b0b0acc,0 0 0 7px #dcbd8629,0 0 18px 2px #ffc46e99}.shape .shape-pt:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:50%}.shape .shape-readouts{flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 0 14px;display:flex}.shape .shape-edit{gap:6px;display:flex}.shape .shape-field{align-items:center;gap:8px;display:flex}.shape .shape-field>span:first-child{letter-spacing:.18em;color:#9d8a6a;font-size:9px;font-weight:600}.shape .shape-field output{min-width:66px;height:30px;font:12px var(--mono);font-variant-numeric:tabular-nums;color:#f6e6c4;background:#0c0c0a;border:1px solid #3b3429;border-radius:6px;justify-content:center;align-items:center;padding:0 8px;display:inline-flex}.shape .shape-step{gap:4px;display:flex}.shape .shape-step button{color:#e2d2b0;background:#1b1813;border:1px solid #4d412f;border-radius:5px;width:24px;height:24px;padding:0;font-size:13px;line-height:1;transition:border-color .3s,color .3s}.shape .shape-step button:hover:not(:disabled){color:#fff0d2;border-color:#8a6f44}.shape .shape-step button:disabled{opacity:.35;cursor:default}.shape .shape-count{color:var(--muted);white-space:nowrap;margin-left:auto;font-size:11px;line-height:1.3}@container (max-width:760px){.shape .shape-label em{display:none}.shape .shape-readouts{gap:10px 14px}.shape .shape-field output{min-width:60px}}@container (max-width:520px){.shape .shape-bar{letter-spacing:.12em;gap:10px;padding:11px 14px;font-size:11px}.shape .shape-hint{letter-spacing:.1em}.shape .shape-label{letter-spacing:.14em;font-size:11px}.shape .shape-clock em{display:none}.shape .shape-chip-wave{letter-spacing:.12em;font-size:11px;display:block}.shape .shape-axis,.shape .shape-levels,.shape .shape-times{font-size:11px}.shape .shape-field>span:first-child{letter-spacing:.12em;font-size:11px}.shape .shape-hint span,.shape .shape-times span:nth-child(2n){display:none}.shape .shape-section{padding:12px 14px 0}.shape .shape-editor{margin-top:14px}.shape .shape-clock .shape-chip{display:none}.shape .shape-tools{grid-template-columns:1fr auto;row-gap:8px;display:grid}.shape .shape-quick{grid-area:2/1/auto/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0;display:grid}.shape .shape-quick .shape-btn{padding:0 4px;font-size:11px}.shape .shape-undo{grid-area:1/2;margin:0}.shape .shape-readouts{grid-template-columns:1fr 1fr;gap:10px;padding:8px 0 12px;display:grid}.shape .shape-edit{grid-area:1/1/auto/-1}.shape .shape-count{grid-area:1/1/auto/-1;place-self:center end}.shape .shape-field{gap:6px}.shape .shape-field output{flex:1;min-width:0;padding:0 4px;font-size:11px}}@media (max-width:560px){.shape{--copy:calc(100vw - 2*var(--gutter));--col-gap:calc(var(--gutter)*2 - 14px);--inst:calc(100vw - 28px);--wave-h:clamp(84px,calc(100svh*.14),150px);--graph-h:clamp(140px,calc(100svh*.25),250px);--axis:20px}.shape .shape-copy h2{margin:18px 0 20px}.shape .shape-specs{margin-top:24px}.shape .shape-specs div{grid-template-columns:100px minmax(0,1fr);gap:12px;padding:10px 0}.shape .shape-specs dt{letter-spacing:.1em;font-size:11px}.shape .shape-specs dd{font-size:12.5px}}.v-mode .shape{--inst:min(100%,920px);--wave-h:110px;--graph-h:190px;--inst-x:50%}.v-mode .shape .panel-inner{grid-template-columns:minmax(0,1fr);row-gap:40px}.v-mode .shape .shape-copy{max-width:600px}.v-mode .shape .shape-inst{width:100%;max-width:920px}@media (max-height:760px) and (min-width:561px){.shape .shape-copy h2{margin:16px 0 18px}.shape .shape-specs{margin-top:20px}.shape .shape-specs div{padding:8px 0}.shape .shape-note{margin-top:18px}.shape .shape-section{padding-top:11px}.shape .shape-editor{margin-top:12px}.shape .shape-head{margin-bottom:9px}}@media (max-height:680px) and (min-width:561px){.shape{--wave-h:clamp(48px,calc(100svh*.1),84px);--graph-h:clamp(96px,calc(100svh*.2 - 16px),160px)}.shape .shape-copy h2{margin:12px 0 14px}.shape .shape-specs{margin-top:14px}.shape .shape-specs div{padding:6px 0}.shape .shape-note{margin-top:14px}.shape .shape-section{padding-top:9px}.shape .shape-editor{margin-top:9px}.shape .shape-head{margin-bottom:7px}.shape .shape-graph{padding-top:6px}.shape .shape-readouts{padding:7px 0 10px}}@media (max-width:560px) and (max-height:720px){.shape{--wave-h:60px;--graph-h:108px}.shape .shape-section{padding-top:10px}.shape .shape-editor{margin-top:10px}.shape .shape-head{margin-bottom:8px}.shape .shape-graph{padding-top:6px}.shape .shape-readouts{row-gap:8px;padding:6px 0 10px}}