.dragon-example-detail{height:min(820px,100dvh - 32px);min-height:0;color:var(--ink);border:1px solid var(--line);background:var(--paper);clip-path:var(--angled-corners);grid-template-rows:auto minmax(0,1fr) auto;display:grid;overflow:hidden}.dragon-example-detail--modal{border:0;height:100%}.dragon-example-detail [hidden]{display:none!important}.dragon-example-detail__header{color:#f4f6f8;border-bottom:1px solid var(--line);background:repeating-linear-gradient(0deg,#ffffff06 0 1px,#0000000b 1px 3px),linear-gradient(105deg,#0b0c10,#30343b 48%,#111318);align-items:center;gap:14px;min-width:0;padding:14px 20px;display:flex;position:relative}.dragon-example-detail__form-icon{width:44px;height:38px;color:var(--red);flex-shrink:0}.dragon-example-detail__form-icon svg,.dragon-example-detail__thumbnail-icon svg,.dragon-example-detail__reference-icon svg{width:100%;height:100%;display:block}.dragon-example-detail__identity{flex:1;min-width:0}.dragon-example-detail__franchise{color:#bfc7d1;margin:0 0 4px;font:400 16px/1.2 AlegreyaSans,Arial,sans-serif}.dragon-example-detail__title{overflow-wrap:anywhere;font:400 clamp(24px, 2.4vw, 34px)/1.15 var(--font-brand);margin:0}.dragon-example-detail__close{color:#f4f6f8;width:44px;height:44px;clip-path:var(--angled-corners);cursor:pointer;background:#101115;border:1px solid #747e89;flex-shrink:0;place-items:center;padding:0;transition:background-color .18s;display:grid}.dragon-example-detail__close:hover{background:var(--red)}.dragon-example-detail__frame{min-width:0;min-height:0;padding:18px 20px}.dragon-example-detail__frame--animated{animation:.24s both dragon-detail-enter}.dragon-example-detail__workspace{grid-template-columns:minmax(0,1.3fr) minmax(330px,1fr);gap:20px;min-width:0;height:100%;min-height:0;display:grid}.dragon-example-detail__figure{min-width:0;height:100%;min-height:0;margin:0}.dragon-example-detail__content{grid-template-rows:auto minmax(0,1fr);gap:14px;min-width:0;min-height:0;display:grid}.dragon-example-detail__tabs{scrollbar-width:none;gap:5px;min-width:0;display:flex;overflow:auto hidden}.dragon-example-detail__tabs::-webkit-scrollbar{display:none}.dragon-example-detail__tab{border:1px solid var(--line);min-height:44px;color:var(--muted);background:var(--silver);clip-path:var(--angled-corners);cursor:pointer;flex:1 0;justify-content:center;align-items:center;gap:6px;padding:8px 9px;font:400 16px/1.2 AlegreyaSansMedium,Arial,sans-serif;transition:color .18s,background-color .18s,border-color .18s;display:inline-flex}.dragon-example-detail__tab svg{flex-shrink:0}.dragon-example-detail__tab:hover{border-color:var(--red);color:var(--ink)}.dragon-example-detail__tab.is-active{border-color:var(--control-background);color:var(--control-foreground);background:var(--control-background);box-shadow:inset 0 -3px var(--red)}.dragon-example-detail__panels{min-width:0;min-height:0}.dragon-example-detail__panel{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ink) var(--paper);min-width:0;height:100%;min-height:0;padding:2px 8px 2px 2px;overflow:auto}.dragon-example-detail__media{border:1px solid var(--line);width:100%;height:100%;min-height:0;clip-path:var(--angled-corners);background:radial-gradient(at 50% 42%,#30343b,#101115 76%);position:relative;overflow:hidden}.dragon-example-detail__media--animated{animation:.24s both dragon-detail-enter}.dragon-example-detail__image,.dragon-example-detail__video,.dragon-example-detail__embed{object-fit:contain;border:0;width:100%;height:100%;display:block}.dragon-example-detail__media-control,.dragon-example-detail__play-video{color:#f4f6f8;min-height:44px;clip-path:var(--angled-corners);cursor:pointer;background:#101115db;border:1px solid #747e89;justify-content:center;align-items:center;gap:8px;padding:10px 13px;font:400 16px/1.3 AlegreyaSans,Arial,sans-serif;display:flex;position:absolute}.dragon-example-detail__media-control{top:12px;right:12px}.dragon-example-detail__play-video{bottom:12px;right:12px}.dragon-example-detail__art-unavailable{color:#bfc7d1;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:18px;height:100%;padding:20px;display:flex}.dragon-example-detail__reference-icon{width:108px;height:94px;color:var(--red)}.dragon-example-detail__unavailable-label,.dragon-example-detail__credit{margin:0;font:400 16px/1.4 AlegreyaSans,Arial,sans-serif}.dragon-example-detail__credit{color:var(--muted);margin-bottom:16px}.dragon-example-detail__canon{border-left:3px solid var(--red);background:var(--silver);margin:0 0 16px;padding:12px 14px;font:400 18px/1.35 AlegreyaSansMedium,Arial,sans-serif}.dragon-example-detail__metadata{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin:0;display:grid}.dragon-example-detail__metadata-field{gap:7px;min-width:0;display:grid}.dragon-example-detail__metadata-label{color:var(--muted);font:400 15px/1.3 AlegreyaSansMedium,Arial,sans-serif}.dragon-example-detail__metadata-values{flex-wrap:wrap;gap:5px;min-width:0;margin:0;display:flex}.dragon-example-detail__tag{overflow-wrap:anywhere;max-width:100%;color:var(--ink);border:1px solid var(--line);background:var(--silver);padding:4px 8px;font:400 16px/1.3 AlegreyaSans,Arial,sans-serif}.dragon-example-detail__metadata-empty{color:var(--muted);font:400 16px/1.3 AlegreyaSans,Arial,sans-serif}.dragon-example-detail__sources{gap:9px;display:grid}.dragon-example-detail__navigation{align-items:center;gap:9px;min-width:0;display:flex}.dragon-example-detail__nav-button,.dragon-example-detail__full-page,.dragon-example-detail__source-link,.dragon-example-detail__form-link{min-height:44px;color:var(--ink);border:1px solid var(--line);background:var(--paper);clip-path:var(--angled-corners);cursor:pointer;align-items:center;gap:8px;padding:8px 12px;font:400 16px/1.3 AlegreyaSansMedium,Arial,sans-serif;text-decoration:none;transition:color .18s,border-color .18s,background .18s;display:inline-flex}.dragon-example-detail__nav-button:disabled{opacity:.45;cursor:default}.dragon-example-detail__counter{text-align:center;white-space:nowrap;min-width:58px;margin:0;font:400 19px/1.3 AlegreyaSansMedium,Arial,sans-serif}.dragon-example-detail__counter span{color:var(--muted);font-size:16px}.dragon-example-detail__full-page{margin-left:auto}.dragon-example-detail__source-link{justify-content:space-between}.dragon-example-detail__source-link span{flex:1}.dragon-example-detail__section-title{color:var(--ink);font:400 25px/1.2 var(--font-brand);margin:0 0 14px}.dragon-example-detail__description{white-space:pre-line;color:var(--ink);margin:0;font:400 20px/1.4 AlegreyaSans,Arial,sans-serif}.dragon-example-detail__traits{color:var(--ink);gap:8px;margin:0;padding-left:20px;font:400 18px/1.4 AlegreyaSans,Arial,sans-serif;display:grid}.dragon-example-detail__trait::marker{color:var(--red)}.dragon-example-detail__form-note{color:var(--muted);margin:16px 0;font:400 17px/1.4 AlegreyaSans,Arial,sans-serif}.dragon-example-detail__collection{border-top:1px solid var(--line);background:var(--silver);gap:9px;min-width:0;padding:10px 20px 12px;display:grid}.dragon-example-detail__thumbnails{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;gap:9px;min-width:0;padding:3px 3px 8px;display:flex;position:relative;overflow:auto hidden}.dragon-example-detail__thumbnail{text-align:left;width:100px;color:var(--ink);border:1px solid var(--line);background:var(--paper);cursor:pointer;flex-direction:column;flex-shrink:0;padding:0 0 5px;transition:border-color .18s,box-shadow .18s;display:flex;overflow:hidden}.dragon-example-detail__thumbnail--active{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}.dragon-example-detail__thumbnail-art{background:var(--steel);flex-shrink:0;place-items:center;width:100%;height:58px;display:grid;overflow:hidden}.dragon-example-detail__thumbnail-image{object-fit:cover;width:100%;height:100%;display:block}.dragon-example-detail__thumbnail-icon{width:42px;height:36px;color:var(--red)}.dragon-example-detail__thumbnail-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;padding:4px 7px 0;font:400 15px/1.2 AlegreyaSansMedium,Arial,sans-serif;display:block;overflow:hidden}.dragon-example-detail :is(button,a):focus-visible,.dragon-example-detail__panel:focus-visible{outline:2px solid var(--red);outline-offset:-3px}.dragon-example-detail :is(.dragon-example-detail__nav-button,.dragon-example-detail__source-link,.dragon-example-detail__full-page,.dragon-example-detail__form-link):hover:not(:disabled){color:var(--red);border-color:var(--red)}.dragon-example-detail__thumbnail:hover{border-color:var(--red)}@keyframes dragon-detail-enter{0%{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}@media (width>=901px) and (width<=1200px){.dragon-example-detail__tab{padding-inline:7px;font-size:15px}.dragon-example-detail__tab svg{display:none}}@media (width<=900px){.dragon-example-detail__workspace{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:12px}.dragon-example-detail__content{display:contents}.dragon-example-detail__tabs{grid-row:1}.dragon-example-detail__figure,.dragon-example-detail__panels{grid-row:2}.dragon-example-detail__workspace:not([data-tab=artwork])>.dragon-example-detail__figure,.dragon-example-detail__workspace[data-tab=artwork] .dragon-example-detail__panels{display:none}}@media (width<=600px){.dragon-example-detail__header{gap:10px;padding:12px}.dragon-example-detail__form-icon{width:34px;height:30px}.dragon-example-detail__franchise{font-size:14px}.dragon-example-detail__title{font-size:24px}.dragon-example-detail__frame{padding:12px}.dragon-example-detail__tab{gap:5px;padding:8px;font-size:15px}.dragon-example-detail__tab svg{display:none}.dragon-example-detail__collection{gap:7px;padding:8px 12px 10px}.dragon-example-detail__nav-button,.dragon-example-detail__full-page{justify-content:center;min-width:44px;padding:8px}.dragon-example-detail__nav-button>span,.dragon-example-detail__full-page>span{display:none}.dragon-example-detail__description{font-size:19px}.dragon-example-detail__thumbnail{width:86px}.dragon-example-detail__thumbnail-art{height:48px}.dragon-example-detail__thumbnail-name{font-size:14px}}@media (height<=700px){.dragon-example-detail__header{padding-block:10px}.dragon-example-detail__frame{padding-block:12px}.dragon-example-detail__thumbnail-art{height:44px}.dragon-example-detail__collection{padding-block:8px}.dragon-example-detail__section-title{margin-bottom:10px;font-size:23px}.dragon-example-detail__description{font-size:18px;line-height:1.35}.dragon-example-detail__form-note{margin-block:12px;font-size:16px}}@media (height<=420px){.dragon-example-detail__header{padding-block:6px}.dragon-example-detail__franchise{display:none}.dragon-example-detail__title{text-overflow:ellipsis;white-space:nowrap;font-size:20px;overflow:hidden}.dragon-example-detail__frame{padding-block:6px}.dragon-example-detail__workspace,.dragon-example-detail__content{gap:8px}.dragon-example-detail__collection{gap:6px;padding-block:6px}.dragon-example-detail__thumbnail-art{height:32px}.dragon-example-detail__thumbnail-name{display:none}.dragon-example-detail__thumbnail{padding-bottom:0}}@media (prefers-reduced-motion:reduce){.dragon-example-detail__frame--animated,.dragon-example-detail__media--animated{animation:none}.dragon-example-detail :is(button,a){transition:none}.dragon-example-detail__thumbnails{scroll-behavior:auto}}