.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)}.built-with{margin-top:28px;padding:24px;border:1px solid var(--color-line);border-radius:24px;background:var(--color-surface)}.built-with-composer{position:relative;margin-top:18px;border:1px solid var(--color-line-2,var(--color-line));border-radius:18px;background:var(--color-bg);padding:14px 56px 14px 44px}.built-with-composer textarea{width:100%;resize:none;border:0;background:transparent;color:var(--color-ink);font-size:15px;line-height:1.55;outline:none;min-height:72px}.built-with-icon{position:absolute;left:16px;top:17px;color:var(--color-muted)}.built-with-send{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent);color:var(--color-on-accent)}.built-with-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}.built-with-list{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}.built-with-list button{width:100%;height:100%;display:flex;gap:10px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--color-line);background:transparent;color:var(--color-ink-2);font-size:13px;line-height:1.45;transition:border-color .2s,background .2s}.built-with-list button:hover{border-color:var(--color-line-2,var(--color-muted))}.built-with-list button[aria-pressed=true]{border-color:var(--color-accent-strong);background:var(--color-surface-2);color:var(--color-ink)}.built-with-list button:focus-visible{outline:3px solid var(--color-accent-strong);outline-offset:2px}.built-with-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--color-surface-2);color:var(--color-ink)}@media(max-width:639px){.showcase-viewer{width:100vw;margin-inline:calc(50% - 50vw);border-radius:0;border-inline:0;height:calc(100svh - 56px);min-height:560px}.built-with{padding:18px;border-radius:20px}}