/* /ai-compare 「AI 比較」 v2 (ai-compare.js): the nine AI-look patterns, one at a time — picker tiles, then a stage whose
   large image steps through the pattern's examples. Built on credits.css (and gallery.css for the LUMA works); colours
   from theme.css only; boxes like the Studio card. Motion is transform/opacity only, and off with reduced motion. */
.compare-main{max-width:1120px}
.compare-page .credits-nav a[aria-current=page]{color:var(--t-384bff)}
.compare-intro{padding-bottom:8px}
.compare-intro p{max-width:46em}
.compare-intro .compare-lead{font-size:17px;line-height:1.85;color:var(--t-242d28)}
.compare-howto,.credits-intro>p.compare-howto:last-child{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--t-26302e)}
.compare-howto-box{flex:none;width:30px;height:20px;border:2px solid var(--c-c58b1c)}
.compare-section{margin-top:64px}
.compare-section h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 10px}
.compare-head{margin-bottom:16px}
.compare-note{margin:0;max-width:46em;font-size:14px;line-height:1.8;color:var(--t-59626d)}
.compare-note+.compare-note{margin-top:6px}
.compare-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 9 つのパターン: nine tiles, a line slides under the chosen one */
.compare-explorer{margin-top:28px;scroll-margin-top:calc(var(--navigation-height,80px) + 8px)}
.compare-picker-title{margin:0 0 12px;font-size:18px}
.compare-picker{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;padding-bottom:10px;border-bottom:1px solid var(--c-d8dcd3)}
.compare-tile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 6px;align-content:start;padding:0;border:0;background:none;color:var(--t-59626d);font:inherit;text-align:left;cursor:pointer}
.compare-tile-image{grid-column:1/-1;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--c-f2f1ec);border:1px solid var(--c-d8dcd3);transition:border-color .2s ease,transform .25s ease}
.compare-tile-image img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.18);filter:saturate(.55);transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.compare-tile-n{font:12px/1.5 monospace;color:var(--t-6675be)}
.compare-tile-name{font-size:13px;line-height:1.5}
.compare-tile:hover .compare-tile-image{transform:translateY(-3px)}
.compare-tile:hover img,.compare-tile[aria-selected=true] img{transform:scale(1.32);filter:none}
.compare-tile[aria-selected=true]{color:var(--t-26302e)}
.compare-tile[aria-selected=true] .compare-tile-name{font-weight:700}
.compare-tile[aria-selected=true] .compare-tile-image{border-color:var(--c-384bff)}
.compare-tile:focus-visible{outline:2px solid var(--c-384bff);outline-offset:3px}
.compare-picker-mark{position:absolute;left:0;bottom:-2px;height:3px;width:0;background:var(--c-384bff);transition:transform .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1)}
/* Hidden only until the picker comes into view; the rise itself starts from hidden, so without animations they show. */
.compare-explorer:not(.is-in) .compare-tile{opacity:0;transform:translateY(14px)}
.compare-explorer.is-in .compare-tile{animation:compare-rise .5s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 45ms) both}

/* The stage: the large image and its examples on the left, the words on the right */
.compare-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 44px;align-items:start;margin-top:28px}
.compare-stage-media{min-width:0}
.compare-stage-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--c-f2f1ec);border:1px solid var(--c-d8dcd3);container-type:size;touch-action:pan-y}
/* A new picture is laid on top of the old one, on the frame's own colour, so the old one never shows through its
   sides; it is fully opaque early in its slide, so the two never read as a double exposure. */
