:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #273434;
  background: #f6f3ea;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #20383b;
  --pine: #173d42;
  --jade: #47716b;
  --paper: #f6f3ea;
  --card: #fffefa;
  --muted: #6c7670;
  --line: #e4dfd1;
  --red: #bd5745;
  --gold: #c89f5a;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
.hero {
  position: relative;
  overflow: hidden;
  color: #fffaf0;
  background-color: var(--pine);
  background-image:
    radial-gradient(ellipse at 88% 118%, transparent 0 22%, #ffffff0b 22.2% 22.6%, transparent 22.8% 29%, #ffffff0a 29.2% 29.6%, transparent 29.8% 36%, #ffffff09 36.2% 36.6%, transparent 36.8%),
    linear-gradient(115deg, #173d42 0%, #21494a 58%, #2d5652 100%);
  border-bottom: 4px solid var(--red);
}
.hero-inner { position: relative; max-width: 1320px; margin: auto; padding: 54px 24px 42px; }
.eyebrow { display: flex; gap: 13px; align-items: center; margin: 0 0 15px; color: #d7c394; font-size: .69rem; font-weight: 700; letter-spacing: .16em; }
.eyebrow span:first-child { font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; font-size: .88rem; letter-spacing: .04em; }
.eyebrow span:last-child { padding-left: 13px; border-left: 1px solid #d7c39470; }
.hero h1 { position: relative; z-index: 1; max-width: 760px; margin: 0; color: #fffaf0; font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; font-size: clamp(2.45rem, 6vw, 4.7rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.13; }
.summary { position: relative; z-index: 1; margin: 14px 0 0; color: #e5e9dc; font-size: .98rem; }
.hero-stamp { position: absolute; top: 50%; right: max(24px, calc((100vw - 1250px) / 2)); display: grid; width: 112px; height: 112px; place-content: center; justify-items: center; transform: translateY(-38%); border: 1px solid #f2dfbf99; border-radius: 50%; color: #fff3dc; background: #b64f3f; box-shadow: 0 0 0 7px #b64f3f22, 0 0 0 8px #f2dfbf50; }
.hero-stamp span { font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; font-size: 2.45rem; line-height: 1; }
.hero-stamp small { margin-top: 5px; font-size: .55rem; letter-spacing: .2em; }
main { max-width: 1320px; margin: auto; padding: 25px 24px 40px; }
.contribution-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 22px; align-items: center; margin: 0 0 18px; padding: 19px 21px; border: 1px solid #d8d5c7; border-radius: 14px; background: linear-gradient(110deg,#fffefa,#f0eee5); box-shadow: 0 6px 20px #30413b08; }
.contribution-intro { max-width: 760px; }
.contribution-intro .section-kicker { margin-bottom: 5px; }
.contribution-intro h2 { margin: 0; color: var(--ink); font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; font-size: 1.45rem; font-weight: 600; }
.contribution-intro p:last-child { margin: 6px 0 0; color: #68746d; font-size: .83rem; line-height: 1.5; }
.contribution-picker { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; cursor: pointer; text-align: center; }
.contribution-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.contribution-file:focus-visible + .unused { outline: 3px solid #c89f5a99; }
.contribution-privacy, .contribution-flow { grid-column: 1 / -1; }
.contribution-privacy { margin: 0; color: var(--muted); font-size: .72rem; }
.contribution-flow { display: grid; grid-template-columns: minmax(0,.8fr) minmax(280px,1.2fr); gap: 12px 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.contribution-status { grid-column: 1 / -1; min-height: 1.3em; margin: 0; color: #315f55; font-size: .83rem; font-weight: 700; }
.contribution-activity { grid-column: 1 / -1; display: flex; min-height: 38px; align-items: center; justify-content: center; gap: clamp(12px, 5vw, 28px); overflow: hidden; color: #42695d; font-size: 1.5rem; }
.contribution-activity span { display: inline-block; animation: mimi-activity-bob 1.1s ease-in-out infinite; }
.contribution-activity span:nth-child(2) { animation-delay: .12s; }
.contribution-activity span:nth-child(3) { animation-delay: .24s; }
.contribution-activity span:nth-child(4) { animation-delay: .36s; }
.contribution-activity span:nth-child(5) { animation-delay: .48s; }
.contribution-activity[hidden] { display: none; }
@keyframes mimi-activity-bob { 0%, 60%, 100% { opacity: .45; transform: translateY(2px) scale(.94); } 30% { opacity: 1; transform: translateY(-5px) scale(1.08); } }
.contribution-preview { width: 100%; max-height: 520px; min-height: 220px; border-radius: 10px; background: #eee; object-fit: contain; }
.contribution-result { min-width: 0; max-height: 560px; overflow: auto; padding: 15px; border: 1px solid #e7e2d6; border-radius: 10px; background: white; }
.contribution-result h3 { margin: 0 0 8px; color: var(--ink); font-size: 1rem; }
.contribution-result > p { font-size: .83rem; line-height: 1.5; }
.contribution-result .product-block { margin-top: 10px; }
.contribution-submit { grid-column: 1 / -1; display: grid; gap: 10px; max-width: 760px; padding: 14px; border: 1px solid #e4dfd1; border-radius: 10px; background: #fbfaf5; }
.contribution-submit label { display: grid; gap: 6px; color: #50615b; font-size: .77rem; font-weight: 700; }
.contribution-submit select, .contribution-submit input, .contribution-submit textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid #d9d6ca; border-radius: 8px; background: white; color: inherit; }
.contribution-submit textarea { resize: vertical; }
.contribution-submit :focus-visible { outline: 3px solid #47716b50; outline-offset: 1px; }
.contribution-public-note { margin: 0; color: #8a5532; font-size: .74rem; line-height: 1.45; }
.contribution-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contribution-actions .button { min-height: 44px; }
.contribution-flow[hidden], .contribution-result[hidden], .contribution-submit[hidden], .contribution-preview[hidden] { display: none; }
.toolbar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 6px 20px #30413b08; }
.toolbar label { display: grid; gap: 6px; color: #50615b; font-size: .77rem; font-weight: 700; }
.toolbar .search { flex: 1; min-width: 230px; }
.toolbar select, .toolbar input[type=search] { width: 100%; min-height: 44px; border: 1px solid #d9d6ca; border-radius: 8px; outline: none; background: #fff; padding: 0 11px; color: inherit; }
.toolbar select:focus, .toolbar input:focus, .tag-editor textarea:focus { border-color: var(--jade); box-shadow: 0 0 0 3px #47716b24; }
.toolbar .review-toggle { display: flex; align-items: center; height: 42px; padding: 0 6px; white-space: nowrap; }
.review-toggle input { width: 17px; height: 17px; accent-color: var(--red); }
.tag-tools { display: flex; gap: 7px; flex-wrap: wrap; }
.button { min-height: 39px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: .78rem; font-weight: 700; transition: background .15s, transform .15s; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .cloud-tag:focus-visible, .close:focus-visible { outline: 3px solid #c89f5a99; outline-offset: 2px; }
.button-quiet { border-color: #d9d6ca; background: #faf9f4; color: #38524c; }
.button-quiet:hover { background: #f0eee5; }
.button-primary { background: var(--pine); color: white; }
.button-primary:hover { background: #285457; }
.tag-storage-hint, .tag-status { min-height: 1em; margin: 8px 3px 0; color: var(--muted); font-size: .75rem; }
.filter-note { margin: 8px 3px 0; color: var(--muted); font-size: .7rem; }
.tag-status { color: #315f55; }
.review-queue { margin-top: 17px; border: 1px solid #e1d7c6; border-radius: 12px; background: #fffaf1; }
.review-queue[hidden] { display: none; }
.review-queue summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; padding: 10px 15px; color: #684b39; cursor: pointer; font-size: .85rem; font-weight: 700; }
.queue-hint { color: var(--muted); font-size: .73rem; font-weight: 400; }
.review-queue-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,310px),1fr)); gap: 8px; padding: 0 12px 12px; }
.review-queue-item { display: flex; gap: 8px; align-items: center; min-width: 0; padding: 7px; border: 1px solid #e8e3d8; border-radius: 9px; background: white; color: var(--ink); }
.review-queue-item.review-checked { background: #f4f5ee; }
.review-queue-open { display: flex; flex: 1 1 auto; gap: 10px; align-items: center; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.review-queue-open:hover, .review-queue-open:focus-visible { outline: 2px solid #c89f5a55; outline-offset: 3px; }
.review-check-button { flex: 0 0 auto; padding: 7px 9px; font-size: .7rem; }
.review-queue-item img { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 6px; background: #eee; object-fit: cover; }
.review-queue-text { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.review-queue-text strong { overflow-wrap: anywhere; color: var(--ink); font-size: .76rem; }
.review-detail { margin: 16px 0; padding: 11px 13px; border: 1px solid #e6dcc9; border-radius: 9px; background: #fffaf1; }
.review-detail p { margin: 0 0 9px; color: var(--muted); font-size: .78rem; }
.tag-panel { margin-top: 23px; padding: 18px 20px 19px; border: 1px solid var(--line); border-radius: 13px; background: #eeeee5; }
.tag-panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 13px; }
.section-kicker { margin: 0 0 3px; color: #9c604c; font-size: .62rem; font-weight: 700; letter-spacing: .17em; }
.tag-panel h2 { margin: 0; color: var(--ink); font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; font-size: 1.45rem; font-weight: 600; }
.tag-cloud-summary { margin: 0; color: var(--muted); font-size: .76rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tag-cloud-toggle { margin-top: 13px; }
.cloud-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #ced6ca; border-radius: 999px; background: #fffefa; color: #315653; cursor: pointer; font-size: var(--tag-size, .8rem); line-height: 1.15; transition: color .15s, background .15s, border-color .15s; }
.cloud-tag:hover, .cloud-tag[aria-pressed=true] { border-color: var(--pine); background: var(--pine); color: white; }
.cloud-count { color: #8a8e7e; font-size: .68em; font-weight: 700; }
.cloud-tag:hover .cloud-count, .cloud-tag[aria-pressed=true] .cloud-count { color: #e7d6b2; }
.result-count { margin: 20px 2px 13px; color: #64716a; font-size: .84rem; }
.view-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; }
.view-controls .button { min-width: 92px; }
.view-help { margin-left: 4px; color: var(--muted); font-size: .75rem; }
.gallery, .product-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,220px), 1fr)); gap: 16px; }
.product-gallery[hidden], .gallery[hidden] { display: none; }
.card { overflow: hidden; border: 1px solid #e8e3d8; border-radius: 12px; background: var(--card); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.card:hover, .card:focus-visible { transform: translateY(-2px); box-shadow: 0 9px 24px #233b3219; }
.card:focus-visible { outline: 3px solid #c89f5a99; outline-offset: 2px; }
.card img { display: block; width: 100%; height: 220px; background: #eeece5; object-fit: cover; }
.card-body { padding: 12px 13px 14px; }
.card-title { margin: 0 0 8px; color: #2c3a37; font-size: .91rem; font-weight: 700; line-height: 1.4; }
.meta { color: #788078; font-size: .73rem; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.chip { padding: 4px 8px; border-radius: 99px; background: #e9eee7; color: #4b6658; font-size: .68rem; }
.status { margin-top: 8px; color: #a35d39; font-size: .68rem; }
.research-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.research-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid transparent; border-radius: 999px; font-size: .67rem; font-weight: 700; line-height: 1.2; }
.research-matched { border-color: #c8ddcd; background: #e7f2e7; color: #356347; }
.research-partial { border-color: #e7d6a5; background: #fbf2d7; color: #765c1e; }
.research-pending { border-color: #e7c9aa; background: #fbede0; color: #8a5532; }
.research-unmatched { border-color: #e7b9b2; background: #fae9e7; color: #934c43; }
.product-card { display: flex; overflow: hidden; flex-direction: column; border: 1px solid #e8e3d8; border-radius: 12px; background: var(--card); }
.product-card > img { display: block; width: 100%; height: 190px; background: #eeece5; object-fit: cover; }
.product-card-body { flex: 1; padding: 13px; }
.product-card h3 { margin: 0 0 8px; color: #2c3a37; font-size: .92rem; line-height: 1.4; }
.product-card-body .meta { min-height: 1.5em; }
.product-open { align-self: flex-start; margin: 0 13px 13px; }
.pagination { display: flex; justify-content: center; gap: 12px; align-items: center; margin: 25px 0 10px; }
.pagination[hidden] { display: none; }
.pagination span { min-width: 105px; color: var(--muted); font-size: .8rem; text-align: center; }
.pagination button:disabled { opacity: .45; cursor: default; transform: none; }
.empty { padding: 60px; color: #66736d; text-align: center; }
dialog { width: min(960px, calc(100% - 28px)); max-height: 92vh; padding: 0; border: 1px solid #e7e0d2; border-radius: 16px; background: #fffefa; box-shadow: 0 18px 80px #10201dcc; }
dialog::backdrop { background: #15221fbb; }
#detailContent { display: grid; min-height: 360px; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.detail-image { width: 100%; height: 100%; max-height: 84vh; background: #1e2927; object-fit: contain; }
.detail-info { overflow: auto; padding: 29px; }
.detail-info h2 { margin: 0 40px 8px 0; color: var(--ink); font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; font-size: 1.75rem; font-weight: 600; line-height: 1.3; }
.detail-info h3 { margin: 23px 0 8px; color: #9c604c; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.detail-info p, .detail-info li { font-size: .88rem; line-height: 1.55; }
.detail-meta { color: var(--muted); font-size: .76rem !important; }
.close { position: absolute; z-index: 2; top: 10px; right: 12px; width: 36px; height: 36px; border: 1px solid #ddd7ca; border-radius: 50%; background: #fffefa; color: var(--ink); cursor: pointer; font-size: 24px; }
.product-list { display: grid; gap: 13px; }
.product-block { padding: 12px; border: 1px solid #e7e4d9; border-radius: 10px; background: #fcfbf5; }
.product-block h4 { margin: 0 0 6px; color: #30423e; font-size: .92rem; }
.product-block > p { margin: 6px 0; }
.web-research { margin-top: 10px; padding: 11px 12px; border-radius: 8px; background: #f0f1e9; }
.web-research h5 { margin: 0 0 8px; color: #8f5946; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.web-research h6 { margin: 12px 0 5px; font-size: .78rem; }
.web-research p { margin: 6px 0; }
.research-status { color: #746b5d; }
.research-links a { color: #245c5b; text-decoration: underline; text-underline-offset: 2px; }
.translation { font-size: .82rem !important; }
.review-summary { padding-left: 9px; border-left: 2px solid var(--gold); }
.detail-chips { margin: 0 0 9px; }
.tag-editor { display: grid; gap: 9px; }
.tag-editor label { display: grid; gap: 7px; color: #56675f; font-size: .78rem; font-weight: 700; }
.tag-editor textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid #d9d6ca; border-radius: 8px; background: white; color: inherit; }
.tag-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-tag-editor { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8f7f0; }
.bulk-tag-editor label { display: grid; gap: 7px; color: #56675f; font-size: .78rem; font-weight: 700; }
.bulk-tag-editor textarea, .bulk-tag-actions select { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid #d9d6ca; border-radius: 8px; background: white; color: inherit; font: inherit; }
.bulk-tag-actions { display: flex; gap: 8px; align-items: center; }
.bulk-tag-actions select { max-width: 180px; }
.bulk-tag-editor p { margin: 0; }
.related-photo-list { display: grid; gap: 7px; }
.related-photo { display: flex; gap: 10px; align-items: center; min-height: 58px; padding: 6px; border: 1px solid #e7e4d9; border-radius: 8px; background: white; color: var(--ink); cursor: pointer; text-align: left; }
.related-photo:hover, .related-photo:focus-visible { border-color: var(--jade); outline: 2px solid #47716b33; }
.related-photo img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 5px; object-fit: cover; }
.related-photo span { font-size: .74rem; line-height: 1.35; overflow-wrap: anywhere; }
footer { padding: 28px 18px; color: #738077; font-size: .73rem; text-align: center; }
@media (max-width: 760px) {
  .hero-inner { padding-top: 38px; padding-bottom: 32px; }
  .hero-stamp { right: 23px; width: 70px; height: 70px; transform: translateY(-26%); }
  .hero-stamp span { font-size: 1.65rem; }
  .hero-stamp small { font-size: .43rem; }
  .hero h1 { max-width: 80%; font-size: clamp(2rem, 8vw, 3.3rem); }
  .eyebrow { flex-wrap: wrap; gap: 7px; }
  .eyebrow span:last-child { padding-left: 9px; }
  main { padding: 18px 15px 30px; }
  .contribution-panel { grid-template-columns: 1fr; gap: 10px; padding: 15px; }
  .contribution-picker { width: 100%; min-height: 50px; }
  .contribution-privacy, .contribution-flow { grid-column: 1; }
  .contribution-flow { grid-template-columns: 1fr; }
  .contribution-preview { max-height: 380px; min-height: 180px; }
  .contribution-result { max-height: none; }
  .contribution-submit { grid-column: 1; }
  .toolbar { gap: 10px; padding: 13px; }
  .toolbar .search { min-width: 100%; }
  .toolbar label:not(.search):not(.review-toggle) { flex: 1 1 calc(50% - 10px); min-width: 135px; }
  .toolbar .review-toggle { flex: 1 1 100%; min-height: 44px; }
  .tag-tools { width: 100%; }
  .tag-tools .button { flex: 1; min-height: 44px; }
  .tag-panel { padding: 15px; }
  .tag-panel-heading { align-items: start; flex-direction: column; gap: 5px; }
  .cloud-tag { min-height: 40px; }
  .view-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .view-controls .button { min-height: 44px; }
  .view-help { grid-column: 1 / -1; margin: 0; }
  .gallery, .product-gallery { grid-template-columns: repeat(auto-fill,minmax(min(100%,165px),1fr)); gap: 10px; }
  .card img { height: 180px; }
  .product-card > img { height: 160px; }
  .review-queue summary { align-items: start; flex-direction: column; gap: 3px; }
  .review-queue-list { grid-template-columns: 1fr; }
  .pagination { position: sticky; bottom: 8px; z-index: 1; width: fit-content; max-width: 100%; margin: 18px auto; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fffefaed; box-shadow: 0 3px 12px #20383b22; }
  .pagination .button { min-height: 44px; }
  #detailContent { grid-template-columns: 1fr; }
  dialog { width: calc(100% - 14px); max-height: 95dvh; border-radius: 12px; }
  #detailContent { display: flex; max-height: 95dvh; flex-direction: column; overflow: auto; }
  .detail-image { flex: 0 0 auto; height: min(38dvh,340px); min-height: 190px; }
  .detail-info { overflow: visible; padding: 16px; }
  .detail-info h2 { margin-right: 35px; font-size: 1.45rem; }
  .bulk-tag-actions { align-items: stretch; flex-direction: column; }
  .bulk-tag-actions select { max-width: none; min-height: 44px; }
}
@media (max-width: 390px) {
  .hero-stamp { top: 22px; right: 17px; transform: none; }
  .hero h1 { max-width: 100%; padding-right: 52px; font-size: 2.05rem; }
  .eyebrow span:last-child { border-left: 0; padding-left: 0; }
  .gallery, .product-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card img { height: 150px; }
  .card-body { padding: 10px; }
  .card-title { font-size: .82rem; }
  .chip { padding: 4px 6px; font-size: .63rem; }
  .product-card > img { height: 145px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } .contribution-activity span { animation: none; } }
:root {