*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden;background:#000}canvas{display:block;width:100%;height:100svh;touch-action:none;outline:none}canvas:focus-visible{outline:1px solid #898b73;outline-offset:-3px}p,a{position:fixed;bottom:20px;font:10px monospace;letter-spacing:.14em;color:#42483c}p{left:50%;transform:translateX(-50%);pointer-events:none;transition:opacity 2s}a{left:22px;text-decoration:none;padding:8px}a:hover,a:focus-visible{color:#c6c8af}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

#code-form{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:2}#code-form[hidden]{display:none}#code-input{width:145px;padding:10px;background:#050605;border:1px solid #171b15;color:#555e4d;font:14px monospace;letter-spacing:.18em;border-radius:0}#code-input::placeholder{color:#252c22}#code-input:hover,#code-input:focus{border-color:#505b45;color:#c4ccba;outline:none}#wrong-code{padding:3px;background:#c0c0c0;color:#000;width:min(460px,calc(100vw - 28px));max-height:calc(100svh - 28px);border:2px solid;border-color:#dfdfdf #000 #000 #dfdfdf;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080;font:13px "MS Sans Serif",Tahoma,Arial,sans-serif;border-radius:0}#wrong-code::backdrop{background:#000d}.window-title{display:flex;align-items:center;gap:5px;background:#000080;color:#fff;height:22px;padding:2px 3px;font:bold 12px "MS Sans Serif",Tahoma,Arial,sans-serif;user-select:none}.window-icon{display:grid;grid-template-columns:5px 5px;grid-template-rows:5px 5px;gap:1px;transform:skewY(-9deg);margin:0 3px 0 1px;filter:drop-shadow(1px 1px #000)}.window-icon i:nth-child(1){background:#f33}.window-icon i:nth-child(2){background:#2b4}.window-icon i:nth-child(3){background:#36e}.window-icon i:nth-child(4){background:#fe3}#close-error{margin-left:auto;flex:none;position:relative;width:18px;height:17px;padding:0;background:#c0c0c0;color:#000;border:1px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px #808080;cursor:pointer;border-radius:0}#close-error span:before,#close-error span:after{content:"";position:absolute;left:3px;top:7px;width:10px;height:2px;background:#000;transform:rotate(45deg)}#close-error span:after{transform:rotate(-45deg)}#close-error:active{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px #808080}#close-error:focus-visible{outline:1px dotted #000;outline-offset:-4px}.window-body{padding:14px 13px 18px}.eye-panel{background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #000,inset -1px -1px #dfdfdf;padding:2px}#watching-eye{display:block;width:100%;height:auto}#error-message{font:14px/1.45 "MS Sans Serif",Tahoma,Arial,sans-serif;text-align:left;padding:17px 7px 0;letter-spacing:0}@media(max-width:480px){.window-body{padding:11px 10px 16px}#error-message{font-size:13px}}

#accepted-code{padding:3px;width:min(480px,calc(100vw - 28px));max-height:calc(100svh - 28px);border:2px solid;border-color:#dfdfdf #000 #000 #dfdfdf;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080;background:#c0c0c0;border-radius:0;color:#000;font:13px Tahoma,Arial,sans-serif}#accepted-code::backdrop{background:#000e}.classic-close{margin-left:auto;position:relative;width:18px;height:17px;padding:0;background:#c0c0c0;border:1px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px #808080;cursor:pointer}.classic-close span:before,.classic-close span:after{content:"";position:absolute;left:3px;top:7px;width:10px;height:2px;background:#000;transform:rotate(45deg)}.classic-close span:after{transform:rotate(-45deg)}.classic-close:focus-visible{outline:1px dotted #000;outline-offset:-4px}.portal-panel{position:relative;border:2px solid;border-color:#808080 #fff #fff #808080;overflow:hidden;background:#000}#portal-eye{display:block;width:100%;height:auto}#roll-eye{position:absolute;left:10%;top:10%;width:80%;height:80%;border:0;background:transparent;border-radius:50%;cursor:pointer}#roll-eye:focus-visible{outline:1px dotted #aaa;outline-offset:-10px}#enter-cave{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);padding:16px;background:none;border:0;color:white;cursor:pointer}#enter-cave[hidden],#roll-eye[hidden]{display:none}#enter-cave svg{width:30px;height:45px;display:block;filter:drop-shadow(2px 2px #555)}#enter-cave:hover{color:#bcbcbc}#enter-cave:focus-visible{outline:1px dotted #fff}#accepted-code.shudder{animation:retro-shake .48s steps(1,end)}@keyframes retro-shake{0%,100%{transform:translate(0,0)}15%{transform:translate(-3px,2px)}30%{transform:translate(3px,-2px)}45%{transform:translate(-2px,-1px)}60%{transform:translate(2px,2px)}75%{transform:translate(-1px,1px)}}@media(prefers-reduced-motion:reduce){#accepted-code.shudder{animation:none}}

#accepted-code .portal-panel{margin-top:4px}#accepted-code .window-title{margin-bottom:2px}