.compare-stage-slide{position:absolute;inset:0;display:grid;place-items:center;background:var(--c-f2f1ec);animation:compare-slide-in .5s cubic-bezier(.2,.8,.2,1) both}
.compare-stage-slide.is-leaving{animation:compare-fade-out .35s ease both}
.compare-stage-drift{position:relative;width:min(100cqw,calc(100cqh * var(--r,1)));height:auto;animation:compare-drift 9s ease-out .3s both}
.compare-stage-drift img{display:block;width:100%;height:100%;object-fit:contain}
.compare-stage-drift .compare-box{animation:compare-box-in .45s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--k,0) * 120ms) both}
.compare-stage-drift .compare-box::after{content:"";position:absolute;inset:-2px;border:2px solid var(--c-c58b1c);opacity:0;animation:compare-ping 1.3s ease-out calc(.8s + var(--k,0) * 120ms) both}
.compare-stage-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:var(--c-101117b0);color:var(--t-ffffff);font:28px/1 serif;cursor:pointer;opacity:0;transition:opacity .2s ease,transform .2s ease}
.compare-stage-arrow span{margin-top:-3px}
.compare-stage-prev{left:12px}.compare-stage-next{right:12px}
.compare-stage-frame:hover .compare-stage-arrow,.compare-stage-arrow:focus-visible{opacity:1}
.compare-stage-prev:hover{transform:translateX(-2px)}.compare-stage-next:hover{transform:translateX(2px)}
.compare-stage-arrow:focus-visible,.compare-stage-zoom:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
.compare-stage-zoom{position:absolute;right:10px;top:10px;z-index:2;min-height:32px;padding:0 12px;border:0;background:var(--c-101117b0);color:var(--t-ffffff);font:inherit;font-size:12px;cursor:zoom-in;opacity:0;transition:opacity .2s ease}
.compare-stage-frame:hover .compare-stage-zoom,.compare-stage-zoom:focus-visible{opacity:1}
.compare-stage-progress{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:var(--c-10111710)}
.compare-stage-progress span{display:block;height:100%;background:var(--c-384bff);transform:scaleX(0);transform-origin:left}
.compare-stage-progress span.run{animation:compare-progress linear both}
/* Paused while the pointer rests on the picture, or while the keyboard is in the stage (a button pressed with the mouse
   keeps focus but is not :focus-visible, so it does not hold the steps). */
