/* Maisooon: approved interaction proposals 1, 3, 4, 5, 6. */
@property --ma-orbit { syntax: '<angle>'; inherits: false; initial-value: 0deg }
.ma-search-surface { position: relative; isolation: isolate }
.ma-search-surface::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--ma-orbit), transparent 0deg 265deg, #a044a0 305deg, #6333b5 348deg, transparent 360deg); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; z-index: 2 }
.ma-search-sweep::after { animation: ma-border-sweep 1100ms ease-in-out 1 }
@keyframes ma-border-sweep { 0% { --ma-orbit: 0deg; opacity: 0 } 12% { opacity: 1 } 80% { opacity: 1 } 100% { --ma-orbit: 360deg; opacity: 0 } }
.ma-logo-lens { position: relative; display: inline-block }
.ma-logo-lens::after { content: ''; position: absolute; left: 16.76%; top: 4.31%; width: 18.96%; height: 59.48%; border-radius: 50%; pointer-events: none; background: linear-gradient(115deg, transparent 25%, #c7a1f845 38%, #fff 50%, #c7a1f875 62%, transparent 75%); background-size: 300% 100%; background-position: 100% 0; opacity: 0 }
.ma-logo-shine::after { animation: ma-logo-glint 900ms ease-in-out 1 }
@keyframes ma-logo-glint { 0% { opacity: 0; background-position: 100% 0 } 20%,75% { opacity: 1 } 100% { opacity: 0; background-position: 0 0 } }
form[role=search] button.ma-search-pending { position: relative; min-width: 148px; color: transparent !important; cursor: wait; pointer-events: none }
form[role=search] button.ma-search-pending::after { content: '探しています…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 23px; color: #fff; font-size: 13px; white-space: nowrap; border-radius: inherit; background-color: #6d3ea3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px 18px; background-position: 12px 50%; animation: ma-searching 800ms ease-in-out infinite }
@keyframes ma-searching { 0%,100% { background-position: 12px 54% } 50% { background-position: 17px 42% } }
form[role=search] input[type=checkbox] { accent-color: #764ba2 }
form[role=search] label:has(input[type=checkbox]) { transition: background-color 220ms ease, border-color 220ms ease }
form[role=search] label:has(input[type=checkbox]:checked) { background-color: #f7f3fb; border-color: #ac8ec9 }
[data-ma-zoom] { cursor: zoom-in; -webkit-tap-highlight-color: #8555b52b; transition: box-shadow 180ms ease }
[data-ma-zoom]:focus-visible { outline: 2px solid #764ba2; outline-offset: 4px }
[data-ma-zoom]:active { box-shadow: 0 0 0 3px #8555b550 }
@media (hover: hover) and (pointer: fine) {
  [data-ma-zoom] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='white' stroke='%23202020' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='m21 21-5.7-5.7M6.5 10h7M10 6.5v7'/%3E%3C/svg%3E") 12 12, zoom-in }
}
.ma-zoom-dialog { box-sizing: border-box; width: min(1080px, 94vw); max-width: 94vw; max-height: 94dvh; padding: 22px; border: 1px solid #ddd8d2; border-radius: 12px; background: #fff; color: #222; box-shadow: 0 24px 90px #0005; font-family: inherit; overflow: auto }
.ma-zoom-dialog::backdrop { background: #17141b9c; backdrop-filter: blur(3px) }
.ma-zoom-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px }
.ma-zoom-heading h2 { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere }
.ma-zoom-dialog button { min-height: 44px; padding: 9px 15px; border: 1px solid #dedad3; border-radius: 6px; background: #f6f4f1; color: #222; font-family: inherit; font-size: 13px; cursor: pointer; flex-shrink: 0 }
.ma-zoom-dialog button:focus-visible { outline: 2px solid #764ba2; outline-offset: 3px }
.ma-zoom-viewport { max-height: 68dvh; overflow: auto; overscroll-behavior: contain; background: #f7f5f1; border-radius: 5px; -webkit-overflow-scrolling: touch }
.ma-zoom-image { display: block; width: 100%; max-width: 100%; max-height: 68dvh; object-fit: contain; cursor: zoom-in }
.ma-zoomed .ma-zoom-image { width: 200%; max-width: none; max-height: none; height: auto; cursor: zoom-out }
.ma-zoom-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px }
.ma-zoom-hint { font-size: 12px; line-height: 1.6; margin: 0; color: #6f6962 }
.ma-zoom-error { font-size: 13px; margin: 12px 0 0; color: #853e3e }
.ma-interaction-notice { position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 20px; border: 1px solid #d9d3cc; border-radius: 8px; background: #fff; color: #333; box-shadow: 0 6px 30px #0002; font-size: 13px }
.ma-interaction-notice[hidden], .ma-zoom-error[hidden] { display: none }
@media (max-width: 600px) {
  form[role=search] button.ma-search-pending { min-width: 132px }
  form[role=search] button.ma-search-pending::after { font-size: 12px }
  .ma-zoom-dialog { width: 96vw; max-width: 96vw; padding: 16px; max-height: 94dvh }
  .ma-zoom-heading h2 { font-size: 15px }
  .ma-zoom-heading { gap: 10px }
  .ma-zoom-tools { align-items: flex-start }
  .ma-zoom-hint { font-size: 11px; max-width: 155px }
}
@media (prefers-reduced-motion: reduce) {
  .ma-search-sweep::after { animation: none !important; background: #8455b1; opacity: 1 }
  .ma-logo-shine::after { animation: none !important; background: #c09be84d; opacity: 1 }
  form[role=search] button.ma-search-pending::after { animation: none !important }
  [data-ma-zoom], form[role=search] label:has(input[type=checkbox]) { transition: none !important }
}