/* The volume is built from original CSS planes. Slow gated yaw follows the
   deliberate speed/direction choice; note/cone bursts keep a separate score. */
.k2-view-study{--k2-view-yaw:-32deg;--k2-view-pitch:-10deg;max-width:540px;min-width:0;margin:0;color:var(--body-text-on-dark,#c0dde5)}
.k2-view-study:has(input[value="front"]:checked){--k2-view-yaw:0deg;--k2-view-pitch:0deg}
.k2-view-study:has(input[value="side"]:checked){--k2-view-yaw:-82deg;--k2-view-pitch:-8deg}
.k2-view-stage{--k2-speaker-score:9s;position:relative;width:100%;height:360px;perspective:950px;perspective-origin:50% 43%;overflow:hidden;isolation:isolate;touch-action:pan-y;background:radial-gradient(ellipse at 50% 49%,#15556b55,transparent 65%)}
.k2-view-ready .k2-view-stage{cursor:grab}
.k2-view-study.k2-view-dragging .k2-view-stage{cursor:grabbing}
.k2-view-floor{position:absolute;width:235px;height:78px;left:50%;top:78%;transform:translate(-50%,-50%);border:1px solid #63d7d42c;border-radius:50%;background:radial-gradient(ellipse,#041a2699,transparent 68%);box-shadow:0 0 0 20px #63d7d405;pointer-events:none}
.k2-view-model{position:absolute;left:50%;top:49%;width:160px;height:225px;transform:translate(-50%,-50%) rotateX(var(--k2-view-pitch)) rotateY(var(--k2-view-yaw));transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.k2-view-dragging .k2-view-model,.k2-view-adjusting .k2-view-model,.k2-view-spinning .k2-view-model{transition:none}
.k2-view-face,.k2-view-handle{position:absolute;backface-visibility:hidden;box-sizing:border-box}
.k2-view-front,.k2-view-back{inset:0;border-radius:17px;border:1px solid #b9f4ed99}
.k2-view-front{transform:translateZ(42px);background:linear-gradient(130deg,#97dfd8,#4fa9b2 65%,#327d91);box-shadow:inset 3px 3px 6px #d5fff144,inset -3px -3px 5px #0a3c5366}
.k2-view-grille{position:absolute;inset:22px 15px 31px;border-radius:12px;border:1px solid #244b5988;background:radial-gradient(circle,#0a3348 1px,transparent 1.2px) 0 0/4px 4px,linear-gradient(135deg,#3e818d,#1c5268);box-shadow:inset 0 3px 10px #071c4566;overflow:hidden}
.k2-view-grille>i{position:absolute;left:50%;top:12px;width:72px;height:72px;transform:translateX(-50%) scale(1);border:1px solid #83d4d066;border-radius:50%;background:radial-gradient(circle,#123b4e99 0 17%,#4f929a44 18% 21%,#123b4e33 22% 52%,#75c9c333 53% 55%,transparent 56%);box-shadow:inset 0 0 0 12px #092f401c;animation:k2-view-cone-beats var(--k2-speaker-score) ease-in-out infinite;animation-play-state:paused}
.k2-view-grille>i+ i{top:102px;width:54px;height:54px}
/* Four emissions align with cone peaks at 7.2%, 13.2%, 19.2% and 25.2% of one
   9-second score. All notes have faded by 44.4%; the remaining score rests.
   Rescaled keyframes preserve burst timing while shortening only the quiet rest.
   Stage-local overlays rise independently of the user's model transform. */
.k2-view-notes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.k2-view-note{--note-origin:-18px;--note-drift:-62px;--note-tilt:-18deg;position:absolute;left:calc(50% - 14px);top:56%;width:28px;height:38px;color:#83e2db;opacity:0;transform:translate(var(--note-origin),0) scale(.7);animation:k2-view-note-one var(--k2-speaker-score) linear infinite;animation-play-state:paused;pointer-events:none}
.k2-view-note path{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.k2-view-note ellipse{fill:currentColor;stroke:none}
.k2-view-note:nth-child(2){--note-origin:20px;--note-drift:60px;--note-tilt:18deg;color:#3bc5f3;animation-name:k2-view-note-two}
.k2-view-note:nth-child(3){--note-origin:3px;--note-drift:78px;--note-tilt:12deg;color:#b1eee3;animation-name:k2-view-note-three}
.k2-view-note:nth-child(4){--note-origin:-8px;--note-drift:-76px;--note-tilt:-14deg;color:#63d7d4;animation-name:k2-view-note-four}
.k2-view-stage.ip-animation-active :is(.k2-view-note,.k2-view-grille>i){animation-play-state:running}
.k2-motion-paused .k2-view-stage :is(.k2-view-note,.k2-view-grille>i){animation-play-state:paused}
@keyframes k2-view-cone-beats{0%,4.8%,9.6%,10.8%,15.6%,16.8%,21.6%,22.8%,27.6%,100%{transform:translateX(-50%) scale(1);border-color:#83d4d066;box-shadow:inset 0 0 0 12px #092f401c}7.2%,13.2%,19.2%,25.2%{transform:translateX(-50%) scale(1.12);border-color:#a8eee1c9;box-shadow:inset 0 0 0 9px #6ccbc733,0 0 10px #63d7d425}}
@keyframes k2-view-note-one{0%,4.8%{opacity:0;transform:translate(var(--note-origin),0) scale(.7)}7.2%{opacity:.9;transform:translate(var(--note-origin),-8px) scale(.85)}14.4%{opacity:.85}26.4%,100%{opacity:0;transform:translate(var(--note-drift),-145px) rotate(var(--note-tilt)) scale(1.1)}}
@keyframes k2-view-note-two{0%,10.8%{opacity:0;transform:translate(var(--note-origin),0) scale(.7)}13.2%{opacity:.9;transform:translate(var(--note-origin),-8px) scale(.85)}20.4%{opacity:.85}32.4%,100%{opacity:0;transform:translate(var(--note-drift),-145px) rotate(var(--note-tilt)) scale(1.1)}}
@keyframes k2-view-note-three{0%,16.8%{opacity:0;transform:translate(var(--note-origin),0) scale(.7)}19.2%{opacity:.9;transform:translate(var(--note-origin),-8px) scale(.85)}26.4%{opacity:.85}38.4%,100%{opacity:0;transform:translate(var(--note-drift),-145px) rotate(var(--note-tilt)) scale(1.1)}}
@keyframes k2-view-note-four{0%,22.8%{opacity:0;transform:translate(var(--note-origin),0) scale(.7)}25.2%{opacity:.9;transform:translate(var(--note-origin),-8px) scale(.85)}32.4%{opacity:.85}44.4%,100%{opacity:0;transform:translate(var(--note-drift),-145px) rotate(var(--note-tilt)) scale(1.1)}}
.k2-view-front>b{position:absolute;left:60px;bottom:15px;width:40px;height:4px;border-radius:2px;background:#c6f2e2;box-shadow:0 1px 2px #234e5b55}
.k2-view-front>span{position:absolute;left:8px;top:10px;width:3px;height:3px;border-radius:50%;background:#d8f6e2}
.k2-view-front>span:nth-last-child(3){left:auto;right:8px}.k2-view-front>span:nth-last-child(2){top:auto;bottom:10px}.k2-view-front>span:last-child{left:auto;right:8px;top:auto;bottom:10px}
.k2-view-back{transform:rotateY(180deg) translateZ(42px);background:linear-gradient(125deg,#3b8394,#285d73);box-shadow:inset 0 0 0 8px #20556c55}
.k2-view-back>i{position:absolute;inset:23px 20px 54px;border:1px solid #64b5ba77;border-radius:10px;background:repeating-linear-gradient(0deg,transparent 0 8px,#123c4e88 8px 10px)}
.k2-view-back>b{position:absolute;left:63px;bottom:23px;width:34px;height:12px;border:2px solid #80c6c1;border-radius:3px;background:#082c40}
.k2-view-right,.k2-view-left{left:38px;top:0;width:84px;height:225px;border-radius:8px;background:linear-gradient(90deg,#3c8f9d,#327588);border:1px solid #79c7cb66}
.k2-view-right{transform:rotateY(90deg) translateZ(80px)}
.k2-view-left{transform:rotateY(-90deg) translateZ(80px);background:linear-gradient(90deg,#275c72,#3b8a99)}
.k2-view-right>i{position:absolute;left:30px;top:31px;width:24px;height:24px;border:1px solid #9ce1d5;border-radius:50%;background:#215a70;box-shadow:inset 1px 1px 3px #123e50}
.k2-view-right>b{position:absolute;left:33px;bottom:30px;width:18px;height:4px;border-radius:2px;background:#123c4d}
.k2-view-top,.k2-view-bottom{left:0;top:70.5px;width:160px;height:84px;border-radius:8px;border:1px solid #99dace88;background:linear-gradient(145deg,#8bd5ce,#3f91a1)}
.k2-view-top{transform:rotateX(90deg) translateZ(112.5px)}
.k2-view-bottom{transform:rotateX(-90deg) translateZ(112.5px);background:#204b61}
.k2-view-top>i{position:absolute;top:27px;left:48px;width:12px;height:12px;border:1px solid #c6f1de;border-radius:50%;background:#3c8c9c;box-shadow:0 1px 1px #16495c66}
.k2-view-top>i:nth-child(2){left:74px}.k2-view-top>i:nth-child(3){left:100px}
.k2-view-handle{left:25px;top:-43px;width:110px;height:52px;border:10px solid #91d8d0;border-bottom:0;border-radius:18px 18px 0 0;transform:translateZ(8px);backface-visibility:visible;box-shadow:inset 1px 1px 0 #d3fae6}
.k2-view-handle-back{transform:translateZ(-8px);border-color:#397e91;box-shadow:none}
.k2-view-study .k2-view-instruction{margin:0 0 22px;color:var(--body-text-on-dark,#c0dde5);font-size:1rem;line-height:1.65}
.k2-view-instruction strong,.k2-view-instruction span{display:block}.k2-view-instruction strong{font-weight:600;margin-bottom:2px}
.k2-view-presets{display:grid;grid-template-columns:.8fr 1.35fr .8fr;gap:7px;padding:0;margin:0;border:0;min-width:0}
.k2-view-presets legend{padding:0;margin-bottom:10px;font-size:.875rem;line-height:1.5;font-weight:600}
.k2-view-presets label{position:relative;display:flex;min-width:0;cursor:pointer}
.k2-view-presets input{position:absolute;width:1px;height:1px;opacity:0}
.k2-view-presets label>span{display:flex;justify-content:center;align-items:center;min-height:46px;width:100%;padding:10px 8px;border:1px solid #447383;color:#c0dde5;font-size:.875rem;line-height:1.4;text-align:center;transition:background-color .25s,border-color .25s,color .25s}
.k2-view-presets input:checked+span{border-color:#63d7d4;background:#164f62;color:#fff;box-shadow:inset 0 -2px #63d7d4}
.k2-view-presets label:hover>span{border-color:#63d7d4}
.k2-view-presets input:focus-visible+span{outline:2px solid #3bc5f3;outline-offset:3px;color:#fff}
.k2-view-actions{display:flex;align-items:flex-start;gap:16px;margin-top:12px}
/* Match the two header rows, even while the Fine-tune body is expanded. */
.k2-view-fine summary,.k2-view-reset{min-height:44px;padding:8px 0}
.k2-view-fine{display:none;min-width:0;flex:1}
.k2-view-ready .k2-view-fine{display:block}
.k2-view-fine summary{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;cursor:pointer;border-bottom:1px solid #447383;font-size:.875rem;line-height:1.5;color:#c0dde5}
.k2-view-fine summary::-webkit-details-marker{display:none}
.k2-view-fine summary>span,.k2-view-reset>span{display:grid;place-items:center;flex:none;width:24px;height:24px;font-size:22px;line-height:1;color:#63d7d4}
.k2-view-fine summary>span{transition:transform .25s}.k2-view-fine[open] summary>span{transform:rotate(45deg)}
.k2-view-fine summary:hover,.k2-view-fine summary:focus-visible{color:#3bc5f3}
.k2-view-fine summary:focus-visible,.k2-view-reset:focus-visible,.k2-view-fine input:focus-visible,.k2-view-reverse:focus-visible{outline:2px solid #3bc5f3;outline-offset:4px}
.k2-view-fine>div{padding-top:14px;display:grid;gap:10px}
.k2-view-fine label{font-size:.875rem;line-height:1.5}.k2-view-fine label>span{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}.k2-view-fine output{color:#c0dde5;font-variant-numeric:tabular-nums}
.k2-view-fine input{display:block;width:100%;height:44px;margin:0;accent-color:#63d7d4;cursor:ew-resize;touch-action:pan-y}
.k2-view-reverse{min-height:44px;width:100%;padding:10px 12px;border:1px solid #447383;background:transparent;color:#c0dde5;font:inherit;font-size:.875rem;line-height:1.5;cursor:pointer;transition:border-color .25s,color .25s}
.k2-view-reverse:hover,.k2-view-reverse:focus-visible{color:#3bc5f3;border-color:#3bc5f3}
.k2-view-reset{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;margin:0;border:0;border-bottom:1px solid #447383;background:none;font:inherit;font-size:.875rem;line-height:1.5;color:#c0dde5;cursor:pointer}
.k2-view-reset:hover,.k2-view-reset:focus-visible{color:#3bc5f3}
@media(max-width:1100px) and (min-width:851px){.k2-view-presets{grid-template-columns:1fr}.k2-view-stage{height:330px}}
@media(max-width:600px){.k2-view-study{max-width:100%}.k2-view-stage{height:330px}.k2-view-model{transform:translate(-50%,-50%) scale(.93) rotateX(var(--k2-view-pitch)) rotateY(var(--k2-view-yaw))}.k2-view-actions{gap:10px}.k2-view-fine summary,.k2-view-reset{gap:8px}.k2-view-presets{gap:5px}.k2-view-presets label>span{padding:10px 5px}}
@media(prefers-reduced-motion:reduce){.k2-view-study *{transition:none!important}.k2-view-note,.k2-view-grille>i{animation:none!important}.k2-view-notes{display:none}}
@supports not (transform-style:preserve-3d){.k2-view-model{transform:translate(-50%,-50%)}.k2-view-face:not(.k2-view-front),.k2-view-handle-back{display:none}.k2-view-presets,.k2-view-actions{display:none}.k2-view-ready .k2-view-stage{cursor:default}}
