.showcase-keychain .showcase-viewport{height:auto;aspect-ratio:1;background:#0b0f13;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.showcase-keychain .crystal-preview{width:100%;height:100%;margin:0;padding:0;border:0;display:flex;align-items:center;justify-content:center;background:#0b0f13}
.showcase-keychain .crystal-preview canvas{display:block;width:100%;height:100%;object-fit:contain;cursor:grab;touch-action:pan-y}
.showcase-keychain .crystal-preview canvas:active{cursor:grabbing}
.showcase-keychain .crystal-preview canvas:focus-visible{outline:2px solid #77cee9;outline-offset:-4px}
.showcase-keychain .crystal-error{color:#fff;padding:12px;font-size:13px}
.keychain-feature{max-width:820px;margin:auto}
.keychain-feature .showcase-viewport{height:auto;aspect-ratio:1}
.keychain-feature .crystal-preview{height:auto;aspect-ratio:1}
.keychain-feature h2{margin-top:0}

 .keychain-choices{display:grid;gap:8px;max-width:820px;margin:0 auto 24px}
.keychain-choices label{font-weight:600;font-size:14px;color:#203946}
.keychain-model-select{width:100%;font:inherit;font-size:16px;min-height:52px;padding:12px 16px;border:1px solid #c7c9c0;border-radius:12px;background:#fffcf2;color:#203946;cursor:pointer}
.keychain-model-select:focus-visible{outline:3px solid #b78949;outline-offset:3px}

.keychain-sample-name{text-align:center;font-size:12px;line-height:1.5;color:#53656a;margin:6px 0 14px}

.keychain-credit{font-size:10px;line-height:1.5;text-align:center;color:#738477;margin:10px}.keychain-credit a{color:inherit;text-decoration:underline}

.keychain-sample-name{white-space:pre-line}