.puaudio-wrap{ width:100%;max-width:100%;margin:26px 0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17344d;} .puaudio-wrap *{box-sizing:border-box} .puaudio-card{ width:100%;padding:28px;border:1px solid #d7e6f0;border-radius:30px;background:radial-gradient(circle at top right,rgba(45,120,184,.16),transparent 34%), radial-gradient(circle at bottom left,rgba(47,143,104,.10),transparent 28%), linear-gradient(135deg,#ffffff 0%,#eef7fc 100%);box-shadow:0 22px 55px rgba(18,50,75,.12);} .puaudio-badge-row{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px;} .puaudio-badge,.puaudio-part{ display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border-radius:999px;font-weight:900;font-size:.88rem;letter-spacing:.03em;} .puaudio-badge{ background:#12324b;color:#fff;} .puaudio-part{ background:#fff;color:#2d78b8;border:1px solid #d7e6f0;} .puaudio-header{ display:flex;align-items:center;gap:18px;margin-bottom:24px;} .puaudio-icon{ position:relative;flex:0 0 78px;width:78px;height:78px;border-radius:24px;background:linear-gradient(145deg,#12324b,#2d78b8);box-shadow:0 16px 30px rgba(18,50,75,.22);} .puaudio-icon:before{ content:"";position:absolute;left:22px;top:20px;width:25px;height:38px;border:4px solid #fff;border-top-left-radius:14px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;} .puaudio-icon:after{ content:"";position:absolute;left:17px;top:51px;width:36px;height:4px;border-radius:999px;background:#fff;} .puaudio-icon span{ position:absolute;left:37px;top:57px;width:4px;height:11px;border-radius:999px;background:#fff;} .puaudio-title-group h2{ margin:0 0 6px;color:#12324b;font-size:clamp(1.45rem,2.5vw,2.25rem);line-height:1.15;letter-spacing:-.025em;font-weight:950;} .puaudio-title-group p{ margin:0;color:#3d5870;font-size:1rem;font-weight:700;} .puaudio-controls{ display:flex;align-items:center;gap:18px;padding:20px;border:1px solid #d7e6f0;border-radius:24px;background:rgba(255,255,255,.86);} .puaudio-play{ position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 72px;width:72px;height:72px;border:0;border-radius:50%;background:linear-gradient(145deg,#2d78b8,#12324b);box-shadow:0 18px 32px rgba(18,50,75,.22);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;} .puaudio-play:hover,.puaudio-play:focus{ transform:translateY(-2px);box-shadow:0 22px 36px rgba(18,50,75,.28);} .puaudio-play-icon{ display:block;width:0;height:0;margin-left:5px;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:20px solid #fff;} .puaudio-play.is-playing .puaudio-play-icon{ width:22px;height:26px;margin-left:0;border:0;background:linear-gradient(to right,#fff 0 7px,transparent 7px 15px,#fff 15px 22px);} .puaudio-main{ flex:1 1 auto;min-width:0;} .puaudio-times{ display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;color:#36536c;font-size:.92rem;font-weight:900;} .puaudio-progress{ width:100%;height:10px;appearance:none;border-radius:999px;background:linear-gradient(90deg,#2d78b8 0%,#2d78b8 0%,#d7e6f0 0%,#d7e6f0 100%);outline:none;cursor:pointer;} .puaudio-progress::-webkit-slider-thumb{ width:22px;height:22px;appearance:none;border:4px solid #fff;border-radius:50%;background:#2f8f68;box-shadow:0 5px 15px rgba(18,50,75,.24);} .puaudio-progress::-moz-range-thumb{ width:22px;height:22px;border:4px solid #fff;border-radius:50%;background:#2f8f68;box-shadow:0 5px 15px rgba(18,50,75,.24);} .puaudio-tools{ display:grid;grid-template-columns:minmax(160px,.45fr) minmax(220px,1fr) auto;align-items:end;gap:16px;margin-top:18px;} .puaudio-tool{ display:flex;flex-direction:column;gap:8px;} .puaudio-tool label{ color:#36536c;font-size:.88rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;} .puaudio-tool select{ width:100%;min-height:48px;padding:0 14px;border:1px solid #d7e6f0;border-radius:16px;background:#fff;color:#12324b;font:inherit;font-weight:800;} .puaudio-volume-tool input{ width:100%;height:10px;appearance:none;border-radius:999px;background:#d7e6f0;outline:none;cursor:pointer;} .puaudio-volume-tool input::-webkit-slider-thumb{ width:20px;height:20px;appearance:none;border:3px solid #fff;border-radius:50%;background:#bc7b13;box-shadow:0 5px 15px rgba(18,50,75,.24);} .puaudio-volume-tool input::-moz-range-thumb{ width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:#bc7b13;box-shadow:0 5px 15px rgba(18,50,75,.24);} .puaudio-muted{ min-height:48px;padding:0 18px;border:0;border-radius:16px;background:#12324b;color:#fff;font-weight:900;cursor:pointer;transition:transform .18s ease,background .18s ease;} .puaudio-muted:hover,.puaudio-muted:focus{ transform:translateY(-1px);background:#1c4564;} .puaudio-muted.is-muted{ background:#b94747;} .puaudio-footnote{ display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:15px 17px;border:1px solid #d7e6f0;border-radius:18px;background:rgba(255,255,255,.82);color:#36536c;font-size:.96rem;} .puaudio-footnote strong{ color:#12324b;} .puaudio-sr{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;} @media(max-width:820px){ .puaudio-card{padding:22px} .puaudio-header{align-items:flex-start} .puaudio-controls{align-items:stretch;flex-direction:column} .puaudio-play{align-self:flex-start} .puaudio-tools{grid-template-columns:1fr} .puaudio-muted{width:100%} } @media(max-width:560px){ .puaudio-card{padding:18px;border-radius:24px} .puaudio-header{flex-direction:column} .puaudio-icon{width:68px;height:68px;flex-basis:68px} .puaudio-icon:before{left:19px;top:17px;width:22px;height:34px} .puaudio-icon:after{left:15px;top:46px;width:32px} .puaudio-icon span{left:33px;top:51px} .puaudio-controls{padding:16px} }