.compare-stage-frame:hover .compare-stage-progress span,.compare-stage-media:has(:focus-visible) .compare-stage-progress span{animation-play-state:paused}
.compare-stage:not(.is-auto) .compare-stage-progress{opacity:0}
.compare-stage-caption{min-height:3.4em;margin-top:10px}
.compare-stage-reason{margin:0;font-size:15px;line-height:1.65;color:var(--t-26302e);animation:compare-rise .45s cubic-bezier(.2,.8,.2,1) .15s both}
.compare-stage-source{margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--t-59626d);overflow-wrap:anywhere}
.compare-stage-source a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.compare-stage-source-label{font-weight:600}
.compare-stage-controls{display:flex;align-items:center;gap:10px;margin-top:12px}
.compare-play{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--c-c9cfc2);border-radius:50%;background:transparent;color:var(--t-26302e);cursor:pointer}
.compare-play::before{content:"";width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.compare-play[data-state=off]::before{width:0;height:0;margin-left:3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.compare-play:hover,.compare-play:focus-visible{border-color:var(--c-384bff);color:var(--t-384bff)}
.compare-strip{position:relative;display:flex;gap:8px;min-width:0;overflow-x:auto;padding:4px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.compare-thumb{position:relative;flex:none;width:64px;height:48px;padding:0;border:1px solid var(--c-d8dcd3);background:var(--c-f2f1ec);cursor:pointer;scroll-snap-align:center;opacity:.6;transition:opacity .2s ease,transform .2s ease,border-color .2s ease}
.compare-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.compare-thumb:hover{opacity:1;transform:translateY(-2px)}
.compare-thumb[aria-current=true]{opacity:1;border-color:var(--c-384bff);box-shadow:0 0 0 1px var(--c-384bff)}
.compare-thumb:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}

/* The words for one pattern */
.compare-stage-text{display:grid;gap:18px;min-width:0}
.compare-rise{animation:compare-rise .5s cubic-bezier(.2,.8,.2,1) calc(var(--d,0) * 60ms) both}
.compare-stage-head h2{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.02em}
.compare-pattern-n{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:1.5px solid var(--c-384bff);border-radius:50%;font:15px/1 monospace;color:var(--t-384bff)}
.compare-pattern-how{margin:8px 0 0;font-size:17px;line-height:1.7;color:var(--t-242d28)}
.compare-pattern-facts{display:grid;gap:2px;margin:0}
.compare-pattern-facts dt{font-size:12.5px;font-weight:600;color:var(--t-59626d)}
.compare-pattern-facts dd{margin:0 0 8px;font-size:14.5px;line-height:1.75;color:var(--t-26302e)}
.compare-stage-text h3{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--t-59626d)}
.compare-pattern-items ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.compare-pattern-items li{padding:3px 10px;border:1px solid var(--c-d8dcd3);border-radius:999px;background:var(--c-ffffff);font-size:13px;line-height:1.6;color:var(--t-26302e);cursor:help}
.compare-pattern-quality{display:inline-block;margin-top:8px;font-size:13px;color:var(--t-384bff);text-decoration:underline;text-underline-offset:4px}
.compare-pattern-luma{padding:14px 16px;border-left:3px solid var(--c-384bff);background:var(--c-ffffff)}
.compare-pattern-luma h3{color:var(--t-26302e)}
.compare-pattern-luma p{display:grid;gap:2px;margin:0;font-size:14px;line-height:1.7;color:var(--t-26302e)}
.compare-pattern-luma p+p{margin-top:8px}
.compare-pattern-luma p b{font-size:12px;color:var(--t-59626d)}
.compare-stage-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare-stage-go{display:grid;gap:2px;justify-items:end;padding:10px 14px;border:1px solid var(--c-d8dcd3);background:transparent;color:var(--t-26302e);font:inherit;text-align:right;cursor:pointer;transition:border-color .2s ease,transform .2s ease}
.compare-stage-go.is-prev{justify-items:start;text-align:left}
.compare-stage-go small{font-size:11.5px;color:var(--t-59626d)}
.compare-stage-go b{font-size:14px}
.compare-stage-go b::after{content:" →"}
.compare-stage-go.is-prev b::before{content:"← "}.compare-stage-go.is-prev b::after{content:none}
.compare-stage-go:hover{border-color:var(--c-384bff);transform:translateX(2px)}
.compare-stage-go.is-prev:hover{transform:translateX(-2px)}
.compare-stage-go:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}

.compare-box{position:absolute;z-index:1;border:2px solid var(--c-c58b1c);pointer-events:none}
.compare-box[data-n]::before{content:attr(data-n);position:absolute;left:-2px;top:-2px;min-width:18px;padding:1px 4px;background:var(--c-c58b1c);color:var(--t-ffffff);font-size:11px;font-weight:700;line-height:1.4;text-align:center}
.compare-boxes{position:absolute;inset:0}

