/* Metal Notes enters through a door into a practice room. */
#old-web-page{transition:opacity 1.65s ease}
body.metal-leaving #old-web-page{opacity:0}
#metal-experience[hidden]{display:none}
#metal-experience{position:fixed;inset:0;z-index:1001;overflow:hidden;background:rgba(49,91,81,0);color:#20362d;font-family:Arial,Helvetica,sans-serif;transition:background 1.65s ease}
#metal-experience.is-colored{background:#315b51}
#metal-experience.is-entered{background:#dbe5df}
#metal-experience *{box-sizing:border-box}
#metal-experience .metal-exit{position:fixed;z-index:10;top:18px;left:20px;border:1px solid #ffffff8c;border-radius:30px;background:#16372fcf;color:#fff;padding:11px 15px;font:14px Arial,sans-serif;cursor:pointer;box-shadow:0 4px 15px #15281d35}
#metal-experience .metal-exit:hover,#metal-experience .metal-exit:focus-visible{background:#23513d;outline:2px solid #fff;outline-offset:2px}
#metal-experience .metal-room{position:absolute;inset:0;background:linear-gradient(90deg,#c2c2a9,#f4f0da 50%,#c8c4aa);transform:scale(1);opacity:0;visibility:hidden;transition:transform 1.5s cubic-bezier(.2,.8,.2,1),filter 1.5s ease,opacity .75s ease;overflow:hidden}
#metal-experience.is-opening .metal-room{visibility:visible;opacity:1}
#metal-experience .metal-room:before{content:"";position:absolute;inset:0 0 23%;background:repeating-linear-gradient(90deg,#ffffff20 0,#ffffff20 3px,transparent 4px,transparent 150px);opacity:.45}
#metal-experience .metal-wall-light{position:absolute;inset:-25%;background:radial-gradient(ellipse at 50% 7%,#fffbea 0,#f8eed073 26%,transparent 60%)}
#metal-experience .metal-wall-panel{position:absolute;top:16%;width:15%;height:45%;border:8px solid #957e5d46;background:#b9b09645;box-shadow:inset 0 0 35px #61564025}
#metal-experience .metal-wall-panel-left{left:10%}
#metal-experience .metal-wall-panel-right{right:10%}
#metal-experience .metal-floor{position:absolute;left:-15%;right:-15%;bottom:-12%;height:37%;background:repeating-linear-gradient(96deg,#8b6751 0,#a67b5f 60px,#6b4f3d 64px,#a77d60 130px);transform:perspective(450px) rotateX(35deg);box-shadow:0 -12px 0 #e8dac3,0 -18px 22px #4c342c25}
#metal-experience .metal-stand{position:absolute;left:50%;top:37%;width:270px;height:67vh;transform:translateX(-50%);filter:drop-shadow(22px 22px 13px #4e352b57)}
#metal-experience .metal-stand-desk{position:absolute;top:0;left:12%;width:76%;height:135px;background:linear-gradient(155deg,#393e3a,#171d1b 70%);border:5px solid #151a18;border-radius:8px 8px 22px 22px;transform:perspective(400px) rotateX(-13deg);box-shadow:0 9px 0 #151a18}
#metal-experience .metal-stand-desk:after{content:"";position:absolute;left:-8%;right:-8%;bottom:-8px;height:15px;background:#1b211e;border-radius:4px}
#metal-experience .metal-stand-pole{position:absolute;left:49%;top:130px;width:10px;height:64%;background:linear-gradient(90deg,#1b201e,#7b8079 50%,#161c19)}
#metal-experience .metal-stand-feet{position:absolute;left:5%;bottom:4%;width:90%;height:9px;background:linear-gradient(90deg,transparent,#252c27 16%,#131915 50%,#252c27 84%,transparent);border-radius:50%}
#metal-experience .metal-phone{position:absolute;z-index:3;left:50%;top:46%;width:clamp(110px,16vw,170px);aspect-ratio:var(--phone-aspect,390/710);transform:translate(-50%,-50%) scale(1);transform-origin:center;transition:top 1.5s cubic-bezier(.2,.8,.2,1),transform 1.5s cubic-bezier(.2,.8,.2,1),opacity .75s ease;border-radius:calc(38px * var(--phone-preview-scale,.4));background:#202725;box-shadow:0 18px 30px #191c1966,0 0 0 2px #68736b;overflow:hidden;opacity:0;visibility:hidden}
#metal-experience.is-opening .metal-phone{visibility:visible;opacity:1}
#metal-experience.is-zooming .metal-phone{top:50%;transform:translate(-50%,-50%) scale(var(--phone-zoom,2.4))}
#metal-experience.is-entered .metal-phone{opacity:1}
#metal-experience .metal-phone-preview{display:block;width:var(--phone-target-width,390px);height:var(--phone-target-height,710px);border:0;background:#f9faf5;pointer-events:none;transform:scale(var(--phone-preview-scale,.4));transform-origin:top left}
#metal-experience .metal-phone:after{content:"";position:absolute;inset:0;z-index:2;border:calc(8px * var(--phone-preview-scale,.4)) solid #26312d;border-radius:inherit;pointer-events:none}
#metal-experience .metal-phone:before{content:"";position:absolute;z-index:3;top:calc(8px * var(--phone-preview-scale,.4));left:50%;width:calc(68px * var(--phone-preview-scale,.4));height:calc(17px * var(--phone-preview-scale,.4));transform:translateX(-50%);border-radius:0 0 12px 12px;background:#26312d;pointer-events:none}
#metal-experience.is-entered .metal-phone-preview{pointer-events:auto}
#metal-experience .metal-door{position:absolute;z-index:6;inset:0;background:linear-gradient(100deg,#23453e,#315b51 55%,#1c3e37);transform-origin:left center;backface-visibility:hidden;transform:perspective(1450px) rotateY(0deg);transition:transform 2.3s cubic-bezier(.2,.8,.25,1),opacity 1.65s ease;box-shadow:inset 0 0 0 16px #142f2aa8,inset -15px 0 28px #051b18b0,20px 0 45px #0a1b186e;opacity:0}
#metal-experience.is-colored .metal-door{opacity:1}
#metal-experience.is-opening .metal-door{transform:perspective(1450px) rotateY(-110deg)}
#metal-experience .metal-door-panel{position:absolute;left:18%;width:64%;border:13px solid #21483f;box-shadow:inset 0 0 0 2px #4b7667,0 0 0 2px #102b25;background:linear-gradient(120deg,#2f6053,#295347 65%,#1f463c)}
#metal-experience .metal-door-panel.upper{top:11%;height:32%}
#metal-experience .metal-door-panel.lower{bottom:10%;height:32%}
#metal-experience .metal-door-handle{position:absolute;right:7%;top:50%;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff5b0,#b39548 48%,#554222);box-shadow:0 0 0 6px #7c663e,0 5px 12px #0c2724}
#metal-experience.is-zooming .metal-room{transform:scale(1.18);filter:blur(4px);opacity:.65}
#metal-experience.is-entered .metal-room{opacity:0}
#metal-experience .metal-info{position:fixed;z-index:9;right:24px;bottom:24px;width:min(320px,calc(100vw - 30px));background:#fffefa;color:#253a2e;border:1px solid #c9d6cb;border-radius:11px;box-shadow:0 15px 45px #10231840;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .35s ease .5s,transform .35s ease .5s;font:14px/1.5 Arial,sans-serif}
#metal-experience.is-entered .metal-info{opacity:1;pointer-events:auto;transform:none}
#metal-experience .metal-info-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 18px;border:0;background:none;color:#264d38;text-align:left;font:bold 14px Arial,sans-serif;cursor:pointer}
#metal-experience .metal-info-toggle span{font-size:20px;line-height:12px}
#metal-experience .metal-info-toggle:focus-visible{outline:2px solid #264d38;outline-offset:2px}
#metal-experience .metal-info-body{padding:0 18px 17px}
#metal-experience .metal-info-body p{margin:0 0 11px;color:#36483c}
#metal-experience .metal-info-body a{color:#285b45;font-size:13px}
#metal-experience .metal-info.is-collapsed .metal-info-body{display:none}
@media(max-width:650px){#metal-experience .metal-stand{transform:translateX(-50%) scale(.75);transform-origin:top center}#metal-experience .metal-wall-panel{width:20%}#metal-experience .metal-exit{top:9px;left:9px;font-size:12px}#metal-experience .metal-info{right:10px;bottom:10px;width:min(310px,calc(100vw - 20px));max-height:40dvh;overflow:auto}}
@media(prefers-reduced-motion:reduce){#old-web-page,#metal-experience,#metal-experience .metal-door,#metal-experience .metal-phone,#metal-experience .metal-room,#metal-experience .metal-app-frame,#metal-experience .metal-info{transition-duration:.01ms}}