:root{font-family:Arial,Helvetica,sans-serif;color:#344e40;background:#f5f2e8;--green:#344e40;--yellow:#ffdf72}*{box-sizing:border-box}body{margin:0;min-height:100svh;background-image:radial-gradient(#81887615 .6px,transparent .6px);background-size:5px 5px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b48832;outline-offset:5px}button:disabled{cursor:wait;opacity:.65}header{max-width:750px;height:115px;margin:auto;padding:0 35px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:31px;font-weight:850;letter-spacing:-1.8px;color:var(--green);text-decoration:none;display:flex;align-items:center;gap:5px}.brand>span:not(.brand-icon){font-weight:400}.brand i{font-size:26px;color:#d8a848;margin-left:2px}.brand-icon{display:grid;place-items:center;width:32px;height:36px;border:2px solid var(--green);border-radius:12px;font-family:Georgia;font-style:italic;margin-right:7px;transform:rotate(-8deg)}.icon-button{border:1px solid #c9cdbf;background:transparent;width:32px;height:32px;border-radius:50%;color:var(--green)}main{width:min(440px,calc(100% - 36px));margin:36px auto 30px}.pipou-radio{padding:25px 27px 17px;border:1px solid #cbd0c2;border-radius:30px;background:#e0e7d9;box-shadow:0 17px 40px #25332609,0 4px 0 #d7dfcd;overflow:hidden;animation:arrive .6s ease-out both}.radio-top{display:flex;align-items:center;justify-content:space-between}.station{font-size:10px;letter-spacing:2px;font-weight:700}.station span{margin-left:5px}.badge{font:9px monospace;letter-spacing:.7px;border:1px solid #b6c5b1;padding:7px 9px;border-radius:20px;color:#65775c}.badge.online{background:#344e40;color:#f5f2e8;border-color:#344e40}.mascot-stage{height:315px;position:relative;display:grid;place-items:center;margin-top:12px}.mascot{position:relative;width:240px;height:240px;border:0;padding:0;border-radius:50%;overflow:hidden;background:#ffea81;z-index:1;transform:rotate(-7deg);box-shadow:0 12px 24px #45523218,0 5px 0 #d1b955;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.mascot img{width:271px;max-width:none;position:absolute;left:-15px;top:-60px;pointer-events:none;user-select:none;-webkit-user-select:none}.mascot:not(:disabled):hover{transform:rotate(-2deg) translateY(-3px);box-shadow:0 18px 30px #45523220,0 6px 0 #d1b955}.mascot:not(:disabled):active,.mascot.active{transform:rotate(2deg) scale(.95) translateY(4px);box-shadow:0 3px 0 #b3a04a,0 0 0 10px #ffdf7229}.orbit{position:absolute;pointer-events:none;border:1px solid #b8c8ad88;border-radius:50%;width:293px;height:293px}.orbit-two{width:345px;height:345px;border-style:dashed;opacity:.6}.spark{position:absolute;pointer-events:none;color:#7c916a;font-size:30px;z-index:2;transition:transform .25s}.spark-one{left:5px;top:57px}.spark-two{right:10px;bottom:42px}.speech{pointer-events:none;position:absolute;right:-7px;top:26px;z-index:3;background:#fcfbf5;padding:11px 14px;border-radius:15px 15px 15px 2px;transform:rotate(7deg);font-family:Georgia,serif;font-style:italic;font-size:14px;box-shadow:0 4px 14px #344e4012}.prompt{text-align:center;padding:2px 0 23px}.prompt h1{font-size:23px;letter-spacing:-.7px;margin:4px 0 11px}.prompt p{font-size:12px;color:#7b886e;margin:0;min-height:14px}.pairing{border-top:1px solid #c5d1bc;display:flex;justify-content:space-between;align-items:center;padding-top:18px}.pairing>div{display:flex;align-items:center;gap:8px}.pair-icon{font-size:23px;line-height:1}.pairing strong{font-size:11px;font-weight:400;color:#6a7c60}.pairing button{border:0;background:transparent;color:#42593b;font-size:12px;padding:8px 0 8px 8px}.pairing button span{margin-left:9px}#notice{font-size:12px;color:#85522e;line-height:1.5;margin-top:8px}.extras{display:flex;align-items:center;justify-content:space-between;padding:24px 3px 0}.text-button,footer button{background:none;border:0;color:#839076;font-size:11px;padding:0}.downloads{display:flex;gap:18px}.downloads a{font-size:11px;color:#6a7d5c;text-decoration:none}.downloads a:hover{text-decoration:underline}footer{width:min(440px,calc(100% - 42px));margin:36px auto 0;padding-bottom:30px;display:flex;align-items:center;justify-content:space-between;color:#929b83;font-size:10px}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#889d77;margin-right:5px}.primary{width:100%;border:0;border-radius:10px;background:var(--green);color:#fffef6;padding:14px 16px;font-size:14px}.volume{display:flex;gap:10px;align-items:center;font-size:14px;margin:24px 0}.volume input{width:100%;accent-color:var(--green)}.volume output{white-space:nowrap}dialog{background:#fcfbf5;color:var(--green);border:1px solid #cbd0c2;border-radius:22px;padding:32px;width:min(440px,calc(100% - 32px));box-shadow:0 20px 100px #172d2830}dialog::backdrop{background:#1a2d2566;backdrop-filter:blur(6px)}dialog .close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px;color:#788077}dialog h2{font-size:28px;letter-spacing:-1px}dialog p,dialog li{font-size:14px;line-height:1.7;color:#77816d}dialog li{margin:14px 0}dialog ol{padding-left:20px}dialog label{font-size:12px;display:block;margin:16px 0}dialog input:not([type=range]){display:block;width:100%;padding:12px;margin-top:8px;border:1px solid #ccd2c2;border-radius:7px;background:#f3f4eb;color:#677b5d}#qr{display:block;width:190px;height:190px;margin:auto;border-radius:12px}dialog .text-button{display:block;margin:20px auto}dialog .fine{font-size:11px;text-align:center}.eyebrow{font-size:9px;letter-spacing:1.4px}.transmitting .orbit{animation:ripple 1.3s ease-in-out infinite}.transmitting .orbit-two{animation-delay:.4s}.transmitting .spark-one{transform:rotate(45deg) scale(1.15)}.transmitting .spark-two{transform:rotate(-30deg)}.receiving .mascot{animation:bop .65s ease-in-out infinite alternate}.transmitting .speech{background:#344e40;color:#ffea81}@keyframes bop{to{transform:rotate(3deg) scale(1.025)}}@keyframes ripple{50%{transform:scale(1.08);opacity:.35}}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}[hidden]{display:none!important}@media(max-width:600px){header{height:82px;padding:0 24px}.brand{font-size:28px}main{margin-top:15px;margin-bottom:20px}.pipou-radio{padding:22px 24px 14px;border-radius:28px}.mascot-stage{height:295px;margin-top:13px}.mascot{width:220px;height:220px}.mascot img{width:248px;left:-14px;top:-55px}.orbit{width:270px;height:270px}.orbit-two{width:314px;height:314px}.speech{right:-9px;top:27px;font-size:13px}.spark-one{left:-1px;top:62px}.spark-two{right:0;bottom:45px}.prompt h1{font-size:22px}.prompt{padding-bottom:20px}footer{margin-top:28px}.station{font-size:9px;letter-spacing:1.4px}.badge{font-size:8px}}@media(max-width:350px){.mascot{width:195px;height:195px}.mascot img{width:220px;left:-12px;top:-49px}.mascot-stage{height:265px}.speech{font-size:11px}.prompt h1{font-size:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}