@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--ink:#ecebe7;--muted:#777d82;--line:rgba(211,221,232,.16)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#030405}body{color:var(--ink);font-family:'IBM Plex Mono','Courier New',monospace;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #cbd5de;outline-offset:6px}
#rain,.atmosphere{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#rain{opacity:.72}.atmosphere{background:radial-gradient(ellipse at 50% 44%,transparent 0%,rgba(0,0,0,.15) 42%,rgba(0,0,0,.85) 100%)}.atmosphere:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 380px 310px at 50% 47%,rgba(121,148,169,.055),transparent)}
.stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:40px 24px 65px;animation:arrive 1.5s ease both}.logo-wrap{width:190px;height:184px;position:relative;overflow:hidden;margin-bottom:35px;filter:drop-shadow(0 0 30px rgba(217,228,239,.12));isolation:isolate}.logo{position:absolute;width:380px;height:380px;max-width:none;left:-95px;top:-72px;mix-blend-mode:screen;user-select:none}.script-box{display:flex;align-items:center;justify-content:center;gap:24px;max-width:min(760px,100%);min-height:65px;padding:20px 26px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:linear-gradient(135deg,rgba(24,28,32,.67),rgba(9,11,14,.85));box-shadow:0 14px 60px #0006,inset 0 1px 0 #ffffff03;cursor:pointer;backdrop-filter:blur(12px);transition:border-color .25s,background .25s,transform .25s}.script-box:hover{border-color:rgba(211,221,232,.36);background:rgba(29,34,39,.8);transform:translateY(-2px)}.script-box:active{transform:translateY(0)}code{font:400 13px/1.8 'IBM Plex Mono','Courier New',monospace;overflow-wrap:anywhere;text-align:center;letter-spacing:.15px}.copy-icon{flex:none;color:#828b92;transition:color .25s}.script-box:hover .copy-icon{color:#e4e9ec}.copy-hint{margin:13px 0 25px;color:var(--muted);font-size:10px;letter-spacing:1.3px;min-height:15px}.secondary{display:flex;align-items:center;justify-content:center;gap:25px;padding:13px 25px;min-width:140px;color:#c8ccd0;background:rgba(25,29,33,.65);border:1px solid var(--line);border-radius:8px;font-size:12px;letter-spacing:.6px;text-decoration:none;backdrop-filter:blur(10px);transition:background .25s,border-color .25s}.secondary span{color:#717c85}.secondary:hover{background:rgba(47,53,59,.75);border-color:#656c73}.motion{position:fixed;bottom:25px;right:29px;border:0;background:transparent;color:#737e87;font:10px 'IBM Plex Mono','Courier New',monospace;letter-spacing:.6px;padding:10px;cursor:pointer;display:flex;align-items:center;gap:9px}.motion:hover{color:#d8dfe5}.motion-icon{font-size:14px}::selection{background:#647785;color:#fff}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.stage{padding:30px 20px 65px}.logo-wrap{margin-bottom:30px;transform:scale(.85)}.script-box{padding:19px 18px;gap:13px;width:100%}code{font-size:11px}.motion{bottom:15px;right:15px}.copy-hint{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.stage{animation:none}*,*:before,*:after{transition:none!important}}

/* Keep the loader as plain, copyable text over the rain. */
.script-box,.script-box:hover,.script-box:active{background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;transform:none}
.script-box:hover code{color:#fff}
.copy-icon{display:none}

.logo-wrap{mix-blend-mode:normal;isolation:auto}.logo{visibility:visible;mix-blend-mode:normal}.logo-wrap::after{content:none}
.music{right:auto;left:29px}
@media(max-width:600px){.music{left:15px;right:auto}}
.stage{padding:24px}
.logo-action{position:relative;display:block;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.logo-action .logo-wrap{display:block;margin:0;transition:transform .35s ease,filter .35s ease}
.logo-action .logo-wrap{animation:logo-pulse 3.2s ease-in-out infinite;--pulse-base:1;--pulse-peak:1.055}
.logo-action:hover .logo-wrap,.logo-action:focus-visible .logo-wrap{--pulse-base:1.04;--pulse-peak:1.095}
@keyframes logo-pulse{0%,100%{transform:scale(var(--pulse-base));filter:drop-shadow(0 0 18px rgba(217,228,239,.10))}50%{transform:scale(var(--pulse-peak));filter:drop-shadow(0 0 38px rgba(217,228,239,.25))}}
.logo-action:hover .logo-wrap,.logo-action:focus-visible .logo-wrap{transform:scale(1.07);filter:drop-shadow(0 0 38px rgba(217,228,239,.23))}
.logo-popup{position:absolute;top:calc(100% + 27px);left:50%;width:max-content;max-width:calc(100vw - 40px);transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;cursor:pointer;text-align:center}
.logo-popup code{display:block;font-size:11px;line-height:1.8}
.logo-popup .copy-hint{display:block;margin:12px 0 0;font-size:10px}
.logo-action.show-feedback .logo-popup{visibility:visible;opacity:1;transform:translate(-50%,0)}
@media(max-width:600px){.logo-action .logo-wrap{transform:scale(.85)}.logo-action:hover .logo-wrap,.logo-action:focus-visible .logo-wrap{transform:scale(.92)}.logo-popup code{font-size:10px}}
@media(max-width:600px){.logo-action .logo-wrap{--pulse-base:.85;--pulse-peak:.90}.logo-action:hover .logo-wrap,.logo-action:focus-visible .logo-wrap{--pulse-base:.90;--pulse-peak:.95}}
@media(prefers-reduced-motion:reduce){.logo-action .logo-wrap{animation-duration:6s;--pulse-peak:var(--pulse-base)}}