/* Object and paper: approved 04-offset-crank. Carpet: requested Box5 trial. */
body main.ritual-room.melody[data-melody-instrument=box]{--melody-ink:#dab4ef;--melody-rgb:209,164,240;--accent:var(--melody-ink);--module-accent:var(--melody-ink);--sentence-gold:var(--melody-ink);--navigation-ink:var(--melody-ink);color:var(--melody-ink);background:radial-gradient(ellipse at 47% 37%,#25132988,#100914b3 95%),url("material/box-carpet.png") center/620px;overflow-x:clip;overflow-y:auto;}
/* The room's generic background transition must not animate the carpet's position.
   Anchor both layers to the viewport, independent of the instrument's arrival. */
body main.ritual-room.melody[data-melody-instrument=box]{transition:none;background-position:0 0;background-attachment:fixed;}
body[data-member-studio] main.melody[data-melody-instrument=box]>.room-content{padding:0!important;min-height:0;overflow:visible;display:flex;align-items:stretch;justify-content:center;}
.melody-box-panel{width:100vw;max-width:none;flex-shrink:0;height:100%;min-height:0;box-sizing:border-box;position:relative;padding:0;color:#dab4ef;}
.mb-scene{--reader-height:610px;--reader-scale:.792;--reader-width:calc(var(--reader-height)*.504816);--reader-left:clamp(0px,.65vw,18px);--reader-top:18px;--paper-top:calc(var(--reader-top) + var(--reader-height)*.195);--paper-height:calc(var(--reader-height)*.43);position:relative;height:100%;width:100%;isolation:isolate;}
.mb-reader{position:absolute;left:var(--reader-left);top:var(--reader-top);height:var(--reader-height);width:var(--reader-width);object-fit:contain;pointer-events:none;user-select:none;}
/* Contact follows the wood's footprint; broad ambient shade comes from its alpha. */
.mb-ground-contact{position:absolute;z-index:0;pointer-events:none;left:calc(var(--reader-left) + var(--reader-width)*.105);top:calc(var(--reader-top) + var(--reader-height)*.075);width:calc(var(--reader-width)*.79);height:calc(var(--reader-height)*.825);}
.mb-ground-contact::after{content:"";position:absolute;left:2%;right:-5%;bottom:-11px;height:30px;border-radius:50%;background:radial-gradient(ellipse,#0b0714ad 0%,#0d08185c 42%,#10091400 74%);filter:blur(4px);transform:rotate(-2deg);}
.mb-reader-base{z-index:1;filter:drop-shadow(2px 4px 2px #10091466) drop-shadow(6px 12px 9px #0c08184d);}
/* The identical native cutout is split by a geometry mask: wood below, metal above. */
.mb-reader-front{z-index:3;clip-path:polygon(38% 11%,79% 11%,79% 19.5%,63% 19.5%,63% 64%,79% 64%,79% 79%,38% 79%);}
.mb-paper{position:absolute;z-index:2;left:0;top:var(--paper-top);height:var(--paper-height);width:100%;display:block;cursor:crosshair;touch-action:pan-y;box-shadow:0 34px 39px -9px #080509a8,0 13px 19px -8px #0805096b,0 1px 1px #e5d3b948;}
.mb-proposal-ink{position:absolute;z-index:2;left:0;top:var(--paper-top);height:var(--paper-height);width:100%;pointer-events:none;}
.mb-paper.is-dragging{cursor:grabbing;touch-action:none;}
.mb-reading-line{position:absolute;z-index:4;pointer-events:none;left:calc(var(--reader-left) + var(--reader-width)*.78);top:calc(var(--paper-top) + 6px);height:calc(var(--paper-height) - 12px);width:1px;background:#dba6f4;box-shadow:0 0 6px 1px #c781ef77;}
.mb-crank{position:absolute;z-index:4;pointer-events:none;width:calc(200px*var(--reader-scale));height:calc(210px*var(--reader-scale));left:calc(var(--reader-left) + var(--reader-width)*.635 - 70px*var(--reader-scale));top:calc(var(--reader-top) + var(--reader-height)*.824 - 5.5px*var(--reader-scale));}
.mb-tempo{position:absolute;z-index:4;top:calc(var(--reader-top) + var(--reader-height)*.058 - 29px);left:var(--reader-left);width:var(--reader-width);text-align:center;font:500 16px/1.4 ui-monospace,monospace;letter-spacing:.025em;color:#edcffb;text-shadow:0 1px 3px #110a15;}
.mb-tempo span{font-size:12px;opacity:.85;}
.mb-overview{position:absolute;z-index:5;left:50%;transform:translateX(-50%);width:min(760px,52vw);top:calc(var(--paper-top) - 62px);height:40px;box-sizing:border-box;}
.mb-overview-canvas{position:absolute;inset:0;width:100%;height:40px;pointer-events:none;border:1px solid #b893c845;border-radius:7px;box-sizing:border-box;background:#180f1c66;}
.mb-window{position:absolute;top:0;height:40px;box-sizing:border-box;border-bottom:2px solid #d5b4e3a6;background:#d2a9e212;pointer-events:none;}
.mb-position{position:absolute;left:0;top:-5px;width:100%;height:50px;margin:0;opacity:0;cursor:ew-resize;touch-action:none;}
.mb-position:active{cursor:grabbing;}.mb-overview:has(.mb-position:focus-visible) .mb-overview-canvas{outline:2px solid #dfb4f5;outline-offset:4px;}
.mb-playhead{position:absolute;z-index:2;top:5px;height:30px;width:2px;border-radius:2px;background:#f5dfff;pointer-events:none;box-shadow:0 0 5px #e8bbff44;}
.mb-controls{position:absolute;z-index:5;top:calc(var(--paper-top) + var(--paper-height) + 30px);left:50%;transform:translateX(-50%);width:min(760px,56vw);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.mb-listen{display:flex;align-items:center;gap:9px;flex-shrink:0;}
body main.melody [data-box=play]{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px!important;min-width:112px;width:124px;padding:9px 18px!important;border:1px solid #dab4ef9c!important;border-radius:10px!important;background:linear-gradient(180deg,#d7abe82b,#c494df0c)!important;color:#e8c4fa!important;box-shadow:inset 0 1px #f7dfff16,0 3px 8px #0d071923!important;font-family:inherit;font-weight:600;font-size:15px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;transition:background .18s,color .18s,transform .18s;}
body main.melody [data-box=play]:hover:not(:disabled){background:#d4a6ee29!important;color:#f4dfff!important;}body main.melody [data-box=play]:active:not(:disabled){transform:translateY(1px);}
body main.melody .mb-position-button{display:flex;align-items:center;justify-content:center;gap:6px;width:44px!important;min-width:44px!important;min-height:46px!important;padding:6px 10px!important;border:1px solid transparent!important;border-radius:6px!important;background:transparent!important;color:#d6c0e0!important;box-shadow:none!important;font:13px/1.3 Arial,sans-serif;white-space:nowrap;}
body main.melody .mb-position-button:hover:not(:disabled){background:#dfc0eb17!important;border-color:#d6c0e04a!important;}
.mb-listen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.mb-tools{display:flex;align-items:center;gap:5px;padding-left:22px;border-left:1px solid #c4a3d334;}
.mb-secondary-controls{display:flex;align-items:center;gap:12px;}
/* Direct sound control: one mute icon and a thin horizontal slider. */
.mb-volume{display:flex;align-items:center;gap:0;flex:none;}
body main.melody .mb-volume button{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-height:44px;padding:10px;border:0;border-radius:50%;background:transparent;color:#dab4ef;cursor:pointer;}
body main.melody .mb-volume button:hover{background:#d4a4eb12;}
.mb-volume svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.mb-volume-range{--volume-fill:0%;appearance:none;-webkit-appearance:none;width:64px;height:44px;padding:0;margin:0;background:transparent;cursor:pointer;accent-color:#dab4ef;flex:none;}
.mb-volume-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#dab4ef var(--volume-fill),#dab4ef45 var(--volume-fill));}
.mb-volume-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border:0;border-radius:50%;background:#e4c1f4;margin-top:-3.5px;}
.mb-volume-range::-moz-range-track{height:3px;border:0;border-radius:2px;background:#dab4ef45;}
.mb-volume-range::-moz-range-progress{height:3px;border-radius:2px;background:#dab4ef;}
.mb-volume-range::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#e4c1f4;}
@media(max-width:1600px){.mb-tools-label,.mb-note-info{display:none;}}
body main.melody .mb-tools button{height:44px!important;width:44px!important;min-height:44px!important;padding:9px!important;min-width:44px!important;border:0!important;border-radius:12px!important;background:transparent!important;color:#d6a7ec!important;box-shadow:none!important;}
body main.melody .mb-tools button:hover:not(:disabled){background:#d4a4eb12!important;}
.mb-tools-label{font:11px/1.3 Arial,sans-serif;color:#bba3c6;margin-right:7px;white-space:nowrap;}
.mb-tools svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;}
.mb-tools button:disabled{opacity:.28;cursor:default;}
.mb-note-info{font:12px/1.4 ui-monospace,monospace;color:#dfc4ed;min-width:74px;}
.mb-hover-label{position:absolute;z-index:5;pointer-events:none;border-radius:3px;background:#f8efdfeb;color:#755280;font:11px/1.5 ui-monospace,monospace;padding:1px 5px;}
.mb-cta{position:absolute;left:0;right:0;bottom:clamp(24px,3vh,42px);z-index:6;display:flex;align-items:center;flex-direction:column;padding:0 20px;}

body main.melody .mb-cta>.voice-submit-btn{--action-fill:#d4a6f4;--action-hover-fill:#e4bdff;--action-disabled-fill:#d4a6f4;--action-wave-rgb:209,164,240;margin:0!important;min-height:62px!important;min-width:270px;background:#d4a6f4!important;color:#271333!important;border:0!important;}
body main.melody .mb-cta>.voice-submit-btn:disabled:not(.given){opacity:.7;}
.mb-status{margin:12px 0 0;min-height:18px;max-width:600px;text-align:center;font:12px/1.5 Arial,sans-serif;color:#d2badf;}
.mb-status.is-error{color:#edbca6;}.mb-retry{font-size:12px;color:inherit;}
.mb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.melody-box-panel :focus-visible{outline:2px solid #e9bdff;outline-offset:5px;}
.melody-box-wip-controls{padding:10px;font:12px/1.5 Arial,sans-serif;}.melody-box-wip-controls a{color:inherit;text-decoration:underline;}
@media(max-width:1100px){.mb-tools-label{display:none;}.mb-controls{width:60vw;gap:12px;}.mb-tools{padding-left:12px;}.mb-note-info{min-width:0;}.mb-overview{width:60vw;}}
@media(max-height:850px){.mb-controls{top:calc(var(--paper-top) + var(--paper-height) + 22px);}.mb-cta{bottom:18px;}body main.melody .mb-cta>.voice-submit-btn{min-height:52px!important;}.mb-status:empty{display:none;}}
@media(max-width:800px){.mb-overview{width:68vw;}.mb-controls{width:80vw;gap:10px;}.mb-tools-label,.mb-note-info{display:none;}.mb-tools{padding-left:8px;}.mb-position-button span{display:none;}.mb-tempo{font-size:14px;}}
@media(prefers-reduced-motion:reduce){body main.melody [data-box=play]{transition:none;}body main.melody [data-box=play]:hover{transform:none;}}

/* Fifteen actual reading fingers. Row positions come from the paper geometry. */
.mb-reader-contacts{position:absolute;z-index:5;pointer-events:none;}
/* Photographic nickel brace, using the native generated alpha and its bevel. */
.mb-reader-contacts::after{--cap-height:max(8px,calc(var(--reader-height)*.016));content:"";position:absolute;left:-6px;right:-4px;height:var(--cap-height);bottom:calc(2px - var(--cap-height));background:url("material/box-bridge.png") center/104.93% 373.2% no-repeat;filter:drop-shadow(.4px .8px .45px #21181054);}
/* Paper starts beneath the native photographed upper rim; no added upper cap. */
.mb-reader-shaft{position:absolute;left:-4px;top:0;bottom:0;width:7px;pointer-events:none;}
.mb-reader-shaft::before{content:"";position:absolute;left:0;top:var(--paper-height);width:var(--paper-height);height:7px;transform:rotate(-90deg);transform-origin:0 0;background:url("material/box-bridge.png") center/104.93% 373.2% no-repeat;filter:drop-shadow(.4px 1px .6px #21181066);}
.mb-contact{position:absolute;left:3px;right:0;height:0;--flash:0;}
.mb-contact-arm{display:block;position:absolute;left:-4px;right:-2px;top:calc(var(--tooth-height)*-.78);height:var(--tooth-height);background:url("material/box-finger.png") 51.77% 48.04%/111.62% 197.81% no-repeat;filter:drop-shadow(1px 2.6px 1.4px #21181085);transform:translateY(calc(var(--flash)*.6px));}
.mb-contact-tip{position:absolute;right:-3px;top:-4px;width:6px;height:8px;background:transparent;}
.mb-contact-light{position:absolute;right:-22px;top:-22px;width:44px;height:44px;opacity:var(--flash);background:radial-gradient(circle,#fff7ff 0 4%,#e9bfffdd 7%,#c180ed80 20%,#cf94ec25 45%,transparent 70%);mix-blend-mode:screen;}
/* The exit guide uses photographed nickel. Reading tips remain individually free;
   only their roots share a shaft and the two support caps. */
.mb-paper-mouth{position:absolute;pointer-events:none;z-index:4;width:var(--guide-width);}
.mb-paper-mouth::before{content:"";position:absolute;left:0;top:var(--mouth-length);width:var(--mouth-length);height:var(--guide-width);transform:rotate(-90deg);transform-origin:0 0;background:url("material/box-bridge.png") center/104.93% 373.2% no-repeat;filter:drop-shadow(.6px 1px .6px #21181057);}
.mb-paper-exit::before{filter:drop-shadow(.4px .7px .5px #21181040);}

.mb-solo-count{margin:12px 0 0;color:#cbb1d6;font:12px/1.4 ui-monospace,monospace;}
@media(max-width:699px),(orientation:portrait){
 .mb-overview{left:148px;right:16px;transform:none;width:auto;top:calc(var(--paper-top) - 66px);}
 .mb-tempo{left:18px;width:auto;top:calc(var(--reader-top) + var(--reader-height)*.058 - 24px);font-size:13px;}
 .mb-controls{left:auto;right:14px;transform:none;width:calc(100% - 142px);top:calc(var(--paper-top) + var(--paper-height) + 24px);flex-direction:column;gap:10px;}
 .mb-listen{gap:4px;}
 body main.melody [data-box=play]{width:104px;min-width:104px;min-height:48px!important;padding-inline:12px!important;}
 body main.melody .mb-position-button{padding-inline:6px!important;min-width:40px;}
 .mb-position-button span,.mb-tools-label,.mb-note-info{display:none;}
 .mb-tools{border:0;padding:0;gap:6px;}
 .mb-cta{left:0;right:0;top:var(--mobile-cta-top);bottom:auto;width:auto;padding:0 16px;}
 body main.melody .mb-cta>.voice-submit-btn{min-height:54px!important;min-width:0!important;width:min(var(--mobile-action-width,240px),100%)!important;}
 .mb-solo-count{margin-top:8px;}
 .mb-status{margin-top:6px;}
 .mb-status:empty{display:none;}
}
@media(max-width:419px){.melody-box-panel{--mobile-action-width:212px;}}

/* The view sets one safe horizontal area from the instrument's actual bounds. */
.mb-scene :is(.mb-overview,.mb-controls){left:var(--ui-left,50%);right:auto;width:var(--ui-width,52vw);transform:none;}
.mb-scene .mb-controls{flex-direction:row;gap:16px;}
.mb-scene .mb-listen{gap:6px;}
.mb-scene [data-box=play]{width:112px;min-width:112px;}
.mb-scene .mb-tools{padding-left:12px;}
.mb-scene[data-stack-controls=true] .mb-controls{flex-direction:column;gap:10px;}
.mb-scene[data-stack-controls=true] .mb-secondary-controls{flex-wrap:wrap;justify-content:center;gap:8px;}
.mb-scene[data-stack-controls=true] .mb-tools{padding-left:0;border:0;}

.mb-note-tooltip{position:absolute;z-index:7;display:grid;gap:9px;width:238px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:11px 13px;border:1px solid #cda8df70;border-radius:9px;background:#281e2d;box-shadow:0 5px 18px #110b1c44;color:#f2def5;font:12px/1.35 var(--pluritual-sans,Arial,sans-serif);pointer-events:none;}
.mb-note-tooltip[hidden],.mb-note-pulse[hidden]{display:none;}
.mb-note-tooltip header{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mb-note-tooltip strong{font:400 26px/1 var(--pluritual-wip-serif,Georgia,serif);}
.mb-note-tooltip header span{padding:3px 7px;border:1px solid #cda8df50;border-radius:4px;color:#e9caef;font-size:10px;}
.mb-note-tooltip dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;}
.mb-note-tooltip .mb-note-stats{padding-top:8px;border-top:1px solid #cda8df40;}
.mb-note-tooltip dt{color:#cfb2d8;}
.mb-note-tooltip dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;}
.mb-note-tooltip.is-notice{animation:mbNoteNotice .35s ease-out both;}
.mb-note-pulse{position:absolute;z-index:6;pointer-events:none;translate:-50% -50%;border:1.5px solid #c98fe5;border-radius:50%;animation:mbNotePulse 1.2s ease-out 3;opacity:0;}
.melody-box-panel.is-inviting-play [data-box=play]{border-color:#edc8ff!important;background:#d4a6f42e!important;box-shadow:0 0 15px 1px #d4a6f428!important;animation:mbPlayInvite 1.8s ease-in-out 3;}
@keyframes mbNoteNotice{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
@keyframes mbNotePulse{from{opacity:.8;scale:1;}to{opacity:0;scale:2;}}
@keyframes mbPlayInvite{0%,100%{filter:brightness(1);}50%{filter:brightness(1.22);}}
@media(prefers-reduced-motion:reduce){.mb-note-tooltip.is-notice,.mb-note-pulse,.melody-box-panel.is-inviting-play [data-box=play]{animation:none;}}