#enter-cave svg{transform-origin:50% 20%;animation:arrow-into-socket 1.7s ease-in-out infinite;filter:none}
@keyframes arrow-into-socket{
  0%{transform:translateY(18px) perspective(120px) rotateX(44deg) scale(1.18);opacity:0}
  18%{opacity:1}
  85%,100%{transform:translateY(-14px) perspective(120px) rotateX(58deg) scale(.28);opacity:0}
}
#enter-cave:focus:not(:focus-visible){outline:none}
@media(prefers-reduced-motion:reduce){#enter-cave svg{animation:none;transform:perspective(120px) rotateX(42deg)}}

#lamp-room {
 position: fixed;
 inset: 0;
 overflow: hidden;
 background: #000;
 z-index: 3;
}
#lamp-room[hidden], #butterfly-keys[hidden] { display: none; }
#rope-rig {
 --pull: 0px;
 position: absolute;
 left: 50%;
 top: 0;
 width: 80px;
 height: 100%;
 transform: translateX(-50%);
 pointer-events: none;
 transition: opacity .7s;
}
.rope-line {
 position: absolute;
 top: 0;
 left: calc(50% - 2px);
 width: 4px;
 height: calc(28% + var(--pull));
 background: repeating-linear-gradient(145deg, #6b6150 0 1px, #39352d 2px 4px);
}
#pull-rope {
 position: absolute;
 top: calc(28% + var(--pull));
 left: 0;
 width: 80px;
 padding: 0 7px 9px;
 border: 0;
 background: none;
 cursor: grab;
 touch-action: none;
 user-select: none;
 pointer-events: auto;
}
#pull-rope svg { display: block; width: 100%; overflow: visible; }
#pull-rope:active { cursor: grabbing; }
#pull-rope:focus-visible { outline: 1px dotted #a9acaa; outline-offset: 4px; }
#rope-rig.releasing .rope-line { transition: height .48s cubic-bezier(.17,1.4,.34,1); }
#rope-rig.releasing #pull-rope { transition: top .48s cubic-bezier(.17,1.4,.34,1); }
#lamp-room.lit #rope-rig {
 opacity: 0;
 visibility: hidden;
 transition: opacity .7s, visibility 0s .7s;
}
#butterfly-keys { position: absolute; inset: 0; }
.butterfly-key {
 --unit: min(8vw, 15svh);
 position: absolute;
 transform: translate(-50%, -50%);
 width: calc(var(--unit) * var(--size));
 height: calc(var(--unit) * var(--size));
 min-width: 36px;
 min-height: 44px;
 border: 0;
 padding: 0;
 background: transparent;
 color: var(--hue);
 cursor: pointer;
 touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
 overflow: visible;
}
.butterfly-key:focus-visible { outline: 1px dotted var(--hue); outline-offset: 7px; border-radius: 50%; }
.butterfly-key > span, .butterfly-key img { pointer-events: none; }
.butterfly-glow {
 position: absolute;
 inset: -65%;
 background: radial-gradient(ellipse, var(--hue) 0%, transparent 60%);
 opacity: .22;
 filter: blur(16px);
 animation: butterfly-breathe var(--cycle) ease-in-out var(--delay) infinite alternate;
}
.butterfly-art {
 position: absolute;
 inset: 0;
 perspective: 420px;
 filter: drop-shadow(0 0 5px var(--hue)) drop-shadow(0 0 16px var(--hue));
 animation: butterfly-suspend var(--cycle) ease-in-out var(--delay) infinite alternate;
}
.wing {
 position: absolute;
 top: 0;
 width: 50%;
 height: 100%;
 overflow: hidden;
 backface-visibility: hidden;
 will-change: transform;
}
.wing-left { left: 0; transform-origin: 100% 50%; }
.wing-right { right: 0; transform-origin: 0 50%; }
.wing img { position: absolute; top: 0; width: 200%; height: 100%; object-fit: contain; }
.wing-left img { left: 0; }
.wing-right img { right: 0; }
.butterfly-body { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 44% 0 44%); }
.butterfly-art img { filter: sepia(1) saturate(5) hue-rotate(var(--tint)); }
.butterfly-note {
 position: absolute;
 left: 50%;
 top: 0;
 font: 18px Georgia, serif;
 line-height: 1;
 color: var(--hue);
 text-shadow: 0 0 8px var(--hue);
 pointer-events: none;
}
@keyframes butterfly-breathe { from { opacity: .1; } to { opacity: .23; } }
@keyframes butterfly-suspend { from { transform: translateY(-3px) rotate(-2deg); } to { transform: translateY(4px) rotate(2deg); } }
@media (max-aspect-ratio: 4/5) {
 #butterfly-keys .butterfly-key {
  --unit: min(18vw, 11svh);
  left: var(--mobile-x) !important;
  top: var(--mobile-y) !important;
 }
}
@media (prefers-reduced-motion: reduce) {
 .butterfly-art, .butterfly-glow { animation: none; }
 #rope-rig.releasing .rope-line, #rope-rig.releasing #pull-rope { transition: none; }
}

