.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.showcase-card{overflow:hidden;text-decoration:none;transition:transform .22s var(--ease-out),border-color .22s}.showcase-card:hover{transform:translateY(-3px);border-color:var(--color-line-2)}.showcase-card:focus-visible{outline:3px solid var(--color-accent-strong);outline-offset:5px}.showcase-art{aspect-ratio:1.45;position:relative;overflow:hidden;background:var(--color-surface-2)}.showcase-art>img{width:100%;height:100%;object-fit:cover}.showcase-kind,.showcase-number{position:absolute;top:14px;font-size:11px;font-weight:600;padding:6px 10px;background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-line);border-radius:99px}.showcase-kind{left:14px}.showcase-number{right:14px;font-family:var(--font-mono)}.showcase-type-art{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-ink)}.showcase-type-art>span:first-child{font:italic clamp(42px,5vw,72px)/1 var(--font-serif);transform:rotate(-8deg) translateX(-30px)}.showcase-type-art>span:nth-child(2){font:clamp(42px,5vw,72px)/1 var(--font-serif);border-bottom:2px dotted var(--color-accent-strong);transform:rotate(5deg) translateX(35px)}.showcase-type-art>svg{position:absolute;right:20%;bottom:22%}.showcase-art-caption{font-size:11px;position:absolute;bottom:18px}.showcase-story-art{height:100%;display:flex;align-items:center;justify-content:center;padding:45px 20px 20px}.showcase-story-art>div{width:32%;height:70%;background:var(--color-surface);border:1px solid var(--color-line-2);border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;padding:15px;font-size:11px;box-shadow:0 8px 22px var(--color-line)}.showcase-story-art>div:first-child{transform:rotate(-12deg) translateX(15px)}.showcase-story-art>div:nth-child(2){transform:translateY(-12px);z-index:1}.showcase-story-art>div:last-child{transform:rotate(12deg) translateX(-15px)}.translation-demo{max-width:780px;margin:auto;padding:clamp(20px,4vw,48px);border:1px solid var(--color-line);border-radius:28px;background:var(--color-surface)}.translation-sentence{font:clamp(26px,3.2vw,40px)/1.65 var(--font-serif);outline-offset:8px}.translation-word{display:inline;min-height:44px;padding:0 2px;border-bottom:1px dotted var(--color-muted);border-radius:5px;transition:background .18s,transform .18s;cursor:pointer}.translation-word:hover,.translation-word[aria-pressed=true]{background:var(--color-accent-soft);color:var(--color-accent-ink)}.translation-word:active{transform:translateY(2px)}.translation-word:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:2px}.translation-context{padding:18px 20px;background:var(--color-surface-2);border-radius:18px;min-height:80px}.showcase-player{background:var(--color-bg);min-height:100dvh}.showcase-viewer{position:relative;min-height:640px;height:calc(100dvh - 190px);border:1px solid var(--color-line);border-radius:24px;overflow:hidden;background:var(--color-surface-2)}.showcase-viewer iframe{width:100%;height:100%;border:0}.showcase-viewer .story-player{height:100%;min-height:0}.showcase-player:fullscreen{overflow:auto;padding:16px}.showcase-player:fullscreen .showcase-viewer{height:calc(100dvh - 180px)}.showcase-reference{height:100%;display:grid;grid-template-rows:auto minmax(240px,1fr) auto}.showcase-reference canvas{touch-action:none}@media(max-width:1023px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:639px){.showcase-grid{grid-template-columns:1fr;gap:20px}.showcase-art{aspect-ratio:1.4}.showcase-viewer{min-height:620px;height:calc(100dvh - 160px);border-radius:18px}.showcase-type-art>span:first-child,.showcase-type-art>span:nth-child(2){font-size:68px}}@media(prefers-reduced-motion:reduce){.showcase-card,.translation-word{transition:none}.showcase-card:hover,.translation-word:active{transform:none}}[data-motion=reduce] .showcase-card,[data-motion=reduce] .translation-word{transition:none}@media(max-width:639px){.showcase-viewer .story-note{min-width:44px;min-height:44px;justify-content:center}.showcase-viewer .story-note>span{display:block;position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.showcase-viewer .story-player-detail{left:16px;right:16px;width:auto;max-height:50%;overflow:auto;color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-line)}.showcase-viewer .story-player-detail>button{min-width:44px;min-height:44px}}.showcase-card-link{display:block;border-radius:inherit}.showcase-card-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:-3px}.showcase-capability-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:28px;background:var(--color-surface);opacity:0;transition:opacity .18s ease;color:var(--color-ink);pointer-events:none}.showcase-capability-overlay span{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500}.showcase-card-link:focus-visible .showcase-capability-overlay{opacity:1}.showcase-capabilities{border-top:1px solid var(--color-line);padding:0 22px}.showcase-capabilities summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;font-size:12px;color:var(--color-ink-2);cursor:pointer;list-style:none}.showcase-capabilities summary::-webkit-details-marker{display:none}.showcase-capabilities summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:8px}.showcase-capabilities[open]{padding-bottom:24px}.showcase-capabilities[open] summary{margin-bottom:12px}.showcase-capabilities[open] summary>span{transform:rotate(45deg)}@media(hover:hover){.showcase-card-link:hover .showcase-capability-overlay{opacity:1}}@media(prefers-reduced-motion:reduce){.showcase-capability-overlay{transition:none}}[data-motion=reduce] .showcase-capability-overlay{transition:none}.showcase-white-stage{--product-paper:#fff;background:var(--product-paper)}