.pochihai-wrap { margin: 2em 0; display:flex; flex-direction:column; align-items:stretch; gap:10px; max-width:760px; }
.pochihai-button { box-sizing:border-box; position:relative; display:flex; align-items:center; gap:18px; width:100%; min-height:112px; padding:24px 28px; overflow:hidden; color:var(--pochihai-fg,#fff); background:var(--pochihai-bg,#2457d6); border-radius:var(--pochihai-radius,18px); border:1px solid rgba(255,255,255,.15); text-decoration:none !important; box-shadow:0 10px 24px rgba(24,39,75,.16), inset 0 1px 0 rgba(255,255,255,.18); font-weight:700; line-height:1.45; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.pochihai-button:before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.13),transparent 42%,rgba(0,0,0,.07)); pointer-events:none; }
.pochihai-button:hover { color:var(--pochihai-fg,#fff); filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 14px 30px rgba(24,39,75,.22), inset 0 1px 0 rgba(255,255,255,.2); }
.pochihai-button:focus { outline:3px solid var(--pochihai-bg,#2457d6); outline-offset:4px; }
.pochihai-button-copy { position:relative; z-index:1; display:flex; flex:1; flex-direction:column; gap:5px; min-width:0; }
.pochihai-button-label { display:block; font-size:var(--pochihai-label-size,22px); letter-spacing:.01em; white-space:nowrap; }
.pochihai-button-file { display:block; max-width:100%; font-size:var(--pochihai-file-size,14px); font-weight:500; line-height:1.5; opacity:.88; overflow-wrap:anywhere; }
.pochihai-icon { position:relative; z-index:1; display:flex; flex:0 0 54px; width:54px; height:54px; align-items:center; justify-content:center; border-radius:17px; background:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.pochihai-icon:before { content:""; width:20px; height:24px; border:2.5px solid currentColor; border-top:0; border-radius:2px 2px 5px 5px; position:absolute; top:12px; left:15px; opacity:.96; }
.pochihai-icon span:before { content:""; position:absolute; width:2.5px; height:18px; background:currentColor; top:11px; left:25px; border-radius:3px; }
.pochihai-icon span:after { content:""; position:absolute; width:12px; height:12px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg); top:22px; left:19px; }
.pochihai-button-arrow { position:relative; z-index:1; display:flex; flex:0 0 38px; width:38px; height:38px; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.14); font-size:22px; font-weight:500; transition:transform .18s ease; }
.pochihai-button:hover .pochihai-button-arrow { transform:translate(2px,-2px); }
.pochihai-small { align-self:flex-start; width:min(100%,180px); min-width:160px; min-height:160px; flex-direction:column; justify-content:center; gap:10px; padding:18px 14px; text-align:center; }
.pochihai-small .pochihai-icon { flex-basis:40px; width:40px; height:40px; border-radius:13px; }
.pochihai-small .pochihai-icon:before { transform:scale(.78); transform-origin:top left; top:9px; left:11px; }
.pochihai-small .pochihai-icon span:before { transform:scale(.78); transform-origin:top left; top:9px; left:18px; }
.pochihai-small .pochihai-icon span:after { transform:rotate(45deg) scale(.78); top:17px; left:14px; }
.pochihai-small .pochihai-button-copy { flex:0 1 auto; width:100%; }
.pochihai-small .pochihai-button-arrow { position:absolute; top:10px; right:10px; width:28px; height:28px; flex-basis:28px; font-size:17px; }
.pochihai-medium { align-self:stretch; width:100%; max-width:760px; min-height:84px; flex-direction:row; padding:18px 24px; gap:14px; }
.pochihai-medium .pochihai-icon { flex-basis:46px; width:46px; height:46px; }
.pochihai-medium .pochihai-button-arrow { flex-basis:34px; width:34px; height:34px; font-size:20px; }
.pochihai-medium .pochihai-icon { flex-basis:48px; width:48px; height:48px; }
.pochihai-public-count { display:flex; align-items:center; gap:7px; color:#697386; font-size:13px; font-weight:500; }
.pochihai-count-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#31a46c; }
.pochihai-public-count em { font-style:normal; opacity:.75; }
.pochihai-missing { padding:14px 16px; border:1px dashed #d0d7e2; border-radius:12px; background:#f7f9fc; color:#505b6d; }
@media (max-width:600px) { .pochihai-button { min-height:94px; padding:18px 16px; gap:12px; } .pochihai-medium { min-height:80px; flex-direction:row; padding:16px 14px; } .pochihai-small { min-height:150px; width:min(100%,180px); min-width:160px; padding:16px 12px; } .pochihai-icon { flex-basis:44px; width:44px; height:44px; border-radius:14px; } .pochihai-icon:before { transform:scale(.82); transform-origin:top left; top:10px; left:12px; } .pochihai-icon span:before { transform:scale(.82); transform-origin:top left; top:10px; left:20px; } .pochihai-icon span:after { transform:rotate(45deg) scale(.82); top:19px; left:16px; } .pochihai-button-label { font-size:var(--pochihai-label-size,22px); } .pochihai-button-file { font-size:var(--pochihai-file-size,14px); } .pochihai-button-arrow { flex-basis:30px; width:30px; height:30px; } }


/* v0.1.7: distinct button sizes and place the optional download icon at the right edge */
.pochihai-button { position:relative; }
.pochihai-button-arrow { display:none !important; }
.pochihai-button .pochihai-icon { order:2; margin-left:auto; flex:0 0 54px; }
.pochihai-button .pochihai-button-copy { order:1; }
.pochihai-medium { align-self:flex-start; width:min(100%,560px); max-width:560px; min-height:88px; padding:18px 22px; gap:16px; }
.pochihai-medium .pochihai-icon { flex-basis:46px; width:46px; height:46px; }
.pochihai-small { align-self:flex-start; width:136px; min-width:136px; max-width:100%; min-height:136px; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:20px 12px 14px; text-align:center; }
.pochihai-small .pochihai-button-copy { flex:0 1 auto; width:100%; align-items:center; }
.pochihai-small .pochihai-button-label { white-space:normal; overflow-wrap:anywhere; }
.pochihai-small .pochihai-button-file { max-width:100%; }
.pochihai-small .pochihai-icon { position:absolute; top:9px; right:9px; width:32px; height:32px; flex:0 0 32px; border-radius:10px; }
.pochihai-small .pochihai-icon:before { transform:scale(.62); transform-origin:top left; top:7px; left:8px; }
.pochihai-small .pochihai-icon span:before { transform:scale(.62); transform-origin:top left; top:7px; left:15px; }
.pochihai-small .pochihai-icon span:after { transform:rotate(45deg) scale(.62); top:14px; left:11px; }
@media (max-width:600px) {
  .pochihai-medium { width:min(100%,560px); min-height:82px; padding:16px 14px; }
  .pochihai-small { width:128px; min-width:128px; min-height:128px; padding:20px 10px 12px; }
  .pochihai-small .pochihai-icon { width:30px; height:30px; flex-basis:30px; }
}

/* v0.1.8: selectable SVG icon, clear press feedback */
.pochihai-button .pochihai-icon:before,
.pochihai-button .pochihai-icon span:before,
.pochihai-button .pochihai-icon span:after { content:none !important; display:none !important; }
.pochihai-icon-svg { display:block; width:28px; height:28px; flex:0 0 auto; }
.pochihai-small .pochihai-icon-svg { width:21px; height:21px; }
.pochihai-button { -webkit-tap-highlight-color:transparent; transform-origin:center; }
.pochihai-button:active { transform:translateY(1px) scale(.985); filter:brightness(.97); box-shadow:0 3px 9px rgba(24,39,75,.2),inset 0 2px 5px rgba(0,0,0,.12); }
.pochihai-button:active .pochihai-icon { transform:scale(.94); }
.pochihai-button .pochihai-icon { transition:transform .16s ease, background-color .16s ease; }
.pochihai-preview-pressed { animation:pochihai-button-press .58s ease-out !important; }
.pochihai-preview-pressed .pochihai-icon { animation:pochihai-icon-press .58s ease-out; }
@keyframes pochihai-button-press { 0%{transform:translateY(0) scale(1);filter:brightness(1)} 18%{transform:translateY(2px) scale(.985);filter:brightness(.96)} 48%{transform:translateY(0) scale(1.012);filter:brightness(1.04)} 100%{transform:translateY(0) scale(1);filter:brightness(1)} }
@keyframes pochihai-icon-press { 0%,100%{transform:scale(1)} 20%{transform:scale(.88)} 48%{transform:scale(1.08)} }
@media(prefers-reduced-motion:reduce){.pochihai-button,.pochihai-button .pochihai-icon{transition:none!important}.pochihai-preview-pressed,.pochihai-preview-pressed .pochihai-icon{animation:none!important}}

/* v0.1.10: SVG-only icons; disable legacy CSS-drawn U-shaped download glyph. */
.pochihai-button .pochihai-icon:before,
.pochihai-button .pochihai-icon span:before,
.pochihai-button .pochihai-icon span:after { content:none !important; display:none !important; }

/* v0.1.11: make sure the selected SVG is the only icon shown. */
.pochihai-button .pochihai-icon::before,
.pochihai-button .pochihai-icon::after,
.pochihai-button .pochihai-icon span::before,
.pochihai-button .pochihai-icon span::after { content:none !important; display:none !important; border:0 !important; background:none !important; }