@keyframes compare-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes compare-slide-in{0%{opacity:0;transform:translateX(calc(var(--dir,1) * 6%)) scale(.985)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes compare-fade-out{to{opacity:0;transform:scale(1.02)}}
@keyframes compare-drift{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes compare-box-in{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}
@keyframes compare-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
@keyframes compare-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* LUMA's works */
.compare-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px 18px;align-items:start;margin-top:16px}
.compare-works .gallery-card{margin:0}
.compare-works .gallery-card[hidden]{display:none}
.compare-tags{gap:3px 6px}
.compare-tags li{display:inline-flex;align-items:baseline;padding:0 7px;border:1px solid var(--c-d9c9a3);border-radius:999px;font-size:12px;line-height:1.7;color:var(--t-26302e)}
.compare-tags .compare-tag-ok{border-color:var(--c-d8dcd3);color:var(--t-59626d)}
.compare-tags .compare-tag-concern{border-color:var(--c-c58b1c);font-weight:700}
.compare-work-check{display:block;margin-top:4px;font-size:12px;color:var(--t-59626d)}
.compare-more{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:16px;padding:0 16px;border:1px solid var(--c-c9cfc2);background:transparent;color:var(--t-242d28);font:inherit;font-size:13px;cursor:pointer}
.compare-more:hover,.compare-more:focus-visible{border-color:var(--c-384bff);color:var(--t-384bff)}

/* Viewer */
.compare-viewer{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff);color:var(--t-26302e);overflow:auto}
.compare-viewer::backdrop{background:var(--c-101117d9)}
.compare-viewer[open]{animation:compare-in .18s ease}
@keyframes compare-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.compare-viewer-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--c-e5e8df);background:var(--c-ffffff)}
.compare-viewer-bar h2{margin:0;font-size:15px}
.compare-close{min-height:40px;padding:0 16px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:13px;cursor:pointer}
.compare-close:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
.compare-viewer-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;padding:16px}
.compare-viewer-figure{position:relative;margin:0;width:100%;align-self:start;background:var(--c-f2f1ec)}
.compare-viewer-figure img{display:block;width:100%;height:100%}
.compare-viewer-side{display:grid;align-content:start;gap:14px;min-width:0;font-size:13px;line-height:1.7}
.compare-viewer-subhead{margin:0 0 -6px;font-size:13px;color:var(--t-26302e)}
.compare-viewer-findings{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.compare-vf{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:6px 8px;border:1px solid var(--c-d8dcd3);background:var(--c-fafaf7)}
.compare-vf-n{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;background:var(--c-c58b1c);color:var(--t-ffffff);font-size:11px}
.compare-vf-group{color:var(--t-59626d)}
.compare-vf-what,.compare-vf-found{display:block;flex-basis:100%}
.compare-vf-what small,.compare-vf-found small{display:block;font-size:11.5px;color:var(--t-59626d)}
.compare-vf-reason{font-weight:600}
.compare-viewer-source h3{margin:0 0 6px;font-size:13px}
.compare-viewer-source dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:12.5px}
.compare-viewer-source dt{color:var(--t-59626d)}
.compare-viewer-source dd{margin:0;overflow-wrap:anywhere}
.compare-viewer-source a{text-decoration:underline;text-underline-offset:3px;color:var(--t-384bff)}
.compare-after{display:grid;gap:2px;padding:6px 8px;border-left:3px solid var(--c-384bff);background:var(--c-fafaf7)}
.compare-after b{font-size:12px}

/* Asked for */
.compare-asked{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.compare-ask{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
.compare-ask img{display:block;width:100%;height:auto;border:1px solid var(--c-e5e8df)}
.compare-ask-body{display:grid;align-content:start;gap:4px;font-size:13px;line-height:1.7}
.compare-work-title{margin:0;font-size:13.5px;font-weight:600}
.compare-ask-label{font-size:11.5px;color:var(--t-59626d)}
.compare-ask-brief{quotes:none;font-weight:600;color:var(--t-26302e)}
.compare-ask-note{margin:0;color:var(--t-59626d)}
.compare-about p{max-width:46em;color:var(--t-59626d);line-height:1.8;font-size:14px}

/* Touch screens: the arrows and the zoom button stay visible (there is no hover) */
@media (hover:none){.compare-stage-arrow,.compare-stage-zoom{opacity:1}}
@media (max-width:980px){
 .compare-picker{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:12px}
 .compare-picker::-webkit-scrollbar{display:none}
 .compare-tile{flex:none;width:104px;scroll-snap-align:center}
 .compare-stage{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:760px){
 .compare-stage-arrow{width:38px;height:38px;margin-top:-19px;font-size:24px}
 .compare-pattern-how{font-size:16px}
 .compare-viewer-body{grid-template-columns:1fr;padding:12px}
 .compare-works{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
}
@media (prefers-reduced-motion:reduce){
 .compare-explorer:not(.is-in) .compare-tile,.compare-explorer.is-in .compare-tile,.compare-rise,.compare-stage-slide,.compare-stage-drift,.compare-stage-drift .compare-box,.compare-stage-reason,.compare-viewer[open]{animation:none;opacity:1;transform:none}
 .compare-stage-drift .compare-box::after{display:none}
 .compare-tile-image,.compare-tile-image img,.compare-picker-mark,.compare-thumb,.compare-stage-go,.compare-stage-arrow{transition:none}
}