/* Low-resolution, pre-rendered clip art and the square edges of desktop GIFs. */
.retro-asset, .butterfly-art img { image-rendering: pixelated; }
.retro-asset { shape-rendering: crispEdges; }
#code-input, .window-title, #error-message { font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; }
#code-input { font-size: 12px; border-radius: 0; }
#code-input:focus { border: 2px inset #808080; background: #080808; }
.window-title { background: #000080; text-shadow: 1px 1px #000; }
.window-icon { transform: none; filter: none; }
#wrong-code, #accepted-code { border-radius: 0; }
#enter-cave svg { image-rendering: pixelated; shape-rendering: crispEdges; }
.rope-line { width: 5px; background: repeating-linear-gradient(135deg,#211f15 0 1px,#a49c65 1px 2px,#48432b 3px 5px); }
.butterfly-art { filter: drop-shadow(0 0 3px var(--hue)) drop-shadow(0 0 9px var(--hue)); }
.butterfly-note { font: bold 16px/1 monospace; text-shadow: 1px 1px #000, 0 0 4px var(--hue); }

#butterfly-delivery {
 position: absolute;
 left: 50%;
 top: clamp(130px, 31%, 100%);
 width: min(324px, calc(100% - 44px));
 transform: translateX(-50%);
 pointer-events: none;
 z-index: 1;
}
#butterfly-delivery.carrying::before {
 content: '';
 position: absolute;
 left: calc(50% - 13px);
 top: -27px;
 width: 26px;
 height: 26px;
 background: linear-gradient(116deg, transparent 47%, #9cb181 49% 52%, transparent 54%),
             linear-gradient(64deg, transparent 47%, #9cb181 49% 52%, transparent 54%);
}
#xp-notice {
 border: 3px solid #0756d8;
 border-top: 0;
 border-radius: 8px 8px 3px 3px;
 background: #ece9d8;
 color: #171713;
 box-shadow: 0 0 0 1px #002b70, 3px 6px 13px #000a;
 font: 14px/1.2 var(--joyradio-ui-font, Tahoma, sans-serif);
 pointer-events: auto;
}
.xp-titlebar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 min-height: 30px;
 margin-inline: -3px;
 padding: 3px 5px 3px 9px;
 border-radius: 8px 8px 0 0;
 background: linear-gradient(#327fec, #0656dc 14%, #0870f5 27%, #0054df 82%, #0848b8);
 box-shadow: inset 0 1px #91bafe;
 color: #fff;
 text-shadow: 1px 1px #144a92;
}
.xp-titlebar h2 { margin: 0; font: bold 13px/1.2 var(--joyradio-ui-font, Tahoma, sans-serif); }
.xp-close {
 display: grid;
 place-items: center;
 width: 22px;
 height: 22px;
 padding: 0;
 border: 1px solid #fff3e8;
 border-radius: 4px;
 background: linear-gradient(135deg, #f89a7d, #dc4d2c 55%, #af2d1d);
 color: white;
 font: bold 21px/1 Arial, sans-serif;
 cursor: pointer;
}
.xp-body { display: grid; justify-items: center; gap: 18px; padding: 18px 14px 14px; }
.xp-message { display: flex; align-items: center; justify-self: stretch; gap: 13px; }
.xp-info {
 display: grid;
 flex: 0 0 34px;
 place-items: center;
 height: 34px;
 border-radius: 50%;
 background: radial-gradient(circle at 31% 23%, white 4%, #e9f8ff 37%, #a3c8e2 72%, #3c668b);
 box-shadow: 1px 2px 1px #365876;
 color: #103b70;
 font: bold 27px/1 Georgia, serif;
}
.xp-ok {
 min-width: 76px;
 min-height: 24px;
 border: 1px solid #143c80;
 border-radius: 3px;
 background: linear-gradient(#fff, #f6f4ec 53%, #dedad0);
 color: inherit;
 font: 12px var(--joyradio-ui-font, Tahoma, sans-serif);
 cursor: pointer;
}
.xp-ok:hover { box-shadow: inset 0 0 0 1px #e5a84b; }
.xp-ok:focus-visible, .xp-close:focus-visible { outline: 1px dotted currentColor; outline-offset: -4px; }
#courier-butterfly {
 left: 50%;
 top: -36px;
 width: clamp(66px, 8vw, 96px);
 height: clamp(56px, 6vw, 78px);
 pointer-events: auto;
 z-index: 1;
}
#courier-butterfly:disabled { cursor: default; pointer-events: none; }
#courier-butterfly .wing { animation: courier-wing .24s ease-in-out infinite alternate; }
#courier-butterfly .wing-left { --wing-direction: 1; }
#courier-butterfly .wing-right { --wing-direction: -1; }
@keyframes courier-wing {
 from { transform: rotateY(calc(12deg * var(--wing-direction))); }
 to { transform: rotateY(calc(60deg * var(--wing-direction))); }
}
#butterfly-goop {
 position: absolute;
 width: clamp(105px, 15vw, 166px);
 height: auto;
 transform: translate(-50%, -43%);
 transform-origin: 50% 43%;
 pointer-events: none;
}
#butterfly-goop[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
 #courier-butterfly .wing { animation: none; }
}